仅当存在特定的短代码或窗口小部件时才加载脚本

Question

仅当存在特定的短代码或窗口小部件时才加载脚本

- 17
- 14671 2010-09-28
我需要一种在加载页面/帖子内容之前对其进行过滤的方法,这样,如果存在特定的短代码,我可以将脚本添加到标题中.经过大量搜索之后,我在 http://wpengineer.com
上遇到了这个问题.
function has_my_shortcode($posts) { if ( empty($posts) ) return $posts; $found = false; foreach ($posts as $post) { if ( stripos($post->post_content, '[my_shortcode') ) $found = true; break; } if ($found){ $urljs = get_bloginfo( 'template_directory' ).IMP_JS; wp_register_script('my_script', $urljs.'myscript.js' ); wp_print_scripts('my_script'); } return $posts; } add_action('the_posts', 'has_my_shortcode');

这绝对是出色的,完全满足了我的需求.

现在我需要进一步扩展它,并对侧边栏进行相同的操作.可以通过特定的窗口小部件类型,短代码,代码段或任何其他可以识别何时需要加载脚本的方法来进行.

问题是在加载侧栏之前我不知道如何访问侧栏内容(所讨论的主题将具有多个侧栏)
I needed a way to filter a page/posts content before it was loaded so I could add scripts to the header if a specific shortcode was present. After much searching I came across this on http://wpengineer.com

function has_my_shortcode($posts) { if ( empty($posts) ) return $posts; $found = false; foreach ($posts as $post) { if ( stripos($post->post_content, '[my_shortcode') ) $found = true; break; } if ($found){ $urljs = get_bloginfo( 'template_directory' ).IMP_JS; wp_register_script('my_script', $urljs.'myscript.js' ); wp_print_scripts('my_script'); } return $posts; } add_action('the_posts', 'has_my_shortcode');

which is absolutely brilliant and did exactly what I needed.

Now I need to extend it a bit further and do the same for sidebars. It can be by a particular widget type, shortcode, code snippet or anything else that would work to identify when the script needs to be loaded.

The problem is I can't figure out how to access the sidebars content before the sidebar is loaded (the theme in question will have several sidebars)
widgets javascript sidebar conditional-content

- 标头中的脚本是否适合您的情况?页面末尾的脚本更易于有条件地处理,并建议您提高性能.
  
  Are scripts in header hard requirement for your situation? Scripts at end of page are easier to deal with conditionally and recommended practice for performance.
  - 0
  - 2010-09-28
  - Rarst
- 我确实首先在wp_footer中进行了尝试,这很好地消除了对内容进行预过滤的需要,但是尽管脚本可以很好地加载,但是它们没有用.这些脚本必须位于wp_head中才能执行所需的操作.
  
  I did try it in wp_footer first which nicely eliminates the need for prefiltering the content, but while the scripts loaded fine, they didn't work. These scripts have to be in wp_head to do what they need to.
  - 0
  - 2010-09-28
  - Ashley G

4 个回答

投票数

- 3
- 2012-09-25
只想分享我致力于的解决方案,使我的实现更加灵活.我没有让函数检查各种短代码,而是对其进行了修改,以查找单个短代码,该短代码引用了需要排队的脚本/样式函数.这将适用于其他类中的两种方法(例如本身可能不会执行此操作的插件)和作用域内的函数.只需将以下代码拖放到functions.php中,然后将以下语法添加到您想要特定CSS＆amp; JS.

页面/后语法:[loadCSSandJSfunction="(class->方法/函数名)"]

functions.php代码:

function page_specific_CSSandJS( $posts ) { if ( empty( $posts ) ) return $posts; foreach ($posts as $post) { $returnValue = preg_match_all('#\[loadCSSandJS function="([A-z\-\>]+)"\]#i', $post->post_content, $types); foreach($types[1] as $type) { $items = explode("->",$type); if (count($items) == 2) { global $$items[0]; if( method_exists( $$items[0], $items[1] )) add_action( 'wp_enqueue_scripts', array(&$$items[0], $items[1]) ); } else if( !empty( $type ) && function_exists( $type )) add_action( 'wp_enqueue_scripts', $type ); } } return $posts; }

这也将允许您在页面上添加任意数量的内容.请记住,您确实需要加载方法/函数.
Just wanted to share a solution I worked on which allowed me to be a bit more versatile with my implementation. Rather than having the function check for a variety of shortcodes, I modified it to seek out a single shortcode that references a script/style function that needs to be enqueued. This will work for both methods in other classes (such as plugins that may not do this themselves) and in-scope functions. Just drop the below code in functions.php and add the following syntax to any page/post where you want specific CSS & JS.

