おそらく最もわかりやすいWordPressテーマ制作チュートリアル

この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。

なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。

おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。

このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。
実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。

テーマのサンプルファイルのダウンロードはこちら
※スタイルは必要最低限しか指定していないシンプルなテーマです。

わぷー

WordPressのインストール

まだレンタルサーバを借りていない方は、ご自分の PC に WordPress をインストールしてください。

既にレンタルサーバを借りている方は、レンタルサーバに WordPress をインストールして作業されても構いませんが、後々テーマを修正する時のことを考えると、ご自分のPCにも WordPress をインストールしておいたほうが良いかもしれません。

ご自分の PC に WordPress をインストールする場合の作業方法は以下の記事に書いています。

[連載]WordPressでWebサービスを作る方法（2:開発環境の構築）

WordPressが動くレンタルサーバを借りる場合は、ロリポップ のスタンダードプラン、または さくらのレンタルサーバー あたりを借りている方が多いようです。
これらのレンタルサーバーには「WordPressの簡単インストール機能」もついています。

テーマをデザインする

ブログのデザインをされる方は、ここでブログ全体のイメージを制作しておきます。
以下の2ページをデザインしておくと良いと思います。

トップページ

トップページの例

ヘッダーにブログ名やロゴを入れ、その下は記事一覧とサイドバーの2カラムとしておきます。
サイドバーには記事のカテゴリーや検索フォームなどを入れる予定です。
フッターにはコピーライト等を入れておきます。

記事ページ

記事ページの例

ヘッダーの下に記事本文とサイドバーの2カラム構成で、ヘッダー、サイドバー、フッターはトップページと共通で良いでしょう。

テーマをコーディングする

テーマを HTML と CSS でコーディングします。
ここでは、テーマ名（半角英数字）でフォルダを作り、トップページを index.html で、スタイルシートは style.css というファイル名にしておきます。スタイルシートは1ファイルにまとめておいて下さい。

index.html のサンプル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ブログタイトル</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 
    <header class="page-header">
        <h1><a href=""><img src="images/logo.svg" alt="Sunshine Blog" width="227" height="33"></a></h1>
    </header>
 
    <main>
        <section class="post">
            <h2><a href="">記事タイトル</a></h2>
            記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋
        </section>
        <section class="post">
            <h2><a href="">記事タイトル</a></h2>
            記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋
        </section>
        <section class="post">
            <h2><a href="">記事タイトル</a></h2>
            記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋
        </section>
    </main>
 
    <section class="sidebar">
        <h2>カテゴリ</h2>
        <ul>
            <li><a href="">カテゴリ1</a></li>
            <li><a href="">カテゴリ2</a></li>
            <li><a href="">カテゴリ3</a></li>
        </ul>
    </section>
 
    <footer class="page-footer">
        <p class="copyright"><small>©2018 Yourname</small></p>
    </footer>
 
</body>
</html>

画像は images というフォルダを作り、その中に保存しておいて下さい。

例えば、テーマ名を「sunshine」という名前にする場合、以下のような構成になります。
（sunshine フォルダの中に index.html と style.css ファイル、images フォルダがあり、 images フォルダの中に logo.svg 画像がある）

テーマファイルのフォルダ構成

index.html + style.css + ロゴ画像 のサンプルファイルは ここをクリックするとダウンロードできます。
※このファイルは完成したテーマではなく、制作途中のデータですのでご注意ください。完成したテーマはこの記事の最初のリンクからダウンロードできます。

WordPressテーマの形式に作り変える

ここでようやく、コーディングしたページを WordPress テーマ形式に作り変えます。
WordPress テーマは PHP を使用しますが、ぶっちゃけて言うと PHP を全く理解していなくても一般的なブログ用のテーマ制作は可能です。

WordPressテーマは、やろうと思えば index.php と style.css という2つのファイルだけでも動作しますが、ここでは一般的なテーマ同様に

  • ヘッダー（header.php）
  • サイドバー（sidebar.php）
  • フッター（footer.php）
  • トップページ等（index.php）
  • 記事ページ（single.php）
  • テーマのための関数（functions.php）
  • スタイルシート（style.css）

