WordPress Tutorial: Wie man ein Testimonials Plugin erstellt

Artikel geschrieben von:
  • WordPress
  • Aktualisiert: Aug 12, 2013

Also, hier sind wir für unsere zweite wöchentliche Anleitung zu WordPress. Wir haben gelernt, wie man ein unendlich scrollende WP-Site und Seiten-Flip-Plugin in der Vergangenheit. Heute erfahren wir ein wenig mehr über benutzerdefinierte Post-Typen und wie sie ihre Daten laden.

Diese Funktion ist auf Ihrer Website sehr wichtig, da Sie damit Personen zeigen können, die Sie empfehlen. Testimonials sind ein großer sozialer Beweis für Ihre Großartigkeit. Und Sie brauchen keine komplexen Plugins oder viel Code, um dies zu erreichen, wie Sie mit ein paar Dateien sehen können, können Sie eine sexy Präsentation für Ihre Testimonials erstellen.

Lass uns dann anfangen!

Zip & Install

Wenn Sie es eilig haben, dies zu überprüfen, können Sie das tun herunterladen und installieren Sie es.

Sie müssen dann einige Daten hinzufügen, indem Sie einige Testimonials mit den brandneuen Testimonials hinzufügen, die Sie in Ihrem Dashboard sehen können:

Liste-Zeugnisse

Dann können Sie den grundlegenden Shortcode verwenden, um das zu laden:

[Erfahrungsberichte rand = 0 max = 5]

Wenn Sie diesen Code hinzugefügt haben, sehen Sie auf Ihrer Seite Folgendes:

Haupt-Zeugnisse

Jetzt werden wir sehen, wie man das erstellt und erforscht (indem man weitere Funktionen hinzufügt und das Aussehen ändert).

Die Grundlagen

Wie bereits erwähnt, müssen Sie das hinzufügen Header-Metadaten, erstellen Sie die Plugin-Datei und rufen Sie Ihre Skripte. Lange Rede, kurzer Sinn: Sie erstellen einen neuen Ordner unter Ihrem wp-content / plugins mit dem Namen Ihres Plugins und erstellen dann eine Datei mit dem gleichen Namen wie der Ordner, der Ihre Haupt-Plugin-Datei sein soll.

Sobald Sie das Kopieren und Einfügen wie folgt ausgeführt haben:

<? php / * Plugin Name: Testimonials Beschreibung: Kundenreferenzen anzeigen. Version: 1.0 Autor: Web Revenue Blog Lizenz: GPL2 * / // Enqueueing-Skripts und -Stile Funktion plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('flexslider', plugins_url ('js / jquery.flexslider-min.js', __FILE__), array ('jquery'), '2.2', false); wp_enqueue_script ('testimonials', plugins_url ('js / testimonials.js', __FILE__), array ('jquery'), '1.0', false); wp_enqueue_style ('flexsliderCSS', plugins_url ('css / flexslider.css', __FILE__), false, '2.2', 'all'); wp_enqueue_style ('testimonialsCSS', plugins_url ('css / testimonials.css', __FILE__), false, '1.0', 'all'); } add_action ("wp_enqueue_scripts", "plugin_scripts");

Hier ist, was wir machen:

  • Dem WP mitteilen, wie unser Plugin heißt, Autor, was es tut
  • Erstellen einer Funktion, in die wir reguläre Skripte (wie jQuery) und benutzerdefinierte Skripte (wie flexslider) und Stylesheets einfügen
  • Der WP wird mitgeteilt, dass sie die Skriptfunktion in ihrem Standardskriptsaufruf laden soll, damit sie tatsächlich in die Seiten geladen wird

Es ist alles ziemlich cool, aber vergessen Sie nicht, die Dateien unter / js und / css zu erstellen. Sie können sie einfach in unseren Demo-Inhalten herunterladen, so dass Sie nicht viel nach den flexslider-Dateien suchen müssen.

Jetzt haben wir alle grundlegenden Dinge an Ort und Stelle können wir den lustigen Teil beginnen.

Der benutzerdefinierte Beitragstyp

Standardmäßig hat WordPress gemeinsame Post-Typen, Seiten und Posts von 2. Aber es hat auch viele interne Post-Typen (wie Anhänge), so dass die "Post-Typ" -Definition ist: Jede Art von Daten, die Sie speichern müssen.

Da unser Plugin eine neue Funktionalität erstellt, hat WP keinen eingebauten Ort, um das zu speichern, also müssen wir das erstellen. Hab keine Angst, kleine Grashüpfer, es ist ganz einfach, du kannst diesen Code benutzen:

