WEB/システム/IT技術ブログ

WordPressの関数「wp_head」の出力内容をアクションフックで制御する

WordPressの関数「wp_head」はデフォルトでさまざまなコードを出力します。
オリジナルでテンプレートを開発する場合に、このコードが邪魔になることがほとんどです。しかし、wp_head自信を削除してしまうと、プラグインなどが正常に動作しなくなる危険性があります。
なぜなら、wp_headやwp_footerがあることを前提に開発されているプラグインが多くあり、動作に必要なコードを出力しているからです。

そこで、今回はfunctions.phpにアクションフックを記述して、不要なコードの出力を省く方法を調査します。

実際に表示されるコードと削除方法

以下、各セクションにおいて、まずwp_headを読み込むとデフォルトで出力されるHTMLソースを提示します。
次に、そのソースを表示させないため、functions.phpに書き込むアクションフックを示します。

※順不同です。また、新しいバージョンでは表示されなくなっているものもあります。

フィードリンク

デフォルトで出力されるフィードのリンク情報を削除します。

<link rel="alternate" type="application/rss xml" title="CMS helog » フィード" href="http://cms.helog.jp/feed/" />
<link rel="alternate" type="application/rss xml" title="CMS helog » コメントフィード" href="http://cms.helog.jp/comments/feed/" />
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'feed_links_extra', 3);

デフォルトCSS

デフォルトで読み込まれるテーマのCSSを削除します。

<link rel='stylesheet' id='twentyfourteen-lato-css'  href='//fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic' type='text/css' media='all' />
<link rel='stylesheet' id='genericons-css'  href='http://cms.helog.jp/wp-content/themes/twentyfourteen/genericons/genericons.css?ver=3.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='twentyfourteen-style-css'  href='http://cms.helog.jp/wp-content/themes/twentyfourteen/style.css?ver=3.9' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyfourteen-ie-css'  href='http://cms.helog.jp/wp-content/themes/twentyfourteen/css/ie.css?ver=20131205' type='text/css' media='all' />
<![endif]-->
remove_action('wp_head', 'wp_print_styles', 8);

デフォルトJavaScript

デフォルトで読み込まれるJavaScriptを削除します。

<script type='text/javascript' src='http://cms.helog.jp/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://cms.helog.jp/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
remove_action('wp_head', 'wp_print_head_scripts', 9);

EditURI

「EditURI」情報を削除します

<link rel="EditURI" type="application/rsd xml" title="RSD" href="http://cms.helog.jp/xmlrpc.php?rsd" />
remove_action('wp_head', 'rsd_link');

wlwmanifest

「wlwmanifest」情報を削除します

<link rel="wlwmanifest" type="application/wlwmanifest xml" href="http://cms.helog.jp/wp-includes/wlwmanifest.xml" /> 
remove_action('wp_head', 'wlwmanifest_link');

WordPressのバージョン情報

WordPressのバージョン情報を削除します

<meta name="generator" content="WordPress 3.9" />
remove_action('wp_head', 'wp_generator');

前の記事、次の記事のリンク

記事ページに追加される、前の記事、次の記事へのリンク情報を削除します。

<link rel='prev' title='前の記事' href='http://cms.helog.jp/previous/' />
<link rel='next' title='次の記事' href='http://cms.helog.jp/next/' />
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

canonical

canonical情報を削除します。

<link rel="canonical" href="http://cms.helog.jp/xxxxx/" />
remove_action('wp_head', 'rel_canonical');

shortlink

shortlink情報を削除します。

<link rel='shortlink' href='http://cms.helog.jp/?p=1' />
remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

絵文字

WordPress 4.2から絵文字が使えるようになったことで、絵文字用のスタイルとスクリプトが読み込まれます。
削除することで絵文字は使えなくなります。

<script type="text/javascript">
	window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/cms.helog.jpt\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.3"}};
	!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),!(j.toDataURL().length<3e3)&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,65039,8205,55356,57096),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,55356,57096),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55357,56425,55356,57341,8205,55357,56507),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55357,56425,55356,57341,55357,56507),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.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>
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');

Embed

WordPress 4.4から追加された「Embed」機能に関する出力ですが、必要ない場合に以下で出力を削除します。

<link rel='https://api.w.org/' href='http://cms.helog.jp/wp-json/' />
remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('wp_head', 'wp_oembed_add_host_js');

DNS Prefetching

WordPress 4.6から追加された「DNS Prefetching」を削除します。
DNSプリフェッチは、外部ドメインのDNS名前解決を事前に強制させることで、サイトの表示速度をアップする技術のようです。
外部jsや画像などをほとんど読み込まない場合には必要ないでしょう。

<link rel='dns-prefetch' href='//s.w.org' />
remove_action('wp_head', 'wp_resource_hints', 2);

「最近のコメント」ウィジェット用スタイル

以下のような「最新のコメント」ウィジェット用のスタイルが出力されます。ウィジェットを使用してない場合は不要なので削除します。

<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
function remove_wp_widget_recent_comments_style(){
	global $wp_widget_factory;
	remove_action('wp_head', array(
		$wp_widget_factory->widgets['WP_Widget_Recent_Comments'],
		'recent_comments_style'
	));
}
add_action('widgets_init', 'remove_wp_widget_recent_comments_style');

Google検索結果スニペット

Googleの検索結果に表示されるスニペットを制御するタグです。

<meta name='robots' content='max-image-preview:large' />
remove_filter('wp_robots', 'wp_robots_max_image_preview_large');

Global Stylesのコード?

WordPress 5.9から、関数wp_body_open()より大量のsvg、cssコードが出力されるようになりました。
その機能についてよく理解できていませんが、とりあえず大量コードによるレスポンスへの影響が気になるので削除します。

remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');
remove_action('wp_body_open', 'wp_global_styles_render_svg_filters');

まとめ

バージョンによって、その記述は若干変化しますが、WordPress 5.9.2時点でのwp headリセット設定を以下にまとめます。

remove_action('wp_head', 'wp_resource_hints', 2);
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');
remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('wp_head', 'wp_oembed_add_host_js');
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
remove_action('wp_head', 'rel_canonical');
remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
remove_filter('wp_robots', 'wp_robots_max_image_preview_large');
remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');
remove_action('wp_body_open', 'wp_global_styles_render_svg_filters');
function remove_wp_widget_recent_comments_style(){
	global $wp_widget_factory;
	remove_action('wp_head', array(
		$wp_widget_factory->widgets['WP_Widget_Recent_Comments'],
		'recent_comments_style'
	));
}
add_action('widgets_init', 'remove_wp_widget_recent_comments_style');

この記事はWordPressのバージョンアップに伴い、必要に応じてその都度更新していきたいと思います。

同様にフッタ部分に出力する「wp_footer」があるのですが、デフォルトでは特に無駄なコードは出力していないようです。
ログイン後に管理バーを表示したり、他のプラグインがコードを出力したり、フックを使って自身で解析コードなどを出力させたりなどの活用法があるので、関数は残しておいたほうがよいでしょう。

B!

Comment

コメントはありません

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives