Создание шаблона wordpress


Как создать шаблон для wordpressВ этой статье мы узнаем, как создать wordpress тему. Для начала мы создадим HTML + CSS шаблон, который поместим в структуру wordpress темы. После того, как вы дочитаете эту статью, вы сможете создать собственный шаблон для wordpress, а точнее вы его создадите по ходу чтения и выполнения практических заданий. Вы будете знать как устроена тема и сможете самостоятельно реализовать ядро wordpress темы из других HTML/CSS шаблонов. Начнем?

Вступление – структура wordpress темы


Структура wordpress темы, предельно проста. В теме мы имеем файл index.php, он отвечает за сборку кусков шаблона. К этому файлу подключены другие: header.php, footer.php. Эти файлы (куски шаблона) используются на любой странице сайта. Мы знаем, что не все страницы строятся по единому шаблону, поэтому wordpress тема имеет другие файлы, такие как archives.php или single.php. Также можно создать свой тип страниц, если вы хотите, чтобы он категорически отличался от других на сайте. Это очень удобно.

Если вы  внимательно рассмотрите структуру темы, и прочитаете содержимое файлов, то интуитивно поймете что к чему. Но все же имеются некоторые моменты, которые мы рассмотрим. Вы всегда сможете вернуться к этой странице и прочитать, как все делается.

А теперь рассмотрим создание шаблона поэтапно:

Шаг 1 – style.css

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

/*   Theme Name: Typography Paramount   Theme URI: http://sitear.ru/   Description: An image-less template focusing on Typography.   Author: Sam Parkinson   Author URI: http://sitear.ru   Version: 1.0   .   General comments/License Statement if any.   .   */


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

Далее я создал еще один файл, под именем 1.css, и поместил его в папку typography-paramount, которую создал в папке wordpress темы. Нужно четко соблюдать эту структуру, чтобы wordpress смог видеть этот файл.

Шаг 2 – header и footer

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

Header.php

Начнем с этого файла. Создайте файл и присвойте ему имя header.php, после чего вставьте в него поданный код и сохраните. Этот файл будет отображаться на всех страницах нашего шаблона.

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


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

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

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

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

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

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

wp_list_pages() – выводит ссылки на страницы сайта.

header wordpress шаблона


Footer.php

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

<?phpthe_time(‘Y’); ?> — отображает текущий год.

<?php bloginfo(‘name’); ?> — название блога.

<?php bloginfo(‘rss2_url’); ?> — добавление ссылки на rssленту блога.

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

footer шаблона для wordpress

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


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

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


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

Также добавлен тег <?php posts_nav_link(); ?>, который выводит навигационные ссылки, чтобы пользователи могли читать ранее добавленные посты.

sitear.ru

Представляем Вашему вниманию краткий мануал о том, как самостоятельно создать тему для ставшего многим любимым движка 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
Думаю, не нужно объяснять, что шапка — это верхняя часть сайта, в которой, как правило, выводится логотип, краткое описание сайта, возможно — меню. В нашей шапке мы будем выводить название сайта и описание сайта.


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

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

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

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

В файл header.php мы также поместим технический html код . В <head> необходимо выводить заголовок (<title>) сайта. Нужный заголовок возвращается функцией

Также обязательной является подстановка кодировки, в которой будет отдана страница. Кодировка возвращается функцией

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

Готовый файл header.php у нас будет выглядеть вот так (показано ниже), там вы сможете увидеть прочие функции и на интуитивном уровне понять что за что отвечает.

Заходим через админку в редактор файла header.php, вставляем код из нужного файла архива mytheme.

footer.php
В этом файле содержится подвал сайта. На нем мы выведем название сайта и год.
Заходим через админку в редактор файла footer.php, вставляем код из нужного файла архива mytheme.

sidebar.php
Теперь давайте реализуем сайдбар, в котором будет выводиться навигация по сайту. Навигацию для простоты понимания, мы будем реализовывать посредствои виджетов.

Заранее приведу готовый sidebar.php, а потом расскажу о нем поподробнее.

PHP код в сайдбаре создает новый блок для виджета под названием “Sidebar” (его мы установим в следующем файле), наполнить его содержимым можно в редакторе тем, в разделе виджеты. Там все должно быть понятно, позже, добавляя виджеты, вы сможете смотреть что именно добавляется на сайте с каждым новым виджетом и понять суть всего происходящего.

Для большей гибкости, навигацию часто делают не посредством виджетов, а посредством следующих функций:

Думаю, вам должно быть интуитивно понятно, какая из функций что выводит.

