Если вы уверены в своем CSS и HTML, совсем не сложно подойти к созданию собственной темы WordPress. В этом обзоре показан процесс создания моей последней пользовательской темы WordPress от концепции дизайна до завершенной темы. Посмотрите, как статический дизайн разделен на различные файлы темы WordPress, и узнайте, как простые фрагменты PHP могут добавить эту динамическую функциональность блога.
Содержание
Концепция дизайна
Тема, над которой я работаю, называется Sticky. Главной особенностью дизайна является его липкая боковая панель (отсюда и название Sticky!), Которая остается на месте, пока основное содержимое прокручивается мимо нее. Есть также несколько необычных эффектов, таких как тени и внешний вид текста, которые я буду создавать с помощью CSS3.
После публикации, посвященной созданию темы, я не буду вдаваться в подробности того, как был построен дизайн, но вы можете увидеть из превью 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-кода:
Создание темы 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')название блога (устанавливается в панели администратора).
bloginfo('stylesheet_url');это фрагмент, используемый для вызова таблицы стилей Это заменяет ручной путь, который мы создали в концепции. Другие файлы, такие как Javascript, могут быть вызваны с помощью bloginfo('template_url');тега. Это отображает путь к папке темы в HTML.
Если вы хотите, чтобы ваша тема использовала многопоточные комментарии, можно разместить фрагмент, который будет вызывать соответствующие файлы Javascript из ядра WordPress. Затем, перед закрывающим тегом, добавьте bsg_head();, это место, где любые дополнительные элементы заголовка размещаются плагинами WordPress и т. Д.
Построение индекса
Следующим шагом является уточнение основной части сайта. Откройте файл index.php и вставьте основной объем концепции HTML.
Это где все мясные вещи начинаются! На вершине мы имеем 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, вставляется в тему в нужном месте.
В моей боковой панели только три элемента; логотип, список страниц и список категорий. Логотип оборачивается тегом 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, вероятно, самый простой файл для этой темы. Единственное, что здесь bsg_footer();указывается, это тег непосредственно перед тегом
Загрузка...
