Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Как создать тему Wordpress с нуля

by
Length:MediumLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

Следуя недавней статье «PSD в HTML», этот урок рассмотрит шаблон HTML/CSS и превратит его в действующую тему WordPress. Существует так много всего, что вы можете сделать, создавая собственную тему, что мы вряд ли сможем рассмотреть все. Итак, мы рассмотрим, как структурированы темы, создание основных файлов и разделение файла index.html.

Обзор - Структура темы

Структура темы WordPress довольно проста, я бы хотел начать с файла CSS. В нем подробно описывается тема для WordPress. Далее у вас есть index.php - это просто файл шаблона, который вы используете с включенными тегами шаблона PHP. К ним относятся файлы header.php и footer.php, которые используются во всем сайте. В настоящее время большинство тем не используют только четыре файла, и это потому, что WordPress позволяет вам использовать файлы шаблонов для компоновки различного контента. Существуют определенные файлы макета, такие как archives.php и single.php. Однако, вы также можете создать свой собственный, скажем, если вы хотите сделать страницу с совершенно другим макетом по умолчанию.

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

Я буду работать над превращением отличного шаблона «Типография Paramount» от Six Shooter Media в простую тему WordPress.


Шаг 1 - style.css

Таблица стилей является определяющим файлом темы для WordPress. Есть несколько простых вещей, которые вам нужно сделать. Первый - переименование основного файла (если у вас есть больше) на style.css, затем вам нужно добавить немного комментариев к файлу.

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

Я переименовал файл таблицы стилей из шаблона, он называется 1.css. Я также создал новую папку под названием typography-paramount, которая будет загружаться в папку темы WordPress. Поместите таблицу стилей в эту папку, но не в другой каталог, иначе она не будет видна WordPress.


Шаг 2 - Хедер и Футер

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

header.php

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

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

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

language_attributes() - печатает тип языка для <html>
тега
bloginfo() - используется для печати информации о сайте, параметры 
доступны в Codex, «name» возвращает заголовок блога.
wp_title() - просто возвращает заголовок страницы.
wp_head() - печатает ссылки javascript и другие данные хедера.
get_option() - Извлекает значение из базы данных опций.
wp_list_pages() - Перечисляет ссылки на страницы сайта, сортирует параметры
страницы правильно, а также прекращает публикацию WordPress заголовка по умолчанию.

footer.php

Создайте файл footer.php и скопируйте все в шаблоне из <div id="footer"> вниз и вставьте его в новый файл. Динамический футер, отображающий правильный год, название сайта и ссылку на канал, является общим местом в темах, поэтому добавьте его.

Я изменил футер, чтобы отобразить значок авторского права, а затем текущий год (<?php the_time('Y'); ?>) и название сайта (<?php bloginfo('name'); ?>) затем в новой строке поставить ссылку на RSS ленту (<?php bloginfo('rss2_url'); ?>).

wp_footer() - это то, что WordPress использует для добавления элементов в нижнюю часть
сайта, чаще всего, который не используется плагинами для добавления таких вещей, как код отслеживания сайта.


Шаг 3 - Основной файл

Теперь мы создадим index.php

index.php

Это один из двух необходимых файлов для темы WordPress (другой - style.css), так что давайте начнем. Создайте файл и поместите его вместе с остальными, затем добавьте к нему следующее.

Это просто говорит WordPress, куда включать файлы header.php и footer.php. Поскольку это курс из двух частей, мы собираемся рассмотреть создание боковой панели в следующей статье. Вы можете либо оставить его div в качестве статического html, либо просто оставить его, что я и сделаю. Добавьте между двумя предыдущими тегами следующее.

Это то, что WordPress называет Циклом WordPress. Первая строка PHP запускает этот цикл, endwhile - его конец. WordPress заполняет цикл для каждой статьи на сайте, а если статей нет, то отображается содержимое «Woops ...». Я также добавил навигационную ссылку, которая будет вести на другие статьи, поэтому посетители могут просматривать старый контент без использования архива.

В следующей статье мы напишем single.php, это то, что будет отображаться, если посетитель нажимает на заголовок поста. Он будет включать систему комментариев, в отличие от index.php.


Обзор - Работает ли тема?

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

Протестируйте его в этом новом предпросмотре темы, который был помещен в новейший WordPress, после проверки, кажется, что есть проблема, связанная с длинными заголовками, но она легко исправлена добавлением следующего в #content h2 в таблицу стилей.

Продолжение в части 2.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.