column

WordPressプラグインが吐き出すCSSをfunctions.phpで簡単削除しよう!

CATEGORY PC & Web WordPress プラグイン TAG, ,

投稿日:2014年12月4日 更新日:

執筆者:

WordPressのplug-inのCSSを無効にする。

フロントエンドエンジニアっぽくなり始めたTokiyoです。

毎日しこしこWordPressで作っていますが皆さんWordPressしてますか〜。

私も日々奮闘し、こういうのがあったらなぁって感じた事がしばしば・・・。

 

WordPress制作をしていると便利なplug-inを使いがちです。

plug-inを色々使うとそのplug-inがCSSを吐き出します。

でも直接コードを打ち込むとそのCSSは使わない場合が結構あります。

というかほとんどそうなります。

例えば「WordPress Popular Posts」はウェジットで読み込むとCSSを変更するのが大変です。

私の場合はこの様なコードを直接書いています。

 

スクリーンショット 2014-12-04 10.45.22


<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を触って画面真っ白になるとえらいこっちゃになりますw。

対応策はfunction.phpをバックアップしておき、FTPソフトで直接置き換えるしかありません。

本当に気をつけて下さい!

 

後書き

これらサイトスピードに繋がる修正店はフロントエンドがやるべき仕事の一つだと考えるべきでしょう。

サイト出来たけど表示スピードが遅いとクレームに繋がりかねません。

できるだけ気持ちの良いスピード感を提供するのもWeb屋のサービスですね。


コメントを残す

関連記事

PREV

Google推奨!簡単にできるMaterial対応フレームワーク

NEXT

1分でポリゴンデザイン!誰にでも出来る簡単無料アプリ「DMesh」を使ってみた

WordPressプラグインが吐き出すCSSをfunctions.phpで簡単削除しよう!

side bar

メニューはこちら

メニューはこちら