functions.php
Данный файл содержит функции, которые автоматически подключаются к шаблону, а некоторые WP самостоятельно выполняет перед генерацией страницы.

В сайдбаре мы использовали виджет под названием “Sidebar”, теперь необходимо его установить в functions.php. Виджеты устанавливаются функцией register_sidebar, которой в качестве параметры передается массив значений, необходимый для управления отображением блоков.

В нашем случае, чтобы установить виджет, нужно добавить в functions.php следующий код:

Как видите, мы установили виджет под названием ‘name’=>’Sidebar’, до и после виджета нам не нужно никакого html кода, поэтому следующие 2 значения оставили пустыми, заголовок блока с элементом виджета мы помещаем в теги <h3>, что наглядно продемонстрировано в последних двух значениях.

Итак, виджет определен, немного позже вы сможете поиграться им и оценить по достоинству эту замечательную возможность WordPress.

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

Подключение шапки header.php:

Подключение сайдбара sidebar.php:

Подключение подвала footer.php:

Откройте 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 записи, подходящей под критерии нет, то отобразится

Если посидеть несколько минут и разобрать алгоритм, все встанет на свои места.

Хотя нет, просто код файлов page.php, single.php не полностью соответствует index.php, в эти файлы необходимо также добавить comments_template(); в то место, гле вы хотите видеть комментарии к записи. Эта функция подключает в шаблон comments.php, описанный ниже.

 

comments.php
На первых порах лучше всегда использовать стандартную форму комметариев, по этому возьмите ее из архива mytheme.

404.php
Этот файл подключается, если пользователь пришел на что-то несуществующее, например, несуществующую категориию. Сюда просто пишем любое сообщение об ошибке, если есть желание, старыми способами подключаем шапку, подвал и прочие части темы. Данный файл не обязателен!

style.css
Ну а тут совсем все просто. Здесь пишем таблицы стилей, они будут автоматически подключаться к каждой странице.

Шаг 5. Делаем дополнения и правки.
У вас есть готовая тема, которую вы можете самостоятельно переделывать и доделывать как хотите.

Источник: Блог вебмастера php.name

www.wp-info.ru

Почему бы не использовать разные шаблоны страниц?

В темах WordPress обычно используется шаблон page.php, который определяет стиль всех страниц сайта. Большинство разработчиков тем создают шаблон начальной страницы по такому же принципу. В этом шаблоне отображается контент страницы и по умолчанию определяется, какие элементы дизайна будут на ней присутствовать (например, шапка, сайдбар, футер, прочее).

По умолчанию шаблон страницы (page.php) настроен таким образом, что весь необходимый контент отображается на странице.

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

Наиболее известный пользовательский шаблон страницы — это Archive (шаблон архивной страницы archive.php). Он есть во многих темах WordPress и содержит весь контент сайта, который разделен на страницы, категории, тэги, даты архивов, авторские архивы.

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

Как создать свой шаблон страницы для сайта на WordPress» />

В темах можно найти и другие типы шаблонов страниц, как например:

  • Контактную форму
  • Страницы без сайдбара (боковой панели)
  • Лендинговую страницу (посадочную страницу)
  • Индекс блога

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

Как выбрать шаблон для страницы?

Добавить шаблон для страницы очень просто. В редакторе страницы справа вы увидите окошко (виджет) под названием «Атрибуты страницы». Оно размещено под окошком «Опубликовать».

В атрибутах страницы можно выбрать родительскую страницу и порядок ее размещения на сайте в соответствующем поле. А опция между ними позволяет изменить шаблон. Все что нужно сделать — это выбрать шаблон для страницы и обновить ее.

Как создать свой шаблон страницы для сайта на WordPress» />

Шаблон также можно изменить другим способом — через список всех страниц. Нужно только нажать на «Свойства».

Как создать свой шаблон страницы для сайта на WordPress» />

Затем изменить шаблон в опциях меню справа.

Как создать свой шаблон страницы для сайта на WordPress» />

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

Создаем базовый шаблон страницы для сайта

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

Нужно только использовать код page.php уже существующего шаблона темы в качестве основы для нового шаблона страницы. К примеру, вы используете старую стандартную тему Twenty Twelve. Файл page.php имеет следующий код:

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

Шаблон вашей страницы будет выглядеть следующим образом:

Давайте рассмотрим процесс создания базового шаблона страницы и попробуем создать шаблон страницы в полную ширину без использования сайдбара. Тема Twenty Twelve изначально включает в себя шаблон в полную ширину, но мы сделаем вид, что это не так, потому что нам это нужно для нашего обучения.

В стандартном шаблоне сайдбар страницы отображается с правой стороны:

