Die effizienteste Methode, um Javascript-Dateien zu bestimmten Posts und / oder Seiten hinzuzufügen?


17

Ich frage mich, was die effizienteste Methode ist, eine Javascript-Datei speziell für einen Beitrag und / oder eine Seite hinzuzufügen.

Hier sind einige Lösungen, die ich mir ausgedacht habe:

  • Wechseln Sie zur HTML-Bearbeitungsansicht und veröffentlichen Sie dort Ihr JavaScript (ziemlich schlechte Lösung)
  • Benutzerdefinierte Felder mit dem spezifischen JavaScript für diesen Beitrag / diese Seite in den Schlüssel- und Wertepaaren
  • Laden Sie in der Datei footer.php JavaScript-Dateien, je nachdem, auf welcher Seite Sie sich befinden (dies führt jedoch zu vielen Bedingungen).

Nebenbei bemerkt, keine der JavaScript-Dateien wird zwischen den Seiten geteilt - es wird buchstäblich spezifisch für das sein, was Sie gerade anzeigen.

Irgendwelche Gedanken?


Meta-Boxen / benutzerdefinierte Felder sind Ihre beste Option
Miha Rekar

Wie würden Sie Effizienz definieren?
fuxia

1
Mit "effizient" meine ich die geringste Menge an Code-Redundanz und den effektivsten Weg, dies speziell für einen einzelnen Beitrag / eine einzelne Seite zu tun.
mousesports

Antworten:


29

Ich denke, das beste Gleichgewicht zwischen Effizienz und der Verwendung geeigneter WordPress-Methoden zum Hinzufügen von Javascript ist das Hinzufügen von etwas in diese Richtung zu Ihrer Datei themes functions.php. Beispielsweise:

functions.php:

function load_scripts() {
    global $post;

    if( is_page() || is_single() )
    {
        switch($post->post_name) // post_name is the post slug which is more consistent for matching to here
        {
            case 'home':
                wp_enqueue_script('home', get_template_directory_uri() . '/js/home.js', array('jquery'), '', false);
                break;
            case 'about-page':
                wp_enqueue_script('about', get_template_directory_uri() . '/js/about-page.js', array('jquery'), '', true);
                break;
            case 'some-post':
                wp_enqueue_script('somepost', get_template_directory_uri() . '/js/somepost.js', array('jquery'), '1.6', true);
                break;
        }
    } 
}

add_action('wp_enqueue_scripts', 'load_scripts');

Dies gibt Ihnen die volle Kontrolle darüber, was wohin geladen wird, einen zentralen Ort in Ihrer Datei themes functions.php, an dem Sie bearbeiten können, was wohin geladen wird. Auf diese Weise können Sie Ihren Posts und Seiten mit WordPress-Methoden sicher Javascript hinzufügen .


1
Schöne kleine Funktion. Sie haben Recht damit, dass es nützlich ist, einen "zentralisierten Standort" zu haben. Vielen Dank.
Mousesports

3
Ich denke, das kann ein bisschen aufgeräumt werden. Sie überprüfen im Grunde dasselbe mit zwei verschiedenen Schaltergehäusen. Ich würde sagen, kombinieren Sie beide Switch-Cases und das bedingte, wenn es sein könnte if (is_page() || is_single()). Was denkst du, Ben?
mousesports

Klingt für mich nach einer Verbesserung. Guter!
Ben HartLenn

@Ben ist es die functions.php ein inside theme oder in wp-includes ? Mein Seitentitel lautet Zugriff auf Home Online und ich habe Ihre Funktion geändert home, Access to Home Onlineaber es funktioniert nicht.
Ciasto piekarz

@Ciastopiekarz Ich habe meine Antwort aktualisiert, um besser zu zeigen, dass der Code in Ihrer Datei themes functions.php enthalten ist.
Ben HartLenn

2

Was ich tun würde, ist entweder in der Fußzeile oder in der Kopfzeile zu platzieren und PHP-Bedingungen zu verwenden.

Beispielsweise:

<?php if (is_page ('your-page')){?>

  <script type="text/javascript" src"the file path"></script>

<?php } elseif ( is_page ('another')){?>

  <script type="text/javascript" src"the file path"></script>

<?php } else { ?>

  <script type="text/javascript" src"the file path"></script>

<?php } ?>

Auf diese Weise rufen Sie nicht immer alle Skripte auf jeder Seite auf und rufen nur die auf, die Sie benötigen.

Hier ist ein Link zum Wordpress-Codex http://codex.wordpress.org/Conditional_Tags

Und wenn Sie spezielle Skripte haben, die möglicherweise nur nachträglich aufgerufen werden müssen, verwenden Sie benutzerdefinierte Felder.


Danke Nicole - das war # 3. Es ist eine anständige Lösung, wenn man bedenkt, dass ich nicht viele Seiten haben werde.
mousesports

Was ich oben angegeben habe, kann mit den verschiedenen Elementen des WordPress-Codex verwendet werden, z.
Nicole

0

Der andere getestete Weg ist unten, fügen Sie eine Seite direkt aus dem Editor hinzu und fügen Sie Kommentare mit dem Skript-Tag hinzu, ansonsten funktioniert es nicht.

<script type="text/javascript">
<!--
var a = 5;
alert("hello world. The value of a is: " + a);
-->
</script>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.