wordpress:只在短代码出现的地方加载javascript

Question

有一个有趣的难题.我需要为我的插件加载大约8个javascript文件和相同数量的样式.只有在我的短代码运行时才需要这些.

我试图用print_styles和print_scripts加载它们但是它们没有正确渲染,加上这样做会打破xhtml验证.因此,目前他们加载每个页面,由于所需的文件数量,这样做是不可行的.

在另一个项目中,我在我的插件的index.php文件中编写了一个函数,该文件将获取当前页面,搜索它以查找我的短代码,如果找到它,那么它会打印脚本,但这是一个丑陋的黑客.

有人有任何建议或解决方案吗？任何帮助将不胜感激,问候,Daithi

Answer 1

回答我自己的问题...我是第一次写的.您必须搜索每个页面以检查您的短代码是否正在使用.这必须在加载页面数据和显示页面之前完成.对我而言,这对系统来说是完全矫枉过正,但不幸的是它就是这样.我从以下地址获得了这些信息: get_shortcode_regex 和 old nabble

首先:

add_action('template_redirect','wp_my_shortcode_head');

然后:

function wp_my_shortcode_head(){
  global $posts;
  $pattern = get_shortcode_regex(); 
  preg_match('/'.$pattern.'/s', $posts[0]->post_content, $matches); 
  if (is_array($matches) && $matches[2] == 'YOURSHORTCODE') { 
        //shortcode is being used 
  }
}

将'YOURSHORTCODE'替换为您的短代码的名称,并将您的wp_enqueue_scripts添加到它所说的//使用短代码的位置.

Answer 2

我在这里阅读了一个解决方案：http://scribu.net/wordpress/conditional-script-loading-revisited.html 基本上，如果使用 wordpress 3.3，您可以将脚本排入短代码函数中。

function my_shortcode($atts){
    wp_enqueue_script( 'my-script', plugins_url( 'plugin_name/js/script.js' ), array('jquery'), NULL, true);

    // if you add a css it will be added to the footer
//wp_enqueue_style( 'my-css', plugins_url( 'plugin_name/css/style.css' ) );

    //the rest of shortcode functionality
}

Answer 3

使用简码在每页动态加载脚本和样式

优点

• 每次调用短代码时不会搜索所有帖子。
• 仅当页面上存在短代码时才能够动态添加样式和脚本。
• 不使用正则表达式，因为它们往往比strstr()或慢strpos()慢。如果您需要拾取参数，那么您应该使用上面提到的短代码正则表达式。
• 减少文件调用

代码解释

1. 仅当帖子save_post不是修订版且与指定的post_type.

2. 将找到的帖子 ID 保存为数组，并将add_option()自动加载设置为 yes，除非该条目已存在。然后就会使用update_option().

3. 使用钩子wp_enqueue_scripts来调用我们的add_scripts_and_styles()函数。

4. 然后该函数调用get_option()来检索我们的页面 id 数组。如果当前$page_id位于$option_id_array则添加脚本和样式。

请注意：我从 OOP 命名空间类转换了代码，所以我可能错过了一些东西。如果我这样做了，请在评论中告诉我。

代码示例：查找简码出现情况

function find_shortcode_occurences($shortcode, $post_type = 'page')
{
    $found_ids = array();
    $args         = array(
        'post_type'   => $post_type,
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );
    $query_result = new WP_Query($args);
    foreach ($query_result->posts as $post) {
        if (false !== strpos($post->post_content, $shortcode)) {
            $found_ids[] = $post->ID;
        }
    }
    return $found_ids;
}

function save_option_shortcode_post_id_array( $post_id ) 
{
    if ( wp_is_post_revision( $post_id ) OR 'page' != get_post_type( $post_id )) {
        return;
    }
    $option_name = 'yourprefix-yourshortcode';
    $id_array = find_shortcode_occurences($option_name);
    $autoload = 'yes';
    if (false == add_option($option_name, $id_array, '', $autoload)) update_option($option_name, $id_array);
}

add_action('save_post', 'save_option_shortcode_id_array' );

代码示例：简码动态包含脚本和样式

function yourshortcode_add_scripts_and_styles() {
    $page_id = get_the_ID();
    $option_id_array = get_option('yourprefix-yourshortcode');
    if (in_array($page_id, $option_id_array)) {
        wp_enqueue_script( $handle, $src, $deps, $ver, $footer = true );
        wp_enqueue_style( $handle, $src , $deps);
    }
}

add_action('wp_enqueue_scripts', 'yourshortcode_add_scripts_and_styles');