// die schwarze Magie zum Erstellen der Posttyp-Funktion create_post_type () {register_post_type ('testimonials', // neues posttyparray ('labels' => array ('name' => __ ('testimonials'), 'singular_name') => __ ('Testimonial')), 'public' => true, / * Der Pfosten-Typ ist für die öffentliche Verwendung gedacht, dies gilt für das Frontend und für wp-admin. * / 'Support' => array ('title ',' editor ',' thumbnail ',' custom_fields '),' hierarchical '=> false)); }

Hier verwenden wir nur die Funktion register_post_type (), um WP zu sagen "Hey Buddy, wir müssen diese Art von Daten speichern, bitte sei bereit, sie zu empfangen".

Wir sagen ihm auch, dass diese Art von Daten "Testimonials" genannt werden, sie sollten für den öffentlichen Zugriff verfügbar sein (damit sie tatsächlich einen neuen Menüeintrag in Ihrem Dashboard dafür erstellen), die Felder, die wir brauchen, und wenn sie hierarchisch sind oder nicht (wie Seiten mit Eltern- und Kinderseiten).

Dann müssen wir es jedes Mal aufrufen, wenn wir WordPress laden. Dieser Haken wird es tun:

add_action ('init', 'create_post_type');

Die benutzerdefinierten Felder

Jetzt haben unsere benutzerdefinierten Post-Typ den Titel (Personenname), den Inhalt (Person Testimonial), ein Bild (Featured Bild), aber es fehlt ein Link, denn wenn die Person nett genug ist, über Sie zu sprechen, sollten Sie zumindest zu verknüpfen ihre Seite, oder?

Wir könnten dies mit üblichen benutzerdefinierten Feldern tun, aber es ist viel besser, ein "geschlossenes" Feld zu haben, in das der Benutzer den Feldnamen nicht eingeben muss und in dem Sie einige Validierungsregeln hinzufügen können.

Zuerst müssen wir eine neue Metabox erstellen, das sind die netten Panels, die Sie in Ihrem Post-Edit-Bereich haben, jedes kleine Panel ist eine Metabox. Diese Funktion erstellt und ruft sie auf:

// Hinzufügen der URL-MetaBox-Feldfunktion add_custom_metabox () {add_meta_box ('custom-metabox', __ ('Link'), 'url_custom_metabox', 'testimonials', 'side', 'low'); } add_action ('admin_init', 'add_custom_metabox');

Die Funktion add_meta_box () benötigt diese Parameter:

  1. ID - Der eindeutige Bezeichner dafür. Sie können hier alles einzigartige verwenden wie "Einhorn-Essen-Regenbogen" oder "Testimonial-Link". Alles, was intern genutzt werden kann
  2. Titel - Was wird für den Benutzer angezeigt? Hier ist es wichtig, die __ () -Funktion zu verwenden, es ist die Funktion, die es Benutzern von Fremdsprachen erlaubt, Ihr Plugin mit .po-Dateien zu übersetzen (ohne Plugin-Dateien zu bearbeiten).
  3. Callback - Die Funktion, in der Sie den eigentlichen Inhalt der Metabox haben
  4. Post Type - In unserem Fall möchten wir, dass es nur für Testimonials sichtbar ist
  5. Kontext - Wo auf der Seite möchten Sie es anzeigen?
  6. Priorität - Wenn es vor anderen Elementen der gleichen Position oder nach ihnen sein sollte

Jetzt müssen wir die url_custom_metabox () Funktion erstellen, da wir sie aufgerufen haben.

// HTML für die Admin-Area-Funktion url_custom_metabox () {global $ post; $ urllink = get_post_meta ($ post-> ID, 'urllink', true); // validieren! if (! preg_match ("/ http (s?): ///", $ urllink) && $ urllink! = "") {$ errors = "Diese URL ist ungültig"; $ urllink = "http: //"; } // invlid url message ausgeben und http: // zum Eingabefeld hinzufügen if (isset ($ errors)) {echo $ errors; }?> <p> <label for = "siteurl"> URL: <br /> <input id = "siteurl" size = "37" name = "siteurl" value = "<? php if (isset ($ urllink) ) {echo $ urllink;}?> "/> </ label> </ p> <? php}

Ok, übersetze das jetzt ins Englische:

  • Die globale Variable $ post wird aufgerufen, damit wir wissen können, welches die POSTID des aktuellen Elements ist
  • Wir laden den aktuellen Wert für die URL
  • Wir überprüfen, ob der Wert, den der Benutzer eingegeben hat, gültig ist. Wenn mindestens ein "http" oder "https" auftritt, ist der Wert OK, ansonsten ist er gültig und wir müssen den Standardwert verwenden
  • Dann zeigen wir die Fehler, wenn es welche gibt
  • Jetzt starten wir den eigentlichen HTML-Code und fügen den Standardwert in das Eingabefeld ein, wie wir ihn in PHP haben

