Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Widgets

Die Verwendung benutzerdefinierter Beitragstypen zum Erstellen eines Killer-Portfolios

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Möglicherweise war die beste Ergänzung zu WordPress 3.0 die von benutzerdefinierten Beitragstypen(Custom Post Types). WordPress hat es von einem CMS, das Beiträge und Seitenverwalten kann, zu einem CMS gemacht, das alles, was der Benutzer sich vorstellen kann, ziemlich einfach verwalten kann. Sie müssen Posts keine benutzerdefinierten Felder mehr hinzufügen. Sie können Ihren eigenen Typen Unterstützung auf hoher Ebene hinzufügen und eigene Themenseitendateien und Administrationsbereiche erstellen. Eines der ersten Dinge, die ich mit benutzerdefinierten Beitragstypen getan habe, war die Überarbeitung meines Portfolios. Heute werde ich Ihnen zeigen, wie ich es getan habe!

Wir haben Ihnen kürzlich einige nützliche Werkzeugs zum Erstellen von benutzerdefinierten "Instant"-Posttypen gezeigt. Heute geht es darum, ein Projekt mithilfe von CPTs von Grund auf neu zu erstellen. Wir werden alles tun, von der Erstellung des benutzerdefinierten Typs bis zur Gestaltung des Themes. Das von mir verwendete CSS (und CSS3!) Sollte für die meisten Themen allgemein genug sein, aber falls dies nicht der Fall ist, können Sie es jederzeit ändern! Dies soll als Startpunkt für alle dienen, also zögern Sie nicht, kreativ zu werden!


Erste Schritte und ein paar Gedanken

Das erste, was zu beachten ist, ist, dass wir beim Erstellen eines benutzerdefinierten Beitragstyps einige Optionen haben, wie wir uns ihnen nähern möchten. Die beiden wichtigsten Implementierungen, die Sie in Betracht ziehen könnten, sind:

  1. Als Teil des aktuellen Themes (normalerweise über die Datei functions.php)
  2. Als eigenes Stand-Along-Plugin.

Jeder hat Vor- und Nachteile. Da wir in dieses Tutorial integrieren, werden wir es in das Theme integrieren und alles, was wir brauchen, über die Datei functions.php aufrufen.

Anmerkung des Entwicklers: Da wir dies direkt in unser Theme einbauen, bedeutet dies nicht, dass dies der richtige Weg für Sie ist. Berücksichtigen Sie die Endverwendung Ihres Themes. Wenn die Wahrscheinlichkeit groß ist, dass Ihre Benutzer in Zukunft das Theme wechseln, oder Sie Ihr Theme als öffentliches oder Premium-Produkt für viele Benutzer freigeben, möchten Sie wahrscheinlich Ihren benutzerdefinierten Beitragstyp einbauen als eigenständige Datei, die Benutzer mitnehmen können, ohne zu viel in Ihrem Code zu stöbern.

Stellen Sie sich das so vor: Wenn nur Ihr Theme Ihre benutzerdefinierten Beitragstypen lädt und Sie Themen ändern, können die benutzerdefinierten Beitragstypdaten nicht verwendet werden. Es wird weiterhin in der Datenbank vorhanden sein, aber es wird in keiner sinnvollen Weise in neuen Themen angezeigt. Manchmal ist dies nicht möglich, wenn Sie ein Theme wirklich überarbeiten, um ein CPT zu verwenden, indem Sie viele Anpassungen und Vorlagen einschließen. Überlegen Sie jedoch zumindest, was Benutzer möglicherweise tun müssen, um die Verwendung ihrer Daten auf lange Sicht zu erhalten.

Dann fangen wir an!


Was wir schaffen werden

Schritt 1 Einrichtung

Wie oben erwähnt, werden wir dies zu unserem aktuellen Theme hinzufügen (ich verwende mein eigenes benutzerdefiniertes Theme). Als erstes müssen wir zu unserem Theme gehen und die Datei functions.php öffnen. Wir werden unseren benutzerdefinierten Post-Typ-Code in eine andere Datei einfügen (nur damit das Lesen/Verwalten einfacher ist). Daher rufen wir diese Datei oben in unserer Funktionsdatei auf:

Jetzt fügen wir unserem Theme zwei Dateien hinzu: Portfolio-Typ.php und Portfolio.css. Wie Sie wahrscheinlich erraten können, wird unser gesamtes CSS für den neuen Typ in die letztere Datei aufgenommen.


Schritt 2 Registrieren des neuen Typs

Thumbnail & Featured Image Support

