Как «с нуля» кодировать тему WordPress 3.0

тема wordpress 3.0

От автора: вместе с выходом WordPress 3.0 появилась реализация множества новых свойств этой популярной системы управления контентом. В этом учебнике мы покажем вам, как закодировать тему WordPress 3.0 с самого начала, чтобы воспользоваться преимуществами новых свойств, а также создать готовую к блоггингу маленькую тему.

тема wordpress 3.0

скачать исходники

Устанавливаем Work Station

Для начала работы с этим учебником нужно установить на свой компьютер сервер, используя XAMPP или WAMP (особенно если вы работаете на PC) или MAMP, если вы работаете на Mac’е. Эти инструменты дают возможность создать для WordPress локальную тестовую среду и сделать так, чтобы вам не приходилось во время работы над проектом постоянно пересылать файлы через FTP.

С точки зрения редактирования кода я особенно рекомендовал бы Notepad++. При наличии выделяемого синтаксиса, простого и легкого пользовательского интерфейса для кодирования, я утверждал бы, что он – мой личный любимчик (плюс нельзя отрицать того, что он бесплатный), но Notepad или Notepad 2 тоже будут работать хорошо.

Бесплатный курс «Создание тем на WordPress. Быстрый старт»

Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц

Скачать курс

Подготовка необходимых папок и файлов

В папке с установочным файлом своего WordPress’а перейдите к wp-content/themes/ и создайте папку с названием "New 3.0 Theme" (новая тема 3.0). Именно тут в течение работы с учебником мы будем держать все свои файлы. Теперь создайте следующие файлы и папки:

дерево папок

Шаг 1 — Style.css

В style.css будут находиться все элементы стилей нашего шаблона WordPress. Однако сначала мы используем его для объявления названия своего шаблона, а также имени автора и ссылки, описания и версии. При создании темы WordPress помните о том, что style.css – это один из двух файлов, нужных для работы темы, а второй, который мы создадим попозже – это index.php.

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

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

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

Упаковщик #wrapper будет размером во всю страницу, #header, что ясно из названия, будет заголовком, а #blog содержит последние посты в блог сайта. Наконец, у нас есть .sidebar и #footer, оба из которых будут содержать основные определения данных областей, о которых мы более подробно поговорим позже.

Шаг 2 — Header.php

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

header

На самом деле этот код не нуждается в подробных объяснениях, просто помните о том, что он должен присутствовать в header.php всех ваших тем. Сначала мы объявляем doctype, а также используем стандарт, который применяется для показа названия вебсайта таким, каким вы его пишете в установках своего WordPress’а, а затем style.css и код PHP, который активирует перекрестные ссылки WordPress 3.0.

Шаг 3 – Добавляем пользовательскую навигацию

Теперь, когда мы закодировали свой header.php со всей основной информацией и названием блога, можно добавить пользовательское навигационное меню – свойство, представленное в WordPress 3.0. Однако до фактического добавления кода в header.php нам нужно открыть functions.php и внести код, необходимый для активации пользовательских меню.

Как видно из комментируемых отрывков кода, первая часть с add_action используется для добавления поддержки пользовательских меню, а далее мы регистрируем пользовательское меню и называем его "Primary Menu" (Основное меню). Теперь мы переходим к реализации меню в своей теме.

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

Теперь разберемся, что она в точности означает. Основная примененная функция – это wp_nav_menu, с sort_column, container_class и theme_location в качестве используемых аргументов. Sort_column гарантирует, что команда, выбранная вами в инструментальной панели WordPress выполняется, container_class позволит выбрать класс CSS, созданный вами для применения стилей к своему меню. Наконец, theme_location просто устанавливает меню туда, куда нам нужно, в данный момент это primary-menu.

Шаг 4 – Определяем стили навигации

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

стили навигации

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

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

Как видно, мы начинаем с назначения стилей ссылкам меню, а сейчас занимаемся назначением стилей выпадающим меню. В .nav ul ul мы устанавливаем position (положение) на absolute (абсолютно) и устанавливаем свойство верха top на 100%, так что он находится прямо под свой исходной ссылкой. Мы также изменили фон, чтобы выпадающая ссылка немного выделялась, и установили z-index на 99999, так что неважно, что находится под ней или на пути нашего меню, она всегда будет находиться поверх всех прочих элементов.

Для третьего выпадающего меню мы снова слегка изменили цвет фона так, чтобы оно выделялось, установили left (левый край) на 100%, чтобы ее левый край всегда находился справа от первого выпадающего меню, и установили top (верх) на 30% так, чтобы он все еще был прикреплен ко второму выпадающему меню, но отделен от целого меню.

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

Шаг 5 — Index.php

Index.php станет домашней страницей нашего вебсайта и будет содержать код, включающий заголовок, нижний колонтитул и боковую колонку, о чем я расскажу ниже, и код, включающий последние посты из блога, а также мы воспользуемся в своих интересах свойством WordPress 3.0 для размещения контрольных изображений (thumbnail).

