Advertisement
  1. Code
  2. Theme Development

Fügen Sie Ihrem Menü Links zum Archivtyp hinzu

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Eine häufige Anforderung, insbesondere für diejenigen, die benutzerdefinierte Beitragstypen wie "Nachrichten" oder "Events" erstellt haben, besteht darin, in ihrem Navigationsmenü einen Link zur Archivseite ihres Beitragstyps hinzuzufügen. Derzeit kann dies jedoch nur durch manuelle Eingabe der Archiv-URL des Beitragstyps erfolgen. Abgesehen davon, dass diese Lösung ziemlich unelegant ist, weist sie einige Nachteile auf: Sie wird nicht immer als "aktuell" angezeigt. Wenn Sie Ihre Permalink-Struktur ändern, kann der Link beschädigt werden. Das manuelle Hinzufügen der URLs ist mühsam und der Link wird nicht als "aktuell" angezeigt. aktuell ', wenn auf einem Beitrag dieses Beitragstyps.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie ein Plugin erstellen, das auf Ihrer Seite "Darstellung -> Menü" ein Meta-Feld erstellt, mit dem Sie Archivlinks vom Typ "Beitrag" hinzufügen können. Diese Links leiden nicht unter den oben genannten Nachteilen.


Schritt 1 Erstellen eines Plugins

Dieses Plugin heißt "My Post Type Archive Links". Zu diesem Zweck erstellen Sie zunächst einen Ordner mit dem Namen "my-post-type-archive-links" unter Ihrem Ordner /wp-content/plugins/ und erstellen darin eine Datei my-post-type-archive-links.php. Diese Datei ist die Haupt-Plugin-Datei. Wir werden es in eine Klasse einbinden - dies ist einfach so, dass wir uns keine Sorgen machen müssen, dass unsere Funktionsnamen mit WordPress oder anderen Plugins kollidieren: Wir müssen einfach sicherstellen, dass unser Klassenname eindeutig ist. Fügen Sie Folgendes zu my-post-type-archive-links.php hinzu

Alles in diesem Tutorial wird in dieser Klasse sitzen.


Schritt 2 Laden des Plugins

Wenn die Plugin-Datei geladen wird, wird die Klassenmethode load() ausgelöst. Diese Methode ist für das Hinzufügen von Aktionen und Filtern zu verschiedenen WordPress-Hooks verantwortlich. Wir werden sie in den folgenden Schritten durchgehen, aber es gibt auch eine nützliche Zusammenfassung. Fügen Sie unserer Klasse die folgende Methode hinzu:

Lassen Sie uns zusammenfassen, was jeder dieser Teile tut:

  1. Fügen Sie eine Meta-Box hinzu - Ziemlich selbsterklärend. Die Hook-Funktion ist für das Hinzufügen unserer Meta-Box verantwortlich.
  2. JavaScript in die Warteschlange stellen - Wir verwenden den Hook admin_enqueue_scripts, um unsere JavaScript-Datei in die Warteschlange zu stellen. Unser JavaScript löst beim Klicken auf "Zum Menü hinzufügen" eine AJAX-Anfrage aus.
  3. AJAX-Rückruf - Diese Funktion ist für die Bearbeitung der obigen AJAX-Anforderung verantwortlich. Die Menüelemente werden erstellt und dem Menü hinzugefügt.
  4. Einrichten des Menüelements - Dies stellt sicher, dass der Archivlink, wenn er in Ihrem Menü angezeigt wird, korrekt auf das Archiv des Beitragstyps verweist.
  5. Vielleicht aktuell machen - Immer wenn ein Menü angezeigt wird, werden seine Elemente durch einen Filter geleitet, und wir stellen sicher, dass die Klasse 'current-menu-item' dem entsprechenden Post-Typ-Link hinzugefügt wird.

Schritt 3 Hinzufügen der Metabox

Zuerst definieren wir unsere add_meta_box-Methode, die einfach die WordPress-Funktion add_meta_box() aufruft. Die Details dieser Funktion wurden bereits mehrfach behandelt. Wenn Sie sich jedoch nicht sicher sind, können Sie sie auf den Codex-Seiten nachlesen.

Als nächstes definieren wir die Meta-Box-Rückruffunktion, die für die Anzeige der Innenseiten der Metabox verantwortlich ist:

Diese Methode ruft einfach alle öffentlichen benutzerdefinierten Beitragstypen mit get_post_types() ab und durchläuft sie dann, um eine Liste von Kontrollkästchen zu erstellen. Jedes Kontrollkästchen hat den Namen des Beitragstyps als Wert. Im nächsten Schritt fügen wir Javascript hinzu, das ausgelöst wird, wenn ein Benutzer auf die Schaltfläche "Zum Menü hinzufügen" klickt.


Schritt 4 Das JavaScript

Wir möchten unser JavaScript nur auf der Seite "Darstellung - > Menüverwaltung" in die Warteschlange stellen. Wir haben den Hook admin_enqueue_scripts verwendet, der nur auf Admin-Seiten ausgelöst wird und den Hook der Seite als Argument übergibt. Der Haken für die Seite Darstellung -> Menü lautet nav-menus.php. Nach dem Einreihen unseres Skripts verwenden wir wp_localize_script, um das Nonce in unserem JavaScript verfügbar zu machen. Wir nehmen es in die AJAX-Anfrage auf, um zu überprüfen, ob die Aktion beabsichtigt war.

Im vorherigen Schritt wurde der Schaltfläche "Zum Menü hinzufügen/Add to Menu" die ID "submit-post-type-archives" zugewiesen. Wir verwenden jetzt jQuery, um auf diese Schaltfläche zu zielen, und senden beim Klicken eine AJAX-Anfrage, um den Menüpunkt zu erstellen und an das Menü anzuhängen. Das Folgende ist der einzige Teil dieses Tutorials, der außerhalb unserer Klasse lebt. Es sollte sich in einer Datei namens metabox.js in unserem Plug-In-Ordner befinden.

