[WP]読み込み不要なプラグインのCSSをfunctions.phpで読み込まないようにする方法

wordpress

wordpress_customize

こんにちは、霙(@xxmiz0rexx)です。 WordPressでサイトを作っている時、ページナビや関連記事の機能などはプラグインを使用して実装することも多いと思います。

そのプラグインの見た目なんですが、私の場合、デフォで設定されているCSSじゃなく自分でCSSを書きたい時がほとんど。 自分で書く場合もともとのCSSは邪魔なので、それをfunctions.phpから削除する方法をメモします。

まずは作っているサイトを開き、ソースを見てみましょう。 プラグイン名が入ったlink要素がいくつかあると思います。

その中で、スタイルを上書きしたいもののIDをメモしておきましょう。

仮にプラグイン『Search Everything』だとしたら <link rel="stylesheet" id="se-link-styles-css" href="http://hoge.com/wp-content/plugins/search-everything/static/css/se-styles.css?ver=4.0.1" type="text/css" media="all"> というlink要素があるので、この中のid="se-link-styles-css"をメモしておきます。

functions.phpで読み込み不要なプラグインのCSSを削除する

必要なのはプラグインのハンドル名

CSSを読み込まないようにするには、functions.phpでハンドル名を指定します。 …と色んなページに書かれていました。そもそもそのハンドル名とはどこに書いてあるのでしょう。

調べたところ、ハンドル名はほとんどの場合link要素のid名と同じだと書かれていました。 でも、指定したら動きませんでした。 泣きながらおしりについてる-cssを削除したら動きましたので、他のプラグインでも動かなかった場合はそうしてみてください。

記述例

というわけで、以下のような記述になりました。

functions.php内
add_action( 'wp_enqueue_scripts', 'deregister_cf7_files' );
function deregister_cf7_files() {
        wp_dequeue_style( 'se-link-styles' );
        wp_dequeue_style( 'yarppRelatedCss' );
        wp_dequeue_style( 'yarppWidgetCss' );
}

今回は『Search Everything』『Yet Another Related Posts Plugin』というプラグインを例にハンドル名を書いています。違うプラグインの場合は変更してくださいね。

さいごに

というわけで、上記を記述すれば不要なCSSが読み込まれなくなり、スタイルに!importantを使う必要もないし、ページの読み込み速度も少しは上がると思います。不要なCSSの読み込みでお悩みの方は、試してみてくださいね。
以上、霙でした。

参考：WordPress：プラグイン有効時に読み込むCSSやJSを削除する方法 | NxWorld はてなブックマーク - WordPress：プラグイン有効時に読み込むCSSやJSを削除する方法 | NxWorld

関連記事


FeedDrop