blogger: статические страницы как в wordpress

пятница, октября 02, 2009

Если сравнить принцип работы движков blogger и wordpress со страницами, то можно выделить одно главное отличие. В blogger есть только Posts, т.е. так называемы посты, статьи и т.д. В wordpress дело со страницами блога обстоит иначе: есть те же Posts, а так же Pages - статические страницы. Давайте попробуем разобраться зачем они нужны?

Pages в wordpress применяются для предоставления читателям блога информации, которая постоянно должна быть на видном месте. Классические и часто используемые блоггерами Pages: "Об авторе"и "Контактная информация". Конечно этим можно не ограничиваться и создавать Pages, наполненные тем контентом, который необходим автору блога и читателям.

В wordpress подобные страницы создаются через панель администрирования в несколько кликов мыши. Весь процесс создания очень прост. В используемом мною blogger возможности создания статических страниц не предусмотрено, но это не значит что их нельзя создать. В данной статье я расскажу о том, как можно создать аналог статических страниц движка wordpress в blogger. Конечно же для этого придется править шаблон, но блоггеры, использующие сервис blogger.com уже привычны к такому рода трудностям, вспомните хотя бы способы создания облака тегов и сообщений подкатом (хотя данные функции совсем недавно стало возможным реализовать стандартными средствами blogger).

В blogger, как Вы уже могли догадаться, создавать статические страницы мы будем на базе обычных постов. Чтобы было понятно, что нам придется изменить в шаблоне, попробуем описать основные критерии для статической страницы, или основные отличия ее от стандартного поста:
1. На странице не должны отображаться заголовок поста и дата (заголовок лучше оформить в теле поста и задать ему форматирование стандартными средствами html, например при помощи тегов <span>...</span>)
2. Должен отсутствовать футер поста, это то местно, где обычно отображаются ярлыки, имя автора, количество комментариев и т.д.
3. Должны отсутствовать навигационные ссылки "Следующие", "Главная страница", "Предыдущие".
4. Пост, замаскированный под статическую страницу не должен попадать к подписчикам блога через RSS.
5. На странице должна быть исключена возможность комментирования.
6. Страница не должна отображаться в виджете архива блога.

Теперь когда понятны основные моменты, которые нам нужно учесть, можно приступить непосредственно к реализации.

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

Перед всеми действиями сохраните Ваш шаблон! Также рекомендую следить за обновлениями поста (заголовок update в конце статьи), так как данное решение пока тестируется!

1. Создание страницы
Смотрим, в каком месяце был написан самый первый пост в Вашем блоге. У меня самый первый пост опубликован в марте 2009 года, следовательно заготовку для статической страницы будем создавать задним числом, т.е. дата сообщения должна быть например 1 февраля 2009 года.

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

Создаем новый пост, пишем название, например contact-details, наполняем пост необходимой информацией. Далее нажимаем на ссылку "Настройки сообщения", под надписью "Комментарии читателей" выбираем пункт "запретить", в поле "Дата и время публикации" вводим 01.02.09, время оставляем без изменений, нажимаем на кнопку "Опубликовать сообщение". Все, заготовка для статической страницы создана, теперь можно приступить к ее оформлению, путем правки шаблона.

Важно: перейдите на только что созданный пост и скопируйте из заголовка дату, с точным форматированием, это понадобится нам в дальнейшем при правке шаблона. Мой пост для статической страницы опубликован 1 февраля 2009 года, в соответствии с шаблоном блога отображение даты выглядит следующим образом: воскрсенье, Февраль 01, 2009. Эту дату именно с таким форматированием я буду использовать при правке шаблона. Вам необходимо менять дату во всех примерах на ту, которая применима к Вашему блогу, пожалуйста не забывайте об этом!

2. Убираем заголовок поста и дату.
Идем в панель администрирования - "Дизайн" - вкладка "Изменить HTML", отмечаем галочкой пункт "Расширить шаблоны виджета", ставим курсор в код шаблона и ищем следующий код:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Меняем этот кусок кода на следующий:

<b:if cond='data:post.dateHeader != &quot;воскрсенье, Февраль 01, 2009&quot;'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Тем самым мы как бы говорим шаблону нашего блога: "заголовок поста нужно отображать только в тех постах, где разрешено комментирование".
Тем же образом поступаем с датой поста. Ищем код:

<h2 class='date-header'><data:post.dateHeader/></h2>

Заменяем на:

<b:if cond='data:post.dateHeader != &quot;воскрсенье, Февраль 01, 2009&quot;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>


3. Убираем футер поста
В blogger футер поста в шаблоне обозначен следующим образом:

<div class='post-footer'>
...
</div>

Между этими тегами обычно в шаблоне много тегов, сам футер делится чаще всего на три части:

<div class='post-footer-line post-footer-line-1'>
...
</div>
...
<div class='post-footer-line post-footer-line-2'>
...
</div>
...
<div class='post-footer-line post-footer-line-3'>
...
</div>

Более того, между этими тегами есть куча кода, который выводит в футер ярлыки, имя автора поста, дату, количество комментариев и прочую информацию. Для нашей статической страницы нужно запретить отображение всего футера, поэтому тут важно найти закрывающий тег:

</div>

Именно тот тег, который относится к футеру, а не к его составляющим, которые я упомянул выше.
Итак, вначале самое легкое, ищем код:

<div class='post-footer'>

Меняем его на:

<b:if cond='data:post.dateHeader != &quot;воскрсенье, Февраль 01, 2009&quot;'>
<div class='post-footer'>

