2018-10-20

Textual description of firstImageUrl

Оптимизация заголовков последних тем 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 комментариев :

Наталья Иконописцева комментирует...

Спасибо! Я подумала вы про меня забыли. Пойду настраивать...

Balance комментирует...

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

Из статьи: «Найдите в Шаблоне блога отрезок кода:
Этот тег входит в состав кода:
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>

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

Иванова Наталья комментирует...

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

Silver Bug комментирует...

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

Иванова Наталья комментирует...

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

Silver Bug комментирует...

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

Иванова Наталья комментирует...

В теме изменить 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;
}


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

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

Silver Bug комментирует...

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

Иванова Наталья комментирует...

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

Silver Bug комментирует...

Спасибо Вам за ответ, к сожалению уменьшать оригинал не мой случай. Не судьба , видать.

Иванова Наталья комментирует...

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

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности