<head>内を大掃除してすっからかんのWordPressテーマを作る

シェアする：

更新日時：2020年8月13日

この記事をおすすめしたい人

  • WordPressのテーマを自分で作ろうとしている人
  • WordPressの既存テーマの<head>内を掃除したい人
  • つまりオレ

脱WordPressの話ばっかりやっているんですが、なんだかんだで完全に「脱」は無理だと思っているので今回はWordPressの話です。

一般にWordPressは既存テーマを使うことが多いんですかね。

僕は実験大好きっ子なので初日から自作テーマの作り方を調べてたんですが、「WordPressがどうやってページを生成しているのか」を理解しないとなかなかゼロからの自作は難しかったです。

そこを越えても<head>内にやたらコードが追加されていて消し方が分からなかったり。

今回は既存テーマをベースに、コードを削除しまくって、<head>もすっからかんにして、超シンプルなテーマを作りたいと思います。

WordPressの上でな！

あ、WordPressの上でいいんだった。

WordPressのバージョンやその他の条件

使用したWordPressは、この記事書いてる時点での最新版5.4.2です。 バージョンによってはコードが動かなかったり、追加・削除が必要な場合があると思います。

各種設定の変更はなし。

プラグインは全て無効。

ベースとしたテーマは「Twenty Nineteen Ver.1.6」。
まぁすっからかんにするのであんまり関係ないですね。

header.phpとfooter.phpの大掃除

WordPressではページ内のヘッダやフッタ、サイドバーを全ページで効率的に使い回せるよう独立したファイルとなっています。

それが「header.php」であり「footer.php」です。

サイドバーは「sidebar.php」ですが、「Twenty Nineteen」には入っていなかったので今回は除外です。 WordPressのバージョンによっては「sidebar.phpないのはテーマとして認めませんよー」みたいなの言われた気がするんですが、気のせいかもしれません。

で、これらのパーツを「single.php」(投稿ページのテンプレート)や「page.php」(固定ページのテンプレート)が共有して使い回すわけです。

なのでまずはこの共通パーツの大掃除を始めます。

header.phpの掃除

header.phpに必要なのはドキュメントタイプの宣言から<body>の開始タグくらいまでかなと思います。

サイトの構造によってはレイアウト用の<div>の開始タグがあったり、パンくずリストを含めたりするかもしれません。

今回は超シンプルなものを作るので全部バッサリ。 


<!doctype html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>

<head>内には「wp_head()」関数が処理するもの以外、何も表示されません。

footer.phpの掃除

footer.phpの掃除はもっと楽です。

header.phpで開いたままのタグを閉じるだけ。

実際のサイトではJavaScriptを置いたり、レイアウトによってはサイドバーの読み込みもここで行ったりします。

今回は当然バッサリ。 


<?php wp_footer(); ?>
</body>
</html>

header.phpでレイアウト用の<div>を置いた場合にはここで閉じる必要があります。

はい、これでHTMLとして最小限の構造を持っただけのheader.phpとfooter.phpができました。

「single.php」のお掃除

今回は投稿ページで動作確認をするため、single.phpをお掃除します。

固定ページの場合は「page.php」ですが、基本はsingle.phpと同じ内容になります。 


<?php

get_header();

the_post();
the_content();

get_footer();

?>

HTMLタグがひとつも登場しなくなりました。

後のメンテナンス性を考慮して、各パートを切り分けるついでにそれぞれが何をやっているか書いてみます。 


<?php

//header.phpの読み込み
get_header();

?>
<!-- ここにはHTMLが置けます -->
<?php

//このページの投稿を読み込み
the_post();
//このページの投稿の本文を出力
the_content();

?>
<!-- ここにはHTMLが置けます -->
<?php

//footer.phpの読み込み
get_footer();

?>

「index.php」のお掃除は？

「index.php」はちょっと扱いが難しいファイルで、WordPressのテンプレート階層の最深部にいます。

single.phpやpage.phpなどのページテンプレートがひとつもなかった場合、全てのページがindex.phpを雛形にします。

とは言っても投稿ページや固定ページをindex.phpに任せるケースは希だと思うので、ここではそれ以外のページ、すなわち「一覧系ページ」の雛形としてこのような形にしました。 


<?php

get_header();

if ( have_posts() ) {
  while ( have_posts() ) {
    the_post();
    
    //リンクの出力
  }
}

get_footer();

?>

ここまでの掃除の成果

テンプレートの大掃除の結果、出力されるHTMLはこう↓なりました。 


