全体の目次
本記事では、「FEの目線でWordPressを理解する」という目的で初学者による初学者向けの解説をします。全3回に分けているので、それぞれの内容は下記を参照してください。
第1回（この記事）
- はじめに
- ローカル環境を用意する
- デフォルトテーマを剥がして無のテーマを作る
- 「固定ページ」と「投稿」と「カスタム投稿タイプ」の解説
- カスタム投稿タイプの作成
第2回
- カスタム投稿タイプごとに「一覧ページ」と「本文ページ」を作る
- 「実績紹介」ページにカスタムフィールド「執筆者」を追加する
- 固定ページを追加する
第3回
- トップページにも「ニュース」と「実績紹介」の一部を表示する
- デフォルトの「投稿」を含む、各種投稿タイプの動作を解説
- お問い合わせフォームを追加する（おまけ）
- 細かい調整と、サイトの完成形の紹介
はじめに
WordPressは2021年においても全世界に存在するウェブサイトの**40%**で利用されており、なおも増加し続けているそうです。
近年ではよりミニマルでFEフレンドリーなHeadless CMSなどが登場してはいますが、プロダクトで利用する場合はやはり圧倒的シェアを誇るWordPressの豊富な情報やプラグインの存在は頼もしく、「だいたいの要件はWPで実現できる」という信頼と実績があります。
たとえばコーポレートサイトにおける「投稿による追加が可能な『ニュース記事ページ』」や「お問い合わせフォーム」はWPがあれば難なく作ることができるため、クライアントワークでも気軽に採用しやすい技術といえるでしょう。
さらに、エンジニアでなくてもGUIでコンテンツ運用ができる点もメリットです。非エンジニアが運用を行う場合、このブログのような「.mdファイルをリポジトリに生やして更新する」方式やContentfulの管理画面は少々ハードルが高いです。
結論として、依然WordPressが「ちょっと触れるとなにかと便利」なツールなのは事実といえるでしょう。
と言いつつ、私はWordPressには少なからず苦手意識がありました。というのも、
- プラグインなどがあり多機能な一方、やりたいことを実現する手段がややこしそう。WPの敷いた巨大なレールに乗ることを強いられそう
- 独特な用語やお作法が多く、覚えるのが面倒そう
というイメージがあったからです。
最近WPを業務である程度ちゃんと触る必要性に迫られたため、この機会にざっくりとWPの使い方について把握しておくことで、「なんとなくニガテ」という状態から「とりあえずこうやって使えばいいのか」くらいのレベル感に持っていくために執筆したのが今回の記事となります。同じく苦手意識のある方の役に少しでも立てば幸いです！
巷にあふれるWordPressの情報と今回の方針
WordPressについて少し調べるとすぐに気がつくのは、
- 既存のテーマをカスタムしたブログの運用方法など、非エンジニア向けの情報が多い。エンジニアにフィットする情報を探すのに骨が折れる
ということです。
本記事の前提として、FEである私は
- HTMLやCSSを書くことにはまったく抵抗がなく、サイトの骨格は既存テーマ等を使わずスクラッチで実装したい。
- 過剰にプラグインを導入するくらいなら、PHPのコードを多少書いてカスタムしたほうが手っ取り早いと感じる。
- WPを導入する理由は「コンテンツ管理」を行いたい（+エンドユーザーに編集用のGUIを提供したい）から、というのが主。
このような使い方をWPに求めています。そのため、本記事では
- 複数の「投稿による追加が可能なコンテンツ」をサイトに組み込む
方法に焦点を当てて解説を行います。話がややこしくなるので、プラグインなどもあまり使わない方針で進めていきます（実際の現場には、必要に応じて導入すればよいでしょう）。
※なお、WP REST APIについては今回は触れません。
注意点
- ECサイトの作り方などの話はしません。
- 初学者の備忘録的な記事のため、WPにおけるアンチパターンを堂々と掲載している可能性もあります。
成果物の紹介
今回は「コーポレートサイト」の制作を想定して、
- 記事を投稿して追加が可能な「実績紹介」「ニュース」と、その一覧ページ
- 「会社概要」など、HTML/CSSで実装した複数の静的な固定ページ
- シンプルな「お問い合わせフォーム」（プラグイン利用）
を組み込んだWebサイトを作成しました。サンプルなので申し訳程度ですが、スタイリングはすべて自前で行っています。
個人のポートフォリオサイトなどにも転用できる内容なので、WordPress初学者が作るにはちょうどいい課題だと思います。
なお、テーマファイルはGitHubで公開しているため、参考にしてください。
ローカル環境の構築
WordPressはPHPの動くサーバー上で稼働します。Docker等を利用してもよいですが、今回は手っ取り早くLocalでローカル環境を立てて、そこで作業することにしました。
設定にこだわりがなければ一瞬で環境構築できるため、説明は割愛します。ローカルサーバーを立ち上げてlocalhost/wp-adminにアクセスすると、5秒でいつものダッシュボードが表示されます。
ちなみに、WordPressのphpファイル等はローカルに保存されており、Localの画面にリンクがあるためわかりやすいです。phpを触るときはここから編集しましょう。テーマファイル（後述）はgitで管理するのもよいでしょう。
設定は初期設定で行いましたが、念のため下記に各種バージョンを記載しておきます。
| 項目名 | バージョン |
|---|---|
| Web Server | nginx |
| PHP Version | 7.3.5 |
| Database | MySQL 8.0.16 |
| WordPress | 5.7.1 |
デフォルトのテーマを剥がす
WordPressには「テーマ」という概念があり、無料、有料で数多く公開されているテーマを選択するだけでコンテンツを管理するための設定の雛形やスタイルを提供してくれます。ところが、「コーポレートサイトを作る」などオリジナルのデザインありきのコーディングを行う際はこれが不要で、むしろ邪魔となります。
そこで今回は「WordPressを動かす上で最小の構成要素しかないテーマ」を新たに作成し、まっさらな状態から開発できるようにします。ここで作成した「無の自作テーマ」に追記していくことで、実装を進めるイメージです。
Localのフォルダからapp/public/wp-content/themes/にアクセスすると、初期のテーマ3種のフォルダが用意されています。
今回はここに追加で「original」というフォルダを作成し、新規のテーマとしました。フォルダ内には
| ファイル名 | 説明 |
|---|---|
| header.php | サイトの共通ヘッダーとして呼び出されるファイル。 |
| footer.php | サイトの共通フッターとして呼び出されるファイル。 |
| index.php | トップページとして呼び出されるファイル。 |
| style.css | 基本のCSSファイル。 |
| functions.php | WordPressの追加設定を記述するファイル。 |
が最低限必要なので作成しましょう。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>架空会社たま</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php wp_head(); ?>
</head>
<body>
<main>footer.php
</main>
<?php wp_footer(); ?>
</body>
</html>index.php
<?php get_header() ?>
<h1>トップページ</h1>
<?php get_footer() ?>上記3つのファイルについて順を追って解説していきます。
まず、index.phpのget_header()とget_footer()は、それぞれheader.phpとfooter.phpの内容を呼び出すWordPressの組み込み関数です。
これらはトップページ以外のページからも同様の方法で呼び出すことが可能なため、単純に<header>タグや<footer>タグを挿入するだけではなく、「サイトの上部と下部に挿入したいサイト共通の記述」を書く目的で使えます。ここでは
- 「DOCTYPE宣言〜
<main>タグの開始」までをheader.php - 「
<main>タグの終了〜<html>タグの終了」までをfooter.php
に記載しています。
また、wp_head()とwp_footer()はWPが自動的に諸々のタグを挿入するための関数で、ないと後々困るらしいので、おまじないとして入れておきましょう。
※devtoolsを見れば、挿入されているタグの詳細が確認できます。かなり容赦なくがっつりと挿入してくるので、不要なものがあればfunctions.phpの設定で調整することもできます。
style.css
/*
Theme Name: 架空会社たま
*/
/* ここにリセットCSSを記述 */
/* 以下、任意の記述 */
h1 {
color: red;
}注意点として、冒頭にコメントでTheme Nameを記載することが必須です。それ以下には、任意の記述を記載してOKです。
とりあえず、今回はベタ打ちでリセットCSS（minireset.css）の記述をコピーし、反映されていることがわかりやすいようにh1を赤字にしてみました。
本格的な開発を行う場合は、SCSSなどをコンパイルする環境を用意してもよいでしょう。
functions.php
本当にただ空のテーマを読み込むだけであればこのファイルはなくてもよいのですが、結局後で必要になる重要なファイルなので今作っておきましょう。
WordPressではCSSやJSを読み込む際に、headタグ内で読み込むのではなくfunctions.phpから組み込み関数を利用して読み込むのが推奨されています。まずはそのための記述を書いていきましょう。
// スタイルシートの読み込み
<?php
function add_files()
{
wp_enqueue_style('default', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'add_files');
怒涛の勢いで出てくる見慣れない文字列は、WordPressの組み込み関数です。WordPressの独自性の高さはちょっと「ウッ」となる部分でもあるのですが、幸いリファレンスは充実しているのでにらめっこしながらがんばって使っていきましょう。wp_enqueue_styleの第一引数は一意な識別名のようなもので、被らなければOKです。
注意点
被らなければOKです。
と書いていますが、私は当初
wp_enqueue_style('common', get_stylesheet_uri());という名前にしていたところなぜかスタイルが読み込まれなくなる不具合に遭遇しました。commonはやめておこう（原因がわからず苦戦した……）。
テーマを設定する
ファイルを作成すると、ダッシュボードの「テーマ」に自作したものが追加されます。
テーマを有効化し、index.phpの内容およびスタイルが反映されていることを確認しましょう。
最低限の機能とその名前を押さえる
WordPressには「WordPress用語」がけっこうあります。慣れればなんてことはないのかもしれないですが、初めは少しとっつきづらいです。
「固定ページ」と「パーマリンク」
まずは、今回実装する要件を振り返ってみましょう。
- HTML/CSSで実装した複数の静的ページ
ひとつめの「複数の静的ページ」は記事の追加や更新を行うというわけでなく、単なる1つの独立したページとして配信するものです。コーポレートサイトでいえば「会社概要」「プライバシーポリシー」などに相当します。
これらをWordPressでは「固定ページ」として扱います。ダッシュボードの左側にも「固定ページ」の項目があります。
Localで立てたばかりのサンプルサイトにもプライバシーポリシーなどのサンプルが「固定ページ」として用意されており、各ページのURLは「パーマリンク」という名前で設定されています。この「パーマリンク」は他のところでも使われる呼び名なので覚えておきましょう。
「投稿」
一方で、WordPressのCMSとしての機能を利用したブログ記事などは「投稿」として管理します。
さて、今回作成するサイトがブログであれば、「なるほど！ここに記事を書いていけばコンテンツが増えていくのか〜」で話は終わりなのですが、今回の要件は
- 記事を投稿して追加が可能な「実績紹介」「ニュース」とその一覧ページ
であり、「実績紹介」と「ニュース」という2種類の投稿画面が必要になります。データの持ち方についても、たとえばコンテンツごとに「サムネイル」「執筆者名」といった追加の項目が必要な場合もあるはずです。
上記のように
- 管理したいコンテンツが2種類以上ある
- コンテンツごとに持ちたい項目が変わる
といった場合には、「カスタム投稿タイプ」や「カスタムフィールド」の作成が必要となります。
カスタム投稿タイプ、カスタムフィールド、カスタムタクソノミー
ここで似たような用語が3つも同時に出てくるためちょっと混乱します。
詳細な解説は他サイトに譲りますが、おおざっぱにいえば
| 名前 | 説明 |
|---|---|
| カスタム投稿タイプ | 「実績紹介」「ニュース」など、ユーザーが独自に追加できるコンテンツのこと |
| カスタムフィールド | 投稿タイプごとに持つデータフィールドを増やしたり削ったりできる機能 |
| カスタムタクソノミー | 「カテゴリ」「タグ」のように、コンテンツをグループ化するための値を増やしたりできる機能 |
という感じです。カスタムフィールドやカスタムタクソノミーは使う必要がないなら無理に使わなくてもよいです。WordPressは原則的に 「タイトル」と「本文」 の形でコンテンツを管理するので、それだと過不足があるときに利用しましょう。
ちなみに厳密に言うと、WordPressではこれまで紹介した
- 「固定ページ」
- 「（デフォルトで用意されている投稿タイプとしての、狭義の）投稿」
- 「ユーザーが追加したカスタム投稿タイプ」
を全部ひっくるめて「（広義の）投稿」機能として扱います。このそれぞれに対して固有のパーマリンクや、Webページの動的生成に使うためのphpファイル（後ほど解説するarchive-*.phpやsingle-*.php）が割り当てられていくというイメージです。
カスタム投稿タイプを作る
これはあくまで現時点での個人的な見解ですが、
- デフォルトの「投稿」はサイトの構成上、そのサイトの中核となるような記事コンテンツがあるのであればそれ用に使う。ないのであれば、すべて『カスタム投稿タイプ』として管理してしまう
のがよいのではないかと考えています。
今回はブログのように「投稿型コンテンツがサイトの中核となる」わけではなく、「通常のWebサイトにいくつか投稿型のコンテンツがくっついている」ようなページを作成します。そのためデフォルトの「投稿」はいったん利用せずに、「実績紹介」と「ニュース」をカスタム投稿タイプで管理していくことにしました。
詳細な解説はあと（第3回）に回しますが、そのほうがパーマリンクの挙動や作成するファイルの命名が直感的となるためです。
それでは、さっそくカスタム投稿タイプの追加を行いたいのですが、ここで
- WordPressの設定ファイル
functions.phpを編集する - もしくは、外部プラグインを導入して管理画面から追加する
ことが必要となります。標準でポチッと管理画面から「追加」できるとよいのですが……とにかく、今回はfunctions.phpに追記します。
// カスタム投稿タイプの作成
function add_post_type()
{
register_post_type('works', [
'labels' => [
'name' => '実績紹介',
],
'public' => true,
'has_archive' => true,
]);
register_post_type('news', [
'labels' => [
'name' => 'ニュース',
],
'public' => true,
'has_archive' => true,
]);
}
add_action('init', 'add_post_type');例によってリファレンスを参考に、「実績紹介」「ニュース」のカスタム投稿タイプを設定しました。
用意した関数は、add_actionという関数で実際に実行してあげる必要があります。このadd_actionは今後も何度か登場します。第1引数は「アクションが実行されるタイミングの指定」であることを覚えておきましょう。
上記の設定値はできるだけ最小限の設定にしていますが、どれもけっこう重要なので表にまとめておきます。
| 設定値 | 説明 |
|---|---|
| register_post_typeの第1引数 | カスタム投稿タイプのslug。複数形にするとよい。実際に処理で使われるため重要。 |
| name | 管理画面上で表示されるカスタム投稿タイプの名前。 |
| public | 管理画面やフロントエンドから投稿を参照できるようにする。デフォルトはfalse。 |
| has_archive | アーカイブ（記事の一覧ページ）を有効にする。デフォルトはfalse。 |
ダッシュボードを見ると、「実績紹介」「ニュース」の投稿項目が追加されているのがわかります。カスタムフィールドの設定はとくに行っていないため、どちらも「タイトル」と「本文」というもっとも基本的な構成になっています。
おわりに & 次回記事の紹介
続きはこちらに掲載しています。
次回は作成したカスタム投稿を使って、実際のページを生成する作業などを行っていきます！