Статьи

Создайте свою собственную тему WordPress из шаблона HTML

WordPress стал самой широко используемой блог-платформой в мире, по оценкам, используемой сегодня на четверти миллиарда сайтов в Интернете. WordPress работает как блог, но также и как простая система управления контентом, готовая к использованию с URL-адресами, удобными для поисковых систем, и полностью корректными HTML и CSS. С таким количеством сайтов, использующих WordPress, и только около 1200 тем, перечисленных на WordPress.org, есть неизбежно много сайтов выглядят одинаково. Вы и ваши клиенты должны выделиться или в конечном итоге стать брендом «просто еще одного блога WordPress». В этой статье я покажу вам, как взять существующий шаблон сайта HTML и CSS и преобразовать его в тему для WordPress. Конечно, тема WordPress — слишком обширная тема, чтобы полностью ее охватить в одной статье, поэтому в конце я предоставлю вам некоторые ресурсы для дальнейшего изучения. Тем не менее, мы надеемся, что эта статья послужит хорошим введением и даст вам прочную основу для начала изучения создания собственных тем WordPress. Я предполагаю, что вы уже знаете HTML и CSS, и у вас уже есть дизайн сайта, который вы хотите использовать. адаптироваться к WordPress. Знание PHP не требуется, так как я буду объяснять каждую нужную вам функцию по мере ее использования.

Основы WordPress Theme

Темы WordPress находятся в папке внутри каталога /wp-content/themes/ в вашей установке WordPress. Папка каждой темы включает в себя несколько важных компонентов:

  • Основной файл CSS. Это просто обычный файл CSS, за исключением нескольких дополнительных деталей в верхней части, которые я вскоре объясню. Вы можете, конечно, иметь больше CSS-файлов, если вам нужно (например, таблицу стилей печати).
  • index.php , основной индексный файл, который WordPress загружает при использовании темы.

Содержимое страницы index.php также можно разбить на несколько других файлов, которые затем будут включены в index.php . Обычно это:

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

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

Начиная свою тему

В идеале, прежде чем начать, вам нужно установить и запустить WordPress, который можно бесплатно загрузить с WordPress.org . При создании темы проще всего работать с файлами локально или на локальной виртуальной машине, хотя вы также можете работать на веб-сервере через FTP. Во-первых, вам нужна папка для темы. Это нужно создать внутри /wp-content/themes/ в вашем установочном каталоге WordPress. Это так же просто, как создать новый каталог с именем, связанным с вашей темой. Внутри этого вы начнете со своей таблицы стилей, которая также содержит некоторую информацию о теме, которая будет использоваться в панели администрирования позже. Создайте файл CSS с именем style.css и добавьте следующее в верхней части файла. :

  / * Название темы: [Уникальное название темы здесь] URI темы: [Веб-сайт темы] Описание: [Описание] Автор: [Ваше имя] URI автора: [Ваш веб-сайт]. [Любые другие комментарии]. * / 

Это блок комментариев (заключенный в /* и */ ), но WordPress читает эту информацию и представляет ее на экране выбора темы в интерфейсе администрирования. Вам необходимо вставить содержимое для каждого из этих элементов. Они в основном нацелены на темы, которые будут распространяться, поэтому, если вы планируете использовать тему только на своем собственном сайте, большинство значений не имеют большого значения. Убедитесь, что название темы отличается от любых других тем, которые вы установили, или это вызовет проблемы! Также есть возможность добавить номер версии с меткой Version: На этом этапе, если вы конвертируете существующий сайт HTML / CSS , должно быть достаточно просто скопировать и вставить всю информацию о вашем стиле в этот файл из CSS вашего оригинального шаблона.

index.php

Далее, это файл index.php . Проще всего начать с копирования и вставки всего содержимого из файла mainHTML в шаблоне вашего сайта в этот новый файл. Начнем с замены части жестко закодированной информации в файле динамическим содержимым, которое будет сгенерировано на fly by WordPress.WordPress имеет встроенную функцию bloginfo для доступа ко всем типам информации об установке и теме. Мы будем использовать это для получения URL таблицы стилей и местоположения канала RSS. bloginfo чрезвычайно прост в использовании:

  <? php bloginfo ('stylesheet_url');  ?> 

В этом примере я включил URL таблицы стилей; однако он работает для целого ряда параметров, включая набор charset , описание блога и каталог шаблонов. Полный список см. В WordPressCodex. Посмотрев на свой шаблон, вы теперь хотите заменить элемент link указывающий на таблицу стилей, такой строкой:


Все между <?php и ?> Будет заменено возвращаемым значением функции, которое в этом случае будет URL-адресом, указывающим на вашу таблицу стилей. Это идеально, потому что ваш сайт теперь будет содержать строку вроде:

  <link rel = "stylesheet" href = "http: //example/blog/wp-content/themes/style.css" type = "text / css" /> 
важно: Wax On, Wax Off

