30DAYSトライアルがWebアプリになりました！1日1題30日でプロのWebエンジニアを目指そう！

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

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

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

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

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

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

 

目次

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

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

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

この連載で扱うのは『４. 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を使ったサイト制作の流れを紹介しておきます。

サイト制作の流れ

  1. デザイン
  2. コーディング
  3. WordPressテーマ化

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

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

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

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

 

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

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

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

 

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

画像参照：https://wpdocs.osdn.jp/ より

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』くらいまで覚えときましょう！ここまで覚えてれば、あとはエディタの補完機能がサジェストしてくれます。

また、画像のパスを書き換えるときも、エディタの一括置換を使って『src=”img/”』を『src=”<?php echo get_template_directory_uri() ?>/img“』に書き換えればOKです。

全置換できたら、サイトの見た目はこのようになっているはず。

綺麗に画像が表示されましたね！

念のため、読み込めていないスタイルシート・js・画像がないか、デベロッパーツールを開いて確認してください。

エラーの×マークも出てないので、これでOK。

無事、htmlファイルをWordPressテーマのテンプレートファイルindex.phpに変換できました❗️

 

演習課題：サイドバーのファイル分割

最後に、ヘッダーフッターと同じ要領で、index.phpのサイドバーをテンプレート化して共通化してください。

サイドバーは<!– secondary –>というタグで囲まれた部分です。

共通化したらindex.phpで表示させてくださいね。

これができた方は、内容を理解できているはず👍

テンプレート作成方法は基本中の基本なので、しっかり覚えておいてくださいね。

お疲れ様でした。

LINE@にて限定情報公開中！

CTA-IMAGE 『転職したい！』 『理想的なライフスタイルを実現したい！』 『フリーランスになりたい！』 そういう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。 登録すれば、LINE＠限定「最短でプログラマーになるための転職ロードマップ」も確認できます！
登録する

WordPressカテゴリの最新記事

:)