目次
WordPressのplug-inのCSSを無効にする。
フロントエンドエンジニアっぽくなり始めたTokiyoです。
毎日しこしこWordPressで作っていますが皆さんWordPressしてますか〜。
私も日々奮闘し、こういうのがあったらなぁって感じた事がしばしば・・・。
WordPress制作をしていると便利なplug-inを使いがちです。
plug-inを色々使うとそのplug-inがCSSを吐き出します。
でも直接コードを打ち込むとそのCSSは使わない場合が結構あります。
というかほとんどそうなります。
例えば「WordPress Popular Posts」はウェジットで読み込むとCSSを変更するのが大変です。
私の場合はこの様なコードを直接書いています。
<h4 class="menu_underh2"> POPULAR POSTS DAILY</h4>
<ul id="kanren" class="margin-bottom-30px">
<li class="sidekanren_libox">
<?php
$wpp = array (
'range' => 'daily', /*集計期間の設定（daily,weekly,monthly）*/
'limit' => 8, /*表示数はmax5記事*/
'post_type' => 'post', /*投稿のみ指定（固定ページを除外）*/
'title_length' => '35', /*タイトル文字数上限*/
'stats_comments' => '0', /*コメント数は非表示*/
'stats_views' => '1', /*閲覧数を表示させる*/
'thumbnail_width' => '50', /*画像のwidth（px）*/
'thumbnail_height' => '50', /*画像のheight（px）*/
'post_html' => '<li class="clearfix"><a href="\{url}\" class="article_linker"></a><span class="kanren_img">{thumb}</span>{title}<span class="red_text">{stats}</span></li>', /*表示されるhtmlの設定（サムネイル、記事タイトル、の順で表示）*/
); ?>
<?php wpp_get_mostpopular($wpp); ?>
</li>
</ul>
この場合「post_html」で指定したモノがhtmlとclass指定になります。
こう書くとclass指定も簡単な訳ですね。
ですが元のCSSを切っているわけではないです。
なのでplug-inの元から読まれているCSSを根こそぎ読まないようにしようと言う事です。
plug-inが吐き出す「<style id='wordpress-popular-posts-css' …>」を探し出せ！
WordPressのではfunction.phpで指定して行けば読み込まれないように出来ます。
「<strong>WordPress Popular Posts</strong>」だとheadでこの様に吐き出されます。
.wpp-list{
}
.wpp-list li{
float:none;clear:left}
.wpp-post-title{
}
.wpp-thumbnail{
display:inline;float:left;margin:0 5px 0 0;border:none}
.wpp-excerpt{
}
.post-stats{
display:block;font-size:9px;font-weight:bold}
.wpp-comments{
}
.wpp-views{
}
.wpp-author{
}
.wpp-date{
}
.wpp-rating{
}
上記にあるコードの中にplug-inが吐き出している「id」が存在します。
この「id」を使って読み込み拒否しましょう！
必要な部分は「id=’wordpress-popular-posts-css’」です。
add_action( 'wp_enqueue_scripts', 'deregister_plugin_files' );
function deregister_plugin_files() {
wp_dequeue_style( 'wordpress-popular-posts' );
wp_dequeue_style( 'xxxxx' );
wp_dequeue_style( 'xxxxx' );
}
他のplug-inのcssも含めてならば「xxxxx」の部分に記述して下さい。
このコードをfunction.phpに書き込めば使っていないPlug-inのcssを切ることが出来ます。
細かいことではありますが、一つ一つを消していくことでサイトの表示スピード改善に繋がります。
注意点はfunction.phpの「<?php ?>」を注意して下さい。
管理画面から直接function.phpを触って画面真っ白になるとえらいこっちゃになりますｗ。
対応策はfunction.phpをバックアップしておき、FTPソフトで直接置き換えるしかありません。
本当に気をつけて下さい！
後書き
これらサイトスピードに繋がる修正店はフロントエンドがやるべき仕事の一つだと考えるべきでしょう。
サイト出来たけど表示スピードが遅いとクレームに繋がりかねません。
できるだけ気持ちの良いスピード感を提供するのもWeb屋のサービスですね。