Я уже писала ранее об оптимизации заголовков в шаблонах Blogspot (Blogger) в статье Настраиваем h1, h2 и h3 темы Blogger. Однако эту статью можно использовать только при настройке старых тем, новые же (последние) темы Blogspot оптимизируют немного по-другому, поэтому я и пишу данную статью.
Эта инструкция написана на примере видоизменения тем Notable, Emporio, Soho и Contempo.
Исходные данные:
- На главной странице этих темы в заголовке h1 – название блога (это мы исправлять не будем), заголовки статей – в теге h3, заголовки виджетов – в h3.
- На страницах постов – в теге h1 – заголовок блога, h3 – заголовок поста и заголовок виджета.
После преобразований:
- На главной странице – заголовок блога в h1, заголовки статей – в h2, заголовки виджетов оставим в h3.
- На страницах постов – заголовок блога – в теге h2, заголовки статей – h1, заголовки виджетов – в h3.
Ход действий:
- Прежде чем приступать к изменениям, сделайте резервную копию темы!
- Найдите в Шаблоне блога отрезок кода: <b:include name='super.title'/>
Этот тег входит в состав кода:
<b:includable id='title'>
<div>
<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>
<b:include name='super.title'/>
</div>
</b:includable> - Замените код <b:include name='super.title'/> на код, указанный ниже:
- Код <b:include name='super.title'/> встречается дважды в шаблоне блога. Замените его в теме на указанный выше код дважды.
- Теперь приступаем к оптимизации заголовков статей блога.
а) Если у вас тема 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 != ""'>
<div class='snippet-fade r-snippet-fade hidden'/>
</b:if>
</div>
</a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
<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:if cond='data:post.title'>
<b:if cond='data:blog.pageType == "index"'>
<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 == "archive"'/>
<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 == "index"'>
<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 == "archive"'/>
<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, поэтому мы оставляем их без изменений.
Спасибо! Я подумала вы про меня забыли. Пойду настраивать...
Здравствуйте, Наталья. С наступающим вас Новым Годом!
Статья как всегда на высшем уровне!!!
Хотел только уточнить:
Из статьи: «Найдите в Шаблоне блога отрезок кода:
Этот тег входит в состав кода:
1. <b:includable id='title'>
<div>
<b:class cond='data:this.imagePlacement == "REPLACE"' 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'/> на предложенный код.
Вот спасибо вам! пришлось даже адблок отключить 🙂
Наталья, я у вас тут новичок, не знаю можно ли вопросы задавать не в тему, если что вы простите уж.
Вы не знаете как в теме Emporio убрать с главной виджет-сниппет, вобщем порезанное фото, а что бы туда грузилась обычная превьюха, как на остальных страницах 320х320 или другого стандартного размера
Silver Bug, зайдите во вкладку "Дизайн", в макете увидите элемент "Featured Post", в нём заключен гаджет "Избранное сообщение". Измените избранное сообщение, нажав на редактирование - уберите галочку с пункта "Показать виджет избранное сообщение".
Наталья, не, я не про это, скрин прицепить некуда. Этот виджет отключен уже.
В самой теме на главной посты выводятся как картинки, так вот эти картинки вырезаны из оригинала. Хотелось бы вместо них увидеть уменьшенный оригинал, то есть превьюшку как на странице самого поста. 3 дня мучений с цсс и что-то никак, по аналогии из другх тем ничего не удалось сделать, а в коде не смыслю, не знаю как убрать огрызок фотки и вставить превью.
В теме изменить html код - найдите отрезок кода:
<style>
.<data:thumbClassName/> {background-image:urlundefined<b:eval expr='resizeImageundefineddata:post.featuredImage, 385, "385:184").cssEscaped'/>);}
</style>
И замените его на этот:
<style>
.<data:thumbClassName/> {background-image:urlundefined<b:eval expr='resizeImageundefineddata:post.featuredImage, 385, "1:1").cssEscaped'/>);}
</style>
Так вы измените соотношение сторон превью на квадратные (1:1).
Сохраните изменения. Ничего не изменилось.
Теперь Тема -> Настроить -> Дополнительно -> Добавить CSS ->
.feed-view .post-wrapper .snippet-thumbnail, .feed-view .post-wrapper .snippet-thumbnail-container {
height: 290px;
}
Посмотрите, может быть размер нужно будет поправить. "Применить к блогу".
Цифры и соотношения сторон может быть нужно будет подогнать.
Наталья, спасибо Вам за ответ, увы, ничего не получилось, перепробовав несколько вариантов, пришлось просто сделать везде 385, то есть большой квадрат
Я думаю, что если уменьшить изображения в записях блога, то миниатюры на главной можно выводить и меньшего размера, но это также нужно экспериментировать. Сначала уменьшить изображение в одном посте, поиграться с настройками, и лишь потом изменять в оставшихся. Это, конечно, трудоёмко, но другого способа не подскажу.
Спасибо Вам за ответ, к сожалению уменьшать оригинал не мой случай. Не судьба , видать.
Silver Bug, еще как вариант - можно залить в сообщения картинки меньшего размера специально для превью, а затем эти превьюшки скрыть, чтобы они не выводились на странице записей. Здесь я рассказываю, как это сделать.
Здравствуйте, скажите пожалуйста, а как изменить заголовки страниц в данных темах?
Полностью все сделал как в инструкции. Но осталась проблема, что на статических страницах название блога в h1 и название статьи в h1. Как это исправить?