Где скачивать темы? Создание страницы настроек для вашей WordPress темы

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

Шаг 1 Решение о том, какие настройки необходимы

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

Еще один вопрос, который следует иметь в виду: «Кто будет менять эти настройки?» Если пользователь знаком с PHP и WordPress, можно ожидать что у него не будет проблем с вложением Google Analytics в код, но вы не должны требовать этого от графического дизайнера, не говоря уже о писателе, который даже не должен ничего знать о HTML и CSS.

Общие идеи для определения объектов в настройках темы:

• Код отслеживания Google Analytics на сайте
• Количество боковых панелей и их позиционирование (слева, справа, может быть, даже вверх и вниз)
• Ширина страницы
• Содержимое вашего футера
• Параметры для функций, характерных для темы, например, пользовательские форматы тизеров.

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

Настройки, созданные в этом учебнике

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

Элементы главной страницы в редакторе будут представлены в виде списка элементов, к которым новые могут быть добавлены с помощью JavaScript и jQuery.

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

Шаг 2 Подключение страницы настроек к WordPress

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

Function setup_theme_admin_menus() { // We will write the function contents very soon. } // This tells WordPress to call the function named "setup_theme_admin_menus" // when it"s time to create the menu pages. add_action("admin_menu", "setup_theme_admin_menus");

Теперь мы добавим код для создания страниц настроек внутри только что созданной функции.

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

Добавление подменю выполняется с помощью функции add_submenu_page :

• $parent_slug - уникальный идентификатор страницы верхнего меню, к которому это подменю добавляется как дочернее.
• $page_title - название добавляемой страницы
• $menu_title - это название, отображаемое в меню (часто более короткая версия $page_title
• $capability - минимальные требования для пользователя для доступа к этому меню.
• $menu_slug - уникальный идентификатор создаваемого меню
• $function - это имя функции, которая вызывается для обработки (и визуализации) этой страницы меню

Если вы решите добавить страницу меню в качестве подменю в одну из групп WordPress, вы можете использовать следующие значения в качестве параметра $parent_slug:

• Панель инструментов: index.php
• Сообщения: edit.php
• Медиа: upload.php
• Ссылки: link-manager.php
• Страницы: edit.php?post_type=page
• Комментарии: edit-comments.php
• Внешний вид: themes.php
• Плагины: plugins.php
• Пользователи: users.php
• Инструменты: tools.php
• Настройки: options-general.php

Группа Appearance выглядит хорошим кандидатом для размещения нашей страницы настроек. Попробуем ее и создадим нашу первую страницу настроек. Вот обновленная версия нашей функции настройки меню:

Function setup_theme_admin_menus() { add_submenu_page("themes.php", "Front Page Elements", "Front Page", "manage_options", "front-page-elements", "theme_front_page_settings"); }

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

Function theme_front_page_settings() { echo "Hello, world!"; }

И вот как это выглядит в действии:

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

// Check that the user is allowed to update options if (!current_user_can("manage_options")) { wp_die("You do not have sufficient permissions to access this page."); }

Теперь, если пользователь, которому не разрешено управлять параметрами, попадает на страницу настроек, он не увидит ничего, кроме сообщения «У вас недостаточно прав для доступа к этой странице».

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

Чтобы добавить свою собственную группу настроек, вам нужно создать страницу меню верхнего уровня и связать страницы подменю с ней. Вот новая версия нашей функции настройки меню. Функция add_menu_page , используемая для создания меню верхнего уровня, похожа на add_submenu_page , за исключением того, что она не принимает параметр $parent_slug .

Function setup_theme_admin_menus() { add_menu_page("Theme settings", "Example theme", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page("tut_theme_settings", "Front Page Elements", "Front Page", "manage_options", "front-page-elements", "theme_front_page_settings"); } // We also need to add the handler function for the top level menu function theme_settings_page() { echo "Settings page"; }

Если вы проверите код и обновите панель администратора WordPress, вы увидите, что ваша новая группа меню появится в нижней части списка меню:

Но пока что-то не совсем корректно. Щелчок по элементу верхнего меню не приведет вас к меню «Главная страница», а к странице меню «Пример темы». Это не согласуется с тем, как функционируют другие меню WordPress, поэтому давайте сделаем еще одну вещь: изменив атрибут $menu_slug в вызове add_submenu_page на то же значение, что и в меню верхнего уровня, мы можем связать два меню, чтобы выбор верхнего меню выбирал меню главной страницы:

Function setup_theme_admin_menus() { add_menu_page("Theme settings", "Example theme", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page("tut_theme_settings", "Front Page Elements", "Front Page", "manage_options", "tut_theme_settings", "theme_front_page_settings"); } function theme_settings_page() { }

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

• $icon_url указывает URL-адрес значка для меню верхнего уровня.
• $position определяет позицию вашей группы меню в списке меню. Чем выше значение, тем ниже положение в меню.

Шаг 3 Создание HTML формы для страниц настроек

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

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

Function theme_front_page_settings() { ?> Front page elements

Number of elements on a row:

Featured post: Front page elements Number of elements on a row: Featured posts Add featured post

Featured post: Settings saved

Или, используя объект запроса, тот же алгоритм можно реализовать по-другому:

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

Иконки типов файлов

Wordpress использует иконки типов файлов () в вашем блоге и в интерфейсе Админ-панели, если эти иконки существуют в указанном месте.

Wordpress ищет эти файлы в каталоге images текущей темы. (А в Wordpress 2.2, тема по умолчанию имеет только одну иконку, audio.jpg .)

Например, для отрисовки иконки типа MIME type audio/mpeg , Wordpress будет искать файл иконки в указанном каталоге images текущей темы, он выбирает первый подходящий файл (см. описание функции ):

my_theme /images/audio.jpg

my_theme /images/audio.gif

my_theme /images/audio.png

my_theme /images/mpeg.jpg

my_theme /images/mpeg.gif

my_theme /images/mpeg.png

my_theme /images/audio_mpeg.jpg

my_theme /images/audio_mpeg.gif

my_theme /images/audio_mpeg.png

Перечень стандартных файлов шаблонов темы

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

Style.css Главный файл таблицы стилей. Файл должен быть в теме обязательно и обязательно должен содержать описанные выше комментарии в заголовке файла. index.php Главный файл шаблонов. Если вы в своей теме используете свои шаблоны, этот файл index.php обязателен. comments.php Шаблон комментариев. Если его нет, используется файл comments.php из темы по умолчанию. comments-popup.php Добавляет всплывающее меню для комментариев на JS. При отсутствии вызывается comments-popup.php из темы по умолчанию. home.php Шаблон главной страницы блога. single.php Шаблон страницы одиночного поста. Используется, когда запрошен конкретный пост. Для этого и других шаблонов по запросу используется index.php , если в вашей теме нет соответствующего файла шаблона. page.php Шаблон отдельной страницы, используется для отображения запрошенной страницы . category.php Шаблон категории . Используется при запросе категории. author.php Шаблон автора блога . Используется при запросе автора блога. date.php Шаблон вывода даты-времени. Используется при запросе даты и времени. Год, месяц, день месяца, час, минута, секунда. archive.php Шаблон архива. Используется, когда запрошены категория, автор или дата. Учтите, что этот шаблон может быть переопределен шаблонами category.php , author.php и date.php для соответствующих типов запросов. search.php Шаблон результатов поиска. Используется после выполнения поиска. 404.php Шаблон для сообщения об ошибке . Используется, когда WordPress не может найти сообщение или страницу, которая соответствует запросу.

Эти файлы имеют специальное значение в WordPress, поскольку они используются для замены index.php , когда они есть в каталоге темы, в соответствии с иерархией шаблонов , и когда поступил соответствующий запрос; или же в соответствии с истинностью условных тегов , когда функция типа is_*(); возвращает "true".

Например, если требуется отобразить единственный пост, функция возвращает "true", и в каталоге активной темы есть файл шаблона single.php , этот шаблон используется для создания страницы.

Ссылки на файлы из шаблона

Тема WordPress по умолчанию представляет собой хороший пример техники (впервые описанной Майклом Хелманном (Michael Heilemann) в Kubrick в макете для WordPress 1.2), как запросы отображаются в шаблонах.

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

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

Константа TEMPLATEPATH содержит абсолютный путь к каталогу шаблонов текушей темы (без символа "/" в конце).

Обратите внимание, что URI, которые используются в таблице стилей, привязаны к каталогу, где находится файл таблицы стилей, а не к каталогу, где находится шаблон, использующий эти стили. Это устраняет необходимость добавления кода PHP в файл таблицы стилей для задания текущего каталога. Например, если вы в таблице стилей используете изображения из каталога images/ своей темы, вы должны указать в CSS только относительный путь, например:

H1 { background-image: URL(images/my_background.jpg); }

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

Определение пользовательских типов шаблонов

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

Необходимые вызовы событий для совместимости

При разработке темы желательно иметь в виду, что ваша тема должна быть настроена таким образом, что она может хорошо работать с любым плагином для WordPress, который вы или другой пользователь вашей темы захочет установить. Плагины расширяют функциональные возможности WordPress с помощью перехвата событий ("Action Hooks", см. для получения дополнительной информации). Большинство событий происходит в ядре WordPress, так что вашей теме нет необходимости вызова перехваченных специальных событий для своей работы. Но некоторые перехваченные события всё же придётся вызывать, для того, чтобы устанавливаемые плагины корректно отображали информацию, непосредственно в заголовке (верхнем колонтитуле) и подвале (нижнем колонтитуле), в боковой панели, или в основном теле страницы. Вот список специальных тегов событий, которые необходимо вызывать в вашей теме для корректной работы любых плагинов:

Wp_head Происходит при отображении кода элемента в шаблоне header.php . Пример использования в плагине: добавление кода javascript. Использование: -или- wp_footer Происходит при отображении заголовка (верхнего колонтитула) "footer" темы в шаблоне footer.php . Пример использования в плагине: вставка кода PHP, который должен выполняться после всего, самым последним на странице. Использование: -или- wp_meta Событие обычно происходит при обработке тега

Meta

при отрисовке меню или в меню боковой панели в шаблоне sidebar.php . Пример использования: включение круговой рекламы или облака тегов в боковую панель. Использование: -или- comment_form Происходит при отработке скриптов шаблонов comments.php и comments-popup.php , непосредственно перед закрытием тега формы комментариев (). Пример использования: Показать предпросмотр только что добавленных комментариев. Использование:

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

Общие замечания для разработчиков тем

Пожалуйста, четко представьте себе и опишите в вашей документации на тему (файл README, включенный в вашу тему, поможет многим пользователям обойти любые потенциальные камни преткновения):

Укажите, для чего именно предназначена ваша тема и файлы шаблонов.

Придерживайтесь соглашения о наименованиях в стандартной иерархии темы.

Укажите недостатки вашей темы, если таковые имеются.

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

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

Попробуйте и протестируйте вашу тему в разных браузерах , чтобы поймать хотя бы некоторые из проблем, с которыми пользователи могут столкнуться .

Укажите контактную информацию (веб-страницу или электронную почту), если возможно, для информационной поддержки и вопросов пользователей.

Ссылки и ресурсы

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

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

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

Настройка темы (шаблона) WordPress.

Войдем в Панель инструментов () WordPress и продолжим ее изучение, подробно разобрав все пункты раздела “Дизайн “, который отвечает за внешний вид и редактирование шаблона WordPress:

Следующая вкладка “Виджеты “. При переходе на нее перед нами откроется такая картина:

В левой части мы видим все “Доступные виджеты “: RSS, Архивы, Календарь, Найти, Облако меток, Последние записи, Рубрики, Текст и т. д. Справа схематически обозначен сайдбар блога. В зависимости от строения структуры шаблона WordPress, сайдбар может быть один или несколько. На блоге он выглядит как боковая колонка, расположенная справа или слева, а, возможно, и с обеих сторон одновременно.

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

Что обозначает каждый из виджетов, достаточно понятно из их названий. Особого внимания заслуживает виджет “Текст “. Переместив его в сайдбар, откроются поля для ввода данных и заголовка. Сюда Вы можете вставить как обычный текст с картинками, так и различные HTML-коды. Например, счетчики статистики, рекламные блоки и банеры, формы подписки и др. После заполнения или редактирования виджета “Текст “, нажмите кнопку “Сохранить “, чтобы изменения вступили в силу. Не нужные виджеты можно удалить, нажав кнопку “Удалить ” или перетащив их обратно в раздел “Доступные виджеты “. Если надо временно отключить виджет, сохранив при этом все его настройки для дальнейшего использования, перетащите этот виджет влево вниз в раздел “Неактивные виджеты “. В любой момент Вы сможете вернуть его обратно.

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

Чтобы созданное меню появилось в сайдбаре, надо перейти на вкладку “Виджеты ” и перетащить виджет “Собственное меню ” в сайдбар. Соответственно, если у Вас на блоге были активированы виджеты “Рубрики ” и “Страницы “, то их можно будет деактивировать. Надо сказать, что мало кто использует меню на блоге.

Последняя вкладка “Редактор ” позволяет редактировать файлы шаблона WordPress. Открыв ее, справа Вы увидите список всех файлов шаблона WordPress, то есть его структуру. При нажатии на любом из этих файлов, его содержимое откроется в окне для редактирования. После внесения необходимых изменений не забудьте подтвердить их, нажав кнопку “Обновить файл “.

Итак, мы изучили раздел “Дизайн ” в админке нашего блога и разобрались с настройками темы (шаблона) WordPress.

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

Иногда индивидуальные настройки шаблона темы WordPress находятся в виде отдельных пунктов в разделе “Дизайн “.

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

Внимание! Важно знать, что если Вы делали изменения в индивидуальных настройках шаблона, то при установке новой темы, эти настройки надо вернуть в исходное состояние. Обычно для этих целей существуют кнопки “Сбросить ” или “Восстановить по умолчанию “, в зависимости от выбранной Вами темы WordPress.

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

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

На рисунке ниже Вы можете видеть примерную структуру шаблона WordPress.

Вот список файлов, которые обычно присутствуют во всех шаблонах и их краткое описание:

• header.php (шапка) – присутствует на всех веб-страницах и отвечает за вывод верхней части сайта.
• index.php – отвечает за вывод содержимого главной страницы.
• single.php – выводит каждую конкретную статью.
• page.php – содержимое статичной страницы сайта.
• category.php – файл вывода записей определенной категории.
• tag.php – выводит архив записей по тегам.
• archive.php – временной архив статей (за месяц или за год). Иногда этот файл заменяет собой category.php и tag.php.
• search.php – вывод записей результатов поиска по сайту.
• comments.php – файл шаблона комментариев.
• sidebar.php – боковая колонка сайта, в которой располагаются виджеты. Сайдбаров, в зависимости от структуры шаблона WordPress, может быть несколько. Этот файл присутствует на всех страницах сайта.
• 404.php – файл ошибки 404, которая появляется, если вводится неправильный адрес веб-страницы или ее не существует.
• functions.php – в этом файле обычно прописаны функции, которые вызываются при отображении сайта или при работе с админ.панелью.
• footer.php (подвал) – нижняя часть сайта, присутствует на всех его страницах. Этот файл шаблона WordPress мы уже рассматривали, когда удаляли в нем нежелательные .
• style.css – файл таблицы стилей, отвечающий за внешнее оформление сайта.

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

Важно понимать, что, не имея хотя бы начальных знаний HTML и CSS , лучше не пытаться редактировать файлы темы (шаблона) WordPress. А в случае, если Вам все-таки необходимо отредактировать какой-нибудь файл шаблона, обязательно предварительно сделайте его резервную копию. Тогда, если что-то пойдет не так, Вы всегда сможете восстановить исходный файл.

От себя замечу, что редактировать шаблон WordPress удобнее не из админки блога, а открыв файл в программе Notepad++, используя для этого соединение с сервером хостинга через FTP-клиент. О том, как это сделать, можно почитать в статье “ “.

А на сегодня все. Теперь созданный Вами сайт будет выглядеть гораздо привлекательнее. До встречи на страницах блога .

Оставляйте свои комментарии и не забывайте нажимать на кнопки соц.сетей внизу статьи, тем самым Вы поможете развитию этого блога. Заранее спасибо!