Эти строки кода использованы для вывода всей информации в header.php, sidebar.php и footer.php, куда бы вы ни поместили их в файлах темы.

Кроме того, код здесь довольно прост для понимания. После вызова header.php мы пользуемся чуть ранее созданным #blog и вызываем цикл, применяемый для вывода последних постов в блог WordPress. После этого обертываем название своих постов в div, которому мы ранее также назначили стили.

Единственный фрагмент кода здесь, показывающий, как мы собираемся воспользоваться преимуществами свойства WordPress 3.0 размещать контрольные изображения – это … Оно означает, что данный код не будет делать ничего до тех пор, пока мы не активируем свойство в functions.php, что мы и проделаем в следующем шаге.

Бесплатный курс «Создание тем на WordPress. Быстрый старт»

Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц

Скачать курс

Шаг 6 – Активация «контролек» постов

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

Активация «контролек» постов

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

Шаг 7 — Sidebar.php

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

Да, это весь код, добавленный для функциональности sidebar.php. Мы вызываем div, созданный в style.css, а указанный внизу код даст возможность добавлять виджеты в боковую колонку в нужном порядке и нужным образом через прикладную часть WordPress’а. Однако, как со многими свойствами, нам приходится сначала модифицировать файл functions.php, чтобы это свойство работало нормально.

Код всего лишь указывает WordPress’у регистрировать боковую колонку, вызываемую нами в sidebar.php. WordPress довольно легко может создавать множество боковых колонок, если они вам нужны в количестве более одной, но ради сокращения этого и так уже длинного учебника, давайте дадим возможность Google’у ответить на вопрос о том, как это сделать.

Шаг 8 — Single.php

Single.php мы уже используем для отдельной страницы с постом, и большая часть кода должна выглядеть довольно похоже, так как мы уже кодировали index.php. На самом деле, отличие всего одно – мы добавили div шаблона комментариев и код для присоединения comments.php.

Шаг 9 — Comments.php

При выпуске WordPress 3.0 подразумевалась стандартизация формы комментариев для всех тем WordPress, облегчая задачу авторам тем и разработчикам плагинов, так как форма для комментариев могла корректироваться при помощи ловушек-хуков (hooks).

комментарии

Внизу находится код, который вам нужно будет вставить в свой файл comments.php в шаблоне темы.

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

Шаг 10 — Page.php

При создании страницы в WordPress для отображения написанного на ней используется другой файл — page.php. Код будет выглядеть почти полностью так, как тот, что мы написали в oursingle.php, за исключением того, что это страница, на которой мы собираемся пропустить шаблон комментариев и слегка изменить навигацию постов, чтобы вместо поста управлять страницей. За этим исключением код будет точно таким же.

Шаг 11 — Category.php

Category.php послужит в качестве файла, который предоставляет информацию для отображения постов всякий раз, когда пользователь смотрит специальную категорию поста, время написания постов или отдельного автора. Как в случае с page.php, большая часть кода здесь будет совершенно такой же, как в созданном нами до того single.php, кроме фрагмента в самом начале.

категории

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

Он занимается тем, что использует группу предложений if/elseif в PHP для показа того, что мы в данный момент просматриваем в своем блоге. Таким образом, если мы смотрим отдельную категорию с названием "Test Category 1" (тестовая категория 1), он покажет нам заголовок h2 — "Archive for the ‘Test Category 1’ Category:" (архив тестовой категории 1) перед всеми постами, и станет делать это для отдельных дат, авторов и так далее.

Шаг 12 – Пользовательские фоны, ссылки загрузки

Как уже объяснялось, одно из свойств, реализованных в WordPress 3.0 – это способность создавать или модифицировать фон своего сайта, будь то изображение или основной цвет, прямо при помощи внутреннего интерфейса WordPress. Что нужно нам для работы этого свойства? Эта коротенькая строчка кода:

фоны, ссылки загрузки

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

Давайте в functions.php добавим следующий код, чтобы это свойство заработало должным образом.

Шаг 13 — Footer.php

Для окончания работы мы собираемся создать файл footer.php, который использует #footer, объявленный в style.css, а также будет содержать основную информацию о копирайте, а также ссылку на RSS-читалку историй и комментариев внизу страницы.

Шаг 14 – Прочие свойства?

Вот пара свойств, не таких уж необходимых, но способных оказаться полезными. Сначала о том, как включить свойство мультисайтов для WordPress 3.0, чтобы можно было вести множество сайтов с одной установки WordPress. И снова нам нужно добавить в functions.php этот код.

фоны, ссылки загрузки

Заключение

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

Автор: Keenan Payne

Источник: //www.onextrapixel.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Бесплатный курс «Создание тем на WordPress. Быстрый старт»

Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц

Скачать курс

Создание тем на WordPress. Быстрый старт

Изучите курс и узнайте, как создать тему на WordPress

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (52)