Wordpress plugin jquery


Wordpress plugin jquery

我正在做一个Wordpress插件。我只是在这个插件上使用了一个网格加载效果jQuery。这个脚本:

<script type="text/javascript">
new GridScrollFx( document.getElementById( 'grid' ), {
    viewportFactor : 0.4
} );
</script>

它正在HTML上工作,但是当我试图在插件上工作时,它只是加载但不工作。问题在哪里?

下面是我的插件代码:
<?php 
/*
Plugin Name: Custom Grid Loading Wordpress
Plugin URI: http://hotmovie24.com
Description: This plugin will more effective in your wordpress site. You can change color & other setting from <a href="options-general.php?page=ppmscrollbar-settings">Option Panel</a>
Author: Jean Rose
Author URI: http://somewebsite.url
Version: 1.0
*/
/* Adding Latest jQuery from Wordpress */
function cgl_wp_latest_jquery() {
wp_enqueue_script('jquery');
}
add_action('init', 'cgl_wp_latest_jquery');
define ("CGL_VERSION", "1.0");
if ( ! defined( 'CGL_PLUGIN_BASENAME' ) )
define( 'CGL_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );
if ( ! defined( 'CGL_PLUGIN_NAME' ) )
define( 'CGL_PLUGIN_NAME', trim( dirname( CGL_PLUGIN_BASENAME ), '/' ) );
if ( ! defined( 'CGL_PLUGIN_DIR' ) )
define( 'CGL_PLUGIN_DIR', untrailingslashit( dirname( __FILE__ ) ) );
if ( ! defined( 'CGL_PLUGIN_URL' ) )
define( 'CGL_PLUGIN_URL', untrailingslashit( plugins_url( '', __FILE__ ) ) );
if ( ! defined( 'CGL_LOAD_JS' ) )
define( 'CGL_LOAD_JS', true );
if ( ! defined( 'CGL_LOAD_CSS' ) )
define( 'CGL_LOAD_CSS', true );

if ( ! defined( 'CGL_AUTOP' ) )
define( 'CGL_AUTOP', true );
if ( ! defined( 'CGL_ADMIN_READ_CAPABILITY' ) )
define( 'CGL_ADMIN_READ_CAPABILITY', 'edit_posts' );
if ( ! defined( 'CGL_ADMIN_READ_WRITE_CAPABILITY' ) )
define( 'CGL_ADMIN_READ_WRITE_CAPABILITY', 'publish_pages' );
if ( ! defined( 'CGL_VERIFY_NONCE' ) )
define( 'CGL_VERIFY_NONCE', true );
require_once CGL_PLUGIN_DIR . '/custom-post-type-grid.php';
function cgl_grid_custom_method() {
wp_enqueue_script(
    'cgl-custom-main',
    plugins_url( '/js/modernizr.custom.js' , __FILE__ ),
    array( 'scriptaculous' )
);
    wp_enqueue_script(
    'cgl-custom-classie',
    plugins_url( '/js/classie.js' , __FILE__ ),
    array( 'scriptaculous' )
);
wp_enqueue_script(
    'cgl-custom-colorfinder',
    plugins_url( '/js/colorfinder-1.1.js' , __FILE__ ),
    array( 'scriptaculous' )
);
wp_enqueue_script(
    'cgl-custom-gridScrollFx',
    plugins_url( '/js/gridScrollFx.js' , __FILE__ ),
    array( 'scriptaculous' )
);
wp_enqueue_script(
    'cgl-custom-imagesloaded',
    plugins_url( '/js/imagesloaded.pkgd.min.js' , __FILE__ ),
    array( 'scriptaculous' )
);
wp_enqueue_script(
    'cgl-custom-masonry',
    plugins_url( '/js/masonry.pkgd.min.js' , __FILE__ ),
    array( 'scriptaculous' )
);
}
add_action( 'wp_enqueue_scripts', 'cgl_grid_custom_method' );
function cgl_custom_style() {

wp_enqueue_style( 'cgl-custom-css', plugins_url( '/css/component.css', __FILE__ ), false, '1.0', 'all' );
}
add_action('wp_head', 'cgl_custom_style');
function cgl_custom_active() {?>
<script type="text/javascript">
new GridScrollFx( document.getElementById( 'grid' ), {
            viewportFactor : 0.4
        } );
</script>
<?php
}
add_action('wp_head', 'cgl_custom_active');
?>

我不认为你的代码有错误,这只是一个优先级的情况,什么时候是你的脚本加载。

最后加载自定义脚本和样式总是好的做法,以确保它们不会被其他脚本和样式覆盖。为此,您需要在add_action( $hook, $function_to_add, $priority, $accepted_args )中设置$priority参数。你需要将你的优先级设置得非常低,也就是说,给优先级参数一个非常高的数字,比如我通常使用的999

那么改变这个

add_action( 'wp_enqueue_scripts', 'cgl_grid_custom_method' );

add_action( 'wp_enqueue_scripts', 'cgl_grid_custom_method', 999 );

同样适用于插件中的其他动作