WordPressのオリジナルテーマ制作の流れをざっくり解説

今回はWordPressでオリジナルテーマを作成する際の手順をざっくり解説します。

テーマをどこまで作り込むかによって制作の難易度は変わってきますが、基本的なテーマを作るくらいならそこまで難しくはないはずです。

「HTMLとCSSは大体OK、PHPは少しならわかる」くらいなら大丈夫だと思います。

 

WordPressをインストールする

これからWordPressテーマを作っていくので、当然WordPressをインストールしておく必要があります。

レンタルサーバーを借りて作ってもいいし、自分にPC上にローカルホストを作ってそこにWordPressをインストールしても構いません。

 

WordPressをインストールする方法は話すと結構長くなるので、まだインストールしていない人はわかりやすい記事がネット上にゴロゴロあるので、それを参考にしながらインストールしてみてください。

 

テーマのデザインを考える

テーマのデザインを考えます。すでにいろんな人が出しているテーマを参考にするといいでしょう。

デザインは「トップページ」と「記事ページ」の2種類用意します。

 

トップページ

必要な要素は大体以下の通りです。

  • ヘッダー(サイト名、キャッチフレーズ、メニューなど)
  • 記事一覧
  • サイドバー
  • フッター

 

記事一覧とサイドバーは横に並べて2カラムにします。

サイドバーには記事カテゴリーや月別アーカイブ、検索フォームなどを設置します。

 

記事ページ

必要な要素自体はトップページとほとんど変わりません。記事一覧の代わりに記事本文を表示するようにするくらいです。

ヘッダー、フッター、サイドバーはトップページと共通でいいでしょう。

 

index.htmlを作る

ではテーマ制作に入っていきます。

まず最初にサイトのトップページとなるindex.htmlを作ります(とりあえずhtmlで作り、後で必要な部分をphpに置き換えていきます。)

ついでにstyle.cssも作ってしまいましょう。内容は後で書いていきます。

ちなみにテーマのフォルダに関しては、好きな名前を半角英数でつけ、その中にテーマに関するファイルをどんどん作っていく感じです。

 

<!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」というフォルダを作り、その中に保存します。

テーマ名を「mytheme」とすると、現在のフォルダ構成はこんな感じ。

mytheme

└images

└index.html

└style.css

 

phpファイルに分割する

index.htmlをphpファイルに分割していきます。

ヘッダー、フッターなどの共通のパーツをphpファイルに分割すると、他のページでも簡単に呼び出せるようになります。

それと、ぶっちゃけPHPはほとんどできなくても大丈夫です。

WordPressには最初から決まった関数が用意されているので、それを使えば簡単に処理を行うことができます。

 

では、分割していきます。

分けるファイルはこんな感じ。

  • header.php:ヘッダー
  • sidebar.php:サイドバー
  • footer.php:フッター
  • index.php:トップページなど
  • single.php:記事ページ
  • functions.php:テーマに必要な関数
  • style.css:スタイルシート

 

「ファイル数多いな…」と感じるかもしれませんが、要するに共通部分を小分けにしているだけなので、そこまで難しく考える必要はありません。

それぞれ呼び出すもの超簡単です。

 

header.php(ヘッダー)

テーマのヘッダー部分となるheader.phpを作ります。

header.phpに書く内容はindex.htmlの最初の行(<!DOCTYPE html>の部分)〜ヘッダーの最後(</header>)までです。

まずはindex.htmlの<!DOCTYPE html>から</header>までをまるっとコピペしてしまいましょう。

コピペしたらindex.htmlの方にあるヘッダーの部分は消してください。

 

header.php

<!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>

 

この状態からWordPress用に色々タグを置き換えていく作業をします。

まずは<title>や<img>をWordPressの関数に置き換えます。

WordPressには最初から用意されている関数がいくつもあるので、それを呼び出せば簡単に処理を行うことができます。

<title>タグは以下のように書き換えましょう。

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

この場合、トップページのタイトルは「ブログ名」、記事ページのタイトルは「ブログ名|記事タイトル」のようになります。

「|」の部分を「-」に変えれば「ブログ名 – 記事タイトル」といったようにすることもできます。

 

次にスタイルシートのパスを関数を使って呼び出します。

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

これだけでスタイルシートを呼び出すことができます。

 

お次はプラグインなどを読み込むタグで、テーマ制作では必須です。

</head>の直前に入れておくのが定番ですね。

<?php wp_head(); ?>

 

<body>タグにはWordPressで便利なクラスをつけてくれるタグがあるので、ぜひ呼び出しておきましょう。

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

このタグを呼び出しておくと、制作で便利なクラスを自動で<body>に追加してくれます。

 

サイトのロゴは画像で作ることにするので、パスを記述する必要があります。

ただ、WordPressにはそのテーマまでのパスを表示してくれる便利なタグが用意されています↓

<?php echo get_template_directory_uri(); ?>/

画像までのパスを毎回呼び出さなくても、このタグを入れればテーマフォルダまでのパスを出力してくれます。今回なら「ドメイン名/wp-content/themes/mytheme」までが出力されます。

ロゴに限らず、画像は全てこのタグで呼び出し、それ以下の階層にある画像は直接入力するという形で記述します。

 

以上のことを踏まえ、ロゴまでのパスはこんな感じにします。imagesフォルダにlogo.svgがあるとします。