Как создать свой шаблон страницы для сайта на WordPress» />

Стандартный шаблон страницы в теме Twenty Twelve

Создать шаблон новой страницы без сайдбара просто.

Для начала нужно создать новый файл, используя любой текстовый редактор (Блокнот или Notepad++ подойдет). Его можно назвать как-то по-простому, например, nosidebar-page.php или full-page.php (о названиях файлов поговорим немного позже). Затем загрузите файл на ваш сайт таким образом, чтобы он находился рядом с файлом page.php.

По сути, наш шаблон — это шаблон от page.php темы Twenty Twelve, только с удаленным кодом <?php get_sidebar(); ?>.

Он выглядит так:

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

Как создать свой шаблон страницы для сайта на WordPress» />

Но это еще не все. Пока мы только удалили сайдбар. Нам нужно сделать так, чтоб контент размещался по всей ширине страницы. А пока он занимает только две третьих страницы:

Как создать свой шаблон страницы для сайта на WordPress» />

Если вы посмотрите на код нашего шаблона, то увидите, что основная часть контента находится под действием определенного класса CSS:

За стиль основной части контента отвечает вторая часть class=»site-content». Если проверить файл стилей (style.css) темы, то можно заметить, что этот класс находится почти в самом низу:

Для того чтобы расширить контент на всю страницу, нам нужно изменить ширину области контента с 65% на 100%. Но не нужно изменять класс контента сайта, т.к. он по-прежнему используется в других шаблонах, как например, стандартная страница page.php и шаблон записей single.php. Изменение цифры процента для контента сайта повлияет на все записи и страницы на вашем сайте, которые занимают всю ширину страницы.

Поэтому нам нужно создать новый класс, который употребляется специально для страниц с полной шириной:

После обновления файла style.css с вышеуказанным классом нам нужно изменить наш шаблон с полной шириной страницы и быть уверенными, что мы создали ссылку на класс CSS с шириной в 100%:

Наш финальный шаблон будет выглядеть так:

Этот обновленный шаблон подтверждает, что контент на нашем сайте будет отображаться на всю страницу:

Как создать свой шаблон страницы для сайта на WordPress» />

Теперь контент на сайте отображается по всей странице

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

Как называть шаблоны страниц

Согласно WordPress Template Hierarchy, WordPress отображает шаблоны для страницы в следующем порядке:

  • Пользовательский шаблон (Custom Template)
  • page-{slug}.php
  • page-{id}.php
  • page.php
  • index.php

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

Этот порядок означает, что на 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. В любом случае, в будущем вы сможете эти названия изменить.

hostenko.com

Подготовка к созданию шаблона для WordPress.

Перед тем, как начать создавать шаблон для WordPress, с помощью FTP-клиента, нужно подключиться к действующему серверу в Интернете или локальному, установленному на Вашем компьютере.

Чтобы не мучиться с передачей файлов через FTP, советую установить WordPress локально и разрабатывать шаблоны на виртуальной машине.

С точки зрения редактирования и правки кода, настоятельно рекомендую использовать — Notepad++. Благодаря подсветке кода и простому интерфейсу, этой программе отдаёт предпочтение наибольшее количество Веб-мастеров.

 

Создание необходимых папок и файлов.

Зайдите в корневую директорию, содержащую установки WordPress, перейдите в wp-content => themes и создайте там папку с именем — «New Theme 3.0». Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG):

 

тема для wordpress

темы для wordpress

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

 

Шаг-1 style.css

Файл style.css, будет содержать в себе все элементы стиля шаблона для WordPress. Именно его мы будем использовать первым, чтобы  объявить имя шаблона, имя автора, ссылку на сайт с описанием и номером версии:

 

шаблон WordPress

 

Эта информация, может быть изменена в любое время. Главное, чтобы всё было закомментировано (как закомментировать строку с HTML, PHP, CSS кодом).

Теперь, в этом файле, нужно создать несколько основных определений стилей, которые в дальнейшем будут реализовываться в некоторых PHP файлах темы WordPress:

 

Шаблоны для вордпресс

темы вордпресс

 

В этом коде используется тег — body, только для спецификации (определения) шрифтов используемых на сайте и цвета фона (всё меняется на любой вкус). Затем, мы объявляем атрибуты стиля для связи, а также некоторые из заголовков, которые мы будем использовать на протяжении всей нашей темы.

#wrapper — будет отвечать за полный размер веб-страницы. С #header, всё очевидно, это заголовок, а #blog, это последние сообщения на главной странице.

Остальные стили колонтитулов # (заголовков) footer и sidebar, будут применяться к соответствующим их названию файлам, которые мы рассмотрим чуть позже.

 

