JQuery Plugins in WordPress

Ich konnte etwas zusammenbauen, wie das gemacht werden sollte, aber ich kämpfe wirklich damit. Ich möchte das Table Sorter-Plugin ( http://tablesorter.com ) in einer benutzerdefinierten Seitenvorlage verwenden, um Daten anzuzeigen, aber ich bin mir nicht sicher, ob es korrekt ist.

Ich habe “wp_enqueue_scripts” angehängt und verwende diese function, um die TableSorter JS-Datei in die Warteschlange einzureihen. Ich glaube, dass dies funktioniert, aber ich muss auch eine Zeile in der JQuery Ready () -function platzieren, aber ich bin nicht sicher, wie dies in meiner benutzerdefinierten Seitenvorlage zu tun.

Kann jemand etwas Licht abcasting?

  jQuery(document).ready(function($) { $("#priceTable").tablesorter(); });  

'package', 'posts_per_page' => 50 ); // Query all Packages $packages = new WP_Query($args); if( $packages->have_posts() ) { ?> have_posts() ) { $packages->the_post(); ?> <? } echo '
512MB 1GB 2GB 3GB 4GB
ID, 'meta-package-512mb', true); ?> ID, 'meta-package-1gb', true); ?> ID, 'meta-package-2gb', true); ?> ID, 'meta-package-3gb', true); ?> ID, 'meta-package-4gb', true); ?>
'; } else { echo 'NO POST FOUND'; } // Rest Post Data wp_reset_postdata(); // Reset Query wp_reset_query(); ?>

Solutions Collecting From Web of "JQuery Plugins in WordPress"

Ihr Hauptproblem mit Ihrem Code besteht darin, dass Sie Ihre JS nicht in ein -Element einfügen.

 < ?php /* Template Name: Price Chart */ /** * Enqueue the table sorter script */ function load_table_sorter_scripts() { //wp_enqueue_style( 'style-name', get_stylesheet_uri() ); wp_enqueue_script( 'tablesorter', get_template_directory_uri() . '/js/jquery.tablesorter.min.js', array('jquery'), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'load_table_sorter_scripts' ); // Now start outputting the HTML get_header(); global $gp_settings; ?>    < ?php get_footer(); ?> 

Das ist jetzt nicht das sauberste. Um es sauberer zu machen:

  1. Verschieben Sie den Teil, in dem Sie den Tabellensorter verbinden, in eine eigene Javascript-Datei
  2. Verschieben Sie die Enqueue-Skriptfunktion in die Datei functions.php und prüfen Sie, welche Seite aufgerufen wird

functionen.php

 //... function load_table_sorter_scripts() { // Check that it is the Price Chart page template (you may need to change the name to match the file name). if ( is_page_template('price-chart.php') ) { wp_enqueue_script( 'tablesorter', get_template_directory_uri() . '/js/jquery.tablesorter.min.js', array('jquery'), '1.0.0', true ); wp_enqueue_script( 'tablesorter-price-chart', get_template_directory_uri() . '/js/price-chart-table.js', array('jquery', 'tablesorter'), '1.0.0', true ); } } add_action( 'wp_enqueue_scripts', 'load_table_sorter_scripts' ); 

js / Preis-Chart-Tabelle.js

 jQuery(document).ready(function() { jQuery("#priceTable").tablesorter(); });