Учебники

Как сделать ваши темы и плагины WordPress более удобными

Как сделать ваши темы и плагины WordPress более удобными

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

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

  1. Указатели администратора
  2. Уведомления администратора
  3. Контекстная помощь
  4. Ссылки на панель администратора
  5. Действие плагина и мета-ссылки

Указатели администратора

Указатели администратора WordPress, представленные в версии 3.3, представляют собой наиболее агрессивный способ привлечь внимание пользователей, поэтому не сходите с ума от указателя. Тем не менее, если есть что-то, что вы обязательно должны сказать людям, которые только что установили / обновили вашу тему или плагин, указатели администратора WordPress – это то, что вам нужно.

Они очень просты в использовании, но плохо документированы на веб-сайте WordPress Codex. Вот краткое описание того, как работают указатели, а затем пример, в котором указатель добавляется рядом с меню «Настройки».

  • Тема или плагин могут регистрировать новые указатели, назначая каждому уникальный идентификатор.
  • Указатели отображаются для пользователей, пока они не нажмут ссылку «Закрыть».
  • Когда это происходит, идентификатор указателя добавляется к dismissed_wp_pointersмета-ключу пользователя, и указатель больше не отображается.

И пример, как и обещал:

/** * Adds a simple WordPress pointer to Settings menu */ function thsp_enqueue_pointer_script_style( $hook_suffix) { // Assume pointer shouldn't be shown $enqueue_pointer_script_style = false; // Get array list of dismissed pointers for current user and convert it to array $dismissed_pointers = explode( ',', get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true) ); // Check if our pointer is not among dismissed ones if( !in_array( 'thsp_settings_pointer', $dismissed_pointers) ) { $enqueue_pointer_script_style = true; // Add footer scripts using callback function add_action( 'admin_print_footer_scripts', 'thsp_pointer_print_scripts' ); } // Enqueue pointer CSS and JS files, if needed if( $enqueue_pointer_script_style) { wp_enqueue_style( 'wp-pointer' ); wp_enqueue_script( 'wp-pointer' ); } } add_action( 'admin_enqueue_scripts', 'thsp_enqueue_pointer_script_style' ); function thsp_pointer_print_scripts() { $pointer_content = "<h3>Stop looking for it, it is right here!</h3>"; $pointer_content .= "<p>If you ever activated a plugin, then had no idea where its settings page is, raise your hand.</p>"; ?> <script type="text/javascript"> //<![CDATA[ jQuery(document).ready( function($) { $('#menu-settings').pointer({ content: '<?php echo $pointer_content; ?>', position: { edge: 'left', // arrow direction align: 'center' // vertical alignment }, pointerWidth: 350, close: function() { $.post( ajaxurl, { pointer: 'thsp_settings_pointer', // pointer ID action: 'dismiss-wp-pointer' }); } }).pointer('open'); }); //]]> </script> <?php } ?>

В результате получится что-то вроде этого:

Как сделать ваши темы и плагины WordPress более удобными

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

Уведомления администратора

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

Как сделать ваши темы и плагины WordPress более удобными

/** * Add admin notices */ function thsp_admin_notices() { global $current_user; $userid = $current_user->ID; global $pagenow; // This notice will only be shown in General Settings page if ($pagenow == 'options-general.php') { echo '<div class="updated"> <p>This is an "updated" notice.</p> </div>'; } // Only show this notice if user hasn't already dismissed it // Take a good look at "Dismiss" link href attribute if (!get_user_meta( $userid, 'ignore_sample_error_notice') ) { echo '<div class="error"> <p>This is an "error" notice. <a href="?dismiss_me=yes">Dismiss</a>.</p> </div>'; } } add_action( 'admin_notices', 'thsp_admin_notices' );

Первое уведомление в этом примере будет отображаться только на странице общих настроек. Второй виден только тем пользователям, которые его не закрыли. Как видите, он проверяет мета-поле пользователя ignore_sample_error_notice текущего пользователя и отображается только в том случае, если это поле пусто. Так как же добавить мета-поле пользователя, когда он нажимает «Закрыть»? Легко:

/** * Add user meta value when Dismiss link is clicked */ function thsp_dismiss_admin_notice() { global $current_user; $userid = $current_user->ID; // If "Dismiss" link has been clicked, user meta field is added if (isset( $_GET['dismiss_me']) && 'yes' == $_GET['dismiss_me']) { add_user_meta( $userid, 'ignore_sample_error_notice', 'yes', true ); } } add_action( 'admin_init', 'thsp_dismiss_admin_notice' );

Мы подключаемся к admin_initдействию и проверяем, установлен ли dismiss_meпараметр GET. Поскольку атрибут href для нашей ссылки «Отклонить» ?dismiss_me=yesпоявляется после того, как пользователь щелкает по ней, добавляется мета-поле пользователя, и до свидания.

Контекстная помощь


Как сделать ваши темы и плагины WordPress более удобными

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

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

/** * Add settings page, under Settings menu */ function thsp_add_settings_page() { global $thsp_settings_page; $thsp_settings_page = add_options_page( 'Our Settings Page', 'Our Settings Page', 'manage_options', 'thsp_settings_page', 'thsp_show_settings_page' ); // Check if WP version is 3.3 or higher, add contextual help global $wp_version; if (version_compare( $wp_version, '3.3') >= 0) { add_action( 'load-'. $thsp_settings_page, 'thsp_add_help_tabs' ); } } add_action( 'admin_menu', 'thsp_add_settings_page' );

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

// Check if WP version is 3.3 or higher, add contextual help global $wp_version; if (version_compare( $wp_version, '3.3') >= 0) { add_action( 'load-'. $thsp_settings_page, 'thsp_add_help_tabs' ); }

Требуется WordPress 3.3 или выше, так как мы будем использовать функцию add_help_tab для добавления вкладок контекстной справки. Обратите внимание на то, что в хуке add_action есть переменная – 'load-'. $thsp_settings_page? Это гарантирует, что thsp_add_help_tabsфункция будет подключена только к странице настроек, которую мы только что зарегистрировали. Блестяще.

Теперь вот функция, которая добавляет вкладки справки:

/** * Callback function for contextual help, requires WP 3.3 */ function thsp_add_help_tabs() { global $wp_version; if (version_compare( $wp_version, '3.3') >= 0) { global $thsp_settings_page; $screen = get_current_screen(); // Check if current screen is settings page we registered // Don't add help tab if it's not if ($screen->id != $thsp_settings_page) return; // Add help tabs $screen->add_help_tab( array( 'id' => 'thsp_first_tab', 'title' => __( 'First tab', 'thsp_contextual_help' ), 'content' => __( ' <p>Yeah, you can even embed videos, nice!</p> <iframe src="http://www.youtube.com/embed/RBA-lH2a6E8"></iframe> ', 'thsp_contextual_help' ),) ); $screen->add_help_tab( array( 'id' => 'thsp_second_tab', 'title' => __( 'Second tab', 'thsp_contextual_help' ), 'content' => __( ' <p>I'm just a second tab that no one will ever click.</p> ', 'thsp_contextual_help' ),) ); // Set help sidebar $screen->set_help_sidebar( ' <ul> <li><a href="http://thematosoup.com">'. __( 'Our website', 'ts-fab' ). '</a></li> <li><a href="http://twitter.com/#!/thematosoup">Twitter</a></li> <li><a href="http://www.facebook.com/ThematoSoup">Facebook</a></li> <li><a href="http://plus.google.com/104360438826479763912">Google+</a></li> <li><a href="http://www.linkedin.com/company/thematosoup">LinkedIn</a></li> </ul> ' ); } }

Нам просто нужно проверить, установлена ​​ли версия WordPress 3.3 или выше, убедиться, что мы на правильной странице, и добавить вкладку справки с помощью функции add_help_tab и боковую панель справки с помощью set_help_sidebar. Все остальное – простой HTML.

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

Ссылки на панель администратора WordPress


Как сделать ваши темы и плагины WordPress более удобными

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

/** * Admin bar customization */ function thsp_admin_bar_links() { global $wp_admin_bar; // Adds a new submenu to an existing to level admin bar link $wp_admin_bar->add_menu( array( 'parent' => 'new-content', 'id' => 'install_plugin', 'title' => __( 'Plugin', 'thsp_admin_bar' ), 'href' => admin_url( 'plugin-install.php') ) ); // Adds a new top level admin bar link and a submenu to it $wp_admin_bar->add_menu( array( 'parent' => false, 'id' => 'custom_top_level', 'title' => __( 'Top Level', 'thsp_admin_bar' ), 'href' => '#') ); $wp_admin_bar->add_menu( array( 'parent' => 'custom_top_level', 'id' => 'custom_sub_menu', 'title' => __( 'Sub Menu', 'thsp_admin_bar' ), 'href' => '#') ); // Removes an existing top level admin bar link $wp_admin_bar->remove_menu( 'comments' ); } add_action( 'wp_before_admin_bar_render', 'thsp_admin_bar_links' );

Мы используем wp_before_admin_bar_renderобработчик действий для изменения объекта $ wp_admin_bar перед его рендерингом. В приведенном выше примере добавляется подменю к существующей ссылке верхнего уровня (Новая), новая ссылка верхнего уровня с другой вложенной внутри нее ссылкой (Верхний уровень, Подменю) и удаляется существующая ссылка верхнего уровня (Комментарии).


Как сделать ваши темы и плагины WordPress более удобными

На экране Dashboard Plugins отображается список всех установленных плагинов. Вы можете увидеть имя, описание, версию каждого плагина, ссылки на автора и веб-сайт плагина, а также ссылки на действия – комбинацию Активировать, Деактивировать, Редактировать, Удалить, в зависимости от того, активирован плагин или нет.

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

/** * Add action links in Plugins table */ add_filter( 'plugin_action_links_'. plugin_basename( __FILE__ ), 'thsp_plugin_action_links' ); function thsp_plugin_action_links( $links) { return array_merge( array( 'settings' => '<a href="'. admin_url( 'tools.php?page=our-settings-page.php' ). '">'. __( 'Settings', 'ts-fab' ). '</a>' ), $links ); }

Вы должны добавить этот код в основной файл вашего плагина (plugin-name.php), чтобы можно было использовать правильный хук. Например, если основным файлом вашего плагина действительно является plugin-name.php, будет использоваться перехватчик фильтра ‘plugin_action_links_plugin-name’, следя за тем, чтобы ссылки действий добавлялись только для вашего плагина. Еще один из тех волшебных моментов WordPress.

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

/** * Add meta links in Plugins table */ add_filter( 'plugin_row_meta', 'thsp_plugin_meta_links', 10, 2 ); function thsp_plugin_meta_links( $links, $file) { $plugin = plugin_basename(__FILE__); // create link if ($file == $plugin) { return array_merge( $links, array( '<a href="http://twitter.com/thematosoup">Follow us on Twitter</a>') ); } return $links; }

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

Заключение

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

Вам не нужно быть экспертом по юзабилити, чтобы создавать полезные продукты WordPress.

Есть ли другие техники, которыми вы хотели бы поделиться?

Источник записи: https://www.wpexplorer.com

Похожие сообщения
Учебники

Добавление отвлекающего чтения в WordPress

Учебники

Как исключить таксономию из типа сообщения WordPress

Учебники

Добавление пользовательских QuickTags WordPress

Учебники

Как добавить встроенную контентную рекламу в WordPress

Добавить комментарий