(cache)1.WordPressテーマの初期設定＋テンプレートファイルを作成する【30DAYSトライアル】

こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

自作テーマの作り方やプラグインの解説などをピンポイントで解説した記事は多いですが、WordPressでサイト制作するための全体の流れを解説した記事はなかったので、Web制作歴4年の僕のやり方をイチから説明していきます。

1stステップであるこの記事では、WordPressテーマの初期設定とテーマに必要なテンプレートファイルの作成まで進めていきます。

1. 前提：WordPressを使ったサイト制作に必要な知識
2. １. 自作テーマ制作の流れ
3. 2. index.phpなどの必須テンプレートファイルを作成する
4. 3. style.cssとfunctions.phpを設定してテーマとして認識させる
5. 4. index.php / header.php / footer.php を作る
6. 5. functions.phpからスタイルシートやjsを読み込む
7. 6. header.phpとfooter.phpに、wp_headとwp_footerを入れる
8. 7. 画像のパスを書き換える
9. 演習課題：サイドバーのファイル分割

前提：WordPressを使ったサイト制作に必要な知識

WPを使ったサイト制作に必要な知識

ローカル開発環境を整える
WordPressの基本的な使い方を知る
WordPressの構造を知る
WordPressテーマ（オリジナルサイト）の作り方を知る
実用的なプラグインやショートコードの使い方を知る

この連載で扱うのは『４. WordPressテーマ（オリジナルサイト）の作り方を知る』以降です。

４〜５は詳しく説明していくので、扱わない１〜３についてサクッと解説します。

ローカル開発環境を整える

まずゼロからサイト制作を学ぶにあたって、開発を進めるための環境が必要です。

ローカル開発環境がまだ整っていない方は、こちらの記事の『ローカル開発環境を作ろう』からどうぞ。

WordPressの基本的な使い方を知る

WordPressをカスタマイズして仕事をしていく訳なので、Web制作者は当然『WPの普通の使い方』も知っておく必要があります。

まだWordPressを使ったことがない方は、こちらの記事を参考に一通りの機能を試してみてください。

WordPressの構造を知る

WordPressのzipファイルを解凍するとわかりますが、フォルダ内にはたくさんのファイルがあります。

この中で僕たちが主にさわるのは『wp-content』フォルダ内と『wp-config.php』です。

特に大事なフォルダ・ファイル

wp-config.php：データベースとの接続情報などが書かれた大元の設定ファイル
wp-content > plugins：インストールしたプラグインのソースコード達がここに入る
wp-content > themes：テーマフォルダ
wp-content > uploads：管理画面からアップロードしたメディアがここに入る

まずはこれだけ知ってればOK。あとは必要に迫られた時に、個別に調べながら覚えればいいです。

この連載はサイト制作のための具体的な手順解説がメインなので、そうした体系的な理解のために1冊は技術書を持っておくべきです。

オススメは本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版。

調べものの際には逆引き的にも使えるので、技術理解が足りない部分はこちらで補完してください👍

１. 自作テーマ制作の流れ

テーマ作成に入る前に、WordPressを使ったサイト制作の流れを紹介しておきます。

サイト制作の流れ

デザイン
コーディング
WordPressテーマ化

デザインをベースに、静的にコーディングし、最後にWordPressテーマ化という順です。

技術選定の結果、既存テーマを使う案件もありますが、コーポレートサイト制作などは基本的に独自テーマで作成します。

既存テーマだと細かい要望が出たときにカスタマイズしにくいんですよね。

結局、使いまわせる汎用デザインの独自テーマを作って、それを案件ごとにカスタマイズするのが最も生産性が高いです。

今回は2番の『コーディング』まで終わってる設定で、スターターテーマを用意しています。

静的ファイルを独自テーマ化していく工程を経験してみましょう！

まだダウンロードしてない方は、以下のボタンからダウンロードしてください。

2. index.phpなどの必須テンプレートファイルを作成する

WordPressのは、テンプレートのファイル名により「どのシーンで」「どのテンプレートを表示させるか」が決まっています。さらに、共通のシーンで表示させるテンプレートにも「基本は◯◯.phpを表示するけど、もし△△.phpがあればそっちを表示する」といった優先順位のルールがあります。

このテンプレート階層の理解はとても重要❗️

ルール自体はいたってシンプルなので、WordPressの公式リファレンスサイト『codex』を熟読してください。

上記画像でいうと、右側の青いテンプレートほどテーマの骨格となるベーステンプレートです。

この演習では、ベーステンプレートを中心に以下のファイルを作ります。

ファイル一覧

【必須ファイル】

index.php
page.php
single.php
archive.php
header.php
footer.php
search.php
404.php
functions.php
style.css

【準必須ファイル】

sidebar.php
category.php
tag.php

※今回は使いませんが、home.phpやfront-page.phpもよく使います。index.phpも加えて、3つそれぞれの優先度と役割の違いは覚えておきましょう。

ローカル環境にセットアップしたWordPressの『themes』フォルダの中に、『tf30』というフォルダを作り、そこに上記のファイルを全て新規作成してください（まだ中身は空でOKです）。

VScodeでtf30フォルダを開いてからやるとラクですよ。

PHPファイルを作り終わったら、コピペをラクにするために、ダウンロードしたhtml / css / js ファイル一式も『tf30』に入れてください。

3. style.cssとfunctions.phpを設定してテーマとして認識させる

それではさっそく独自テーマの作成に入りましょう！

まずは独自テーマをテーマとして認識させるために必要なstyle.cssとfunctions.phpを作っていきます。

『tf30』フォルダ直下に作ったstyle.cssに、以下のように記述します。

