Einfügen Gridster in WordPress Vorlage

Question

Ich habe ein Problem mit meinem WordPress-Plugin, ich möchte Gridster in das Plugin einfügen, aber es funktioniert nicht.

Hier lade ich die Dateien, die im Ordner korrekt sind.

Und dies ist ein Codebeispiel der erwarteten Ausgabe, die natürlich nicht funktioniert.

echo' 

<section class="demo"> 
     <div class="gridster"> 
      <ul> 
       <li class="bg-blue" data-row="1" data-col="1" data-sizex="1" data-sizey="1">Box1</li> 
       <li class="bg-pink" data-row="1" data-col="2" data-sizex="1" data-sizey="1">Box2</li> 
       <li class="bg-pink" data-row="1" data-col="3" data-sizex="1" data-sizey="2">Box3</li> 
      </ul> 
     </div> 
    </section> 

    <script type="text/javascript"> 
    var gridster; 

    $(function() { 
     gridtster = $(".gridster > ul").gridster({ 
      widget_margins: [10, 10], 
      widget_base_dimensions: [140, 140], 
      min_cols: 6 
     }).data("gridster"); 
    }); 
</script>'; 

Ich versuchte, es in den Vorlagen Header-Datei sowie im Plugin einschließlich, aber es zeigt mir nur den Text, und ich bin ziehen sie nicht in der Lage.

Answer 1

Michael - gute Frage nochmal!

WordPress ist großartig, aber es gibt einige Tricks/Nuancen, wie es funktioniert.

Zuerst ist die Registrierung eines Skripts nützlich (wenn Sie zum Beispiel localize oder in Fällen möchten, wenn Sie es in der Fußzeile (mit einem separaten print_scripts) ausgeben möchten, aber ABER es tut die Skripte auf das Markup nicht ausgegeben.

Zusätzlich basiert auf, wo Sie sie registriert haben (im wp_register_script Haken), die Sie wollen, dass auch ändern.

Wenn alles, was Sie wollen, ist für Ihre Skripte Geben Sie den Code wie folgt ein:

function add_my_scripts() 
{ 
    // proper way to include jQuery that is packaged with WordPress 
    wp_enqueue_script('jquery'); 
    // Do not EVER include your own jquery. This will cause all sorts of problems for the users of your plugin! 
    // wp_enqueue_script("jquery-gridster", plugins_url('/js/jquery.min.js', __FILE__)); 
    // you need enqueue here. ALSO note the use of the $dependencies parameter - this plugin relies on jquery, so be sure to include that as a dependency! 
    wp_enqueue_script("gridster-script", plugins_url('/js/jquery.gridster.min.js', __FILE__ ), array('jquery')); 
    wp_enqueue_script("gridster-script-extra", plugins_url(  '/js/jquery. gridster.with-extras.min.js', __FILE__), array('gridster-script')); 

} 
// and you need to hook the enqueue action here... 
add_action('wp_enqueue_scripts', 'add_my_scripts'); 

Beachten Sie, dass, wenn dies nicht für Sie funktioniert, der nächste Schritt ist, die wiedergegebene Quelle anzuzeigen und zu sehen, was vor sich geht. Wenn Sie feststellen, dass dies nicht funktioniert, geben Sie Folgendes an:

1. Versuchen Sie dies auf dem Front-End, dem Admin-Dashboard oder beidem?
2. Was ist das genaue HTML, das innerhalb des Tags rendert?
3. Wenn die URL ausgegeben wird, aber es ist nicht korrekt, dann haben wir ein anderes Problem - also beraten, wenn das richtig ist. Beachten Sie, dass beim Anzeigen der Quelle normalerweise die Verknüpfung (en) zu den Skripten in der Ansichtsquellenansicht anklickbar sind und Sie sofort sehen können, ob die Skriptdatei geladen wird (denn wenn Sie auf die Verknüpfung klicken, Sie sehen den Script-Code) oder nicht (weil Sie das Markup für eine 404-Fehlerseite sehen).
4. Schließlich können Sie versuchen, entfernen die Abhängigkeiten. Ich hatte manchmal interessante Probleme, sie zu benutzen, und das würde etwas sein, mit dem ich herumspielen würde.