Шаг-2 header.php.

шаблоны для wordpress

 

Теперь, мы создадим файл — header.php, который будет содержать логотип и обычную навигацию:

 

Шаблоны для wordpress

 

На самом деле, подробно этот код объяснять нет смысла. Просто нужно запомнить, что он должен присутствовать в header.php, во всех темах WordPress. Но, если Вам интересно, то расскажу.

В самом начале, мы объявляем тип документа и стандартный код, который будет использоваться для отображения названия сайта, вводимое в настройках администратора WordPress. Далее, идёт style.css и PHP код, позволяющий работать с древовидными комментариями.

 

Шаг-3 Добавление пользовательской навигации.

Теперь, когда мы закодировали в header.php нашу основную информацию, можно добавить пользовательское меню навигации. Но, прежде, нужно открыть файл functions.php и прописать специальную функцию:

 

темы wordpress

 

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

Чтобы создать меню, нужно, ниже ранее прописанного кода в файле header.php добавить строчку:

 

шаблоны вордпресс

 

Давайте, немного её разберём. Основной функцией, которая здесь используется, является wp_nav_menu. Переменные  sort_column , container_class , и theme_location, применяются в качестве аргументов. Sort_column — гарантирует порядок отображения, который задаётся в админке. Container_class — позволяет выбрать style.css Вашего меню. Ну, а theme_location, просто присваивает primary-menu те значения, которыми мы манипулируем в реальном времени.

 

Шаг-4 Стиль навигации шаблона для WordPress.

шаблон для вордпресс

 

Благодаря произведённым ранее действиям, наша WordPress тема, обрела пользовательскую навигацию. Но, обычное меню выглядит просто и не привлекательно. Чтобы это исправить, мы создадим класс nav в файле style.css.

 

шаблоны wordpress

 

Как видите в .nav, мы сделали основные заявления, такие, как цвет фона, ширина навигации, выравнивание и положение элемента на мониторе. Далее, мы задали порядок размещения основных элементов и всплывающих окон.

Завершающим действием, будет добавление стилей для ссылок из выпадающего меню:

 

шаблон вордпресс

шаблоны для вордпресс

 

В .nav ul ul, мы устанавливаем абсолютную позицию и первую выпадающую ссылку делаем 100%, чтобы она появлялась под основной. Так же, мы изменили фон выпадающего окна, чтобы он отличался от существующего. К общим значениям, был добавлен атрибут z-index:99999, который заставляет раскрываться выпадающие ссылки, над другими объектами.

В следующей ссылке, мы опять изменили цвет окна, и сделали 30% отступа от основного меню.

На этом, добавление стилей для пользовательского меню шаблона вордпресс закончено.

 

Шаг-5 index.php.

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

 

вордпресс шаблоны

 

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

 

темы вордпресс

 

В принципе, разобраться в этом коде, не так сложно. После вызова header.php, мы используем наш #blog, который был создан изначально в style.css. Затем, добавляем цикл вывода последних сообщений блога и код  для заголовка, который  оборачиваем в <h3> </ h3>.

Здесь, присутствует кусок кода, который выводит миниатюры в постах на главной странице блога. Пока, он неактивен, но следующим шагом используя functions.php, мы заставим его заработать.

 

Шаг-6 Включение миниатюр в постах.

шаблон для вордпресса

 

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

 

wordpress шаблон

 

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

 

Шаг-7 sidebar.php.

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

 

для шаблона вордпресс

 

Да, это весь код, который нужно добавить в sidebar.php, чтобы сделать его функциональным. Теперь, я поясню его значение.

С помощью div, мы вызываем стили из файла style.css, а код ниже, даёт нам возможность размещать виджеты из админки  WordPress, в желаемой последовательности.

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

 

темы вордпресса

 

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

 

Шаг-8 single.php.

single.php — это то, что будет использоваться для одной страницы поста. Представленный ниже код, будет очень похож на тот, который мы поместили в index.php. Отличие лишь в том, что мы добавили шаблон комментариев с div и код, который должен включить comments.php:

 

шаблон wordpress

 

Шаг-9 comments.php

С выходом вордпресс 3.0 разработчики решили облегчить жизнь авторам тем и шаблонов для WordPress. Они перешли на единый стандарт форм комментариев.

Код ниже, нужно положить в Ваш файл comments.php:

wordpress шаблоны

Это добавит вашим сообщениям стандартную форму комментариев.

 

Шаг-10 page.php

В файл page.php, мы поместим код, который будет отвечать за статические страницы нашего сайта. Он будет практически идентичен тому, который был размещён в single.php. Единственное изменение, это отсутствие шаблона комментариев и добавление кода, который обрабатывает страницы, а не должности. Всё остальное будет одинаковым:

 

