WordPressのwp_head()の出力を制御しよう

公開日:2020 2/7

wp_headはデフォで余計なものが出力されすぎ！

実はWordpressのテーマ作りの基本は前回で終わっています。

あとはWordpressの使い方になってくるので、細かい所の説明をしていきます。

今回はwp_head()が出力する要らないコードを消したい！という人のために Wordpressのヘッダ(HTMLタグのheadタグの中)部分に焦点をあてていきます。

それではWordpress自作テーマ講座第12回目を始めましょう。

wp_headが出力する内容を確認してみよう
wp_headの余計な出力を制御してみよう
あまり制御しすぎるとプラグインが動かないこともあるので注意
Wordpress自作テーマ講座第11回まとめ

wp_headが出力する内容を確認してみよう

Wordpressには自動で出力してくれるテンプレートタグがたくさんあります。

その中でもHTMLのヘッダ情報を出力してくれる「wp_head()」という関数があります。

とても便利な関数なのですが、好き勝手に出力してくるのでソースコードがとても汚くなります。

デフォルト状態だと、セキュリティホールの足がかかりになるかもしれない Wordpressのバージョン情報を出力したり、全く使わないjQueryを読み込んだり、何もしないと余計なコードを出力してサイト全体の読み込み速度が落ちてしまいます。

後ほど制御方法をお教えしますので、まずはwp_headが何を出力しているのかみてみましょう。

そんなもんはいいから早く消させてくれ！

って人は次の項目へ飛んでもらっても大丈夫です。

wp-includes/default-filters.php

wp_headの出力設定は、Wordpressのコアファイル「default-filters.php」に記述されています。

ちょっと多いので全部書ききれないので一度デフォルト状態で出力される内容を見てみましょう。

functions.phpの中身を全部消してブログにアクセスしてみましょう。

そしてwp_head()を下記の位置にはめ込みました。

    <meta charset="utf-8">

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('template_url') ?>/style.css" type="text/css">

文字コードとスタイルシートの間に入れています。

改行をあけることによってどこからどこまで追加されたのかがわかりやすくしました。

それでは何が出力されているかを見てみましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">

    <link rel='dns-prefetch' href='//s.w.org' />
        <script type="text/javascript">
            window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/naorogue.local\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.2.2"}};
            !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
        </script>
        <style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
    <link rel='stylesheet' id='dashicons-css'  href='http://naorogue.local/wp-includes/css/dashicons.min.css?ver=5.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://naorogue.local/wp-includes/css/admin-bar.min.css?ver=5.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-css'  href='http://naorogue.local/wp-includes/css/dist/block-library/style.min.css?ver=5.2.2' type='text/css' media='all' />
<link rel='https://api.w.org/' href='http://naorogue.local/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://naorogue.local/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://naorogue.local/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 5.2.2" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>

    <link rel="stylesheet" href="http://naorogue.local/wp-content/themes/testtheme/style.css" type="text/css">
    <title>テスト用自作テーマ</title>
  </head>

とりえあず一番頭からheadの閉めタグまでコピペしました。

なんかめっちゃ出力されてますね。

インデントも一番左揃えになっているわけでもないし、ぐっちゃぐちゃです。

私は元々HTMLコーダーなので余計なコードを吐き出されるのがとても嫌いなので、 Wordpressが勝手に出力されるコードを徹底的に消した覚えがあります。

当時はfunctions.phpを弄る知識がなかったので、直接コアファイルを弄ったりしていました。

今思えば恐ろしいことしてましたね(笑)

まぁそれでも絶対でなくていいっていうものはコアファイルから制御してしまうこともあります。

wp_headの余計な出力を制御してみよう

それでは１つずつ上から出力を制御してみましょう。

一番上にある

<link rel='dns-prefetch' href='//s.w.org' />

コイツは何をしているかというと、簡単に言うと表示速度を改善してくれるというそれだけを聞くと凄いヤツに思えますが、かなり微々たる差なので正直なくてもいいです。

Webページを表示する際に裏で行われている仕組みのDNSルックアップという処理があります。

たぶん普通のブロガーは気にする必要もないので、説明は省きます。

詳しく知りたい人はDNSルックアップで検索してください。

この出力されているDNSプリフェッチはWordpressの絵文字に使われます。

私は絵文字なんてブログでは使わないので不必要なため削除しています。