Ключ к созданию тем WordPress заключается в том, чтобы взять процесс, который мы только что прошли, и повторять его для каждого содержимого вашего сайта: взять существующий HTML-код и найти его части, которые должны быть включены динамически. Затем найдите функцию WordPress, которая вернет желаемое значение, и вставьте его либо между тегами HTML, либо внутри атрибута, как мы делали для URL таблицы стилей.

активы

Конечно, ваш CSS-файл, скорее всего, ссылается на несколько изображений, поэтому на данный момент необходимо перенести их в каталог вашей темы. Хотя нет установленных правил для именования каталогов изображений и других ресурсов в папке темы, здесь стоит добавить новую папку под названием assets , которая будет включать в себя такие вещи, как изображения и файлы JavaScript. Если вы предпочитаете, у вас могут быть отдельные папки с images и js , но ради этой статьи я предполагаю, что вы придерживаетесь одной папки с assets . Переместите все свои изображения в новую папку. Вам нужно изменить любые ссылки на старые местоположения изображений, которые существовали до того, как шаблон был преобразован в тему WordPress для новых местоположений. Найти и заменить работы можно практически в любом текстовом редакторе, и это самый простой способ добиться этого. Найдите ссылки на старый путь (например, images/ вплоть до непосредственно перед именем файла, включая косую черту) и замените их следующим:

  <? php bloginfo ('template_directory')?> / assets / 

Это изменит все ссылки на путь к новой папке, в которой находится ваша тема. Каталог assets — это то место, где сейчас находятся изображения. Если расположение изображений относительно файла CSS изменилось, быстрый поиск и замена из старой Имя папки к новой должно быть кратким из этого. Теперь у вас должна быть копия HTML, CSS и изображений, настроенных и работающих в WordPress. Чтобы проверить, сохраните его и попробуйте настроить WordPress для использования вашей темы, и посмотрите, что произойдет. Вы должны получить копию оригинального HTML-шаблона, только теперь он генерируется WordPress. Там пока не должно быть контента WordPress.

Верхний колонтитул, нижний колонтитул и боковая панель

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

  index.php 

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

  index.php 

файл с именем

  header.php 

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

  index.php 

, поставьте следующую строку:

 <?php get_header(); ?> 

код говорит WordPress, чтобы включить содержимое из вашего

  header.php 

файл в этом месте на странице. Далее, мы сделаем то же самое для нижнего колонтитула страницы: вырезать весь материал нижнего колонтитула из

  index.php 

и вставьте его в новый файл с именем

  footer.php 

, заменив его на:

 <?php get_footer(); ?> 

Наконец, сделайте то же самое с боковой панелью, сохранив ее как

  sidebar.php 

и заменить его на

  <? php get_sidebar ();  ?> 

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

Теги шаблона

На этом этапе ваш сайт просто показывает статический HTML-код, содержащийся в вашем шаблоне, а не извлекает живые данные из WordPress. Пришло время изменить это. В WordPress вы используете теги шаблонов, чтобы сообщить WordPress, какой контент нужно извлечь и вставить на страницу. Их полный список в Кодексе WordPress есть , но если вы следили за этим, вы уже встретили несколько из них!

  get_header 

,

  get_sidebar 

,

  get_footer 

, и

  bloginfo 

все теги шаблонов. Эти теги могут быть добавлены в любой файл PHP внутри темы, поэтому хорошее место для начала — в верхней части вашего сайта, с

  header.php 

file.Let начать в самом начале файла.

  Doctype 

может остаться как есть. Открывающий HTML-тег может содержать атрибут lang, и WordPress предоставляет его

  language_attributes 

тег шаблона. Итак, мы можем заменить html-тег на:

 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> 

Это сгенерирует атрибут в соответствии с:

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> 

Если вы включили какие-либо сценарии, стоит перенести их в

  активы 

папку, и изменение любых ссылок на них, как вы сделали для изображений. Если вы использовали глобальный поиск / замену для изменения путей к изображениям, вполне возможно, что пути к сценариям также были изменены, хотя вам все равно придется перемещать сами файлы JavaScript. Для блогов рекомендуется добавить ссылки на ваш RSS-канал и обратный URL в вашем голова, так как они будут автоматически распознаваться многими браузерами. Обе эти ссылки могут быть добавлены с помощью

  bloginfo 

включив эти строки:

 <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 

После этого вам необходимо включить

  wp_head 

тег. Этот тег будет загружать любые файлы JavaScript или таблицы стилей, требуемые используемыми плагинами WordPress. Это жизненно важно, так как эти плагины могут не работать должным образом. Все, что вам нужно, это строка:

 <?php wp_head(); ?> 

Последний элемент в заголовке HTML — это заголовок страницы. В большинстве тем WordPress используются следующие варианты:

 <title><?php bloginfo('name'); ?> <?php wp_title('-'); ?></title> 

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

  '-' 

