Учебники

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

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

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

Вот каков конечный результат в администрировании WordPress:

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

Шаг 1: Создание плагина

Давайте, как мы видели в одном из моих предыдущих постов, создание плагина не сложно. Вам просто нужно создать новую папку в wp-content / plugins и назвать ее «sweet-custom-menu» и создать внутри нее файл с именем «sweet-custom-menu.php». Затем откройте этот файл и добавьте этот код:

<?php /* Plugin Name: Sweet Custom Menu Plugin URL: http://remicorson.com/sweet-custom-menu Description: A little plugin to add attributes to WordPress menus Version: 0.1 Author: Remi Corson Author URI: http://remicorson.com Contributors: corsonr Text Domain: rc_scm Domain Path: languages */

Этот код – все, что нам нужно для определения нового плагина. Теперь мы собираемся создать собственный класс PHP, содержащий конструктор и функции, которые нам понадобятся для правильной работы плагина.

Вот как создать класс:

class rc_sweet_custom_menu { /*--------------------------------------------* * Constructor *--------------------------------------------*/ /** * Initializes the plugin by setting localization, filters, and administration functions. */ function __construct() { } // end constructor /* All functions will be placed here */ } // instantiate plugin's class $GLOBALS['sweet_custom_menu'] = new rc_sweet_custom_menu();

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

Шаг 2. Добавление фильтра настраиваемых полей

Теперь, когда у нас есть класс, мы собираемся создать собственные функции. Первая добавляемая функция – это функция, которая зарегистрирует настраиваемое поле «подзаголовок», которое мы хотим включить в качестве атрибута расширенного меню. Для этого поместите сюда создаваемую функцию, поместите этот код вместо / Здесь будут размещены все функции /:

/** * Add custom fields to $item nav object * in order to be used in custom Walker * * @access public * @since 1.0 * @return void */ function rc_scm_add_custom_nav_fields( $menu_item) { $menu_item->subtitle = get_post_meta( $menu_item->ID, '_menu_item_subtitle', true ); return $menu_item; }

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

// add custom menu fields to menu add_filter( 'wp_setup_nav_menu_item', array( $this, 'rc_scm_add_custom_nav_fields') );

Шаг 3: Сохранение настраиваемых полей

Даже если настраиваемое поле «подзаголовок» на самом деле не существует, мы должны создать функцию, которая сохранит его значение при редактировании меню. Элементы меню находятся в двух настраиваемых типах сообщений, поэтому мы можем использовать API настраиваемых типов сообщений и метод post_meta. Итак, чтобы сохранить значение поля настраиваемого меню, добавьте эту функцию в rc_scm_add_custom_nav_fields ():

/** * Save menu custom fields * * @access public * @since 1.0 * @return void */ function rc_scm_update_custom_nav_fields( $menu_id, $menu_item_db_id, $args) { // Check if element is properly sent if (is_array( $_REQUEST['menu-item-subtitle'])) { $subtitle_value = $_REQUEST['menu-item-subtitle'][$menu_item_db_id]; update_post_meta( $menu_item_db_id, '_menu_item_subtitle', $subtitle_value ); } }

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

// save menu custom fields add_action( 'wp_update_nav_menu_item', array( $this, 'rc_scm_update_custom_nav_fields'), 10, 3 );

Шаг 4: Форма

Если вы следовали этому руководству шаг за шагом, вы, вероятно, догадаетесь, что мы не создали форму, которая должна содержать поле подзаголовка. Эта часть немного сложнее предыдущих. На этот раз нам предстоит иметь дело с Уокером. Я действительно рекомендую вам прочитать кодекс о классе ходунков, это действительно поможет вам понять, что это такое и для чего он нужен. Между прочим, в Интернете есть много отличных руководств, которые расскажут вам больше об этом классе, поэтому, пожалуйста, ознакомьтесь с ними! В большинстве случаев ходунки используются для изменения вывода HTML-кода меню. Здесь мы работаем над формой вывода меню администратора. Просто добавьте эту функцию в свой основной класс:

/** * Define new Walker edit * * @access public * @since 1.0 * @return void */ function rc_scm_edit_walker($walker,$menu_id) { return 'Walker_Nav_Menu_Edit_Custom'; }

а затем конструктору:

// edit menu walker add_filter( 'wp_edit_nav_menu_walker', array( $this, 'rc_scm_edit_walker'), 10, 2 );

Это заменяет стандартную форму меню редактирования администратора на настраиваемую. Теперь, когда фильтр добавлен, скопируйте эти две строки в конец файла sweet-custom-menu.php, вне класса rc_sweet_custom_menu:

include_once( 'edit_custom_walker.php' ); include_once( 'custom_walker.php' );

Мы собираемся включить два файла. Первый «edit_custom_walker.php» – это тот, который изменит форму по умолчанию для редактирования меню. Именно в этот файл мы добавим поле подзаголовка.

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

Поскольку «edit_custom_walker.php» немного длинный, я не собираюсь вставлять весь код. Вы можете просмотреть весь код здесь. Единственный код, который я добавил к нему, – это строка 174 – строка 185. Вот добавленный код:

<p class="field-custom description description-wide"> <label for="edit-menu-item-subtitle-<?php echo $item_id; ?>"> <?php _e( 'Subtitle' ); ?><br /> <input type="text" id="edit-menu-item-subtitle-<?php echo $item_id; ?>" class="widefat code edit-menu-item-custom" name="menu-item-subtitle[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->subtitle ); ?>" /> </label> </p>

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

Шаг 5: вывод настраиваемого поля

Если в администрировании все работает нормально, вы, вероятно, теперь хотите отображать субтитры во внешнем интерфейсе. Откройте custom_walker.php и добавьте в него следующий код:

<?php /** * Custom Walker * * @access public * @since 1.0 * @return void */ class rc_scm_walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ($depth )? str_repeat( "t", $depth ): ''; $class_names = $value = ''; $classes = empty( $item->classes )? array(): (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item) ); $class_names = ' class="'. esc_attr( $class_names ). '"'; $output .= $indent. '<li id="menu-item-'. $item->ID. '"'. $value. $class_names .'>'; $attributes =! empty( $item->attr_title )? ' title="'. esc_attr( $item->attr_title) .'"': ''; $attributes .=! empty( $item->target )? ' target="'. esc_attr( $item->target) .'"': ''; $attributes .=! empty( $item->xfn )? ' rel="'. esc_attr( $item->xfn) .'"': ''; $attributes .=! empty( $item->url )? ' href="'. esc_attr( $item->url) .'"': ''; $prepend = '<strong>'; $append = '</strong>'; $description =! empty( $item->description )? '<span>'.esc_attr( $item->description ).'</span>': ''; if($depth != 0) { $description = $append = $prepend = ""; } $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append; $item_output .= $description.$args->link_after; $item_output .= ' '.$item->subtitle.'</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }

Этот код довольно стандартный. Единственное, что здесь важно, это строка:

$item_output .= ' '.$item->subtitle.'';

Шаг 6: Вызовите Ходока!

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

Найдите функцию wp_nav_menu ().

Затем просто добавьте параметр walker:

'walker' => new rc_scm_walker

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

Плагин Sweet Custom Menu

Если вы хотите реализовать это руководство, вы можете загрузить «Sweet Custom Menu Plugin», который я создал для начала. Наслаждайтесь!

Получить плагин →

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

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

Как публиковать сообщения в блоге WordPress по электронной почте

Учебники

Как исправить внутреннюю ошибку сервера WordPress 500

Учебники

Полное руководство по управлению изображениями WordPress

Учебники

Полное руководство по управлению изображениями WordPress

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *