Как создать свою тему wordpress. Создание простой Wordpress темы. Ссылки на файлы из шаблона
Это главная страница руководства по созданию тем (шаблонов) для WordPress. Основная информация взята из официального руководства и из личного опыта.
Что такое тема?
Тема WordPress - это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать... В других движка тему еще называют "шаблоном", но в WordPress принято говорить именно тема - theme, а не шаблон - template. Хотя и то и другое по сути одно и тоже...
Таким образом, если вы меняете тему, то сайт меняет свой вид, выглядит иначе. На WordPress.org есть тысячи бесплатных тем . Несмотря на широкой выбор тем, многие предпочитают создавать свои темы. Связанно это в первую очередь с тем, что создать простую тему не сложно.
Необходимые файлы
Чтобы создать тему необходимы лишь два файла:
index.php - главный файл темы, отвечает за вывод содержимого
style.css - главный файл стилей, отвечает за css стили
Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:
header.php - отвечает за вывод шапки
footer.php - отвечает за вывод подвала
sidebar.php - отвечает за вывод боковой панели
page.php - отвечает за вывод отдельной страницы (записи)
и т.д. смотрите полный список .
Возможности темы
Возможности темы по сути безграничны, ведь там можно полностью использовать PHP. НО! Тема, как призвана отображать содержимое сайта определенным образом, а не добавлять функционала сайту. Поэтому возможности темы принято ограничивать до тех, которые отвечают за внешний вид, а все остальные возможности: голосование, рейтинги, редиректы, СЕО и т.п. принято выносить в плагины...
Таким образом, тема может:
Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
Тема может выводить любое содержимое;
Может указать, какой контент будет отображаться для разных пользователей;
Может использовать любые элементы дизайна (картинки, видео).
Как и на любом сайте, тема - это не только цветовое решение, макет и красивая картинка. По-настоящему качественные темы еще и очень функциональны. Функциональность темы, заключается в её гибкой настройке. Т.е. она не добавляет ничего нового на сайт, но отлично настраивается по вкусу владельца. Например: устанавливается фоновая картинка, меняется цвета элементов, настраивается меню и блоки с контентом (виджеты).
Чем тема отличается от плагина?
С точки зрения кода, можно сказать, ничем - в теме можно создать полноценный плагин. А вот с точки зрения логики - всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы - вывод содержимого, в том числе, этого опроса...
Таким образом, тема отвечает за показ контента на странице, а плагин нужен для реализации функционала сайта.
Никогда не добавляйте функциональность в саму тему, если только на это нет веских причин. Если это сделать, то при смене темы функциональность потеряется в месте с ней. Например, в вашей теме есть крутая фотогалерея. И если поменять тему, то эта крутая фотогалерея потеряется...
В интернете есть, конечно, информация на данную тему, но она так скудна.. и совсем не для новичков, которые стремятся к познаниям и в тоже время первый раз видят PHP-код.
Сейчас я расскажу о том, как создать свою тему для WordPress
. Рассмотрим всё по пунктам, с картинками. Скажу лишь, что ничего придумывать не надо, все функции, которые здесь употребляются — уже встроены в движок.
Если вы понимаете HTML и CSS, что несложно будет перейти к созданию собственной темы для WordPress. В этом посте я расскажу, как создать полностью готовую Worpress-тему от скетча до полной боевой готовности. Мы увидим, как статичный дизайн превращается в полноценный сайт, который мы наполним функциональностью.
Работать мы сегодня будем с дизайном для марки Sticky. Главная фишка сайта — легкий сайдбар, который будет всегда находиться на своём месте, независимо от прокрутки. Также разные украшательства сделаны с помощью CSS3.
Не будем вдаваться в детали создания дизайна, скажу лишь, что здесь использовалось 12 колонок по 24px; мягкие цвета для основного цвета и коричневый и тёмно-красный — для акцентов; в тексте используем шрифт serif;
в целом дизайн производит впечатления осязаемого и реалистичного.
Анатомия темы WordPress
Перед тем, как начинать создавать тему, важно знать, как же она устроена. Если посмотреть структуру большинства тем, то можно увидеть, что она состоит из примерно 12 корневых файлов. Что это за файлы?
header.php
- содержит всё то, что находиться в верхушке сайта.
index.php
- самое ядро темы, к нему крепяться все остальные части.
sidebar.php
- содержит боковую панель (меню)
footer.php
- всё то, что находится в подвале темы.
archive.php
- шаблонный файл, который отображает когда были сделаны записи, авторы и тп.
single.php
- шаблонный файл, который отвечает за загрузку одного поста (когда вы переходите на него по ссылке).
comments.php
- прикрепляется к концу single.php
, чтобы дать людям возможность оставлять комментарии
page.php
- подобная single.php
, но используется для WordPress страниц.
search.php
- шаблонный файл, используется для отображения результатов поиска..
404.php
- шаблонный файл, сообщает об ошибке 404
style.css
- все CSS-стили вашей темы
functions.php
- файл используется для изменения функционала WordPress без изменения ядра движка.
Базовый код
Так как наша тема использует в основном HTML и CSS, и немного PHP, очень важно создавать шаблон, как если бы это был старый добрый статичный сайт. Наметаем наш дизайн в виде первоначального шаблона:
Создание WP — темы
Теперь, когда у нас есть очертания будущей страницы, мы начнём превращать наш код в wordpress-тему
. Начнём с создания папки для нашей темы и создания php — файлов (header.php
, и тд.). Как вариант, можете из из темы Default
, которая прилагается с движком, удалить содержимое и заменить на своё и залить свои скрипты и картинки..
Создание файла стилей
Каждая тема Worpress снабжена таким файлом, это обычный CSS. Так что в самом верху пропишем кое-что о себе:
/* Theme Name: Sticky Theme URI: http://www.blog.spoongraphics.co.uk Description: Sticky WordPress theme Version: 1 , чтобы все пути были прописаны правильно.
Загружаем Header
Открываем наш header.php
и вставляем в него соответствующую часть кода из HTML. Теперь мы должные поменять код на корректный для WordPress. wp_title();
отображает title
страницы, которое следует из bloginfo(‘name’)
, которая в свою очередь заменяется в админ-панели.
bloginfo(‘stylesheet_url’); подключает страницу стилей. Им заменяют обычный путь к стилю. Другие файлы, такие как Javascript, подключает тег bloginfo(‘template_url’); он указывает путь до папки с темой.
Если вы хотите наполнить свою тему комментариями, что добавьте соответствующий javascript из ядра WordPress. Перед тем, как закроется тег /head>
, вставляем wp_head();
, это то место, куда будут добавляться дополнительные плагины.
Строим Index
Здесь начинается самое сочное) Сначала мы вставляем теги get_header();
и get_sidebar()
, которые отвечают header.php
и sidebar.php
. WordPress «закручивается» и начинает проверять контент, которые ему доступен. Внутри этого цикла мы видим различные теги, которые содержат информацию о посте, такие как the_title();,
и the_permalink();
. Они заключаются в теги HTML соответственно их цели. Так, тег the_permalink
отвечает за путь к ядру темы и указывается 2 раза — в пути к картинке и в ссылке на сам пост в теге title.
the_post_thumbnail();
— дополнительная опция, этот код может добавить к посту иконку в WordPress 2.9. Ниже расположен контент, который вставляется через тег the_content(»);
В мета — секции можно увидеть такую специфическую информацию, как время написания, количество комментариев и тп.. Это всё подключается шаблонными тегами, такими как the_time(‘F jS, Y’);
. Параметры их можно менять, например, отображение даты можно изменять в соответствующем разделе админки WordPress. (полезно будет почитать WordPress Codex).
Двигаясь чуть ниже, цикл отображает тег else
, который отображает то, что получается, если постов не найдено) и цикл заканчивается тегом endif.
После завершения цикла мы добавляем get_footer();
который подстоединяет footer.php
Заполняем Sidebar
В боковой панели отображаются такие вещи, как список категорий и список страниц.Sidebar
подключается функцией get_sidebar();
Только три вещи в нашем sidebar’e — лого, список страниц и категорий. Лого поместим в тег h1, к которому подключены функции get_option(‘home’);
и bloginfo(‘name’);
для обозначения URL Блога и присвоения соответствующего имени в нужных местах. Список страниц обеспечивает wp_list_pages(‘title_li=’);
, который вылавливает названия всех страниц, которые были созданы. Список категорий вызвать столь же легко, wp_list_categories();
. Эта функция используется со многими параметрами, такими как show_count=0
(предотвращает показ количества постов в каждой категории), hide_empty=0
(показывает категорию, даже если в той нет постов), и exclude=1 (исключает категорию с id=1, как правило это категория «Без рубрики «).
Закругляемся на footer’е
Это самая простая часть, вставаляем wp_footer();
перед /body>
. В него помещается такая информация, как последние записи, последние комментарии и что-нибудь в этом духе. Всё это можно сделать, используя шаблонные теги WordPress.
Создаём страницу архива
Архив содержит в себе список постов, рассортированных по автору, дате, категории и тп. Эта страница очень похожа на index.php
, но в самом её верху публикуется тега с заголовком, чтобы юзер знал, в на какой странице он вообще находится. Например, «Архив». По желанию можно почистить цикл от текстов постов, количества комментариев и тд, в этом случае будет выводиться просто список заголовков постов.
Конструируем страницу просмотра одного поста
Для создания страницы поста используется шаблонный файл single.php
, которая очень похожа на page.php
. Тут всё просто. Комментаррии подсоединяем comments_template();
Конфигурация комментариев
Чем придумывать код — надо взять комментарии с Default theme
, и внести свои изменения.
Если создать шаблон для комментариев, то он пригодится очень надолго. Сложно писать CSS для комментариев, вернее, сложно разобраться в исходнике. На помощ придёт — Плагин для Мозиллы, который помогает разбираться с кодом. Хотя некоторые параметры можно поменять и в самом коде WordPress, например, размер аватара. (параметр avatar_size
).
Завершаем страницей 404 и страницей поиска
Страница поиска — копия archive.php
, но вручную нужно добавить: Результаты поиска,
а в странице 404 может разгуляться ваша фантазия. Только не забудьте добавить get_header();
, и get_footer();
где нужно
Вот и всё
Мы ознакомились, как создать свою тему 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 код. В
необходимо выводить заголовок () сайта. Нужный заголовок возвращается функцией</p><p>Wp_title();
</p><p>Также обязательной является подстановка кодировки, в которой будет отдана страница. Кодировка возвращается функцией</p><p>Bloginfo("charset");
</p><p>Разумеется, здесь же необходимо поместить ссылку на таблицу стилей, на rss и прочую техническую информацию. Для всего существуют свои функции.</p>
<p>Готовый файл header.php у нас будет выглядеть вот так (показано ниже), там вы сможете увидеть прочие функции и на интуитивном уровне понять что за что отвечает.</p>
<p>Заходим через админку в редактор файла header.php, вставляем код из <a href="/smartphone/vindovs-smart-skrin-meshaet-rabotat-s-failami-dlya-chego-nuzhen-process/">нужного файла</a> архива 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>
<a href="/miscellaneous/kak-perevesti-s-kompyutera-na-fleshku-dannye-kak-zapisat-fail-na/">Данный файл</a> содержит функции, которые автоматически подключаются к шаблону, а некоторые 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>
Этот файл отвечает за вывод того, что пользователь видит на <a href="/miscellaneous/glavnaya-stranica-upravleniya-maginfo-dr-web-av-desk-obezopasit-set/">главной странице</a> сайта. Сейчас мы впервые узнаем, как подключать другие шаблоны (шапку, подвал, сайдбар и т.д.). А подключаются другие шаблоны следующим образом:</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(), которую мы обходим циклом (в <a href="/apple/v-kakih-sluchayah-personalnye-dannye-stali-obshchedostupnymi-kakie/">данном случае</a> 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. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.</p>
<h2>1. Frontend блога</h2>
<p>До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.).</p>
<p>Стандартный Frontpage (<i>index.php
</i>)
</p>
<p><img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_default-single.gif' align="center" height="480" width="470" loading=lazy></p>
<p>Стандартный Single (<i>single.php
</i>)
</p>
<h2>2. Photoshop-макеты</h2>
<p>Основываясь на <a href="/linux/obzor-smartfona-meizu-m1-note-seryi-kardinal-v-mire-android-meizu-m1-note--/">внешнем виде</a> <a href="/solutions/skachat-programmu-dlya-vk-stilya-na-kompyuter-kak-ustanovit-temy/">стандартной темы</a>, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip , чтобы увидеть готовый файл Photoshop.</p>
<p><img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_photoshop-mockup.gif' align="center" width="100%" loading=lazy></p>
<h2>3. HTML и CSS</h2>
<p>Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из <i>demo.zip
</i>. Распаковав архив, вы увидите <i>index.html, single.html
</i>и<i> page.html
</i>. Далее я буду использовать их для превращения в шаблон.</p>
<p><img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_html-css-template.gif' align="center" height="152" width="386" loading=lazy></p>
<p><b>Зачем сперва создавать статический HTML?
</b> Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить <a href="/modems/kak-udalit-virus-ili-vredonosnyi-kod-iz-wordpress-testirovanie/">код WordPress</a>. Так что можно уже не беспокоиться об ошибках в HTML или CSS.</p>
<h2>4. Как работает тема WordPress</h2>
<p>Если вы перейдёте к папке стандартной темы (<i>wp-content/themes/default
</i>), то увидите много php-файлов (называемых файлами шаблонов) и один файл <i>style.css
</i>. Для формирования страницы WordPress обычно использует несколько файлов шаблонов (<i>index.php
</i> <i>, header.php, sidebar.php,
</i>и<i> footer.php
</i>).</p>
<p><img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_how-theme-works.gif' align="center" height="273" width="289" loading=lazy></p>
<p>Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .</p>
<h2>5. Дублирование файлов шаблонов</h2>
<p>Скопируйте папку HTML
из GlossyBlue
в папку <i>wp-content/themes
</i>. После этого перейдите в директорию темы default
, скопируйте <i>comments.php
</i> и <i>searchform.php
</i> в папку <i>glossyblue
</i>.</p>
<p><img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_copy-files.gif' align="center" height="177" width="341" loading=lazy></p>
<h2>6. Style.css</h2>
<p>Перейдите в папку темы default
, откройте файл <i>style.css
</i>. Скопируйте закомментированный в начале файла текст и вставьте в <i>style.css
</i> темы GlossyBlue
. Если хотите, можете изменить название и данные об авторе. <br><img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_css-commented-code.gif' width="100%" loading=lazy></p>
<h2>7. Разделение файлов</h2>
<p>Теперь нам нужно понять где разделить HTML-файлы на части: <i>header.php
, sidebar.php
, и footer.php
</i>. На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.</p>
<p><img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_splitting-files.gif' align="center" width="100%" loading=lazy></p>
<h2>8. Header.php</h2>
<p>Откройте <i>index.html
</i>. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как <i>header.php
</i>. <br><img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_header-code.gif' width="100%" loading=lazy> Перейдите в папку темы default
, откройте новый <i>header.php
</i>. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div class=description.</p>
<p><img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_header.gif' align="center" width="100%" loading=lazy></p>
<p><b>Меню навигации
</b> (<span>wp_list_pages
</span>) Замените тэги <span>li
</span> в <span>ul id=nav
</span> на ;</p>
<p><img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_navigation-menu.gif' align="center" width="100%" loading=lazy></p>
<h2>9. Sidebar.php</h2>
<p>Вернитесь к <i>index.html
</i>, вырежьте код с того места, где начинается <span>form id=searchform
</span> и до закрытия тега <span>div id=sidebar
</span>, поместите его в новый php-файл и сохраните как <i>sidebar.php
</i>.</p>
<ul><li>Замените <span>form id=searchform
</span> со всем содержимым на .</li>
<li>Замените теги <span>li
</span> категорий на </li>
<li>Замените теги <span>li
</span> архивов на </li>
</ul><p><img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_sidebar-code.gif' align="center" width="100%" loading=lazy></p>
<h2>10. Footer.php</h2>
<p>Вернитесь к <i>index.html
</i>. Извлеките оттуда код от <span>div id=footer
</span> включительно с тегом div id=footer
и до конца <span>/html
</span> затем поместите в новый <i>footer.php
</i>.</p>
<p><img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_footer.gif' align="center" width="100%" loading=lazy></p>
<p><b>Недавние записи
</b> Тут я использовал query_post для отображения 5 последних записей в блоге.</p>
<p><img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_recent-posts.gif' align="center" width="100%" loading=lazy></p>
<p><b>«Последние комментарии»
</b> «Последние комментарии» сгенерированы плагином (включён в папку темы)</p>
<p><img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_recent-comments.gif' align="center" width="100%" loading=lazy></p>
<h2>11. Index.php</h2>
<p>Теперь в вашем <i>index.html
</i> должен остаться только <span>div id=content
</span>. Сохраните файл как <i>index.php
</i>. Впишите строки: <span>get_header
</span>, <span>get_sidebar
</span>, и <span>get_footer
</span> в том порядке, как они встречаются в шаблоне. <br><img src='https://i0.wp.com/images.netpeak.ua/blog/maybe01_index.gif' width="100%" loading=lazy></p>
<h2>12. Разбор цикла</h2>
<p>Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение <b>«Not Found»
</b>.</p>
<p><img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_the-loop-explain.gif' align="center" height="201" width="327" loading=lazy></p>
<h2>13. Копирование цикла</h2>
<p>Перейдите к директории темы default
, откройте <i>index.php
</i>. Скопируйте цикл из стандартного <i>index.php
</i> в свой — между <span>div id=content../div
</span>. После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.</p>
<p><img src='https://i1.wp.com/images.netpeak.ua/blog/maybe01_the-loop.gif' align="center" width="100%" loading=lazy></p>
<h2>14. Предпросмотр темы</h2>
<p>Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке <b>Design
</b>, вы должны увидеть тему GlossyBlue
. Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.</p>
<h2>15. Single.php</h2>
<p>Пришло время создать шаблон <i>single.php
</i>. Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный <i>index.php
</i>, сохранив его как <i>single.php
</i>. Откройте <i>single.php
</i> из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите <span>comments_template
</span>. На следующем скриншоте отображены внесенные мною изменения:</p>
<p><img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_single-zoom.gif' align="center" height="516" width="470" loading=lazy></p>
<h2>16. Page.php</h2>
<p>Теперь новый <i>single.php
</i> сохраните с названием <i>page.php
</i>. Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон <i>page.php
</i>готов
.</p>
<h2>17. Удаление файлов HTML</h2>
<p>Удалите все <a href="/wi-fi/kak-preobrazovat-html-fail-v-pdf-fail-kak-preobrazovat-html-fail-v-pdf-fail/">файлы HTML</a> из папки <i>glossyblue
</i>(они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если <i>search.php
</i> или <i>404.php
</i> не будет в папке темы, WordPress автоматически использует <i>index.php
</i> для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.</p>
<h2>18. Шаблон страницы WordPress</h2>
<p>А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте <i>archives.php
</i> из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:</p>
<p><img src='https://i2.wp.com/images.netpeak.ua/blog/maybe01_archives-template.gif' align="center" height="210" width="293" loading=lazy></p>
<p>В этой статье мы узнаем, как создать wordpress тему. Для
начала мы создадим HTML + CSS шаблон, который поместим в структуру wordpress темы.
После того, как вы дочитаете эту статью, вы сможете создать собственный шаблон
для wordpress, а точнее
вы его создадите по ходу чтения и выполнения практических заданий. Вы будете
знать как устроена тема и сможете самостоятельно реализовать ядро wordpress темы из других HTML/CSS шаблонов.
Начнем?</p>
<h2>Вступление –
структура wordpress темы</h2>
<p>Структура wordpress темы, предельно проста. В теме мы имеем файл <b>index.
</b><b>php,
</b>он отвечает за
сборку кусков шаблона. К этому файлу подключены другие: <b>header.
</b><b>php,
</b><b>footer.
</b><b>php
</b>. Эти
файлы (куски шаблона) используются на любой странице сайта. Мы знаем, что не все
страницы строятся по единому шаблону, поэтому wordpress тема
имеет другие файлы, такие как <b>archives.
</b><b>php
</b>или <b>single.
</b><b>php
</b>. Также можно создать свой тип страниц, если вы хотите,
чтобы он категорически отличался от других на сайте. Это очень удобно.</p>
<p>Если вы внимательно
рассмотрите структуру темы, и прочитаете содержимое файлов, то интуитивно
поймете что к чему. Но все же имеются некоторые моменты, которые мы рассмотрим.
Вы всегда сможете вернуться к этой странице и прочитать, как все делается.</p>
<p>А теперь рассмотрим создание шаблона поэтапно:</p>
<h2>Шаг 1 – style.css</h2>
<p>CSS файл, это файл параметров и дизайнерских решений для HTML элементов
шаблона. Вы должны переименовать главный css файл (если он у вас не один) на <b>style.
</b><b>css
</b>. Далее вам необходимо
добавить в начале этого файла следующую закомментированную информацию:</p><p>
/*
Theme Name: Typography Paramount
Theme URI: http://сайт/
Description: An image-less template focusing on Typography..0
.
General comments/License Statement if any.
.
*/
</p><p>Этот код будет показывать
информацию о теме для администраторов. Убедитесь что он в начале файла,
и нету никаких пробельных символов перед ним!</p>
<p>Далее я создал еще один файл, под именем <b>1.
</b><b>css
</b>, и поместил его в папку
<b>typography-paramount
</b>, которую создал
в папке wordpress темы. Нужно четко соблюдать эту структуру, чтобы wordpress смог
видеть этот файл.</p>
<h2>Шаг 2 – header и footer</h2>
<p>На этом этапе мы создадим два файла: <b>header.
</b><b>php
</b>и <b>footer.
</b><b>php
</b>, о которых упоминалось раньше. Хотя они не основные и
включены в тему опционально, они используются в большинстве шаблонов, поэтому
мы их создадим.</p>
<h4><b>Header.php
</b></h4>
<p>Начнем с этого файла. Создайте файл и присвойте ему имя <b>header.
</b><b>php
</b>, после чего вставьте
в него поданный код и сохраните. Этот файл будет отображаться на всех страницах
нашего шаблона.</p><p>
<!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>-
An imageless template focusing on Typography.
Typography Paramount
Link Here
Link Here
Link Here
Link Here
Link Here
До сих пор, не было ничего особенного в отличии от простой html/css темы. Но
теперь мы заменим некоторые элементы на wordpress теги.
Это только некоторые известные мне теги. Намного больше вы
найдете на официальном сайте: 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 шаблона
(темы), выразите свои проблемы в комментариях ниже!
