WP_Customize_Nav_Menu_Item_Control

💡 云策文档标注

概述

WP_Customize_Nav_Menu_Item_Control 是 WordPress 自定义器中的一个控件类，用于表示给定菜单项的名称字段。它继承自 WP_Customize_Control，专门处理导航菜单项的定制界面。

关键要点

继承自 WP_Customize_Control，控制类型为 'nav_menu_item'。
包含一个 WP_Customize_Nav_Menu_Item_Setting 类型的 setting 属性，用于关联菜单项设置。
主要方法包括构造函数 __construct、JS 模板 content_template、参数返回 json 和空渲染 render_content。
使用 Underscore.js 模板来渲染控制界面，不直接输出 HTML。

代码示例

public function content_template() {
    ?>
    <# if ( data.item_type_label ) { #>
        <span class="item-type">{{ data.item_type_label }}</span>
    <# } #>
    <# if ( data.is_post_type ) { #>
        <span class="dashicons dashicons-admin-post"></span>
    <# } #>
    <# if ( data.title ) { #>
        <span class="item-title {{ data.title ? '' : 'no-title' }}">{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}</span>
    <# } #>
    <?php
}

注意事项

render_content 方法为空，因为控制内容通过 JS 模板渲染，避免直接输出 HTML。
json 方法返回控制参数，包括关联的 post_id，用于前端处理。
自 WordPress 4.3.0 版本引入，是自定义器导航菜单功能的一部分。

📄 原文内容

Customize control to represent the name field for a given menu.

Description

Methods

Name	Description
WP_Customize_Nav_Menu_Item_Control::__construct	Constructor.
WP_Customize_Nav_Menu_Item_Control::content_template	JS/Underscore template for the control UI.
WP_Customize_Nav_Menu_Item_Control::json	Return parameters for this control.
WP_Customize_Nav_Menu_Item_Control::render_content	Don’t render the control’s content – it’s rendered with a JS template.

Source

class WP_Customize_Nav_Menu_Item_Control extends WP_Customize_Control {

	/**
	 * Control type.
	 *
	 * @since 4.3.0
	 * @var string
	 */
	public $type = 'nav_menu_item';

	/**
	 * The nav menu item setting.
	 *
	 * @since 4.3.0
	 * @var WP_Customize_Nav_Menu_Item_Setting
	 */
	public $setting;

	/**
	 * Constructor.
	 *
	 * @since 4.3.0
	 *
	 * @see WP_Customize_Control::__construct()
	 *
	 * @param WP_Customize_Manager $manager Customizer bootstrap instance.
	 * @param string               $id      The control ID.
	 * @param array                $args    Optional. Arguments to override class property defaults.
	 *                                      See WP_Customize_Control::__construct() for information
	 *                                      on accepted arguments. Default empty array.
	 */
	public function __construct( $manager, $id, $args = array() ) {
		parent::__construct( $manager, $id, $args );
	}

	/**
	 * Don't render the control's content - it's rendered with a JS template.
	 *
	 * @since 4.3.0
	 */
	public function render_content() {}

