Руководство Theme Customizer в WordPress

УрокиКомментариев нет

В этой серии статей мы говорим о настройке тем в WordPress.

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

Давайте заглянем с другой стороны, а именно: как Theme Customizer может быть использован, чтобы помочь уменьшить разрыв между ожидаемым пользователем и полученным вариантом темы.

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

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

Погодите, мы интегрируем Theme Customizer? Зачем?

Знаю, знаю: большинство тем, которые можно найти в настоящее время в магазине (по крайней мере, обновленные для работы в WordPress 3.4), уже включают в себя Настройщик тем, и очень легко воспользоваться уже существующим.

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

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

По сути, здесь нет ничего плохого. На самом деле, это часть того, что делает открытый код таким замечательным. Но мы здесь не для того, чтобы обсуждать «как копировать и вставлять Theme Customizer». Мы здесь, чтобы научиться его интегрировать.

Поэтому в следующих шагах мы посмотрим на тему, которая изначально не включает в себя Theme Customizer; а затем разберем – строка за строкой – то, что требуется для его установки так, чтобы мы смогли использовать его в наших темах.

Цель состоит в том, чтобы к концу этой статьи вы знали не только как интегрировать Theme Customizer, но и какие действия производит каждый бит кода.

Во-первых, давайте создадим тему.

Преследуя цели данной статьи, мы собираемся работать с базовой темой WordPress.

Заметьте, все, что мы собираемся сделать, является частью методов разработки тем, которые изложены в соответствующем кодексе WordPress.

Первым делом, в вашей локальной установке WordPress создайте папку в wp-content/themes, присвоив ей имя: theme-customizer-example. С этого момента мы начнем добавлять наш программный код.

Таблица стилей

Во-первых, нам нужно создать таблицу стилей для того, чтобы WordPress распознал тему в разделе «Appearance» в меню консоли. Чтобы сделать это, нам нужно обеспечить файл style.css блоком комментариев в верхней части файла.

Например, вот, что я использую:

 

Далее давайте добавим несколько файлов шаблона, чтобы конкретизировать нашу тему.

Шаблон заголовка

Следующим делом мы хотим задать шаблон заголовка. Это может быть сделано с использованием файла header.php и добавлением следующего программного кода:

 

Ничего запредельно сложного, не так ли? Попросту говоря, мы определили элемент «head», открывающий тег «body», затем следует простой элемент «div» для представления заголовка.

Затем мы включили «h1» для отображения названия блога, а так же «h2» для отображения описания блога.

Шаблон главной страницы

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

Это будет простой шаблон, который отображает заголовок, нижний колонтитул и единственную строку текста:

 

Пожалуй, это – самый простой шаблон из всех, не так ли?

Шаблон подвала

Мы почти сделали это! Следующее, что нам нужно сделать – ввести простой шаблон подвала темы (футер), который послужит местом, скажем, для отображения авторского права блога.

С этой целью мы реализуем следующий программный код:

 

Заметьте, что результат вывода этого шаблона читается как «Copyright 2013 [Название блога] All Rights Reserved». Конечно, если вы читаете эту статью в другой год, то код естественно будет отличаться.

Не забудьте про скриншот!

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

tcx-theme

Размер лучше делать 300х255 (или в два раза больший для HiDPI мониторов). Как вы могли заметить в примере выше, я выбрал для использования один из моих самых любимых комиксов, когда-либо существовавших.

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

Первый взгляд на тему

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

tcx-basic-home-screen

Как я уже говорил: ничего запредельно сложного, но это послужит для продвижения к нашим целям.

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

Запуск Theme Customizer

Из пункта меню «Appearance» на консоли щелкните на элемент меню «Themes», затем щелкните на ссылку «Customize», появившуюся под описанием вашей темы.

После этих действий Настройщик Тем запустится, и вы должны увидеть что-то, похожее на это:

tcx-customizer

Теперь раскройте раздел «Site title & Tagline», и затем откорректируйте содержимое каждого из появившихся полей. В случае корректного заполнения полей, в качестве результата, вы увидите изменения, незамедлительно отображенные в окне предварительного просмотра.

Довольно ловко, а?

Но это не все!

Очевидно, мы только начали и даже не поцарапали поверхность того, что Настройщик Тем может делать, или того, как мы можем добавить дополнительные опции в Theme Customizer.

Но сейчас вам следует твердо понять основы в области данной темы, с которой мы будем работать, и основные возможности Theme Customizer.

Далее…

Как мы уже упомянули ранее в этой статье, цель этого поста – объяснить, что к чему в Настройщике тем.

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

Но это еще только полдела.

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

Перевод с tutsplus.com


Будь первым кто прокомментирует статью.

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

Войти с помощью: