Как создать тему для WordPress самому: уроки с видео. Как создать wordpress шаблон, создаем wordpress тему Wordpress создание тем

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

Итак, чтобы создать тему, нужно сделать следующие шаги:

1. Понять как там чего где подключается, что за что отвечает и из чего(каких файлов) вообще состоит тема.
2. Создать платформу, площадку для будущей темы - пустые файлы в папке с названием темы.
3. Узнать все команды WP. В шаблонах почти все действия (вывод рубрик, меток, содержания и т.д.) выполняются посредством встроенных в WP PHP функций.
4. Постепенно наполнять файлы, шаг за шагом.
5. Смотреть, что получилось, делать многочисленные правки и устранять баги.

А теперь о каждом шаге поподробней. Перед тем, как читать дальнейший материал, заранее скачайте тему: mytheme . Данная тема не содержит ничего лишнего.

Шаг 1. Что из себя представляет тема WordPress.
Тема WordPress - это набор файлов, которые подключаются один за другим в зависимости от запроса пользователя. Внутри файла содержится помесь html и php кода, html (ну и css) код отвечает за визуализацию, php - за вывод необходимого содержимого. Если пользователь кликнул в меню сайта на какую-то категорию, то будет подключен файл archive.php, который, в свою очередь, посредством специальных команд-функций (о них мы узнаем позже), подключает другие файлы: шапку, подвал сайта, блок навигации. Конечным итогом данных несложных операций является готовая страница, которая отдается пользователю.

Шаг 2. Создаем каркас нашей темы.
Наша тема будет состоять из следующий файлов:

* Название файла - что отображается:
* header.php - “шапка”.
* footer.php - “подвал”.
* index.php - главная.
* archive.php - архив.
* page.php - страница.
* single.php - одиночная запись.
* sidebar.php - блок, на котором будет выводиться навигация: категории, страницы, архив и т.д.
* comments.php - комментарии.
* search.php - результаты поиска.
* 404.php - страницы 404 ошибки (”не найдено”). - данный файл не обязателен.
* function.php - php функции темы. - данный файл не обязателен.
* style.css - таблицы css стилей.

Теперь давайте создадим папку с названием MyTheme и созданим в ней все файлы, перечисленные выше, просто созданим, наполнять ничем пока не надо.

Теперь копируем эту папку в wp-content/themes/ установленного WP. Наполнять содержимым эти файлы мы будет уже из панели администрирования вордпресса - Дизайн -> Выбираете только что созданную тему -> Редактировать. Редактирование из админки, на мой взгляд, является наиболее удобным, и потом, изчезает опасность слетания кодировки (при редактировании обыкновенными блокнотопдобными программами, не поддерживающими UTF-8, русские символы превращаются в крякозабру).

Итак, каркас темы у нас есть, осталось только его наполнить.

Шаг 3 и 4. Наполняем каркас нашей темы.
Этот шаг следует разделить на несколько подшагов. Сейчас я буду приводить название файла, а следом PHP функции (команды), которые отвечают за вывод того или иного содержания.

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

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

Название сайта выводит функция

Bloginfo("name");

За вывод описания отвечает функция

Bloginfo("description");

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

Echo get_option("home");

Заметьте, некоторые функции выводят результат своего выполнения сразу, а некоторые просто возвращают значение и его нужно выводить командой echo.

