Выпуск 27. Делаем собственный шаблон для WordPress (часть 4)

Рубрика: WordPress -> Архив рассылки
Вторник, 10 апреля 2007 г.
Просмотров: 2477
Подписаться на комментарии по RSS

Продолжаем

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

Боковая панель

Добавим в правую боковую панель (оранжевую) остальные функциональные блоки:

    **Постоянные страницы

    **Поиск

    **Реклама

    **Счетчики

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

Открываем /-sidebar-2.php-/ и в конце пишем уже известный нам код:

  1.  <?php
  2.  if (function_exists('show_ushka')) show_ushka('counters');
  3.   else {
  4.  ?>
  5.  <div class="counters">
  6.  html-код счетчиков
  7.  </div>
  8.  <?php } ?>

Также добавим в /-style.css-/ описание класса для счетчиков:

  1.  div.counters {margin: 5px;}

Поиск

Давайте расположим поиск по сайту в самом верху второго сайдбара. Для поиска в WordPress'е используется "стандартный" код:

  1.  <h2 class="box">Поиск</h2>
  2.  <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
  3.  <input type="text" name="s" id="s" />&nbsp;
  4.  <input type="submit" id="searchsubmit" name="Submit" value="Go!" />
  5.  </form>

Его нужно добавить в самое начало файла /-sidebar-2.php-/.

Сразу же пропишем в /-style.css-/ оформление для этих элементов:

  1.  #searchform {margin: 5px; }
  2.  #s {font-size: 8pt; width: 110px;}
  3.  #searchsubmit {font-size: 8pt;}

То есть для всего блока я установил отсутупы по 5px, для текстового поля - размер шрифта 8pt, а ширину 110px. Для кнопки укажем размер шрифта тоже в 8pt.

Насчет кнопки. Разные браузеры по разному отображают кнопку. Поэтому добиться абсолютной идентичности не получится. Можно конечно использовать хаки, а можно сделать кнопку в виде картинки, тогда она будет единая для всех браузеров. Сейчас мы не будем ею заниматься, поскольку это уже часть дизайнерской работы.

Постоянные страницы

Для вывода списка постоянных страниц используется функция /-wp_list_pages-/, однако эта функция формирует не очень корректный SQL-запрос к базе данных и, тем самым, создает излишнюю нагрузку на сервер. Поэтому мы будем использовать другой способ, который я описал на своем блоге в статье "Ускоряем WordPress за счет постоянных страниц".

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

1. Как написано в статье, создаем файл /-maxsite-function.php-/ и добавляем в него функцию /-maxsite_get_page-/.

2. Открываем файл /-index.php-/. В него в самое начало (после /-require_once('header.php');-/) дописываем:

  1.  require_once('maxsite-function.php');

3. В файле /-sidebar-2.php-/ после блока поиска добавим:

  1.  <h2 class="box">Страницы</h2>
  2.  <ul class="is_link">
  3.  <?php maxsite_get_page('tag_start=<li>&tag_end=</li>') ?>
  4.  </ul>

Завершающие моменты

Практически наш шаблон-каркас готов. Кроме двух вещей: первая - нам нужен еще один файл для шаблона: /-comments.php-/ и второе - мы еще не решили как будут выводиться рубрики.

Файл /-comments.php-/ нам нужно взять из шаблона /-default-/. Сделать это нужно обязательно, поскольку в дальнейшем (возможно) мы будем изменять оформление комментариев (или встраивать плагины и т.д.) и делать это лучше со своей копией.

Файл comments.php

Итак, просто копируем файл из шаблона "default". Сразу же немного изменим оформление для комментариев. В частности, в нашем шаблоне поле ввода комментария получилось довольно широким. Поэтому мы добавим в /-style.css-/ строчку:

  1.  #comment {width: 500px;}

Теперь наши комментарии выглядят симпатичней. grin

Вывод рубрик

Раньше мы создали файл /-main-cat.php-/ для того, чтобы выводить рубрики. Сегодня самое время поговорить о нем.

Для вывода рубрик в WordPress'е обычно используют тот же алгоритм, что и для вывода записей. То есть при клике на рубрику, мы получаем не только список заголовков, но и их тексты, что не всегда оптимально. На мой же взгляд, удобней оставить только заголовки с датой публикации (например так).

