dert.ru/travel — путешествия, фотографиисм. также: главная страница dert.ru, «обрамлятор»Фотографии Русского Севера

WordPress. Доработка напильником: делаем автоматическое оглавление

Список всех частей: Статьи и заметки

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

Почему ворпдпресс? Быстро ставится (реально быстро, в один клик), продуманная и симпатичная админка и возможность установки обновлений прямо из нее, сервис отлова спам-комментариев и подходящая внутренняя структура. Другие кандидаты joomla и drupal выбыли из гонки как унылые и негодные для моих целей. А писать движок самому с нуля не хочется, уже перерос этот возраст.

Изначально вордпрессовский движок рассчитан на два типа записей — собственно запись блога и страница. Первый тип нас мало интересует, т.к. навигация по нему аналогична ЖЖ, те же рубрики и теги. А вот страницы — то, что доктор прописал. Потыкав в движок палочкой, я выяснил, что каждая страница имеет такие параметры как "родительская" и "порядок", и их можно вручную вытащить из базы данных. Как раз это нам и требуется для построения иерархической структуры. По умолчанию движок не умеет сам делать оглавления из вложенных страниц, но мы его научим.

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

Вывод содержания на заглавной странице отчета http://dert.ru/travel/trofi2000-3

Если страница является вложенной, то в ее начале выводится ссылка на родителя (список всех частей):

Начало второй части отчета http://dert.ru/travel/trofi2000-3/part2

А в конце страницы показывается список всех вложенных страниц, текущая часть выделяется стрелкой и курсивом:

Окончание второй части отчета http://dert.ru/travel/trofi2000-3/part2

При такой навигации у нас есть точка входа в отчет (содержание), и с любой страницы отчета мы видим, что читаем сейчас и можем сразу же перейти на любую часть отчета. Что важно, все эти списки и ссылки у меня на сайте формируются автоматически. Я лишь создаю заглавную страницу-родителя с описанием отчета, а потом выбираю ее в качестве родительской при создании вложенных страниц, проставив необходимый порядок следования частей. Остальное движок уже делает сам.

Как это сделать?

1) Выбираем в меню админки "Внешний вид" → "Редактор", потом выбираем "Основной шаблон":

в этом шаблоне находим строку:

<?php the_content(__('(more…)')); ?>

и меняем ее на этот код:

<?php
$current_post_id = $post->ID;
// get the link to the parent post
if( $post->post_type == 'page' ) {
if( $post->post_parent ) {
$q_parent_post = new WP_Query( array( 'post_type' => 'page', 'p' => $post->post_parent ) );
$parent_name = $q_parent_post->post->post_name;
$parent_title = $q_parent_post->post->post_title;
if( $q_parent_post->have_posts() ) {
echo '<p class="p_contentlist">'.'<i>Список всех частей:</i> <a href="'.get_bloginfo('url').'/'.$parent_name.'">'.$parent_title.'</a>'."</p>";
}
}
}
?>
<?php the_content(__('(more…)')); ?>
<?php
// get the children pages list
if( $post->post_type == 'page' ) {
// show the pages list for the top content page
if( !$post->post_parent ) {
$parent_name = $post->post_name;
$q_children = new WP_Query( array( 'post_type' => 'page', 'post_parent' => $post->ID, 'orderby' => 'menu_order', 'order' => 'ASC' ) );
if( $q_children->have_posts() ) {
echo '<ul class="children_pages">'."\n";
while ( $q_children->have_posts() ) : $q_children->the_post();
if( $q_children->post->post_parent ) {
echo '<li><a href="'.get_bloginfo('url').'/'.$parent_name.'/'.$q_children->post->post_name.'">'.$q_children->post->post_title.'</a></li>'."\n";
}
endwhile;
echo "</ul>"."\n";
}
// else show pages list at the bottom of every children page
} else {
echo '<p class="p_children_pages">Список всех частей раздела <a href="'.get_bloginfo('url').'/'.$parent_name.'"><b>'.$parent_title.'</b></a>:</p>';
$q_children = new WP_Query( array( 'post_type' => 'page', 'post_parent' => $post->post_parent, 'orderby' => 'menu_order', 'order' => 'ASC' ) );
if( $q_children->have_posts() ) {
echo '<ul class="children_pages">'."\n";
while ( $q_children->have_posts() ) : $q_children->the_post();
if( $q_children->post->post_parent ) {
if( $q_children->post->ID == $current_post_id ) {
echo '<li class="li_children_active">'.$q_children->post->post_title.'</li>'."\n";
} else {
echo '<li><a href="'.get_bloginfo('url').'/'.$parent_name.'/'.$q_children->post->post_name.'">'.$q_children->post->post_title.'</a></li>'."\n";
}
}
endwhile;
echo "</ul>"."\n";
}
}
}
?>

2) Потом в редакторе выбираем "Таблицу стилей":

И в самый конец файла добавляем:

/* CUSTOM CSS FOR CONTENT LIST */
ul.children_pages, ul.children_pages li {
list-style-type: none;
margin: 2px 0 5px 0;
padding: 0 0 0 8px;
}
ul.children_pages li::before {
content: "— ";
}
ul.children_pages li.li_children_active {
font-style: italic;
}
ul.children_pages li.li_children_active::before {
content: "? ";
}
p.p_contentlist {
padding: 3px 0 5px 0;
}
p.p_children_pages {
padding-top: 20px;
}

Все!

Уточню, что я использовал стандартную тему оформления Classic, но не думаю, что в других темах будут какие-то отличия. Посмотреть доработанный движок в действии можно на dert.ru/travel.

Дополнения, пожелания, идеи, как всегда, приветствуются.

Оформлено с помощью «Обрамлятора»

Список всех частей раздела Статьи и заметки:

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

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

 

RSS-лента комментариев к данной записи
TrackBack URL

© Сергей Нечаев, 2005 — 2019   Правовая информация   61 queries. 0,134 seconds.