Es gibt so viele Tutorials im Web, die erklären, wie man WordPress-Menüs ein benutzerdefiniertes Feld hinzufügt, aber die meisten von ihnen behandeln die Verwendung des Standard-CSS-Felds des Standard-Beschreibungsfelds. Keiner von ihnen bietet eine echte Methode, um Menüs ein echtes neues Feld hinzuzufügen. Heute werden wir also ein einfaches Plugin erstellen, das jedem WordPress-Menü ein „Untertitel“-Feld hinzufügt.
Hier ist das Endergebnis in der WordPress-Administration:
Schritt 1: Die Plugin-Erstellung
Los geht’s, wie wir in einem meiner vorherigen Beiträge gesehen haben, ist das Erstellen eines Plugins nicht komplex. Sie müssen nur einen neuen Ordner unter wp-content/plugins erstellen und ihn „sweet-custom-menu“ nennen und darin eine Datei namens „sweet-custom-menu.php“ erstellen. Öffnen Sie dann diese Datei und fügen Sie diesen Code hinzu:
<?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
*/
Dieser Code ist alles, was wir brauchen, um ein neues Plugin zu definieren. Jetzt werden wir eine benutzerdefinierte PHP-Klasse erstellen, die einen Konstruktor und die Funktionen enthält, die wir benötigen, damit das Plugin gut funktioniert.
So erstellen Sie die Klasse:
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();
Die letzte Zeile instanziiert die Klasse und fügt die gesamte Klasse in eine globale Variable ein.
Schritt 2: Filter für benutzerdefinierte Felder hinzufügen
Da wir nun unsere Klasse haben, werden wir benutzerdefinierte Funktionen erstellen. Die erste hinzuzufügende Funktion ist diejenige, die das benutzerdefinierte Feld „Untertitel“ registriert, das als erweitertes Menüattribut aufgenommen werden soll. Um dies zu tun, hier die zu erstellende Funktion, platzieren Sie diesen Code anstelle von /* Alle Funktionen werden hier platziert */ :
/**
* 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;
}
Dann müssen wir WordPress anweisen, unsere Funktion zu berücksichtigen, also fügen Sie den folgenden Code in die Funktion __construct() ein:
// add custom menu fields to menu
add_filter( 'wp_setup_nav_menu_item', array( $this, 'rc_scm_add_custom_nav_fields' ) );
Schritt 3: Benutzerdefinierte Felder speichern
Auch wenn das benutzerdefinierte Feld „Untertitel“ nicht wirklich existiert, müssen wir eine Funktion erstellen, die ihren Wert bei der Menübearbeitung speichert. Menüelemente sind in zwei benutzerdefinierten Posttypen unterteilt, sodass wir die benutzerdefinierten Posttyp-APIs und die post_meta-Methode verwenden können. Um den Wert des benutzerdefinierten Menüfelds zu speichern, fügen Sie diese Funktion unter rc_scm_add_custom_nav_fields() hinzu:
/**
* 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 );
}
}
In dieser Funktion prüfen wir, ob der benutzerdefinierte Feldwert aus dem Formular gesendet wird, das wir gerade erstellen, und speichern dann einfach seinen Wert. Jetzt müssen wir die Funktion dem entsprechenden Hook hinzufügen. Fügen Sie dazu diese Zeilen zu __construct() hinzu:
// save menu custom fields
add_action( 'wp_update_nav_menu_item', array( $this, 'rc_scm_update_custom_nav_fields'), 10, 3 );
Schritt 4: Das Formular
Wenn Sie diesem Tutorial Schritt für Schritt gefolgt sind, werden Sie wahrscheinlich vermuten, dass wir das Formular, das unser Untertitelfeld enthalten muss, nicht erstellt haben. Dieser Teil ist etwas komplexer als die vorherigen. Diesmal müssen wir uns damit auseinandersetzen Gehhilfe. Ich ermutige Sie wirklich, den Kodex über die Walker-Klasse zu lesen. Dies wird Ihnen wirklich helfen zu verstehen, was sie ist und was sie tut. Übrigens gibt es überall im Internet viele tolle Tutorials, die dir mehr Details über diese Klasse geben, also schau sie dir bitte an! In den meisten Fällen werden Walker verwendet, um die HTML-Ausgabe eines Menüs zu ändern. Hier arbeiten wir an dem Ausgabeformular für das Admin-Menü. Fügen Sie einfach diese Funktion zu Ihrer Hauptklasse hinzu:
/**
* 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';
}
und dann das zum Konstruktor:
// edit menu walker
add_filter( 'wp_edit_nav_menu_walker', array( $this, 'rc_scm_edit_walker'), 10, 2 );
Dadurch wird das standardmäßige Admin-Bearbeitungsmenüformular durch ein benutzerdefiniertes ersetzt. Nachdem der Filter hinzugefügt wurde, kopieren Sie diese beiden Zeilen unten in die Datei sweet-custom-menu.php außerhalb der Klasse rc_sweet_custom_menu:
include_once( 'edit_custom_walker.php' );
include_once( 'custom_walker.php' );
Wir sind dabei, zwei Dateien hinzuzufügen. Die erste „edit_custom_walker.php“ ist diejenige, die das Standardformular zum Bearbeiten des Menüs ändert. In dieser Datei werden wir das Untertitelfeld hinzufügen.
Der zweite ist der welker, der im Frontend der Website verwendet wird. Dies ist die Datei, die die Menüausgabe für Ihre Besucher ändert.
Da die „edit_custom_walker.php“ etwas lang ist, werde ich nicht den gesamten Code einfügen. Sie können den ganzen Code hier ansehen. Der einzige Code, den ich hinzugefügt habe, ist von Zeile 174 bis Zeile 185. Hier ist der hinzugefügte Code:
<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>
Wenn Sie dem Menü weitere Felder hinzufügen möchten, duplizieren Sie diese Zeilen einfach und kopieren Sie sie und fügen Sie sie ein. Sobald dieser Schritt abgeschlossen ist, sollte das Menü in der Verwaltung funktionieren. Sie sollten jetzt das neue Feld „Untertitel“ sehen können, wenn Sie einem Menü ein neues Element hinzufügen. Wenn dies nicht der Fall ist, führen Sie das Tutorial Schritt für Schritt durch. Es ist jetzt an der Zeit, den Untertitelwert auf dem Frontend auszugeben.
Schritt 5: Benutzerdefinierte Feldausgabe
Wenn in der Administration alles funktioniert, möchten Sie jetzt wahrscheinlich den Untertitel im Frontend anzeigen. Öffnen Sie custom_walker.php und fügen Sie diesen Code hinzu:
<?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 );
}
}
Dieser Code ist ziemlich Standard. Wichtig ist hier nur diese Zeile:
$item_output .= ' '.$item->subtitle.'';
Schritt 6: Rufen Sie den Walker an!
Im letzten Schritt müssen Sie die Datei header.php in Ihrem Theme-Ordner öffnen. Hier wird die meiste Zeit das Menü aufgerufen. Wenn nicht, wenden Sie sich an den Theme-Ersteller, um zu erfahren, wo es heißt.
Finden Sie die wp_nav_menu() Funktion.
Dann fügen Sie einfach den walker-Parameter hinzu:
'walker' => new rc_scm_walker
Das ist es ! Ich hoffe, es hat Ihnen Spaß gemacht, einem WordPress-Menü ein benutzerdefiniertes Feld hinzuzufügen. Sie können diesen Code jetzt ein wenig ändern, um andere Felder wie Kontrollkästchen, Dropdown-Menüs, Textbereiche usw. hinzuzufügen. Fühlen Sie sich frei, einen Kommentar im Kommentarbereich hinzuzufügen. Wenn Sie einen Fehler gefunden haben, wenn Sie ihn verbessern usw. …
Süßes benutzerdefiniertes Menü-Plugin
Wenn Sie dieses Tutorial implementieren möchten, können Sie das „Sweet Custom Menu Plugin“ herunterladen, das ich erstellt habe, um Ihnen den Einstieg zu erleichtern. Genießen!