特定のショートコードまたはウィジェットが存在する場合にのみスクリプトをロードする

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と必要なページ/投稿に次の構文を追加するだけです. JS.

ページ/投稿構文:[loadCSSandJSfunction="(class->method/functionname)"]

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; }

2つの主な問題があったと思います.breakがifステートメントのスコープに含まれていなかったため、最初の反復でループが常に中断していました.もう1つの問題は、より微妙で発見が困難でした.ショートコードが投稿に最初に書かれたものである場合、上記のコードは機能しません.これを解決するには、===演算子を使用する必要がありました.

とにかく、このテクニックを共有してくれてありがとう、それは大いに役立ちました.
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は WP4.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
ただし、ウィジェットが1つのサイドバーでのみアクティブになっている場合でも、サイトのすべてのページにスクリプトが読み込まれます.たとえば、ブログページ用のサイドバーと他のページ用の別のサイドバーがある場合です.検索ウィジェットをブログのサイドバーに追加すると、スクリプトは読み込まれますが、ブログのサイドバーがないページにも読み込まれます.ウィジェットがそのページに存在する場合にのみ、スクリプトをロードできる必要があります.

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_headの代わりにwp_enqueue_scriptsを使用することをお勧めします.素晴らしい答え、ありがとう.

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