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

时间：2011-06-04 07:08:09

标签： php wordpress-plugin wordpress

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

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

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

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

9 个答案:

答案 0 :(得分：7)

回答我自己的问题......我是第一次写的。您必须搜索每个页面以检查您的短代码是否正在使用。这必须在加载页面数据和显示页面之前完成。对我来说，这对系统来说是完全矫枉过正，但不幸的是它就是这样。我从以下网站获得这些信息 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添加到//正在使用短代码的位置。

答案 1 :(得分：4)

我在这里阅读了一个解决方案：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
}

答案 2 :(得分：4)

使用短代码动态地每页加载脚本和样式

优点

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

代码说明

  1. 仅当帖子不是修订版并且与指定的save_post匹配时，才使用post_type钩子在页面上查找短代码。

  2. 使用add_option()将找到的post id保存为数组，并将autoload设置为yes，除非该条目已存在。然后它将使用update_option()。

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

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

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

    代码示例：查找短代码出现

    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');

答案 3 :(得分：1)

请在此处阅读本教程：http://scribu.net/wordpress/optimal-script-loading.html

似乎是最好的方式。

add_action('init', 'register_my_script');
add_action('wp_footer', 'print_my_script');

function register_my_script() {
    wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
}

function print_my_script() {
    global $add_my_script;

    if ( ! $add_my_script )
        return;

    wp_print_scripts('my-script');
}
  

在这种情况下，只有$ add_my_script才会将脚本排入队列   在呈现页面期间的某个时刻设置了global。

add_shortcode('myshortcode', 'my_shortcode_handler');

function my_shortcode_handler($atts) {
    global $add_my_script;

    $add_my_script = true;

    // actual shortcode handling here
}
  

因此，如果在任何一个中找到[myshortcode ...]，将添加该脚本   当前页面上的帖子。

答案 4 :(得分：1)

我将WordPress版本5.4与OOP风格的代码一起使用，我不知道这是否会影响上述解决方案为何对我不起作用，所以我提出了以下解决方案：

[[pdoResources?&showUnpublished=`1`]] 

[[getResources?&showUnpublished=`1`&showHidden=`1`]]

希望这对某人有所帮助。

答案 5 :(得分：0)

这些脚本要加载多少页？维护一个页面数组是否可行，只在当前页面在数组中时加载脚本/样式表？

否则，如果不扫描代码就无法执行此操作，因为WP甚至不知道短代码是否存在，直到页面加载为止。

答案 6 :(得分：0)

BraedenP是对的，我很确定在样式表加载时wp_enqueue_scripts /执行时无法检测短代码使用情况。

你有什么理由必须在8个文件中这样做吗？一个人会更有效率，然后在每一页上加载它可能不是一个问题。

您可以考虑一个PHP样式表解决方案，只在需要时才执行某些样式。 css.php文件可能类似于：

<?php
header("content-type: text/css");
/* You can require the blog header to refer to WP variables and make queries */
//require '../../../wp-blog-header.php';
$css = '';
$css .= file_get_contents('style.css');
/* Consider using GET variables or querying a variable in the WP database to determine which stylesheets should be loaded. You could add an option to the backend that allows a stylesheet to be turned on or off. */
if($condition1 == TRUE) $css .= file_get_contents('condition1.css');
if($condition2 == TRUE) $css .= file_get_contents('condition2.css');
?>

更少的脚本和更少的样式表意味着更少的http请求和更快的加载时间。

答案 7 :(得分：0)

如果帖子/页面有短代码，则加载脚本和样式

最佳解决方案是，当且仅当当前帖子或页面的内容中包含短代码时，才将文件加载到页眉中。这正是以下功能的作用：

function flip_register_frontend_assets() 
{

//在这里注册您的脚本和样式

wp_register_style('pp_font','plugin_styles.css', null, null, 'all');

global $post;

//检查您的内容是否包含短代码

if(isset($post->post_content) && has_shortcode( $post->post_content, 'your-
shortcode')){

//将您的脚本和样式排入队列

 wp_enqueue_style( 'pp_font');

 }
 }

只需将此功能放在您的某个插件文件中，您就可以了。 您需要将[your-shortcode]替换为您要搜索的短代码，并且还需要将plugin_styles.css替换为您的样式表名称。

答案 8 :(得分：0)

您可以仅使用此代码来检查是否在页面内容或侧边栏小部件中实现了短代码。

<?php

if ( shortcode_exists( 'gallery' ) ) {
    // The [gallery] short code exists.
}

?>
相关问题
最新问题