イイダリョウのブログ。WordPress:PHP書式とテンプレートタグの識別-後編2018-01-13ざっくりWordPress:PHP書式とテンプレートタグの識別-後編PHPWordPressをカスタマイズしようとした時に見慣れぬコード郡に戸惑った方(私もです)向け!「PHP書式」と「テンプレートタグ」が識別できるとコードが読みやすくなるよ、という記事です。「前編」の続きになります。Seventeeenのindex.phpファイルを中心に「インクルードタグ」「WordPressループ」について解説しました。本稿はPHP書式が出てきます。「PHPって何?」という方はこちら※参考:PHPの基本を理解するためにJSと比較するcontent.phpのコード前編で見たindex.phpは「WordPressループ」によって投稿一覧が表示さました。投稿の中身自体は別の.phpファイルがインクルードされていましたね。そのファイルはtemplate-parts/post/ディレクトリの中のcontent.phpです。content.phpはこんなコードです。-->うーむ、index.phpと同じくらいのボリュームがありますかねー。前編と同じく「HTML要素」のみ抜き出してみます。--></article>articleの中にhederと.post-thumbnailと.entry-contentがあります。headerの中にはメタ情報(日付、カテゴリなど).entry-metaとタイトルh1〜h3があります。タイトルが複数あるのはPHPのif文で分岐するためです。.post-thumbnailはサムネイルです。中にaリンクがありますね。.entry-contentは本文です。「PHP書式」を加えるとこんな感じです。前編と同様に「テンプレートタグ」はざっくりした日本語に置き換えています。?></article>冒頭のPHPにはテーマの情報がコメントで書かれています。entry-metaが埋め込まれ、「タイトル」h1〜h3がif文の分岐で表示されます。.post-thumbnailには「サムネイル」の設定が入ります。.entry-contentに「コンテンツ」の表示設定が入ります。sprintfはPHPの「組み込み関数」でフォーマット化された文字列を返します。中にはspan要素が入っています。その下には投稿が複数ページに渡るときのページネーションが配列array()で入っています。最後にif文の中でフッター表示の設定があります。投稿のテンプレートタグcontent.phpには「投稿」の表示によく使われるテンプレートタグが見受けられます。下記のようなものです。is_home();:「トップページなら」を意味します。is_front_page():こちらも「トップページなら」を意味します。is_single():「投稿ページなら」を意味します。get_で始まります。get_post_type():投稿のタイプを取得。)は「投稿ページなら」を意味します。get_the_post_thumbnail():投稿サムネールを取得。the_で始まります。the_post_thumbnail():サムネイルを表示。the_content():本文を表示。ファイルも基本的には同じやり方です。「HTML構造」→「PHP書式」→「テンプレートタグ」の順番で全体像から細部に向かって見ていけばコードが理解しやすくなります。ここではheader.php、footer.phpに必須で入るテンプレートタグを紹介します。header.phpから。?></head>wp_head()はhead要素の閉じタグの直前に入れます。次はfooter.phpです。?></body>wp_footer()は、body要素の閉じタグの直前に入れます。いずれもWordPress本体やプラグインの設定(.jsファイル、.cssファイルなど)を読み込む関数です。入れ忘れるとプラグインが動かない、プラグインのCSSが反映されない、などの問題が起こる可能性があります。functions.phpのテーマ独自タグテーマフォルダの中にもう一つ大事なファイルがあります。functions.phpです。functionsという名前の通りここには「関数たち」が入っています。「PHPの基本を理解するためにJSと比較する」でPHPの「ユーザー定義関数」はJSと同じくfunctionを頭に付けると書きました。「前編」のindex.phpにも今回のcontent.phpにもfunctionの文字が見当たらないですよね。そこに呼び出された関数は別のファイルに定義されているということです。先ほど「twentyseventeen_get_svg()はテーマの中に定義された独自の関数」と書きました。その正体こそがfunctions.phpの中の「関数たち」です。function.phpを見るとたくさんの関数や変数が定義されています。下記のようなものです。twentyseventeen_excerpt_more()というテーマ独自関数の定義部分です。);if文の条件にあるis_admin()はis_で始まることからもわかるように「条件分岐タグ」です。「管理画面であれば」を意味します。変数$linkを返すようです。その下に変数$linkの定義があります。()は先ほど出てきたPHPの組み込み関数ですね。P要素やa要素の文字列を返します。()があり中にはspan要素が入っています。()は「フィルターフック」と言ってJSでいうイベント(○○した時に関数を実行)のような役割です。イベントや実行に関わる関数は引数の中で指定されています。JSのイベントについてはこちら参考:【JSの基本-後編】書ける前に読む!HTML、CSS、JSの書式-5なお、テーマ独自の関数を直接編集すると、テーマをバージョンアップした時に編集が無効になってしまう可能性があります。WordPressはテーマ同士に親子関係(親テーマ、子テーマ)を作ることができます。「子テーマ」はバージョンアップの影響を受けません。*1そのため、テーマ独自の関数を編集したい場合はthemesフォルダに「子テーマ」を作って、そこのfunctions.phpを編集します。*2(「自作テーマ」の場合はこの限りではありません。自作のユーザー定義関数もどんどん書き加えて構いません)プラグインのメソッド最後に、プラグインのコードも見てみましょう。「前編」で、プラグインのファイルはpluginsフォルダの中にあると書きました。フォルダの中はこのようになっています。akismetやwp-multibyte-patchなどはWordPressに最初から入っている「デフォルトプラグイン」です。他のプラグインをインストールするとこのフォルダに追加されます。pluginsフォルダの中の関数も直接は編集しません。「子テーマ」のfunctions.phpで編集します。先ほどのテーマ独自の関数と同様の理由です。*3プラグインの中にも独自の関数(メソッド)が定義されてきます。「生JSとライブラリとフレームワーク」で触れたjQueryプラグインのメソッドとよく似た位置付けです。プラグインを削除すると「そんなメソッドはないよ」と認識されません。図にするとこんな感じです。マトリョーシカみたいになってきた...。Fields」のコードです。投稿にコンテンツ以外の独自の項目「カスタムフィールド」を追加できます。Fieldsこのコードをcontent.phpの任意の場所に挿入するとその場所にカスタムフィールドが表示されます。こちらもテーマのバージョンアップの影響を受けないようにcontent.phpを「子テーマ」に複製をしてから編集します。Fields独自の「メソッド」です。このプラグインをアンインストールすると認識しません。profileという名前のグループを取得します。foreachはwhileやforと同じく「反復」の制御構造で、「配列」の数がある分だけ繰り返します。プラグインの中に定義された$repeat_groupの数がある分$fieldsを反復処理します。いう名前のキーから値を呼び出して表示することがわかります。最後にWordPressのコードを初めて見たとき「なんじゃこりゃあ!」と感じたものです。先人のコードをコピペしてもそれが何を意味しているのかわからず、どこをどういじっていいのやら改変するにもおっかなビックリ。コードが「文字の塊」に見えてしまっているんですよね。.phpファイルは「HTMLタグ」の中に「PHP書式」が埋め込まれている。その中にWordPressの「テンプレートタグ」やプラグインの「メソッド」が呼び出されている。いう感じにコードを3分割、4分割と分類していくと見渡しが良くなり、だんだん「ここは触っていいんだなー」「ここは触っちゃいけなさそう」と判断力が付いてきます。WordPressをとっかかりにPHPコードに慣れていくと他のWebサービス(例えばEC-CUBEとかね)にも取り組みやすくなるかと思います。*5サーバサイドの世界に踏み込めるとできることが一気に拡がるのでなんだかワクワクしてきますね!それではまた。idr-zz.hatenablog.com※参考:【WordPress、PHP、SQL文】サーバサイドの基本まとめqiita.com*1:子テーマは親テーマより後に読み込まれるため、親テーマのコードを上書きします。*2:その他の.php、.css、.jsファイルも同じです。*3:テーマやプラグインがバージョンアップするのは機能の追加のほか、セキュリティの強化もありますので、できるだけ最新バージョンにしていきましょう。*4:呼び名は違いますが要は「関数」なんですよね*5:簡単なものなら自分で開発してみたりしちゃったりしちゃったりして...。00:53Tweet関連記事2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。