<img src="<?php echo get_template_directory_uri(); ?>/images/logo.svg" alt="logo" width="220" height="30">

 

それと、ほとんどの場合ロゴはトップページへのリンクになっていると思うので、トップページへのリンクも出力しておきます。これもWordPressのタグで一発です。

ロゴ画像周りの<img>を<a>タグで囲い、href属性の中に以下のように記述してください。

<a href="<?php echo esc_url( home_url( '/' ) );" ?>〜</a>

 

header.phpはとりあえずこんな感じでいいでしょう。

ファイルはこんな感じになっていると思います。

<!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="logo" width="227" height="33"></a></h1>
        </header>

 

footer.php(フッター)

フッターとなるfooter.phpを作ります。

footer.phpに書く内容はindex.htmlのフッター部分(<footer>〜</html>まで)です。

footer.htmlの<!DOCTYPE html>から</header>までをまるっとコピペしてしまいましょう。

同じ手順でindex.htmlの<footer>から</html>までをまるっとコピペして、index.htmlの方のフッター部分は消してください。

 

footer.php

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

 

そして</body>の前にお決まりのタグを入れます。

<?php wp_footer(); ?>

このタグもシステム・プラグイン用です。必ず入れるようにしてください。

 

フッターはたったこれだけです。

以下のようになっていれば大丈夫です。

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

 

sidebar.php(サイドバー)とfunctions.php(テーマ関数)

サイドバーにカテゴリーやアーカイブなどを表示するのは、WordPressの管理画面から行うことができますが、デフォルトのままだとサイドバーの設定をいじることができません。

そこで必要になるのがfunctions.phpです。

functions.phpはテーマに直接表示するような要素はありませんが、WordPressで便利な機能を有効化したりするのにコードを記述します。

 

というわけで、サイドバーのウィジェットを利用できるようにするために、functions.phpに以下のように記述します。

functions.php

<?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に以下のように記述します。

sidebar.php

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

 

sidebar.phpではウィジェットが1つ以上設定されていればウィジェットを表示、1つも指定されていない場合は3〜4行目に記述したタグが表示されます。

 

index.php(トップページなど)

index.phpは今回はトップページを表示する際に使用します。

というわけで、これまで小分けにしてきたヘッダーなどのパーツを呼び出してindex.phpに表示します。

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

 

ヘッダーを読み込む場合はget_header関数、サイドバーを読み込む場合はget_sidebar関数、フッターを読み込む場合はget_footer関数を使用します。

つまり、この時点でindex.phpにはヘッダー、サイドバー、フッターが読み込まれていることになります。

 

ループ処理

WordPressにはループ処理というものが存在し、トップページに記事一覧などを表示する際に呼び出されています。

一見記事をただ並べただけに見えるトップページでも、

  • 記事タイトル
  • サムネイル
  • カテゴリー
  • 日付

などなど、それぞれ取得すべきパーツ自体は全て共通しています。つまり、同じ処理を繰り返しているわけですね。

 

ループ処理は以下のように行います。(今回は例として簡単なものにします)

<?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;
?>

 

処理自体は、最初のif文で投稿記事があるかどうかを確認、投稿記事が存在する場合はwhile分で記事情報を繰り返し取得し表示。while文の中に書いた処理やタグを繰り返し出力します。

この例で実際に画面に出力すると以下のようになります。class名などは自由に変更しても構いません。

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

 

ではループ処理を<main>タグで囲ってマークアップします。

index.phpは以下のようになれば大丈夫です。

index.php

<?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でもget_header関数などを使って小分けにしたパーツを読み込みましょう。

また、投稿ページでもループ処理を行います。書き方はindex.phpとほぼ同じです。使用しているタグは少し違うので注意しましょう。

single.php

<?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(); ?>

the_content関数は記事本文を表示する関数です。index.phpにはなかったタグですね。

 

style.css(スタイルシート)

最後にCSSをstyle.cssに記述します。

ただし、WordPressのstyle.cssにはテーマの概要や作者を表記することができます。

style.cssの先頭にコメントアウトして以下のように記述します。

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

 

それぞれの役割は以下の通り。

  • Theme Name:テーマ名
  • Theme URI:テーマの配布元URL
  • Description:概要
  • Version:バージョン
  • Author:製作者
  • Author URI:制作者のURL(公式ブログなど)

 

なお、これらは全て書く必要はないですし、極論書かなくても大丈夫ですが、とりあえず書いておくのをオススメします。

コメントでこれらを書いたらあとはその下にCSSを書きまくるだけです。

 

テーマ制作はざっくりとこんな感じです。

 

テーマを反映させる

テーマを反映させるにはWordPressのダッシュボード→外観→テーマと進みます。

style.cssが作成されていれば先ほど作成したテーマが透明の画像なしで表示されているはずです。

テーマを選択し、「有効化」をクリックするとテーマが使えるようになります。

 

最後にウィジェットを追加します。

ダッシュボード→外観→ウィジェットをクリックすると好きなウィジェットを選択できる画面になります。

選択したウィジェットはsidebar.phpと連動して表示されます。

 

ざっくりですが、WordPressのオリジナルテーマ制作の流れはこんな感じです。

さらに本格的にテーマを作りたい人は専門書を買って勉強するのがいいと思います。

お疲れ様でした!