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

Nov 12, 2012 23:00

Звонок в контору, оказывающую помощь по устранению конкурентов:
- Мне тут один тип надоел, его надо убрать!
- Hу что вы, мы этим не занимаемся...
- Плачу 10 миллионов!
- Адрес?
- Новая улица, дом 20, квартира...
- Хватит, номера дома достаточно!
© анекдот

Пока наши разные надзоры упражняются в меткости, накрывая точечными лепешечными ударами сайты, содержащие запрещеннуюtm информацию, самое время подумать о сохранности всего ценного, что напощено в ЖЖ за последнее время. Речь не идет о смене блог-платформы, мне ЖЖ нравится. Однако при нынешних методах борьбы с неугодной информацией под метлу может запросто попасть и он, а обилие оппозиционно настроенных юзеров и американская прописка ресурса оптимизма как-то не добавляют.

Cам формат ЖЖ располагает к созданию продуманных объемных постов, часто многостраничных, а вот удобной навигации по страницам нет. У меня и у многих других френдов уже устоялся формат подобных отчетов, когда создается один пост-оглавление, а внутри каждой отдельной записи дается ссылка на него. Но каждый раз приходится вручную прописывать все ссылки, и это печалит. А потом еще отчеты перемежаются другими постами о какой-нибудь ерунде, и искать интересные записи двух-трехлетней давности уже становится неудобно. Конечно, помогают теги, но все равно хочется видеть все отчеты в одном месте и сразу.

Поэтому я собрался и за пару вечеров перенес все свои отчеты на отдельный сайт dert.ru/travel. К слову, сделал я это еще пару недель назад, просто так удачно совпало с последними событиями. Там нет рекламы, там понятная навигация, оглавление и ссылки добавляются автоматически и нет зависимости от ЖЖ и его внезапных экспериментов со стилями.

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

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

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


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


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

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


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

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


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

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

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

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


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

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

$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 '
'.'Список всех частей: '.$parent_title.''."
";
}
}
}
?>

// 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 '
    '."\n";
    while ( $q_children->have_posts() ) : $q_children->the_post();
    if( $q_children->post->post_parent ) {
    echo '
  • '.$q_children->post->post_title.'
  • '."\n";
    }
    endwhile;
    echo "
"."\n";
}
// else show pages list at the bottom of every children page
} else {
echo '
Список всех частей раздела '.$parent_title.':
';
$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 '
    '."\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 '
  • '.$q_children->post->post_title.'
  • '."\n";
    } else {
    echo '
  • '.$q_children->post->post_title.'
  • '."\n";
    }
    }
    endwhile;
    echo "
"."\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.

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

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

wordpress, статьи, как сделать, содержание, движок, оглавление

Previous post Next post
Up