	/**
	 * JS/Underscore template for the control UI.
	 *
	 * @since 4.3.0
	 */
	public function content_template() {
		?>
		<div class="menu-item-bar">
			<div class="menu-item-handle">
				<span class="item-type" aria-hidden="true">{{ data.item_type_label }}</span>
				<span class="item-title" aria-hidden="true">
					<span class="spinner"></span>
					<span class="menu-item-title<# if ( ! data.title && ! data.original_title ) { #> no-title<# } #>">{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}</span>
					<# if ( 0 === data.depth ) { #>
						<span class="is-submenu" style="display: none;"></span>
					<# } else { #>
						<span class="is-submenu"></span>
					<# } #>
				</span>
				<span class="item-controls">
					<button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text">
					<# if ( 0 === data.depth ) { #>
						
					<# } else if ( 1 === data.depth ) { #>
						
					<# } else { #>
						
					<# } #>
					</span><span class="toggle-indicator" aria-hidden="true"></span></button>
					<button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text">
					
					</span></button>
				</span>
			</div>
		</div>

		<div class="menu-item-settings" id="menu-item-settings-{{ data.menu_item_id }}">
			<# if ( 'custom' === data.item_type ) { #>
			<p class="field-url description description-thin">
				<label for="edit-menu-item-url-{{ data.menu_item_id }}">
					<br />
					<input class="widefat code edit-menu-item-url" type="text" id="edit-menu-item-url-{{ data.menu_item_id }}" name="menu-item-url" />
				</label>
			</p>
		<# } #>
			<p class="description description-thin">
				<label for="edit-menu-item-title-{{ data.menu_item_id }}">
					<br />
					<input type="text" id="edit-menu-item-title-{{ data.menu_item_id }}" placeholder="{{ data.original_title }}" class="widefat edit-menu-item-title" name="menu-item-title" />
				</label>
			</p>
			<p class="field-link-target description description-thin">
				<label for="edit-menu-item-target-{{ data.menu_item_id }}">
					<input type="checkbox" id="edit-menu-item-target-{{ data.menu_item_id }}" class="edit-menu-item-target" value="_blank" name="menu-item-target" />
					
				</label>
			</p>
			<p class="field-title-attribute field-attr-title description description-thin">
				<label for="edit-menu-item-attr-title-{{ data.menu_item_id }}">
					<br />
					<input type="text" id="edit-menu-item-attr-title-{{ data.menu_item_id }}" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title" />
				</label>
			</p>
			<p class="field-css-classes description description-thin">
				<label for="edit-menu-item-classes-{{ data.menu_item_id }}">
					<br />
					<input type="text" id="edit-menu-item-classes-{{ data.menu_item_id }}" class="widefat code edit-menu-item-classes" name="menu-item-classes" />
				</label>
			</p>
			<p class="field-xfn description description-thin">
				<label for="edit-menu-item-xfn-{{ data.menu_item_id }}">
					<br />
					<input type="text" id="edit-menu-item-xfn-{{ data.menu_item_id }}" class="widefat code edit-menu-item-xfn" name="menu-item-xfn" />
				</label>
			</p>
			<p class="field-description description description-thin">
				<label for="edit-menu-item-description-{{ data.menu_item_id }}">
					<br />
					<textarea id="edit-menu-item-description-{{ data.menu_item_id }}" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description">{{ data.description }}</textarea>
					<span class="description"></span>
				</label>
			</p>

			

			<div class="menu-item-actions description-thin submitbox">
				<# if ( ( 'post_type' === data.item_type || 'taxonomy' === data.item_type ) && '' !== data.original_title ) { #>
				<p class="link-to-original">
					{{ data.original_title }}</a>' );
					?>
				</p>
				<# } #>

				<button type="button" class="button-link button-link-delete item-delete submitdelete deletion"></button>
				<span class="spinner"></span>
			</div>
			<input type="hidden" name="menu-item-db-id[{{ data.menu_item_id }}]" class="menu-item-data-db-id" value="{{ data.menu_item_id }}" />
			<input type="hidden" name="menu-item-parent-id[{{ data.menu_item_id }}]" class="menu-item-data-parent-id" value="{{ data.parent }}" />
		</div><!-- .menu-item-settings-->
		<ul class="menu-item-transport"></ul>
		setting->post_id;

		return $exported;
	}
}

View all references View on Trac View on GitHub

Uses	Description
WP_Customize_Control`wp-includes/class-wp-customize-control.php`

Changelog

Version	Description
4.3.0	Introduced.

云策 WordPress 开发者社区

类文档

WP_Customize_Nav_Menu_Item_Control

概述

关键要点

代码示例

注意事项

Description

See also

Methods

Source

Changelog

类文档

概述

关键要点

代码示例

注意事项

Description

See also

Methods

Source

Related

Changelog