German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)
Willkommen im zweiten Teil der Serie. Im ersten Artikel haben wir die WordPress-Codierungsstandards erläutert, wie Sie Kollisionen von Namensräumen, Kommentare im Code und einige grundlegende Sicherheitstipps vermeiden können.
Heute werden wir etwas 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, sind wie folgt:
- Wie und wann sollte ich meine Skripte / Stile einbinden?
- Wie man richtig Ajaxanrufe durchführt
- Filter und Aktionen, um Ihren Benutzern die 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 einbeziehen?
Das erste, was Sie beachten müssen, ist, dass WordPress zwei wunderbare Funktionen (wp_enqueue_script
und wp_enqueue_style
) hat, damit Sie Ihre Skripte und Stile aufnehmen können. Zu diesem Zweck fügen Sie sie bitte nicht manuell in die Kopfzeile ein oder verwenden den wp_head
Aktions-Hook.
Wenn Sie die WordPress-Methoden verwenden, können Caching- und Minimierung-Plugins Ihre Skripte in ihre Funktionen einbinden, Sie können sie ganz einfach in Fußzeile oder Kopfzeile platzieren, Sie können abhängige Skripte hinzufügen und auch alle verwenden Tricks erklärt unten zusammen mit anderen Eigenschaften.
Falsch:
add_action( 'wp_head' , 'my_custom_scripts' ); function my_custom_scripts() { echo '<script src="src/to/my.js"></script>'; }
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 kein Tutorial geben, wie Sie wp_enqueue_xxxx benutzen können, da es viele davon gibt (und der Codex ist eine großartige Ressource!) Und ich versuche einfach darauf hinzuweisen, wie Sie Skripte in Ihre Themes oder Plugins einfügen sollten .
Was Sie immer im Hinterkopf behalten sollten, ist es, den leichtesten Fußabdruck zu hinterlassen. Das bedeutet, dass Sie Dateien nicht dort einfügen sollten, wo sie nicht sein sollten.
Du denkst vielleicht "es ist nur eine Datei, es wird die Webseite nicht beeinflussen" und mit dieser Einstellung ist es wie ein Papier in den Boden zu werfen, weil es nur ein Stück Papier ist, aber das ist nicht die Art wie die Dinge funktionieren: Wenn Alle Entwickler lassen ihre Skripte überall, der Endbenutzer endet mit einer völlig aufgeblähten Website und das wollen wir nicht.
Nun, da wir das behandelt haben, sehen wir uns einige Tipps an, wie Sie Ihre Skripts nur bei Bedarf einfügen können.
1. Fügen Sie niemals Frontend-Dateien im Backend und umgekehrt ein
// FRONT END ONLY 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 einen Schritt weiter und fügen Sie nur Skripte in die Seiten ein, die Sie wirklich benötigen. Eine gute Methode besteht darin, sie zuerst zu registrieren und dann in die benötigten Seiten einzuordnen
2. Dateien nur auf den benötigten Seiten einbeziehen
//FRONT END ONLY 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('my-page') ) { wp_enqueue_script( 'script-handler' ); } // Be creative to include files only when needed // if( is_single() ) // if( is_home() ) // if( 'cpt-name' == get_post_type() ) } //BACKENDEND ONLY 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 ); //To include it only when editing a post if( 'edit.php' == $hook ) { wp_enqueue_script( 'script-handler' ); } // If you added an options page like this // $plugin_screen_id = add_options_page(...) // you can do $screen = get_current_screen(); if ( $plugin_screen_id == $screen->id ) { wp_enqueue_script( 'script-handler' ); } } /* Another way to use screen id */ add_action( 'admin_print_styles-' . $plugin_screen_id, 'my_back_customs_scripts' );
3. Werden Skripte für die Verwendung mit Kurzwahlcodes gesperrt?
//FRONT END ONLY 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 you need a script to be included for a shortcode // Don't add it everywhere // Instead you can include it only when needed global $post; if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-shortcode') ) { wp_enqueue_script( 'script-handler'); } }
4. Fügen Sie Stile mit Bedingungen hinzu
Während die anderen Code-Snippets sowohl für Skripte als auch für Stile gelten, funktioniert das Folgende nur mit wp_enqueue_style
(zumindest für den Moment).
//FRONT END ONLY add_action( 'wp_enqueue_scripts', 'my_front_customs_styles' ); function my_front_customs_styles(){ wp_register_style( 'my-plugin-css', plugins_url( 'my-plugin/css/plugin.css' ) ); // Let's include this css only for old (and crappy) browsers wp_enqueue_style( 'my-plugin-css' ); global $wp_styles; $wp_styles->add_data('my-plugin-css', 'conditional', 'lte IE 9'); }
Sie können einige weitere Beispiele im Codex sehen. Ein weiteres hervorragendes Beispiel, das Sie verwenden können, um alle Ihre Plugins zu starten, ist das 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 dafür, wie man ein Plugin für das Backend von Wordpress erstellt.
2. Wie man richtig Ajax-Anrufe durchführt
Zu diesem Thema werde ich einige schlechte Angewohnheiten teilen, die ich bei Ajax in WordPress gesehen habe und sie könnten in die folgenden Sätze aufgeteilt werden:
- Ajax-Aufrufe sollten nicht direkt in einer Datei ausgeführt werden
- Ajax-Aufrufe sollten einen Nonce-Wert verwenden
- Überprüfen Sie bei Bedarf die Benutzerberechtigungen
- JavaScript-Variablen sollten in
wp_localize_script
enthalten sein
Ich weiß, dass jQuery Ajax-Aufrufe zu einem Kinderspiel macht, und wir können einfach eine Datei namens ajax.php
, includewp-load.php
darauf erstellen und unseren Ajax dort machen. Aber das ist nicht der "WordPress-Weg" - es ist nicht zukunftssicher. Mehr noch, es ist weniger sicher und Sie werden eine Menge WordPress-Funktionalität verpassen.
Der richtige Weg besteht darin, die Aktions-Hooks wp_ajax_my_action
und wp_ajax_nopriv_my_action
zu verwenden. Der Hauptunterschied besteht darin, dass der erste für angemeldete Benutzer und der zweite für nicht angemeldete Benutzer verwendet wird.
Beachten Sie, dass "my_action" für Ihren Aktionsnamen geändert werden sollte. Wir werden sehen, wie das in einem Moment funktioniert.
Lassen Sie uns all das in einem einfachen Beispiel mit ein wenig Code und Vorstellungskraft sehen. Stellen wir uns vor, wir möchten 5 Beiträge anzeigen, wenn ein Benutzer (eingeloggt oder nicht) auf eine Schaltfläche klickt. Wir nennen diese Aktion cool_ajax_example
, also beginnen wir mit dem Hinzufügen der Ajax-Callback-Funktionen, die die Daten zurückgeben.
Sie können diesen Code in Ihre functions.php
oder in Ihr Plugin einfügen.
//First we add the actions hooks add_action('wp_ajax_cool_ajax_example', 'cool_ajax_example_callback' ); add_action('wp_ajax_nopriv_cool_ajax_example', 'cool_ajax_example_callback' ); function cool_ajax_example_callback() { ... }
Wie Sie sehen können, verwenden beide Hooks dieselbe
Callback-Funktion, die die Daten zurückgibt. Beachten Sie auch, dass unser Aktionsname am Ende des Hook-Namens steht wp_ajax_cool_ajax_example
Es ist sehr wichtig, den Namen der Aktion überall zu schreiben, sonst funktioniert das überhaupt nicht.
Bevor wir mit der Callback-Funktion fortfahren, gehen wir zu der jQuery, die für den Ajax-Aufruf benötigt wird. Das jQuery-Skript wird ausgelöst, wenn wir eine einfache HTML-Schaltfläche drücken, und wir müssen diese Anforderung an die Datei admin-ajax.php
senden, die das Skript ist, das alle AJAX-Anforderungen in Wordpress verarbeitet. Außerdem müssen wir eine Nonce hinzufügen, da wir bereits gesagt haben, dass wir es sicher machen wollen, also kommt hier die wp_localize_script
-Funktion zum Einsatz.
Wenn Sie Ihre Skripte auf die richtige Weise wie am Anfang dieses Artikels beschrieben haben, haben Sie einen Skript-Handler-Namen (In unseren Beispielen oben 'script-handler'), also verwenden wir sie, um unsere PHP-Werte an unsere Javascript-Datei zu übergeben. Sie können dieses Codebeispiel direkt nach der wp_enqueue_function
einfügen, die zum Einschließen des JavaScript verwendet wurde.
wp_localize_script( 'script-handler', 'MyVarName', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'return_posts' ) ) );
Wie Sie sehen können, ist wp_localize_script
ein ziemlich einfacher Weg, um eine PHP-Variable an unsere JavaScript-Dateien zu übergeben, und es wird gültiges xhtml aufgrund <![CDATA[
der . Der obige Code wird in der Kopfzeile gedruckt, wenn die JavaScript-Datei mit dem Script-Handler
als Name geladen wird und ungefähr so aussieht:
<script type="text/javascript">/* <![CDATA[ */ var myVarName = {"ajax_url":"http:\/\/www.tutsplus.com\/wp-admin\/admin-ajax.php","nonce":"dsfsdf123r"}; /* ]]> */</script>
Jetzt ist es an der Zeit, unsere Javascript-Datei zu erstellen,
nennen wir sie my.js
und es sieht ungefähr so aus:
(function( $ ) { $(function() { $('#button').click(function(e){ e.preventDefault(); $.ajax({ url: myVarName.ajax_url, data: { action: 'cool_ajax_example', nonce : myVarName.nonce }, success: function( response ) { $('#response-container').html( response ); }, type: "POST", }); }); }); })( jQuery );
Bitte beachten Sie, wie wir die Nonce und Ajax_url
verwenden, die wir mit wp_localize_script
übergeben haben. Überprüfe auch, ob wir einen POST-Wert mit dem Namen "action" übergeben, der mit dem Aktionsnamen übereinstimmt, den wir in den wp_ajax
-Hooks verwendet haben.
Jetzt ist es an der Zeit, unsere Rückruffunktion zu beenden. Das erste, was wir tun müssen, ist zu überprüfen, dass die Nonce richtig ist und dann können wir einige Posts zurückgeben.
function cool_ajax_example_callback() { $nonce = $_POST['nonce']; //The first thing we do is check the nonce and kill the script if wrong if ( ! 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 ); // The Loop if ( $the_query->have_posts() ) { echo '<div class="myposts">'; while ( $the_query->have_posts() ) { $the_query->the_post(); echo '<h3>' . get_the_title() . '</h3>'; } echo '</div>'; } else { echo 'Posts not found'; } /* Restore original Post Data */ wp_reset_postdata(); // don't forget this // We are doing a simple call we don't want anything else to run die(); }
Falls Sie etwas komplizierteres tun müssen, wie das Löschen eines Posts, sollten Sie immer nach Benutzerberechtigungen suchen, wie ich zu Beginn dieses Themas erwähnt habe. Wenn Sie beispielsweise nur bestimmte Aktionen ausführen möchten, können Sie in Ihrem Skript Folgendes tun:
if( current_user_can( 'administrator' ) ) { wp_delete_post( $postid, $force_delete ); }
Mit allen oben genannten Tipps sind Sie jetzt ein Meister in WordPress Ajax und Sie 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 die Verwendung von JSON
-Datentyp und ich echo json_encode ()
statt einfache Echos in meinen Skripten zu tun, aber das ist eine andere Sache.
3. Filter und Aktionen
Der Zweck dieses Abschnitts ist nicht, Ihnen beizubringen, wie Filter und Aktionen funktionieren, es gibt ausgezeichnete Tutorials rund um das Thema, die es sehr detailliert erklären. Was ich hier erklären werde, ist, warum Sie Filter und Aktionen auf Ihren Plugins hinzufügen und Ihnen einige Beispiele zum besseren Verständnis zeigen sollten.
Aber machen wir zuerst eine Einführung in diese Konzepte:
- Hooks: Ein Action Hook wird an einer bestimmten Stelle des Plugins hinzugefügt, normalerweise um wichtige Aktionen herum (zB: vor dem Inhalt, nach dem Inhalt). Jeder Benutzer kann dann mit Funktionen "einhaken", um seinen Code an diesem Punkt ausführen zu lassen. Wenn ein Aktions-Hook ausgeführt wird, werden alle Funktionen ausgeführt, die mit ihm verbunden sind.
- Filter: Ein Filter Hook wird auch in Ihrem Plugin für andere Funktionen platziert, um sich daran zu binden. In diesem Fall ermöglichen Filter die Manipulation oder Änderung von Daten, bevor sie verwendet werden. Sie platzieren es also normalerweise mit Variablen, die Benutzer manipulieren sollen.
Weitere Informationen zu Aktionshaken und Filtern finden Sie in der Plugin-API.
Warum sollte ich mein Plugin erweiterbar machen?
Es ist ganz einfach: Weil es dein Plugin besser macht. Auf diese Weise können Entwickler und normale Benutzer zusammen Ihr Plug-in erweitern, anpassen oder verbessern, ohne den eigentlichen Kern zu verändern.
Nehmen Sie zum Beispiel ein E-Commerce-Plugin. Dank der Hooks und Filter können Sie neue Plugins erstellen, wie zum Beispiel neue Zahlungsgateways, Versandfunktionen und vieles mehr.
Klingt gut, aber wo sollte ich sie auf meinem Plugin hinzufügen?
Machen Sie sich nicht verrückt und fügen Sie überall Aktionen und Filter hinzu. Am Anfang wirst du das ein bisschen schwierig oder nervig finden, also versuche zu denken, als wärst du ein anderer Entwickler, der ein neues Plugin betrachtet und sich fragt "Brauche ich hier einen Action-Hook?". Auch ein riesiger Prozentsatz von Aktionen und Filtern wird bei Bedarf hinzugefügt, sobald Sie Support-Anfragen bekommen (ja, Sie bekommen sie immer!) Oder Feedback von Ihren Nutzern.
Wie alles im Leben, sobald dies eine Gewohnheit wird, werden Sie viel klar sehen, wo Sie sie einschließen.
Ein paar Empfehlungen für die Aufnahme von Filtern:
- Wenn Arrays eingerichtet werden, ist es eine gute Option, einen Filter hinzuzufügen, damit Benutzer sie ändern können.
- Wenn Datenobjekte eingerichtet werden, passiert dasselbe. Vielleicht möchten Sie, dass Benutzer das Objekt vor der Verwendung ändern
- Wenn Datenzeichenfolgen eingerichtet werden, können Sie Filter hinzufügen, damit Benutzer sie ändern können.
Verwenden wir die Rückruffunktion, die in diesem Artikel verwendet wird, um ein Beispiel für die obigen Empfehlungen zu sehen. Um filterbare Variablen in diesem Fall zu erstellen, verwenden wir apply_filters ()
function cool_ajax_example_callback() { $nonce = $_POST['nonce']; //The first thing we do is check the nonce and kill the script if wrong if ( ! 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( apply_filters( 'cool_ajax_query', $args ) ); // The Loop if ( $the_query->have_posts() ) { echo '<div class="myposts">'; while ( $the_query->have_posts() ) { $the_query->the_post(); echo '<h3>' . get_the_title() . '</h3>'; } echo '</div>'; } else { echo 'Posts not found'; } /* Restore original Post Data */ wp_reset_postdata(); // don't forget this // We are doing a simple call we don't want anything else to run die(); }
Wie Sie sehen können, habe ich der Variablen $ args
einen Filter hinzugefügt, der ausgeführt wird, bevor WP_Query
die Abfrage ausführt. Mit einem einfachen Filter kann jeder Benutzer zum Beispiel ändern, wie viele Beiträge zurückgegeben werden.
function 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, nutzen Sie einfach Ihre Fantasie. Zum Beispiel auf meinem Plugin WordPress Social Einladungen ich lassen Benutzer das Popup-Stylesheet mit einem Filter ändern, falls sie einen ganz anderen Stil haben.
<link rel="stylesheet" href="<?php echo apply_filters('collector_css_file',plugins_url( 'assets/css/collector.css?v='.$this->WPB_VERSION, __FILE__ ));?>" type="text/css" media="all">
Oder in diesem Fall, wenn das Plugin E-Mails sendet, gebe ich die Möglichkeit, die "Von E-Mail" zu ändern, die wp_mail ()
verwenden wird.
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' ) ); }
Wenn es um Aktionen geht, ändert sich das ein bisschen. Wenn es um Aktionen geht, ändert sich das ein bisschen. Sie möchten in den folgenden Szenarien (nicht beschränkt auf) Aktionshaken hinzufügen:
- bevor die Aufgabe ausgeführt wird,
- nachdem Aufgaben ausgeführt wurden,
- während der Aufgabe ausgeführt werden, um beispielsweise Markup zu verlängern.
Um diese hakbaren Bereiche zu erstellen, verwenden wir die Funktion do_action()
. Lassen Sie uns diese in unserem Beispiel anwenden.
function cool_ajax_example_callback() { $nonce = $_POST['nonce']; //The first thing we do is check the nonce and kill the script if wrong if ( ! 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( apply_filters( 'cool_ajax_query', $args ) ); // The Loop if ( $the_query->have_posts() ) { // we run the hook before the loop is proccesed do_action( 'cool_ajax_before_loop', get_the_ID() ); echo '<div class="myposts">'; while ( $the_query->have_posts() ) { $the_query->the_post(); // we run the hook before the title is printed do_action( 'cool_ajax_before_title', get_the_ID() ); echo '<h3>' . get_the_title() . '</h3>'; // we run the hook after the title is printed do_action( 'cool_ajax_after_title', get_the_ID() ); } echo '</div>'; // we run the hook after the loop is proccesed do_action( 'cool_ajax_after_loop', get_the_ID() ); } else { echo 'Posts not found'; } /* Restore original Post Data */ wp_reset_postdata(); // don't forget this // We are doing a simple call we don't want anything else to run die(); }
Wie Sie sehen können, übergebe ich ein Argument an die Hooks mit get_the_ID ()
. Jede Funktion, die sich in unseren Aktionshaken einklinkt, kann dieses Argument verwenden. Lass uns ein paar Beispiele sehen:
/** * Show post featured image before title */ 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' ); /** * Show post categories after title */ 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 do_action ()
- Hooks verwenden, um andere Aktionen auszuführen, anstatt ein neues Markup wie im obigen Beispiel hinzuzufügen. Zum Beispiel habe ich in WordPress Social Einladungen einen Aktionshaken, der jedes Mal ausgelöst wird, wenn eine Nachricht gesendet wird. Dann kann ich mit dem myCRED-Plugin die Aktion "Geben" an den Benutzer haken, der gerade die Nachricht gesendet hat.
Wie Sie sehen, wird das Hinzufügen von Hooks und Filtern nicht nur Ihrem Plugin, sondern auch anderen Entwicklern und Benutzern zugute kommen. Warum fängst du nicht an, einige Filter und Aktionen hinzuzufügen?
Fazit
Heute haben wir gelernt, wie man Skripte und Stile einbaut, wie Ajax den WordPress-Weg nennt und einige grundlegende Tipps für Filter und Aktionen. Wir haben bereits viele Informationen, um ein nettes Plugin zu entwickeln und ich kann jetzt sagen, dass diese Serien kurz vor dem Ende stehen.
Im kommenden und letzten Artikel werde ich über Internationalisierung, Debugging und Dokumentation sprechen, um Dinge zu besprechen, die ich bei der Entwicklung eines Plugins für die wichtigsten Dinge halte
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post