в скобках находится разделитель, который будет помещен перед

  wp_title 

содержание, если (и только если) есть заголовок для отображения. Это означает, что заголовок домашней страницы моего блога будет «Мой блог», тогда как заголовок статьи в моем блоге будет «Мой блог: заголовок статьи». WordPress умный и будет включать в себя разделитель только в случае необходимости. Все еще в

  header.php 

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

  <h1> Мой блог </ h1> 

следует заменить на

  <h1> <? php bloginfo ('name');  ?> </ H1> 

. Тэги шаблона, которые вам, скорее всего, понадобятся на этом этапе:

  •   get_option ( 'дом'); 

    : адрес домашней страницы блога

  •   bloginfo ( 'rss2_url'); 

    : адрес RSS-канала блога

  •   bloginfo ( 'описание'); 

    : описание блога, как определено в настройках WordPress

Как и в случае с другими тегами шаблонов, которые мы видели, их нужно поместить внутрь

  <? php?> 

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

  <? php wp_list_categories ();  ?> 

и

  <? php wp_list_pages ();  ?> 

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

  wp_list_pages 

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

Виджеты

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

  <? php?> 

теги):

  •   wp_list_authors (); 

    : перечисляет всех авторов блога как li элементы. Если у них есть авторские посты, их именем будет ссылка на страницу со всеми их постами.

  •   wp_list_bookmarks (); 

    : выводит ссылки, которые были добавлены в связи раздел панели администрирования, а также завернут в теги li.

  •   wp_tag_cloud (); 

    : отображает облако всех тегов, которые были добавлены в ваши сообщения.

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

  header.php 

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

Основное содержание блога

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

  index.php 

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

 <?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?> 

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

 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2><small><?php the_time('F jS, Y') ?> by <?php the_author() ?> </small> 

Этот пример раздела начинается с тега h2, содержащего заголовок сообщения, который связан со страницей этого сообщения. Ниже перечислены время публикации и автор, завернутые в небольшие теги. Здесь есть ряд новых тегов шаблонов и многие другие, которые вы можете использовать для настройки вашего шаблона для отображения HTML-кода, который вы хотите для каждого. Вот некоторые из наиболее распространенных:

  •   the_permalink () 

    : URL-адрес постоянной гиперссылки на сообщение.

  •   the_title () 

    : название поста.

  •   the_time ('F jS, Y') 

    : отображает дату публикации в формате «1 января 2010». Чтобы форматировать дату по-другому, замените

      'F jS, Y' 

    с другим PHP строка формата даты.

  •   Автор() 

    : отображает имя и ссылки на архив для пользователя, написавшего сообщение.

  •   содержимое() 

    : вставляет содержимое сообщения. Там нет необходимости размещать это внутри

      <Р> </ р> 

    теги, так как это будет сделано автоматически.

  •   the_category () 

    : отображает название и ссылки на архив категории поста.

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

  <? php endween;  ?> 

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

 <div class="navigation"> <div class="alignleft"><?php previous_posts_link('&laquo; Previous Entries') ?></div> <div class="alignright"><?php next_posts_link('Next Entries &raquo;') ?></div></div> 

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

  previous_posts_link 

и

  next_posts_link 

(строка в скобках) текст, который будет использоваться для ссылки. На этом этапе обратите внимание, что

  пока 

структура была закрыта, но

  если (have_posts ()) 

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

  если (have_posts ()) 

будет оценивать

  ложный 

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

  еще 

условие, а затем закрыть

  если 

заявление с PHP

  ENDIF 

ключевое слово:

 <?php else: ?><p>Sorry, there are no posts to display.</p><?php endif; ?> 

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

Другие страницы

В нашем простом примере

  index.php 

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

  index.php 

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

  single.php 

файл и шаблон будут использоваться для отдельных постов вместо

  index.php 

файл. Точно так же там

  category.php 

(для категории

  search.php 

(для результатов поиска),

  home.php 

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

Что дальше?

Если вы следовали всему этому уроку, у вас есть:

  • импортировать содержимое из вашего HTML-шаблона в файлы темы WordPress
  • изменил ссылки на изображения, файлы JavaScript и тому подобное в вашем коде
  • скопировал все файлы CSS, файлы JavaScript и изображения в каталог новой темы WordPress
  • включает в себя несколько кусков кода, чтобы сказать WordPress, куда идут различные фрагменты контента
  • добавлены некоторые меню и ссылки, которые WordPress собирает автоматически
  • начал знакомство с циклом WordPress и идеями, стоящими за темой WordPress

Конечно, создание WordPress-темы намного больше, чем то, что я здесь описал. Надеюсь, у меня появился твой аппетит, чтобы узнать больше.

Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как «Руководство для начинающих по веб-дизайну с WordPress» .

Комментарии к этой статье закрыты. У вас есть вопрос о WordPress? Почему бы не спросить об этом на наших форумах ?