Self-Curation

新卒社会人で営業マンになりました

【WordPress】テーマファイル内にあるPHPファイルの内容

f:id:scuration:20200504194651p:plain

WordPressのテーマフォルダの中には様々なphpファイルを含んでおります。

しかしphpの知見がないと何が書かれてあるのか理解するのが難しいです。

なので今回はデフォルトテーマであるtwentysixteenのindex.phpを例にし、
PHPファイルの見方を簡単に説明していきたいと思います!


【目次】

テーマファイルの構成

WordPressのテーマは様々なファイルから構成されています。

例えばデフォルトで入っている「twentysixteen」というテーマファイルは以下の場所に格納されているはずです。

app\public\wp-content\themes\twentysixteen

さらにtwentysixteenフォルダの中身は以下のような構成になっているでしょう。

twentysixteen
│  404.php
│  archive.php
│  comments.php
│  footer.php
│  functions.php
│  header.php
│  image.php
│  index.php
│  page.php
│  search.php
│  searchform.php
│  sidebar-content-bottom.php
│  sidebar.php
│  single.php
│  style.css
│
├─css
├─genericons
├─inc
├─js
└─template-parts



それぞれ独立した機能ごとにphpファイルが存在します。

例えば「404.php」は存在しないページがリクエストされたときにどのようにエラーを返すか。
「footer.php」はページのフッターをどのように表示するかが記述されています。

index.phpとは

index.phpはトップページに表示される内容を記述したものです。

例えば当サイトのトップページURLは「https://blog.scuration.info」となっております。
ブラウザ上でこのURLをリクエストしたときにはWEBサイトが置かれているサーバーで、index.html、もしくはindex.phpファイルを探して表示するという仕組みです。

index.phpは<div>などのHTMLタグだけでなく、<?php>から始まるPHPコードを記述することによって動的なページにすることが可能です。

次項でindex.phpファイルの構成要素について解説します。

PHPタグ

get_〇〇

テーマのディレクトリから「〇〇.php」ファイルを読み込みます。

例えば<?php get_header(); ?>はheader.phpファイルを読み込む記述です、()内に名前を入れることで指定のheaderファイルを読み込むことができます。

この記述で実行されるのはあくまで「header.phpファイルを読み込む」という動きのみであり、どのようなヘッダーを表示するかについてはheader.phpを編集する必要があります。

条件分岐

<?php if ( ) : ?>

PHPで条件分岐を行う際には上記のように「if (条件式)」を記述します。

WordPress関数

以下の記述が意味するものは何でしょうか?

<?php if ( have_posts() ) :
処理1 
?>

この条件式に含まれているhave_postというのはWordPress専用の関数であり、単体で記事投稿があるか否かを返してくれます。

if文全体ではサイトの投稿があるかどうかを判別し、投稿が存在する場合は処理1を実行するという仕組みです。

WordPressの関数については以下Codexにて調べることができます。

関数リファレンス - WordPress Codex 日本語版



ちなみにWordPress関数は「app\public\wp-includes」に含まれているphpファイルで定義されています。

have_postについての記述があるのは「query.php」ファイルです。

function have_posts() {
	global $wp_query;
	return $wp_query->have_posts();
}

HTMLタグ

PHPファイル自体はあくまでWEBページの内容を記述するファイルです。

PHPコードだけでなくHTMLタグも含まれており、HTMLタグ内の記述は書いてあるものがそのまま表示されます。

index.phpには以下のようなHTMLタグが記述されていると思います。

divタグ

<div>から始まるdivタグはHTMLタグの一つです。

ただし改行を表す<br>タグや、段落を表す<h1>タグと違って単体で意味は持っておりません。

<div>~</div>で要素を囲むことによってそれらをグループ化する役割を持っています。

またclassやidを記述することによってそのグループに名前をつけることが可能です。CSSで変更したいclassやidを指定することでレイアウト変更が容易になります。

mainタグ

mainとはWEBページの主要な内容を表すものです。ソースを見ると<body>として表示される部分になります。

ヘッダー、フッター、サイドバー、検索フォーム…
これら各ページで共通して表示されるものとは切り離すのが一般的です。


以上です。

自分はページレイアウトを弄るのが当面の課題なので今回は浅くなぞるような説明になりました。

また各要素について掘り下げた記事を書ければと思います。