Benutzerdefinierte WordPress-Beitragstypen – Weiterentwicklung

In unserer Serie über benutzerdefinierte WordPress-Beitragstypen haben wir uns bisher mit der Erstellung eines benutzerdefinierten Beitragstyps mit einem Plugin und der manuellen Erstellung eines benutzerdefinierten Beitragstyps durch das Schreiben Ihrer eigenen benutzerdefinierten Code-Snippets befasst. Wir haben uns auch angesehen, wie Sie eine grundlegende Konfiguration auf Ihre Beitragstypen anwenden können, damit Sie sie einfacher von Ihrem WordPress-Admin aus handhaben können. Wenn Sie diese Artikel noch nicht gelesen haben, sollten Sie unbedingt einen Blick darauf werfen!

In diesem Artikel gehen wir noch einen Schritt weiter, indem wir auf unseren zuvor erstellten benutzerdefinierten Beitragstypen aufbauen, um deren Funktionalität und Benutzerfreundlichkeit auf unserer Website zu erweitern. Wenn Sie mitmachen möchten, müssen Sie die benutzerdefinierten Beitragstypen erstellen, die wir in unserem Artikel „Benutzerdefinierte WordPress-Beitragstypen manuell erstellen“ erstellt haben. Stellen Sie also sicher, dass Sie dies zuerst getan haben, damit die folgenden Informationen sinnvoll sind.

Lass uns anfangen!

Benutzerdefinierte Beitragstypen überall anzeigen

Wie Sie gesehen haben, haben wir zuvor einen benutzerdefinierten Beitragstyp erstellt, um Rezepte auf unserer Website anzuzeigen. Dies ist ein perfektes Beispiel für eine Situation, in der benutzerdefinierte Beitragstypen eine unglaublich nützliche Möglichkeit sind, die Funktionalität unserer Website zu erweitern.

In unserem Beispiel konnten wir unsere Rezepte-Beiträge anzeigen, indem wir sie zu unserem Haupt-Website-Menü hinzufügten. Wir haben auch eine Archivansicht eingerichtet, die alle unsere rezeptbezogenen Beiträge auflistet. Dies sind großartige Optionen zum Anzeigen unserer neuen benutzerdefinierten Beitragstypen, aber was passiert, wenn wir diese Inhalte an anderer Stelle auf unserer Website anzeigen möchten?

Verwenden der WP_Query-Funktion zum Anzeigen benutzerdefinierter Beitragstypen

Um unsere neuen Rezeptbeiträge an Orten unserer Wahl auf unserer Website anzuzeigen, verwenden wir die WP_Query Funktion. In seinen Argumenten finden wir post_types , die in diesem Fall verwendet werden, da sie definieren, welche Post-Typen wir abfragen möchten. Zusammen mit ihm verwenden wir die Parameter publish und orderby , da wir die Recipes-Beiträge anzeigen möchten, die einen veröffentlichten Status haben, und sie nach absteigendem Datum ordnen möchten, um die neuesten zuerst anzuzeigen.

Stellen wir uns vor, wir möchten eine Liste unserer Rezept-Beiträge in unserer Website-Fußzeile über den Copyright-Informationen anzeigen. Dazu verwenden wir ein Code-Snippet, das in unserem Fall in die singular.php -Datei unterhalb des Anfangs des <footer> -Elements eingefügt werden muss.

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

In diesem Beispiel verwenden wir das aktuelle Standard-WordPress-Theme Twenty Twenty. Wenn Sie ein anderes Design als Twenty Twenty verwenden, sollten Sie die Datei bearbeiten, die den Inhalt der Fußzeile für Ihr Design enthält.

Mit dem hinzugefügten Code können wir unsere Website öffnen und wir sollten unsere Rezeptposts in unserer Fußzeile sehen.

Das Layout und Erscheinungsbild dieser Beiträge in Ihrer Fußzeile kann mithilfe von CSS so gestaltet werden, wie Sie es wünschen. Der beste Ort, um CSS hinzuzufügen, ist die Datei style.css , die sich im Hauptordner Ihres Designs befindet. Wir haben einige mögliche CSS, die Sie unten verwenden möchten.

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

Sobald dieses CSS gespeichert und die Seite aktualisiert wurde, sollte das Layout Ihrer Rezept-Posts in der Fußzeile so aussehen:

Die Bedeutung des Zurücksetzens des Loops

Sie haben vielleicht bemerkt, dass nach der Definition der erforderlichen Argumente im Code eine Post-Schleife mit der Funktion wp_reset_postdata() beginnt und endet. Die Verwendung dieser Funktion ist sehr wichtig und hier ist der Grund.

Wenn WordPress ein Seitenlayout erstellt, verwendet es eine globale $post Variable, die gut funktioniert, wenn es nur eine Schleife auf der Seite gibt. Jetzt, da wir unsere benutzerdefinierte Schleife hinzugefügt haben, überschreiben wir im Grunde die globale $post Variable, und wenn wir WordPress nicht mitteilen, dass die Schleife zurückgesetzt wird, wird sie von dort aus fortgesetzt, indem der benutzerdefinierte Post-Typ verwendet wird, den wir in unserer Schleife definiert haben.

Schauen wir uns an, wie dies in der Praxis funktioniert, indem wir den Beitragstitel unter dem obigen Code wie folgt wiederholen:

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

Wenn wir jetzt unsere Seite im Frontend unserer Website aktualisieren, sehen wir den Titel „Beitrag 1“ unter unseren letzten Rezepten.