<!doctype html>
<html>
<head>
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="(サイト名) &raquo; Hello world! のコメントのフィード" href="https://XXXXXXXXX/?feed=rss2&#038;p=1" />
<script type="text/javascript">
(絵文字のJavaScript)
</script>
<style type="text/css">
(絵文字のスタイルシート)
</style>
<link rel='stylesheet' id='wp-block-library-css'  href='https://XXXXXXXXX/wp-includes/css/dist/block-library/style.min.css?ver=5.4.2' type='text/css' media='all' />
<link rel='https://api.w.org/' href='https://XXXXXXXXX/index.php?rest_route=/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://XXXXXXXXX/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://XXXXXXXXX/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='old test' href='https://XXXXXXXXX/?p=8' />
<link rel='next' title='test' href='https://XXXXXXXXX/?p=6' />
<meta name="generator" content="WordPress 5.4.2" />
<link rel="canonical" href="https://XXXXXXXXX/?p=1" />
<link rel='shortlink' href='https://XXXXXXXXX/?p=1' />
<link rel="alternate" type="application/json+oembed" href="(略)" />
<link rel="alternate" type="text/xml+oembed" href="(略)" />
</head>
<body>

<p>WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。</p>

<script type='text/javascript' src='https://XXXXXXXXX/wp-includes/js/wp-embed.min.js?ver=5.4.2'></script>
</body>
</html>

だいぶシンプルになりましたが、wp_head()関数が大量のコードを、wp_footer()関数が1つのコードを出力しています。

それぞれについての要不要は置いておいて、今回は「消す」ことが目的なので全部消していきます。

おまけでテーマ内のファイルも大掃除

テーマのファイルも削りに削って、以下の9ファイルまで減らしました。

  • 404.php
    ページが見つからなかった時(404)のテンプレート。
  • footer.php
    ページ下部(フッタ)のパーツ。
  • functions.php
    サイト全体で使い回す処理や関数の定義。
  • header.php
    ページ上部(ヘッダ)のパーツ。
  • index.php
    全ページで使用される可能性があるベースのテンプレート。
  • page.php
    固定ページのテンプレート。
  • screenshot.png
    ダッシュボード内「外観」でテーマのサムネイルに使用される画像。
  • single.php
    投稿ページのテンプレート。
  • style.css
    テーマの情報を書いておくスタイルシート。

404.phpは別になくてもいいかなと思うんですが、いつも設定を忘れがちなので敢えて残しました。

ついでにお遊びで、style.cssではテーマ名を「NULL」とし、screenshotはこんな↓感じ。

ナルポッ！

wp_head()とwp_footer()の大掃除

wp_head()とwp_footer()が追加するコードを「functions.php」を利用して消していきます。

「functions.php」も今の段階では当然すっからかんです。

ツールバーを消す

管理用のツールバーが表示されている場合はまずこれ。 


add_filter('show_admin_bar', '__return_false');

「s.w.org」へのDNSプリフェッチを削除


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

これを消します。 


remove_action('wp_head','wp_resource_hints', 2);

3番目の引数は「remove_action」を優先する順位だそうですが、何故か2じゃないと消えなかったので「2」です。

DNSプリフェッチというのは、例の如くよく分かってないんですが、外部サイトのファイル読み込みを高速化する機能らしいです。

デフォルトHTMLのソースを確認したら絵文字スクリプトくらいにしか使われてなかったので、絵文字使わない人は消していいやつだと思います。

RSSを削除


<link rel="alternate" type="application/rss+xml" title="(サイト名) &raquo; Hello world! のコメントのフィード" href="https://XXXXXXXXX/?feed=rss2&#038;p=1" />

これを消します。 


remove_action('wp_head', 'feed_links_extra', 3);

こちらも3番目の引数は3じゃないと消えなかったので「3」にしています。

昔のWordPressはもっとたくさんRSSのリンクがあって消しまくった記憶があったんですが、今はひとつしかないんですね。

絵文字スクリプトの削除


<script type="text/javascript">
(絵文字のJavaScript)
</script>

これを消します。 


remove_action('wp_head', 'print_emoji_detection_script', 7);

3番目の引数は、こちらも同様に何故か7じゃないと消えなかったので「7」です。

絵文字など不要。

絵文字スタイルの削除


<style type="text/css">
(絵文字のスタイルシート)
</style>

これを消します。 


remove_action('wp_print_styles', 'print_emoji_styles');

絵文字など不要。

大事なことなので2回言いました。

「wp-block-library-css」の削除


<link rel='stylesheet' id='wp-block-library-css'  href='https://XXXXXXXXX/wp-includes/css/dist/block-library/style.min.css?ver=5.4.2' type='text/css' media='all' />

これを消します。 


function remove_wp_block_library() {
  wp_dequeue_style('wp-block-library');
}
add_action('wp_print_styles', 'remove_wp_block_library');

「wp-block-library-css」というのはWordPress Ver5以降で読み込まれるCSSらしいです。

(今回は)不要なので削除。

REST APIのリンクを削除


<link rel='https://api.w.org/' href='http://XXXXXXXXX/wp-json/' />

これを消します。 