темы wordpress

 

Шаг-11 category.php

темы и шаблоны для wordpress

 

Файл category.php, служит для вывода сообщений из определённой рубрики или архива,  к которым обращается читатель. Здесь, основная часть кода будет похожа на page.php и single.php, которые мы закодировали выше, за исключением куска в самом начале:

 

шаблон для вордпресс

вордпресс шаблоны

Фрагмент кода ниже, это единственное, что мы добавили после основного цикла:

 

шаблоны для wordpress

 

Здесь мы используем кучу заявлений if/elseif в PHP, которые показывают то, что Вы просматриваете на блоге. К примеру, если мы смотрим категорию под названием — «Шаблон для WordPress», то она будет показана в h2  Архив из категории: «Шаблон для WordPress»  перед всеми записями, разбивая их по датам или авторам.

 

Шаг-12 Настройка заднего фона сайта.

темы для wordpress

 

С появлением WordPress 3.0 была создана функция, которая даёт возможность изменять фон сайта из панели администратора, используя изображение или обычный цвет. Для этого, в файл functions.php, нужно вставить следующий код:

 

шаблон вордпресс

 

Итак, пользовательские фоны включены. Бонусом, мы добавим ниже код, который делает доступными ссылки архивов, комментариев и тегов из RSS  ленты:

 

шаблончики для wordpress

 

sozdaiblog.ru

Основа любой темы — файлы 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 и попробовать поиграться с хуками, например вы можете найти какой-нибудь готовый кусочек кода в этой рубрике, вставить его в файл и посмотреть, что получится.

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

И никогда! ?

Это самый распространённый косяк.

Теперь напишем что-нибудь в файле index.php

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

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

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

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

header.php

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

Чаще всего в header.php также попадает основная навигация сайта, меню.

footer.php

C футером ситуация полностью аналогичная, отправляем то, что повторяется на страницах сайта и заканчиваем закрывающим </html> тегом.

В итоге наш index.php стал выглядеть вот так:

Что дальше? 

Теперь основы создания тем вы знаете. Дальше — больше, я подобрал список материалов, с которых можно продолжить изучать процесс создания темы в WordPress, он чуть ниже.

misha.blog

Распределяем код по файлам

1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/.

2. Переименуйте файл styles.css в style.css.

3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:

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

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 и замените содержащийся в нём код до блока

на следующий:

Мы сделали динамическим блок

— код вызывает функцию, возвращающую языковые атрибуты в контейнер.

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

— важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.

2. Перейдите к редактированию файла index.php. В самом его начале пропишите

в конце —

Строчки вызывают файлы шапки, боковой панели и низа сайта.

Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.

Делаем динамическим верхнее меню

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

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

так, чтобы получилось следующее:

Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.

Суть действий в том, что файл header.php функцией wp_nav_menu(‘menu=menu’); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php.

Теперь обновите страницу и оцените результат.

Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:

Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.

Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.

Завершаем «шапку»

Единственные элементы файла header.php, оставшиеся статическими — имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:

Обновите страницу — результат не заставил себя долго ждать.

Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:

Выводим посты

Переходим к части, содержащей основной контент страницы — редактироваться будет файл index.php.

Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:

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

— отображает заголовок поста.

— дата в формате день, месяц (сокращённо), год. Теги, комментарии.

— вывод поста.

— конец цикла при условии, что записи были.

— если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.

— вывод постраничной навигации при условии, что на одной они не помещаются.

Простой с виду код глобально изменил страницу — блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.

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

Добавляем виджеты

Слева от основного контента в шаблоне есть панель, на ней — блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:

  1. зарегистрировать блок виджетов;
  2. вывести его в нужном месте.

Теперь подробнее.

1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.

2. Внесите в следующий код:

Этот код регистрирует блок виджетов. Вместо 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

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

1. Откройте файл function.php и перед дескриптором ?> вставьте такой код:

Тем самым вы регистрируете блок виджетов с именем foot, которое как бы намекает на его расположение.

2. В файле footer.php весь код внутри контейнера footer замените одной строкой:

Она выводит зарегистрированный в файле functions.php блок foot.

3. Перейдите в админ-панель WordPress, откройте страницу настройки виджетов, перетащите в область foot блок Текст, в поле Текст: введите что угодно, например, нижеследующее.

Поле Заголовок можно оставить пустым.

4. Не забудьте сохранить изменения и оцените результат: идентичный статическому шаблону низ сайта, реализованный виджетом.

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

www.seostop.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.