Share
Möglicherweise war die beste Ergänzung zu WordPress 3.0 die von Custom Post Types. Dies erforderte, dass WordPress ein CMS war, das Beiträge und Seiten verwalten kann, um alles, was dem Benutzer leicht fällt, zu verwalten. Sie müssen nicht mehr benutzerdefinierte Felder zum Posting hinzufügen. Sie können Ihren eigenen Typen Unterstützung hinzufügen, indem Sie eigene Themenseitendateien und Verwaltungsbereiche erstellen. Eines der ersten Dinge, die ich mit benutzerdefinierten Post-Typen gemacht habe, war die Überarbeitung meines Portfolios. Heute werde ich Ihnen zeigen, wie ich es getan habe!
Vor kurzem haben wir Ihnen einige nützliche Tools zum Erstellen von benutzerdefinierten Beitragsarten "Sofort" gezeigt. Heute dreht sich alles darum, ein Projekt mit CPTs von Grund auf zu erstellen. Wir werden alles tun, von der Erstellung des benutzerdefinierten Typs bis zur Gestaltung für das Design. Das CSS (und CSS3!), Das ich verwende, sollte für die meisten Themen generisch genug sein. Falls dies nicht der Fall ist, können Sie es jederzeit ändern. Dies ist als Startpunkt für alle gedacht, also können Sie kreativ werden!
Das erste, was zu beachten ist, ist, dass wir beim Erstellen eines benutzerdefinierten Beitragstyps eine Reihe von Optionen haben, wie wir an sie herangehen möchten. Die zwei wichtigsten Implementierungen, die Sie in Betracht ziehen könnten, sind:
Es gibt Vor-und Nachteile für jeden. In diesem Lernprogramm werden wir es, da wir uns mit unserem Thema integrieren, zu einem Teil des Themas machen und alles, was wir brauchen, über die Datei functions.php aufrufen.
Anmerkung des Entwicklers: Weil wir dies direkt in unser Thema integrieren, bedeutet das nicht, dass dies der richtige Weg für Sie ist? Betrachten Sie die Endnutzung Ihres Themas. Wenn die Chance besteht, dass Ihre Benutzer in der Zukunft Themen wechseln, oder wenn Sie Ihr Thema als öffentliches oder hochwertiges Produkt für viele Benutzer veröffentlichen, möchten Sie wahrscheinlich Ihren benutzerdefinierten Beitragstyp erstellen Als eigenständige Datei, die von den Benutzern mitgenommen werden kann, ohne zu viel Code durchzublättern.
Stellen Sie sich das so vor: Wenn Ihr Thema das einzige ist, das Ihre benutzerdefinierten Beitragstypen lädt und Sie Themen ändern, sind die Daten für den benutzerdefinierten Beitragstyp nicht verwendbar. Es wird immer noch in der Datenbank vorhanden sein, wird aber in neuen Themen nicht sinnvoll angezeigt. Dies ist manchmal nicht möglich, wenn Sie ein Thema für die Verwendung eines CPT wirklich überarbeiten, indem Sie viele Anpassungen und Vorlagen hinzufügen. Berücksichtigen Sie jedoch zumindest, was die Benutzer möglicherweise tun müssen, um die Verwendung ihrer Daten langfristig zu erhalten.
Dann fangen wir an!
Wie bereits erwähnt, werden wir dies zu unserem aktuellen Thema hinzufügen (ich verwende mein eigenes benutzerdefiniertes Thema). Als erstes müssen wir unser Thema öffnen und das Thema öffnen Functions.php Datei. Wir werden unseren benutzerdefinierten Posttyp-Code in eine andere Datei schreiben (nur um das Lesen / Verwalten zu erleichtern), also nennen wir diese Datei oben in unserer Funktionsdatei:
Accentsconagua
required_once ('portfolio-type.php'); Jetzt werden wir unserem Theme zwei Dateien hinzufügen: portfolio-type.php und portfolio.css. Wie Sie sich vermutlich vorstellen können, werden alle unsere CSS-Dateien für den neuen Typ in der letzteren Datei gespeichert.
Bevor wir den neuen Typ registrieren, müssen wir Unterstützung für einen wesentlichen Teil der von der Präsentation präsentierten Bilder hinzufügen. Fügen Sie nach dem Hinzufügen der öffnenden und schließenden PHP-Tags zu portfolio-type.php den folgenden Code hinzu:
if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (280, 210, true); // Normale Post-Miniaturansichten add_image_size ('screen-shot', 720, 540); // Bildschirm in voller Größe Nachdem Sie überprüft haben, ob Ihre spezielle Installation Post-Thumbnails unterstützt, werden diese Zeilen zu Ihrem aktuellen Design hinzugefügt und anschließend ein paar Standardgrößen festgelegt. set_post_thumbnail_size () setzt, wie der Name vermuten lässt, die Standardgröße für die Miniaturansicht. Die nächste Zeile (add_image_size () erstellt ein weiteres Bild, das wir "screen-shot" nennen können, das 720x540 sein wird. Wir werden diese Bilder verwenden, wenn wir unser Portfolio zeigen.
Genau hier passiert der Zauber - wir werden jetzt WordPress über unseren neuen Beitragstyp berichten. Fügen Sie der portfolio-type.php den folgenden Code hinzu:
add_action ('init', 'portfolio_register'); Funktion portfolio_register () $ args = array ('label' => __ ('Portfolio'), 'singular_label' => __ ('Project'), 'public' => true, 'show_ui' => true, 'Capability_type '=>' post ',' hierarchical '=> false,' rewrite '=> true,' unterstützt '=> array (' title ',' editor ',' thumbnail ')); register_post_type ('portfolio', $ args); Die erste Zeile hier ist ein Haken in WordPress, das unsere Funktion aufruft, portfolio_register () bei der Initialisierung. Die Funktion selbst richtet ein Array von Argumenten ein, die mit unserem benutzerdefinierten Beitragstyp gesendet werden. Wir legen vor allem unsere Admin-Labels fest und geben diesem Typ alle Funktionen eines Standard-WordPress-Beitrags. Ermöglicht das Umschreiben von URLs (für hübsche Permalinks) und das Hinzufügen von Unterstützung für die Felder Titel, Editor und Bildmaterial. Sie können mehr über alle Argumente für lesen register_post_type () Hier.
Nachdem wir das arguments-Array ($ args) eingerichtet haben, übergeben wir dieses zusammen mit dem Typnamen an die Funktion register_post_type ().
Das Letzte, was wir in diesem Abschnitt tun werden, ist die Erstellung einer benutzerdefinierten Taxonomie für unseren neuen Typ. Fügen Sie der Datei portfolio-type.php die folgende Codezeile hinzu:
register_taxonomy ("Projekttyp", Array ("Portfolio"), Array ("hierarchisch" => true, "label" => "Projekttypen"), "singular_label" => "Projekttyp", "umschreiben" => true )); Dadurch wird die neue Taxonomie "Projekttyp" erstellt und auf den Beitragstyp "Portfolio" angewendet. Sie können mehr darüber lesen register_taxonomy () Hier.
Wir hätten nicht viel von einem benutzerdefinierten Typ, ohne zusätzliche Informationen zum Beitrag hinzuzufügen. Wir fügen diese Informationen in Form von benutzerdefinierten Feldern hinzu. Insbesondere fügen wir ein zusätzliches Feld für einen Link zu weiteren Informationen zum Projekt oder zum Projekt selbst hinzu. Fügen Sie der Datei portfolio-type.php den folgenden Code hinzu:
add_action ("admin_init", "portfolio_meta_box"); function portfolio_meta_box () add_meta_box ("projInfo-meta", "Projektoptionen", "portfolio_meta_options", "portfolio", "side", "low")); function portfolio_meta_options () global $ post; if (definiert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; $ custom = get_post_custom ($ post-> ID); $ link = $ custom ["projLink"] [0]; ?> 
Dieser Code erstellt das Feld "Projektoptionen", das wir hier sehen. Zuerst verwenden wir den WordPress-Hook admin_init um unsere Funktion aufzurufen portfolio_meta_box () wenn der WordPress-Admin erstellt wurde. Unsere Funktion fügt unserem Portfolio-Typ eine weitere Box hinzu, die mit beliebigen Elementen gefüllt werden kann. Was mit dem Feld gefüllt wird, wird durch das dritte Argument abgedeckt, bei dem es sich um eine Rückruffunktion handelt. In diesem Fall wird unsere Funktion benannt portfolio_meta_options ().
Im portfolio_meta_options () Wir erstellen ein Formularfeld, das zur Erfassung der Projektverknüpfung verwendet wird. Das erste, was wir tun, ist das Globale $ post Array, damit wir die benutzerdefinierten Felder für jeden Beitrag erhalten können, den wir bearbeiten. In unserer nächsten Zeile überprüfen wir, ob WordPress die Post- oder benutzerdefinierten Felder derzeit nicht speichert. Wenn dies der Fall ist, sehen wir möglicherweise ungenaue Ergebnisse, wenn wir die benutzerdefinierten Daten erfassen.
Wenn WordPress nicht speichert, greifen wir die benutzerdefinierten Felder für den aktuellen Beitrag auf und erstellen ein Formularfeld, das diese Informationen verwendet. $ custom (was kommt von zurück get_post_custom () ist ein 2D-Array, bei dem der Schlüssel das ist, in dem wir das Formularfeld für unseren Benutzer angeben. Schauen Sie sich unser Textfeld für den Link an. Sie werden feststellen, dass der Name mit dem Index übereinstimmt, den wir in unserem Index nennen $ custom Array. Sie werden auch feststellen, dass wir kein separates Formular oder eine 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
Nun, da wir unsere benutzerdefinierte Meta-Box erstellt haben, ist es an der Zeit, eine Funktion zu erstellen, die die Informationen speichert. Fügen Sie der Datei portfolio-type.php die folgenden Codezeilen hinzu:
add_action ('save_post', 'save_project_link'); function save_project_link () global $ post; if (definiert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; else update_post_meta ($ post-> ID, "projLink", $ _POST ["projLink"]); Erstens haben wir wie üblich unseren Haken, um unsere Funktion aufzurufen, wenn der Beitrag gespeichert ist. In der Funktion selbst greifen wir wieder die $ post Array, damit wir die Beitrags-ID erhalten und prüfen können, ob der Beitrag automatisch gespeichert wird. Wenn wir diese Zeile nicht angeben, werden wir das tun verliere unsere Daten, es ist also wichtig, dass wir das in behalten.
Wenn der Beitrag nicht aktualisiert wird, speichern wir unsere benutzerdefinierten Felder mit update_post_meta (), Senden der Post-ID, des Namens des benutzerdefinierten Felds und des neuen Werts.
So sieht das ganze Kit und Caboodle aus!
Schritt 4 Anpassen von Admin-Spalten
Hier passen wir die Liste an, in der alle unsere Projekte angezeigt werden. Fügen Sie der Datei portfolio-type.php den folgenden Code hinzu:
add_filter ("manage_edit-portfolio_columns", "project_edit_columns"); Funktion project_edit_columns ($ Spalten) $ Spalten = Array ("cb" => "")"," title "=>" Projekt "," description "=>" Beschreibung "," link "=>" link "," type "=>" Art des Projekts ",); Rückgabe von $ column; add_action (" manage_posts_custom_column "," project_custom_columns "); Funktion project_custom_columns ($ column) global $ post; switch ($ column) case" description ": the_excerpt (); break; case" link ": $ custom = get_post_custom (); echo $ custom ["projLink"] [0]; break; case "type": echo get_the_term_list ($ post-> ID, 'projekttyp', ",", ","); break; 
Hier ist unsere neu geänderte Projektliste. Nach unserem Haken für die erste Funktion (project_edit_columns ()), wir machen etwas sehr 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. Wir erstellen diese Schlüssel-Wert-Paare in dieser Funktion. In der nächsten Funktion (project_custom_columns ()), verwenden wir eine switch-Anweisung, um den Schlüssel zu greifen und die gewünschten Informationen basierend darauf anzuzeigen. Wie Sie sehen, erhalten wir wie im vorherigen Abschnitt das Globale $ post Array, damit wir die ID des Beitrags erhalten können, um benutzerdefinierte Informationen wie Link und Taxonomie richtig anzuzeigen.
Sie haben wahrscheinlich bemerkt, dass die Anzahl der Fälle nicht mit der Anzahl der Spalten in unserem übereinstimmt $ Spalten Array. 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 zur Verfügung stellen, mit denen ich die Projekte richtig anzeigen kann. Öffnen Sie die Datei functions.php und fügen Sie die folgenden drei Komponenten hinzu:
add_filter ('excerpt_length', 'my_excerpt_length'); function my_excerpt_length ($ length) return 25; add_filter ('excerpt_more', 'new_excerpt_more'); Funktion new_excerpt_more ($ text) return "; Funktion portfolio_thumbnail_url ($ pid) $ image_id = get_post_thumbnail_id ($ pid); Die ersten beiden Haken- / Funktionspaare sind für WordPress üblich. Sie ändern lediglich die Länge des Ausschnitts und den Indikator "Mehr Text", den ich durch ein Leerzeichen ersetzt habe. Bitte beachten Sie, dass dies bei allen Beiträgen der Fall ist, nicht nur beim Portfolio-Beitrag. Wenn Sie ein untergeordnetes Thema verwenden, funktioniert dies möglicherweise nicht.
Die benutzerdefinierte Funktion, portfolio_thumbnail_url () nimmt die ID eines Beitrags als Argument an und greift nach der Screenshot-Version des hochgeladenen Bildes. Wir werden es auf unserer Vorlagenseite aufrufen, halten Sie also Ausschau!
Schritt 6 Erstellen Sie eine Vorlagenseite
Nachdem wir nun unseren benutzerdefinierten Beitragstyp im Admin eingerichtet haben, ist es an der Zeit, eine Designseite zu erstellen, damit wir sie anzeigen können. Dazu erstellen wir eine Vorlage mit dem Namen "Portfolio" und weisen die Vorlage dann einer Seite in WordPress zu. Obwohl wir auch archives-portfolio.php erstellen können, um dasselbe zu erreichen, können wir diese Seite nicht zu einem Menü aus dem WordPress-Administrator hinzufügen, daher ist diese Route am besten. Erstellen Sie eine neue Datei namens page-portfolio.php, und fügen Sie den folgenden Code hinzu:
Dadurch wird die Vorlage "Portfolio" erstellt. Diese wenigen Zeilen legen die wichtigsten Teile der Seite fest. Die erste Zeile informiert WordPress darüber, dass dies eine Seitenvorlage ist, die den Namen "Portfolio" tragen sollte. Nachdem wir die Kopfzeile des Themas aufgerufen haben, richten wir die Abfrage so ein, dass sie die letzten 9 Beiträge des Typ-Portfolios erfasst. Als nächstes zeigen Sie sie an. Fügen Sie diesen Code zu Ihrer page-portfolio.php-Datei hinzu:
Portfolio der Arbeit
: "rel =" lightbox [Arbeit] "href ="ID)?> "> : : "rel =" lightbox [Arbeit] "href ="ID)?> "> (Mehr)
"> Besuchen Sie die Site
Live Link nicht verfügbar
Sie werden hier ein paar Dinge bemerken: Nachdem wir uns in der Schleife befinden, müssen wir "" "Fremdkörper aus unserem Titel und Inhalt herausschneiden str_ireplace (). Ich weiß nicht genau, warum sie hier erscheinen, aber nach meinem Wissen ist dies ein notwendiger Schritt. Sie sollten auch feststellen, dass wir Lightbox verwenden. Während wir es selbst hinzufügen konnten (was ich wahrscheinlich empfehlen würde, wenn dies ein Plugin wäre), könnten wir, da wir unser eigenes Thema ändern, eines der vielen Leuchtkasten-Plugins herunterladen, die im WordPress-Repository verfügbar sind. Wählen Sie einfach Ihren Favoriten aus!
Abgesehen davon sollte dies jedem, der mit der WordPress-Schleife gearbeitet hat, vertraut vorkommen. Was wir hier tun, ist das Erstellen von Blöcken mit unseren Miniaturansichten und Beschreibungen, die mit dem Bildschirmfoto (mit Lightbox) für jedes der 9 Projekte verbunden sind. Ich habe keine Links zu anderen Seiten hinzugefügt (falls Sie mehr als 9 Projekte haben), da meine Benutzer nur die neuesten 9 Projekte sehen sollen. Sie können Benutzern erlauben, mit anderen Beiträgen zu gelangen posts_nav_link (), wenn du willst.
Ich sollte auch beachten, dass ich den standardmäßigen Link-Link von WordPress entfernt habe, weil er mit einer einzelnen Post-Seite verlinkt war und ich die Lightbox verwenden wollte, also habe ich meine eigene erstellt.
Schritt 7 Gestalten Sie unseren Portfolio-Typ
Hier ist der Spaß: Unser Portfolio wird hübsch aussehen. Hier ist ein paar CSS, die ich hinzugefügt habe - Sie können es am Ende Ihres style.css-Blattes oder in unsere neu erstellte portfolio.css-Datei einfügen. Seien Sie sicher, dass Sie es verwenden @einführen Um portfolio.css ganz oben in Ihrem style.css aufzurufen (es wird nirgendwo anders funktionieren):
.item float: left; Marge: 5px; Breite: 310px; Hintergrund: #EFEFEF; -moz-border-radius: 7px; -webkit-border-radius: 7px; Grenzradius: 7px; Text ausrichten: Mitte; -moz-box-shadow: 0px 0px 6px # 999; -webkit-box-shadow: 0px 0px 6px # 999; Box-Schatten: 0px 0px 6px # 999; .item p text-align: left; .item p a text-align: left; Schriftdicke: fett; .item img margin-top: 5px; Text ausrichten: Mitte; Grenze: 1px fest # 000000; max-width: 280px; / * selbstlöschende Floats * / .group: after content: "."; Bildschirmsperre; Höhe: 0; Lösche beide; Sichtbarkeit: versteckt;
Wenn Sie auf unsere Vorlagenseite verweisen, werden Sie feststellen, dass jedes Projekt in einem 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 etwas anpassen, aber hier ist ein guter Ausgangspunkt für Sie. Ich habe auch eine Klasse für Selbstreinigungsschwimmer mit aufgenommen. Dies ist eine Technik, die ich von Dan Cederholm erhalten habe, und ich denke, es ist etwas eleganter als die standardmäßige "clearfix" -Methode, um Inhalte nach gleitenden Divs zu löschen.
Fazit
Das ist es! Sie haben jetzt ein einfaches Portfolio mit benutzerdefinierten Beitragstypen. Obwohl dies auf meine Bedürfnisse zugeschnitten ist und ich die Dinge einfach halten wollte, sind die Möglichkeiten unendlich, da Sie es an Ihr Portfolio anpassen können (Schreiben / Artikel, Fotografie, Grafikdesign usw.). Wenn Sie die Lightbox nicht zum Anzeigen des einzelnen Projekts verwenden möchten, können Sie auch eine Themenseite mit dem Namen single-portfolio.php erstellen, die dann den Code innerhalb jedes einzelnen Projekts anwendet, ähnlich wie single.php dies tut Blogeinträge.
