Skripte & Styles in WordPress registrieren

Hier eine kleine Anleitung, wie man Skripte & Styles in WordPress einbindet.

Es muss beachtet werden, das man Skripte & Styles im Frontend und im Backend registrieren muss. In der Hook „add_action()“ muss dafür der erste Parameter angepasst werden.

• Frontend = wp_enqueue_scripts
• Backend = admin_enqueue_scripts

Frontend

// Register Frontend Scripts & Styles
function reg_enqueue_scripts() {

}

add_action( 'wp_enqueue_scripts', 'reg_enqueue_scripts' );Code-Sprache: JavaScript (javascript)

Backend

// Register Admin Scripts & Styles
function reg_admin_enqueue_scripts() {

}

add_action('admin_enqueue_scripts', 'reg_admin_enqueue_scripts');Code-Sprache: JavaScript (javascript)

Man kann das Skript auch nur unter bestimmten Bedingungen anzeigen lassen z.B.:

• is_single()
• is_front_page()
• is_home
• is_admin etc. 

Hier nochmal eine kleine Übersicht mit Beispiel.

• is_single( ’17’ ) – verwendet die Post-ID
• is_single( ‘My Post Title’ ) – Verwendet den Titel des Beitrags, um zu überprüfen, ob dies der Beitrag ist, zu dem die Datei hinzugefügt werden soll
• is_single( ‘my-post-title’ ) – Verwendet die URL-Titelform
• is_single( array( 17, ‘my-post-title’, ‚My Post Title’ ) ) – Hiermit wird überprüft, ob eine der Bedingungen zutrifft

function reg_enqueue_scripts() {
  if( is_single('17') ) {
    wp_enqueue_script('my-custom', plugins_url( '/js/my-custom.js', __FILE__ ), array('jquery'), '1.4', false);
  } 
}

add_action('wp_enqueue_scripts', 'reg_enqueue_scripts');Code-Sprache: PHP (php)

Eine ausführliche Übersicht zu den ganzen findet man hier.

Jetzt schauen wir uns mal den Befehl zum registrieren von Skripten & Styles an.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );Code-Sprache: PHP (php)

1. $handle = Name der JavaScript-Datei.
2. $src = Pfad zur JavaScript-Datei
3. $deps = Hier können noch Parameter, mit einem array übergeben werden, wenn unser JavaScript z.B. jquery nutzt
4. $ver = JavaScript-Version
5. $in_footer = Standardmäßig ist der Wert „false“, was bedeutet, dass die JavaScript-Datei dem header hinzugefügt wird.

Es gibt mehrere Möglichkeiten ein Pfad zu definieren, je nachdem wo das JavaScript abgelegt wurde.

// JavaScript-Datei im Plugin-Ordner
wp_enqueue_script('my-custom', plugins_url( '/js/my-custom.js', __FILE__ ), array('jquery'), '1.4', false);

// JavaScript-Datei im Template-Ordner
wp_enqueue_script('my-custom', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.4', false);Code-Sprache: PHP (php)

Wenn man in PHP mit Klassen arbeitet, sollte die Action-Hook so aussehen, um die Funktion aufzurufen

add_action( 'wp_enqueue_scripts', array( $this, 'reg_enqueue_scripts' ) );Code-Sprache: PHP (php)

ganzer Code für ein Plugin

<?php
/*
Plugin Name: My Plugin
Description: My Plugin
Version: 0.0.1
Author: Inge
Author URI: http://page.com/
*/

/*
Damit unsere PHP-Datei nicht von außerhalb unserer WordPress-Instanz ausgeführt werden kann,
überprüfen wir nach dem Header-Kommentar ob die Konstante „ABSPATH“ gesetzt ist.
Die Konstante „ABSPATH“ wird in der „wp-config.php“ definiert und beinhaltet den absoluten Dateipfad zur WordPress Installation.
*/

defined( 'ABSPATH' ) or die( 'Are you ok?' );

require_once 'myCustomFile.php';

$mainPlugin = new MainPlugin();

class MainPlugin{
  private $myCustomFile;

      public function __construct() {
        // init Klassen von anderen Files
        $this->myCustomFile= new MyCustomFile();

        // Add Scripts & Styles
        add_action( 'wp_enqueue_scripts', array( $this, 'reg_enqueue_scripts' ) );
        add_action('admin_enqueue_scripts', array( $this, 'reg_admin_enqueue_scripts' ));

        // Wird nur ausgeführt, wenn das Plugin aktiviert wird
        register_activation_hook( __FILE__, array( $this, 'set_activate' ) );

        // Wird nur ausgeführt, wenn das Plugin deaktiviert wird
        register_deactivation_hook(__FILE__, array( $this, 'set_deactivation' ) );

        // Wird immer ausgeführt
        add_action( 'init', array( $this, 'init_code' ) );
    }

    public function set_activate(){

    }

    public function set_deactivation(){

    }

    public function init_code(){

    }

    // Registriere Frontend Scripts & Styles
    function reg_enqueue_scripts() {
        $dir = plugins_url('/js/myFile.js', __FILE__ );
        wp_enqueue_script('myFile', $dir);
    }

    // Registriere Admin Scripts & Styles
    function reg_admin_enqueue_scripts() {
        $dir = plugins_url('/js/myFile.js', __FILE__ );
        wp_enqueue_script('myFile', $dir);
    }
}

?>Code-Sprache: HTML, XML (xml)