wordpress

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

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_plugin_files' );
function deregister_plugin_files() {
        wp_dequeue_style( 'se-link-styles' );
        wp_dequeue_style( 'yarppWidgetCss' );
}

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

関連記事プラグイン『Yet Another Related Posts Plugin』のyarppRelatedCssを消したい場合

何故かこれはlink要素のIDを指定しても消えないことに気づき調べました。

functions.php内
//yarppCSS削除
add_action('get_footer','lm_dequeue_footer_styles');
function lm_dequeue_footer_styles()
{
  wp_dequeue_style('yarppRelatedCss');
}

これで無事消去。消去しないとリンクが太字になってしまうので困ってしまいました。しかも!importantついてるし(憤怒)

参考:プラグインで追加されたCSSを1つにまとめてWordPressを高速化 | ドキドメ! はてなブックマーク - プラグインで追加されたCSSを1つにまとめてWordPressを高速化 | ドキドメ!

さいごに

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

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