WordPressには欲しい機能がすぐ使える便利なプラグインがたくさんあります。
使い方も簡単なのでついたくさんインストールしてしまう人も多いかと思います。
WordPressのプラグインの中には表示の時のデザインやレイアウトのために何も設定しなくてもプラグインのCSSをヘッダーで読み込んでいるものもあります。 これはこれで何も考えなくても綺麗にレイアウト・装飾してくれて助かるのですが、たまに自分でデザインしたい時もあります。
そういう時は、プラグインのCSSをテーマのCSSで上書きする方法もありますが、一からデザインしたい場合にはプラグインのデフォルトCSSをざっくり削除する必要があります。
そこで、よく使われていそうなプラグインのデフォルトCSSを削除する方法を調べてみました。
各プラグインのCSS削除方法
WordPressは4.2.2、各プラグインは表示しているバージョンで確認しています。
別のバージョンでは違っている場合があったり、よくわからずに削除するとプラグイン自体が動かなくなったり表示が崩れるかもしれませんのでご注意ください。
WordPressのプラグインが自動的に読み込むCSSを削除するには「functions.php」に以下のように追加します。
Contact Form 7
問い合わせフォームを設置できるプラグイン。(バージョン 4.2.1)
//Contact Form 7が読み込むCSSを削除
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_styles' );
function my_delete_plugin_styles() {
wp_deregister_style( 'contact-form-7' );
}
Child Pages Shortcode
固定ページの子ページを一覧表示できるプラグイン。（バージョン 1.9.3）
//Child Pages Shortcodeが読み込むCSSを削除
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_styles' );
function my_delete_plugin_styles() {
wp_deregister_style( 'child-pages-shortcode-css' );
}
WP-PageNavi
記事のナビゲーションを表示するプラグイン。（バージョン 2.87 ）
//WP-PageNavieが読み込むCSSを削除
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_styles' );
function my_delete_plugin_styles() {
wp_deregister_style( 'wp-pagenavi' );
}
Yet Another Related Posts Plugin
表示中の記事に関連する記事を表示できるプラグイン。（バージョン 4.2.5）
//Yet Another Related Posts Pluginが読み込むCSSを削除
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_styles' );
function my_delete_plugin_styles() {
wp_deregister_style( 'yarppWidgetCss' );
}
Theme My Login
会員制サイトでよく利用されているプラグイン。（バージョン 6.3.12）
//Theme My Loginが読み込むCSSを削除
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_styles' );
function my_delete_plugin_styles() {
wp_deregister_style( 'theme-my-login' );
}
複数のプラグインのCSSを削除する時の書き方
複数プラグインのCSS削除をまとめて書きたい場合は次のように「wp_deregister_style( ‘xxxx’ );」を追加していってください。
//プラグインが読み込むCSSを削除
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_styles' );
function my_delete_plugin_styles() {
wp_deregister_style( 'contact-form-7' ); //contact form 7
wp_deregister_style( 'child-pages-shortcode-css' ); //Child Pages Shortcode
wp_deregister_style( 'wp-pagenavi' ); //WP-PageNavi
wp_deregister_style( 'yarppWidgetCss' ); //Yet Another Related Posts Plugin
wp_deregister_style( 'theme-my-login' ); //Theme My Login
}
プラグインの設定画面からCSSを削除できるプラグイン
プラグインの中には「functions.php」に追加しなくてもプラグインの設定でCSSを非表示にできるものもあります。
Table of Contents Plus
記事内に目次を設置できるプラグイン。（バージョン 1507）
「Advanced」メニューを表示させて、「Exclude CSS file」にチェックを入れるとCSSファイルを読み込みません。
WordPress Popular Posts
サイト内の人気記事を表示するプラグイン。（バージョン 3.2.2）
「Tools」→「Miscellaneous」の「Use plugin’s stylesheet」をDisabledにするとCSSファイルを読み込みません。
まとめ
今回はプラグインが読み込むCSSを削除する方法を紹介しましたが、プラグインが読み込むJavaScriptも削除することができます。
ただ、JavaScriptの場合はプラグインの動作に影響する部分もあるので、わからずに何でもかんでも削除してしまうのはおすすめしません。
そうは言ってもカスタマイズしやすいのがWordpressの良いところ。応用として「if」を使えば色々できそうですよね。
たとえば「フロントページだけ読み込ませない」とか「Contact Form 7のCSSとJavaScriptはお問い合わせページの時だけ読み込ませる」などなど。
まだまだWordpress勉強中の私ですが、できることが増えてくると楽しいですね。