Page/Post Syntax: [loadCSSandJS function="(class->method/function name)"]

functions.php code:

function page_specific_CSSandJS( $posts ) { if ( empty( $posts ) ) return $posts; foreach ($posts as $post) { $returnValue = preg_match_all('#\[loadCSSandJS function="([A-z\-\>]+)"\]#i', $post->post_content, $types); foreach($types[1] as $type) { $items = explode("->",$type); if (count($items) == 2) { global $$items[0]; if( method_exists( $$items[0], $items[1] )) add_action( 'wp_enqueue_scripts', array(&$$items[0], $items[1]) ); } else if( !empty( $type ) && function_exists( $type )) add_action( 'wp_enqueue_scripts', $type ); } } return $posts; }

This will also allow you to add as many as you want on a page. Keep in mind that you do need a method/function to load.
- 1
- 2011-12-22
感谢您分享此提示！这让我有些头疼,因为起初它没有用.我认为在has_my_shortcode上面的代码中有几个错误(也许是拼写错误),我将函数重写如下:

function has_my_shortcode( $posts ) { if ( empty($posts) ) return $posts; $shortcode_found = false; foreach ($posts as $post) { if ( !( stripos($post->post_content, '[my-shortcode') === false ) ) { $shortcode_found = true; break; } } if ( $shortcode_found ) { $this->add_scripts(); $this->add_styles(); } return $posts; }

我认为有两个主要问题:break不在if语句的范围内,这导致循环总是在第一次迭代时中断.另一个问题更加微妙和难以发现.如果简码是帖子中写的第一件事,则上面的代码不起作用.我必须使用===运算符来解决这个问题.

无论如何,非常感谢您分享这项技术,它很有帮助.
Thank you for sharing this tip! It gave me a little headache, because at first it wasn't working. I think there are a couple of mistakes (maybe typos) in the code above has_my_shortcode and I re-written the function as below:

function has_my_shortcode( $posts ) { if ( empty($posts) ) return $posts; $shortcode_found = false; foreach ($posts as $post) { if ( !( stripos($post->post_content, '[my-shortcode') === false ) ) { $shortcode_found = true; break; } } if ( $shortcode_found ) { $this->add_scripts(); $this->add_styles(); } return $posts; }

I think there were two main issues: the break wasn't in the scope of the if statement, and that caused the loop to always break at the first iteration. The other problem was more subtle and difficult to discover. The code above doesn't work if the shortcode is the very first thing written in a post. I had to use the === operator to solve this.

Anyway, thank you so much for sharing this technique, it helped a lot.

1

2017-01-31

使用Wordpress 4.7,还有另一种方法可以在您的functions.php文件中实现此目标,

 add_action( 'wp_enqueue_scripts', 'register_my_script');
function register_my_script(){
  wp_register_script('my-shortcode-js',$src, $dependency, $version, $inFooter);
}

首先,您注册您的脚本,但实际上并没有打印在该脚本上您的页面,除非您的短代码被调用而进入队列,

 add_filter( 'do_shortcode_tag','enqueue_my_script',10,3);
function enqueue_my_script($output, $tag, $attr){
  if('myShortcode' != $tag){ //make sure it is the right shortcode
    return $output;
  }
  if(!isset($attr['id'])){ //you can even check for specific attributes
    return $output;
  }
  wp_enqueue_script('my-shortcode-js'); //enqueue your script for printing
  return $output;
}

do_shortcode_tag是在WP 4.7中引入的,并且可以在新开发者文档页面中找到.

with Wordpress 4.7 there is another way to achieve this in your functions.php file,

add_action( 'wp_enqueue_scripts', 'register_my_script');
function register_my_script(){
  wp_register_script('my-shortcode-js',$src, $dependency, $version, $inFooter);
}

first you register your script, which doesn't actually get printed on your page unless your enqueue it if your shortcode is called,

add_filter( 'do_shortcode_tag','enqueue_my_script',10,3);
function enqueue_my_script($output, $tag, $attr){
  if('myShortcode' != $tag){ //make sure it is the right shortcode
    return $output;
  }
  if(!isset($attr['id'])){ //you can even check for specific attributes
    return $output;
  }
  wp_enqueue_script('my-shortcode-js'); //enqueue your script for printing
  return $output;
}

the do_shortcode_tag was introduced in WP 4.7 and can be found in the new developers documentation pages.

sorich87 · Accepted Answer · 2010-09-28

20

2010-09-28