の7つのファイルに分けます。
ファイル数がちょっと多いですが、ようするに「ヘッダー部分は header.php」、「サイドバー部分は sidebar.php」などパーツ別に切り分け、一部のタグを決められた PHP 関数に置換するだけですので超簡単です。

先ほどの index.html を例に切り分けていきます。

テーマファイルのサンプルファイルはここをクリックするとダウンロードできます。
（記事の冒頭でダウンロードできるサンプルテーマと同じものです。）

ヘッダー（header.php）

テーマフォルダ（サンプルでは sunshine というフォルダ）内に header.php というファイルを作成します。

header.phpを追加

header.php は、index.html の最初の行（doctype 宣言のある行）からヘッダー部分の最後（</head> ではなく</header>）までを選択して Ctrl + X（Macでは command + X）キーを押してカットし、貼り付けます。

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ブログタイトル</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 
    <header class="page-header">
        <h1><a href=""><img src="images/logo.svg" alt="Sunshine Blog" width="227" height="33"></a></h1>
    </header>

次に、<title> 要素やスタイルシート、<img> 要素の src 内のパスを WordPress 用に書き換えます。
といっても、決まり通りに書き換えるだけなので全く難しくありません。

まず、<title> 部分を以下のように書き換えます。

5

<title><?php wp_title(' | ', true, 'right'); ?></title>

この記述の場合、トップページの title は「ブログ名」、記事ページは「記事タイトル | ブログ名」のようになります。
wp_title(‘ | ‘, の ‘ | ‘ の部分を ‘ : ‘ にすると「記事タイトル : ブログ名」にしたりといったカスタマイズもできます。

次に、head要素内のスタイルシートへのリンク部分を以下のように書き換えます。

6

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

</head>部分の直前の行に以下のタグを入れます。

7

<?php wp_head(); ?>

body要素はそのままでも動きますが、以下のようにしておくと便利です。

9

<body <?php body_class(); ?>>

このようにしておくと、トップページ、記事ページなどのbody要素に個別のclassが付くため、ページごとにスタイルを当てたい場合などに便利です。

ブログのロゴ部分は、おそらくテキストではなく画像になっているだろうという想定で解説します。
ロゴに限らず、画像のsrc内のパスの前には

1

<?php echo get_template_directory_uri(); ?>/

を付ける必要があります。
get_template_directory_uri(); の部分は、実際にWordPressテーマとして表示した際には「テーマファイルのURL」に置き換えられます。

例えば、ブログのURLが
https://example.com/
で、テーマフォルダ名が sunshine だった場合、
https://example.com/wp-content/themes/sunshine
に置き換えられます。

これを入れておかないと、テーマフォルダの images フォルダに入れた画像がリンク切れとなってしまい、表示されません。

よって、ロゴ画像（images/logo.png）の箇所は以下のようになります。
images の前に / をつけるのを忘れないで下さい。

15

<img src="<?php echo get_template_directory_uri(); ?>/images/logo.svg" alt="Sunshine Blog" width="227" height="33">

あと、一般的にブログのロゴ画像はトップページヘのリンクになっていると思います。
なので、画像の周りは <a> 要素でトップページヘのリンクにします。

href=”” の “” 内に

1

<?php echo esc_url( home_url( '/' ) ); ?>

と書けばトップページヘのリンクになります。

従って、header.php のサンプルは以下のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title><?php wp_title( ' | ', true, 'right' ); ?></title>
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
 
        <header class="page-header">
            <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.svg" alt="Sunshine Blog" width="227" height="33"></a></h1>
        </header>

フッター（footer.php）

テーマフォルダ内に footer.php というファイルを新規作成します。
footer.phpには、index.html のフッターの開始部分からHTMLの最後の行（一般的には </html>）までをコピペします。

1
2
3
4
5
6

<footer class="page-footer">
    <p class="copyright"><small>©2018 Yourname</small></p>
</footer>
 
</body>
</html>

そして、</body> 要素の前の行に

1

<?php wp_footer(); ?>

を入れます。

従って、footer.php のサンプルは以下のようになります。

1
2
3
4
5
6

<footer class="page-footer">
    <p class="copyright"><small>©2018 Yourname</small></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

サイドバー（sidebar.php）と テーマのための関数（functions.php）

サイドバーは、カテゴリの一覧、リンク、検索フォームなどを表示するという前提ですすめさせて頂きます。

実はサイドバーにそういった要素を表示する場合、いちいち手動でソースを書かなくても、管理画面から簡単に「ウィジェット」とよばれるものを追加することでサイドバーにそのような要素を表示することができます。

ウィジェットを追加するには、まず、WordPress の管理画面にログインしてください。

管理画面のアドレスは
http://ブログをインストールした場所/wp-admin/
です。

PCでXAMPPやMAMPのhtdocsフォルダ内のwordpressフォルダにインストールした場合、
http://localhost/wordpress/wp-admin/
になるはずです。
（WordPressインストール時に送られてきたメールを見れば、インストール場所がわかります。）

管理画面にログインしたら、左サイドバー内の［外観］をクリックして下さい。

利用可能なテーマの中のTwentySeventeenなど最初から入っているテーマの上にマウスカーソルを乗せ、［有効化］をクリックして下さい。

同じくサイドバーの中で［ウィジェット］をクリックし、左側の［利用できるウィジェット］の中から［アーカイブ］や［カテゴリー］など適当なものを右側の［メインサイドバー］または［サイドバー1］の中にドラッグします。

WordPressのウイジェット

ブログを表示すると、サイドバーに先ほどドラッグしたものが入っているはずです。

このようにウィジェットを利用できるようにするには、テーマフォルダ内に functions.php というファイルを作成し、以下のコードを書きます。

1
2
3
4
5
6
7
8
9

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'id' => 'sidebar-1',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2 class="widget_title">',
        'after_title' => '</h2>',
    ));

これを入れておかないと、管理画面の「ウィジェット」の部分で「このテーマではウィジェットは使用できません」と表示されてしまいます。

次に、sidebar.php は以下のようにします。

1
2
3
4
5
6

<section class="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    <h2 class="widget_title">About</h2>
    ウィジェットが設定されていない場合、ここが表示されます。
<?php endif; ?>
</section>

もしウィジェットが1つも指定されていない場合は、3〜4行目が表示され、ウィジェットが1つ以上設定されていればウィジェットが表示されます。

トップページ等（index.php）

では、今までに制作したファイルを1つにまとめるためのファイルを制作します。
それが index.php です。

まずは、header.php や footer.php などを読み込むためのPHPを書きます。。

1
2
3
4
5

<?php get_header(); ?>
 
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

get_header() などのPHP関数は「ここに header.php を読み込む」という意味です。

ブログのトップページ、カテゴリ別記事一覧ページなどの記事一覧系ページでは、この index.php が読み込まれます。

記事一覧のループ（繰り返し）

一般的なブログであれば、トップページはこんな感じになっていると思います。

WordPressブログのトップページの例

これをよく見ると、タイトル・日付・本文（概要）・リンクなどが同じレイアウトで繰り返しになっている（ループしている）ことが分かると思います。
（記事は新しい順に並んでいます）

WordPressブログのトップページの例

この繰り返しの部分のことを「ループ」と呼びます。
ループ部分のサンプルは以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
 
<section class="post">
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>
</section>
 
<?php
endwhile;
endif;
?>

一見ややこしく見えるかもしれませんが、これがどういう動作をするかというと、「表示できる記事があるかぎり、4行目から9行目までを繰り返して表示する」という意味になります。

実際に WordPress ブログとして表示された場合、ループ部分は以下のようなHTMLになります。

1
2
3
4
5
6
7
8
9

<section class="post">
    <h2><a href="記事のURL">記事タイトル</a></h2>
    本文の一部
</section>
 
<section class="post">
    <h2><a href="記事のURL">記事タイトル</a></h2>
    本文の一部
</section>

class 名などは変更しても構いません。