Теперь по-сложнее, ищем то место, где вышеупомянутый тег закрывается. В моем шаблоне есть конструкция:

<div class='post-footer-line post-footer-line-3'>
...
</div>

Это последняя линия футера (в Вашем шаблоне в футере может быть последней line-2 или line-4, но это не так важно, главное найти эту последнюю линию футера).
Ищем тег, который закрывает последнюю линию футера:

</div>

Под этим тегом должен быть еще такой же, именно он и закрывает конструкцию кода футера,следовательно под ним нужно вставить следующий тег:

</b:if>


Важно: выше закрывающего тега if должно находится два закрывающих тега div, один из них относится к линии футера, другой непосредственно ко всему футеру!

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

4. Убираем навигационные ссылки
Теперь сделаем так, чтобы ссылки навигации не отображались на статических страницах, для этого найдем код:

<!-- navigation -->
<b:include name='nextprev'/>

Заменяем его на:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader != &quot;воскрсенье, Февраль 01, 2009&quot;'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
</b:loop>
<b:else/>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>

Теперь навигационные ссылки будут отображаться только на тех страницах блога, где разрешены комментарии.

5. Прячем статические страницы из RSS канала.

Тема создания статических страниц в blogger хорошо освещена в англоязычной блогосфере, но меня удивил тот факт, что во всех решениях авторами не был найден способ прятать статические страницы в RSS канале, хотя сделать это двольно просто. Нужно всего лишь указать в feedburner выводить в фид только те посты которые были созданы начиная с определенной даты. В моем блоге - это пост, опубликованный 23 марта 2009 года. Статические страницы я создаю задним числом - 1 февраля 2009 года, следовательно ссылка на rss канал моего блога должна выглядеть следующим образом:

http://www.debianblog.org.ru/feeds/posts/default?published-min=2009-03-23&alt=rss

В стандартном исполнении она выглядела так:

http://www.debianblog.org.ru/feeds/posts/default?alt=rss

Я использую свой домен для блога. Если вы не используете свой домен, то измененный адрес канала фида будет таким:

http://имя_блога.blogspot.com/feeds/posts/default?published-min=2009-03-23&alt=rss


Для достижения поставленной цели нам просто нужно подменить ссылку на канал блога в настройках сервиса feedburner. Самое замечательное, что Вашим подписчикам не придется менять ссылку на канал сайта, ведь в конечном итоге для них она так и останется:

http://feeds.feedburner.com/имя вашего фида

Или:

http://feeds2.feedburner.com/имя вашего фида

Вы просто меняете ссылку на канал сайта для feedburner, но не меняете конечный адрес Вашего фида.
Итак, заходим в панель администрирования feedburner, там выбираем необходимый фид, затем кликаем по ссылке "Edit Feed Details…", в появившемся меню в строке "Original Feed:" вносим необходимые изменения, сохраняем, нажав кнопку "Save Feed Details". Теперь выбираем вкладку "Решай проблемы", на ней нажимаем кнопку "Resync Now", для того чтобы фид обновился.

6. Убираем статические страницы из виджета архива блога.

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

Важно: в приведенных ниже примерах не забывайте изменить дату, применимую к Вашему блогу!

Если вы используете стиль "Простой список", то найдите в шаблоне блога следующий код (не забываем включить опцию "Расширить шаблоны виджета"):

<b:includable id='flat' var='data'>

Заменяем найденный код на следующий:

<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<b:if cond='data:i.name != "Февраль 2009"'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:if>
</b:loop>
</ul>
</b:includable>


Для стиля "Иерархия", находим код:

<b:includable id='interval' var='intervalData'>%u201D

Заменяем его на:

<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.name != "Февраль 2009"'>
<ul>
<li expr:class='"archivedate " data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:if>
</b:loop>
</b:includable>


Если вы используете стиль "Раскрывающееся меню", то находим код:

<b:includable id='menu' var='data'>%u201D

Заменяем на:

<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<b:if cond='data:i.name != "Февраль 2009"'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:if>
</b:loop>
</select>
</b:includable>


Итак, после вышеописанных действий у Вас должна получится статическая страница. Вы можете создавать такие страницы в любом количестве. Ссылки на созданные страницы можно поместить в сайдбар блога с помощью виджета "Список ссылок".

Важно: когда создаете посты под статические страницы, не забывайте проставлять дату "задним числом", причем одну и ту же (которую использовали в первый раз при выполнении действий, описанных в этой статье)! В своем блоге данные страницы я создаю с датой 1 февраля 2009 года.

Пример статической страницы в моем блоге

Update 07.09.2009: Как выяснилось, использование конструкции:

<b:if cond='data:post.dateHeader != &quot;воскрсенье, Февраль 01, 2009&quot;'>

не всегда корректно изменяет дизайн статических страниц, если их создано несколько.
После тестирования различных решений я предлагаю вместо вышеупомянутой конструкции использовать следующую:


<b:if cond='data:post.allowComments'>

Используйте ее во всех пунктах, кроме:
6. Убираем статические страницы из виджета архива блога (в этом примере все работает корректно)
Единственный недостаток такого решения: если Вы в своем блоге используете посты без комментариев не только для статических страниц, то все произведенные действия будут применятся также к этим постам.


Для написания данной статьи использованы следующие материалы:
How to Create Static Pages in Blogger
Create Static Pages in Blogger – Part 2
Remove Navigation Links For Static Pages in Blogger
Reference Guide - Blogger APIs - Google Code
Protocol Reference - Google Data Protocol - Google Code

0 коммент.:

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