Как создать собственную тему WordPress с нуля: освещаем подробно

Если вы уверены в своем CSS и HTML, совсем не сложно подойти к созданию собственной темы WordPress. В этом обзоре показан процесс создания моей последней пользовательской темы WordPress от концепции дизайна до завершенной темы. Посмотрите, как статический дизайн разделен на различные файлы темы WordPress, и узнайте, как простые фрагменты PHP могут добавить эту динамическую функциональность блога.


Концепция дизайна

Посмотреть тему Sticky WordPress

Тема, над которой я работаю, называется Sticky. Главной особенностью дизайна является его липкая боковая панель (отсюда и название Sticky!), Которая остается на месте, пока основное содержимое прокручивается мимо нее. Есть также несколько необычных эффектов, таких как тени и внешний вид текста, которые я буду создавать с помощью CSS3.

Предварительный просмотр дизайна темы Sticky WordPress

Предварительный просмотр дизайна темы Sticky WordPress

После публикации, посвященной созданию темы, я не буду вдаваться в подробности того, как был построен дизайн, но вы можете увидеть из превью Photoshop, что он использует сетку из 16 столбцов с базовой линией 24 пикселя; довольно приглушенная цветовая палитра бежевого и серого цветов с темно-красным цветом для выделения ссылок; типографика настроена на шрифт с засечками повсюду для этого прикосновения класса !; и весь дизайн использует очень тонкие текстуры, чтобы дать более реалистичное и тактильное ощущение.

Анатомия темы WordPress


Прежде чем застрять в процессе сборки, важно знать, как работают темы WordPress. Если вы посмотрели на какую-либо предварительно созданную тему, вы заметите, что она все содержится в папке и содержит около 12 основных файлов. Некоторые темы, в том числе тема WordPress по умолчанию, содержат больше файлов, которые допускают дополнительную настройку, но не являются обязательными дополнениями. Вот обзор основных файлов, с которыми вы будете работать:

  • 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 — все стили для вашей темы здесь.
  • functions.php — файл, который можно использовать для настройки ядра WordPress без редактирования файлов ядра.

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

Доступны стеки шаблонных тегов, и чаще всего найдется тот, который делает именно то, что вы хотите — это всего лишь случай найти его в Кодексе WordPress . Я видел много тем, которые включают в себя некоторое сложное кодирование PHP для достижения функции, которая уже доступна в виде простого тега шаблона, поэтому не забывайте просматривать Кодекс WordPress, когда вы застряли!

Базовый HTML и CSS

Видение WordPress Theme в основном состоит из HTML и CSS, но с несколькими дополнительными тегами PHP, вставленными здесь и там, важно создать концепцию вашего сайта так же, как старый добрый статический сайт. Я стараюсь создать полную страницу с фиктивным контентом, а затем провести тестирование браузера, прежде чем начать работу над темой. Вот краткий обзор моего HTML-кода:

Обзор HTML-кода

Создание темы WordPress


Теперь фактический дизайн обретает форму в виде кода, пора начинать преобразовывать статический HTML и CSS в тему WordPress. Начните с создания папки для вашей темы и создания файлов php выше (header.php и т. Д.). Иногда проще скачать приложение WordPress, затем продублировать тему по умолчанию и удалить любой лишний пух, который идет с ним. В любом случае, вы захотите, чтобы все ваши файлы PHP были на месте, а все ваши изображения и файлы Javascript были скопированы в папку вашей темы.

Настройка таблицы стилей

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

/ * Название темы: Липкий URI темы: http://www.blog.spoongraphics.co.uk Описание: Липкая тема WordPress Версия: 1 Автор: Крис Спунер URI автора: http://www.spoongraphics.co.uk * / 

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

Заполнение заголовка

Откройте ваш файл header.php и вставьте в заголовок раздел вашего концептуального HTML-файла. Затем нам нужно войти и заменить определенные элементы правильными тегами шаблона WordPress, чтобы убедиться, что все работает правильно. Сначала мы можем удалить заголовок и вставить некоторые теги шаблона WordPress. bsg_title();будет отображаться заголовок страницы, за которым следует bloginfo('name')название блога (устанавливается в панели администратора).

Обзор кода header.php

bloginfo('stylesheet_url');это фрагмент, используемый для вызова таблицы стилей Это заменяет ручной путь, который мы создали в концепции. Другие файлы, такие как Javascript, могут быть вызваны с помощью bloginfo('template_url');тега. Это отображает путь к папке темы в HTML.

Если вы хотите, чтобы ваша тема использовала многопоточные комментарии, можно разместить фрагмент, который будет вызывать соответствующие файлы Javascript из ядра WordPress. Затем, перед закрывающим тегом, добавьте bsg_head();, это место, где любые дополнительные элементы заголовка размещаются плагинами WordPress и т. Д.

Построение индекса

Следующим шагом является уточнение основной части сайта. Откройте файл index.php и вставьте основной объем концепции HTML.

Обзор кода index.php

