ワードプレス1級整備士への道

オリジナルテーマの作成テンプレート化

テンプレート化
index.phpを分割してテンプレート作成

2022年03月26日

前回の内容は

  • Bootstrap5のサンプルをダウンロードしてきてindex.htmlをindex.phpに変更。
  • style.cssを追加してコメントでオリジナルのワードプレスのテーマとして認識させる。
  • index.phpから参照しているBootstrap5のCSSとJavaScriptをCDMとして読み込むように書き換え。
  • 同一フォルダ内のCSSを読み込むためにテーマフォルダを指してくれるワードプレス関数を使用

index.phpテンプレート化する

まだ、オリジナルのデザイン（Bootstrap5のサンプル）がワードプレスで表示されただけでワードプレスの管理画面の機能は全然使えていません。投稿が所定の位置に表示されたり、新着記事が自動で表示されたりはしていません。これから投稿された記事を思った位置に表示させたりをしたいのですが、その前にまだもうひと手間かけておきます。

ワードプレスでブログのように記事をどんどん追加していくとサイトの構造が複雑化する可能性があります。カテゴリーが増えたりカテゴリーに親子関係が発生したりすることがありますね。その場合アドレス（URL）が深くなったりするとページごとにリンク関係が複雑になる可能性があります。あるページからは同階層に別のカテゴリがあるのにあるページでは1階層上がったところに別のカテゴリが存在したりします。でも大丈夫です。ワードプレスがそのあたりをきちんとしてくれます。そのためにはナビゲーションが存在する部分を別ファイルにして管理しておくのがいいです。

ワードプレスではページの先頭にあるナビゲーションあたりまでを１つのファイル、投稿や固定の内容を１つのファイル、一番下のフッターあたりを１つのファイルとして管理することが望ましいです。サイドバーがあるサイトはそれも分けておくとよいですね。

これによってヘッダーのナビゲーションやフッターの会社案内などの内容が変わってもそれぞれのファイルを触るだけですべての投稿に変更が反映されるのでとても便利です。

ヘッダー、本文、フッターの３つに分ける

index.phpを３つに分割します。

  • header.php
  • index.php
  • footer.php

の3つに分けます。前回のオリジナルテーマのindex.phpをファイルをテキストエディタで開きます。メニューがあるとこまでをheader.phpにします。画像がスクロールするカルーセル部分はトップページにだけあればよいのでここから下はindex.phpに残しておきます。コピーライト以下のフッター部分はfooter.phpに移動させます。ここは機械的に簡単にしたいのですが、HTML要素のmainの終了タグがfooter.phpに含まれます。mainの開始タグをheader.phpに入れておくのがよいですね。今後いくつかテンプレートが増えていきますがheader.phpとfooter.phpはほぼ必ずペアで呼び出すので開始と終了がセットになってくれます。index.phpは必ずしも毎回使うとは限らないので毎度必ずmainの開始タグを書いてあげないと駄目になってしまいます。

では今回はindex.phpの67行目のmainの開始タグまでを切り取って、header.phpというファイルを新たに作成しそこに貼り付けます。index.phpのfooterのコメント以下を切り取ってfooter.phpファイルを作成しそこに貼り付けます。

ワードプレスが呼び出すのはindex.php

今のテーマのファイルの構成ではワードプレスがトップページを表示するときに読み込むのはindex.phpとなります。header.phpとfooter.phpは直接呼ばれることはありません。なのでindex.phpからheader.phpとfooter.phpを呼び出してあげます。index.phpの先頭行に

<?php get_header(); ?>

と記入します。ワードプレス関数であるget_headerが現在のテーマのheader.phpを読み込んでくれます。ページにより違うヘッダー部分を読み込みたい場合はget_header関数のかっこの中に引数として指定する方法もあります。今回の自作テーマでは使う予定はありません。また同様にindex.phpの最終行に

<?php get_footer(); ?>

と記入します。これでfooter.phpが読み込まれ3つに分割しましたがすべて読み込まれて分割前と同じ状態になります。

