Как создать страницу настроек в WordPress

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

Решения, а не варианты

WordPress — это платформа, целью которой является демократизация Интернета. Это заявление, которое звучит очень красиво, но в то же время очень абстрактно, является способом сказать: «Мы хотим, чтобы каждый мог использовать WordPress». И, хотите верьте, хотите нет, страницы настроек могут быть и фактически во многих случаях являются барьером для этого. Не верите мне? Ну, сам WordPress говорит об этом:

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

Философия WordPress

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

Фильтры как альтернатива

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

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

Если вы используете фильтры, большинство ваших пользователей будут пользоваться поведением по умолчанию («решения», помните?), потому что они будут использовать плагин со значениями по умолчанию, установленными в ваших фильтрах, в то время как опытные пользователи будут иметь возможность изменять эти значения. решения через хуки (а так у вас тоже есть "варианты"). Лучший из двух миров!

Настройки WordPress

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

API настроек в WordPress

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

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

Создание новой страницы настроек

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

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

Как видите, единственное, что мы делаем с этой функцией, — это регистрируем новую страницу, которая появится в меню настроек WordPress, с ее заголовком, именем в меню и разрешениями, которые пользователь должен иметь для доступа к ней. , и ОС вкл. Последний аргумент, nelio_render_settings_page , — это имя функции, которая будет отвечать за рендеринг указанной страницы:

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

Саму страницу настроек создать относительно легко. Нам просто нужно добавить form , содержимое которой будет полуавтоматически генерироваться WordPress. С одной стороны, мы вызываем функцию settings_fields , которая, по сути, добавляет одноразовый номер в форму, чтобы сделать ее «безопасной». Затем мы просим WordPress отобразить все настройки, которые мы создали для нашего плагина, с помощью функции do_settings_sections . И, наконец, мы просто добавляем кнопку Отправить форму.

Фактические настройки на нашей странице настроек

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

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

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

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

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

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

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

По сути, все эти обратные вызовы извлекают текущее значение поля, которое они должны отображать (с помощью get_option ), и отображают HTML, который позволит пользователю установить то или иное значение (в этом примере поле input введите text или number ).

Каков конечный результат, спросите вы? Этот:

Последние мысли

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

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

• API настроек WP
• Генератор опций WordPress

И, конечно же, всегда есть возможность создать страницу настроек с помощью таких технологий, как React… но это уже совсем другая история, вам так не кажется?

Избранное изображение Римы Кручене на Unsplash.