• CSS
    • ПРОГРАММИРОВАНИЕ (CODING)
    • Emmet, ul, li, table, form
    • Style, hover, child
    • CSS Hat, font, background
    • Reset, margin, padding, float
    • Base64, relative, z-index
    • Google Fonts, PSD
    • Brackets, Bootstrap
    • Script, src, comments
    • jQuery, Slick Js, Tooltip
    • Bootstrap, Slick Nav, @media
    • Mobile Vew, Font Awesome
    • SASS, Bootstrap
    • Flexbox, Slider
  • Word Press
    • #1. Introduction to WordPress
    • #2. WordPress Files Configuration
    • #3. Kernel Review. Codex
    • #4. Standards of Encoding
    • #5. Develop a plugin, introduction
    • #6. Hooks, Filters, InterNation
    • #7. Adding Admin Menus, JS, CSS
    • #8. HTTP API, Shortcodes, Transients
    • #9. Options API, Settings API
    • #10. Database API, $wpdb object
    • #11. Ajax. Widget API. Dashboard API
    • #12. Post Type. Taxonomies. Metadata
    • #13. Theme Development. Basics
    • #14. Loop. Template. WP_Query
    • #15. File functions.php – I
    • #16. File functions.php – II
    • #17. Child Theme. Shortcode. TinyMCE
    • #18. Frameworks. Blank Theme
    • #19. Framework. Underscores. Unyson
    • #20: Framework Unyson. Options
    • #21. Extensions, Components, Manifest
    • #22. Unyson: Built-in Extensions
    • #23. Unyson: Helpers, Filters & Actions
    • #24. WC: Installation & Updating
    • #25. WC: Settings & Options
    • #26. WC: Product Setup
    • #27. WC: Sell Products, Order
    • #28. WC: Theming
    • #29. WC: Extending
    • #30. WC: Extending
  • PHP
    • Laravel, MVC, Composer
    • FW Yii2
  • JS
    • JS
    • React, Angular
  • Freelance
  • Projects
    • Useful Products
      • Free WordPress Themes (WP)
      • Free CSS templates (CSS, HTML)
      • Стартовая тема Word Press (WP)
    • Project
      • Practic Task
      • Real Democracy Game
      • Research Journal
      • Qubot
      • Cyber-street
      • Amatue

#16. File functions.php — II