Алгоритм такого вывода практически ничем не отличается от вывода обычных записей, с той лишь разницей, что нет необходимости выводить текст, рубрику, а также вводить условия /-is_page-/ и /-is_single-/, поскольку в рубрике выводятся только обычные записи. Кроме этого, сам вывод можно несколько упростить: ведь нам нужен простой список, и надобность в дополнительном оформлении отпадает.

Таким образом, мы можем за основу взять наш /-main.php-/, только удалим ненужный код. Мы его уже довольно подробно обсудили, поэтому я сразу привожу результат, который и возьмем за основу для дальнейшей модификации.

Файл /-main-cat.php-/:

  1.  <ul class="cat">
  2.  <?php
  3.  if (have_posts()) : while (have_posts()) : the_post(); ?>
  4.  <li><?php
  5.   echo '<a href="';
  6.   the_permalink();
  7.   echo '">';
  8.   the_title();
  9.   echo '</a> - ';
  10.   the_time('j F Y');
  11.  ?></li>
  12.  <?php endwhile; else:
  13.  echo '<li><h1>Извините, ничего не найдено...</h1></li>'; endif; ?>
  14.  </ul>

Как видите, всё очень просто: мы запускаем цикл /-TheLoop-/ и в нем выводим ссылку и дату.

Однако на страничке не хватает трех вещей:

    **названия рубрики;

    **её описания;

    **навигации по этой рубрике.

Названия рубрики и её описание

Для того, чтобы вывести название рубрики (она у нас одна на всю страницу), мы воспользуемся функцией /-get_the_category_by_ID-/. Эта функция возвращает название рубрики по её номеру.

Однако, вы спросите, откуда мы возьмем номер рубрики? На самом деле, всё очень просто: WordPress создает глобальную переменную /-$cat-/, в которой и содержится номер текущей рубрики.

Для вывода описания, мы будем использовать функцию /-category_description-/, которая также в качестве аргумента принимает номер рубрики. В итоге у нас получается совсем несложный код:

  1.  <h1 class="cat"><?php echo get_the_category_by_ID($cat) ?></h1>
  2.  <p class="cat"><?php echo category_description($cat) ?></p>

Не забудем сразу же описать стили в /-style.css-/. Я сделал это так:

  1.  h1.cat {font-size: 12pt; margin-bottom: 5px;}
  2.  p.cat {font-size: 9pt; font-style: italic;}
  3.  ul.cat {list-style-type: circle;}

Навигация по рубрике

Речь идет о том, что WordPress выводит на одной страничке заданное количество записей. Этот параметр задается в админ-панели (Настройки -> Чтение) и также влияет на вывод наших рубрик. Поскольку записей может оказаться больше, чем установлено для одной страницы, то мы просто не увидим все записи. В этой ситуации можно добавить ссылки "Раньше-Позже", однако мы сделаем по-другому.

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

Для решения этой задачи мы воспользуемся функцией /-query_posts-/. Эта функция модифицирует запрос к базе данных в зависимости от заданных параметров. Эту функцию очень часто применяют, когда нужно изменить стандартный вывод WordPress'а. Главное условие - эта функция должна вызываться /-до-/ запуска цикла /-TheLoop-/:

  1.  query_posts("cat=$cat&showposts=100");
  2.  if (have_posts()) : while (have_posts()) : the_post();
  3.  ...

То есть мы задаем вывод конкретной рубрики (/-cat=$cat-/) в количестве - до 100 записей (/-showposts=100-/).

Рубрики и подрубрики

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

Мне кажется, что логичней выводить записи только одной выбранной рубрики. Для того, чтобы исключить вывод записей подрубрик, нужно добавить одно-единственное условие. Вот так это выглядит в файле /-main-cat.php-/ (строчки, которые /-НУЖНО-/ добавить я выделил полужирным):

  1.  if (have_posts()) : while (have_posts()) : the_post(); ?>
  2.  <?php if ($post->category_id == $cat) { ?>
  3.  <li><?php
  4.  ...
  5.  ?></li>
  6.  <?php } ?>

То есть мы прямо в цикле проверяем совпадение рубрики записи с текущей рубрикой. Если они совпадают, то выводим ссылку на запись, иначе - нет.

Готово!

