Einschließlich eines Github-Jquery-Plugins in WordPress

Lesezeit: 7 Minuten

Benutzer-Avatar
Jake C.

Ich versuche, ein Plugin von github (https://github.com/rendro/countdown) der richtige Weg auf meiner WordPress-Seite. Nach stundenlanger Recherche im Codex und hier im Stack kann ich immer noch keinen Weg finden, es zum Laufen zu bringen.

Wenn ich die Standardmethode verwende:

1) Hinzufügen dieser Zeilen zum <head> von meinen header.php Datei:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.countdown.js"></script>

2) Zwischendurch das Plugin mit meiner Wunschkonfiguration initialisieren </head> und <body> in meinem header.php Datei, in diesem Fall: 

<script>

    $(function() {
        var endDate = "November 30, 2015 10:00:00";

            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
                }
            });
    });

</script>

3) Und dann das Plugin in meiner HTML-Datei aufrufen:

<?php if(is_front_page() ) { ?>

    <div id="cdtoevent" class="countcont">
    <div class="countdown styled"></div>
    </div>

<?php } ?>

Es funktioniert perfekt!

Wenn ich es aber versuche der richtige Weg

(Wenn ich das richtig verstehe, wird WordPress standardmäßig mit jQuery ausgeliefert. Wenn ich die Standardmethode verwende, bringe ich den Benutzer dazu, jquery zweimal herunterzuladen, was auch meine Ladezeit verlängert, oder?)

Das bedeutet, dass ich jquery und dann mein Skript in my einreihen muss functions.php Datei so:

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

Und dann wiederholen Sie einfach Schritt 2) und 3) der Standardmethode nicht Arbeit ! Ich habe versucht, meinen Jquery-Code in Schritt 2) wie folgt zu verpacken:

jQuery(document).ready(function( $ ) {

    // $ Works! You can test it with next line if you like
    // console.log($);

});

Aber es funktioniert immer noch nicht. Wenn jemand helfen könnte, wäre es wirklich sehr zu schätzen!

Was ich aktuell in meinem habe header.php:

<?php if(is_front_page() ) { ?>

     <div id="cdtoevent" class="countcont">
     <div class="countdown styled"></div>
     </div>

<?php } ?>

Was ich aktuell in meinem habe footer.php:

<script type="text/javascript">

    $(function() {
        var endDate = "November 14, 2015 10:00:00";

            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                        $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
            }
        });
    });

</script>

Was ich aktuell in meinem habe functions.php :

// Loads JavaScript file with functionality specific to LCQC.

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

Das jquery-Plugin (.js)

  • Skript ein head macht die Website langsam. Es ist besser, das Skript direkt vor dem schließenden Body-Tag zu verwenden. Auf diese Weise wird der gesamte Inhalt geladen. Wenn das erledigt ist, wird das Javascript geladen. Auf diese Weise sieht der Benutzer bereits etwas.

    – SuperDJ

    4. November 2015 um 15:33 Uhr

  • Mein script-Tag befindet sich zwischen my </head> und <body> Tags und nicht in <head>. Danke aber für diesen kleinen Tipp. Das werde ich auf jeden Fall ändern!

    – Jake C.

    4. November 2015 um 15:39 Uhr

  • Wie funktioniert es nicht? Irgendein Fehler in der Konsole?

    – war

    4. November 2015 um 17:34 Uhr

  • Ich bekam Fehler wie „Uncaught TypeError: $ is not a function“ und andere. Aber ich habe es endlich zum Laufen gebracht, mein Fehler war hauptsächlich, wo ich meine Funktion in meiner function.php-Datei platziert hatte.

    – Jake C.

    4. November 2015 um 17:42 Uhr

Es ist eine gute Idee, eine Funktion zu verwenden, um Ihr Skript in die Warteschlange einzureihen. Aber: wo rufst du diese Funktion auf? Sie müssen es aufrufen, um Ihr Skript einzureihen. Der beste Weg, dies zu tun, besteht darin, es an die richtige Aktion anzuhängen (wp_enqueue_scripts): add_action('wp_enqueue_scripts', 'add_cdtoevent');.

