Полезное        29.12.2022   

Как сделать свой шаблон на wordpress. Как создать свою тему для WordPress? Дублирование файлов шаблонов

Конечно, перед тем, как создать тему для WordPress, вы можете попробовать разобраться в уже готовых (именно так делал я). Но дело в том, что в них иногда столько всего понапихано, что это не всегда бывает легко.

Основа любой темы — файлы style.css и index.php

Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал misha123 . Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.

Если вы забили на style.css , то в админке во Внешний вид > Темы ожидайте такой ошибки:

Если вы забили на index.php:

Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам .

До тех пор, пока мы ещё не изучили , index.php у нас будет отвечать за вывод любой страницы сайта, а style.css , понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.

Theme Name Название темы, я прав? Version Текущая версия вашей темы Description Не знаю, что значит этот параметр Author Тут можете указать себя и тех людей, которые вам помогали Author URI URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress License Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL License URI А в этом параметре указывается ссылка на страницу с лицензией Text Domain Что-то, связанное с переводом темы на другие языки, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про . Tags Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно скипнуть этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Нет, сюда не нужно закидывать всё, что в голову придёт, со списком поддерживаемых тегов можно ознакомиться на официальном сайте .

На самом деле ни один из этих параметров не обязателен! И так всё прокатит. Например как тут:

Не исключаю, что кого-то такой вариант устроит, но только не меня, сейчас я просто скопирую предыдущий код в начало style.css темы и вот что у меня получится:

Установка изображения темы

Согласитесь, на фоне других тем наша выглядит довольно уныло из-за отсутствия изображения! Ещё и квадратики мерцают при скролле 😭

Для того, чтобы это исправить, мы просто создаём файл screenshot.png и отправляем его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальном Кодексе WP рекомендуется всё же использовать screenshot.png .

Вот, другое дело:

В этом примере я специально взял квадратную картинку в jpg-формате и она вполне годно отображается на странице со всеми темами, но если вы откроете информацию о теме в попап-окне, то будет печаль. Картинка растянется и будет некачественно.

Хоть и не обязательный, но по факту главный файл темы — functions.php

Трудно представить тему для WordPress, в которой отсутствует файл functions.php , он используется для включения каких-либо функций темы, например , также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require() .

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

Главное правило по functions.php — сам по себе файл не должен ничего выводить! 💀 То есть никогда! 👿

Как видите, я просто указал кодировку, вставил таблицу стилей, хоть и не совсем правильно при помощи и написал в теле документа «Привет мир!»

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

И ещё кое-что, для того, чтобы помочь WordPress взаимодействовать с вашей темой, вы должны добавить перед закрывающимся тегом функцию , а перед закрывающимся тегом функцию , выглядеть это будет примерно так:

Привет мир!

Когда я создаю какую-то тему, самая приятная часть для меня — это разделить вёрстку условно на шапку сайта, подвал и всё остальное, после этого код шапки отправляется в файл header.php и в дальнейшем подключается функцией , код подвала сайта отправляется в файл footer.php и в дальнейшем подключается функцией . Приступим.

header.php

В хедер стараемся включить то, что повторяется на всех страницах сайта, ну или почти на всех.