呼び出されたheader.phpとfooter.phpにはワードプレスお決まりの呪文を記述しておきます。ワードプレスが管理に必要なものを自動で出力するためです。正直テーマによっては不要なものも含まれますが後々プラグインでホームページに機能を追加する際にこれらのものが必要になることがあるのでおまじないと思って追記しておきます。header.phpには<body>の直上に

<?php wp_head(); ?>

と入力し保存します。

footer.phpには</body>の直上に

<?php wp_footer(); ?>

と記述して保存します。

おまじないの結果を確認する

<?php wp_head(); ?>

を記述した結果を確認します。

	<meta name='robots' content='max-image-preview:large' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/carousel.ansolution.tech\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.9.2"}};
/*! This file is auto-generated */
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([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]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.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 0.07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
	<link rel='stylesheet' id='wp-block-library-css'  href='http://carousel.ansolution.tech/wp-includes/css/dist/block-library/style.min.css?ver=5.9.2' type='text/css' media='all' />
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
</style>
<link rel="https://api.w.org/" href="http://carousel.ansolution.tech/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://carousel.ansolution.tech/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://carousel.ansolution.tech/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 5.9.2" />

と呪文が書かれています。とんでもない感じですがいったんそのまま受け入れましょう。使わないものもあるようですが。先に進みます。

今回はオリジナルテーマで1から（Bootstrap5のサンプルを使用していますがワードプレスのテーマとしては）作成していますので問題ありませんが<body>のすぐ上におまじないを挿入したので自分のCSSを読み込んだ後にワードプレス指定のCSSが読み込まれます。既存のテーマをCSSでカスタマイズする際にはちょっと困ります。テーマ独自のCSSが後で読み込まれますのでCSSの上書きができません。Bootstrap5のサンプルのcarousel.cssをテーマフォルダから読み込んでいますが同じクラス名を使用したのCSSが知らない間にワードプレスから読み込まれていたら思うように作動してくれないことになります。

ワードプレスがおまじないで出力してくれている物の中carousel.cssを読み込んでくれるように工夫します。

functions.phpを作成します。

テーマフォルダのルート（index.phpと同じ階層）にfunctions.phpというファイルを作成します。CSSファイル（carousel.css）はこのままでもよいのですが新たにaseetsフォルダを作成しその中にcssフォルダを作成しそこに移動します。大体のテーマがこのような構成になっているようでお作法のようです。

functions.phpという名前で作成したファイルはワードプレスが事前に読み込んでくれるのでテーマ全体、さらには管理画面をもカスタマイズできるという重要なファイルです。拡張子がphpということからわかるようにここにはPHPを記述します。PHPがよくわからない方もある程度理解しながらコピペで動作する、変更ができるようにしていきますので安心してください。

functions.phpにはPHPを記述します。PHPはPHPの始まりと終わりを宣言する

<?php  ?>

と記述し<?phpが始まりで?>が終わりです。でこの両者の間にPHPプログラムを記述するのですが、どこかから読み込まれるPHPは終了の?>を記述しない方がトラブルが少ないという特徴がありますのでfunctions.phpの冒頭に<?phpとだけ記述し改行しておいてください。

多くのテーマのfunctions.phpにはいろいろとコメントが書かれていますが、なくても支障はありませんので簡便に進めます。

PHPの関数について

PHPには関数というものがあります。中身はよくわからなくても関数を呼び出せば一定の結果が返ってくるものです。乗換案内みたいなものです。乗換案内に出発駅と到着駅を与えると出発駅の発車時刻や到着駅の到着時刻を返してくれます。場合によっては途中の乗換駅なども教えてくれます。更に日時の指定や到着時刻優先などいろいろ指定できたりします。

例えばPHPであいさつという関数を作って朝なら「おはよう」夜なら「こんばんわ」と返してほしいとします。関数はいくつも作れますので名前が必要です。

function 関数名(){
　処理
}

というのが形です。functionというが関数を作りますということです。関数名は英数で名前を付けます。その後ろに()が必ず必要です。(と)の間に変数が入る場合があります。変数は場合によって変わる可能性のあるものです。数学などでわからないものをxとするみたいなものです。関数側からはこの変数を引数と呼んだりします。

function greet($kubun){
 if($kubun === 'asa'){
  echo 'おはよう';
 }else{
  echo 'こんばんわ';
 }
}
greet('asa');

上記ならgreetという関数を定義して最終行でgreet関数を呼び出して実行しています。最終行でgreet(’asa’);という形で引数にasaという文字を渡しています。呼び出されたgreet関数ではこのasaをkubunという変数に格納します。PHPの変数は頭に$が付きます。

greet関数の中ではif(){}else{}という1つの命令が働いています。もし()の中身が本当なら{}の中身を実行してください。else（そうでなければ）else以降の{}の中を実行してね。ということです。ifの()の中で$greet === ’asa’となっているのは関数呼び出しもとで引数として渡した値（今回はasa）と文字列asaが等しいですか？と問いかけています。今回は正しいので{}の中のecho ‘おはよう’;が実行されます。echoは画面に出力するということです。

もし最終行の引数がyoruということでgreet(’yoru’);と書かれていたら$kubunにはyoruが代入されるのでif文の()の中が等しくない（本当ではない）のでelseの後ろの{}ないが実行されるので「こんばんは」と表示されます。

CSSファイルを読み込む

functions.phpに以下を書き込みます。

add_action('wp_enqueue_scripts',function(){
	wp_enqueue_style(
		'bootstrap5-carousel-styles',
		get_template_directory_uri() . '/assets/css/carousel.css'
	);
});

全体で1つの命令です。add_action();が大外の1つの命令です。add_action()がワードプレスが決めた関数です。関数を呼んでいますのですぐに実行されます。add_actionはその名の通り動作を加える命令です。add_actionは引数を4つ取ることができます。今回は後ろの2つが省略されて引数が2つです。

1つ目の引数がwp_enqueue_scriptsという文字列です文字列の場合はシングル、またはダブルのクォーテーションで囲みます。wp_enqueue_scriptsはアクションフックというもので一般にフックと呼ばれるます。このフックではCSSを読み込んだりJavaScriptを読み込んだりします。二つ目の引数がfunction(){}です。先ほどの関数です。この関数は自分で作ります。関数を実んで作る場合は前述のとおり関数名が必要ですが今回は関数名がありません。無名関数というものです。

function myfunctionname(){
	wp_enqueue_style(
		'bootstrap5-carousel-styles',
		get_template_directory_uri() . '/assets/css/carousel.css'
	);
});
add_action('wp_enqueue_scripts','myfunctionname')