В файл header.php мы также поместим технический html код. В необходимо выводить заголовок () сайта. Нужный заголовок возвращается функциейWp_title(); Также обязательной является подстановка кодировки, в которой будет отдана страница. Кодировка возвращается функциейBloginfo("charset"); Разумеется, здесь же необходимо поместить ссылку на таблицу стилей, на rss и прочую техническую информацию. Для всего существуют свои функции. Готовый файл header.php у нас будет выглядеть вот так (показано ниже), там вы сможете увидеть прочие функции и на интуитивном уровне понять что за что отвечает. Заходим через админку в редактор файла header.php, вставляем код из нужного файла архива mytheme. footer.php В этом файле содержится подвал сайта. На нем мы выведем название сайта и год. Заходим через админку в редактор файла footer.php, вставляем код из нужного файла архива mytheme. sidebar.php Теперь давайте реализуем сайдбар, в котором будет выводиться навигация по сайту. Навигацию для простоты понимания, мы будем реализовывать посредствои виджетов. Заранее приведу готовый sidebar.php, а потом расскажу о нем поподробнее.PHP код в сайдбаре создает новый блок для виджета под названием “Sidebar” (его мы установим в следующем файле), наполнить его содержимым можно в редакторе тем, в разделе виджеты. Там все должно быть понятно, позже, добавляя виджеты, вы сможете смотреть что именно добавляется на сайте с каждым новым виджетом и понять суть всего происходящего. Для большей гибкости, навигацию часто делают не посредством виджетов, а посредством следующих функций:Wp_get_archives("type=monthly"); wp_list_pages("title_li=" . ("Страницы:")); wp_list_categories("title_li=" . __("Категории:")); wp_meta(); Думаю, вам должно быть интуитивно понятно, какая из функций что выводит. functions.php Данный файл содержит функции, которые автоматически подключаются к шаблону, а некоторые WP самостоятельно выполняет перед генерацией страницы. В сайдбаре мы использовали виджет под названием “Sidebar”, теперь необходимо его установить в functions.php. Виджеты устанавливаются функцией register_sidebar, которой в качестве параметры передается массив значений, необходимый для управления отображением блоков. В нашем случае, чтобы установить виджет, нужно добавить в functions.php следующий код: <?php if(function_exists("register_sidebar")) { register_sidebar(array("name"=>"Sidebar" "before_widget" => "", "after_widget" =>"", "before_title" => "<h3>", "after_title" => "</h3>",)); } ?> Как видите, мы установили виджет под названием ‘name’=>’Sidebar’, до и после виджета нам не нужно никакого html кода, поэтому следующие 2 значения оставили пустыми, заголовок блока с элементом виджета мы помещаем в теги <h3>, что наглядно продемонстрировано в последних двух значениях. Итак, виджет определен, немного позже вы сможете поиграться им и оценить по достоинству эту замечательную возможность WordPress. index.php Этот файл отвечает за вывод того, что пользователь видит на главной странице сайта. Сейчас мы впервые узнаем, как подключать другие шаблоны (шапку, подвал, сайдбар и т.д.). А подключаются другие шаблоны следующим образом: Подключение шапки header.php:Get_header(); Подключение сайдбара sidebar.php:Get_sidebar(); Подключение подвала footer.php:Get_footer(); Откройте index.php из архива mytheme. В коде index.php вы увидели некоторые новые функции. Думаю, и без разъяснения понятно, что каждая из них делает и какие параметры ей передаются. Самой важной функцией являетсяВ параметре этой функции - надпись, которая выводится в том случае, если содержание записи необходимо обрезать. Описывать остальные функции не считаю нужным, так как должно быть понятно, что, где и как. Главное - понять принцип подключения шаблонов функциями get_***(); archive.php, page.php, single.php А теперь мы плавно переходим к следующим файлам. Во все файлы, кроме 404.php, style.css и comments.php можно вставить тот же код, что и в index.php. Да, да, тоже самое. Как так? Давайте разберемся. Все станет понятно, когда вы поглубже вникните в php код index.php. Давайте посмотрим, что же там происходит. Мы видим функция <?php if (have_posts()) : ?> возвращает true в случае, если записи по существующему критерию существуют, в противном случае возвращается false. Мы также видим, что если WordPress есть что показать, он выполняет цикл <?php while (have_posts()) : the_post(); ?>, в котором он выводит все записи, удовлетворяющий критерию. Например, если пользователь кликнул на категорию “Авто”, WP вытаскивает из базы данных все записи этой категории, помещает в have_posts(), а если пользователь кликнул на какую-либо страницу, - WP вытаскивает из базы данных ту самую страницу и также помещает ее в функцию have_posts(), которую мы обходим циклом (в данном случае 1 раз) и выводим. Если have_posts() вернет false, тоесть если ни 1 записи, подходящей под критерии нет, то отобразится <h2 align="center">Не найдено</h2>Извините, ничего не найдено. Если посидеть несколько минут и разобрать алгоритм, все встанет на свои места. Хотя нет, просто код файлов page.php, single.php не полностью соответствует index.php, в эти файлы необходимо также добавить comments_template(); в то место, гле вы хотите видеть комментарии к записи. Эта функция подключает в шаблон comments.php, описанный ниже. comments.php На первых порах лучше всегда использовать стандартную форму комметариев, по этому возьмите ее из архива mytheme. 404.php Этот файл подключается, если пользователь пришел на что-то несуществующее, например, несуществующую категориию. Сюда просто пишем любое сообщение об ошибке, если есть желание, старыми способами подключаем шапку, подвал и прочие части темы. Данный файл не обязателен! style.css Ну а тут совсем все просто. Здесь пишем таблицы стилей, они будут автоматически подключаться к каждой странице. Шаг 5. Делаем дополнения и правки. У вас есть готовая тема, которую вы можете самостоятельно переделывать и доделывать как хотите. Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна. <h2>1. Frontend блога</h2> До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.). Стандартный Frontpage (index.php ) <img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_default-single.gif' align="center" height="480" width="470" loading=lazy> Стандартный Single (single.php ) <h2>2. Photoshop-макеты</h2> Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip , чтобы увидеть готовый файл Photoshop. <img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_photoshop-mockup.gif' align="center" width="100%" loading=lazy> <h2>3. HTML и CSS</h2> Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip . Распаковав архив, вы увидите index.html, single.html и page.html . Далее я буду использовать их для превращения в шаблон. <img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_html-css-template.gif' align="center" height="152" width="386" loading=lazy> Зачем сперва создавать статический HTML? Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS. <h2>4. Как работает тема WordPress</h2> Если вы перейдёте к папке стандартной темы (wp-content/themes/default ), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css . Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php ). <img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_how-theme-works.gif' align="center" height="273" width="289" loading=lazy> Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» . <h2>5. Дублирование файлов шаблонов</h2> Скопируйте папку HTML из GlossyBlue в папку wp-content/themes . После этого перейдите в директорию темы default , скопируйте comments.php и searchform.php в папку glossyblue . <img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_copy-files.gif' align="center" height="177" width="341" loading=lazy> <h2>6. Style.css</h2> Перейдите в папку темы default , откройте файл style.css . Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue . Если хотите, можете изменить название и данные об авторе. <img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_css-commented-code.gif' width="100%" loading=lazy> <h2>7. Разделение файлов</h2> Теперь нам нужно понять где разделить HTML-файлы на части: header.php , sidebar.php , и footer.php . На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления. <img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_splitting-files.gif' align="center" width="100%" loading=lazy> <h2>8. Header.php</h2> Откройте index.html . Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php . <img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_header-code.gif' width="100%" loading=lazy> Перейдите в папку темы default , откройте новый header.php . Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div class=description. <img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_header.gif' align="center" width="100%" loading=lazy> Меню навигации (wp_list_pages ) Замените тэги li в ul id=nav на ; <img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_navigation-menu.gif' align="center" width="100%" loading=lazy> <h2>9. Sidebar.php</h2> Вернитесь к index.html , вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar , поместите его в новый php-файл и сохраните как sidebar.php . <ul><li>Замените form id=searchform со всем содержимым на .</li> <li>Замените теги li категорий на </li> <li>Замените теги li архивов на </li> </ul><img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_sidebar-code.gif' align="center" width="100%" loading=lazy> <h2>10. Footer.php</h2> Вернитесь к index.html . Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php . <img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_footer.gif' align="center" width="100%" loading=lazy> Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге. <img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_recent-posts.gif' align="center" width="100%" loading=lazy> «Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы) <img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_recent-comments.gif' align="center" width="100%" loading=lazy> <h2>11. Index.php</h2> Теперь в вашем index.html должен остаться только div id=content . Сохраните файл как index.php . Впишите строки: get_header , get_sidebar , и get_footer в том порядке, как они встречаются в шаблоне. <img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_index.gif' width="100%" loading=lazy> <h2>12. Разбор цикла</h2> Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found» . <img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_the-loop-explain.gif' align="center" height="201" width="327" loading=lazy> <h2>13. Копирование цикла</h2> Перейдите к директории темы default , откройте index.php . Скопируйте цикл из стандартного index.php в свой — между div id=content../div . После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link. <img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_the-loop.gif' align="center" width="100%" loading=lazy> <h2>14. Предпросмотр темы</h2> Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design , вы должны увидеть тему GlossyBlue . Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии. <h2>15. Single.php</h2> Пришло время создать шаблон single.php . Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php , сохранив его как single.php . Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template . На следующем скриншоте отображены внесенные мною изменения: <img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_single-zoom.gif' align="center" height="516" width="470" loading=lazy> <h2>16. Page.php</h2> Теперь новый single.php сохраните с названием page.php . Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов . <h2>17. Удаление файлов HTML</h2> Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения. <h2>18. Шаблон страницы WordPress</h2> А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого: <img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_archives-template.gif' align="center" height="210" width="293" loading=lazy> Типы постов на WordPress являются самым широким полем деятельности для разработчиков. Изначально WordPress включает в себя 5 основных типов постов: запись, страница, вложение, ревизия и навигационное меню.Записи и страницы являются основными типами постов для размещения контента на сайте. И между ними есть несколько отличий.Записи , как правило, отображаются в обратном порядке на главной странице блога, а страницы отображаются без даты публикации. Категории и тэги также могут быть привязаны к записям, а к страницам нет (хоть и это можно сделать в настройках).Страницы можно структурировать по порядку. Это особо полезно для организации контента для владельцев сайта и посетителей.Дизайн страниц так же легко можно изменить, если использовать различные шаблоны страниц. Они позволят изменить стиль любой страницы на вашем сайте.Давайте рассмотрим более детально, какие шаблоны страниц существуют, и как их можно использовать для сайта.<h2>Почему бы не использовать разные шаблоны страниц?</h2>В темах WordPress обычно используется шаблон page.php , который определяет стиль всех страниц сайта. Большинство разработчиков тем создают шаблон начальной страницы по такому же принципу. В этом шаблоне отображается контент страницы и по умолчанию определяется, какие элементы дизайна будут на ней присутствовать (например, шапка, сайдбар, футер, прочее).По умолчанию шаблон страницы (page.php) настроен таким образом, что весь необходимый контент отображается на странице.Создание уникального шаблона страницы позволяет выйти за рамки стандартов WordPress и изменить отображение содержимого на сайте на свое усмотрение. Например, вы могли бы изменить дизайн страниц, удалив сайдбар. Также можно изменить привычный шрифт и использовать другую шапку, а не ту, которую предлагает домашняя страница.Наиболее известный пользовательский шаблон страницы - это Archive (шаблон архивной страницы archive.php ). Он есть во многих темах WordPress и содержит весь контент сайта, который разделен на страницы, категории, тэги, даты архивов, авторские архивы.Многие шаблоны архивов также отображают полный список записей в блоге и поле для поиска записей на сайте. По сути, шаблон архива - это карта сайта, с помощью которой пользователь может найти то, что ищет.В темах можно найти и другие типы шаблонов страниц, как например:<ul><li>Контактную форму</li><li>Страницы без сайдбара (боковой панели)</li><li>Лендинговую страницу (посадочную страницу)</li><li>Индекс блога</li> </ul>Возможности шаблонов страниц безграничны. Все зависит от того, насколько удобным вы хотите сделать свой сайт для конечного пользователя.<h2>Как выбрать шаблон для страницы?</h2>Добавить шаблон для страницы очень просто. В редакторе страницы справа вы увидите окошко (виджет) под названием «Атрибуты страницы ». Оно размещено под окошком «Опубликовать ».В атрибутах страницы можно выбрать родительскую страницу и порядок ее размещения на сайте в соответствующем поле. А опция между ними позволяет изменить шаблон. Все что нужно сделать - это выбрать шаблон для страницы и обновить ее.<img src='https://i2.wp.com/hostenko.com/wpcafe/wp-content/uploads/Capture97.png' height="366" width="301" loading=lazy>Шаблон также можно изменить другим способом - через список всех страниц. Нужно только нажать на «Свойства ».<img src='https://i2.wp.com/hostenko.com/wpcafe/wp-content/uploads/Capture237.png' height="56" width="320" loading=lazy>Затем изменить шаблон в опциях меню справа.<img src='https://i1.wp.com/hostenko.com/wpcafe/wp-content/uploads/Capture327.png' height="166" width="330" loading=lazy>Опции шаблона не будут отображаться, если в вашей теме используется только стандартный шаблон страницы.<h2>Создаем базовый шаблон страницы для сайта</h2>Создать новый шаблон страницы для вашего сайта на WordPress легче, чем вы думаете. Для этого не нужно иметь опыт в разработке и создании тем или плагинов.Нужно только использовать код page.php уже существующего шаблона темы в качестве основы для нового шаблона страницы. К примеру, вы используете старую стандартную тему Twenty Twelve . Файл page.php имеет следующий код: <?php /** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other "pages" on your WordPress site will use a * different template. * * @package WordPress * @subpackage Twenty_Twelve * @since Twenty Twelve 1.0 */ get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <?php while (have_posts()) : the_post(); ?> <?php get_template_part("content", "page"); ?> <?php comments_template("", true); ?> <?php endwhile; // end of the loop. ?> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> Можно использовать этот код для создания шаблона новой страницы. Для этого нужно только убедиться, что комментарий к коду размещен вверху нового файла. Это определит данный файл как шаблон страницы: /* Template Name: My Custom Page Template */ Шаблон вашей страницы будет выглядеть следующим образом: <?php /* Template Name: My Custom Page Template */ Далее идет код шаблона страницы Давайте рассмотрим процесс создания базового шаблона страницы и попробуем создать шаблон страницы в полную ширину без использования сайдбара . Тема Twenty Twelve изначально включает в себя шаблон в полную ширину, но мы сделаем вид, что это не так, потому что нам это нужно для нашего обучения.В стандартном шаблоне сайдбар страницы отображается с правой стороны:<img src='https://i0.wp.com/hostenko.com/wpcafe/wp-content/uploads/default-page-template.jpg' width="100%" loading=lazy>Стандартный шаблон страницы в теме Twenty Twelve Создать шаблон новой страницы без сайдбара просто.Для начала нужно создать новый файл, используя любой текстовый редактор (Блокнот или Notepad++ подойдет). Его можно назвать как-то по-простому, например, nosidebar-page.php или full-page.php (о названиях файлов поговорим немного позже). Затем загрузите файл на ваш сайт таким образом, чтобы он находился рядом с файлом page.php.По сути, наш шаблон - это шаблон от page.php темы Twenty Twelve, только с удаленным кодом <?php get_sidebar(); ? >.Он выглядит так: <?php /* Template Name: Full Width Page with No Sidebar */ get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <?php while (have_posts()) : the_post(); ?> <?php get_template_part("content", "page"); ?> <?php comments_template("", true); ?> <?php endwhile; // end of the loop. ?> </div> </div> <?php get_footer(); ?> После загрузки файла шаблона в вашу тему его можно использовать для всех страниц. Можно также привязать страницу к этому шаблону, чтоб удалить ее сайдбар.<img src='https://i1.wp.com/hostenko.com/wpcafe/wp-content/uploads/assign-page-template-nosidebar.jpg' height="330" width="325" loading=lazy>Но это еще не все. Пока мы только удалили сайдбар. Нам нужно сделать так, чтоб контент размещался по всей ширине страницы . А пока он занимает только две третьих страницы:<img src='https://i0.wp.com/hostenko.com/wpcafe/wp-content/uploads/page-template-sidebar-removed.jpg' width="100%" loading=lazy>Если вы посмотрите на код нашего шаблона, то увидите, что основная часть контента находится под действием определенного класса CSS: <div id="primary" class="site-content"> За стиль основной части контента отвечает вторая часть class="site-content" . Если проверить файл стилей (style.css ) темы, то можно заметить, что этот класс находится почти в самом низу:Site-content { float: left; width: 65.104166667%; } Для того чтобы расширить контент на всю страницу, нам нужно изменить ширину области контента с 65% на 100% . Но не нужно изменять класс контента сайта, т.к. он по-прежнему используется в других шаблонах, как например, стандартная страница page.php и шаблон записей single.php . Изменение цифры процента для контента сайта повлияет на все записи и страницы на вашем сайте, которые занимают всю ширину страницы.Поэтому нам нужно создать новый класс, который употребляется специально для страниц с полной шириной:Site-content-fullwidth { float: left; width: 100%; } После обновления файла style.css с вышеуказанным классом нам нужно изменить наш шаблон с полной шириной страницы и быть уверенными, что мы создали ссылку на класс CSS с шириной в 100%: <div id="primary" class="site-content-fullwidth"> Наш финальный шаблон будет выглядеть так: <?php /* Template Name: Full Width Page with No Sidebar */ get_header(); ?> <div id="primary" class="site-content-fullwidth"> <div id="content" role="main"> <?php while (have_posts()) : the_post(); ?> <?php get_template_part("content", "page"); ?> <?php comments_template("", true); ?> <?php endwhile; // end of the loop. ?> </div> </div> <?php get_footer(); ?> Этот обновленный шаблон подтверждает, что контент на нашем сайте будет отображаться на всю страницу:<img src='https://i1.wp.com/hostenko.com/wpcafe/wp-content/uploads/page-template-full-width.jpg' width="100%" loading=lazy>Теперь контент на сайте отображается по всей странице Все, что указано выше, можно сделать в любой теме WordPress. Для этого удалите сайдбар из созданного шаблона страницы и убедитесь, что вы меняете нужный класс таблицы стилей.<h2>Как называть шаблоны страниц</h2>Согласно WordPress Template Hierarchy , WordPress отображает шаблоны для страницы в следующем порядке:<ul><li>Пользовательский шаблон (Custom Template)</li><li>page-{slug}.php</li><li>page-{id}.php</li><li>page.php</li><li>index.php</li> </ul>Вам будет проще, если вы будете иметь представление о порядке этих шаблонов, потому что так вы поймете, почему страница оформлена тем или иным образом.Этот порядок означает, что на WordPress всегда будет отображаться шаблон для страницы, если он был прикреплен к ней. Если к странице не был добавлен ни один из шаблонов, то WordPress будет искать page-{slug}.php.Если шаблон page-{slug}.php не найден, WordPress ищет шаблон по ID страницы. К примеру, если ID страницы = 15, то WordPress будет искать шаблон страницы с названием 15.php.Если шаблон не привязан к странице и нет совпадений с ID страницы, то WordPress ищет по стандартному шаблону страницы page.php. И если страницы шаблона page.php не существует, то для поиска используется index.php.Многие разработчики называют свои шаблоны тем, используя формат page-name.php. К примеру, шаблон страницы контактов называют page-contact.php. По большому счету вы можете давать шаблонам названия на свое усмотрение и использовать любые конфигурации, будь то page-name.php, name-page.php или name.php. В любом случае, в будущем вы сможете эти названия изменить. В этой статье я расскажу о способах создания шаблонов для постоянных страниц WordPress. Каждый способ несет в себе плюсы и минусы. Но прежде чем начать, коротко о том, что такое страницы и чем они отличаются от записей. В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как "Обо мне", "Контакты", "Карта сайта"; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как "запись" в рубрике "Кодекс", а ссылки в меню шапки ведут на страницы: Функции . Страницы похожи на записи - они расположены в одной таблице базы данных и данные у них почти одинаковы: заголовок, текст, дополнительные поля и т.д. И то и другое - это записи, но разных типов: страницы древовидные и организуются путем создания родительских и дочерних страниц, а записи объединяются рубриками и метками. В WordPress можно создавать дополнительные типы записей древовидные или нет.Создание страниц в WordPress Часто нужно создать отдельный шаблон страницы, чтобы вывод информации отличался от остальных страниц. Создавая шаблон страницы в WordPress, можно совершенно изменить страницу: удалить сайдбар, подвал, шапку, можно изменить страницу до неузнаваемости. Например, на этом сайте так изменяется страница на которой выводятся коды файлов WordPress . <h2> Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)</h2> Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать.php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать пометку, что созданный файл является шаблоном для страниц: <?php /* Template Name: Мой шаблон страницы */ ?>  Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон": <img src='https://i2.wp.com/wp-kama.ru/wp-content/uploads/2014/10/svojstva-stranitsy.png' align="center" height="329" width="300" loading=lazy> С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон. /* Template Name: Мой шаблон страницы Template Post Type: post, page, product */ Преимущества: <ul>Создав один шаблон, мы можем удобно применять его для разных страниц. Например, можно создать шаблон без боковой панели и использовать его на разных страницах. <li>Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).</li> </ul>Недостатки: После создания файла шаблона в папке темы, нужно зайти в админ-панель и установить шаблон для страницы. При разработке это не всегда удобно. Поэтому если подразумевается использовать шаблон только для одной страницы, используйте второй метод. Как это работает: Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все файлы шаблона на наличие в них строки:Template Name: *** Строка может располагаться где угодно и как угодно в файле. Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы". При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан: Wp_page_template = default _wp_page_template = tpl_my-page.php Далее, когда пользователь посещает страницу, WordPress проверят метаполе _wp_page_template , если шаблон установлен, то используется файл шаблона. В противном случае поиск шаблона страницы продолжается по иерархии . <h2> Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)</h2> При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить: <img src='https://i2.wp.com/wp-kama.ru/wp-content/uploads/2014/10/pages-3admin.png' align="center" width="100%" loading=lazy>Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php . Достоинства: Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке. Недостатки: Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID). Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее. Как это работает: WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы): <ul><li>{любое_название}.php (когда используется шаблон страницы)</li> <li>page-{ярлык_записи}.php</li> <li>page-{ID_записи}.php</li> <li>page.php</li> <li>singular.php</li> <li>index.php</li> </ul><h2> Способ 3: шаблон страницы через фильтр "template_include" (коддинг)</h2> Это продвинутый способ, он более сложный, но вместе со сложностью он открывает широкие возможности. С помощью этого способа можно задать шаблон любой странице, записи, категории, любой публикации на сайте или вообще группе любых публикаций. Смотрите примеры с описанием: // фильтр передает переменную $template - путь до файла шаблона. // Изменяя этот путь мы изменяем файл шаблона. add_filter("template_include", "my_template"); function my_template($template) { # аналог второго способа // если это страница со слагом portfolio, используем файл шаблона page-portfolio.php // используем условный тег is_page() if(is_page("portfolio")){ if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; } # шаблон для группы рубрик // этот пример будет использовать файл из папки темы tpl_special-cats.php, // как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php" if(is_category(array(9, "Без рубрики", "php"))){ return get_stylesheet_directory() . "/tpl_special-cats.php"; } # шаблон для записи по ID // файл шаблона расположен в папке плагина /my-plugin/site-template.php global $post; if($post->ID == 12){ return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php"; } # шаблон для страниц произвольного типа "book" // предполагается, что файл шаблона book-tpl.php лежит в папке темы global $post; if($post->post_type == "book"){ return get_stylesheet_directory() . "/book-tpl.php"; } return $template; } Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д. Достоинства: <ul>Можно установить шаблон для любой страницы или группы страниц. Практически полный карт-бланш в действиях. <li>Можно создать шаблон при написании плагина.</li> </ul>Недостатки: Необходимость писать код и отдельно его подключать (например, в functions.php темы). В этой статье мы узнаем, как создать wordpress тему. Для начала мы создадим HTML + CSS шаблон, который поместим в структуру wordpress темы. После того, как вы дочитаете эту статью, вы сможете создать собственный шаблон для wordpress, а точнее вы его создадите по ходу чтения и выполнения практических заданий. Вы будете знать как устроена тема и сможете самостоятельно реализовать ядро wordpress темы из других HTML/CSS шаблонов. Начнем? <h2>Вступление – структура wordpress темы</h2> Структура wordpress темы, предельно проста. В теме мы имеем файл index. php, он отвечает за сборку кусков шаблона. К этому файлу подключены другие: header. php, footer. php . Эти файлы (куски шаблона) используются на любой странице сайта. Мы знаем, что не все страницы строятся по единому шаблону, поэтому wordpress тема имеет другие файлы, такие как archives. php или single. php . Также можно создать свой тип страниц, если вы хотите, чтобы он категорически отличался от других на сайте. Это очень удобно. Если вы внимательно рассмотрите структуру темы, и прочитаете содержимое файлов, то интуитивно поймете что к чему. Но все же имеются некоторые моменты, которые мы рассмотрим. Вы всегда сможете вернуться к этой странице и прочитать, как все делается. А теперь рассмотрим создание шаблона поэтапно: <h2>Шаг 1 – style.css</h2> CSS файл, это файл параметров и дизайнерских решений для HTML элементов шаблона. Вы должны переименовать главный css файл (если он у вас не один) на style. css . Далее вам необходимо добавить в начале этого файла следующую закомментированную информацию: /* Theme Name: Typography Paramount Theme URI: http://сайт/ Description: An image-less template focusing on Typography..0 . General comments/License Statement if any. . */ Этот код будет показывать информацию о теме для администраторов. Убедитесь что он в начале файла, и нету никаких пробельных символов перед ним! Далее я создал еще один файл, под именем 1. css , и поместил его в папку typography-paramount , которую создал в папке wordpress темы. Нужно четко соблюдать эту структуру, чтобы wordpress смог видеть этот файл. <h2>Шаг 2 – header и footer</h2> На этом этапе мы создадим два файла: header. php и footer. php , о которых упоминалось раньше. Хотя они не основные и включены в тему опционально, они используются в большинстве шаблонов, поэтому мы их создадим. <h4>Header.php </h4> Начнем с этого файла. Создайте файл и присвойте ему имя header. php , после чего вставьте в него поданный код и сохраните. Этот файл будет отображаться на всех страницах нашего шаблона. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>-

