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

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