• Главная
  •  > 
  • Новости
  •  > 
  • Как сделать свою тему на wordpress. Очередной блог фрилансера

Как сделать свою тему на 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: Front page elements Number of elements on a row:
    Featured posts Add featured post