イイダリョウのブログ。WordPress:PHP書式とテンプレートタグの識別-前編2018-01-10ざっくりWordPress:PHP書式とテンプレートタグの識別-前編PHP「PHPの基本を理解するためにJSと比較する」でWordPressは「PHP書式」とWordPress独自の「テンプレートタグ」で構成されていると書きました。PHPの基本書式について解説しました。これを踏まえてWordPressのコードを見直すと、「テンプレートタグ」が見つけやすくなります。それではさっそくWordPressのコードを見ていきましょう。前・後編の2回に分けて書きます。前編はWordPressのファイル構成、テンプレートタグのインクルードタグ、WordPressループを見ていきます!目次:WordPressのファイル構成index.phpのコードWordPressのテンプレートタグインクルードタグWordPressループ最後に本稿はPHP書式が出てきます。「サーバサイドの中でのWordPressの位置付け」で、WordPressには「テーマ」(デザインテンプレート)と「プラグイン」(拡張機能)があると書きました。※参考:サーバサイドの中でのWordPressの位置付け具体的にはどういうファイル構成になっているか見ていきます。WordPressのファイル一式をダウンロードしてみましょうか。「WordPress」で検索すると一番上に公式ページがありますね。※参考:WordPress公式ページ右上に「WordPressをダウンロード」があるのでクリック。おっと、別ページになった!いきなりはダウンロードできないらしい。x.x.xをダウンロード」をクリック。(x.x.xは最新バージョン数です)ダウンロードした「wordpress」フォルダを開くとこんな感じです。見ての通りほとんどが.phpファイルですね。いくつかフォルダがある。私たちが普段カスタマイズで触るのは「wp-content」の中です。「wp-content」の中はこんなん。プラグインが「plugins」、テーマは「themes」ですね。プラグインはあまりカスタマイズしません。(プラグインのバージョンアップの時に不具合の原因になるため)それでは「themes」の中を見てみましょうか。「themes」の中はこんなん。いくつかのフォルダが入っていますね。これらはWordPressの「デフォルトテーマ」と言います。Seventeen」は「2017年版のデフォルトテーマ」を意味します。Seventeen」の中を見てみましょう。.phpファイルがたくさん入っていますね。トップページのファイルindex.phpの中を見てみましょう。index.phpのコード下記がindex.phpのコードです。get_footer();ぐぬぬ...いきなりいろんな書式のコードがたくさんですね(汗)。この中から「HTMLのみ」を抜き出してみましょう。下記のような構成になります。headerが2つあるのはPHPのif文で分岐するためです。-->ここに「PHP書式」を加えるとこうなります。後述する「テンプレートタグ」はここではざっくりした日本語に置き換えています。最初のPHPには「ヘッダー設定」が入ります。.wrapの最初にif文でheaderが2つに分岐しています。#primaryおよびmainの中にはまず「コンテンツ処理」が入っています。while文で反復しています。次に「ページネーション処理」が入ります。array配列の中にspan要素が埋め込まれています。#primaryの下のPHPに「サイドバー設定」が入ります。最後のPHPに「フッター設定」が入ります。PHP終了タグは省略されています。WordPressのテンプレートタグindex.phpのコードの中には見かけない関数がたくさん出てきます。これらは「テンプレートタグ」と言って、WordPressのシステムの中に定義されている独自の関数です。index.phpのコードのシンタックスハイライトの色が付いていない黒字の関数がテンプレートタグです。テンプレートタグはPHPの組み込み関数ではないため、WordPress以外のPHPファイルでは認識しません。位置付けとしては「JSのライブラリとフレームワーク」で触れたJSの「ライブラリ」の「メソッド」と似ています。WordPressのテンプレートタグ※参考:【卒jQueryへの道】生JSとライブラリとフレームワークの理解それでは代表的なテンプレートタグを見ていきましょう。インクルードタグ「インクルードタグ」は、CMSサイト全体の共通パーツ(ヘッダーなど)を外部ファイル化(header.phpなど)し、ページにインクルード(読み込み)するタグです。これによって例えばヘッダーの修正が生じた時にはheader.phpの一箇所を修正するだけでサイト全体に適用されます。:get_で始まります。get_header():ヘッダーheader.php読み込みget_sidebar():サイドバーsidebar.phpを読み込むget_footer():フッターfooter.phpを読み込むget_template_part():その他のパーツ。引数の中のPHPファイルを読み込むWordPressループ「WorePressループ」は投稿一覧を表示する時に重要な「制御構造」です。該当ページに投稿があるか判定し、投稿数の回数ループして表示します。*1下記のような構造です。endwhile;endif;?>if文(分岐)の中にwhile文(反復)が入っています。if文とwhile文の条件式の中にはhave_posts()というテンプレートタグがあります。投稿がある時に分岐や反復を実行する、という意味になります。while文のブロック文の最初にthe_post()というテンプレートタグがあります。これは「次の投稿を取得する」という役割になり、ブロック文の内容を実行した後に、次の投稿に進んで同じブロック文を実行します。index.phpのmain要素の中に下記のようなWordPressループがあります。);endif;?>このWordPressループのif文はelseで分岐しています。(elseがない場合はifの条件式に合致しない場合何もしない)while文の中にはget_template_part()というインクルードタグがあり、template-parts/post/ディレクトリの中のcontent.phpをインクルードします。その下のthe_posts_pagination()はページネーションを出力するテンプレートタグです。引数には「ページネーション設定」の配列arrayが入っています。if文elseで投稿がないときににget_template_part()でtemplate-parts/post/ディレクトリの中のcontent-none.phpを読み込みます。);はcontent.phpをincludeする※参考:WordPressにページネーションを入れる方法なお、省略した「ページネーション設定」などの中にも様々なテンプレートタグが入っています。詳細はこちらを参照ください。日本語版(ただし、twentyseventeen_get_svg()などテーマの中に定義された独自の関数もあり、他のテーマに変更すると反映されません)最後に私はHTML→CSS→JS(というかjQuery)と進んだあと「どうやらCMSというものがあるらしいぞ」とWordPressに挑戦。*2ダッシュボードでブログのように投稿ができることに感動し、メニュー名やカテゴリ名を一気に編集できることにまた感動。*3さあ次は自作テーマに挑戦だ!という段階で独特なPHP書式の塊に戸惑いました。ネット上の先人たちのコードをかき集めたパッチワークコードで乗り切ったものでした。先にPHPの基礎を理解していたらこんなに回り道をしていなかったかもな〜と思っています。Seventeen」の別のファイルや、プラグインのコードなども見ていきたいと思います。idr-zz.hatenablog.com※参考:【WordPress、PHP、SQL文】サーバサイドの基本まとめqiita.com*1:「メインループ」とも言います。他に、サイドバーなどに別ページの投稿を表示する「サブループ」もあります。「WP_Query」などの書式です。22:28Tweet関連記事2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。Fieldsの繰り返し(グループ)機能の出力タグ一覧Qiitaアドベントカレンダー「WordPress」5日目の記事です。FlywheelのAdminerから慣れよう(WordPressのDB操...DB、すなわちデータベース*1。普段あまり触れることがないDB。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。