PHP初心者がWordPressテーマカスタマイズする方法【WordPress歴4年が解説】

2019年4月4日2019年6月22日

サイト制作を勉強していると、自然とWordPressに興味が出てくるかなと思います。

html/cssだけでも仕事はありますが、WordPressまでできると仕事の数も増え大きい単価のお仕事も取れやすくなります。

当方は、4年Web制作で食べているフリーランスエンジニアです。

私も独学でWordPressやPHPを学びました。

WordPressは覚えることが多いように見えて、とりあえずテーマをカスタムするぐらいなら、実はそこまで多くのことを覚える必要がありません。

この記事では、PHP初心者がWordPressテーマ編集のために必要なことを解説します。

WordPressはPHPだけど、PHPそのものは覚えなくてOK

WordPressだから、PHPだから、と身構える必要はありません。htmlの知識あればOK。

厳密には、普通にPHPの知識が必要なのですが、とりあえずテーマをカスタムするぐらいならPHPは知らなくてもなんとかなります。

PHPよりWordPress独特のコードを覚えてばOK

WordPressには、WordPress専用のコードがあります。それを覚えればテーマ編集をするぐらいはできるため、まずはそれを覚えましょう。

WordPressで覚えておくべき4つのポイント！

実はWordPressのPHP、基本はシンプルです。

1. ページによって読み込まれるファイルが違う
2. ヘッダーやフッターなどのテンプレートを呼び出している
3. 記事の情報を取得するためのコード
4. 記事一覧を取得するためのモジュール

実は基本はこの4つです。

細かいことをしようと思うと、これ以上のことをしなければいけませんが、実はこの4つがわかればテーマが作れちゃいます。

それぞれ細かく解説します。

1. ページによって読み込まれるファイルが違う

WordPressのテーマファイルは、

• home.php
• single.php
• page.php
• archive.php
• search.php
• 404.php
• index.php

簡単に言うとこれらのphpが呼び出されて表示されています。

読み込むページによって表示されるphpが違いまして、以下になっています。

• home.php：トップページ
• single.php：投稿記事ページ
• page.php：固定ページ
• archive.php：カテゴリー一覧やタグ一覧などなどの一覧系ページ
• search.php：WordPress内の検索結果ページ：
• 404.php：404ページ
• index.php：上のそれぞれのファイルがないときに、表示されるphp。（例：トップだけど、home.phpがなかったらindex.phpが。404ページなのに、404.phpがなければindex.phpが表示される。）

TOPを変更したかったら、home.phpを。投稿記事ページを変更するのなら、single.phpを更新すればOKです。勘のいい人これだけでテーマの編集ができるかも。

2. WordPressはヘッダーやフッターなどのテンプレートを呼び出すコードがある

WordPressはテンプレートになっています。

ヘッダーやフッターはもちろんとして、細かに細分化することで効率よくソースを作っています。

以下が、テンプレート呼び出しのファイルです。

