Weitere Tipps für Best Practices in der WordPress-Entwicklung

Willkommen zum zweiten Teil der Serie. Im ersten Artikel haben wir die WordPress-Codierungsstandards erläutert, wie Sie Namenskollisionen vermeiden, Kommentare im Code und einige grundlegende Sicherheitstipps.

Heute werden wir ein wenig tiefer gehen und etwas mehr Code schreiben und einige Techniken lernen, um die Leistung und Sicherheit unserer Plugins zu verbessern. Die Themen, die wir behandeln werden, lauten wie folgt:

Wie und wann sollten meine Skripte / Stile einbezogen werden?
Wie man Ajax-Anrufe richtig ausführt
Filter und Aktion, um Ihren Benutzern Freiheit zu geben

Schnappen Sie sich Ihren Code-Editor und machen Sie sich bereit, mit WordPress zu spielen!

Wie und wann sollte ich meine Skripte einschließen??

Das erste, was Sie beachten müssen, ist, dass WordPress zwei wunderbare Funktionen hat (wp_enqueue_script und wp_enqueue_style), damit Sie Ihre Skripte und Stile einfügen können. Bitte fügen Sie sie nicht manuell in die Kopfzeile oder mit ein wp_head Aktionshaken.

Wenn Sie die WordPress-Methoden verwenden, können Zwischenspeichern und Minimieren von Plugins Ihre Skripts in ihre Funktionen einschließen. Sie können wählen, ob sie in Fußzeile oder Kopfzeile platziert werden sollen. Sie können abhängige Skripts hinzufügen und auch alle verwenden Tricks unten erklärt, zusammen mit anderen Funktionen.

Falsch:

add_action ('wp_head', 'my_custom_scripts'); Funktion my_custom_scripts () echo '';

Richtig:

