web-dev-qa-db-ja.com

WP_Widgetクラスにエンキューされたスタイルにwp_dequeue_style（）を使用する方法

私はいくつかのフロントエンドCSSをwiddgetをスタイルするためにキューに入れるウィジェットを作るプラグインを持っています。拡張wp_enqueue_styleクラスのpublicwidget()メソッドからWP_Widgetを呼び出します。

<?php class FPW_Widget extends WP_Widget {

    // ...

    public function widget( $args, $instance ) {

        // enqueuing here ensure that styles only load when plugin is being displayed
        wp_enqueue_style( 'fpw_styles_css', plugins_url( 'css/fpw_styles.css', dirname(__FILE__)), false, FPW_VERSION );

私が望むのは、エンキューの条件付き性を維持しながら、そのキューをデキュー可能にできるようにすることです（つまり、アクティブなウィジェットがある場合にのみ読み込まれるCSSファイル）。

私はwp_enqueue_scriptsと優先度の高い（999）とwidgets_initの両方でwp_dequeue_style()を試しましたが、幸運でした。

これは可能ですか、そしてもし可能なら、どうすればそれができますか

widgetswp-enqueue-stylestylesheet
5
mrwweb

ウィジェットがレンダリングされるときにwidget()メソッドが呼び出されるので、エンキューしているスタイルはフッターに印刷されます（その時点では既にヘッダーが印刷されています）。

ブラウザの大部分がページ本体からリンクされたスタイルをレンダリングできるとしても、HTML標準によれば、scryptとは異なり、スタイルはページ<head>に配置する必要があるため、これは無効なHTMLです。 （ マークアップを検証してください を入力するとエラーが表示されます）。

'widgets_init'と'wp_enqueue_scripts'を使ってスタイルを削除することができないのもそのためです。これらのフックはwidget()メソッドが呼び出される前に起動され、まだ追加されていないスタイルを削除することはできません。

2つの解決策があります。

解決策1

1つ目の解決策は、HTML標準に準拠していなくても、アプローチを維持したいということを前提としています。スタイルがフッターに出力されると、ユーザーは'wp_footer'フックを使用してスタイルをデキューできます。

スタイルが次のように追加されているとします。

public function widget( $args, $instance ) {
    wp_enqueue_style('fpw_styles_css');
}

削除することができます：

add_action('wp_footer', function() {
   wp_dequeue_style('fpw_styles_css');
});

解決策2

プラグインが無効なHTMLを印刷しないようにするには、 is_active_widget() を使用してウィジェットがアクティブであるかどうかを確認し、スタイルが有効になっている場合はスタイルをエンキューします。

add_action( 'wp_enqueue_scripts', function() {
  if ( is_active_widget(false, false, $widgetid) ) {
      wp_enqueue_style('fpw_styles_css');
  }
}, 5); // used priority 5 to make possible dequeue using default 10 priority

そうすることで、スタイルは<head>内に追加され、ユーザーは標準的なアプローチを使用してスタイルをデキューできるようになります。wp_dequeue_style()は'wp_enqueue_scripts'にフックされます。

唯一の問題は、is_active_widget()がウィジェットが実際にページに印刷されているかどうかをチェックしないことですが、ウィジェットのインスタンスがサイドバーのバックエンドで設定されている場合のみです。ウィジェットが実際にページに印刷されていなくてもスタイルが追加される可能性があります。

ただし、 コンディショナルタグ は'wp_enqueue_scripts'が起動されたときに正常に機能するため、ユーザーは特定のページのスタイルを簡単に削除できます。例：

add_action( 'wp_enqueue_scripts', function() {
  if (! is_front_page()) { // allow widget style only in front page
      wp_dequeue_style('fpw_styles_css');
  }
});
5
gmazzap