• <?php get_header(); ?>
• <?php get_sidebar(); ?>
• <?php get_footer(); ?>
• <?php get_template_part('〇〇’) ?>（〇〇は、任意のファイル名）

基本はこれを抑えておけば大丈夫。

それぞれは、

• <?php get_header(); ?>：header.phpを呼び出す
• <?php get_sidebar(); ?>：sidebar.phpを呼び出す
• <?php get_footer(); ?>：footer.phpを呼び出す
• <?php get_template_part('〇〇’) ?>：〇〇.phpを呼び出す

こうなっています。

なので、ヘッダーを変更したいのなら、header.php。フッターを変更したいならfotter.phpを。

もし、サイドバーを読み込みたくないのなら、<?php get_sidebar(); ?>を消せばOK。

3. 投稿記事・固定ページの情報を取得するためのコード

記事ページを編集するなら、single.phpなのですが、WordPressで入力したタイトルやカテゴリー、タグ情報などを出力する必要があります。

これらは全部WordPress側でコードを用意しているので、それを使えばOKです。

以下のような感じです。

• タイトル：<?php the_title(); ?>
• サムネイル：<?php the_post_thumbnail(); ?>
• 本文：<?php the_content(); ?>
• カテゴリー：<?php the_category(); ?>
• タグ：<?php the_tags(); ?>

基本はたったこれだけ。これを知っているだけで、最低限はOKです。

が、1つ注意点があり、これらのタグを使うにはWordPressのループで使わなければなりません。

どういうことは、次のセクションにて。

4. 記事一覧を取得するためのモジュール

理解は一旦置いといて、まず下まで読み進めてください。

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    // 各々の記事に関する処理
    // この部分にしか、<?php the_title(); ?>など、上の③で紹介したコードは使えない
    <?php endwhile;?>

<?php else : ?>
// 記事が1件も見つからなかったときの処理
<?php endif; ?>

何をしているかと言うと、WordPressの記事情報をこのphpで回しています。

具体的な例で見てみましょう。

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
  <div class="content-box">
    <h1><?php the_title(); ?></h1>
    <?php the_post_thumbnail(); ?>
    <div class="content"><?php the_content(); ?></div>
  </div>
  <?php endwhile;?>
  <?php else : ?>
<?php endif; ?>

これをsingle.phpに書いて、ページを開くと

<div class="content-box">
  <h1>投稿記事のタイトル</h1>
  <img src="thumbnail.jpg"> <!-- 投稿記事のサムネイルのURLが書かかれる。 -->
  <div class="content">投稿記事の本文が書かれている</div>
</div>

こんな形で、投稿記事で書いた内容が表示されます。

今後は、これをhome.phpでみてみましょう。

<div class="content-box">
  <h1>投稿記事1のタイトル</h1>
  <img src="thumbnail.jpg"> <!-- 投稿記事1のサムネイルのURLが書かれが画像URL -->
  <div class="content">投稿記事1の本文が書かれている</div>
</div>

<div class="content-box">
  <h1>投稿記事2のタイトル</h1>
  <img src="thumbnail.jpg"> <!-- 投稿記事2のサムネイルのURLが書かれが画像URL -->
  <div class="content">投稿記事2の本文が書かれている</div>
</div>

<div class="content-box">
  <h1>投稿記事3のタイトル</h1>
  <img src="thumbnail.jpg"> <!-- 投稿記事3のサムネイルのURLが書かれが画像URL -->
  <div class="content">投稿記事3の本文が書かれている</div>
</div>

<div class="content-box">
  <h1>投稿記事4のタイトル</h1>
  <img src="thumbnail.jpg"> <!-- 投稿記事4のサムネイルのURLが書かれが画像URL -->
  <div class="content">投稿記事4の本文が書かれている</div>
</div>

<!-- 管理画面の表示設定で、1ページに表示する最大投稿数だけ、表示するまで続く・・・。 -->

と言う風に、記事の情報がなくなるまで表示されていくのです。

single.phpでは記事の情報がそのページの記事1つしかないので1つだけで終わり。

home.phpは、新着記事一覧が表示されるので、新着記事が表示されます。

カテゴリページなら、そのカテゴリの記事が。タグページなら、そのタグの記事が。固定ページなら、その固定ページの記事だけが表示される感じ。

でここが大事でして、③で紹介したコードを使うには、このループの中に記述しなければなりません。

なので、③のコードは④のループと合わせて使いましょう。（ループに入れないとコード入れても何も表示されません）

最後はちょっと重めですが、これを理解できればWordPressは半分ぐらい攻略しています。

WordPressはこの4つを組み合わせてテーマを作っている

ちょっと重かったかもしれませんが、この記事で紹介した、

1. ページによって読み込まれるファイルが違う
2. ヘッダーやフッターなどのテンプレートを呼び出している
3. 記事の情報を取得するためのコード
4. 記事一覧を取得するためのモジュール

この4つを理解すればWordPressのテーマをカスタマイズは可能です。

もちろん、この4つは、それぞれオプションがあったりして、細かい使い方をすることが多いのですが、それは全部WordPress Codexと言うサイトに書いています。

WordPress Codex 日本語版

このサイトは、日本語版のWordPressのWiki的な立ち位置ですが、わからないことあればここでググれば答えが使い方が書いています。

この記事をみつつ、わからないことはWordPress Codexで調べればテーマのカスタマイズはなんとかなるでしょう。

と言っても、楽勝ではありません。

勉強しつつ進めていけばなんとかなる、と言う感じなので、わからないことは1つ1つ確認するように。

なお、お金を稼ぐにフォーカスして実践的な内容は外部サイトですが以下記事がおすすめです。