Verwenden benutzerdefinierter Felder zum Erstellen von Überprüfungsfeldern

Reviews sind vielleicht eine der größten Befugnisse des Bloggens. Wenn sie richtig gemacht werden (mit harter Arbeit und konsistenten Informationen), sind Review-Blogs wohl die profitabelste Kategorie in der Blogosphäre. Aber jeder Blog muss in seinen Beiträgen ein solides Design bieten, einschließlich Rezensionen. In diesem Beitrag werden wir darüber sprechen, wie Sie das perfekte Überprüfungsfeld erstellen, da Überprüfungsfelder wahrscheinlich der erste Teil sind, den der Leser überprüft, bevor Sie eine Überprüfung lesen.

Was wir bauen werden

Als Beispiel erstellen wir ein Review-Feld für einen Film.

Nehmen wir einen meiner Lieblingsfilme aller Zeiten, The Pursuit of Happyness. Wir werden die folgenden Informationen zum Film anzeigen:

Name: Das Streben nach Glück
Jahr: 2006
Direktor: Gabriele Muccino
Schriftsteller: Steve Conrad
Sterne: Will Smith, Jaden Smith, Thandie Newton
Genre: Biografie, Drama
Laufzeit: 117 Minuten
Storyline: Basierend auf einer wahren Geschichte über einen Mann namens Christopher Gardner. Gardner hat viel in ein Gerät investiert, das als "Bone Density Scanner" bezeichnet wird. Er fühlt sich an, als hätte er diese Geräte hergestellt. Sie verkaufen jedoch nicht, da sie geringfügig besser als die derzeitige Technologie zu einem viel höheren Preis sind. Als Gardner nach dem Verkauf sucht, verlässt ihn seine Frau, er verliert sein Haus, sein Bankkonto und seine Kreditkarten. Gardner, der gezwungen wurde, mit seinem Sohn auf der Straße zu leben, sucht jetzt verzweifelt nach einer festen Arbeit; Er nimmt eine Anstellung als Börsenmakler an, aber bevor er bezahlt werden kann, muss er 6 Monate lang eine Ausbildung durchlaufen und seine Geräte verkaufen.
(Vergessen wir nicht, dass wir ein Bild brauchen.)

Wichtig: Diese Informationen stammen aus der Internet Movie Database.

Schritt 1 Vorbereiten der benutzerdefinierten Meta-Box zum Ausfüllen der Daten

Wir werden die Daten als benutzerdefinierte Feldwerte speichern, aber das manuelle Hinzufügen von benutzerdefinierten Feldern für jede Überprüfung kann einen solchen Schmerz verursachen. Aus diesem Grund erstellen wir eine übersichtliche benutzerdefinierte Meta-Box, um unsere Daten als benutzerdefinierte Felder zu speichern.

Zuerst müssen wir die verwenden add_meta_box () Funktion zum Erstellen der Meta-Box und zum Erstellen einer Rückruffunktion:

 Funktion wptuts_review_box_add_meta () add_meta_box ('Review-Box', 'The Review Box', 'wptuts_review_box_meta', 'post', 'normal', 'high');  add_action ('add_meta_boxes', 'wptuts_review_box_add_meta'); Funktion wptuts_review_box_meta () // Hallo zusammen!

Die Rückruffunktion erstellt die Eingabefelder für unsere Daten. Ich denke, wir können einen Textbereich für das "Storyline" -Feld und Texteingabefelder für alles andere verwenden:

 ICH WÜRDE ); // extrahiere die Mitglieder des $ values-Arrays in ihre eigenen Variablen (die Sie im HTML-Code unten sehen können) extract ($ values, EXTR_SKIP); wp_nonce_field ('review_box_meta_action', 'review_box_meta_nonce'); ?>  Filmname:  
  Jahr:  
  Direktor:  
  Schriftsteller:  
  Sterne:  
  Genre:  
  Laufzeit:  
  Bild:  
  Storyline: <?php echo $_wptuts_review_storyline[0]; ?>