Теперь можно вас поздравить - ваш шаблон готов! Сохраните его для своих будущих разработок, поскольку он содержит все нобходимые функциональные блоки. Еще раз просмотрите файлы шаблона, и убедитесь, что в них нет чего-то сложного или экстраординарного. (Моя версия здесь.)

Надеюсь, что эти уроки вам понравились, и свой отзыв вы можете оставить на моем сайте (а для чего я это делаю, а?!).

Продолжение следует!

Но, если вы решили, что на этом мы завершили работу с шаблоном, то вы ошиблись. Нам предстоит еще сделать оформление для нашего шаблона-каркаса. Но этим мы займемся в следующем выпуске. grin

Продолжение: http://maxsite.org/ras28

Весь курс создания шаблона:

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Еще записи по теме

Комментариев: 15

  1. 2007-05-14 в 15:56:24 | Роман (анонимно)

    Что-то не получается у меня с выводом постоянных страниц. Все необходимые дополнительные php-файлы создал (как в статье http://maxsite.org/uskoryaem-wordpress-za-schet-postoyannyih-stranits) и подключил. Функция, по все видимости, работает, так как пустые строки появляются (таблица разъезжаеся ;)), но они пустые! В логах никаких ошибок нет.

  2. 2007-07-06 в 17:11:08 | Виталий (анонимно)

    Максим, подскажите пожалуйста, у меня такая же проблема как и Романа, только даже таблица не разьезжается, выводится одно слово "страницы" и все. В предоставленном Вами варианте тоже самое. От чего это может зависеть? Спасибо.

  3. 2007-07-06 в 18:16:17 | Максим (анонимно)

    Я думаю, что вы просто упустили момент с maxsite_get_page().

  4. 2007-07-07 в 12:35:27 | Виталий (анонимно)

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

  5. 2007-07-07 в 12:46:23 | Максим (анонимно)

    Сложно сказать... Если у вас 2.2, то попробуйте изменить запрос на такой:

    $request = &quot;SELECT post_title, post_type
			FROM $wpdb-&gt;posts
			WHERE post_type='page' $exclusions
			ORDER BY &quot; .
			$r['sort_column'] . &quot; &quot; . $r['sort_order'];
  6. 2007-07-07 в 15:05:09 | Геннадий (анонимно)

    Появилась такая ошибка:idea:-не могу удалить записи ,страницы и рубрики?Выскакивает окно-нажимаю -ОК-и все остается на своих местах. В чем тут дело?

  7. 2007-07-08 в 09:59:19 | Виталий (анонимно)

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

    ps:версия 2.2 обновленная до 2.2.1.

  8. 2007-07-08 в 10:22:37 | Виталий (анонимно)
    ps:версия 2.2 обновленная до 2.2.1.

    вернул на 2.2, ничего не изменилось

  9. 2007-07-09 в 17:12:55 | Максим (анонимно)

    В общем для WordPress 2.2 я переписал немного функцию maxsite_get_page. Скачайте обновленный архив, по-идее всё должно работать.

  10. 2007-07-10 в 00:28:09 | Виталий (анонимно)

    Спасибо большое, все получилось!

  11. 2007-09-10 в 10:34:47 | ABTOP (анонимно)

    Если вставляю

    category_id == $cat) { ?>

    ,

    статьи не выводятся, только названия рубрик и их описания.

  12. 2009-01-25 в 20:41:13 | Комментатор 21

    Вроде бы сделал все как написано и скачал ваш вариант, пишет Fatal error: Call to undefined function maxsite_get_page() in /home/duetcor/domains/duet-cor.com.ua/public_html/blog/wp-content/themes/seomass/sidebar-2.php on line 9, не выходит со списками страниц, у меня вордпрес 2.7, может кто поможет?

  13. 2009-01-31 в 03:50:54 | Сергей (анонимно)

    Аналогичная проблема

  14. 2009-02-28 в 13:10:53 | Vlad (анонимно)

    а можно ли как-то растянуть сайдбары по вертикали на 100%, чтобы они одним цветом были до самого подвала, а то они растягиваются только по контенту

  15. 2009-06-16 в 20:43:03 | Александр (анонимно)

    Спасибо за цикл статей, очень пригодилось, благодаря им сверстал свою тему smile

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

Не регистрировать/аноним

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

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


grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

(обязательно)