絵文字を使う人は残しておいてもいいかもしれません。

それではこのコードを消してみましょう。

functions.phpに以下のコードを記述して更新してください。

<?php
  /* DNSプリフェッチ設定の削除 */
  add_filter( 'emoji_svg_url', '__return_false' );

これで消えたはずです。

講座の最初の方でWordpressのバージョンを消したときにも似たようなことをしましたね。

基本的にWordpressの出力制御は出来る限りコアファイルを弄らず、 functions.phpでこのように制御していきます。

ただ、出力されている文字列からadd_filterをする方法はわかりません。

こればっかりはソースコードの中身をみて何ていう命令で出力されているのかを見なければいけません。

とりあえず今wp_head()で出力されているコードをすべて消してみましょう。

以下のコードをfunctions.phpにコピペしてください。

<?php
  /* DNSプリフェッチ設定の削除 */
  add_filter( 'emoji_svg_url', '__return_false' );

  /* 絵文字削除 */
  remove_action( 'wp_head',             'print_emoji_detection_script', 7 );
  remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
  remove_action( 'wp_print_styles',     'print_emoji_styles' );
  remove_action( 'admin_print_styles',  'print_emoji_styles' );

  /* WP5.x.xのブロックエディタ用スタイルの排除 */
  wp_deregister_style( 'wp-block-library' );
  wp_deregister_style( 'wp-block-library-theme' );

  /* wp-json削除 */
  remove_action('wp_head','rest_output_link_wp_head');
  remove_action('wp_head','wp_oembed_add_discovery_links');

  /* 外部投稿ツール設定削除 */
  remove_action( 'wp_head', 'wlwmanifest_link' );
  remove_action( 'wp_head', 'rsd_link' );

  /* WPのバージョン削除 */
  remove_action('wp_head', 'wp_generator');

これでwp_head()が何も出力しなくなりました。

これ、wp_head()使う意味ある？ってなってしまうのですが、プラグインを有効にするとwp_head()でスタイルシートやjavascriptが出力される可能性があります。

なのでwp_head()を消してしまうと正常にプラグインが動かなくなってしまうので、一応入れておきましょう。

よくありがちなのが、jqueryを使うプラグインなのにwp_head()が記述されておらずプラグインが動かないという問題です。

私みたいにカスタマイズしまくりたい人は勝手にコードをだしてくるので消してしまっても大丈夫です。

ちなみにWordpressのバージョンによって出力されるコードが少し違うかもしれません。

私が今現在制御しているWordpressのバージョンは

「WordPress 5.2.2」

です。

参考までに。

あまり制御しすぎるとプラグインが動かないこともあるので注意

先ほども言いましたが、functions.phpで制御しまくっているとプラグインが動かなくなってしまうことがあります。

wo_head()のフッター版、wp_footer()というものがあるのですが、例えばcontactform7というお問い合わせプラグインがあります。

あれはwp_footer()で専用のコードを出力しているので、wp_footer()を消してしまうと動かなくなります。

他にも消してしまったWordpressデフォルトのコードに依存したプラグインも少なからずあるので、もしプラグインが動かないと思ったらwo_head()かwp_footer()で制御しているものが原因だと思えば、問題解決が早まるかもしれません。

私は自分の想定外のコードを出力されるのが嫌いなので、基本的には制御しまくって足りないところは自分で効率の良いコードを記述して使えるようにしています。

この拘りはぶっちゃけ利益面で見るとむしろマイナスなので趣味レベルに抑えておきましょう(笑)

Wordpress自作テーマ講座第12回まとめ

今回はwp_head()で出力されるコードを制御してみました。

remove_action
add_filter

の2つで大概の自動出力コードを制限することが出来ます。

意味のないコードから意味のあるコードまで出力されるので、普通の人はあまり気にならないと思いますがWordpressを使いこんでいくうちにだんだんと気になります。

もし仕事でWordpressを使うことがあって、この汚いコード何とかしたいなと思った人に役立ってくれれば幸いです。

次回は最低限見た目を整えてみましょう。

Wordpressの講座であるので、別にphpに拘る必要もないかなと思いました。

html+CSSならある意味一番長くやってきているので得意分やです。

今の見た目がダサすぎるので、もうちょっと今風のデザインに作り替えていきましょう。

それでは。