というような説明サイトが多いです。myfunctionnameは関数名で呼び出し元でその関数を呼んでいます。この関数名は自分で関数を作るので関数名を考えないと駄目ですし、もし他の関数名（ワードプレスが設定した物、もともとのテーマでだれがが設定した物）と被ってしまうとうまく動作しなくなります。なので関数名を設定しません。関数名がなければ呼び出せませんので関数名を指定しているadd_actionの中に関数そのものを入れてしまう方法を取ります。

無名関数の中でさらにワードプレスが設定したwp_enqueue_style関数を実行します。このwp_enqueue_style関数は引数を5つ取ります。3つ目以降は省略できますので今回は2つ設定しています。JavaScriptを読み込む場合はwp_enqueue_style関数の代わりにwp_enqueue_script関数を使用します。

1つ目の引数bootstrap5-carousel-stylesはstyle要素のIDとして設定されますので他と被らない独自の名前を設定してください。

2つ目の引数はget_template_directory_uri() の部分はテーマファイルのあるフォルダまでを出力してくれます。http(s)://からテーマフォルダまでのurlになります。すぐ後ろにつくピリオドは文字列を結合するものです。’/assets/css/carousel.css’と一つの文字列になります。

他のCSSも読み込みたい場合はwp_enqueue_style();の塊をコピーしてfunction(){}の中に貼り付けます。1つ目の引数はidになるので必ず変更してください。もちろんCSSフィルの名前も変更が必要です。

add_action('wp_enqueue_scripts',function(){
	wp_enqueue_style(
		'bootstrap5-carousel-styles',
		get_template_directory_uri() . '/assets/css/carousel.css'
	);
	wp_enqueue_style(
		'ここはIDとして認識されるのでコピペの後変更',
		get_template_directory_uri() . '/assets/css/2つめのCSSファイル'
	);
});

今回は以上となります。

この時点のオリジナルテーマをダウンロード