Bevor wir den neuen Typ registrieren, müssen wir Unterstützung für einen integralen Bestandteil der Bilder mit Portfolio-Präsentation hinzufügen. Fügen Sie nach dem Hinzufügen der öffnenden und schließenden PHP-Tags zu portfolio-type.php den folgenden Code hinzu:

Nachdem diese Zeilen überprüft haben, ob Ihre Installation Post-Thumbnails unterstützt, werden sie Ihrem aktuellen Design hinzugefügt und anschließend einige Standardgrößen festgelegt. set_post_thumbnail_size() legt, wie der Name schon sagt, die Standardgröße für das Miniaturbild fest. In der nächsten Zeile (add_image_size() wird ein weiteres Bild mit dem Namen "Screenshot" erstellt, das 720 x 540 ist. Diese Bilder werden bei der Anzeige unseres Portfolios verwendet.

Neuen Beitragstyp erstellen

Genau hier passiert die Magie - wir werden WordPress jetzt über unseren neuen Beitragstyp informieren. Fügen Sie Portfolio-type.php den folgenden Code hinzu:

Die erste Zeile hier ist ein Hook in WordPress, der bei der Initialisierung unsere Funktion portfolio_register() aufruft. Die Funktion selbst richtet eine Reihe von Argumenten ein, die mit unserem benutzerdefinierten Beitragstyp gesendet werden sollen. Vor allem setzen wir unsere Admin-Labels, geben diesem Typ alle Funktionen eines Standard-WordPress-Posts, ermöglichen das Umschreiben von URLs (für hübsche Permalinks) und fügen Unterstützung für die Felder für Titel, Editor und vorgestellte Bilder hinzu. Weitere Informationen zu allen Argumenten für register_post_type() finden Sie hier.

Nach dem Einrichten des Arraysargumente ($args) übergeben wir dieses zusammen mit dem Typnamen an die Funktion register_post_type().

Hinzufügen einer benutzerdefinierten Taxonomie

Als letztes erstellen wir in diesem Abschnitt eine benutzerdefinierte Taxonomie für unseren neuen Typ. Fügen Sie Ihrer portfolio-type.php-Datei die folgende Codezeile hinzu:

Dadurch wird die neue Taxonomie "Projekttyp" erstellt und auf den Beitragstyp "Portfolio" angewendet. Weitere Informationen zu register_taxonomy() finden Sie hier.


Schritt 3 Hinzufügen von benutzerdefinierten Feldern

Erstellen der benutzerdefinierten Feldbox

Wir hätten nicht viel von einem benutzerdefinierten Typ, ohne zusätzliche Informationen zum Beitrag hinzuzufügen. Wir werden diese Informationen in Form von benutzerdefinierten Feldern hinzufügen. Insbesondere fügen wir ein zusätzliches Feld für einen Link zu weiteren Informationen über das Projekt oder zum Projekt selbst hinzu. Fügen Sie Ihrer portfolio-type.php-Datei den folgenden Code hinzu:


Dieser Code erstellt das Feld "Projektoptionen", das wir hier sehen.

Zuerst verwenden wir den WordPress-Hook admin_init, um unsere Funktion portfolio_meta_box() aufzurufen, wenn der WordPress-Administrator erstellt wird. Unsere Funktion fügt unserem Portfolio-Typ ein weiteres Feld hinzu, das mit allem gefüllt werden kann. Womit die Box gefüllt ist, wird durch das dritte Argument abgedeckt, bei dem es sich um eine Rückruffunktion handelt. In diesem Fall heißt unsere Funktion portfolio_meta_options().

In portfolio_meta_options() erstellen wir ein Formularfeld, mit dem die Verknüpfung des Projekts erfasst wird. Als erstes greifen wir auf das globale $post-Array zu, damit wir die benutzerdefinierten Felder für jeden Beitrag abrufen können, den wir bearbeiten. In unserer nächsten Zeile überprüfen wir, ob WordPress derzeit keine Post- oder benutzerdefinierten Felder speichert. Wenn dies der Fall ist, werden möglicherweise ungenaue Ergebnisse angezeigt, wenn wir die benutzerdefinierten Daten abrufen.

Wenn WordPress nicht speichert, greifen wir auf die benutzerdefinierten Felder für den aktuellen Beitrag zu und erstellen anhand dieser Informationen ein Formularfeld. $custom (was von get_post_custom() zurückgegeben wird, ist ein 2D-Array, in dem der Schlüssel das ist, was wir als Formularfeld für unsere benutzerdefinierte Eingabe bezeichnen. In unserem Textfeld finden Sie den Link. Sie werden feststellen, dass der Name mit dem Index übereinstimmt, den wir in unserem $custom-Array aufrufen. Sie werden auch feststellen, dass wir kein separates Formular oder keine Schaltfläche zum Senden haben. Dieses Feld wird dem Formular hinzugefügt, mit dem der gesamte Beitrag bearbeitet wird.

Während wir hier nur eine erstellen, können Sie natürlich so viele erstellen, wie Sie möchten.

Speichern der benutzerdefinierten Daten

Nachdem wir unsere benutzerdefinierte Meta-Box erstellt haben, ist es Zeit, eine Funktion zu erstellen, mit der die Informationen gespeichert werden. Fügen Sie Ihrer portfolio-type.php-Datei die folgenden Codezeilen hinzu:

Erstens haben wir wie üblich unseren Haken - diesmal, um unsere Funktion aufzurufen, wenn der Beitrag gespeichert wird. In der Funktion selbst greifen wir erneut auf das Array $post zu, damit wir die Post-ID abrufen und prüfen können, ob der Post automatisch gespeichert wird. Wenn wir diese Zeile nicht einfügen, verlieren wir unsere Daten. Daher ist es wichtig, dass wir dies beibehalten.

Wenn der Beitrag nicht aktualisiert wird, speichern wir unsere benutzerdefinierten Felder mit update_post_meta() und senden die Beitrags-ID, den Namen des benutzerdefinierten Felds und den neuen Wert.


So sieht das ganze Kit und Caboodle aus!

Schritt 4 Anpassen der Administrationsspalten

Hier passen wir die Liste an, in der alle unsere Projekte angezeigt werden. Fügen Sie Ihrer portfolio-type.php-Datei den folgenden Code hinzu:


Hier ist unsere neu geänderte Projektliste.

Nach unserem Hook für die erste Funktion (project_edit_columns()) machen wir etwas ziemlich Interessantes in Bezug auf die Bearbeitung der Spalten. WordPress platziert die Spalten für die Anzeigeliste eines Beitragstyps in einem Array mit einem Schlüssel und einem Wert. Diese Schlüssel-Wert-Paare erstellen wir in dieser Funktion. In der nächsten Funktion (project_custom_columns()) verwenden wir eine switch-Anweisung, um den Schlüssel abzurufen und dann die gewünschten Informationen basierend darauf anzuzeigen. Wie Sie sehen können, erhalten wir genau wie im vorherigen Abschnitt das globale Array $post, sodass wir die ID des Posts abrufen können, um benutzerdefinierte Informationen wie unseren Link und unsere Taxonomie ordnungsgemäß anzuzeigen.

Sie haben wahrscheinlich bemerkt, dass die Anzahl der Fälle nicht mit der Anzahl der Spalten in unserem Array $columns übereinstimmt. Das liegt daran, dass WordPress für bestimmte Schlüssel wie cb und title Standardwerte hat, die wir nicht überschreiben möchten.


Schritt 5 Hinzufügen einiger Anzeigefunktionen

Bevor wir eine Vorlagenseite erstellen, möchte ich Ihnen einige Funktionen geben, die ich hinzugefügt habe, damit die Projekte genau richtig angezeigt werden. Öffnen Sie Ihre Datei functions.php und fügen Sie die folgenden drei Komponenten hinzu:

Die ersten beiden Hook/Function-Paare sind in WordPress üblich - sie ändern einfach die Länge des Auszugs und die Anzeige "Mehr Text", die ich durch ein Leerzeichen ersetzt habe. Bitte beachten Sie, dass dies für alle Posts gilt, nicht nur für den Portfolio-Post. Wenn Sie ein untergeordnetes Theme verwenden, funktioniert dies möglicherweise nicht.

Die benutzerdefinierte Funktion Portfolio_thumbnail_url() verwendet die ID eines Posts als Argument und greift auf die Screenshot-Version des von uns hochgeladenen Bildes zu. Wir werden es auf unserer Vorlagenseite aufrufen, also achten Sie darauf!


Schritt 6 Erstellen Sie eine Vorlagenseite

Nachdem wir unseren benutzerdefinierten Beitragstyp im Administrator eingerichtet haben, ist es an der Zeit, eine Themenseite zu erstellen, damit wir sie anzeigen können. Um dies zu erreichen, erstellen wir eine Vorlage mit dem Namen "Portfolio" und weisen die Vorlage dann einer Seite in WordPress zu. Wir können zwar auch archives-portal.php erstellen, um dasselbe zu erreichen, aber wir können diese Seite nicht zu einem Menü des WordPress-Administrators hinzufügen, daher ist diese Route am besten. Erstellen Sie unter Einhaltung der WordPress-Namenskonventionen eine neue Datei mit dem Namen page-Portfolio.php und fügen Sie den folgenden Code hinzu:


Dadurch wird die Vorlage "Portfolio" erstellt.

Diese wenigen Zeilen bilden die wichtigsten Teile der Seite. In der ersten Zeile wird WordPress darüber informiert, dass dies eine Seitenvorlage mit dem Namen "Portfolio" ist. Nachdem wir den Header des Themes aufgerufen haben, haben wir die Abfrage so eingerichtet, dass die letzten 9 Beiträge des Typportfolios abgerufen werden. Als nächstes müssen Sie sie anzeigen. Fügen Sie diesen Code Ihrer page-portfolio.php-Datei hinzu:

Sie werden hier einige Dinge bemerken: Zuerst müssen wir, nachdem wir in der Schleife sind, mit str_ireplace() überflüssige '"' Zeichen aus unserem Titel und Inhalt entfernen. Ich bin mir nicht ganz sicher, warum sie hier erscheinen, aber soweit ich das beurteilen kann, ist dies ein notwendiger Schritt. Sie sollten auch beachten, dass wir Lightbox verwenden. Während wir es selbst hinzufügen könnten (was ich wahrscheinlich empfehlen würde, wenn dies ein Plugin wäre), könnten wir, da wir unser eigenes Theme ändern, eines der vielen Lightbox-Plugins herunterladen, die im WordPress-Repository verfügbar sind. Wählen Sie einfach Ihren Favoriten!

Abgesehen davon sollte dies jedem bekannt vorkommen, der mit der WordPress-Schleife gearbeitet hat. Wir erstellen hier Blöcke mit unseren Miniaturansichten und Beschreibungen, die (mithilfe des Leuchtkastens) auf den Screenshot für jedes der 9 Projekte verweisen. Ich habe keine Links zu anderen Seiten eingefügt (falls Sie mehr als 9 Projekte haben), da meine Benutzer nur die neuesten 9 Projekte sehen sollen. Sie können Benutzern erlauben, mit posts_nav_link() zu anderen Posts zu gelangen, wenn Sie dies wünschen.

Ich sollte auch beachten, dass ich den Standard-Link "Mehr" von WordPress entfernt habe, weil er mit einer einzelnen Post-Seite verknüpft war, und ich wollte einen Leuchtkasten verwenden, also habe ich meinen eigenen erstellt.


Schritt 7 Gestalten unseres Portfolio-Typs

Hier ist der lustige Teil: Unser Portfolio-Typ hübsch aussehen zu lassen. Hier ist etwas CSS, das ich aufgenommen habe - Sie können es am Ende Ihres style.css-Blattes oder in unsere neu erstellte portfolio.css-Datei einfügen. Verwenden Sie einfach @import, um portfolio.css oben im style.css Ihres Themes aufzurufen (es funktioniert nirgendwo anders):

Wenn Sie auf unsere Vorlagenseite verweisen, sehen Sie, dass jedes Projekt in ein Div namens "item" eingeschlossen ist, auf das wir jetzt CSS anwenden. Da keine zwei Themen gleich sind, müssen Sie möglicherweise Ihr eigenes CSS ein wenig optimieren, aber hier ist ein guter Ausgangspunkt für Sie. Ich habe auch eine Klasse für selbstlöschende Schwimmer aufgenommen. Dies ist eine Technik, die ich von Dan Cederholm erhalten habe, und ich denke, sie ist etwas eleganter als die Standardmethode "clearfix" zum Löschen von Inhalten nach schwebenden Divs.


Abschluss

Das ist es! Sie haben jetzt ein einfaches Portfolio mit benutzerdefinierten Beitragstypen. Obwohl dies für meine Bedürfnisse entwickelt wurde und ich die Dinge einfach halten wollte, sind die Möglichkeiten dafür endlos, da Sie es an jedes Portfolio anpassen können, das Sie haben (Schreiben/Artikel, Fotografie, Grafikdesign usw.). Wenn Sie Lightbox nicht zum Anzeigen des einzelnen Projekts verwenden möchten, können Sie auch eine Themenseite mit dem Namen single-portal.php erstellen, die dann den Code auf jedes einzelne Projekt anwendet, ähnlich wie dies bei single.php der Fall ist Blogeinträge.

Advertisement
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.