Nach diesem Punkt müssen wir tatsächlich speichern, was vom Benutzer gesendet wird. Wir verwenden den Hook "save_post", damit WordPress bei jedem Speichern eines Posts diese Funktion aufruft:

// speichert benutzerdefinierte Felddaten function save_custom_url ($ post_id) {global $ post; if (isset ($ _ POST ['siteurl'])) {update_post_meta ($ post-> ID, 'urllink', $ _POST ['siteurl']); }} add_action ('save_post', 'save_custom_url');

Hier überprüfen wir nur, ob es irgendwelche Postdaten namens "Sitelink" gibt, was unser Feldname ist. Wenn es einen Sitelink gibt, speichern wir ihn.

Nachdem alles vorhanden ist, wird Ihre neue Testimonialseite folgendermaßen aussehen:

neues Zeugnis

Laden unserer benutzerdefinierten Daten

Jetzt müssen wir unsere Elemente tatsächlich laden, und wir werden die Funktion get_posts () verwenden, hauptsächlich weil wir nur einfache Daten haben, so dass wir keine richtige WP-Schleife benötigen (die viele DB-Aufrufe hinzufügen würde und wir wirklich nicht brauche es nicht).

Also, lasst uns zuerst eine Funktion erstellen, um den Link unserer Seite zu bekommen, falls es welche gibt.

// Rückgabe-URL für eine Post-Funktion get_url ($ post) {$ urllink = get_post_meta ($ post-> ID, 'urllink', true); return $ urllink; }

Nun können wir die Shortcode-Funktion starten. Eine einfache Möglichkeit, die Shortcode-Daten als Standard festzulegen und zu validieren, ist das Erstellen der Attribute für die Schleife als Array, sodass wir neue Elemente hinzufügen können, wenn wir sie benötigen:

// Registrieren des Shortcodes zur Anzeige der Testimonials Funktion load_testimonials ($ a) {$ args = array ("post_type" => "testimonials"); if (isset ($ a ['rand']) && $ a ['rand'] == true) {$ args ['orderby'] = 'rand'; } if (isset ($ a ['max'])) {$ args ['posts_per_page'] = (int) $ a ['max']; } // Alle Testimonials abrufen $ posts = get_posts ($ args); // HTML OUTPUT} add_shortcode ("testimonials", "load_testimonials");

Wie Sie sehen können, haben wir die Shortcode-Attribute geladen und an das $ args-Array übergeben, wenn sie validieren, in dem Format, das WordPress benötigt, damit wir Posts mit ihnen laden können.

Jetzt müssen wir etwas HTML-Code hinzufügen, der der Standardstruktur von Flexslider folgt. So wird es aussehen:

Echo '<div>'; Echo '<ul>'; foreach ($ posts as $ post) {// Abrufen des Thumb-Images $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)); $ link = get_url ($ post); Echo '<li>'; if (! empty ($ url_thumb)) {echo '<img src = "'. $ url_thumb. '" />'; } echo '<h2>'. $ post-> post_title. '</ h2>'; if (! leer ($ post-> post_content)) {echo '<p>'. $ post-> post_content. '<br />'; } if (! empty ($ link)) {echo '<a href="'.$link.'"> Website besuchen </a> </ p>'; } Echo '</ li>'; } Echo '</ ul>'; Echo '</ div>';

Warten Sie, aber warum sollten wir den HTML-Code innerhalb der PHP-Funktion erstellen? Das liegt daran, dass Inhalte nur dann bedingt geladen werden können, wenn der Nutzer Inhalte hinzugefügt hat, sodass Sie keine leeren HTML-Tags haben, die nur darauf warten, Ihr Layout zu beschädigen.

Was ist mit der Seitenleiste?

Die meisten Leute möchten nur Testimonials in der Seitenleiste anzeigen, und dieses Plugin wird nicht wirklich gut funktionieren, da Text-Widgets keine Shortcodes verarbeiten. Dafür gibt es eine einfache Lösung, fügen Sie diese einfach in Ihren Code ein:

add_filter ('widget_text', 'do_shortcode');

Was kommt als nächstes?

Also, hat dir dieses Tutorial gefallen? Was würdest du als Option für deinen Testimonial-Shortcode hinzufügen? Hast du Ideen für zukünftige Posts? Lass es uns wissen, indem du den Kommentarbereich verwendest!

Über Rochester Oliveira

Ich bin ein Webdesigner und Unternehmer aus Itajubá (MG), Brasilien. Ich liebe es, über obskure Themen zu schreiben und coole Sachen zu machen.

Verbinden: