リョータ

2019-06-22に更新

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

WordPress PHP

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

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

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

こんにちはこの記事の作者です。
この記事は、僕のブログからCrieitへの転載です。こういう使い方をしても大丈夫なサイトなようなので、試しに転載してみました

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

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

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

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

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

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

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

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

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

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

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

実は基本はこの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を。

もし、サイドバーを読み込みたくないのなら、を消せば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でみてみましょう。同じ記述をhome.phpに書いて、WordPressのTOPページを表示させると、

<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は半分ぐらい攻略しています。