Ich habe dazu eine Anleitung geschrieben einschließlich Skripte in WordPress wenn Sie weitere Informationen zu dieser Funktion wünschen. Es ist nützlich zu wissen, wie es funktioniert, da Sie dann feststellen können, dass das manuelle Enqueuing von jQuery nutzlos ist: Sie haben angegeben, dass es sich um eine Abhängigkeit handelt, sodass WordPress sie bei Bedarf automatisch hinzufügt.

  • Ich habe Ihren Artikel heute Morgen tatsächlich gelesen! Ich habe das versucht: add_action( 'wp_enqueue_scripts', 'add_my_script' ); function add_my_script() { wp_enqueue_script( 'your-script', // name your script so that you can attach other scripts and de-register, etc. get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file array('jquery') // this array lists the scripts upon which your script depends ); } Aber es schien nicht zu funktionieren. Was Sie mir sagen, ist, dass ich “wp_enqueue_script(‘jquery’);” nicht brauche. seit ich “array” verwendet habe?

    – Jake C.

    4. November 2015 um 16:58 Uhr

  • Ich habe gerade meinen Beitrag bearbeitet, da dies (add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );) wurde bereits direkt nach meiner Funktion hinzugefügt. Ich bekomme aber immer noch diesen Fehler: “Uncaught TypeError: $ is not a function”. Je viens juste de voir que tu es français, que le monde est petit :’D.

    – Jake C.

    4. November 2015 um 17:08 Uhr

  • Vielleicht ein Problem in der Reihenfolge, in der Skripte enthalten sind? Wenn Ihr Skript versucht zu verwenden $ vor der Einbindung von jQuery funktioniert es nicht. Um sicherzustellen, dass Ihre Skripte in der richtigen Reihenfolge eingefügt werden, legen Sie Ihr Skript in einer externen Datei ab und stellen Sie diese Datei auf die gleiche Weise in die Warteschlange wie die anderen (mit dem jQuery-Plugin als Abhängigkeit). (Ich schreibe weiterhin auf Englisch, damit jeder die Antwort finden kann, wenn er sucht 🙂 )

    – Jeremy

    4. November 2015 um 17:38 Uhr

  • Ich habe die Lösung tatsächlich nur gefunden, nachdem ich alles Schritt für Schritt durchgegangen und alles überprüft habe. (Ich habe danach aus denselben Gründen weiter auf Englisch geschrieben, keine Sorge). Mein Hauptfehler war, dass ich meine Funktion und add_action innerhalb einer bestehenden Funktion platziert hatte. Es war immer noch schwer, die richtige Kombination zu finden, damit es funktioniert, aber ich habe es geschafft! Nochmals vielen Dank für deine Hilfe 🙂

    – Jake C.

    4. November 2015 um 17:45 Uhr

Benutzer-Avatar
Jake C.

Ich habe es endlich zum Laufen gebracht!

Erstens hatte ich dies verlegt, da es sich in einer anderen Funktion in meinem befand functions.php Datei..

// Loads JavaScript file with functionality specific to LCQC.

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

Danach stellte ich sicher, dass mein Skript so deklariert wurde (aufgrund der von WordPress verwendeten Variable noConflict()) direkt vor meinem schließenden Body-Tag:

<script type="text/javascript">

jQuery(document).ready(function($) {
    $(function() {
        var endDate = "November 14, 2015 10:00:00";
            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                        $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
            }
        });
    });
});

</script>

Und schließlich habe ich die folgenden Zeilen in jquery.countdown.js geändert:

jQuery.fn.countdown = function(options) {
  return $.each(this, function(i, el) {
    var $el = $(el);
    if (!$el.data(NAME)) {
      // allow setting the date via the data-date attribute
      if ($el.data(DATA_ATTR)) {
        options.date = $el.data(DATA_ATTR);
      }
      $el.data(NAME, new Countdown(el, options));
    }
  });
};

zu: 

jQuery(document).ready(function($) {
    jQuery.fn.countdown = function(options) {
      return $.each(this, function(i, el) {
        var $el = $(el);
        if (!$el.data(NAME)) {
          // allow setting the date via the data-date attribute
          if ($el.data(DATA_ATTR)) {
            options.date = $el.data(DATA_ATTR);
          }
          $el.data(NAME, new Countdown(el, options));
        }
      });
    };  
});

Ich danke Ihnen allen für Ihre Hilfe!

1205990cookie-checkEinschließlich eines Github-Jquery-Plugins in WordPress

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy