私はいくつかのフロントエンドCSSをwiddgetをスタイルするためにキューに入れるウィジェットを作るプラグインを持っています。拡張wp_enqueue_style
クラスのpublic
widget()
メソッドから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()
を試しましたが、幸運でした。
これは可能ですか、そしてもし可能なら、どうすればそれができますか
ウィジェットがレンダリングされるときにwidget()
メソッドが呼び出されるので、エンキューしているスタイルはフッターに印刷されます(その時点では既にヘッダーが印刷されています)。
ブラウザの大部分がページ本体からリンクされたスタイルをレンダリングできるとしても、HTML標準によれば、scryptとは異なり、スタイルはページ<head>
に配置する必要があるため、これは無効なHTMLです。 ( マークアップを検証してください を入力するとエラーが表示されます)。
'widgets_init'
と'wp_enqueue_scripts'
を使ってスタイルを削除することができないのもそのためです。これらのフックはwidget()
メソッドが呼び出される前に起動され、まだ追加されていないスタイルを削除することはできません。
2つの解決策があります。
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');
});
プラグインが無効な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');
}
});