Оптимизация заголовков последних тем Blogger

Оптимизация заголовков последних тем Blogger
Я уже писала ранее об оптимизации заголовков в шаблонах Blogspot (Blogger) в статье Настраиваем h1, h2 и h3 темы Blogger. Однако эту статью можно использовать только при настройке старых тем, новые же (последние) темы Blogspot оптимизируют немного по-другому, поэтому я и пишу данную статью.
Эта инструкция написана на примере видоизменения тем Notable, Emporio, Soho и Contempo.
Исходные данные:

  1. На главной странице этих темы в заголовке h1 – название блога (это мы исправлять не будем), заголовки статей – в теге h3, заголовки виджетов – в h3.
  2. На страницах постов – в теге h1 – заголовок блога, h3 – заголовок поста и заголовок виджета.

После преобразований:

  1. На главной странице – заголовок блога в h1, заголовки статей – в h2, заголовки виджетов оставим в h3.
  2. На страницах постов – заголовок блога – в теге h2, заголовки статей – h1, заголовки виджетов – в h3.

Ход действий:

  1. Прежде чем приступать к изменениям, сделайте резервную копию темы!
  2. Найдите в Шаблоне блога отрезок кода: <b:include name='super.title'/>
    Этот тег входит в состав кода:

    <b:includable id='title'>
               <div>
                 <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
                 <b:include name='super.title'/>
               </div>
             </b:includable>

  3. Замените код <b:include name='super.title'/> на код, указанный ниже:
  4. <b:if cond='data:view.isPost'>              <h2><a expr:href='data:blog.homepageUrl'><data:title/></a></h2>              <b:else/>              <b:include name='super.title'/>            </b:if> 

  5. Код <b:include name='super.title'/> встречается дважды в шаблоне блога. Замените его в теме на указанный выше код дважды.
  6. Теперь приступаем к оптимизации заголовков статей блога.
    а) Если у вас тема Emporio, то найдите отрезок кода
    <h3 class='post-title entry-title'>, он заключен в отрезке кода:


                 <a expr:name='data:post.id'/>
                 <h3 class='post-title entry-title'>
                   <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
                     <a expr:href='data:post.link ?: data:post.url'>
                       <div class='snippet-container r-snippet-container'>
                         <div class='r-snippetized'>
                           <data:post.title/>
                         </div>
                         <b:if cond='data:post.title != &quot;&quot;'>
                           <div class='snippet-fade r-snippet-fade hidden'/>
                         </b:if>
                       </div>
                     </a>
                   <b:else/>
                     <data:post.title/>
                   </b:if>
                 </h3>
              

Замените весь этот код на:

<b:if cond='data:post.title'>
                     <b:if cond='data:blog.pageType == &quot;index&quot;'>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
</h2>
                       <b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
  </h2>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <data:post.title/>
     <b:else/>
        <b:if cond='data:post.url'>
         <data:post.title/>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
</h1></b:if>
                    </b:if>

б) Если тема вашего блога Notable, Soho или Contempo, то найдите также отрезок кода <h3 class='post-title entry-title'>, он будет заключен в следующий код:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

Измените весь этот код на следующий:

<b:if cond='data:post.title'>
                     <b:if cond='data:blog.pageType == &quot;index&quot;'>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
</h2>
                       <b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
  </h2>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <data:post.title/>
     <b:else/>
        <b:if cond='data:post.url'>
         <data:post.title/>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
</h1></b:if>
                    </b:if>

Внимание! Код <h3 class='post-title entry-title'>,  может встречаться в последних темах блога несколько раз. Чтобы все получилось, сделайте замену кода, столько раз, сколько раз встречается код <h3 class='post-title entry-title'>.
Заголовки виджетов заключены в тегах h3, поэтому мы оставляем их без изменений.

11 ответов к «Оптимизация заголовков последних тем Blogger»

  1. Здравствуйте, Наталья. С наступающим вас Новым Годом!
    Статья как всегда на высшем уровне!!!
    Хотел только уточнить:

    Из статьи: «Найдите в Шаблоне блога отрезок кода:
    Этот тег входит в состав кода:
    1. <b:includable id='title'>
    <div>
    <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
    <b:include name='super.title'/>
    </div>
    </b:includable>

    Замените код на код, указанный ниже:
    2. <b:if cond='data:view.isPost'> <h2><a expr:href='data:blog.homepageUrl'><data:title/></a></h2> <b:else/> <b:include name='super.title'/> </b:if>

    Скажите, нужно менять именно на код ниже. Или же вот этот приведённый первый код убрать полностью? И вставить второй?

  2. Спасибо! Поздравляю вам также с наступающим Новым годом!
    Нужно заменить именно отрезок кода <b:include name='super.title'/> на предложенный код.

  3. Вот спасибо вам! пришлось даже адблок отключить 🙂
    Наталья, я у вас тут новичок, не знаю можно ли вопросы задавать не в тему, если что вы простите уж.
    Вы не знаете как в теме Emporio убрать с главной виджет-сниппет, вобщем порезанное фото, а что бы туда грузилась обычная превьюха, как на остальных страницах 320х320 или другого стандартного размера

  4. Silver Bug, зайдите во вкладку "Дизайн", в макете увидите элемент "Featured Post", в нём заключен гаджет "Избранное сообщение". Измените избранное сообщение, нажав на редактирование — уберите галочку с пункта "Показать виджет избранное сообщение".

  5. Наталья, не, я не про это, скрин прицепить некуда. Этот виджет отключен уже.
    В самой теме на главной посты выводятся как картинки, так вот эти картинки вырезаны из оригинала. Хотелось бы вместо них увидеть уменьшенный оригинал, то есть превьюшку как на странице самого поста. 3 дня мучений с цсс и что-то никак, по аналогии из другх тем ничего не удалось сделать, а в коде не смыслю, не знаю как убрать огрызок фотки и вставить превью.

  6. В теме изменить html код — найдите отрезок кода:

    <style>
    .<data:thumbClassName/> {background-image:urlundefined<b:eval expr='resizeImageundefineddata:post.featuredImage, 385, &quot;385:184&quot;).cssEscaped'/>);}
    </style>

    И замените его на этот:

    <style>
    .<data:thumbClassName/> {background-image:urlundefined<b:eval expr='resizeImageundefineddata:post.featuredImage, 385, &quot;1:1&quot;).cssEscaped'/>);}
    </style>

    Так вы измените соотношение сторон превью на квадратные (1:1).
    Сохраните изменения. Ничего не изменилось.

    Теперь Тема -> Настроить -> Дополнительно -> Добавить CSS ->
    .feed-view .post-wrapper .snippet-thumbnail, .feed-view .post-wrapper .snippet-thumbnail-container {
    height: 290px;
    }

    Посмотрите, может быть размер нужно будет поправить. "Применить к блогу".

    Цифры и соотношения сторон может быть нужно будет подогнать.

  7. Наталья, спасибо Вам за ответ, увы, ничего не получилось, перепробовав несколько вариантов, пришлось просто сделать везде 385, то есть большой квадрат

  8. Я думаю, что если уменьшить изображения в записях блога, то миниатюры на главной можно выводить и меньшего размера, но это также нужно экспериментировать. Сначала уменьшить изображение в одном посте, поиграться с настройками, и лишь потом изменять в оставшихся. Это, конечно, трудоёмко, но другого способа не подскажу.

  9. Silver Bug, еще как вариант — можно залить в сообщения картинки меньшего размера специально для превью, а затем эти превьюшки скрыть, чтобы они не выводились на странице записей. Здесь я рассказываю, как это сделать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *