Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.
Адаптировать дизайн под WordPress может понадобиться по многим причинам, например, вы переносите на CMS свой некогда статичный сайт, или вам понравился дизайн, которого в коллекции WordPress ещё нет, или вы просто хотите разобраться, как устроены темы этой CMS изнутри.
Итак, приступим.
Распределяем код по файлам
1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/ ). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/ .
2. Переименуйте файл styles.css в style.css .
3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:
/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Как вы могли догадаться, это служебная информация о теме оформления: название, автор, описание, лицензия, версия и т. д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.
4. Создайте файлы header.php , index.php , sidebar.php , footer.php и распределите по ним код из index.html .
4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css - новое корректное имя файла.
4.2. В index.php вставьте код основного блока (со строки по строку ).
4.3. В sidebar.php скопируйте код бокового меню (с по ).
4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html ).
5. Удалите index.html .
6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы . Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.
Адаптируем header
Теперь мы начнём из статичного шаблона делать динамическую тему, в которую будут подгружаться данные и настройки WordPress.
В шаблоне будут встречаться PHP-вставки. Начинается такой код с . Между ними расположен PHP-код, чаще всего вызывающий функции CMS
1. Откройте файл header.php и замените содержащийся в нём код до блока
на следующий:
>
"> "> " type="text/css" media="screen" />Мы сделали динамическим блок
Код вызывает функцию, возвращающую языковые атрибуты в контейнер.
">
Вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.
Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.
2. Перейдите к редактированию файла index.php. В самом его начале пропишите
,
Строчки вызывают файлы шапки, боковой панели и низа сайта.
Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.
Делаем динамическим верхнее меню
Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.
Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код
так, чтобы получилось следующее:
Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.
Суть действий в том, что файл header.php функцией wp_nav_menu("menu=menu"); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php .
Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:
#menu ul { margin: 0; /* Обнуляем значение отступов */ padding: 4px; /* Значение полей */ font-size: 18px; } #menu ul li { display: inline; /* Отображать как строчный элемент */ margin-right: 5px; /* Отступ слева */ padding: 3px; /* Поля вокруг текста */ }
Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.
Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.
Завершаем «шапку»
Единственные элементы файла header.php , оставшиеся статическими - имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:
Обновите страницу - результат не заставил себя долго ждать.
Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:
>
"> "> " type="text/css" media="screen" />Выводим посты
Переходим к части, содержащей основной контент страницы - редактироваться будет файл index.php .
Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
">
/ /А здесь нет ничего:(404
Начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
">
Отображает заголовок поста.
/ /
Дата в формате день, месяц (сокращённо), год. Теги, комментарии.
Вывод поста.
Конец цикла при условии, что записи были.
Если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
Вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу - блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки - с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней - блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
- зарегистрировать блок виджетов;
- вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
2. Внесите в следующий код:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Этот код регистрирует блок виджетов. Вместо MySidebar вы можете вписать любое другое название. Примерно такой же функцией в этом файле можно регистрировать и меню, но я решил обойтись малой кровью и этого не делать, чтобы соприкосновение с PHP сделать минимальным, а заодно и показать два разных подхода к решению одной задачи.
3. В файле sidebar.php сотрите строки:
Информация
Далее...
и вместо них запишите:
Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.
4. Зато перемены к лучшему произошли в админ-панели - раздел Внешний вид обзавёлся подпунктами Виджеты и Меню . Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).
5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст , в поле Заголовок введите Информация , в поле Текст - код
Мы предлагаем Вам праздничные скидки. Далее...
6. Обновите страницу блога - блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).
Адаптируем меню
Вторая часть боковой панели - вертикальное меню. Его тоже нужно переделать из статического в динамическое, чтобы редактировать затем прямо из админки.
1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:
2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню , нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu ) и добавьте все необходимые пункты.
3. Сохраните изменения, обновите страницу и убедитесь, что динамическое меню левой части сайта работает и отображается правильно.
Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:
Меню
Фактически статичной осталась только надпись Меню . И то потому, что меняться вряд ли будет, хотя и её легко можно «оживить», например, реализовав этот блок в виде ещё одной области виджетов и добавив на него блок Произвольное меню, но это, если внимательно читали статью, вы можете теперь легко сделать самостоятельно.
Работаем с файлом footer.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 код. В
необходимо выводить заголовок (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 следующий код:
"Sidebar" "before_widget" => "", "after_widget" =>"", "before_title" => "
", "after_title" => "
",)); } ?>Как видите, мы установили виджет под названием ‘name’=>’Sidebar’, до и после виджета нам не нужно никакого html кода, поэтому следующие 2 значения оставили пустыми, заголовок блока с элементом виджета мы помещаем в теги
, что наглядно продемонстрировано в последних двух значениях.
Итак, виджет определен, немного позже вы сможете поиграться им и оценить по достоинству эту замечательную возможность 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. Давайте посмотрим, что же там происходит.
Мы видим функция возвращает true в случае, если записи по существующему критерию существуют, в противном случае возвращается false. Мы также видим, что если WordPress есть что показать, он выполняет цикл , в котором он выводит все записи, удовлетворяющий критерию. Например, если пользователь кликнул на категорию “Авто”, WP вытаскивает из базы данных все записи этой категории, помещает в have_posts(), а если пользователь кликнул на какую-либо страницу, - WP вытаскивает из базы данных ту самую страницу и также помещает ее в функцию have_posts(), которую мы обходим циклом (в данном случае 1 раз) и выводим.
Если have_posts() вернет false, тоесть если ни 1 записи, подходящей под критерии нет, то отобразится
Не найдено
Извините, ничего не найдено.
Если посидеть несколько минут и разобрать алгоритм, все встанет на свои места.
Хотя нет, просто код файлов page.php, single.php не полностью соответствует index.php, в эти файлы необходимо также добавить comments_template(); в то место, гле вы хотите видеть комментарии к записи. Эта функция подключает в шаблон comments.php, описанный ниже.
comments.php
На первых порах лучше всегда использовать стандартную форму комметариев, по этому возьмите ее из архива mytheme.
404.php
Этот файл подключается, если пользователь пришел на что-то несуществующее, например, несуществующую категориию. Сюда просто пишем любое сообщение об ошибке, если есть желание, старыми способами подключаем шапку, подвал и прочие части темы. Данный файл не обязателен!
style.css
Ну а тут совсем все просто. Здесь пишем таблицы стилей, они будут автоматически подключаться к каждой странице.
Шаг 5. Делаем дополнения и правки.
У вас есть готовая тема, которую вы можете самостоятельно переделывать и доделывать как хотите.
Это главная страница руководства по созданию тем (шаблонов) для 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. Для тестирования будет полезно подабавлять пару-тройку пробных постов. Если вы боритесь за чистоту кода, то следите внимательно за тем, куда вставлять нужные куски кода.
Я надеюсь, вам помогла эта статья! Если что-то непонятно, не бойтесь спрашивать.
» »