Dann müssen wir die Funktion erstellen, damit WordPress die Eingabewerte als benutzerdefinierte Felder speichert:

 Funktion wptuts_review_box_save_meta ($ post_id) if (definiert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; if (! isset ($ _POST ['review_box_meta_nonce']) ||! wp_verify_nonce ($ _POST ['review_box_meta_nonce'], 'review_box_meta_action')) return; if (! current_user_can ('edit_post')) return; // Erstellen Sie ein Array mit den benutzerdefinierten Feldern $ review_array = array ('_wptuts_review_name', '_wptack_review_year', '_wptuts_review_director', '_wptuts_review_writer', '_wptuts_review_stars', '_wptuts_review_stars', '_wptuts_review_genre'. ; // Erzeuge die "Standard" -Werte für das Array $ review_array_defaults = array ('_wptuts_review_name' => 'None', '_wptuts_review_year' => 'None', '_wptuts_review_director' => 'None', '_wptuts_review_writer' => None ',' _wptuts_review_stars '=>' None ',' _wptuts_review_genre '=>' None ',' _wptuts_review_runtime '=>' None ',' _wptuts_review_image '=>' None ',' _wptuts_review_storyline '=>' None '); // parse 'em! $ review_array = wp_parse_args ($ review_array, $ review_array_defaults); // HTML-Elemente, die in den Feldern zulässig sind $ allowed_html = array ('a' => array ('href' => array (), 'title' => array ()), 'em' => array (), 'strong' => array ()); // Aktualisiere die Post-Meta-Felder mit Eingabefeldern (falls gesetzt) foreach ($ review_array als $ item) if (isset ($ _POST [$ item])) [$ item], $ allowed_html));  add_action ('save_post', 'wptuts_review_box_save_meta');

Erledigt!

Weitere Informationen zum Erstellen benutzerdefinierter Meta-Boxen (und was diese Codezeilen tatsächlich bedeuten) finden Sie in diesem fantastischen Artikel, der von Christopher Davis geschrieben und auf Wptuts veröffentlicht wurde+.

Schritt 2 Erstellen der Funktion zum Anzeigen des Überprüfungsfelds

Nun, da wir darüber nachgedacht haben, wie es geht einstellen Die Informationen müssen wir lernen erhalten die Information. Wenn Sie zuvor mit benutzerdefinierten Feldern gearbeitet haben, ist dies einfach, da wir nur benutzerdefinierte Feldwerte abrufen.

WordPress verfügt über eine benutzerfreundliche Funktion zum Abrufen benutzerdefinierter Feldwerte:

 $ meta_values = get_post_meta ($ post_id, $ key, $ single);

Wir müssen benutzerdefinierte Feldwerte in HTML-Code laden, es wäre also ratsam, jetzt über HTML nachzudenken. Ich denke so etwas:

    Name: Das Streben nach Glück
 Jahr: 2006
 Direktor: Gabriele Muccino
 Schriftsteller: Steve Conrad
 Sterne: Will Smith, Jaden Smith, Thandie Newton
 Genre: Biografie, Drama
 Laufzeit: 117 Minuten
 Storyline: Basierend auf einer wahren Geschichte über einen Mann namens Christopher Gardner. Gardner hat viel in ein Gerät investiert, das als "Bone Density Scanner" bezeichnet wird. Er fühlt sich an, als hätte er diese Geräte hergestellt. Sie verkaufen jedoch nicht, da sie geringfügig besser als die derzeitige Technologie zu einem viel höheren Preis sind. Als Gardner nach dem Verkauf sucht, verlässt ihn seine Frau, er verliert sein Haus, sein Bankkonto und seine Kreditkarten. Gardner, der gezwungen wurde, mit seinem Sohn auf der Straße zu leben, sucht jetzt verzweifelt nach einer festen Arbeit; Er nimmt eine Anstellung als Börsenmakler an, aber bevor er bezahlt werden kann, muss er 6 Monate lang eine Ausbildung durchlaufen und seine Geräte verkaufen.

Und wenn wir sie zusammenstellen, haben wir unsere Funktion bereit!

 function wptuts_review_box () global $ post; // Die benutzerdefinierten Feldwerte als Array abrufen $ values = get_post_custom ($ post-> ID); // extrahiere die Mitglieder des $ values-Arrays in ihre eigenen Variablen (die Sie im HTML-Code unten sehen können) extract ($ values, EXTR_SKIP); // Wenn sich im benutzerdefinierten Feld "review_image" kein Bild-Link befindet, versuchen Sie, das gekennzeichnete Bild abzurufen, wenn ($ _ wptuts_review_image == ") if (has_post_thumbnail ()) $ get_wptuts_review_image = wp_get_attachment_image_src (get_post_thumbnail_id, ') ; $ _wptuts_review_image = $ get_wptuts_review_image [0]; else $ _wptuts_review_image = 'http://placehold.it/150x200&text=No+Image'; // Die Ausgabe kann nur für den Fall $ allowed_html = array ('a '=> array (' href '=> array (),' title '=> array ()),' em '=> array (),' strong '=> array ()); $ _wptuts_review_name_output = wp_kses ($ _ wptuts_review_name) [0], $ allowed_html); $ _wptuts_review_year_output = wp_kses ($ _ wptuts_review_year [0], $ allowed_html); $ _wptuts_review_director_output = wp_kses ($ _ wptuts_review_director [0], $ allowed_html); $ _wptuts_review_writer_output = wp_kses ($ _ wptuts_review_writer [0], $ zulässige_html); $ _wptuts_review_stars_output = wp_kses ($ _ wptuts_review_stars [0], $ Allowed_html); $ _wptuts_review_genre_output = wp_kses ($ _ wptuts_review_genre [ 0], $ allow_html); $ _wptuts_review_runtime_output = wp_kses ($ _ wptuts_review_runtime [0], $ Allowed_html); $ _wptuts_review_storyline_output = wp_kses ($ _ wptuts_review_storyline [0], $ allowed_html); $ _wptuts_review_image_output = wp_kses ($ _ wptuts_review_image [0], $ Allowed_html); $ output = '   Name: '. $ _ wptuts_review_name_output.'
 Jahr: '. $ _ wptuts_review_year_output.'
 Direktor: '. $ _ wptuts_review_director_output.'
 Schriftsteller: '. $ _ wptuts_review_writer_output.'
 Sterne: '. $ _ wptuts_review_stars_output.'
 Genre: '. $ _ wptuts_review_genre_output.'
 Laufzeit: '. $ _ wptuts_review_runtime_output.'
 Storyline: '. $ _ wptuts_review_storyline_output.'
 
 
'; return $ output;

Das CSS

Natürlich können Sie Ihr Review-Feld beliebig gestalten. Wenn Sie keine Lust dazu haben, können Sie unsere verwenden:

 .Review-Box Breite: 550px; Rand: 1px durchgezogen #DDD; Rand-Radius: 5px; Rand: 10px; .review-box-image float: rechts; Breite: 150px; Rand: 10px durchgehender #fff; Rand- width: 0 0 10px 10px; Marge: 10px 10px 0 0; .review-box-list margin: 10px; Abstand: 0; list-style: none; .review-box-list li margin-bottom: 5px ; padding-top: 5px; border-top: 1px solid #EEE; .review-box-list li: Erstes Kind border-top: 0; .review-box-list li strong Anzeige: Inline-Block Breite: 75px;

Wenn Sie das Überprüfungsfeld nach links oder rechts verschieben möchten, vergessen Sie nicht, das Kontrollkästchen hinzuzufügen Schwimmer: links; (oder schweben rechts;) Erklärung für .Review-Box. Sie können es sogar zentrieren, indem Sie das ändern Marge: 10px; Erklärung in Marge: 10px auto;.

Schritt 3 Erstellen des Shortcodes zum Wiederholen der Funktion

Wir wissen, wie man die Informationen einstellt, wir wissen, wie man die Informationen erhält ... Jetzt ist es an der Zeit, dass wir Show die Info :)