Dies ist sinnvoll, da wir mit wp_reset_postdata(); auf die ursprüngliche Schleife zurücksetzen. Funktion.

Kommentieren Sie nun wp_reset_postdata(); aus deinem Code. Sie werden feststellen, dass the_title(); Der Code gibt den Titel „Rezept 1“ anstelle von „Post 1“ wieder.

Benutzerdefinierte Beitragstypen – Weitere Verwaltung

Um das Verhalten und Aussehen unserer benutzerdefinierten Beiträge weiter anzupassen, sehen wir uns einige Optionen an, die als Erweiterung zu dem Code hinzugefügt werden können, den wir in unserem vorherigen Artikel verwendet haben, um unseren Beitragstyp „Rezepte“ zu registrieren.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

Wir werden einige weitere Argumente hinzufügen, um:

1. Ändern Sie den URL-Slug des benutzerdefinierten Beitragstyps für Rezepte
2. Ändern Sie die Position des Admin-Menüs für den benutzerdefinierten Beitragstyp
3. Ändern Sie das Menüsymbol

Ändern des benutzerdefinierten Beitragstyp-URL-Slugs

Wenn wir einen Rezeptbeitrag erstellen und ihn „Rezept 1“ nennen, dann wäre die Standard-URL des Beitrags „Rezept 1“ so etwas wie https://mycompanyname.com/recipes/recipe-1/ , vorausgesetzt, die Permalinks sind auf „ Beitragsname' in unseren Permalink-Einstellungen.

Wenn Sie die Art und Weise ändern möchten, wie der benutzerdefinierte Rezepttyp in der URL angezeigt wird, können Sie das rewrite -Argument mit seinem slug Schlüssel verwenden.

Wie wir anhand der URL festgestellt haben, wäre der Standardwert, wenn dieses Argument übersprungen wird, das Label „Rezepte“ für den benutzerdefinierten Beitragstyp. Wenn wir dies zum Beispiel in my-home-recipes ändern wollen, müssen wir es überschreiben, indem wir unser Code-Snippet so bearbeiten, dass es so aussieht:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

Wenn Sie nun Permalinks speichern (den Permalink-Cache leeren) und Ihr Rezept erneut anzeigen, sollte Ihre URL https://mycompanyname.com/my-home-recipes/recipe-1/ lauten.

Beachten Sie, dass Sie, wenn Sie den Slug ändern, auch die Archiv-URL von /recipes/ auf /my-home-recipes/ auf der Hauptmenüseite ändern müssen.

Ändern der Positionierung des benutzerdefinierten Beitragstypmenüs

Wenn Sie das Rezeptmenü an eine andere Position verschieben möchten, können Sie das Argument menu_position wie folgt verwenden:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

Die Werte, die Sie für dieses Argument verwenden können, sind:

0 : ganz oben
5 : unter Beiträge
10 : unter Medien
15 : unten Links
20: unten Seiten
25 : unten Kommentare
60 : unter der ersten Lücke im Menü
65 : unten Plugins
70 : unter Benutzer
75 : unten Werkzeuge
80 : unter Einstellungen
100 : unter der zweiten Lücke im Menü

Der folgende Screenshot zeigt die Position des Menüs, wenn der Wert 5 zum Argument menu_position hinzugefügt wurde.

Ändern des benutzerdefinierten Beitragstyp-Menüsymbols

Derzeit verwendet das Rezeptmenü das Standardsymbol für Beiträge. Es wäre eine nette Geste, wenn es ein eigenes einzigartiges Symbol hätte. Um dies zu erreichen, können wir das Argument menu_icon verwenden.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

Um Ihr eigenes Symbol anzuzeigen, können Sie die vollständige URL des Speicherorts Ihres Menüsymbols einfügen (wie im obigen Code gezeigt) oder die WordPress Dashicons-Bibliothek verwenden, indem Sie den Klassennamen des Symbols hinzufügen. Die Icons mit den entsprechenden Klassen sehen Sie hier.

Wenn Sie beispielsweise das Essenssymbol auswählen, würden Sie es wie folgt zu Ihrem Code hinzufügen 'menu_icon' => 'dashicons-food' .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

Das Endergebnis sollte sein, dass das von Ihnen gewählte Symbol in Ihrem benutzerdefinierten Beitragsmenü erscheint … was dazu beiträgt, dass sich Ihr benutzerdefinierter Beitrag wirklich individuell anfühlt!

Weiterführende Lektüre

Erstellen Sie benutzerdefinierte WordPress-Beitragstypen mit einem Plugin
Erstellen Sie manuell benutzerdefinierte WordPress-Beitragstypen
Erstellen Sie benutzerdefinierte WordPress-Beitragstypen mit Ihrem eigenen Plugin!

Fazit

Hoffentlich helfen Ihnen diese Tipps wirklich bei Ihrem Bestreben, Ihre eigenen benutzerdefinierten Beitragstypen zu erstellen, und ermöglichen es Ihnen dabei, die Funktionen und die Verwendung Ihrer WordPress-Website weiter zu verbessern. Wie bei jeder Codierung ist es am besten, sich etwas Zeit zu nehmen, um zu spielen und zu sehen, wie sich Ihr neuer Code auf Ihre Website auswirkt. Wenn Sie auf diesen Grundlagen aufbauen, können Sie noch komplexere Projekte angehen, bei denen eine umfassende Anpassung erforderlich ist.