Rostyslav - 11 января, 2018 - One comment

    Administration Menus

    Функции  админпанели

    Меню верхнего уровня

    Sub-Menus

    Sidebars

    Что такое сайдбар WordPress?

    Регистрация сайдбара

    Как отобразить сайдбары на страницах сайта?

    Функции Sidebars

    Widgets

    Что такое виджеты WordPress?

    Где хранятся виджеты?

    Отключение стандартных виджетов WordPress

    Создание собственного виджета

    Pagination

    Функции Pagination

    the_posts_pagination()

    Customizer API

    Основные параметры, включаемые в Customizer

    Дополнительные параметры Customizer

    Структура

    Режимы настройки

    Customizer Objects

    Settings

    Controls

    Sections

    Panels

    Добавление административных меню

    Добавление в административное меню

    Настройка панели администратора WordPress

    Добавляем пункты меню в админку wordpress

    Sidebars

    Codex Sidebars

    Сайдбары в WordPress: Что это такое и какие они бывают

    Сайдбар WordPress. Как добавить или убрать сайдбар. Быстрое создание один, два сайдбара на сайте. Руководство по использованию.

    Сайдбары WordPress

    Добавляем сайдбар в WordPress

    Сайдбары в WordPress

    Widgets API

    Виджеты WordPress

    Создание виджетов для WordPress

    Как создать свой виджет в WordPress

    Pagination

    Pagination

    Theme Options – The Customizer API

    Theme Customization API

    WordPress Customizer API — обзор с примерами

    WordPress Customizer — подробный обзор API

    WordPress Customizer API.

    Theme Customizer API. Настройка сайта WordPress в режиме моментального просмотра. Добавление собственных настроек темы

    Приступая к работе с настройщиком WordPress

    How to add options to the WordPress Customizer

    wordpress customizer api

    Building Better WordPress Themes with the Customizer API

    Getting Started with the WordPress Theme Customization API

    Administration Menus

    Функции  Админпанели

    Функция Описание
    add_menu_page() Добавляет пункт (страницу) верхнего уровня в меню админ-панели (в один ряд с постами, страницами, пользователями и т.д.).
    add_object_page() Запрещена с версии 4.5.0. Больше не поддерживается и может быть удалена в следующих версиях. Используйте add_menu_page().
    add_utility_page() Запрещена с версии 4.5.0. Больше не поддерживается и может быть удалена в следующих версиях. Используйте add_menu_page().
    remove_menu_page() Удаляет пункты меню верхнего уровня (записи, медиафайлы, ссылки, страницы) в админ-панели.
    add_submenu_page() Добавляет дочернюю страницу (подраздел) указанного главного меню в админ-панели.
    remove_submenu_page() Удаляет подпункт пункта меню в админ-панели WordPress.
    add_dashboard_page() Добавить дочернюю страницу меню в меню Dashboard.
    add_posts_page() Добавить дочернюю страницу меню в меню Posts.
    add_media_page() Добавить дочернюю страницу меню в меню Media.
    add_pages_page() Добавить дочернюю страницу меню в меню Pages.
    add_comments_page() Добавить дочернюю страницу меню в меню Comments.
    add_theme_page() Добавляет подменю в меню «внешний вид» (Appearance) в админ-панели.
    add_plugins_page() Добавить дочернюю страницу меню в меню Plugins.
    add_users_page() Добавить дочернюю страницу меню в меню Users.
    add_management_page() Добавить дочернюю страницу меню в меню Tools.
    add_options_page() Добавляет дочернюю страницу (подменю) в меню админ-панели «Параметры» (Settings).

    Меню верхнего уровня

    add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

    Добавляет пункт (страницу) верхнего уровня в меню админ-панели (в один ряд с постами, страницами, пользователями и т.д.).

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

    Если нужно добавить дочерний пункт меню, используйте add_submenu_page().

    Если вы видите ошибку «You do not have sufficient permissions to access this page.» при попытке зайти на страницу, это значит, что вы подключаете функцию слишком рано, подключаете функцию не на нужный хук. Нужно использовать хук admin_menu.

    Возвращает Строку. Название хука, название страницы меню или false, если пользователь не имеет прав доступа к меню.

    $page_title(строка) (обязательный)

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

    $menu_title(строка) (обязательный)

    Название пункта меню в сайдбаре админ-панели.

    $capability(строка) (обязательный)

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

    $menu_slug(строка) (обязательный)

    Уникальное название (slug), по которому затем можно обращаться к этому меню.
    Если параметр $function не указан, этот параметр должен равняться названию PHP файла относительно каталога плагинов, который отвечает за вывод кода страницы этого пункта меню.

    $function(строка)

    Название функции, которая выводит контент страницы пункта меню.Этот параметр необязательный и если он не указан, WordPress ожидает что текущий подключаемый PHP файл генерирует страницу код страницы админ-меню, без вызова функции. Большинство авторов плагинов предпочитают указывать этот параметр.
    Два варианта установки параметра:
    Если функция является методом класса, она вызывается по ссылке:
    array( $this, ‘function_name’ )
    или статически:
    array( __CLASS__, ‘function_name’ ).
    Во всех остальных случаях указываем название функции в виде строки.
    По умолчанию: нет

    $icon_url(строка)

    Иконка для пункта меню.

    • Если вам нужно подключить произвольную картинку, можно использовать функцию plugin_dir_url( __FILE__ ), чтобы получить УРЛ до папки файла плагина и затем дописать к нему название картинки: plugin_dir_url( __FILE__ ) .’plugin-icon.png’. Размеры иконки должны быть 20х20 пикселей или меньше.
    • С версии 3.8, WP использует специальные иконки dashicons, чтобы указать одну из этих иконок, выберите нужную в коллекции иконок и укажите в этом параметре название иконки. Например, иконка консоли называется dashicons-dashboard указываем это название.
    • С версии 3.8. можно указывать закодированную в base64 строку, которая будет содержать картинку: data:image/svg+xml;base64…. В этом случае, иконка будет указана как фон слоя. Закодировать картинку можно в сервисе: http://duri.me/.
    • Если указать ‘none’, то будет создан слой div картинку для которого можно затем указать в CSS стилях.
    • По умолчанию, когда указана пустая строка », используется иконка консоли из списка dashicons и будет добавлен CSS класс menu-icon-generic в слою иконки.
      По умолчанию: »

    $position(число)

    Число определяющее позицию меню. Чем больше цифра, тем ниже будет расположен пункт меню.

    По умолчанию, пункт меню будет добавлен в конец списка.

    Список позиций для базовых пунктов меню:

    2 Консоль
    4 Разделитель
    5 Посты
    10 Медиа
    15 Ссылки
    20 Страницы
    25 Комментарии
    59 Разделитель
    60 Внешний вид
    65 Плагины
    70 Пользователи
    75 Инструменты
    80 Настройки
    99 Разделитель

    Добавление меню для темы

    add_action(‘admin_menu’, ‘addAdminMenu’);

    function addAdminMenu(){

       $mainMenuPage = add_menu_page(

           _x(

               ‘Step By Step theme’,

               ‘admin menu page’ ,

               STEPBYSTEP_THEME_TEXTDOMAIN

           ),

           _x(

               ‘Step By Step theme’,

               ‘admin menu page’ ,

               STEPBYSTEP_THEME_TEXTDOMAIN

           ),

           ‘manage_options’,

           STEPBYSTEP_THEME_TEXTDOMAIN,

           ‘renderMainMenu’,

           get_template_directory_uri() .’/images/main-menu.png’

       );

    }

    function renderMainMenu(){

       _e(‘Step By Step theme page’, STEPBYSTEP_THEME_TEXTDOMAIN);

    }

    Sub-Menus

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

    add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function );

    Добавляет дочернюю страницу (подраздел) указанного главного меню в админ-панели.

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

    Нужно вызывать через один из хуков:
    • user_admin_menu — админ-меню пользователя;
    • network_admin_menu — админ-меню сети;
    • admin_menu — обычное административное меню.

    Функция (параметр $function), которая отвечает за вывод контента на странице должна проверять права пользователя отдельно и если нужно блокировать доступ к контенту.

    Если у вас появляется ошибка «You do not have sufficient permissions to access this page.» при попытке зайти на страницу, это значит, что вы подключаете функцию слишком рано, вешаете функцию не на тот хук. Нужно использовать хук admin_menu.

    Возвращает строку. Название хука, результирующей страницы меню или false, если пользователь не имеет прав доступа к меню.

    $parent_slug(строка) (обязательный)

    Название (slug) родительского меню в которое будет добавлен пункт или название файла админ-страницы WordPress. Используйте NULL или укажите «options.php», чтобы создать страницу, которая не будет появляться ни в каком пункте меню.
    Примеры:

    • index.php — Консоль (Dashboard). Или спец. функция: add_dashboard_page();
    • edit.php — Посты (Posts). Или спец. функция: add_posts_page();
    • upload.php — Медиафайлы (Media). Или спец. функция: add_media_page();
    • link-manager.php — Ссылки (Links). Или спец. функция: add_links_page();
    • edit.php?post_type=page — Страницы (Pages). Или спец. функция: add_pages_page();
    • edit-comments.php — Комментарии (Comments). Или спец. функция: add_comments_page();
    • edit.php?post_type=your_post_type — Произвольные типы записей.
    • themes.php — Внешний вид (Appearance). Или спец. функция:add_theme_page();
    • plugins.php — Плагины (Plugins). Или спец. функция: add_plugins_page();
    • users.php — Пользователи (Users). Или спец. функция: add_users_page();
    • tools.php — Инструменты (Tools). Или спец. функция: add_management_page();
    • options-general.php — Настройки (Settings). Или спец. функция: add_options_page()
      По умолчанию: нет

    $page_title(строка) (обязательный)

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

    $menu_title(строка) (обязательный)

    Текст, который будет использован как называние пункта меню.
    По умолчанию: нет

    $capability(строка) (обязательный)

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

    $menu_slug(строка) (обязательный)

    Уникальное название (slug), по которому затем можно обращаться к этому меню. Если нужно дублировать родительское меню, укажите $menu_slug такой же как у родительского меню.

    Это название будет использоваться в качестве значение параметра запроса page в ссылке на страницу: ?page=название. Это уникальное название будет как бы привязано к функции указанной в следующем параметре $function.
    По неофициальной информации, в этот параметр можно добавить путь до файла отвечающего за страницу этого пункта меню. Путь должен быть от каталога плагинов: допустим папка плагина называетсяmy-plugin и файл страницы настроек  options.php, тогда путь до файла будет такой: my-plugin/options.php.
    По умолчанию: нет

    $function(строка/массив)

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

    Если функция является методом класса, она вызывается по ссылке: array( $this, ‘function_name’ ) или статически: array( __CLASS__, ‘function_name’ ).
    Во всех остальных случаях указываем название функции в виде строки.
    По умолчанию: нет

    Добавление Sub-Menus для темы

    add_action(‘admin_menu’, ‘addAdminMenu’);

    function addAdminMenu(){

       $subMenuPage = add_submenu_page(

           STEPBYSTEP_THEME_TEXTDOMAIN,

           _x(

               ‘Sub Step By Step theme’,

               ‘admin menu page’ ,

               STEPBYSTEP_THEME_TEXTDOMAIN

           ),

           _x(

               ‘Sub Step By Step theme’,

               ‘admin menu page’ ,

               STEPBYSTEP_THEME_TEXTDOMAIN

           ),

           ‘manage_options’,

           ‘step_by_step_theme_control_sub_menu’,

           ‘renderSubMenu’

           );

    }

    function renderSubMenu(){

       _e(‘Sub Step By Step theme page’, STEPBYSTEP_THEME_TEXTDOMAIN);

    }

    add_theme_page()

    add_theme_page(string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = »)

    Добавляет подменю в меню «внешний вид» (Appearance) в админ-панели.

    $page_title(строка) (обязательный)

    Текст тега <title> для страницы меню, когда вы будите на ней.
    По умолчанию: нет

    $menu_title(строка) (обязательный)

    Текст пункта меню.
    По умолчанию: нет

    $capability(строка) (обязательный)

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

    $menu_slug(строка) (обязательный)

    Идентификатор меню (slug), по которому можно обращаться к меню. Должен быть уникальным.
    По умолчанию: нет

    $function(строка/массив)

    Callback функция, выводящая HTML код страницы пункта меню.
    По умолчанию: »

    Возвращает

    Строку. hook_suffix вставленной страницы (пункта меню). То что возвращает функция add_submenu_page().

    Пример

    add_action(‘admin_menu’, ‘addAdminMenu’);

    function addAdminMenu(){

       $themeMenuPage = add_theme_page(

           __(‘Sub theme Step By Step’, STEPBYSTEP_THEME_TEXTDOMAIN),

           __(‘Sub theme Step By Step’, STEPBYSTEP_THEME_TEXTDOMAIN),

           ‘read’,

           ‘step_by_step_theme_control_sub_theme_menu’,

           ‘renderThemeMenu’  ); }

    function renderThemeMenu(){

       _e(‘Sub theme Step By Step’, STEPBYSTEP_THEME_TEXTDOMAIN); }

    Sidebars

    Что такое сайдбар WordPress?

    Боковая панель — любая виджетизированная область вашей темы. Виджет области являются места в вашей теме, где пользователи могут добавлять свои собственные виджеты.Вы не должны включать боковую панель в свою тему, но включая боковую панель означает, что пользователи могут добавить содержание к областям виджета через Customizer или Панель администрации Виджетов. Виджеты могут использоваться во множестве целей, в пределах от перечисления недавних записей к проведению живых чатов. Изначально темы WordPress содержали одну или две колонки (правая и левая область рядом с контентом) и это было тем местом, где располагались виджеты. В настоящий момент темы могут поддерживать широкий спектр разных сайдбаров WordPress (в футере, в заголовке, после содержимого), но по прежнему все области для виджетов называются сайдбарами. Желательно, чтобы вся дополнительная информация в теме располагалась в сайдбарах, максимально виджетизированная тема проще в настройке и управлении. Рекомендуется, чтобы весь дополнительный код, размещаемый в сайдбарах, отображался только если они пустые. При добавлении виджета в сайдбар содержимое по умолчанию должно исчезать, это дает пользователю возможность настраивать тему без редактирования шаблона.

    Регистрация сайдбара

    Чтобы использовать sidebars, Вы должны зарегистрировать их в functions.php.

    register_sidebar()

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

    register_sidebar() регистрирует панель (место, контейнер) для виждетов и формат вывода для каждого виджета: html тег заголовка, html тег до и после виджета. Зарегистрировав панель, в админ-панели появится место, куда можно помещать виджеты. Разместив виджеты в панели, мы сможем вывести панель с виджетами в шаблоне с помощью функции dynamic_sidebar()

    Функцию нужно подключать к событию widgets_init.

    Функция поддержки виджетов: add_theme_support(‘widgets’) должна быть активирована для темы, в functions.php. Если этого нет, то register_sidebar() активирует её автоматически.

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

    Используйте register_sidebars(), чтобы создать несколько панелей за раз. Это позволит создать уникальное имя для каждой панели, например: «Правый сайдбар», «Левый сайдбар». Несмотря на то, что эти названия видны только в админ-панели, важно дать пользователю представление о том где будет выводиться панель.

    register_sidebars() также рекомендуется использовать, если нужно зарегистрировать несколько однотипных панелей для виждетов (названия отличаются числами), например: Панель 1, Панель 2, Панель 3.

    Дефолтные значения параметров before/after рассчитаны на темы, которые создают боковые панели в виде LI списка с заголовками в H2 теге. Такая регистрация рекомендуется разработчиками WordPress для всех тем.

    Если по каким-то причинам, маркировку нужно изменить, рекомендуется скопировать id (id=»%1$s») и class (class=»widget %2$s») атрибуты как указано по умолчанию и не указывать их жестко. Нужно это, чтобы они создавались динамически с помощью функции sprintf().

    Нельзя оставлять параметры name и id пустыми!

    Их можно либо не указывать вообще, либо обязательно указать при этом, нужно чтобы они были уникальными и не пустыми.

    Если не определить id или name, то для них будут использованы значения по умолчанию с инкрементом:

    ‘name’ => sprintf(__(‘Sidebar %d’), $i ),

    ‘id’ => «sidebar-$i»,

    Где $i будет числом равным кол-ву панелей на сайте + 1.

    Используется в: register_sidebars().

    Хуки из функции:

    register_sidebar

    Возвращает

    Строку. Идентификатор переданный в параметре ID.

    Использование

    register_sidebar( $args );

    Шаблон использования

    add_action( ‘widgets_init’, ‘register_my_widgets’ );

    function register_my_widgets(){

    register_sidebar( array(

    ‘name’          => sprintf(__(‘Sidebar %d’), $i ),

    ‘id’            => «sidebar-$i»,

    ‘description’   => »,

    ‘class’         => »,

    ‘before_widget’ => ‘<li id=»%1$s» class=»widget %2$s»>’,

    ‘after_widget’  => «</li>\n»,

    ‘before_title’  => ‘<h2 class=»widgettitle»>’,

    ‘after_title’   => «</h2>\n»,

    ) );

    }

    $args(строка/массив)

    Аргументы для регистрации панели виджетов. Можно указывать в виде строки или массива:

    Если в виде строки, тогда аргументы нужно разделять знаком &:

    ‘name=Sidebar&id=my_prefix_sidebar’

    Те же аргументы в массиве:

    array(

    ‘name’ => ‘Sidebar’,

    ‘id’   => ‘my_prefix_sidebar’,

    )

    По умолчанию: параметры по умолчанию.

    Аргументы параметра $args

    name(строка)

    Название панели виджетов. Название будет видно в админ-панели WordPress. По умолчанию «Боковая колонка 1» (локализация от Sidebar $i, где $i порядковый номер сайдбара). Значение не должно быть пустым!

    По умолчанию: sprintf(__(‘Sidebar %d’), $i )

    id(строка)

    Идентификатор виджета. Строка, в которой не должно быть заглавных букв и пробелов. Значение не должно быть пустым, если оставить этот параметр пустым, то в режиме разработки (при дебаге) получите заметку типа E_USER_NOTICE.

    По умолчанию: «sidebar-$i»

    description(строка)

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

    По умолчанию: »

    class(строка)

    CSS класс, который будет добавлен главному HTML тегу панели виджетов.

    По умолчанию: »

    before_widget(строка)

    HTML код, который будет расположен перед каждым виджетом в панели. Например: <li class=»my-widget»>. Конструкции %1$s и %2$s будут заменены на id и class используемого в сайдбаре виджета.

    По умолчанию: ‘<li id=»%1$s» class=»widget %2$s»>’

    after_widget(строка)

    HTML код, который будет расположен после каждого виджета в панели. Например: </li>.

    По умолчанию: «</li>\n»

    before_title(строка)

    HTML код перед заголовком виджета.

    По умолчанию: ‘<h2 class=»widgettitle»>’

    after_title(строка)

    HTML код после заголовка виджета.

    По умолчанию: «</h2>\n»

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

    Пример

    Регистрация виджетов для боковой панели сайта

    Код ниже, зарегистрирует панель под названием «Правая боковая панель сайта». Название панели будет обвёрнуто в теги <div class=»title»> и </div>:

    function register_my_widgets(){
    register_sidebar( array(
    ‘name’ => «Правая боковая панель сайта»,
    ‘id’ => ‘right-sidebar’,
    ‘description’ => ‘Эти виджеты будут показаны с правой колонке сайта’,
    ‘before_title’ => ‘<h1>’,
    ‘after_title’ => ‘</h1>’
    ) );
    }
    add_action( ‘widgets_init’, ‘register_my_widgets’ );

    Код выполняет следующие действия:

    • register_sidebar — Говорит WordPress, что вы регистрируете боковую панель
    • ‘name’ => «Правая боковая панель сайта», — Это имя этой области виджета, который появится в Внешний вид > Виджеты
    • ‘id’ => ‘right-sidebar’ Назначает идентификатор на боковую панель. WordPress использует идентификатор » для виджетов конкретной боковой панели.
    • before_title/ after_title- Обертка элементы для заголовка виджета. По умолчанию, WordPress устанавливает его h2

    Как отобразить сайдбары на страницах сайта?

    После того, как мы разместим этот код в файл темы functions.php, в админ-панели на странице виджетов, появится панель, куда мы сможем добавить виджеты. В шаблоне эта панель выводится с помощью функции dynamic_sidebar():

    dynamic_sidebar()

    Выводит на экран первую активную панель виджетов (сайдбар — панель в которой есть хотя бы один виджет). Можно указать ID или номер панели, какую именно выводить, если на сайте большее одной панели виджетов.

    dynamic_sidebar() возвращает true или false, с возвращаемым результатом, также выводит на экран панель виджетов. Возвращаемое значение можно использовать, например, чтобы определить нужно ли обрабатывать код заменяющий виджеты, когда в панели нет виджетов

    Если при регистрации панели виджетов с помощью функции register_sidebar(), в качестве аргумента id вы использовали число, то в dynamic_sidebar() указывайте это число. Если вы использовали название (строку), то указывайте его.

    Хуки из функции:

    dynamic_sidebar

    dynamic_sidebar_after

    dynamic_sidebar_before

    dynamic_sidebar_has_widgets

    dynamic_sidebar_params

    Возвращает

    true, если панель с виджетами была найдена. false, если панели нет, или в ней нет виджетов.

    Использование

    <ul id=»sidebar»>
    <?php dynamic_sidebar( $index ); ?>
    </ul>

    $index(строка/число)

    Идентификатор панели, указанный в параметре id функции register_sidebar(), при регистрации панели. Если указано число, то будет искаться панель с ID sidebar-$index.

    По умолчанию: 1 (sidebar-1)

    <?php
    if ( function_exists(‘dynamic_sidebar’) )
    dynamic_sidebar(‘right-sidebar’);
    ?>

    Функции Sidebars

    Функция Описание
    register_sidebar() Регистрирует панель виджетов (место, куда размещаются виджеты в админ-панели, чтобы потом вывести их в лицевой части).
    register_sidebars() Создает указанное количество панелей виджетов (сайдбаров) одновременно. Функция создана для удобного создания нескольких панелей виджетов. Если нужно создать только одну панель, как это делается в большинстве тем, используйте функцию register_sidebar() или используйте эту функцию, указав единицу (1) в первом параметре.
    unregister_sidebar() Отменяет регистрацию виджета. Удаляет виджет по указанному названию класса виджета.
    is_active_sidebar() Проверяет используется ли указанная панель виджетов (область для виджетов, сайдбар). Сработает если в области для виджетов есть хоть один виджет. Условный тег.
    is_dynamic_sidebar() Проверяет поддерживается ли темой функция сайдбаров (виджеты и панели для них) и установлен ли для панели хотя бы один виджет. Условный тег.
    dynamic_sidebar() Выводит на экран первую активную панель виджетов (сайдбар — панель в которой есть хотя бы один виджет). Можно указать ID или номер панели, какую именно выводить, если на сайте большее одной панели виджетов.
    is_registered_sidebar() Проверяет зарегистрирован ли указанный раздел (область) для виджетов.

    Widgets

    Что такое виджеты WordPress?

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

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

    Создавать виджет WordPress – это примерно, как создавать плагин, но гораздо проще и понятнее. Все, что вам нужно, это один файл со всем PHP кодом, который писать гораздо проще, чем плагин, у которого несколько файлов.

    В WordPress есть класс WP_Widget, который предоставляет доступ к API виджетов. Когда вы наследуете этот класс, ваш виджет будет доступен для любого сайдбара, который поддерживает ваша тема. В комплекте WordPress уже есть некоторые виджеты, например «Свежие записи» или «Архив», они тоже наследуют класс WP_Widget.

    Класс WP_Widget содержит четыре метода, которые должны быть перегружены:

    __construct() — вызывает родительский конструктор и инициализирует виджет.

    form() — выводит форму для настройки виджета.

    update() — обновление настроек виджета, которые были указаны в форме администратором.

    widget() — отображение виджета на сайте.

    Где хранятся виджеты?

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

    Отключение стандартных виджетов WordPress

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

    Для отключения виджетов можете воспользоваться готовым кодом ниже:

    1. Вставьте код в файл functions.php текущей темы.
    2. Удалите или закомментируйте строки с теми виджетами, которые удалять не нужно.
    3. И только потом можете сохранить файл.

    function true_remove_default_widget() {

    unregister_widget(‘WP_Widget_Archives’); // Архивы

    unregister_widget(‘WP_Widget_Calendar’); // Календарь

    unregister_widget(‘WP_Widget_Categories’); // Рубрики

    unregister_widget(‘WP_Widget_Meta’); // Мета

    unregister_widget(‘WP_Widget_Pages’); // Страницы

    unregister_widget(‘WP_Widget_Recent_Comments’); // Свежие комментарии

    unregister_widget(‘WP_Widget_Recent_Posts’); // Свежие записи

    unregister_widget(‘WP_Widget_RSS’); // RSS

    unregister_widget(‘WP_Widget_Search’); // Поиск

    unregister_widget(‘WP_Widget_Tag_Cloud’); // Облако меток

    unregister_widget(‘WP_Widget_Text’); // Текст

    unregister_widget(‘WP_Nav_Menu_Widget’); // Произвольное меню

    }

    add_action( ‘widgets_init’, ‘true_remove_default_widget’, 20 );

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

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

    Создание собственного виджета

    StepByStepExampleWidget

    class StepByStepExampleWidget extends \WP_Widget

    {

       public function __construct() {

           /**

            * https://developer.wordpress.org/reference/classes/wp_widget/__construct/

            * WP_Widget::__construct(

            *      string $id_base, //Base ID для виджета, в нижнем регистре и уникальным. Если оставить пустым,

            *                          то часть имени класса виджета будет использоваться Должно быть уникальным.

            *      string $name, //Имя виджета отображается на странице конфигурации.

            *      array $widget_options = array(),

            *      array $control_options = array()

            * )

            *

            */

           parent::__construct(

               «step_by_step_example»,

               «Step by Stepe Example Widget»,

               array(«description» => «Example»)

           );

       }

       /**

        * Метод form() используется для отображения настроек виджета на странице виджетов.

        * @param $instance

        */

       public function form($instance) {

           $title = «»;

           $text = «»;

           // если instance не пустой, достанем значения

           if (!empty($instance)) {

               $title = $instance[«title»];

               $text = $instance[«text»];

           }

           $tableId = $this->get_field_id(«title»);

           $tableName = $this->get_field_name(«title»);

           echo ‘<label for=»‘ . $tableId . ‘»>Title</label><br>’;

           echo ‘<input id=»‘ . $tableId . ‘» type=»text» name=»‘ .

               $tableName . ‘» value=»‘ . $title . ‘»><br>’;

           $textId = $this->get_field_id(«text»);

           $textName = $this->get_field_name(«text»);

           echo ‘<label for=»‘ . $textId . ‘»>Text</label><br>’;

           echo ‘<textarea id=»‘ . $textId . ‘» name=»‘ . $textName .

               ‘»>’ . $text . ‘</textarea>’;

       }

       /**

        * @param $newInstance

        * @param $oldInstance

        * @return array

        */

       public function update($newInstance, $oldInstance) {

           $values = array();

           $values[«title»] = htmlentities($newInstance[«title»]);

           $values[«text»] = htmlentities($newInstance[«text»]);

           return $values;

       }

       /**

        * @param $args

        * @param $instance

        */

       public function widget($args, $instance) {

           $title = $instance[«title»];

           $text = $instance[«text»];

           echo «<h2>$title</h2>»;

           echo «<p>$text</p>»;   } }

    functions.php

    require get_template_directory().’/widgets/StepByStepExampleWidget.php’;

    add_action(‘widgets_init’, create_function(», ‘return register_widget(«widgets\StepByStepExampleWidget»);’));

    Pagination

    WordPress имеет возможность разбивать списки записей или одну запись на несколько страниц для навигации «постранично». Вы можете указать, сколько записей должно отображаться на каждой странице. На странице «Чтение» (Настройки> Чтение). Значение «Blog pages show most» ( На страницах блога отображать не более ) будет использоваться WordPress, если ваша тема не переопределит его, например, когда используется пользовательский запрос. Когда в файле шаблона темы используются несколько циклов (списки сообщений), только один цикл, основной цикл, может быть разбит на страницы.

    WordPress предлагает встроенную функцию для навигации по записям. Авторы тем могут использовать простые ссылки для предыдущей и следующей страниц или нумерованные страницы.

    Функции Pagination

    Функция Описание
    posts_nav_link() Выводит ссылки на предыдущую и следующую страницы (посты/категории). Может пригодится для того, чтобы снабдить архивы ссылками навигации.
    next_posts_link() Выводит ссылку на следующий список постов (например следующие посты в категории). Навигация внутри категории.
    previous_posts_link() Выводит ссылку на список постов (страница пагинации). Ссылка выводится на более новые посты по сравнению с текущими. Навигация внутри категории.
    get_next_posts_link() Получает HTML-ссылку на список ранее опубликованных постов внутри текущего запроса (ссылка пагинации).
    get_previous_posts_link() Получает HTML-ссылку (&lt;a&gt;) на страницу с предыдущими постами (более свежие посты).
    paginate_links() Выводит ссылки пагинации для страниц архивов. Может быть использована для создания пагинации для любых страниц.
    the_posts_pagination() Выводит на экран ссылки пагинации на след./пред. сет постов. Используется на страницах архивов (рубрики, метки, …).
    get_the_posts_pagination() Получает ссылки пагинации на след./пред. сет постов. Используется на страницах архивов (рубрики, метки).

    the_posts_pagination()

    Выводит на экран ссылки пагинации на след./пред. сет постов. Используется на страницах архивов (рубрики, метки, …).

    Использование

    the_posts_pagination( $args );

    $args(массив)

    Параметры по которым будет выводиться результат. По умолчанию:

    $args = array(

    ‘show_all’     => false, // показаны все страницы участвующие в пагинации

    ‘end_size’     => 1,     // количество страниц на концах

    ‘mid_size’     => 1,     // количество страниц вокруг текущей

    ‘prev_next’    => true,  // выводить ли боковые ссылки «предыдущая/следующая страница».

    ‘prev_text’    => __(‘« Previous’),

    ‘next_text’    => __(‘Next »’),

    ‘add_args’     => false, // Массив аргументов (переменных запроса), которые нужно добавить к ссылкам.

    ‘add_fragment’ => »,     // Текст который добавиться ко всем ссылкам.

    ‘screen_reader_text’ => __( ‘Posts navigation’ ), );

    $args передается в функцию paginate_links(), поэтому полный список параметров, смотрите в её описании.

    По умолчанию: предустановки

    Примеры

    Вывод пагинации на экран

    <?php the_posts_pagination(); ?>

    Customizer API

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

    API настройки тем, добавленные в WordPress 3.4, позволяет разработчикам настраивать и добавлять настройки в раздел «Внешний вид → Customize» в панели администратора. Экран настройки позволяет администраторам корректировать настройки темы, цвет схемы или виджета, а так же видеть предварительный просмотр в реальном времени.

    Поскольку WordPress Customizer — это backbone-приложение, работающее с WP REST API, его возможности почти безграничны.

    Customize API (Customizer) — это среда для предварительного просмотра любых изменений в WordPress. Он предоставляет унифицированный интерфейс для пользователей, чтобы настраивать различные аспекты их темы и их сайта, от цветов и макетов до виджетов, меню и т. Д. Темы и плагины могут добавлять параметры в Настройщик. Customizer — это канонический способ добавления параметров в вашу тему.

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

    Основные параметры, включаемые в Customizer

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

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

    Включены ли эти настройки, зависит от темы, но большинство современных тем поддерживает эти опции, а найти тему с определенной стандартной настройкой можно через фильтр — https://wordpress.org/themes/tag-filter/. Это лишь базовые настройки, некоторые темы могу предлагать очень много других функций.

    Дополнительные параметры Customizer

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

    • цвета и другие цветовые сочетаний;
    • расположение и количество колонок;
    • слайдеры;
    • дополнительные виджеты;
    • категории, выводимые в блоге;
    • настройки магазинов и портфолио;
    • и так далее;

    Структура

    Настройщик тем состоит из трех сущностей:

    1. Блоки: что это такое можно наглядно видеть в панели настройки виджетов. Для них создана своя отдельная страница, которая имеет свои секции, состоящие из названия сайдбаров.
    2. Секции: блоки состоят из секций. При открытии страницы Настройщика Тем мы видим меню, состоящее из заголовков секций. При нажатии на каждое название плавно выезжает сама секция со всеми настройками, которые она включает.
    3. Элементы управления: Секция состоит из логически связанных между собой элементов управления (поля, галочки, выпадающие списки, кнопки вызова медиа библиотеки, цветовые круги и так далее, есть дополительно много стандартных контролов, а в дополнение к ним можно создавать свои уникальные контролы произвольного типа).

    За всеми этими элементами стоит простой параметр, хранящийся в базе данных (setting). На этих сущностях построено программирование Настройщика Тем.

    Режимы настройки

    При конфигурировании темы WordPress, через Customizer есть два режима:

    1. Настройки обновляются мгновенно с помощью JavaScript, эта опция должна быть отдельно запрограммирована автором темы.
    2. Настройки обновляются самим Customizer. После изменения опции, которая не обновляется автоматически, он, спустя несколько секунд, перезагружает весь веб-сайт в своем окне-фрейме для предварительного просмотра. В этом случае визуально изменения обновляются с некоторой задержкой.

    Customizer Objects

    API Customize является объектно-ориентированным. Существует четыре основных типа объектов Customizer: Panels, Sections, Settings, и Controls (панели, разделы, настройки и элементы управления). Settings связывают элементы пользовательского интерфейса (элементы управления) с параметрами, сохраненными в базе данных. Sections представляют собой контейнеры пользовательского интерфейса для Controls(элементов управления), чтобы улучшить их организацию. Panels — это контейнеры для секций, позволяющие группировать несколько разделов.

    Каждый объект Customizer представлен классом PHP, и все объекты управляются объектом Customize Manager, WP_Customize_Manager.

    Чтобы добавить, удалить или изменить любой объект Customizer или получить доступ к Customizer Manager, используйте hook customize_register:

    function themeslug_customize_register( $wp_customize ) {

     // Do stuff with $wp_customize, the WP_Customize_Manager object. }

    add_action( ‘customize_register’, ‘themeslug_customize_register’ );

    Менеджер Customizer предоставляет методы add_, get_ и remove_ для каждого типа объекта Customizer; Каждый работает с id. Методы get_ позволяют напрямую изменять параметры, указанные при добавлении элемента управления.

    add_action(‘customize_register’,’my_customize_register’);

    function my_customize_register( $wp_customize ) {

     $wp_customize->add_panel();

     $wp_customize->get_panel();

     $wp_customize->remove_panel();

     $wp_customize->add_section();

     $wp_customize->get_section();

     $wp_customize->remove_section();

     $wp_customize->add_setting();

     $wp_customize->get_setting();

     $wp_customize->remove_setting();

     $wp_customize->add_control();

     $wp_customize->get_control();

     $wp_customize->remove_control(); }

    Settings

    Settings управляют предварительным просмотром, сохранением и sanitization ваших customizer objects. Каждый Settings управляется control управления. При добавлении нового параметра доступны несколько параметров.

    Добавление новой Settings

    Чтобы добавить новую настройку в свой Customizer, вам необходимо вызвать метод $wp_customize->add_setting()

    $wp_customize->add_setting($id, $args);

    $id (string) (required) Уникальный идентификатор .

    Default: None

    $args (array) (required) Ассоциативный массив, содержащий аргументы для setting.

    Default: None

    default

    Значение по умолчанию для setting, если оно не определено

    type

    Необязательный. Определяет ТИП setting. Возможные значения: ‘option’ или ‘theme_mod’ (по умолчанию ‘theme_mod’)

    capability

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

    theme_supports

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

    transport

    Необязательный. Это может быть ‘refresh’ (по умолчанию) или ‘postMessage’. Установите этот параметр в значение «postMessage», если вы пишете собственный Javascript, чтобы управлять предварительным просмотром темы Customizer Customizer.

    sanitize_callback

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

    sanitize_js_callback

    Необязательный.  Имя функции, вызываемой для валидации значения этого параметра для целей вывода в javascript-код.

    $wp_customize->add_setting( ‘your_setting_id’,

       array(

           // Дефолтное значение для этого поля.

           ‘default’ => »,

           // Можно поменять с дефолтного значения (theme_mod) на option

           ‘type’ => ‘theme_mod’,

           // Для того чтобы ограничить права настройки у пользователей.

           ‘capability’ => ‘edit_theme_options’,

           // Можно добавить любой ID, чтобы потом включать в теме

           //с помощью функции add_theme_support( ‘theme_support_setting_id’ ).

           ‘theme_supports’ => »,

         // Протокол изменения настройки в превью

           ‘transport’ => ‘postMessage’,

           // Колбэк для валидации информации перед записью в БД,

           // можно использовать встроенные, например esc_html и esc_url.

           ‘sanitize_callback’ => »,

           // В основном to_json.

           ‘sanitize_js_callback’ => »,

       ) );

    Важно: Не используйте идентификатор настройки, который выглядит как widget_ *, sidebars_widgets [*], nav_menu [*] или nav_menu_item [*]. Эти шаблоны идентификационных настроек зарезервированы для экземпляров виджетов, боковых панелей, навигационных меню и элементов меню навигации соответственно. Если вам нужно использовать «виджет» в вашем идентификаторе настройки, используйте его как суффикс вместо префикса, например «homepage_widget».

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

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

    $wp_customize->add_setting( ‘accent_color’, array(

     ‘default’ => ‘#f72525’,

     ‘sanitize_callback’ => ‘sanitize_hex_color’,

    ) );

    Типичное использование плагинов:

    $wp_customize->add_setting( ‘myplugin_options[color]’, array(

     ‘type’ => ‘option’,

     ‘capability’ => ‘manage_options’,

     ‘default’ => ‘#ff2525’,

     ‘sanitize_callback’ => ‘sanitize_hex_color’, ) );

    Обратите внимание, что Customizer может обрабатывать параметры, хранящиеся в виде массивов с ключом для параметров, используя тип параметра. Это позволяет хранить несколько настроек в одной опции, которая не является модом темы. Чтобы получить и использовать значения параметров Customizer, используйте get_theme_mod() и get_option() с идентификатором настройки:

    function my_custom_css_output() {

     echo ‘<style type=»text/css» id=»custom-theme-css»>’ .

     get_theme_mod( ‘custom_theme_css’, » ) . ‘</style>’;

     echo ‘<style type=»text/css» id=»custom-plugin-css»>’ .

     get_option( ‘custom_plugin_css’, » ) . ‘</style>’; }

    add_action( ‘wp_head’, ‘my_custom_css_output’);

    Controls

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

    Добавление нового Controls

    Чтобы добавить новый элемент управления в свой Customizer, вам нужно вызвать метод $wp_customize->add_control().

    Использование

    $wp_customize->add_control($id, $args);

    Параметры

    $id

    (string) (required) Строка или конкретный объект customization controller .

    Default: None

    $args

    (array) (required) Не используемый, если $id — объект control, иначе экземпляр WP_Customize_Control() (простой текст) создается, используя указанные параметры.

    Default: None

    Аргументы

    label

    Необязательный. Отображаемая метка. Пример: ‘label’ => __( ‘Base Color Scheme’, ‘twentyfifteen’ ),

    description

    Необязательный. Пример: ‘description’ => __( ‘Applied to the header on small screens and the sidebar on wide screens.’, ‘twentyfifteen’ ),

    section

    Любой доступной или определенные пользователем section. Некоторые доступны section: themes, title_tagline, colors, header_image(только при включении), background_image (только при включении), static_front_page. Пример: ‘section’ => ‘colors’,

    priority

    Необязательный. themes (0), title_tagline (20), colors (40), header_image (60), background_image (80), static_front_page (120).

    type

    Поддерживаемые типы: text, checkbox, radio, select, textarea, dropdown-pages, email, url, number, hidden, и date. Пример: ‘type’ => ‘textarea’,

    settings

    Необязательный. your_setting_id

    Classes

    WP_Customize_Control()

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

    WP_Customize_Color_Control()

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

    WP_Customize_Upload_Control()

    Создает элемент управления, который позволяет пользователям загружать медиа.

    WP_Customize_Image_Control()

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

    WP_Customize_Background_Image_Control()

    Создает элемент управления, позволяющий пользователям выбирать новое фоновое изображение.

    WP_Customize_Header_Image_Control()

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

    Пример 1

    $wp_customize->add_control( new WP_Customize_Color_Control(

    $wp_customize,

    ‘your_control_id’,

    array(

    ‘label’      => __( ‘Header Color’, ‘mytheme’ ),

    ‘section’    => ‘your_section_id’,

    ‘settings’   => ‘your_setting_id’,

           ‘priority’   => 1

    )

    ));

    Пример 2

    $wp_customize->add_control(

    ‘your_control_id’,

    array(

    ‘label’    => __( ‘Control Label’, ‘mytheme’ ),

    ‘section’  => ‘your_section_id’,

    ‘settings’ => ‘your_setting_id’,

    ‘type’     => ‘radio’,

    ‘choices’  => array(

    ‘left’  => ‘left’,

    ‘right’ => ‘right’,

    ),

    )

    );

    // здесь можно создавать экземпляр разных классов, в

    // дефолтном виде это WP_Customize_Control, также есть:

    // WP_Customize_Color_Control, WP_Customize_Upload_Control,

    // WP_Customize_Image_Control, WP_Customize_Background_Image_Control,

    // WP_Customize_Header_Image_Control

    $wp_customize->add_control( new WP_Customize_Control(

       $wp_customize,

       ‘your_setting_id’,

       array(

           // ID настройки, которую контролирует этот элемент.

           ‘settings’    => ‘your_setting_id’,

           // Приоритет, можно менять для того чтобы переставлять

           // контролы местами.

           ‘priority’    => 10,

           // ID секции, в которую стоит поместить контрол.

           ‘section’     => »,

           // Заголовок для элемента.

           ‘label’       => »,

           // Дополнительное описание под заголовком.

           ‘description’ => »,

           // Тип элемента. Может быть нескольких вариантов: checkbox,

           // radio, select, textarea, dropdown-pages.

           ‘type’        => ‘text’,

           // Массив вариантов для radio и select типов.

           ‘choices’     => »,

       ) );

    Sections

    Sections представляют собой контейнеры пользовательского интерфейса для controls Customizer. Хотя вы можете добавлять пользовательские controls к основным Sections, если у вас есть несколько опций, вы можете добавить один или несколько Sections. Используйте метод add_section объекта WP_Customize_Manager, чтобы добавить Section

    Использование

    function mytheme_add_section( ) {

      $wp_customize->add_section($id, $args);

    }

    add_action( ‘customize_register’, ‘mytheme_add_section’ );

    Параметры

    $id

    (string) (required) Уникальный идентификатор .

    Default: None

    $args

    (array) (required) Ассоциативный массив, содержащий аргументы для setting.

    Default: None

    Аргументы

    title

    Имя, видимое в section контроллер.

    priority

    Управляет порядком, в котором этот section появляется в боковой панели Theme Settings.

    description

    Этот необязательный аргумент может добавить дополнительное описание для section.

    active_callback

    Этот необязательный аргумент может отображать или скрывать раздел на основе просматриваемой section. Пример: ‘active_callback’ => ‘is_front_page’.

    Пример

    $wp_customize->add_section( ‘your_section_id’,

       array(

           // Приоритет, можно менять для того

           // чтобы переставлять панели местами.

           ‘priority’       => 160,

           // Варианты Capabilities для того чтобы

           // ограничить права настройки у пользователей.

           ‘capability’     => ‘edit_theme_options’,

           // Можно добавить любой ID, чтобы потом

           // включать в теме с помощью функции

           // add_theme_support( ‘theme_support_setting_id’ ).

           ‘theme_supports’ => »,

           // Заголовок для панели.

           ‘title’          => »,

           // Дополнительное описание под заголовком.

           ‘description’    => »,

           // Тип панели. Можно добавить любое слово,

           //оно отразится в классе для этой панели и примет

           //вид control-panel-default при значении default.

           ‘type’           => ‘default’,

       ) );

    Panels

    API Customizer Panels был представлен в WordPress 4.0 и позволяет разработчикам создавать дополнительный уровень иерархии за пределами controls и sections. Помимо простого группирования controls и sections, Panels предназначены для обеспечения различных контекстов для Customizer, таких как Customizing Widgets, меню или, возможно, в будущем редактирование posts. Между section и panel объектами существует важное техническое различие.

    Темы не должны регистрировать свои Panels в большинстве случаев. Sections не должны быть вложены в Panels, и каждый section должен содержать несколько controls Panels предназначены как контексты для целых функций, таких как Widgets, Menus или Posts, а не как обертки для общих section. Если вы абсолютно должны использовать Panel, вы обнаружите, что API почти идентичен как Sections:.

    $wp_customize->add_panel( ‘menus’, array(

     ‘title’ => __( ‘Menus’ ),

     ‘description’ => $description, // Include html tags such as <p>.

     ‘priority’ => 160, // Mixed with top-level-section hierarchy.

    ) );

    $wp_customize->add_section( $section_id , array(

     ‘title’ => $menu->name,

     ‘panel’ => ‘menus’,

    ) );

    Panels должны содержать хотя бы один section, который должен содержать хотя бы один controls, который будет отображаться. Как видно из вышеприведенного примера, section можно добавлять в panel аналогично тому, как controls добавляются в section. Однако, в отличие от controls, если параметр Panel пуст при регистрации section, он будет отображаться в основном настраивающем контексте верхнего уровня, так как большинство section не должны содержаться в panel.

    Пример

    customize_register

    На этот экшен мы вешаем тот самый callback, который будет вносить изменения в глобальную переменную $wp_customize. Это PHP объект, который является экземпляром класса WP_Customize_Manager, у которого есть много любопытных методов по добавлению и изменению всякого:

    • WP_Customize_Manager->add_setting() (добавить новую настройку) и WP_Customize_Manager->get_setting() (изменить аргументы уже существующей настройки).
    • WP_Customize_Manager->add_control() (добавить новый HTML-элемент) и WP_Customize_Manager->get_control() (изменить аргументы уже существующего контрола). Каждый контрол должен быть привязан к конкретной настройке.
    • WP_Customize_Manager->add_section() (добавить новую секцию, объединяющую несколько контролов) и WP_Customize_Manager->get_section() (изменить аргументы уже существующей секции).
    • WP_Customize_Manager->add_panel() (добавить новую «панель», объединяющую несколько секций) и WP_Customize_Manager->get_panel() (изменить настройки уже существующей).

    add_action(‘customize_register’,’my_customize_register’);

    function my_customize_register( $wp_customize ) {

       //var_dump(‘<pre>’, $wp_customize ,'</pre>’);

       /*$wp_customize->add_panel();

       $wp_customize->get_panel();

       $wp_customize->remove_panel();

       $wp_customize->add_section();

       $wp_customize->get_section();

       $wp_customize->remove_section();

       $wp_customize->add_setting();

       $wp_customize->get_setting();

       $wp_customize->remove_setting();

       $wp_customize->add_control();

       $wp_customize->get_control();

       $wp_customize->remove_control();*/

       // Section

       $wp_customize->add_section(‘step_by_step_my_section’, array(

           ‘title’ => __(‘My section title’, STEPBYSTEP_THEME_TEXTDOMAIN),

           ‘priority’ => 30,

           ‘description’ => __(‘My section description’, STEPBYSTEP_THEME_TEXTDOMAIN),

       ));

       // Setting

       $wp_customize->add_setting(«step_by_step_my_settings», array(

           «default» => «»,

           «transport» => «postMessage»,

       ));

       // Control

       $wp_customize->add_control(new WP_Customize_Control(

           $wp_customize,

           «step_by_step_my_settings»,

           array(

               «label» => __(«Title», STEPBYSTEP_THEME_TEXTDOMAIN),

               «section» => «step_by_step_my_section»,

               «settings» => «step_by_step_my_settings»,

               «type» => «textarea»,   )   ));

       // Setting

       $wp_customize->add_setting(«step_by_step_my_test_settings», array(

           «default» => «»,

           «transport» => «postMessage»,

       ));

       // Control

       $wp_customize->add_control( ‘step_by_step_my_test_settings’, array(

           ‘label’       => __(«Label», STEPBYSTEP_THEME_TEXTDOMAIN),

           ‘section’     => ‘step_by_step_my_section’,

           ‘type’        => ‘input’,

           ‘description’ =>  __(«Description», STEPBYSTEP_THEME_TEXTDOMAIN)

       ) );

       // Setting

       $wp_customize->add_setting(«step_by_step_my_img_settings», array(

           «default» => «»,

           «transport» => «postMessage»,

       ));

       // Control

       $wp_customize->add_control(

           new WP_Customize_Image_Control(

               $wp_customize,

               ‘step_by_step_my_img_settings’,

               array(

                   ‘label’      => __( ‘Upload a logo’, STEPBYSTEP_THEME_TEXTDOMAIN),

                   ‘section’    => ‘step_by_step_my_section’,

                   ‘settings’   => ‘step_by_step_my_img_settings’,

                   //’context’    => ‘your_setting_context’ )  ) );

       // Setting

       $wp_customize->add_setting(«step_by_step_my_upload_settings», array(

           «default» => «»,

           «transport» => «postMessage»,   ));

       // Control

       $wp_customize->add_control(

           new WP_Customize_Upload_Control(

               $wp_customize,

               ‘step_by_step_my_upload_settings’,

               array(

                   ‘label’      => __( ‘Upload’, STEPBYSTEP_THEME_TEXTDOMAIN),

                   ‘section’    => ‘step_by_step_my_section’,

                   ‘settings’   => ‘step_by_step_my_upload_settings’

               )  )  );

       // Setting

       $wp_customize->add_setting(«step_by_step_my_color_settings», array(

           «default» => «»,

           «transport» => «postMessage»,

       ));

       // Control

       $wp_customize->add_control(

           new WP_Customize_Color_Control(

               $wp_customize,

               ‘step_by_step_my_color_settings’,

               array(

                   ‘label’      => __( ‘Color’, STEPBYSTEP_THEME_TEXTDOMAIN),

                   ‘section’    => ‘step_by_step_my_section’,

                   ‘settings’   => ‘step_by_step_my_color_settings’

               )   )   ); }

    customize_preview_init

    В аргументах для настроек (setting) в аргументе transport. Его дефолтное значение refresh применяет настройку после перезагрузки.

    Второе значение аргумента transport — это postMessage. Но для него необходимо написать небольшую JavaScript функцию, закинуть ее в js-файл и подвесить в экшен customize_preview_init, после чего будет работать на странице Customizer:

    add_action( customize_preview_init, ‘my_customizer_script’ );

    function my_customizer_script() {

       wp_enqueue_script(

           ‘my-customizer-script’,

           get_template_directory_uri().’/js/my-customizer-script.js’, //$src,

           array( ‘jquery’, ‘customize-preview’ )

       ); }

    Вывод Settings значения

    <h1 class=»entry-title» itemprop=»headline» id=»step_by_step_my_settings»>

                       <?php

                           echo get_theme_mod(«step_by_step_my_settings»);

                       ?

    </h1>

    my-customizer-script.js

    (function($){

       wp.customize(«step_by_step_my_settings», function(value) {

           console.log(value)

           value.bind(function(newval) {

               $(«#step_by_step_my_settings»).html(newval);

           } );

       });

    })(jQuery);

    ещё примеры

    Categories : Word Press, www

    • « Previous Post
    • Next Post »

    Discussions

    1. admin 19 января, 2018

      добавил секцию «Мои настройки», в ней settings и control «Выбор цвета»

    • Word Press
      • #1. Introduction to WordPress
      • #2. WordPress Files Configuration
      • #3. Kernel Review. Codex
      • #4. Standards of Encoding
      • #5. Develop a plugin, introduction
      • #6. Hooks, Filters, InterNation
      • #7. Adding Admin Menus, JS, CSS
      • #8. HTTP API, Shortcodes, Transients
      • #9. Options API, Settings API
      • #10. Database API, $wpdb object
      • #11. Ajax. Widget API. Dashboard API
      • #12. Post Type. Taxonomies. Metadata
      • #13. Theme Development. Basics
      • #14. Loop. Template. WP_Query
      • Lecture #15. functions.php – I
      • Lecture #16. functions.php – II
      • #17. Child Theme. Shortcode. TinyMCE
      • #18. Frameworks. Blank Theme
      • #19. Framework. Underscores. Unyson
      • #20: Framework Unyson. Options
      • #21. Extensions, Components, Manifest
      • #22. Unyson: Built-in Extensions
      • #23. Unyson: Helpers, Filters & Actions
      • #24. WC: Installation & Updating
      • #25. WC: Settings & Options
      • #26. WC: Product Setup
      • #27. WC: Sell Products, Order
      • #28. WC: Theming
      • #29. WC: Extending
      • #30. WC: Extending
    • CSS
      • ПРОГРАММИРОВАНИЕ (CODING)
      • Emmet, ul, li, table, form
      • Style, hover, child
      • CSS Hat, font, background
      • Reset, margin, padding, float
      • Base64, relative, z-index
      • Google Fonts, PSD
      • Brackets, Bootstrap
      • Script, src, comments
      • jQuery, Slick Js, Tooltip
      • Bootstrap, Slick Nav, @media
      • Mobile Vew, Font Awesome
      • Flexbox, Slider
      • SASS, Bootstrap
    • Cron
    • Framework Yii2
    • React, Angular
    • JavaScript
    • Freelance

    Generic selectors
    Exact matches only
    Search in title
    Search in content
    Search in posts
    Search in pages
    Filter by Categories
    CSS
    JavaScript
    Word Press
    www

    2019 Rostyslav N Design © Уроки программирования