コピー
@charset "utf-8";
/---------------------------------
テーマとしてWPに認識させるための記述↓
---------------------------------/
/*
theme Name: TF-30
Author: Shohei Ohtaki
Description: 自作テーマ
version： 1.0.0
*/

この『/～/』で囲まれた部分がテーマの概要です。

次に、functions.phpにもセットアップのための記述をしましょう。

コピー
<?php
/**
* テーマのセットアップ
* 参考：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#HTML5
**/
function my_setup()
{
add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化
add_theme_support('automatic-feed-links'); // 投稿とコメントのRSSフィードのリンクを有効化
add_theme_support('title-tag'); // タイトルタグ自動生成
add_theme_support(
'html5',
array( //HTML5でマークアップ
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
)
);
}

add_action('after_setup_theme', 'my_setup');
// セットアップの書き方の型
// function custom_theme_setup() {
// add_theme_support( $feature, $arguments );
// }
// add_action( 'after_setup_theme', 'custom_theme_setup' );

add_theme_support( )など、いきなり見覚えのない関数が出てきましたが、これがWordPressの独自関数です。

こうした関数の使い方は、コメントに『参考』で記述したcodex を見たり、『WordPressの教科書』を見ながら覚えていきましょう❗️

とはいえ僕もしょっちゅう忘れてググりますし、型ができたらコピペで済む部分も多いので、丸暗記する必要はありません（テーマのセットアップも次回以降はコピペでOK）。

ここまで完了した状態で『管理画面 > 外観 > テーマ』を見ると、『TF-30』というテーマが認識されて表示されているはずです。これを有効化してみましょう。

真っ白なサイトが表示されましたか？

設定ファイルを作っただけで、表示しているテンプレートファイルの中身は空だからです。

次は、index.phpを始めとした基本のテンプレートファイルを作りましょう！

4. index.php / header.php / footer.php を作る

index.htmlをindex.phpにコピペし、index.phpを作ります。

次に下層ページでも共通で使うヘッダー・フッターは、それぞれ header.php / footer.php に写して、ファイル分割で管理します。

WordPressに限らずですが、このファイルの分割管理もめちゃくちゃ大事！

ファイルを分割して管理することで、ヘッダー内に何か変更が出たときはheader.phpのみ修正すれば済みますが、もしファイル分割をせず全テンプレートにベタ書きしてると、変更箇所を全ファイルで修正することになります。

そんな非効率な作業イヤですよね。なので複数ページで共通で使うパーツは、抜き出してテンプレートにしていきましょう。

header.phpには<!DOCTYPE html>〜</nav><!– header-nav –> まで、footer.phpには<!– footer-menu –>〜</html>までを記述してください。

index.phpでは、共通化したheader.php・footer.phpを読み込む記述に置き換えます。

コピー
<!-- header-navまでをget_header()に置き換える -->
<?php get_header(); ?>

<!-- pickup -->
<div id="pickup">

<!-- inner -->
<div class="inner">
・・・略
</div><!-- /inner -->

</div><!-- /content -->

<!-- footer-menuから下をget_footer()に置き換える -->
<?php get_footer(); ?>

これがファイル分割の基本です。

header.phpとfooter.phpに分割・読み込みはできたので、次は現状エラー表示になっているcssやimgを読み込み、index.htmlの状態を再現しましょう。

5. functions.phpからスタイルシートやjsを読み込む

WordPressにはwp_head( )とwp_footer( )という関数があり、WordPressでデフォルトで使われているcssやjs、またプラグインのcssやjsを読み込むために使います。

wp_head( )は<head>タグ内、wp_footer( )は</body>タグの前に書きます。

ここの関数で読み込むファイルに、TF-30のスタイルシートとjsも追加しましょう。functions.phpでそのための記述を追加します。

コピー
/**
* CSSとJavaScriptの読み込み
*
* @codex https://wpdocs.osdn.jp/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC
*/
function my_script_init()
{
wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.8.2/css/all.css', array(), '5.8.2', 'all');
wp_enqueue_style('my', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all');
wp_enqueue_script('my', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_script_init');

それぞれの関数の説明は省きますので、codexを見てくださいね！

6. header.phpとfooter.phpに、wp_headとwp_footerを入れる

header.phpとfooter.phpの該当部分をそれぞれ置き換えます。

header.php

コピー
<meta property="og:description" content="">
<meta name="twitter:card" content="summary_large_image">

<!--
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css?ver=5.8.2">
<link rel="stylesheet" href="./css/style.css">
ここを置き換える
-->

<?php wp_head(); ?>
<link rel="icon" href="./img/icon-home.png">

footer.php

コピー
<div class="floating">
<a href="#"><i class="fas fa-chevron-up"></i></a>
</div>

<!--
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
ここを置き換える。jqueryはWPデフォで読み込まれるので消してOK。
-->

<?php wp_footer(); ?>
</body>
</html>

これでスタイルシートとjsの読み込みができました😀

今の状態でURLを開くとこんな状態になってるはず。

スタイルは適用されてますが、まだ画像が全てエラーになっています。

次はこれを解消しましょう！

7. 画像のパスを書き換える

現在の画像のパスを、WordPressの書き方に変えていきます。

コピー
<!-- 元のパス -->
<img src="img/pickup1.png" alt="">
<!-- これを以下のように書き換える -->
<img src="<?php echo get_template_directory_uri() ?>/img/pickup1.png" alt="">

echo get_template_directory_uri( )で、現在使っているテーマフォルダまでのパスを自動出力します。

パスを動的に書いておくことで、テスト環境と本番環境でURLが変わっても修正の必要がなくなります。

とても重要な関数なので、『パスを出力 = get_temp』くらいまで覚えときましょう！ここまで覚えてれば、あとはエディタの補完機能がサジェストしてくれます。