您可以使用is_active_widget 函数.例如:

 function check_widget() {
    if( is_active_widget( '', '', 'search' ) ) { // check if search widget is used
        wp_enqueue_script('my-script');
    }
}

add_action( 'init', 'check_widget' );

要在仅加载窗口小部件的页面中加载脚本,则必须在窗口小部件类中添加is_active_widget()代码.例如,请参阅默认的最近评论小部件(wp-includes/default-widgets.php,第602行):

 class WP_Widget_Recent_Comments extends WP_Widget {

    function WP_Widget_Recent_Comments() {
        $widget_ops = array('classname' => 'widget_recent_comments', 'description' => __( 'The most recent comments' ) );
        $this->WP_Widget('recent-comments', __('Recent Comments'), $widget_ops);
        $this->alt_option_name = 'widget_recent_comments';

        if ( is_active_widget(false, false, $this->id_base) )
            add_action( 'wp_head', array(&$this, 'recent_comments_style') );

        add_action( 'comment_post', array(&$this, 'flush_widget_cache') );
        add_action( 'transition_comment_status', array(&$this, 'flush_widget_cache') );
    }

You can use the function is_active_widget . E.g.:

function check_widget() {
    if( is_active_widget( '', '', 'search' ) ) { // check if search widget is used
        wp_enqueue_script('my-script');
    }
}

add_action( 'init', 'check_widget' );

To load the script in the page where the widget is loaded only, you will have to add the is_active_widget() code, in you widget class. E.g., see the default recent comments widget (wp-includes/default-widgets.php, line 602):

class WP_Widget_Recent_Comments extends WP_Widget {

    function WP_Widget_Recent_Comments() {
        $widget_ops = array('classname' => 'widget_recent_comments', 'description' => __( 'The most recent comments' ) );
        $this->WP_Widget('recent-comments', __('Recent Comments'), $widget_ops);
        $this->alt_option_name = 'widget_recent_comments';

        if ( is_active_widget(false, false, $this->id_base) )
            add_action( 'wp_head', array(&$this, 'recent_comments_style') );

        add_action( 'comment_post', array(&$this, 'flush_widget_cache') );
        add_action( 'transition_comment_status', array(&$this, 'flush_widget_cache') );
    }

可以在加载小部件之前调用它吗?需要明确的是,这必须在页面加载之前进行.我的示例代码使用the_posts来过滤页面上的内容,但是没有得到侧边栏/小部件.

Can that be called BEFORE the widgets are loaded. To be clear this has to take place before the page even loads. My sample code uses the_posts to filter the content on the page, but that doesn't get the sidebars/widgets.
- 0
- 2010-09-28
- Ashley G
是的,请参阅我添加到答案中的示例.

Yes, see the example I added to my answer.
- 0
- 2010-09-28
- sorich87
您的示例实际上不起作用.我是否缺少明显的东西?

Your example doesn't actually work. Am I missing something obvious?
- 0
- 2010-09-29
- Ashley G
其实我是.将wp_enqueue_script应用于wp_head时似乎不起作用,但是wp_print_scripts起作用.wp_enqueue_script确实可以工作,但是如果将其应用于init则如下:add_action('init','check_widget');

Actually I was. wp_enqueue_script doesn't seem to work when applied to wp_head, but wp_print_scripts does. wp_enqueue_script does work though if applied to init like so: add_action( 'init', 'check_widget' );
- 0
- 2010-09-29
- Ashley G
但是,即使窗口小部件仅在一个侧栏中处于活动状态,它也会在网站的每个页面上加载脚本.例如,如果我有一个用于博客页面的侧边栏,而另一个用于其他页面的侧边栏.我将搜索小部件添加到博客侧边栏,并且脚本会加载,但是也会在没有博客侧边栏的页面上加载.仅当该页面上存在小部件时,我才需要能够加载脚本.

However it loads the scripts on every page of the site, even if the widget is only active in one sidebar. for example if I have a sidebar for blog pages and a another sidebar for other pages. I add the search widget to the blog sidebar and the scripts does load, but it also loads on pages that don't have the blog sidebar. I need to be able to load the script only if the widget is present on that page.
- 0
- 2010-09-29
- Ashley G
我编辑了答案

I edited my answer
- 0
- 2010-09-29
- sorich87
你是男人！干杯!

You are the man! Cheers!
- 0
- 2010-09-29
- Ashley G
非常好的解决方案:)

Very nice solution :)
- 0
- 2011-12-25
- Anh Tran
最好使用wp_enqueue_scripts而不是wp_head.很好的答案,谢谢.

Better to use wp_enqueue_scripts instead of wp_head. great answer, thank you.
- 0
- 2017-03-06
- wesamly