Wir können die Box immer am Ende (oder am Anfang) des Posts automatisch wie folgt hinzufügen:

 Funktion wptuts_review_box_add ($ content) $ review_box = wptuts_review_box (); // Das Feld am Ende des Beitrags anzeigen: return $ content. $ review_box; // Das Feld am Anfang des Beitrags anzeigen: // return $ review_box. $ content;  add_action ('the_content', 'wptuts_review_box_add');

Aber was ist, wenn wir die Box einschließen wollen Innerhalb die Post? Das ist, wo mein Lieblingsteil nützlich ist: Shortcodes!

Dieser Schritt wäre sogar noch einfacher als der vorige, da wir tatsächlich alle Arbeit geleistet haben, um das Überprüfungsfeld zu laden. Alles was wir tun müssen, ist die Funktion als Shortcode wie folgt aufzurufen:

 add_shortcode ('reviewbox', 'wptuts_review_box');

Folgendes haben Sie, wenn Sie den oben genannten Schritten genau so folgen, wie sie geschrieben wurden:

Einpacken

Diese Überprüfungsboxen können für viele verschiedene Überprüfungen wie Software, Websites, Bücher, Fernsehsendungen usw. verwendet werden. Wenn Sie kreativ werden können, können Sie sie sogar in normalen Blogs verwenden, um Spaß zu haben!

Einige zu überprüfende Artikel

Um den Code vollständig zu verstehen und sogar zu verbessern, sollten Sie einige andere Artikel von Wptuts + lesen:

Erstellen von benutzerdefinierten WordPress-Schreib- / Metaboxen (Sie sollten diesen Artikel lesen, wenn Sie die Konzept von benutzerdefinierten Meta-Boxen.)
So integrieren Sie den WordPress Media Uploader in Design- und Plugin-Optionen (Dies kann hilfreich sein, wenn Sie Ihren Autoren das direkte Hochladen der Überprüfungsbilder ermöglichen möchten.)
Datenbereinigung und -validierung mit WordPress (Ein großartiger Artikel über die Datenbereinigung. Denken Sie daran: Sie können sich selbst nicht trauen!)

Möchten Sie etwas verbessern oder haben Sie eine Idee? Teilen Sie uns Ihre Gedanken mit, indem Sie unten kommentieren.

Code