Представляем Вашему вниманию краткий мануал о том, как самостоятельно создать тему для ставшего многим любимым движка 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 код. В необходимо выводить заголовок () сайта. Нужный заголовок возвращается функцией</p><p>Wp_title(); </p><p>Также обязательной является подстановка кодировки, в которой будет отдана страница. Кодировка возвращается функцией</p><p>Bloginfo("charset"); </p><p>Разумеется, здесь же необходимо поместить ссылку на таблицу стилей, на rss и прочую техническую информацию. Для всего существуют свои функции.</p> <p>Готовый файл header.php у нас будет выглядеть вот так (показано ниже), там вы сможете увидеть прочие функции и на интуитивном уровне понять что за что отвечает.</p> <p>Заходим через админку в редактор файла header.php, вставляем код из нужного файла архива mytheme.</p> <p><i><b>footer.php </b> </i><br> В этом файле содержится подвал сайта. На нем мы выведем название сайта и год.<br> Заходим через админку в редактор файла footer.php, вставляем код из нужного файла архива mytheme.</p> <p><i><b>sidebar.php </b> </i><br> Теперь давайте реализуем сайдбар, в котором будет выводиться навигация по сайту. Навигацию для простоты понимания, мы будем реализовывать посредствои виджетов.</p> <p>Заранее приведу готовый sidebar.php, а потом расскажу о нем поподробнее.</p><p>PHP код в сайдбаре создает новый блок для виджета под названием “Sidebar” (его мы установим в следующем файле), наполнить его содержимым можно в редакторе тем, в разделе виджеты. Там все должно быть понятно, позже, добавляя виджеты, вы сможете смотреть что именно добавляется на сайте с каждым новым виджетом и понять суть всего происходящего.</p> <p>Для большей гибкости, навигацию часто делают не посредством виджетов, а посредством следующих функций:</p><p>Wp_get_archives("type=monthly"); wp_list_pages("title_li=" . ("Страницы:")); wp_list_categories("title_li=" . __("Категории:")); wp_meta(); </p><p>Думаю, вам должно быть интуитивно понятно, какая из функций что выводит.</p> <p><i><b>functions.php </b> </i><br> Данный файл содержит функции, которые автоматически подключаются к шаблону, а некоторые WP самостоятельно выполняет перед генерацией страницы.</p> <p>В сайдбаре мы использовали виджет под названием “Sidebar”, теперь необходимо его установить в functions.php. Виджеты устанавливаются функцией register_sidebar, которой в качестве параметры передается массив значений, необходимый для управления отображением блоков.</p> <p>В нашем случае, чтобы установить виджет, нужно добавить в functions.php следующий код:</p><p> <?php if(function_exists("register_sidebar")) { register_sidebar(array("name"=>"Sidebar" "before_widget" => "", "after_widget" =>"", "before_title" => "<h3>", "after_title" => "</h3>",)); } ?> </p><p>Как видите, мы установили виджет под названием ‘name’=>’Sidebar’, до и после виджета нам не нужно никакого html кода, поэтому следующие 2 значения оставили пустыми, заголовок блока с элементом виджета мы помещаем в теги <h3>, что наглядно продемонстрировано в последних двух значениях.</p> <p>Итак, виджет определен, немного позже вы сможете поиграться им и оценить по достоинству эту замечательную возможность WordPress.</p> <p><i><b>index.php </b> </i><br> Этот файл отвечает за вывод того, что пользователь видит на главной странице сайта. Сейчас мы впервые узнаем, как подключать другие шаблоны (шапку, подвал, сайдбар и т.д.). А подключаются другие шаблоны следующим образом:</p> <p>Подключение шапки header.php:</p><p>Get_header(); </p><p>Подключение сайдбара sidebar.php:</p><p>Get_sidebar(); </p><p>Подключение подвала footer.php:</p><p>Get_footer(); </p><p>Откройте index.php из архива mytheme.</p> <p>В коде index.php вы увидели некоторые новые функции. Думаю, и без разъяснения понятно, что каждая из них делает и какие параметры ей передаются. Самой важной функцией является</p><p>В параметре этой функции - надпись, которая выводится в том случае, если содержание записи необходимо обрезать. Описывать остальные функции не считаю нужным, так как должно быть понятно, что, где и как. Главное - понять принцип подключения шаблонов функциями get_***();</p> <p><i><b>archive.php, page.php, single.php </b> </i><br> А теперь мы плавно переходим к следующим файлам. Во все файлы, кроме 404.php, style.css и comments.php можно вставить тот же код, что и в index.php. Да, да, тоже самое. Как так? Давайте разберемся. Все станет понятно, когда вы поглубже вникните в php код index.php. Давайте посмотрим, что же там происходит.</p> <p>Мы видим функция <?php if (have_posts()) : ?> возвращает true в случае, если записи по существующему критерию существуют, в противном случае возвращается false. Мы также видим, что если WordPress есть что показать, он выполняет цикл <?php while (have_posts()) : the_post(); ?>, в котором он выводит все записи, удовлетворяющий критерию. Например, если пользователь кликнул на категорию “Авто”, WP вытаскивает из базы данных все записи этой категории, помещает в have_posts(), а если пользователь кликнул на какую-либо страницу, - WP вытаскивает из базы данных ту самую страницу и также помещает ее в функцию have_posts(), которую мы обходим циклом (в данном случае 1 раз) и выводим.</p> <p>Если have_posts() вернет false, тоесть если ни 1 записи, подходящей под критерии нет, то отобразится</p><p> <h2 align="center">Не найдено</h2><p align="center">Извините, ничего не найдено.</p> </p><p>Если посидеть несколько минут и разобрать алгоритм, все встанет на свои места.</p> <p>Хотя нет, просто код файлов page.php, single.php не полностью соответствует index.php, в эти файлы необходимо также добавить comments_template(); в то место, гле вы хотите видеть комментарии к записи. Эта функция подключает в шаблон comments.php, описанный ниже.</p> <p><b>comments.php </b><br> На первых порах лучше всегда использовать стандартную форму комметариев, по этому возьмите ее из архива mytheme.</p> <p><i><b>404.php </b> </i><br> Этот файл подключается, если пользователь пришел на что-то несуществующее, например, несуществующую категориию. Сюда просто пишем любое сообщение об ошибке, если есть желание, старыми способами подключаем шапку, подвал и прочие части темы. Данный файл не обязателен!</p> <p><i><b>style.css </b> </i><br> Ну а тут совсем все просто. Здесь пишем таблицы стилей, они будут автоматически подключаться к каждой странице.</p> <p><b>Шаг 5. Делаем дополнения и правки. </b><br> У вас есть готовая тема, которую вы можете самостоятельно переделывать и доделывать как хотите.</p> <p>Здравствуйте, друзья! Сегодня я расскажу о принципах и технических моментах создания темы для WordPress с нуля. Эта статья написана для тех, кто имеет какой-то опыт работы с движком WordPress и, хотя бы на базовом уровне, разбирается в HTML и CSS.</p> <p>Темы разрабатываются под разные задачи: интернет-магазин, фото или видео сайт и т.д., мы же рассмотрим обычную тему блога и алгоритм действий по ее созданию.</p> <p>Если вы решили создать собственную уникальную тему оформления, то перед созданием темы нужно продумать дизайн и сверстать HTML шаблон сайта или заказать у фрилансеров, решать вам. В общем, у вас должен получиться сверстанный шаблон, например, вот с таким содержимым: файлы index.html и style.css , папка картинок images и папка js со скриптами. Из этого шаблона мы и будем делать тему оформления.</p> <p>Если же у вас пока нет собственного HTML шаблона для темы, то можете потренироваться, взять решение из данной статьи и набросать стили под себя. Для примера я возьму вот такой простенький HTML код главной страницы с разметкой шапки сайта, одного анонса поста, правой колонки и футера:</p> </div> </body> </html> </p><p>Для создания темы оформления необходимо знать функции или как их еще называют — теги WordPress. Мы разберем основные функции темы, со всеми тегами вы можете ознакомиться на официальном сайте <i>codex.wordpress.org </i>.</p> <h2>Структура темы WordPress</h2> <p>В папке themes создаем папку и называем ее, например, mytheme . Затем в нее переносим наш style.css и создаем необходимые файлы.</p> <p><b>Создаем шаблоны блоков, которые отображаются на всех страницах: </b></p> <ul><li>header.php - шапка вашего сайта;</li> <li>sidebar.php - боковая колонка с различными виджитами;</li> <li>footer.php - подвал сайта.</li> </ul><p><b>Шаблоны контента: </b></p> <ul><li>Index.php - шаблон главной страницы, выводятся короткие анонсы статей;</li> <li>single.php - шаблон постов (статей);</li> <li>page.php - шаблон статических страниц;</li> <li>category.php - шаблон категорий;</li> <li>search.php - шаблон выдачи результатов поиска;</li> <li>404.php - шаблон сообщения о несуществующей странице;</li> <li>comments.php - шаблон коментариев.</li> </ul><p><b>Дополнительные файлы: </b></p> <ul><li>functions.php - файл дополнительного функционала и изменения стандартного функционала движка WordPress;</li> <li>searchform.php - код формы поиска;</li> <li>screenshot.png - Изображение 880 х 660, превью отображается в админке во вкладке «темы».</li> </ul><p><b>Не обязательные шаблоны (по моему мнению): </b></p> <ul><li>author.php - шаблон страницы автора;</li> <li>archive.php - шаблон архивов;</li> <li>date.php - шаблон вывода дат;</li> <li>tag.php - шаблон меток;</li> <li>attachment.php - шаблон страниц вложения.</li> </ul><p>Лично я редко использую пять последних шаблонов, в основном делаю перенаправление на «главную» или на «404 ошибку» при запросе данных шаблонов. Информацию об авторе можно оформить на основе page.php , а остальные четыре только плодят дублированный контент на вашем сайте, организацию архивов можно реализовать намного продуктивнее.</p> <p>Начинаем с файла style.css , делаем отступ и в самом верху вставляем закомментированный текст с названием и описанием темы.</p><p> /* Theme Name: Название темы Theme URI: УРЛ адрес, если есть отдельный сайт о теме Description: Описание темы оформления Version: Версия, например (1.0) Author: Ваше имя Author URI: УРЛ адрес автора темы */ </p><blockquote class="citata-info"> <p>Файл стилей придется редактировать при подключении функционала WordPress, который добавляет дополнительные участки кода.</p> </blockquote> <h3>Формируем header.php</h3> <p>Из HTML файла переносим сюда все, что находится в <head> и элементы в <body> , которые относятся к шапке сайта. У меня в шапке большое изображение с информацией о сайте и меню.</p> <p>Код был таким.</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Мой блог

После переноса и редактирования стал таким.

" /> <?php echo wp_get_document_title(); ?> " rel="stylesheet" type="text/css" />