• ×

    • Создание страницы настроек для WordPress-темы. Создание простой Wordpress темы

    02.09.2019

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

    Предисловие

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

    Собственно все, что я узнал по теме я описал в статье. Кому интересно сразу почитать о плюсах/минусах и моем мнении прошу в конец статьи или .

    Экшн!

    Итак, если у вас нет пункта меню «Внешний вид — Настроить» при активации вашей темы, то нужно его добавить. Делается это так:

    Для этого создадим и откроем в корне темы файл functions.php и добавим туда такой код:

    Add_action("admin_menu", function(){ add_theme_page("Настроить", "Настроить", "edit_theme_options", "customize.php"); });

    Важно! Весь код должен находится между . Этим мы покажем серверу, что работаем с 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 (Список)

    /*Выводим инпуты нужное количество раз (соответствующее количеству настроек)*/ /* используем
    для каждой секции настроек */

    Позвольте мне все вам все здесь объяснить. Группы настроек будут заключены в блок с классом “rm_wrap”, а затем в блок с классом “rp_opts”. Затем, внутри этих блоков, мы открываем тег form, внутри которой будут размещены все необходимые инпуты. Каждая секция настроек (Основные настройки, Настройки домашней страницы, Настройки блога и т.д.) будет расположена в отдельном блоке с именем класса “rm_section”. В этом блоке будет расположено название (для секции настроек) и несколько блоков с инпутами. Используя специальные классы для блоков, типа

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

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

    Шаг 3

    Откройте файл functions.php своим любимым редактором кода (я использую NotePad++), и вставьте следующий код:

    Это две PHP-переменные, содержащие имя вашей темы (в нашем случае это Nettuts), и псевдоним, который вы укажете (в нашем примере это nt). Псевдоним используется в качестве префикса к именам всех настроек темы, и как правило является уникальным для каждой темы.

    Далее, мы создадим пару строчек кода, для автоматического генерирования списка wordpress-рубрик, вместо того, чтобы заставлять пользователя вручную указывать их ID. Вставьте следующий код, сразу же после, предыдущего:

    $categories = get_categories("hide_empty=0&order_by=name"); $wp_cats = array(); foreach ($categories as $category_list){ $wp_cats[$category_list -> cat_ID] = $category_list -> cat_name; } array_unshift($wp_cats, "Выберите рубрику");

    Этот фрагмент кода использует встроенную wordpress-функцию get_categories, для получения всех рубрик, а затем, с помощью цикла foreach, сохранения их в переменной $wp_cats. Затем к массиву добавляется опция “выберите рубрику”.

    Шаг 4

    Теперь пришло время создать список настроек для нашей темы. Вставьте следующий код в файл functions.php:

    $options = array(array("name" => "Настройки", "type" => "title"), array ("name" => "Основные настройки", "type" => "section"), array ("type" => "open"), array ("name" => "Цветовая схема", "desc" => "Выберите цветовую схему темы", "id" => $shortname . "_color_scheme", "type" => "select", "options" => array ("синяя", "красная", "зеленая"), "std" => "blue"), array ("name" => "URL Логотипа", "desc" => "Введите ссылку к картинке логотипа", "id" => $shortname . "_logo", "type" => "text", "std" => ""), array ("name" => "Пользовательский CSS", "desc" => "Хотите использовать свой CSS-код? Вставьте его в это поле", "id" => $shortname . "_custom_css", "type" => "textarea", "std" => ""), array ("type" => "close"), array ("name" => "Домашняя страница", "type" => "section"), array ("type" => "open"), array ("name" => "Картинка в шапке, на главной странице", "desc" => "Введите URL картинки, которая будет использоваться в шапке", "id" => $shortname ."_header_img", "type" => "text", "std" => ""), array ("name" => "Рубрика домашней страницы", "desc" => "Выберите рубрику, в которую будут публиковатся записи", "id" => $shortname ."_feat_cat", "type" => "select", "options" => $wp_cats, "std" => "Выберите рубрику"), array ("type" => "close"), array ("name" => "Подвал", "type" => "section"), array ("type" => "open"), array("name" => "Текст копирайта", "desc" => "Введите текст, который будет размещен в правой части подвала. Можно использовать HTML", "id" => $shortname."_footer_text", "type" => "text", "std" => ""), array("name" => "Код Google Analytics", "desc" => "Здесь вы можете разместить код Google Analytics, или любой другой счетчик", "id" => $shortname."_ga_code", "type" => "textarea", "std" => ""), array("name" => "Favicon", "desc" => "Favicon - это пиксельная иконка, которая представляет ваш сайт. Вставьте URL к картинке с расширением.ico", "id" => $shortname."_favicon", "type" => "text", "std" => get_bloginfo("url") ."/favicon.ico"), array("name" => "Feedburner URL", "desc" => "Feedburner - это сервис Google, управляющий RSS-потоками. Paste your Feedburner URL here to let readers see it in your website", "id" => $shortname."_feedburner", "type" => "text", "std" => get_bloginfo("rss2_url")), array("type" => "close"));

    Это был довольно большой фрагмент кода, заслуживающий небольшого разъяснения. Итак:

    • PHP-переменная $options хранит весь список настроек для нашей темы.
    • Список настроек состоит из нескольких массивов, каждый из которых содержит ключ “type”, для определения типа настройки и способа ее отображения.
    • Наш список настроек начинается с массива “type” => “title” – который будет использоваться для отображения имени темы и названия в заголовке страницы.
    • Каждый раздел (Основные настройки, Домашняя страница, Подвал) имеет отдельный список настроек.
    • Мы начинаем новую секцию, закрывая любую из предыдущих секций, и объявления новой секции с помощью массива array(“name” => “Подвал”, “type” => “section”).
    • Каждая опция может содержать следующие настройки:
      name: Имя текстового поля.
      desc: Короткое описание поля, для пользователя.
      id:       id поля, с префиксом из псевдонима. Оно будет использоваться как для записи настройки, так и для доступа к ней.
      type: тип input — text, select или textarea
      options: используется для объявления массива настроек для поля выпадающего списка.
      std: значение поля по умолчанию, используется если никаких других значений не указано.

    Шаг 5

    Попробуйте зайти в панель управления WordPress. Вы нигде не найдете указанных нами настроек, как же нам отобразить их? Добавляем следующий код в файл functions.php:

    Function mytheme_add_admin(){ global $themename, $shortname, $options; if($_GET["page"] == basename(__FILE__)){ if("saved" == $_REQUEST["action"]){ foreach ($options as $value){ update_option($value["id"], $_REQUEST[$value["id"]]); } foreach ($options as $value){ if(isset ($_REQUEST[$value["id"]])){ update_option($value["id"], $_REQUEST[$value["id"]]); }else{ delete_option($value["id"]); } } header("Location: admin.php?page=functions.php&saved=true"); die; } } else if("reset" == $_REQUEST["action"]){ foreach($options as $value){ delete_option($value["id"]); } header("Location: admin.php&page=functions.php&reset=true"); die; } add_menu_page($themename, $themename, "administrator", basename(__FILE__), "mytheme_admin"); } function mytheme_add_init() { }

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

    Последняя строка функции, добавляет страницу меню – параметры по порядку: имя и название, уровень пользовательских прав для просмотра страницы, страница сохранения и функция, использующаяся для отображения/сохранения настроек (в нашем примере называется mytheme_admin).

    Заметили, что функция mytheme_add_init пустая? Пусть пока останется такой как есть, мы вернемся к ней позже.

    Шаг 6

    Страница настроек в панели управления так и не появилась? Но, мы еще не дописали функцию mytheme_admim, о которой говорилось выше. Для создания этой функции нам понадобится код из шагов 6,7 и 8. Давайте начнем.

    Function mytheme_admin(){ global $themename, $shortname, $options; $i = 0; if($_REQUEST["action"] == "save") echo "

    настройки темы ". $themename ." были сохранены

    "; if($_REQUEST["reset"]) echo "

    настройки темы ". $themename ." были сброшены

    "; ?>

    Настройки

    Очень просто, не правда ли? Если настройка была сохранена, выводим подтверждающее сообщение. То же самое для сброса. Обратите внимание на класс “update fade” – WordPress автоматически выведет это сообщение в самом верху окна. Удобно, не правда ли? Идем дальше, начиная с блока “rm_wrap”

    Шаг 7

    Вставляем следующий код, ниже:


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

    " id="" type="" value="" />

    Здесь используется php-цикл foreach, каждый тип настроек определяется индивидуально для каждого случая. Для этого мы будем использовать оператор switch. Переменная в операторе switch – это текущий тип параметра, case – ожидаемый тип параметра. Вы, наверное, обратили внимание на выражение “break”, после каждого case? Это выражение используется для предотвращения неправильной обработки условия. Когда значение case соответствует переменной, все последующие case также будут выполнены. То есть, если у нас определен case3, то кроме него, также будут выполняться case4, case5 и т.д. Но нам этого не нужно, поэтому мы используем break, для прекращения работы оператора switch.

    Если текущее значение параметра “open” – ничего не происходит. Если текущее значение “close”, ставятся два закрывающих блока. Значение параметра “title” используется только один раз – во вступительном тексте перед настройками темы. Для каждого типа “text” (input type=”text”), “select” (выпадающий список) и “textarea” (название говорит само за себя) – отображается соответствующий input. Обратите внимание на блок

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

    Шаг 8

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

    Case "select" : ?>

    " id="" value="true" />

    /functions/images/trans.gif" class="inactive" alt=""/>

    Иконки: WooFunction

    Для типа настройки “section”, мы используем переменную-счетчик $i. Это позволяет отслеживать номер секций и соединять его с именем кнопки отправки данных, получая таким образом уникальное имя для каждой кнопки. Кроме того, в конец секции добавляется форма, для сброса всех настроек. Картинка будет использована для дальнейшей jQuery-фикации. Это последний фрагмент кода, который приведет наши функции в действие:

    Add_action("admin_init", "mytheme_add_init"); add_action("admin_menu", "mytheme_add_admin");

    Этот код добавляет дополнительную страницу в панели управления WordPress.

    Шаг 9

    Отлично, теперь у нас есть собственная страница управления, с отдельным пунктом меню. Однако, зайдя на эту страничку, мы видим, что не все так хорошо как нам бы хотелось. Но не беда, у нас есть отличный помощник – CSS! Создаем новую папку “functions”, внутри папки nettuts. Внутри этой папки, создаем новый файл – functions.css, и вставляем в него следующий код:

    Rm_wrap{ width:740px; } .rm_section{ border:1px solid #ddd; border-bottom:0; background:#f9f9f9; } .rm_opts label{ font-size:12px; font-weight:700; width:200px; display:block; float:left; } .rm_input { padding:30px 10px; border-bottom:1px solid #ddd; border-top:1px solid #fff; } .rm_opts small{ display:block; float:right; width:200px; color:#999; } .rm_opts input, .rm_opts select{ width:280px; font-size:12px; padding:4px; color:#333; line-height:1em; background:#f3f3f3; } .rm_input input:focus, .rm_input textarea:focus{ background:#fff; } .rm_input textarea{ width:280px; height:175px; font-size:12px; padding:4px; color:#333; line-height:1.5em; background:#f3f3f3; } .rm_title h3 { cursor:pointer; font-size:1em; text-transform: uppercase; margin:0; font-weight:bold; color:#232323; float:left; width:80%; padding:14px 4px; } .rm_title{ cursor:pointer; border-bottom:1px solid #ddd; background:#eee; padding:0; } .rm_title h3 img.inactive{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url("images/pointer.png") no-repeat 0 0; float:left; -moz-border-radius:6px; border:1px solid #ccc; } .rm_title h3 img.active{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url("images/pointer.png") no-repeat 0 -32px; float:left; -moz-border-radius:6px; -webkit-border-radius:6px; border:1px solid #ccc; } .rm_title h3:hover img{ border:1px solid #999; } .rm_title span.submit{ display:block; float:right; margin:0; padding:0; width:15%; padding:14px 0; } .clearfix{ clear:both; } .rm_table th, .rm_table td{ border:1px solid #bbb; padding:10px; text-align:center; } .rm_table th, .rm_table td.feature{ border-color:#888; }

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

    Шаг 10

    Теперь, когда у нас есть готовый CSS-файл, как же подключить его к странице, если у нас нет прямого доступа к разделу документа ? Помните, мы создали пустую функцию mytheme_add_init()? Вон она-то как раз нам и поможет. Измените ее следующим образом:

    Function mytheme_add_init() { $file_dir = get_bloginfo("template_directory"); wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all"); }

    Этот код подключит файл functions.css в раздел документа . Расположение файла определяется папкой с шаблоном.

    Шаг 11

    Взгляните на нашу страницу. Она выглядит вполне хорошо, осталось лишь добавить функциональность иконкам плюса, в заголовках секции. Для этого будем использовать jQuery. Создайте новый файл rm_script.js внутри папки nettuts/functions/folder. Вставьте следующий код:

    JQuery(document).ready(function(){ jQuery(".rm_options").slideUp(); jQuery(".rm_section h3").click(function(){ if(jQuery(this).parent().next(".rm_options").css("display")==="none") { jQuery(this).removeClass("inactive").addClass("active").children("img").removeClass("inactive").addClass("active"); } else { jQuery(this).removeClass("active").addClass("inactive").children("img").removeClass("active").addClass("inactive"); } jQuery(this).parent().next(".rm_options").slideToggle("slow"); }); });

    Что же делает этот код? После того как DOM загружен, все блоки с классом “rm_options” сворачиваются. Затем, при клике на иконке плюса, удаляется класс “inactive”, и добавляется класс “active”, который заменяет иконку на знак минус. При повторном нажатии этой иконки, происходит обратный процесс. Для сворачивания/разворачивания блоков используется довольно простая функция jQuery slideToggle. Чтобы подключить этот скрипт к странице, мы будем использовать уже знакомую нам функцию mytheme_add_init(), измените ее следующим образом:

    Function mytheme_add_init() { $file_dir = get_bloginfo("template_directory"); wp_enqueue_style("functions", $file_dir."/functions/style.css", false, "1.0", "all"); wp_enqueue_script("rm_script", $file_dir."/functions/script.js", false, "1.0"); }

    После этого, скрипт должен работать. Проверьте, как это выглядит на странице:

    Шаг 12

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

    $var = get_option("nt_colur_scheme");

    С его помощью, мы сможем реализовать смену цветовой схемы сайта. Это довольно просто:

    /* Изменяем CSS-файл, в зависимости от выбранного цвета */ /.css" /> /*Выводим текст в подвале, можно использовать HTML-тэги */

    Область применения ограничивается только вашим воображением.

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

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

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

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

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

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

    Для начала Вы должны определится как именно вы подключите код страницы. Есть два варианта.

    Первый простой, все добавляем в самый конец вашего functions.php после ?> и все.

    Второй способ - нужно создать файл settings.php и в него добавить весь код, после подключить его в functions.php следующим образом.

    Include("/settings.php");

    Когда создадите settings.php , перед тем как добавлять в него код убедитесь, что он сохранен в правильной кодировке - UTF-8 без BOM . Редактировать файлы, лучше всего в программе Notepadd++.

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

    Теперь добавим нашу страницу в админку в меню слева.

    // Добавление Страницы настроек в меню function add_settings_page() { add_menu_page(__("Опции темы"), __("Опции темы"), "manage_options", "settings", "theme_settings_page"); } //Добавление действий add_action("admin_init", "theme_settings_init"); add_action("admin_menu", "add_settings_page");

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

    Добавим действия и функцию сохранения опций нашей страницы

    //Сохранение настроек function theme_settings_page() { global $select_options; if (! isset($_REQUEST["settings-updated"])) $_REQUEST["settings-updated"] = false; ?>

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

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

    Настройка темы

    Настройки сохранены

    У нас будет таблица, в которой будут все опции по порядку в новых строках. Первая опция - это выбор нового пути к логотипу

    Обратите внимание что, у поля input есть id и name у которых значение theme_settings . Вы можете создавать много элементов, но у каждого должно быть свое имя, в данном случаи это - custom_logo

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

    Как Вы ведите тут тоже есть id и name и у них свое уникальное имя - block_pos . Внутрь списка добавляем элементы option , для которых тоже задаем условия.

    Можете приспособить под себя, но только не сделайте ошибки.

    Как в поле ввода и списке есть id и name и они тоже обязательны. Тоже есть свойство $options и в нем тоже указано имя.

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

    Лгоготип " />
    Расположение блока:
    Показывать блок: />
    Ссылка на банер
    Текст в подвале
    Метрика

    Также к каждому полю я прописывал label , с помощью которого я прописал пояснения к каждому из элементов.

    В самом конце добавляем кнопку сохранения, закрываем форму, блок в котором вся форма и функцию.

    Теперь весь код целиком

    Настройка темы

    Настройки сохранены

    Лгоготип " />
    Расположение блока:
    Показывать блок: />
    Ссылка на банер
    Текст в подвале
    Метрика

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

    Для этого сначала нужно включить нашу функцию

    Эту строку нужно прописывать каждый раз перед выводом опции

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

    Для лого например это так:

    Готовый результат будет вот таким

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

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

    Чтобы это сделать нам понадобится прописать такой вот код:

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

    Содержание если флажок установлен.

    Можно добавлять любое содержание. Хоть пол сайта скрыть, если нужно.

    Теперь осталось вывести только содержание того, что пользователь выберет в списке. У нас это было размещение блока слева или справа

    Тут как и с текстом в подвале будем использовать условие - если . В моем списке - только два элемента, поэтому условие такое - если выбран пункт номер один(слева) показываем блок у которого в стилях свойство - float:left; , иначе показываем блок у которого свойство - float:right; .

    Блок слева

    Блок справа

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

    На этом все, спасибо за внимание. 🙂

    Похожие статьи
     
    Категории
    Видеоматериалы
    Популярное
    Новое