Beachten Sie die URL, an die wir die Anfrage senden: ajaxurl. Wir haben es nirgendwo definiert. Es ist eine globale Variable, die von WordPress nur auf der Administratorseite festgelegt wird und auf die Seite verweist, auf der WordPress AJAX-Anforderungen verarbeitet. Wenn Sie auf die Schaltfläche "Senden" klicken, erden die Namen der aktivierten Beitragstypen, eine eindeutige Aktion und Nonce an diese URL gesendet. Wenn WordPress die Anfrage empfängt, löst es den Hook wp_ajax_my-add-post-type-archive-links aus. Das Nonce ist eine Sicherheitsmaßnahme, um zu überprüfen, ob die Aktion beabsichtigt war.


Schritt 5 Der AJAX-Rückruf

Wir definieren nun die AJAX-Rückruffunktion ajax_add_post_type.

Lassen Sie uns diesen Rückruf nacheinander durchgehen. Zuerst überprüfen wir die Berechtigungen des Benutzers, überprüfen die Nonce und laden die Seite nav-menu.php (wir benötigen einige der Funktionen).

Anschließend erstellen wir für jeden ausgewählten Beitragstyp einen Menüpunkt. Wir überprüfen zunächst, ob der Post-Typ, den wir erhalten haben, vorhanden ist, indem wir den von get_post_type_object() zurückgegebenen Wert überprüfen. Wir können den Archivlink mit der Funktion get_post_type_archive_link() erhalten.

Menüelemente sind tatsächlich Posts vom Post-Typ 'nav_menu_item' mit integriertem Post-Meta, einschließlich Feldern, die sich auf 'url', 'type' und 'object' beziehen. Der 'type' des Elements ist normalerweise 'custom', 'post_type' oder 'taxonomy' - aber wir werden seinen Wert auf 'post_type_archive' setzen. Der Metawert 'objekt' des Elements wird normalerweise nur für Elemente vom Typ 'post_type' oder 'taxonomy' verwendet und bezieht sich auf den Beitragstyp oder die Taxonomie, auf die sich der Link bezieht. Wir werden dies verwenden, um den Beitragstyp des Archivlinks zu speichern.

Danach generieren wir einfach den HTML-Code, der dem Menü hinzugefügt wird. Wir verwenden das Array $item_ids, um ein Array von Menüelementen abzurufen und dieses an eine WordPress-Walker-Klasse zu übergeben, um die harte Arbeit für uns zu erledigen.


Schritt 6 Der Menüpunkt

Aufgrund eines Fehlers in WordPress wird die URL leider entfernt, wenn der Typ Ihres Elements nicht 'taxonomy', 'custom'oder 'post_type' ist. Um dem entgegenzuwirken, fügen wir die URL manuell hinzu, wenn in einem Menü ein Link 'post_type_archive' verwendet wird. Dadurch wird auch sichergestellt, dass der Archivlink auf dem neuesten Stand ist (falls Ihre Permalink-Struktur geändert wurde).


Schritt 7 Verbindung herstellen

Schließlich müssen wir den Artikel "aktuell" machen, wenn wir uns auf der entsprechenden Seite befinden. Ich möchte, dass der Archivlink für den Beitragstyp als aktuell hervorgehoben wird, wenn wir uns auf dieser Archivseite befinden oder einen einzelnen Beitrag dieses Typs anzeigen. Dazu überprüfe ich:

Um den Artikel aktuell zu machen, müssen wir lediglich den Klassen des Artikels, die in $item->classes gespeichert sind, den current-menu-item hinzufügen. Wir müssen dann die übergeordneten Elemente im Menü durchlaufen und die Klassen current_item_parent und current_item_ancestor hinzufügen. Schauen wir uns jedes Bit einzeln an:

Wir durchlaufen jeden Menüpunkt:

Wenn das Element nicht von 'post_type_archive' ist oder wenn es ist, aber wir möchten nicht, dass es 'aktuell' wird, fahren wir einfach mit dem nächsten Element fort. Denken Sie daran, dass für unsere Archivlinks der Beitragstyp als Objekt des Elements gespeichert wird. Also innerhalb der foreach-Schleife:

Wenn wir es aktuell machen wollen, geben wir ihm die entsprechende Klasse und nehmen dann seine Eltern in das Menü. Die übergeordneten Elemente eines Menüelements werden als Post-Meta mit dem Metaschlüssel _menu_item_menu_item_parent gespeichert.

Wir durchlaufen dann die Menüelemente und geben den Eltern und Vorfahren des "aktuellen" Elements die entsprechenden Klassen.

Diese Funktion zusammenstellen:

Sie müssen nur noch auf die Administrationsseite Ihres Plugins gehen und das Plugin aktivieren.


Abschluss

Es gibt immer Raum für Verbesserungen. Mit etwas jQuery können Sie beispielsweise einen Link "Alle auswählen" unter den Kontrollkästchen hinzufügen oder ein "Laden"-Symbol anzeigen, während AJAX verarbeitet wird. Jetzt ist dieses Plugin nicht die einfachste Lösung - aber es funktioniert gut und vermeidet die Fallstricke, einfach einen benutzerdefinierten Link hinzuzufügen. Das obige Plugin in seiner Gesamtheit befindet sich auf meinem GitHub. Wenn Sie Kommentare oder Vorschläge haben, können Sie gerne einen Kommentar hinterlassen oder mich über Twitter kontaktieren.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.