WordPress ›

AddThis のプラグインで勝手に入るCSSを削除する

このあいだブログに入れた AddThis Sharing Buttons というプラグインで、wp_head() で勝手に挿入される外部CSSのタグを削除しました。プラグインのフックを消す時いつも関数名がわかんなくなるんでメモしときます。

テーマファイル内の functions.php に remove_action() を追加します。 

remove_action( 'wp_head', 'addthis_minimal_css' );

プラグインのソースファイルの中で見つけたaddthis_minimal_cssというフックでは、output.cssという必要最低限の外部CSSファイルが読み込まれるようになっていました。とても小さなCSSですが、特に必要なさそうなのでガン無視することにしました。

AddThis の output.css
/**
 * +--------------------------------------------------------------------------+
 * | Copyright (c) 2008-2016 AddThis, LLC                                     |
 * +--------------------------------------------------------------------------+
 * | This program is free software; you can redistribute it and/or modify     |
 * | it under the terms of the GNU General Public License as published by     |
 * | the Free Software Foundation; either version 2 of the License, or        |
 * | (at your option) any later version.                                      |
 * |                                                                          |
 * | This program is distributed in the hope that it will be useful,          |
 * | but WITHOUT ANY WARRANTY; without even the implied warranty of           |
 * | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the            |
 * | GNU General Public License for more details.                             |
 * |                                                                          |
 * | You should have received a copy of the GNU General Public License        |
 * | along with this program; if not, write to the Free Software              |
 * | Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA |
 * +--------------------------------------------------------------------------+
 */

.entry-content .addthis_toolbox,
.entry-content .addthis_button,
.entry-header .addthis_toolbox,
.entry-header .addthis_button {
    margin:10px 0 10px 0;
}
.addthis_button_tweet {
    min-width: 83px;
    float:left;
}
.atwidget iframe {
    max-width:none;
}
div.at-above-post-homepage a,
div.at-below-post-homepage a,
div.at-above-post a,
div.at-below-post a,
div.at-above-post-page a,
div.at-below-post-page a,
div.at-above-post-cat-page a,
div.at-below-post-cat-page a,
div.at-above-post-arch-page a,
div.at-below-post-arch-page a,
div.addthis_toolbox a,
a.at-share-btn {
    border: 0;
    box-shadow: none;
}
div.addthis_toolbox br {
    display: none
}

たいていこの手のスタイルの指定とか初期化は自分のCSSでできてしまうのでプラグインの吐くJavaScriptとかCSSって邪魔になること多いです。インラインならまだマシですが、CSSとJSファイルの読み込みは設定画面で使用の可否を設定できるようにしてほしいです（無駄な条件分岐が増えるだろうけど）。

あと、<head>直下に記述した<link>要素のCSSは、GoogleのPageSpeed Insightsでは、「修正を考慮」の対象として評価されてしまいます。この程度のCSSではほとんど体感できないですが、「塵も積もればなんとやら」で速度改善の施策を複合的に行うと速度向上も実感できるようになるので、なるべく評価が下がるようなものは入れないようにしたいッス。

CSS の配信を最適化する | PageSpeed Insights | Google Developers

関連する記事