add_action ('wp_enqueue_scripts', 'my_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true);

Ich werde Ihnen nicht ein komplettes Tutorial zur Verwendung von wp_enqueue_xxxx geben, da es viele davon gibt (und der Codex ist eine großartige Ressource!). Ich versuche einfach zu zeigen, wie Sie Skripte in Ihre Designs oder Plugins einfügen.

Was du brauchst immer Denken Sie daran, den geringsten Fußabdruck zu hinterlassen. Dies bedeutet, dass Sie keine Dateien einschließen sollten, an denen sie nicht vorhanden sein sollten.

Sie denken vielleicht "es ist nur eine Datei, die Website ist davon nicht betroffen" und mit dieser Denkweise ist es, als würde man im Park eine Zeitung in den Boden werfen, weil es nur ein einziges Stück Papier ist, aber so funktionieren die Dinge nicht: Wenn Alle Entwickler verlassen ihre Skripts überall, der Endbenutzer wird mit einer völlig aufgeblähten Site enden, und das wollen wir nicht.

Nun, da wir uns damit befasst haben, sehen wir einige Tipps, wie Sie Ihre Skripts nur bei Bedarf einfügen können.

1. Fügen Sie niemals Front-End-Dateien in das Backend ein und umgekehrt

// NUR FRONT END add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true);  // BACKEND ONLY add_action ('admin_enqueue_scripts', 'my_back_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true);

Aber warte! Gehen wir noch einen Schritt weiter und fügen Sie nur Skripts in die Seiten ein, die Sie wirklich benötigen. Eine gute Methode ist es, sie zuerst zu registrieren und dann in die benötigten Seiten einzufügen

2. Dateien nur auf den benötigten Seiten einschließen

// NUR FRONT END add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); if (is_page ('meine-Seite')) wp_enqueue_script ('script-handler');  // Sei kreativ, um Dateien nur dann einzuschließen, wenn dies erforderlich ist // if (is_single ()) // if (is_home ()) // if ('cpt-name' == get_post_type ()) // BACKENDEND NUR add_action (' admin_enqueue_scripts ',' my_back_customs_scripts '); function my_customs_scripts ($ hook) wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // Nur bei der Bearbeitung eines Beitrags einfügen if ('edit.php' == $ hook) wp_enqueue_script ('script-handler');  // Wenn Sie eine Optionsseite wie diese hinzugefügt haben // $ plugin_screen_id = add_options_page (…) // können Sie $ screen = get_current_screen (); if ($ plugin_screen_id == $ screen-> id) wp_enqueue_script ('script-handler');  / * Eine andere Methode zur Verwendung der Bildschirm-ID * / add_action ('admin_print_styles-'. $ Plugin_screen_id, 'my_back_customs_scripts');

3. Werden Sie Skripts zur Verwendung mit Shortcodes in die Warteschlange stellen?

// NUR FRONT END add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // Wenn Sie ein Skript für einen Shortcode einschließen möchten // Fügen Sie es nicht überall hinzu // Stattdessen können Sie es nur hinzufügen, wenn es erforderlich ist. global $ post; if (is_a ($ post, 'WP_Post') && has_shortcode ($ post-> post_content, 'custom-shortcode')) wp_enqueue_script ('script-handler');

4. Stile mit Bedingungen einschließen

Während die anderen Codeausschnitte sowohl für Skripts als auch für Stile gelten, funktionieren die folgenden nur mit wp_enqueue_style (Zumindest für jetzt).

// NUR FRONT END add_action ('wp_enqueue_scripts', 'my_front_customs_styles'); function my_front_customs_styles () wp_register_style ('my-plugin-css', plugins_url ('mein-plugin / css / plugin.css')); // Fügen wir diese CSS nur für alte (und beschissene) Browser ein. Wp_enqueue_style ('my-plugin-css'); globale $ wp_styles; $ wp_styles-> add_data ('my-plugin-css', 'conditional', 'lte IE 9');

Im Codex finden Sie einige weitere Beispiele. Ein weiteres hervorragendes Beispiel, mit dem Sie alle Plugins starten können, ist die WordPress Plugin Boilerplate. Sehen Sie sich den Code an, um zu sehen, wie Skripts und Stile enthalten sind. Das Wpfavs-Plugin (basierend auf WordPress Plugin Boilerplate) ist ein gutes Beispiel für das Erstellen eines Plugins für das Backend von Wordpress.

2. So führen Sie Ajax-Anrufe ordnungsgemäß aus

Für dieses Thema werde ich einige schlechte Gewohnheiten teilen, die ich bei der Arbeit mit Ajax in WordPress häufig gesehen habe. Diese könnten in die folgenden Sätze unterteilt werden:

Ajax-Aufrufe sollten nicht direkt in eine Datei ausgeführt werden
Ajax-Anrufe sollten einen Nonce-Wert verwenden
Überprüfen Sie ggf. die Benutzerberechtigungen
JavaScript-Variablen sollten mit einbezogen werden wp_localize_script

Ich weiß, dass jQuery Ajax-Aufrufe zu einem Kinderspiel macht, und wir können einfach eine Datei mit dem Namen erstellen ajax.php, umfassenwp-load.php darauf und mache unseren Ajax dort. Aber das ist nicht der "WordPress-Weg" - es ist nicht zukunftssicher. Darüber hinaus ist es weniger sicher und Sie werden viele WordPress-Funktionen verpassen.

Der richtige Weg ist die Verwendung der wp_ajax_my_action und wp_ajax_nopriv_my_action Aktionshaken. Der Hauptunterschied zwischen den beiden ist, dass der erste für protokollierte Benutzer und der zweite für nicht protokollierte Benutzer verwendet wird.

Beachten Sie, dass "my_action" für Ihren Aktionsnamen geändert werden muss. Wir werden gleich sehen, wie das funktioniert.

Lassen Sie uns all das in einem einfachen Beispiel mit etwas Code und Phantasie sehen. Stellen wir uns vor, wir möchten 5 Beiträge anzeigen, wenn ein Benutzer (angemeldet oder nicht) auf eine Schaltfläche klickt. Wir werden diese Aktion als nennen cool_ajax_example, Also fangen wir an, die Ajax-Callback-Funktionen hinzuzufügen, die die Daten zurückgeben.

Sie können diesen Code in Ihre einfügen Functions.php oder in Ihrem Plugin.

// Zuerst fügen wir die Aktions-Hooks hinzu. Add_action ('wp_ajax_cool_ajax_example', 'cool_ajax_example_callback'); add_action ('wp_ajax_nopriv_cool_ajax_example', 'cool_ajax_example_callback'); Funktion cool_ajax_example_callback () …

Wie Sie sehen, verwenden beide Hooks dieselbe Callback-Funktion, die die Daten zurückgibt. Beachten Sie auch, dass unsere Aktion am Ende des Hakennamens steht wp_ajax_cool_ajax_example

Es ist sehr wichtigden Action-Namen überall zu schreiben oder das funktioniert überhaupt nicht.

Bevor wir mit der Rückruffunktion fortfahren, gehen wir zu der für den Ajax-Aufruf benötigten jQuery über. Das jQuery-Skript wird ausgelöst, wenn wir auf eine einfache HTML-Schaltfläche klicken, und wir müssen diese Anfrage an den senden admin-ajax.php Datei, dass es das Skript ist, das alle AJAX-Anforderungen in Wordpress verarbeitet. Wir müssen auch ein Nonce hinzufügen, da wir bereits gesagt haben, dass wir es sicher machen wollen wp_localize_script Funktion.

Wenn Sie Ihre Skripts auf die richtige Art und Weise hinzugefügt haben, wie zu Beginn dieses Artikels erläutert, haben Sie einen Namen für den Skript-Handler (in unseren Beispielen oberhalb von "Skript-Handler"). Übertragen Sie daher unsere PHP-Werte in unsere Javascript-Datei. Sie können dieses Bit direkt nach dem einfügen wp_enqueue_function verwendet, um das JavaScript einzuschließen.

wp_localize_script ('script-handler', 'MyVarName', array ('ajax_url' => admin_url ('admin-ajax.php'), 'nonce' => wp_create_nonce ('return_posts'));

Wie du siehst wp_localize_script ist eine ziemlich einfache Möglichkeit, jede PHP-Variable an unsere JavaScript-Dateien zu übergeben Stichworte. Der obige Code wird in der Kopfzeile gedruckt, wenn die JavaScript-Datei mit Skript-Handler Der Name wird geladen und es sieht ungefähr so aus:

Nun ist es an der Zeit, unsere Javascript-Datei zu erstellen, nennen wir sie my.js und es wird ungefähr so aussehen:

(function ($) $ (function () $ ('# button')) click (Funktion (e) e.preventDefault (); $ .ajax (url: meinVarName.ajax_url, data: action: ' cool_ajax_example ', nonce: meinVarName.nonce, success: function (Antwort) $ (' # response-container '). html (Antwort);, Typ: "POST",););); ) (jQuery);

Bitte beachten Sie, wie wir die Nonce verwenden und ajax_url dass wir mit bestanden haben wp_localize_script. Vergewissern Sie sich auch, dass wir einen POST-Wert namens "action" übergeben, der dem Aktionsnamen entspricht, den wir in verwendet haben wp_ajax Haken.

Nun ist es Zeit, unsere Callback-Funktion zu beenden. Das erste, was wir tun müssen, ist zu prüfen, ob die Nonce richtig ist, und dann können wir einige Posts zurückgeben.

Funktion cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Das erste, was wir tun, ist, die Nonce zu überprüfen und das Skript zu beenden, falls es falsch ist, wenn (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // The Query $ the_query = new WP_Query ($ args); // Die Schleife if ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); Echo ''. get_the_title (). '
';  Echo '
';  else echo 'Posts nicht gefunden';  / * Originalpostdaten wiederherstellen * / wp_reset_postdata (); // Vergiss das nicht // Wir machen einen einfachen Anruf, wir wollen nichts anderes laufen lassen die ();

Für den Fall, dass Sie etwas komplexeres wie das Löschen eines Beitrags benötigen, überprüfen Sie immer die Benutzerberechtigungen, wie ich bereits beim Beginn dieses Themas erwähnt habe. Wenn Sie beispielsweise möchten, dass nur Administratoren bestimmte Aktionen ausführen, können Sie in Ihrem Skript Folgendes ausführen:

if (current_user_can ('administrator')) wp_delete_post ($ postid, $ force_delete);

Mit all den oben genannten Tipps sind Sie jetzt ein Meister in WordPress Ajax und können jede gewünschte Aktion ausführen. Versuchen Sie, mit dem oben genannten zu spielen und passen Sie es an Ihre Bedürfnisse an. Ich persönlich mag es zu benutzen Json Datentyp und ich mache echo json_encode () Anstatt einfache Echos mit meinen Skripten zu machen, ist das eine andere Sache.

`3. Filter und Aktionen`

Der Zweck dieses Abschnitts besteht nicht darin, Ihnen zu zeigen, wie Filter und Aktionen funktionieren. Es gibt ausgezeichnete Tutorials zu diesem Thema, die es ausführlich erklären. Was ich hier erklären werde, ist, warum Sie Filter und Aktionen zu Ihren Plugins hinzufügen und einige Beispiele zum besseren Verständnis zeigen sollten.

Aber zuerst machen wir eine Einführung in diese Konzepte:

  Haken: Ein Aktions-Hook wird an einem bestimmten Punkt Ihres Plugins hinzugefügt, normalerweise um wichtige Aktionen (z. B. vor Inhalt, nach Inhalt). Jeder Benutzer kann sich dann mit Funktionen "einhaken", um seinen Code an dieser Stelle ausführen zu lassen. Wenn ein Aktions-Hook ausgeführt wird, werden auch alle damit verbundenen Funktionen ausgeführt.
  Filter: Ein Filterhaken wird auch in Ihrem Plugin platziert, damit andere Funktionen eingebunden werden können. In diesem Fall ermöglichen Filter, dass Daten vor ihrer Verwendung bearbeitet oder geändert werden. Daher platzieren Sie es in der Regel mit Variablen, die die Benutzer bearbeiten dürfen.

Überprüf den Plugin-API Weitere Informationen zu Action-Hooks und -Filtern.

`Warum sollte ich mein Plugin erweiterbar machen??`

Es ist ganz einfach: Weil es dein Plugin verbessert. Auf diese Weise können Entwickler und normale Benutzer gemeinsam das Plugin über den ursprünglichen Zweck hinaus erweitern, anpassen oder verbessern, ohne den Kern des Plugins zu beeinträchtigen.

Nehmen Sie zum Beispiel ein eCommerce-Plugin. Dank der Hooks und Filter können Sie neue Plugins erstellen, die sich darin einhaken, wie z. B. neue Zahlungsgateways, Versandfunktionen und vieles mehr.

`Klingt gut, aber wo sollte ich sie auf meinem Plugin hinzufügen?`

Lassen Sie sich nicht durch das Hinzufügen von Aktionen und Filtern überall verrückt werden. Am Anfang werden Sie dies etwas schwierig oder ärgerlich finden. Versuchen Sie also, als wären Sie ein anderer Entwickler, der sich ein neues Plugin angesehen hat, und fragen Sie sich: "Brauche ich hier einen Action-Hook?". Ein großer Prozentsatz an Aktionen und Filtern wird bei Bedarf hinzugefügt, sobald Sie Supportanfragen erhalten (ja, Sie erhalten sie immer!) Oder Feedback von Ihren Benutzern.

Wie alles im Leben, wenn dies zur Gewohnheit wird, werden Sie deutlich sehen, wo Sie sie einschließen sollen.

Einige Empfehlungen, wo Filter eingefügt werden sollen:

 Wenn Arrays eingerichtet sind, ist es eine gute Option, einen Filter hinzuzufügen, damit Benutzer sie ändern können.
 Wenn Datenobjekte eingerichtet werden, passiert dasselbe. Sie möchten, dass Benutzer das Objekt vor der Verwendung ändern können
 Wenn Datenzeichenfolgen eingerichtet sind, können Sie Filter hinzufügen, damit Benutzer sie ändern können.

Verwenden Sie die in diesem Artikel verwendete Rückruffunktion, um ein Beispiel für die oben genannten Empfehlungen zu sehen. Um in diesem Fall filterbare Variablen zu erstellen, verwenden wir apply_filters ()

Funktion cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Das erste, was wir tun, ist, die Nonce zu überprüfen und das Skript zu beenden, wenn es falsch ist, wenn (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!');  $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // Die Abfrage $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // Die Schleife if ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); Echo ''. get_the_title (). '
';  Echo '
';  else echo 'Posts nicht gefunden';  / * Originalpostdaten wiederherstellen * / wp_reset_postdata (); // Vergiss das nicht // Wir machen einen einfachen Anruf, wir wollen nichts anderes laufen lassen die ();

Wie Sie sehen, habe ich einen Filter hinzugefügt $ args Variable, die direkt vorher ausgeführt wird WP_Query führt die Abfrage aus. Mit einem einfachen Filter kann jeder Benutzer ändern, wie viele Beiträge zurückgegeben werden.

Funktion wpt_alter_coolajax_query ($ args) $ args ['posts_per_page'] = 10; return $ args;  add_filter ('cool_ajax_query', 'wpt_alter_coolajax_query');

Sie können Filter in verschiedenen Szenarien verwenden. Verwenden Sie einfach Ihre Vorstellungskraft. Zum Beispiel in meinem Plugin WordPress Social Invitations erlaube ich Benutzern, das Popup-Stylesheet mit einem Filter zu ändern, falls sie einen anderen Stil verwenden.

Oder bei dieser Gelegenheit, wenn das Plugin E-Mails verschickt, gebe ich die Möglichkeit, das "Von E-Mail" zu ändern wp_mail () wird verwenden.

function get_from_email () if (isset ($ this -> _ user_data)) return apply_filters ('wsi_from_email', $ this -> _ user_data-> user_email);  return apply_filters ('wsi_from_email', get_bloginfo ('admin_email')) zurückgeben;

Wenn es um Aktionen geht, ändert sich das ein bisschen. Sie möchten Aktions-Hooks in den folgenden Szenarien hinzufügen (nicht beschränkt auf):

 bevor Aufgabe ausgeführt wird,
 nachdem Aufgaben ausgeführt wurden,
 werden während der Task ausgeführt, um beispielsweise Markup zu erweitern.

Um diese hakenbaren Bereiche zu erstellen, verwenden wir die do_action () Funktion. Wenden wir sie in unserem Beispiel an.

Funktion cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Das erste, was wir tun, ist, die Nonce zu überprüfen und das Skript zu beenden, falls es falsch ist, wenn (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // Die Abfrage $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // Die Schleife if ($ the_query-> have_posts ()) // Wir führen den Hook aus, bevor die Schleife verarbeitet wird. Do_action ('cool_ajax_before_loop', get_the_ID ()); Echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); // wir starten den Hook, bevor der Titel gedruckt wird do_action ('cool_ajax_before_title', get_the_ID ()); Echo ''. get_the_title (). '
'; // Wir starten den Hook, nachdem der Titel gedruckt wurde. do_action ('cool_ajax_after_title', get_the_ID ());  Echo '
'; // Wir führen den Hook aus, nachdem die Schleife abgearbeitet wurde. do_action ('cool_ajax_after_loop', get_the_ID ());  else echo 'Posts nicht gefunden';  / * Originalpostdaten wiederherstellen * / wp_reset_postdata (); // Vergiss das nicht // Wir machen einen einfachen Anruf, wir wollen nichts anderes laufen lassen die ();

Wie Sie sehen können, gebe ich ein Argument an die Hooks mit get_the_ID () . Jede Funktion, die sich in unseren Aktions-Hook einfügt, kann dieses Argument verwenden. Sehen wir uns einige Beispiele an:

/ ** * Zeige vorgestellten Titelbild vor dem Titel * / function wpt_show_post_image ($ post_id) echo get_the_post_thumbnail ($ post_id, 'thumbnail');  add_action ('cool_ajax_before_title', 'wpt_show_post_image'); / ** * Postkategorien nach Titel anzeigen * / function wpt_show_post_cats ($ post_id) echo get_the_category_list (",", $ post_id);  add_action ('cool_ajax_after_title', 'wpt_show_post_cats');

Sie können auch verwenden do_action () Hooks, um andere Aktionen auszuführen, anstatt ein neues Markup hinzuzufügen (siehe obiges Beispiel). In WordPress Social Invitations beispielsweise habe ich einen Aktions-Hook, der jedes Mal ausgelöst wird, wenn eine Nachricht gesendet wird. Dann mit myCRED plugin Ich kann die Aktion "geben" mit dem Benutzer verknüpfen, der die Nachricht gerade gesendet hat.

Da Sie sehen, dass das Hinzufügen von Hooks und Filtern nicht nur Ihrem Plugin zugute kommt, sondern auch anderen Entwicklern und Benutzern. Warum fangen Sie also nicht an, einige Filter und Aktionen hinzuzufügen??

`Fazit`

Heute haben wir gelernt, wie man Skripte und Stile einbindet, wie Ajax die WordPress-Methode bezeichnet und einige grundlegende Tipps für Filter und Aktionen. Wir haben bereits viele Informationen, um ein schönes Plugin zu entwickeln, und ich kann jetzt sagen, dass diese Serien dem Ende nah sind.

Im anstehenden und letzten Artikel werde ich über Internationalisierung, Debugging und Dokumentation sprechen, um die Dinge auf den Punkt zu bringen, von denen ich denke, dass sie bei der Entwicklung eines Plugins die wichtigsten Punkte sind.