Вредоносное ПО (malware) - это назойливые или опасные программы,...
Создание собственной темы для 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 определяет позицию вашей группы меню в списке меню. Чем выше значение, тем ниже положение в меню.
Теперь, когда мы создали страницу настроек, и она корректно отображается в боковом меню, пришло время начать добавлять контент. Итак, вернемся к списку настроек, которые мы имели в виду, и создадим страницу для их редактирования.
В этом уроке нам нужно поле для определения того, сколько элементов должно быть указано в одной строке, и список для определения фактических элементов. Чтобы начать с более легкого, давайте создадим текстовое поле для количества элементов в одной строке. Отредактируйте функцию страницы настроек:
Function theme_front_page_settings() { ?> Front page elements
В итоге получаем:
. Этим мы покажем серверу, что работаем с PHP.
Теперь нам нужно добавить свои настройки. Делается это в 2 захода. Напрягли мозги. Напряжемся раз: добавляем секцию настроек.
В созданный нами ранее файл functions.php добавим такой код:
Add_action("customize_register", function($customizer){ $customizer->add_section("example_section_one", array("title" => "Мои настройки", "description" => "Пример секции", "priority" => 11,)); });
Мы создали хук и привязали к нему функцию. Метод add_section() как раз и добавляет секцию настроек. Он принимает 2 параметра:
$args — массив аргументов
title — как секция будет называться
description — описание секции (необязательно)
Добавляем настройку в секциюДобавление происходит в 2 этапа. Сначала создаем сами настройки, а затем контрол для нее, чтобы отобразить в секции.
Для добавления настроек напишем такой код в functions.php прямо после метода add_section(), но в внутри хука customize_register:
$customizer->add_setting("example_textbox", array("default" => "Сайт сайт"));
Метод add_setting() принимает два параметра:
$id — уникальный идентификатор
$args — массив аргументов
В массиве $args может быть несколько позиций, а именно:
default — значение настройки по-умолчанию
type — тип настройки
capability — права пользователя, необходимые для изменения данного параметра. Т.е. разные параметры могут видеть разные группы пользователей. Круто! (необязательно)
theme_supports — указывает на то, что текущая тема должна поддерживать описанную в параметре функцию (необязательно)
transport — как изменение настройки будет отображаться в окне предпросмотра. Обновление страницы или AJAX. По умолчанию страница обновляется при каждом обновлении настройки, но если вам интересно могу рассказать, как реализовать это на AJAX, без перезагрузки страницы. Пишите в комментах свои пожелания.
sanitize_callback — имя функции для фильтрации входных данных, в БД
sanitize_js_callback — имя функции для фильтрации выходных данных, из БД
Теперь добавим контрол к настройкам . Ниже добавим такой код:
$customizer->add_control("example_textbox", array("label" => "Настройка текста", "section" => "example_section_one", "type" => "text",));
Вот теперь мы можем увидеть нашу настройку.
// картинку
Метод add_control() принимает два параметра:
$id — уникальный идентификатор
$args — массив аргументов
В массиве $args может быть несколько позиций, а именно:
label — название настройки
description — описание
section — секцию, в которую будет помещен контрол и настройка
type — тип контрола (по-умолчанию: text)
choices — для типа с переключателями флажками, определяет список значений на выбор
priority — какой по счету будет располагаться секция или ее приоритет (по-умолчанию 10)
Но мы не вывели настройку в теме. Давайте займемся этим.
Выводим настройки в темеДля того, чтобы отобразить настройки в теме надо добавить его идентификатор в нужном месте. Сделать это легко, достаточно добавить конструкцию:
Функция get_theme_mod() принимает два аргумента^
$name — имя настройки, которую нужно получить
$default — значение по-умолчанию. Выведется, если настройки не существует
Другие типы контроловCheackBox (Флажок)
Позволяет включить или отключить, что либо.
$customizer->add_control("hide_text", array("type" => "checkbox", "label" => "Скрыть текст", "section" => "example_section_one",));
В теме выводится так:
Теперь, если вы не выбрали флажок, то этот текст не выведется. Полезно, если нужно скрыть. что нибудь.
Radio (Группа переключателей)Позволяет выбрать, какой либо 1 параметр из списка.
$customizer->add_setting("radio ", array("default" => "item_1")); $customizer->add_control("radio ", array("type" => "radio", "label" => "Пример переключателей", "section" => "example_section_one", "choices" => array("item_1" => "item_1", "item_2" => "item_2", "item_3" => "item_3",),));
Select (Список)Выпадающий список.
$customizer->add_setting("select", array("default" => "Вордпресса")); $customizer->add_control("select", array("type" => "select", "label" => "Кто мы?", "section" => "example_section_one", "choices" => array("Человеки" => "Человеки", "Стахановцы" => "Стахановцы", "Крутые ребята" => "Крутые ребята", "НЛО" => "НЛО",),));
Выпадающий список страницСоздает выпадающий список всех страниц сайта. Страницы генерируются самим WordPress.
$customizer->add_setting("page-setting", array("sanitize_callback" => "example_sanitize_integer")); $customizer->add_control("page-setting", array("type" => "dropdown-pages", "label" => "Выберите страницу:", "section" => "example_section_one",));
ПалитраПозволяет добавить палитру выбора цветов. К примеру, для заднего фона.
$customizer->add_setting("color-setting", array("default" => "#000000", "sanitize_callback" => "sanitize_hex_color",)); $customizer->add_control(new WP_Customize_Color_Control($customizer, "color-setting", array("label" => "Настройка цвета", "section" => "example_section_one", "settings" => "color-setting",)));
Позволяет загружать файлы через стандартный загрузчик WP. Работает через класс WP_Customize_Upload_Control. Будьте внимательны.
$customizer->add_setting("file-upload"); $customizer->add_control(new WP_Customize_Upload_Control($customizer, "file-upload", array("label" => "Загрузка файла", "section" => "example_section_one", "settings" => "file-upload")));
Тоже самое, что загрузка файлов, только ставятся ограничения на разрешения файлов. Принмаются только картинки. Удобно. если надо грузить только изображения. К примеру, для заднего фона. Работает по той же схеме, что пример выше, только используется класс WP_Customize_Image_Control.
$wp_customize->add_setting("img-upload"); $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, "img-upload", array("label" => "Загрузка изображения", "section" => "example_section_one", "settings" => "img-upload")));
Это еще не всеЕсли вы думаете, что на этом возможности встроенных настроек ограничиваются, то вы ошибаетесь. В них много чего интересного: добавление собственных настроек, обновление страницы через AJAX. Можете покопаться сами или пишите в комментариях, если хотите продолжения.
Плюсы и минусыА теперь подведем итоги и рассмотрим подводные камни и преимущества данного метода.
Плюсы:- Настройки встроены в ядро WordPress. Это значит, что при переносе сайта или его обновлении на новую версию у нас сразу будут настройки без скачки обновлений фрейморков и несовместимости
- Очень легко добавить. Достаточно базовых знаний по WP и PHP, чтобы добавить настройки в тему. Гораздо проще, чем подключать сторонние решения
- Добавление своих типов настроек. Можно расширить функционал. Есть такая возможность, что очень радует.
- Изменения появляются сразу в окне предпросмотра.
- Нет поддержки визуального редактора для текста. Это серьезный минус для сложных проектов.
- Недостаточно типов настроек. Очень много чего нет, а хотелось бы. К примеру, тот же слайдер с неограниченным количеством слайдов. Отчасти решается возможностью добавить свой контрол. Но это лишние телодвижения.
- Нет импорта/экспорта. Если вы захотите переустановить тему. то все настройки придется заново вбивать вручную! Что крайне неудобно.
- Вы ограничены в свободе размещения блоков. За простоту надо платить. Вы не можете разместить блок с предупреждением или информацией где вздумается, все в рамках заданного формата. Для кого-то неважно, для других критично. Каждый реашет сам.
Что касается моего мнения, то я считаю, что Theme Customizer пока сыроват. Да. у него большой потенциал и я уверен в будущем мы увидим много расширений и улучшений для него. Но сейчас разрабатывать сложные проекты на нем не получится.
Если вы делаете простенькую тему или тренируетесь, то обратите внимание на эту «фишку» WP. Если же вы уже серьезно работаете с каким либо и думаете, стоит, переходит или нет, то лучше не стоит. Пока, не стоит. Но определенно стоит посмотреть, что это за «зверь». Ведь потенциал у него большой.
Но, как говорится, каждый решает сам по своему опыту и сложности проектов. На этом я с вами прощаюсь до следующей статьи. Всего вам доброго. И да прибудет с вами терпение в нелегком изучении WordPress.
Это главная страница руководства по созданию тем (шаблонов) для WordPress. Основная информация взята из официального руководства и из личного опыта.
Что такое тема?Тема WordPress - это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать... В других движка тему еще называют "шаблоном", но в WordPress принято говорить именно тема - theme, а не шаблон - template. Хотя и то и другое по сути одно и тоже...
Таким образом, если вы меняете тему, то сайт меняет свой вид, выглядит иначе. На WordPress.org есть тысячи бесплатных тем . Несмотря на широкой выбор тем, многие предпочитают создавать свои темы. Связанно это в первую очередь с тем, что создать простую тему не сложно.
Необходимые файлыЧтобы создать тему необходимы лишь два файла:
Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:
- header.php - отвечает за вывод шапки
- footer.php - отвечает за вывод подвала
- sidebar.php - отвечает за вывод боковой панели
- page.php - отвечает за вывод отдельной страницы (записи)
- и т.д. смотрите полный список .
Возможности темы по сути безграничны, ведь там можно полностью использовать PHP. НО! Тема, как призвана отображать содержимое сайта определенным образом, а не добавлять функционала сайту. Поэтому возможности темы принято ограничивать до тех, которые отвечают за внешний вид, а все остальные возможности: голосование, рейтинги, редиректы, СЕО и т.п. принято выносить в плагины...
Таким образом, тема может:
- Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
- Тема может выводить любое содержимое;
- Может указать, какой контент будет отображаться для разных пользователей;
- Может использовать любые элементы дизайна (картинки, видео).
Как и на любом сайте, тема - это не только цветовое решение, макет и красивая картинка. По-настоящему качественные темы еще и очень функциональны. Функциональность темы, заключается в её гибкой настройке. Т.е. она не добавляет ничего нового на сайт, но отлично настраивается по вкусу владельца. Например: устанавливается фоновая картинка, меняется цвета элементов, настраивается меню и блоки с контентом (виджеты).
Чем тема отличается от плагина?С точки зрения кода, можно сказать, ничем - в теме можно создать полноценный плагин. А вот с точки зрения логики - всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы - вывод содержимого, в том числе, этого опроса...
Таким образом, тема отвечает за показ контента на странице, а плагин нужен для реализации функционала сайта.
Никогда не добавляйте функциональность в саму тему, если только на это нет веских причин. Если это сделать, то при смене темы функциональность потеряется в месте с ней. Например, в вашей теме есть крутая фотогалерея. И если поменять тему, то эта крутая фотогалерея потеряется...
В силу того, что большинство разрабатываемых мною сайтов создается с использованием CMS Wordpress и приходится постоянно сталкиваться с нетривиальными задачами, решил делиться с вами опытом использования различных плагинов. Как бесплатных так и платных, причем попробую придерживаться такого формата: одна статья - один плагин. Постараюсь рассматривать только действительно заслуживающие внимания разработки, и вот в первом своем рассказе поведаю вам об OptionTree - прекрасное, на мой взгляд, решение для создания страницы с пользовательскими настройками сайта.
Что такое пользовательские настройки? Шаблоны (темы) Wordpress, которые мы можем использовать на своем сайте, очень часто позволяют настраивать какие-то дополнительные параметры, например, цвет заголовков. Все платные темы, которые мне приходилось использовать, существенно расширяют функционал административной панели за счет отдельного интерфейса. Ниже я привожу пример такого расширения, посмотрите, пожалуйста.
Когда создается уникальный сайт (под уникальностью я имею ввиду сайт, который использует разработанный специально для клиента шаблон с уникальным дизайном и функционалом), то зачастую требуется создать возможность для администраторов менять те или иные параметры. Почти всегда необходимо дать возможность изменять файл логотипа, какие-то элементы на главной странице, иконки социальных сетей, цвет фона в «подвале» сайта и т.д. Именно такую возможность для разработчиков предоставляет плагин OptionTree, который можно бесплатно скачать с официального сайта Wordpress.
После установки... Установив и активировав плагин, мы, условно, получаем две части: одна для разработчиков сайта, другая - для пользователей. Первая часть доступна из пункта меню «OptionTree»-«Settings», который появляется после активации плагина слева в административной части Wordpress. Смело жмем туда и получаем уникальный интерфейс для формирования набора пользовательских полей, который будет доступен для пользователей во второй части плагина - «Внешний вид» - «Theme Options».
Слева мы видим разделы, которые можно переключать, справа - набор настроек внутри раздела. Разделы создаются с помощью Theme Options UI Builder по кнопке «Add section», и для раздела необходимо ввести его заголовок и уникальный идентификатор. Давайте создадим раздел «Дополнительно» и добавим туда несколько настроек.
Все изменения, конечно, фиксируются по нажатию на кнопку «Save Сhanges». Теперь добавим настройку для пользователя, ну, например, цвет заголовков. Нажимаем «Add setting» и, посмотрите, какой набор полей доступен для выбора. Можно сказать, огромный! Выберем «Colorpicker» и введем заголовок и уникальный идентификатор. Будьте внимательны с идентификаторами, именно по уникальному идентификатору затем в коде шаблона мы сможем получить доступ к значению этого поля.
Давайте посмотрим, что же теперь доступно пользователю для редактирования: появился новый раздел и новая настройка, поле «Цвет заголовков», которое пользователь удобным способом может теперь редактировать. Смотрите, я не буду останавливаться на полном списке доступных для создания полей, он есть, конечно же, в документации к плагину и на официальном сайте разработчиков. Если все же какие-то поля вызовут у вас интерес - напишите, я сделаю обновление этой публикации с описанием того или иного типа предлагаемых полей. В принципе, по названию поля понятен его смысл, но, повторюсь, если что-то вызовет у вас трудности - смело обращайтесь, обязательно поясню.
h1,h2,h3,h4,h5,h6 { color: ; }
Т.е. за вывод значения поля отвечает функция ot_get_option($option_id, $default), параметрами которой являются идентификатор поля, который мы с вами, как разработчики, задаем сами, в нашем случае мы выводим значение поля h_color. Второй параметр функции - формат вывода, давайте на этом я остановлюсь чуть подробнее. Например, нам надо сделать опцию, которая позволит пользователю создавать свой набор иконок для социальных сетей. Для этого мы будем использовать поле List Item (на иллюстрации ниже).
Это поле позволяет создавать уже набор повторяющихся полей, когда пользователь сможет добавлять одинаковые параметры внутри одной настройки. Немного непонятно, постараюсь объяснить и затем в коде показать, как это работает. В нашем случае присвоим полю List Item идентификатор social_icons и внутри этого поля (обратите внимание, есть еще одна кнопка «Add setting») добавим два поля: файл иконки и ссылка. Тип первого поля будет Upload, тип второго - Text. Идентификатор первого поля будет icon_image, идентификатор второго - icon_link.
Что получит пользователь? Теперь он сможет добавлять несколько иконок социальных сетей, нажимая на кнопку «Add new» на странице настроек. Причем, обратите внимание, количество таких настроек теперь неограниченно и зависит только от пользователя.
Чтобы вывести теперь в шаблоне такое сложное поле, необходимо использовать немного другой формат вывода, ниже - кусочек кода на PHP для такого случая. Комментариями постараюсь пояснить, что происходит.
