JQuery Plugins in Wordpress

时间:2014-11-08 作者:Aidan Knight

我已经能够在某种程度上拼凑出应该如何做到这一点,但我真的很难做到这一点。我想使用Table Sorter插件(http://tablesorter.com) 在自定义页面模板中显示数据,但我不确定它是否正确。

我已经钩住了“wp\\u enqueue\\u scripts”,并使用此函数将表分类器JS文件排入队列。我相信这是正确的,但是我还需要在JQuery Ready()函数中放置一行,但是我不确定如何从自定义页面模板中执行此操作。

有人能解释一下吗?

<?php 
/*
Template Name: Price Chart
*/

/* Enqueue scripts and styles */
function load_table_sorter_scripts()
{
    //wp_enqueue_style( \'style-name\', get_stylesheet_uri() );
    wp_enqueue_script(\'jquery\');
    wp_enqueue_script( \'tablesorter\', get_template_directory_uri() . \'/js/jquery.tablesorter.min.js\', array(), \'1.0.0\', true );
}

add_action( \'wp_enqueue_scripts\', \'load_table_sorter_scripts\' );

// Now start outputting the HTML
get_header();
global $gp_settings;

?>

<script>
  jQuery(document).ready(function($) 
    { 
      $("#priceTable").tablesorter();
  });
</script>

    <div id="content">

        <!-- TITLE -->
        <?php if($gp_settings[\'title\'] == "Show") { ?><h1 class="page-title"><?php the_title(); ?></h1><?php } ?>

        <?

            $args=array(
                \'post_type\' => \'package\',
                \'posts_per_page\' => 50
            );

            // Query all Packages
            $packages = new WP_Query($args);

            if( $packages->have_posts() )
            {
                ?>

                <table id="priceTable" class="tablesorter">
                    <thead> 
                        <tr> 
                            <th></th> 
                            <th>512MB</th> 
                            <th>1GB</th> 
                            <th>2GB</th> 
                            <th>3GB</th>
                            <th>4GB</th>
                        </tr> 
                    </thead>
                    <tbody>

                <?

                while( $packages->have_posts() )
                {
                    $packages->the_post();

                    ?>

                    <tr> 
                        <td><? echo get_the_title(); ?></td> 
                        <td><? echo get_post_meta($post->ID, \'meta-package-512mb\', true); ?></td> 
                        <td><? echo get_post_meta($post->ID, \'meta-package-1gb\', true); ?></td> 
                        <td><? echo get_post_meta($post->ID, \'meta-package-2gb\', true); ?></td> 
                        <td><? echo get_post_meta($post->ID, \'meta-package-3gb\', true); ?></td>
                        <td><? echo get_post_meta($post->ID, \'meta-package-4gb\', true); ?></td> 
                    </tr> 

                    <?

                }

                echo \'</tbody></table>\';
            }
            else
            {
                echo \'NO POST FOUND\';
            }

            // Rest Post Data
            wp_reset_postdata();

            // Reset Query
            wp_reset_query();

        ?>

    </div>


<?php get_footer(); ?>

1 个回复
最合适的回答,由SO网友:Seamus Leahy 整理而成

代码的主要问题是没有将JS包装在<script> 要素

<?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;
?>
<!-- HTML body content -->

<!-- You can put this anywhere in the body -->
<script>
  jQuery(document).ready(function() 
    { 
      jQuery("#priceTable").tablesorter();
  });
</script>
<?php get_footer(); ?>
现在这不是最干净的。要使其更干净,请执行以下操作:

将连接tablesorter的部分移动到自己的Javascript文件中,将enqueue脚本函数移动到functions.php 归档并检查调用的页面

functions.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/price-chart-table.js

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

结束

相关推荐

如何使用WPML转换jQuery脚本中的字符串?

我制作了这个脚本,用于更改自定义元素上的一些颜色。我的问题是,我找不到在href属性中本地化链接的方法。有没有一个简单的方法可以让我做到这一点?/* Wilfa Svart Color Change Function */ jQuery(document).ready(function() { jQuery(\'.precision-link-color-1\').on(\'click\', function(e){ e.preventDefault();