remove_action('wp_head', 'rest_output_link_wp_head');

REST APIが何か分からない人には不要な項目だと思います。

EditURIを削除


<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://XXXXXXXXX/xmlrpc.php?rsd" />

これを消します。 


remove_action('wp_head', 'rsd_link');

これはXML-RPCという規格を利用して、外部から遠隔投稿する機能のようです。

(怖いので)消します。

wlwmanifestを削除


<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://XXXXXXXXX/wp-includes/wlwmanifest.xml" />

これを消します。 


remove_action('wp_head', 'wlwmanifest_link');

リンク先のXMLの中身を見て調べて見たらWindows Live Writerを使って外部から投稿する際の仕様が書かれていました。

(怖いので)もちろん消します。

前後ページへのリンクを削除


<link rel='prev' title='old test' href='https://XXXXXXXXX/?p=8' />
<link rel='next' title='test' href='https://XXXXXXXXX/?p=6' />

これを消します。 


remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

1行で2つとも消えます。

これは実際にサイトを動かす時にはあった方がいいんじゃないですかね。

投稿ページは順番に並んでいると思うのであった方がいい気がします。

固定ページでのみ削除する場合は「page.php」の中で「get_header()」が呼ばれる前に上のコードを置けばいいです。 


remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

get_header();

generatorを削除


<meta name="generator" content="WordPress 5.4.2" />

これを消します。 


remove_action('wp_head', 'wp_generator');

使ってるシステムとそのバージョンを教えてやる必要なんかありません。

WordPressであることはソースを見るとすぐバレてしまうでしょうが、バージョンはセキュリティ的にもよろしくないはず。

canonicalを削除


<link rel="canonical" href="https://XXXXXXXXX/?p=1" />

これを消します。 


remove_action('wp_head', 'rel_canonical');

「canonical」が何なのかはこの記事でも見てください。

消したいというよりは、なかったら入れたいくらいの代物ですが、今回は「消す」のが目的なのでいったん消します。

shortlinkを削除


<link rel='shortlink' href='https://XXXXXXXXX/?p=1' />

これを消します。 


remove_action('wp_head', 'wp_shortlink_wp_head');

ショートリンクはパーマリンク設定がどのような形になっていても「/?p=(ページID)」の形式になる短いリンクのようです。

無駄にページIDを教えるだけのような気もしますが、「ショート」であることがメリットになる場合は有用なんでしょう。

oEmbedを削除


<link rel="alternate" type="application/json+oembed" href="(略)" />
<link rel="alternate" type="text/xml+oembed" href="(略)" />

これを消します。 


remove_action('wp_head', 'wp_oembed_add_discovery_links');

oEmbedというのはWordPressのオブジェクト埋め込み機能だそうです。 この場合は外部へページの詳細情報を提供しているリンクでしょう。

XMLの中身を見てみるとページの情報が書かれていました。

必要な人には必要なのかもしれない。

oEmbedのJavaScriptを削除


<script type='text/javascript' src='https://XXXXXXXXX/wp-includes/js/wp-embed.min.js?ver=5.4.2'></script>

これを消します。 <head>ではなく</body>直前にあります。 


remove_action('wp_head', 'wp_oembed_add_host_js');

名前からするとoEmbed関連のJavaScriptっぽいですが、ひとつ前の「oEmbedを削除」では削除できていませんでした。

その他の項目の削除方法

今回はプラグインなし状態なのでこれだけでしたが、プラグインが入っているともっとたくさんの項目があると思います。

それらを消したい場合はidとかrelとか、究極的にはその行まるまるコピーしてGoogleへ放り投げてやればいいです。

だいたい誰かが解説してくれてます。

大掃除の結果

ここまでの成果で笑えるくらいシンプルなHTMLが出力できるようになりました。

このコードを見てWordPress生成だと言い当てられる人はまぁいないでしょう。 


<!doctype html>
<html>
<head>
</head>
<body>

<p>WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。</p>

</body>
</html>

本分に「WordPress へようこそ」って書いとるがな！

functions.php内の削除用コードまとめはコレ↓です。 


add_filter('show_admin_bar', '__return_false');
remove_action('wp_head', 'wp_resource_hints', 2);
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

function remove_wp_block_library() {
  wp_dequeue_style('wp-block-library');
}
add_action('wp_print_styles', 'remove_wp_block_library');

remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'rel_canonical');
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('wp_head', 'wp_oembed_add_host_js');

WordPressのバージョンやプラグインによっては不要なコードがあったり、追加が必要なコードが出てきます。

今回は、次回やる予定のしょうもない実験のための下準備でしたが、WordPressのテーマを自分で作ろうとしている人や既存テーマの<head>内を掃除したい人なんかにはちょっと役立つ話かもしれません。

以上、WordPressからお届けしました！

シェアする：
WordPress,WP-テーマ