そして、ループ全体を <main> 要素でマークアップします。
index.php のソースコード全体は、以下のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php get_header(); ?>
 
    <main>
        <?php
        if ( have_posts() ) : while ( have_posts() ) : the_post();
        ?>
 
        <section class="post">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php the_excerpt(); ?>
        </section>
 
        <?php
        endwhile;
        endif;
        ?>
    </main>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

記事ページ（single.php）

トップページ等で記事タイトルをクリックし、記事ページを表示したときはこの single.php が表示されます。
single.php のサンプルは以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php get_header(); ?>
 
<main>
   <?php
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    ?>
 
        <article class="content">
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
        </article>
 
    <?php
    endwhile;
    endif;
    ?>
</main>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

8行目の the_title() 関数は「ここに記事タイトルを表示する」という意味で、9行目の the_content() は「ここに記事本文を表示する」という意味です。

スタイルシート（style.css）

WordPressにおけるstyle.cssは、テーマのスタイルを指定するだけでなく「テーマの概要（テーマ名、作者名など）」を指定するという役割もあります。

具体的には、style.css の先頭に以下のようなコメントを加えます。

1
2
3
4
5
6
7
8

/*
Theme Name: Sunshine
Theme URI: http://example.com/
Description: サンプルテーマ
Version: 2.0
Author: Yourname
Author URI: http://example.com/
*/

Theme Name: の後にはテーマ名を書きます。
Theme URI: の後にはテーマの配布場所のURLを書きます。配布する予定がなければ、とりあえずブログのURLでも入れておきましょう。
Description: にはテーマの解説を書きます。
Version: はテーマのバージョンです。
Author: はテーマの制作者名です。
Author URI: はテーマの作者のサイトのURLです。もし無ければブログのURLを書いておきましょう。

コメントの下は、通常通りのスタイルシートの書き方で構いません。
background: url()等で画像を指定するときも、
background: url(“images/bg.jpg”);
のような書き方で構いません。

では、テーマができたら、それをフォルダごと wordpress フォルダ内の以下のフォルダーの中に入れます。

wp-content/themes/

WordPress管理画面にログインしてサイドバーの［外観］をクリックします。
style.cssのコメントがきちんと書かれていて、テーマをフォルダを間違えていなければ、先ほど制作したテーマ［Sunshine］が表示されるはずです。

［Sunshine］の枠の上にマウスカーソルを乗せます。

WordPress管理画面　外観

［Sunshine］の枠の中の［有効化］をクリックします。

WordPress　テーマの有効化

ウィジェットの設定

最後に、管理画面の［外観］の［ウィジェット］からお好みのウィジェットを入れればオリジナルテーマの完成です。
おつかれさまでした。

記事の投稿

さあ、オリジナルのブログテーマができたら早速記事を投稿してみましょう。
管理画面のサイドバーにある［投稿］から［新規追加］をクリックし、タイトルと本文を入力します。

記事の途中に画像を挿入するには、本文の枠の上にある［メディアを追加］ボタンをクリックします。

普通に記事を書くと記事の最後までトップページなどの記事一覧に表示されますが、これを途中までしか表示させないようにするには、本文の途中の任意の場所で［「続きを読む」タグを挿入］ボタンをクリックします。

画像・続きを読むタグを挿入

さらにカスタマイズするには

ここまでで基本的なブログテーマはできましたが、レスポンシブWebデザイン、スマートフォンやRetinaディスプレイへの対応、管理画面からのメインビジュアルの変更などには対応していません。

「WordPressカスタマイズ講座」ではそれらの対応をはじめ、スマートフォンにも対応した更新しやすい企業サイトをWordPressで制作する方法などについても実習します。

詳しくは以下のページをご覧ください。

WordPressカスタマイズ講座

テンプレートタグの一覧は、以下のページが分かりやすいかと思います。

日本語版 WordPress チートシート | Webクリエイターボックス

さらに WordPress の関数について詳しく知りたいという場合は、公式サイトをご覧ください。

関数リファレンス – WordPress Codex 日本語版

If you like this article click the Facebook “Like” button to share it with your friends!