Enqueue, Register & Load CSS und JavaScript mit WordPress

Ich bin ein Anfänger in WordPress, gibt es in WordPress eine Möglichkeit, eine JS/CSS-Datei auf eine bestimmte Seite zu laden, wenn eine Seite aufgerufen wird, und sie auf einer anderen nicht zu laden?

Wird geladen scripts und stylesheet von dem function.php Datei ist die beste Praxis mit WordPress.

Das Hinzufügen von Skripten und Stilen zu WordPress ist ein ziemlich einfacher Vorgang. Im Wesentlichen erstellen Sie eine Funktion, die alle Ihre Skripte und Stile in die Warteschlange einreiht.

Quelle @ https://developer.wordpress.org/themes/basics/inclusive-css-javascript/

Bei WordPress können Sie sich registrieren script und stylesheet bevor es tatsächlich in die Warteschlange gestellt wird. Wir verwenden einige wirklich praktische Funktionen namens wp_register_script / wp_register_style zum scripts und wp_enqueue_script / wp_enqueue_style zum stylesheet. Sie sollten aufpassen und sich über die Funktionsargumente informieren

Zusammen mit einigen bedingten Tags und Funktionen bauen wir am Ende wirklich komplexe Verhaltensweisen auf, um bedingt zu registrieren und in die Warteschlange einzureihen scripts und stylesheet auf unseren Themen und Seiten. Sie sollten aufpassen und sich über die Funktionsargumente informieren.

Die Bedingungs-Tags können in Ihren Vorlagendateien verwendet werden, um zu ändern, welche Inhalte angezeigt werden und wie diese Inhalte auf einer bestimmten Seite angezeigt werden, je nachdem, welche Bedingungen diese Seite erfüllt.

Quelle @ https://codex.wordpress.org/Conditional_Tags

Zum Beispiel is_home(), is_search(), is_single() oder is_page()… kann zum bedingten Registrieren und Einreihen verwendet werden scripts und stylesheet auf unseren verschiedenen Seiten.

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if( ! is_admin() ) {

    /**
    * Register then enqueue jquery_js
    * @link https://developer.wordpress.org/reference/functions/wp_register_script/
    * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    */
    wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
    wp_enqueue_script( 'jquery_js' );
  };
}; ?>

In diesem Beispiel wollen wir nur unsere einreihen jquery-3.5.1.min.js wenn wir uns auf einer anderen Seite als der eines Administrators befinden, verwenden Sie if ( ! is_admin() )....

Registrieren, Enqueue und CDNs

script und stylesheet kann lokal oder auf einem anderen Server gehostet werden (zB: CDNs). Bei der Verwendung von CDNs möchten wir sicherstellen, dass die Quelle verfügbar ist. Wir können benutzen @fopen(); um sicherzustellen, dass das CDN erreichbar ist, und falls nicht, einen Fallback bereitstellen:

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if( ! is_admin() ) {

    /**
    * Register then enqueue jquery_js
    * @link https://developer.wordpress.org/reference/functions/wp_register_script/
    * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    *
    * Check if CDN's url is valid, if not return fallback
    * @link https://www.php.net/manual/en/function.fopen.php
    */
    $test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
    if( $test_jquery_js !== false ) {
      wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', true );
    } else {
      wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
    };
    wp_enqueue_script( 'jquery_js' );
  };
}; ?>

Attribute hinzufügen (zB: Crossorigin, Integrity)

Manchmal ist es erforderlich, Attribute hinzuzufügen script und stylesheet -Tags, um sie ordnungsgemäß in die Warteschlange einzureihen. Verwendung der script_loader_tag oder style_loader_tag Hook, wir können genau das tun:

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if( ! is_admin() ) {

    /**
    * Register then enqueue jquery_js
    * @link https://developer.wordpress.org/reference/functions/wp_register_script/
    * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    *
    * Check if CDN's url is valid, if not return fallback
    * @link https://www.php.net/manual/en/function.fopen.php
    *
    * Add rel="preload" <link> and required attributes to jquery_js
    * Filters the HTML link tag of an enqueued style & add required attributes
    * @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
    */
    $test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
    if( $test_jquery_js !== false ) {
      wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', true );
    } else {
      wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
    };
    wp_enqueue_script( 'jquery_js' );

    add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
    function data_jquery_js( $tag, $handle, $src ) {
      if( $handle === 'jquery_js' ) {
        $integrity = 'sha256...';
        $tag = str_replace(
          array(
            "<script",
            "></script>",
          ),
          array(
            "<link rel="preload prefetch" href="https://stackoverflow.com/questions/65378914/" . esc_url( $src ) . "" as="script" integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
            "integrity='" . $integrity . "' crossorigin='anonymous' async></script>",
          ),
          $tag
        );
      };
      return $tag;
    };
  };
}; ?>

Hier fügen wir eine hinzu preload Link-Tag, das crossorigin, integrity und der async Attribut.

Immer anmelden?

Wenn Sie Ihre nicht registrieren müssen script oder stylesheet Bevor Sie es in die Warteschlange stellen, können Sie es tatsächlich ignorieren. z.B:

wp_enqueue_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true  );

Hier registrieren wir unser Skript nicht und springen direkt zum Enqueue.

jQuery bereits Teil des WordPress-Kerns?

Bei WordPress ist jQuery normalerweise vorregistriert und wird mit dem Kern geliefert. Wenn Sie Ihre eigene Version einreihen möchten, MÜSSEN Sie die jQuery-Kernversion deregistrieren.

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if( ! is_admin() ) {

    /**
    * Deregister WordPress jquery core version
    * @link https://developer.wordpress.org/reference/functions/wp_deregister_script/
    */
    wp_deregister_script( 'jquery' );

    //...here goes the rest of your function...
  };
}; ?>

Einreihen und registrieren a script oder stylesheet auf der Admin-Seite

Mit dem Aktions-Hook admin_enqueue_scripts können Sie genau das tun.

<?php
do_action( 'admin_enqueue_scripts', 'admin_scripts' );
function admin_scripts() {
  //...here goes the rest of your function...
}; ?>

Mehr erfahren

• wp_register_script @ https://developer.wordpress.org/reference/functions/wp_register_script/.
• wp_register_style @ https://developer.wordpress.org/reference/functions/wp_register_style/.
• wp_enqueue_script @ https://developer.wordpress.org/reference/functions/wp_enqueue_script/.
• wp_enqueue_style @ https://developer.wordpress.org/reference/functions/wp_enqueue_style/.
• fopen() @ https://www.php.net/manual/en/function.fopen.php.
• script_loader_tag @ https://developer.wordpress.org/reference/hooks/script_loader_tag/

Sie könnten eine if-Anweisung zu Ihrer hinzufügen <head> in header.php.

<?php if (is_page($id)) { ?>
#css or js here
<?php } ?>

Ersetzen $id mit der ID oder dem Slug der Seite, die Sie laden möchten <script> oder <style> An.