WordPress Tutorial: Wie man ein Testimonials Plugin erstellt

Also, hier sind wir für unser zweites wöchentliches Tutorial WordPress. Wir haben gelernt, wie man eine erstellt 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:

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:

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
Description: Display customer testimonials.
Version: 1.0
Author: Web Revenue Blog
License: GPL2
*/

//enqueueing scripts and styles
function 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 Post-Typ-Funktion create_post_type () {register_post_type ('Testimonials', // neues Post-Typ-Array ('Labels' => Array ('Name' => __ ('Testimonials'), 'Singular_Name') => __ ('Testimonial')), 'public' => true, / * Der Beitragstyp ist für die öffentliche Verwendung vorgesehen. Dies gilt auch für das Front-End und in wp-admin. * / 'Unterstützt' => 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-Meta-Box-Feldfunktion add_custom_metabox () {add_meta_box ('custom-metabox', __ ('Link'), 'url_custom_metabox', 'Testimonials', 'Seite', 'niedrig'); } 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-Bereichsfunktion 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 Nachricht ausgeben und http: // zum Eingabefeld hinzufügen if (isset ($ Errors)) {echo $ Errors; }?> URL: " />

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 Felddatenfunktion 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 eingerichtet ist, sieht Ihre neue Testimonial-Seite folgendermaßen aus:

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.

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

Jetzt können wir die Shortcode-Funktion starten. Eine einfache Möglichkeit, die Shortcode-Daten als Standard festzulegen und zu validieren, besteht darin, die Attribute für die Schleife als Array zu erstellen, damit wir bei Bedarf neue Elemente hinzufügen können:

// Registrieren des Shortcodes zum Anzeigen 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 einige hinzufügen HTML Quelltext dort nach der Standardstruktur von flexslider. So wird es aussehen:

Echo ' '; Echo ' '; foreach ($ posts as $ post) {// Daumenbild abrufen $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)); $ link = get_url ($ post); Echo ' '; if (! empty ($ url_thumb)) {echo ' '; } echo ' '. $ post-> post_title.' '; if (! empty ($ post-> post_content)) {echo ' '. $ post-> post_content.' '; } if (! empty ($ link)) {echo ' Site besuchen '; } echo ' '; } echo ' '; Echo ' ';

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!