Это где все мясные вещи начинаются! На вершине мы имеем get_header();и get_sidebar();теги, это вызвать header.php и sidebar.php файлы и воспроизводить контент в соответствии с которой появляются метки. Затем цикл WordPress используется для проверки контента, если контент доступен, он отображается на странице. В цикле у нас есть различные теги, которые отображают информацию о записи, например the_title();, и the_permalink();. Они оборачиваются в обычные элементы HTML в соответствии с их назначением, поэтому постоянная ссылка оборачивается тегом привязки, а заголовок — тегом заголовка 2.

the_post_thumbnail();является необязательным дополнением, но этот код просто использует новую функцию миниатюр сообщений в WordPress 2.9. Ниже мы хотим, чтобы все содержимое статьи отображалось, и оно просто вставляется с the_content('');тегом.

В мета-разделе есть различные теги, которые могут отображать конкретную информацию о публикации, такую ​​как время, когда она была опубликована, категория, в которой она была опубликована, и количество комментариев. Все они могут быть вызваны с использованием тега шаблона, например the_time('F jS, Y');, каждый из них также имеет определенные параметры для дальнейшей настройки тега в соответствии с требованиями. Например, время может быть изменено для отображения в различных форматах. Здесь вам пригодится кодекс WordPress, чтобы дважды проверить любые параметры, которые у вас есть.

Пропустив немного, цикл затем отображает elseтег, который будет отображаться, если сообщения не найдены, и цикл будет окончательно закрыт с помощью endif. Внизу мы можем использовать get_footer();для вызова остальную часть страницы, которая находится в файле footer.php.

Заполнение боковой панели

На боковой панели в моем дизайне находится список страниц и категорий. Файл sidebar.php был вызван из индекса с помощью get_sidebar();тега, поэтому все, что находится внутри этого файла sidebar.php, вставляется в тему в нужном месте.

Обзор кода sidebar.php

В моей боковой панели только три элемента; логотип, список страниц и список категорий. Логотип оборачивается тегом h1 и использует теги echo get_option('home');и bloginfo('name');для отображения URL-адреса блога и названия блога в соответствующих местах. Список страниц просто добавляется с помощью bsg_list_pages('title_li=' );, где параметр останавливает добавление обычного заголовка «Страницы». Список категорий также очень похож, bsg_list_categories();он используется вместе с различными параметрами для настройки тега, например, show_count=0для остановки WordPress, показывающей, сколько сообщений появляется в каждой категории, hide_empty=0для отображения категории, даже если у нее нет сообщений, и exclude=1для исключить категорию с идентификатором 1, которая является категорией без категории.

Округление нижнего колонтитула

Обзор кода footer.php

Файл footer.php, вероятно, самый простой файл для этой темы. Единственное, что здесь bsg_footer();указывается, это тег непосредственно перед тегом , так что любая дополнительная информация может быть вставлена ​​в правильное место. В вашей теме вы можете отобразить список популярных сообщений, последние комментарии или список архивов. Все это можно сделать с помощью специальных тегов шаблонов WordPress.

Создание архива

Обзор кода archive.php

Файл archive.php используется для отображения списка постов, когда они просматриваются по категориям, авторам, тегам и т. Д. Он в основном такой же, как индексный файл, но с добавлением тега в самом верху, который отображает полезный заголовок страницы, чтобы пользователь знал, где они находятся. «Просмотр категории статей», например.

Построение страницы и единое представление

Обзор кода page.php

WordPress состоит из постов и страниц. Сообщения используют файл шаблона single.php, тогда как страницы используют файл шаблона page.php. Они практически одинаковы, за исключением того, что вы склонны включать comments_template();тег для сообщений, а не для страниц.

Настройка шаблона комментариев

Я обычно копирую шаблон комментариев из темы «По умолчанию», затем вносю свои изменения, потому что он включает в себя несколько важных строк кода WordPress.

Обзор кода comments.php

После создания файла комментариев этот же файл можно использовать практически во всех будущих проектах тем WordPress. Сложная часть заключается в поиске CSS-хуков для оформления ваших комментариев. Это когда плагин Firebug для Firefox пригодится. В противном случае в файле комментариев есть несколько параметров, которые вы можете настроить. Один из них, который приходит на ум, — это avatar_sizeпараметр, который сообщает WordPress, насколько велико изображение Gravatar пользователя.

Завершение поиска и 404

Это в значительной степени просто оставляет функцию поиска, которая в основном является копией файла archive.php. Удобным дополнением может быть строка Search results for , которая будет отображать поисковый запрос пользователя в качестве заголовка. Что касается страницы 404, то здесь ваше творчество вступает в игру. Этот шаблон может быть настроен для отображения любой информации об ошибке вы любите, только не забудьте включить обычные get_header();, get_footer();тег , где это необходимо

Финальная тема

Посмотреть тему Sticky WordPress

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

Посмотреть окончательную демонстрацию темы WordPress

Если вам нравится внешний вид темы Sticky, она должна быть выпущена исключительно для участников Access All Areas на следующей неделе.



Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

Ваш e-mail не будет опубликован.