Создать тему шаблона для WordPress — часть 2

Опубликовано: 27 Июль 2010Автор ratemir

Логотип WordPressHeader, Footer и Sidebar

Итак, в первой части мы создали индексный файл. Следующей задачей будет разделить индексный файл(index.php) на части. Создаем файлы header.php, footer.php, и sidebar.php . Начинаем копировать верхнюю часть файла index.php до начала кода боковой панели или содержания главной страницы (в зависимости от того, что у Вас идет вначале). Это, как правило, включают название страницы(теги title, meta теги и т.д.), логотип и меню top-навигации.

Вставить эту информацию в файл header.php и сохраните. WordPress будет искать этот файл и автоматически вставлять содержимое header.php на ваших страницах. На месте кода, который вы копировали и удалили в файле index.php, ставите следующую строку:

<?php get_header (); ?>

Этот код говорит WordPress включить содержание из header.php на странице.

Далее, мы будем делать то же самое с футером: вырезаем нижнюю часть index.php и вставляем в файл с именем footer.php , заменив вырезанный код на:

<?php get_footer (); ?>

И наконец, делаем то же самое с боковой панелью: вырезаем, вставляем в файл sidebar.php и заменяем на:

<?php get_sidebar (); ?>

Мы не вносили никаких изменений, просто разбили один файл на несколько, чтобы упростить работу. Убедитесь, что все работает, открыв страницу в браузере.

Специальные теги для шаблонов WordPress

На данный момент, ваш сайт содержит статический HTML код, содержащийся в шаблоне, и не извлекается с помощью функций WordPress. Пора изменить сложившуюся ситуацию.

В WordPress, можно использовать специальные теги для шаблонов, с помощью которых мы загружаем данные на страницы сайта. С полным списком Вы можете ознакомиться в кодексе WordPress. Вы уже встречались с некоторыми из них! Это get_header , get_sidebar , get_footer и bloginfo.

Эти теги могут быть добавлены в любом файле РНР, в рамках Вашей темы. Для начала, откроем файл header.php .

Итак, атрибут Doctype может оставаться как есть. Далее идет тег <html> который включает языковую информацию. Приводим тег <html> к такому виду:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes (); ?>>

Посмотрев в браузере исходный код мы увидим:

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU">

