これまで数回の記事にわたって、WordPressのheadタグ内を整理する為に色々やってきましたが、今回はそれらのまとめを兼ねた最終の整理となります。
はじめに
これまでの流れ
header.phpを編集したり、プラグインを使わずに自力で実装する等して、headタグ内の情報を極力減らしてきました。
それらの記事については以下となります。
- WordPressのheadタグ内を徹底的に整理してみた
- WordPressでプラグインを使わずに人気記事を表示する方法
- WordPressでプラグインを使わずにシェアボタンを設置する方法
- WordPressでプラグインを使わずに関連記事を表示する方法
現状のheadタグ内
この段階でheadタグ内は以下の様になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>無能屋 | ホームページ制作に関する備忘録</title>
<link rel="pingback" href="https://munouya.com/wp/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="https://munouya.com/wp/wp-content/themes/munouya2/js/html5.js" type="text/javascript"></script>
<![endif]-->
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="無能屋 » フィード" href="https://munouya.com/wp/feed" />
<link rel='stylesheet' id='crayon-css' href='https://munouya.com/wp/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-github-css' href='https://munouya.com/wp/wp-content/plugins/crayon-syntax-highlighter/themes/github/github.css?ver=_2.7.2_beta' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-monaco-css' href='https://munouya.com/wp/wp-content/plugins/crayon-syntax-highlighter/fonts/monaco.css?ver=_2.7.2_beta' type='text/css' media='all' />
<link rel='stylesheet' id='toc-screen-css' href='https://munouya.com/wp/wp-content/plugins/table-of-contents-plus/screen.min.css?ver=1509' type='text/css' media='all' />
<link rel='stylesheet' id='twentytwelve-style-css' href='https://munouya.com/wp/wp-content/themes/munouya2/style.css?ver=4.8.1' type='text/css' media='all' />
<script type='text/javascript' src='https://munouya.com/wp/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://munouya.com/wp/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"https:\/\/munouya.com\/wp\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"};
/* ]]> */
</script>
<script type='text/javascript' src='https://munouya.com/wp/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta'></script>
<style type="text/css">div#toc_container {width: 100%;}</style><link rel="icon" href="https://munouya.com/wp/wp-content/uploads/2017/03/cropped-munouya-32x32.png" sizes="32x32" />
<link rel="icon" href="https://munouya.com/wp/wp-content/uploads/2017/03/cropped-munouya-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://munouya.com/wp/wp-content/uploads/2017/03/cropped-munouya-180x180.png" />
<meta name="msapplication-TileImage" content="https://munouya.com/wp/wp-content/uploads/2017/03/cropped-munouya-270x270.png" />
<link rel="stylesheet" id="twentytwelve-style-css" href="https://munouya.com/wp/wp-content/themes/munouya2/css/page.css" type="text/css" media="all">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60173813-3', 'auto');
ga('send', 'pageview');
</script>
</head>
現状プラグインを使っているのは、目次を自動生成してくれる「Table of Contents Plus」と、ソースコードを綺麗に表示してくれる「Crayon Syntax Highlighter」のみです。
headタグ内にその情報も組み込まれています。
前者はともかく、後者はさすがに自力でやる気にはなれません。
思った事
headタグ内を整理する上で、プラグインを減らしてheadタグ内の情報量を減らしたのはいいですが、メタタグ・スタイルシート・スクリプトでまとめたいという欲が出ました。
もうそうなってくると、wp_head()関数を無くして、自分でheadタグ内に書き込むのが一番という結果に至りました。もちろんこれ以上プラグインを増やさない前提です。。。
headタグ内の最終整理
最終整理の方法は、wp_head()関数を使わずに、自分で書き込んでいきます。
手順は以下の通りです。
STEP1：現状のheadタグ内の情報を取得
まずはこれをやらないと始まりません。
ブラウザ上で自分のブログを開いて、右クリックから「ページのソースを表示」を選び、headタグ内の情報をメモ帳とかにコピペしておきます。
STEP2：wp_head()とwp_footer()の削除
header.phpに記述されているwp_head()と、footer.phpに記述されているwp_footer()を削除またはコメントアウトします。
なぜwp_footer()も削除するのかと言いますと、wp_head()だけ削除すると、「wp_head()でタグを出力できなかったらwp_footer()で出力する」という処理が働いてしまうからです。
プラグイン全般がそうなのか、一部のプラグインだけがそうなのかは調べてないので知りませんし、wp_footer()には出力しないやり方があるのかも調べてないので知りません。
とりあえず、当ブログではwp_footer()も必要なかったので削除しました(笑)。
STEP3：headタグ内に書き込む
STEP1でコピペしておいたソースコードをheader.phpのheadタグ内に貼り付けます。
ただ貼り付けるだけでなく、ソースが綺麗になるように並べ替えも行います。
当ブログでは、メタタグ→タイトル→色々なlinkタグ→スタイルシートのlinkタグ→スクリプトタグの順番でまとめてみました。
タグに記述されているURLですが、ソースコードからコピペしてきているものなので絶対URLの状態になっているかと思います。
そのままでも問題ないかと思いますが、一応関数でURLを取得して書き出すスタイルにしてみます。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="msapplication-TileImage" content="<?php echo content_url(); ?>/uploads/2017/03/cropped-munouya-270x270.png">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="dns-prefetch" href="//s.w.org">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?> » フィード" href="<?php bloginfo('rss2_url'); ?>">
<link rel="icon" href="<?php echo content_url(); ?>/uploads/2017/03/cropped-munouya-32x32.png" sizes="32x32">
<link rel="icon" href="<?php echo content_url(); ?>/uploads/2017/03/cropped-munouya-192x192.png" sizes="192x192">
<link rel="apple-touch-icon-precomposed" href="<?php echo content_url(); ?>/uploads/2017/03/cropped-munouya-180x180.png">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page.css">
<link rel="stylesheet" href="<?php echo plugins_url(); ?>/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta">
<link rel="stylesheet" href="<?php echo plugins_url(); ?>/crayon-syntax-highlighter/themes/github/github.css?ver=_2.7.2_beta">
<link rel="stylesheet" href="<?php echo plugins_url(); ?>/crayon-syntax-highlighter/fonts/monaco.css?ver=_2.7.2_beta">
<link rel="stylesheet" href="<?php echo plugins_url(); ?>/table-of-contents-plus/screen.min.css?ver=1509">
<!--[if lt IE 9]><script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script><![endif]-->
<script type="text/javascript" src="<?php echo includes_url(); ?>js/jquery/jquery.js?ver=1.12.4"></script>
<script type="text/javascript" src="<?php echo includes_url(); ?>js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/configuration.js"></script>
<script type="text/javascript" src="<?php echo plugins_url(); ?>/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta"></script>
</head>
STEP4：jsファイルにまとめれるものはまとめる
プラグイン絡みで以下のタグが出力されています。
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"https:\/\/munouya.com\/wp\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"};
/* ]]> */
</script>
<style type="text/css">div#toc_container {width: 100%;}</style>
こちらはSTEP3のタグには含めていません。
上のスクリプトタグは「Crayon Syntax Highlighter」の設定情報、下は「Table of Contents Plus」のスタイル情報です。
上のやつはjsファイルに入れて、下のやつは削除します。
ついでにGoogle Analyticsのタグもjsファイルに突っ込んでみました。
jsファイルは「configration.js」で、STEP3のソースコードの26行目にタグが入っています。
( function( $ ) {
$(document).on("click", "a[href^=#]", function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$($.browser.webkit ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
return false;
});
} )( jQuery );
// CrayonSyntax用
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"https:\/\/munouya.com\/wp\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"};
// Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60173813-3', 'auto');
ga('send', 'pageview');
jsファイルはこんな感じ。
最終結果
ソースコードはこんな感じになりました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="msapplication-TileImage" content="https://munouya.com/wp/wp-content/uploads/2017/03/cropped-munouya-270x270.png"> <title>無能屋 | ホームページ制作に関する備忘録</title> <link rel="dns-prefetch" href="//s.w.org"> <link rel="pingback" href="https://munouya.com/wp/xmlrpc.php" /> <link rel="alternate" type="application/rss+xml" title="無能屋 » フィード" href="https://munouya.com/wp/feed"> <link rel="icon" href="https://munouya.com/wp/wp-content/uploads/2017/03/cropped-munouya-32x32.png" sizes="32x32"> <link rel="icon" href="https://munouya.com/wp/wp-content/uploads/2017/03/cropped-munouya-192x192.png" sizes="192x192"> <link rel="apple-touch-icon-precomposed" href="https://munouya.com/wp/wp-content/uploads/2017/03/cropped-munouya-180x180.png"> <link rel="stylesheet" href="https://munouya.com/wp/wp-content/themes/munouya2/style.css"> <link rel="stylesheet" href="https://munouya.com/wp/wp-content/themes/munouya2/css/page.css"> <link rel="stylesheet" href="https://munouya.com/wp/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta"> <link rel="stylesheet" href="https://munouya.com/wp/wp-content/plugins/crayon-syntax-highlighter/themes/github/github.css?ver=_2.7.2_beta"> <link rel="stylesheet" href="https://munouya.com/wp/wp-content/plugins/crayon-syntax-highlighter/fonts/monaco.css?ver=_2.7.2_beta"> <link rel="stylesheet" href="https://munouya.com/wp/wp-content/plugins/table-of-contents-plus/screen.min.css?ver=1509"> <!--[if lt IE 9]><script src="https://munouya.com/wp/wp-content/themes/munouya2/js/html5.js" type="text/javascript"></script><![endif]--> <script type="text/javascript" src="https://munouya.com/wp/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script> <script type="text/javascript" src="https://munouya.com/wp/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script> <script type="text/javascript" src="https://munouya.com/wp/wp-content/themes/munouya2/js/configuration.js"></script> <script type="text/javascript" src="https://munouya.com/wp/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta"></script> </head>
良し悪しは人それぞれという事で、個人的には満足しました♪
