webentwicklung-frage-antwort-db.com.de

Die richtige Art, JavaScript und CSS in meine WordPress-Themes aufzunehmen

Ich versuche, mein eigenes Wordpress-Theme mit den richtigen Methoden zu erstellen. Aber...

Das erste Problem, das ich fand, war, wie man CSS und JS "auf die richtige Weise" hinzufügt.

Ich fand mehrere Tutorials, wie man es macht. Beispiel: http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402(dies ist vom "30-Jun-2014 ")und dieses http://code.tutsplus.com/articles/how-in-clude-javascript-and-css-in Ihrem-wordpress-themes-and-plugins--wp -24321(dies ist vom "14-Feb-2012")Sie erklären den gleichen Weg.

Ich habe mir auch das Thema "25" angeschaut und es auf eine andere Art und Weise betrachtet.

Lassen Sie es mich mit Code erklären:

Wenn ich den beiden Tutorials von "tutsplus" folge, sieht mein Code zum Hinzufügen von CSS und JS folgendermaßen aus:

<?php

function scripts() {
    wp_register_style(
        'bootstrap', 
        get_template_directory_uri() . '/css/bootstrap.min.css',
        '3.3.1',
    );
    wp_enqueue_style( 'bootstrap' );
}

function mytheme_enqueue_style() {
    wp_enqueue_style( 'bootstrap', get_stylesheet_uri() ); 
    }
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

?>

Wenn ich der Art und Weise folge, wie das Thema "Fünfundzwanzig" erstellt wurde, sieht mein Code folgendermaßen aus:

<?php
function scripts() {

    // Load bootstrap.
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', '3.3.1' );

add_action( 'wp_enqueue_scripts', 'scripts' );
?>

Ich mag das letzte, weil es weniger Code und klarer ist, aber ich weiß nicht, ob "der richtige Weg".

Natürlich habe ich den CODEX gelesen, aber für mich ist es nicht klar, denn es gibt Beispiele mit beiden Möglichkeiten. Und auch ich habe ähnliche Fragen gefunden, aber meine Frage nicht beantwortet. Einfügen von jQuery- und JavaScript-Dateien auf die richtige Weise und Wie lassen sich Dateien mit eigenen jQuery-Skripten und CSS in das Wordpress TwentyTen-Thema einfügen?

Ich hoffe, ein Experte oder kein Experte für WP kann mir helfen.

Vielen Dank! :)

2
andresgl

Ziemlich einfache Antwort ist, dass beide die richtige sind. In der ersten Methode brechen Sie den Prozess in zwei Schritten ab. Dies ist für den Fall erforderlich, dass Sie einige Skripte registrieren, sie aber zu einem späteren Zeitpunkt bedingt laden möchten. Beispielsweise möchten Sie möglicherweise nur ein Skript laden, wenn für ein zweites Skript dieses erste Skript erforderlich ist. In diesem Fall können Sie einfach Ihr erstes Skript registrieren und während Sie das zweite Skript in die Warteschlange stellen, können Sie das Handle Ihres ersten Skripts als Abhängigkeit angeben.

Eine klarere Erklärung ist think jquery. Wordpress registriert es standardmäßig für Sie. Wenn Sie jquery in Ihrer Site verwenden möchten, können Sie es entweder einfach in die Warteschlange stellen oder ein anderes Skript in die Warteschlange stellen, das von jQuery abhängig ist.

Wenn Sie Ihre Skripte sofort verwenden möchten, ist die andere Methode recht kurz und übersichtlich.

2
Varun Kumar

Ich habe mein eigenes Thema für Projektzwecke entwickelt. Es ist besser, eine separate Datei zu verwenden, um alle js- und css-Dateien aufzurufen, die nur für den Administrationsbereich und nicht für Frontend-Anzeigen benötigt werden.

Geben Sie in Ihrer Themes function.php like ein

require get_template_directory() . '/inc/adminscripts.php'; 

Erstellen Sie im Themenordner einen Ordner 'inc' und fügen Sie hier die Datei 'adminscripts.php' ein.

// adminscripts.php //

function theme_admin_scripts() {

global $typenow;
    if( $typenow == 'post' ) {
        wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
    }  // to include a style in posts only
 wp_enqueue_script( 'custom_script_includes', get_template_directory_uri() . '/inc/js/custom_javascript_file.js', array(), '1.0.0', true );
}

add_action('admin_enqueue_scripts', 'theme_admin_scripts');

erstelle zwei ordner wie css und js in inc ordner und lade die dateien hier hoch

0
Asha Krishna