Для блогов, хорошая идея включить ссылки на RSS-канал и Pingback URL между <head>...</head>, так как они признаны многими браузерами. Эти ссылки могут быть добавлены с помощью bloginfo следующим образом:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo ('name'); ?> RSS Feed" href="<?php bloginfo ('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo ('pingback_url'); ?>" />

Если в шаблоне Вы ипользуете JavaScript файлы, то их нужно положить в созданную Вами папку js, и прописать пути к ней таким образом:

<script type="text/javascript" src="<?php bloginfo ('template_directory'); ?>/js/javascript.js"></script>

Теперь необходимо включить тег wp_head. Данный тег будет искать файлы JavaScript и таблиц стилей в плагинах WordPress и выводить их между <head>...</head>. Все, что вам нужно, это добавить:

<?php wp_head (); ?>

Последний элемент в хедере(head) это тег title. Выглядеть он будет так:

<title><?php bloginfo ('name'); ?> <?php wp_title ('-'); ?></title>

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

Переходим к тегу <body> в файле header.php . Здесь всё будет зависеть от структуры шаблона. Например, если мы видим код <h1>Название сайта</h1>, то заменяем его на

<h1><?php bloginfo ('name'); ?></h1>

Вот некоторы теги WordPress для шаблонов:

get_option ('home') Адрес домашней страницы

bloginfo ('rss2_url') Адрес RSS-канала сайта

bloginfo ('description') Описание сайта, прописывается в настройках WordPress
Думаю Вы заметили, что всё это должно быть внутри тега <?php ... ?>.

Далее идут, функции которые используются в основном для вывода списка меню. Установив данные теги Вам придется изменить кое что в стилях CSS.

<?php wp_list_categories (); ?> Выводит список категорий

<?php wp_list_pages (); ?> Выводит список страниц

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

Но Вы скажете, мы также хотим включить некоторые другие элементы, такие как ссылки на другие сайты и страницы, или облака тегов. Чтобы добавить эти элементы существуют Виджеты(Widgets).

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

Двигаемся дальше:

wp_list_authors () Список авторов блога, сайта. Если у автора есть сообщения, то его имя будет ссылка на страницу, отображающая все его сообщения.

wp_list_bookmarks () Выводит ссылки, которые были добавлены в разделе «Ссылки» в панели администрирования.

wp_tag_cloud () Выводит облако тегов.

Основное содержание сайта

Теперь, когда мы определились с содержанием файла header.php и sidebar.php, настало время обратиться к основному содержанию Вашего сайта. Сейчас мы вернемся к нашему файлу index.php и реализуем механизм переключения страниц WordPress и вывод контента. Начинается всё так:

<?php if (have_posts ()) : ?>
<?php while (have_posts ()) : the_post (); ?>

Эти две строки проверяют наличие контента на сайте и вывод его на странице. Для категорий, облака тегов и т.д. будет выводиться соответствующее содержание.

Теперь нам нужно поручить WordPress выполнить кое что индивидуальное для каждой страницы. Например:

<h2>
<a href="<?php the_permalink () ?>" rel="bookmark" title="Ссылка поста <?php the_title (); ?>">
<?php the_title (); ?></a></h2>
<small>Опубликовано: <?php the_time ('F jS, Y') ?> Автор: <?php the_author () ?> </small>

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

the_permalink () Адрес постоянной гиперссылки на Ваш пост.

the_title () Название поста.

the_time ('j F Y') Отображает дату создания поста в формате «1 января 2010». Другие форматы можно посмотреть здесь

the_author () Отображает имя автора, который написал этот пост.

the_content () Вставляет содержание поста. Нет необходимости размещать внутренний тег <p></p>, так как это будет сделано автоматически.

the_category () Отображает название и ссылку на архив категории поста.

После того как вы прописали все то, что хотели, пришла пора закрыть механизм отображения контента <?php while (have_posts ()) : the_post (); ?> , с помощью функции <?php endwhile; ?> . Если хотите можно добавить элементы навигации:

<div>
<div><?php previous_posts_link ('&laquo; Previous Entries') ?></div> <div>
<div><?php next_posts_link ('Next Entries &raquo;') ?></div></div></div>

Эти элементы управления позволят вашим посетителям ориентироваться в контенте, то есть вернуться к предыдущей странице или открыть следующую.

Итак, структуру while мы закрыли, но остаётся открытым <?php if (have_posts ()) : ?> Решим эту проблему следующим способом:

<?php else: ?>
<p>К сожалению, на данной странице ничего не найдено</p>
<?php endif; ?>

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

Дополнительные страницы

В нашем простом примере, index.php используется как шаблон для каждой страницы сайта. Но если вы хотите изменить некоторые аспекты шаблона для конкретной страницы (или группы страниц), WordPress позволяет это сделать легко. Все, что вам нужно это создать файлы для конкретных страниц и прописать там нужный код. Например, можно создать файл search.php, и этот шаблон страницы будет использоваться для показа результатов поиска, вместо index.php. Таким образом можно создать файл category.php (для страниц категорий), single.php (для обычных страниц), home.php (для главной страницы), а также существует ряд других файлов — шаблонов, которые Вы можете создать для настройки отдельной области сайта.

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



Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

8 комментариев к “Создать тему шаблона для WordPress — часть 2”

  • Pomoshnik
    29 Сентябрь, 2010, 0:37

    Хороший блог очень понравился буду следить за вашими новостями.

  • Fluffydreamer
    30 Сентябрь, 2010, 4:10

    Прекрасный и восхитительный пост!!! Спасибо !!!Доброго тебе денечка...счастья...радости и удачи!!!

  • enurneypromo
    25 Декабрь, 2010, 14:32

    Приятно читать, спасибки ...

  • suprofit
    2 Январь, 2011, 2:34

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

  • Avebra
    3 Январь, 2011, 18:49

    Дорогие друзья блогеры!

    Поздравляю Вас с Новым 2011 Годом и Рождеством!

    Пусть Новый Год стучится к Вам,

    И счастьем дом наполнится.

    И всё, о чём мечтали Вы,

    Пусть в этот год исполнится!

  • StonkCash
    5 Январь, 2011, 20:55

    Спасибо, классный блог) Даже добавил в закладки, хотя делаю это редко)

  • xengi
    8 Январь, 2011, 19:21

    Отличный блог у вас, много интересных постов, буду постоянным читателем!

  • Quetedriemi
    13 Апрель, 2011, 13:53

    большое спасибо!Взяла себе тоже-пригодится.

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

Наверх