До сих пор, не было ничего особенного в отличии от простой html/css темы. Но теперь мы заменим некоторые элементы на wordpress теги.

> <?php bloginfo("name"); ?> <?php wp_title(); ?> ; charset=" /> " type="text/css" media="screen,projection" />

Это только некоторые известные мне теги. Намного больше вы найдете на официальном сайте: codex.wordpress.org .

language_attributes() – Выводит тип языка для тега .

bloginfo() – Используется для вывода информации о сайте, все параметры можно найти в кодексе вордпресса.

wp_title() – Возвращает title страницы.

wp_head() – подключает javascript и другие необходимые элементы.

get_option() – получает необходимые опции для работы с базой данных.

Footer.php

Теперь создадим так званный «подвал сайта». Создайте файл footer. php и поместите в него следующий код. Этот футер, будет отображать год, название сайта, и ссылки на rss.

< ?php wp_footer(); ?>

php the_ time(" Y"); ?> - отображает текущий год.

- название блога.

- добавление ссылки на rssленту блога.

wp_footer() – это необходимо для самого ядра wordpress, который добавляет туда нужные ему элементы.

Шаг 3 – основной файл wordpress шаблона

Пришло время создать основной файл wordpress шаблона, который будет подключать верхушку и низ сайта. Создайте файл index. php . Это один из двух обязательных файлов wordpress темы (другой style.css). Вставьте ново созданный файл следующий код:

Этот код, помогает wordpress получить информацию куда подключать header. php и footer. php . Давайте добавим еще несколько строк между этими тегами:

">

at | |

Woops...

Sorry, no posts we"re found.

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

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

Пример работы wordpress темы

Теперь у нас есть подобие темы, давайте посмотрим пример работы созданной wordpress темы.

Мы имеем четыре файла в нашей теме, для начала это вполне достаточно. В следующей статье добавим файл single. php , которые будет показываться при выводе конкретного поста. Этот файл будет включать в себя , в отличии от файла index. php.
Если у вас еще остались вопросы или недопонимания по поводу создание wordpress шаблона (темы), выразите свои проблемы в комментариях ниже!

Typography Paramount

/">

Footer.php

Шаг 3 – основной файл wordpress шаблона

">

Woops...

Пример работы wordpress темы

Возможно вас заинтересует