WordPressオリジナルテーマの作り方

無事、テスト環境も整ったのでオリジナルテーマを作っていきたいと思います。サイトの制作経験はあってもWordPressは完全に初心者だったので、つまづきポイントが結構ありました。私の様にWordPressが初めての方はゼロから始めるのではなく、無料のテーマをカスタマイズして構造などを把握してからオリジナルテーマを制作するをおすすめします。

WordPress 初めてのオリジナルテーマの作り方

  1. HTML + CSS、でデザインをする
  2. テーマフォルダを作成する
  3. style.css
  4. WordPressに対応させていく
  5. header.php | search.php
  6. sidebar.php
  7. footer.php
  8. index.php
  9. functions.php
  10. single.php | comments.php
  11. page.php

1. HTML + CSS、でデザインをする

index.htmlとstyle.css

WordPressの話をしていますが、まずはHTMLとCSSでスタティックページのデザインを完成させておきます。CSSファイルは「style.css」という名前で保存します。その後WordPressの機能を付けるためにコードを置き換えたり、追加していきます。WordPressに慣れていない人は、構造を把握するためにもこのやり方がおすすめです。

トップページのデザイン

uquico-top

私の制作したこのサイトの場合はシンプルな2カラムレイアウトで,このようなトップページになっています。(※2018年からブログデザインが変更しています)

2. テーマフォルダを作成する

スクリーンショットを保存

screenshot

HTMLとCSSでデザインが完了したら、テーマフォルダを(wp-content/themes/)の中に作成します。フォルダ名は任意ですが、作成したフォルダの中に「screenshot.png」という名前でテーマのスクリーンショットを保存(wp-content/thmes/テーマファルダ/screenshot.png)
します。(サイズは1200×900が推奨されています)

3. style.css

1.で作成したCSSファイル「style.css」の冒頭に下記をコピペします。テーマの名前やその他の情報を入力したら、先ほど作成したテーマフォルダに入れます。

style.css

/*
Theme Name: テーマの名前
Theme URI: テーマのURL
Description: テーマの説明
Version: バージョン
Author: テーマを作った人の名前
Author URI: テーマを作った人のURL
License: ライセンス
License URI: ライセンスURL
Tags: タグ
*/	

テーマを配布する場合は、ライセンスもきちんと入れておきましょう。

4. WordPressに対応させていく

WordPressは構造ってどうなっているの?

WordPressの最新のテーマ(2015年10月現在)、「Twenty Fifteen」のフォルダ(wp-content/themes/twentyfifteen)の中身を見てみると、テンプレートファイルと呼ばれる拡張子が.phpのファイルがたくさん並んでいます。それぞれのテンプレートファイルには役割があり、Wordpressではひとつのページを構成するのに複数のテンプレートファイルが使われています。そしてそれらのファイルはテンプレートタグと呼ばれるもので読み込まれたり、指示された処理を実行します。

uquico-top

このサイトの場合は、こんな感じです。それでは、各テンプレートファイルを作成していきます。

5. header.php

まずはじめに、ヘッダーの部分である「header.php」を作成したいと思います。新しいphpファイルを作成し、「header.php」という名前をつけ保存します。1.で作成した、index.htmlを開き、1行目からヘッダーの終わりまでをコピーし、「header.php」にペーストします。

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オリジナルテーマの作り方</title>
<link rel="stylesheet" href="style.css">
<head>
<body>
   <div id="wrapper">
<!-- #header -->
    <header id="header">
    <h1><a href="#">ブログタイトル</a></h1>
      <nav id="navigation">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">LINEスタンプ</a></li>
          <li><a href="#">Web制作</a>
            <ul class="sub-menu">
              <li>Web Design</li>
              <li>WordPress</li>
              <li>CSS</li>
            </ul>
          </li>
          <li><a href="#">お問い合わせ</a></li> 
        </ul>
      </nav><!-- /#navigation -->
      <div id="searchform">
        <form role="search" method="get" id="searchform" action="">
         <div><label class="screen-reader-text" for="s"></label>
          <input type="text" value="" name="s" id="s" placeholder="キーワード検索" />
          <input type="submit" id="searchsubmit" value="検索" />
         </div>
        </form>
      </div>
    </header><!-- /#header -->	

ペーストしたら、下記の様に変更していきます。

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title><?php wp_title('|', true, 'right'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
 <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <div id="wrapper">
<!-- #header -->
  <header id="header">
    <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
      <?php else : ?>
      <nav id="navigation">
        <?php wp_nav_menu(array('theme_location' => 'header-nav')); ?>
      </nav><!-- /#navigation -->
      <?php get_search_form(); ?>
  </header><!-- /#header -->

9行目の終了タグ</head>の直前に必ず<?php wp_head(); ?>を追加します。

  • language_attributes(); - 公式テーマとして登録する際は必須。個人で使用する場合は<html lang="ja">のままで大丈夫です
  • echo get_stylesheet_uri() - 「style.css」を読み込む
  • wp_head(); - プラグインの動作に必要なようです
  • body_class(): - ページ毎にbodyのクラスを変更する場合必要
  • bloginfo('name') - ダッシュボードの「設定」→「一般」サイトのタイトルを表示
  • wp_nav_menu(); - カスタムメニューを読み込む
  • get_search_form(); - 「searchform.php」を読み込む

6行目<title></title>に関しては、WordPress4.1以降から使用が変わり、「functions.php」に書き込むことが推奨されています。詳しくはこちらを参考にしてください。

17行目、wp_nav_menu(array('menu_id' => 'nav-menu'));はナビゲーションを表示するためのテンプレートタグで「8. functions.php」のところでもう一度触れます。

5-1. searchform.php

新しいPHPファイルを作成し、「searchform.php」と名前を付けてテーマフォルダ内に保存します。

searchform.php

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s"></label>
        <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" placeholder="キーワード検索" />
        <input type="submit" id="searchsubmit" value="" />
    </div>
</form>

検索フォームで注意したいのが、name属性の値です。検索キーワードはsというパラメータで渡されるので、必ずname="s"とします。

「search.php」については「WordPressで押さえておきたい条件分岐」で書いているので参考にしてください。

6. sidebar.php

新しいPHPファイルを作成し、「sidebar.php」と名前を付けてテーマフォルダ内に保存します。先ほど作成した「header.php」と同じ要領で、index.htmlのsidebarの箇所をコピーし「sidebar.php」にペースト、以下の様に変更します。

sidebar.php

<div id="sidebar">
  <?php if (is_active_sidebar('sidebar')):
    dynamic_sidebar('sidebar');
    else: ?>
  <?php endif; ?>
</div>
<!-- /#side -->	

今回はカスタムヴィジェットを使用するので、後ほど「functions.php」でカスタムウィジェットを使えるように設定していきます。

  • dynamic_sidebar(); - ウィジェットを読み込む

7. footer.php

新しいPHPファイルを作成し、「footer.php」と名前を付けてテーマフォルダ内に保存します。

footer.php

<footer>
<p><small>&amp;copy;
<?php bloginfo('name'); ?>
    All Rights Reserved.</small></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

</body>の直前に忘れずに<?php wp_footer(); ?>を追加してください。

  • bloginfo('name'); - サイトタイトル表示
  • wp_footer(); - wp_header(); 同様プラグインの動作に必要なようです

8. index.php

ヘッダー、サイドバー、フッターのテンプレートファイルが完成したので、次は「index.php」を作成します。「index.html」を開き、ヘッダー、サイドバー、フッターをそれぞれ<?php get_header(); ?><?php get_sidebar(); ?><?php get_footer(); ?>とテンプレートタグに置き換え、ファイル名を「index.php」に変更して保存します。

index.php

<?php get_header(); ?>
 
    <div id="main" role="main"> 
      
      <article>
        <header>
          <h1><a href="#"title="記事タイトル">
            記事タイトル</a></h1>
          <ul class="post_meta">
            <li class="time">2015年10月21日</li>
            <li class="category"><a href="#">カテゴリー</a></li>
            <li class="tag"><a href="#">タグ</a></li>
          </ul>
        </header>
        <a href="#"title="記事タイトル">
        <img width="640" height="336" src="#" class="attachment-post-thumbnail wp-post-image" alt="" /></a>
        <p>記事の本文が表示されます。<a href="記事詳細へのリンク" class="more-link">続きを読む &gt;</a></p>
      </article>
 
    </div><!-- /#main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
  • get_header(); - header.phpを読み込む
  • get_sidebar(); - sidebar.phpを読み込む
  • get_footer(); - footer.phpを読み込み

次は、WordPressの投稿(記事)を表示するためのPHPコードを「index.php」に加えていきます。ここで重要になるのがループについての理解です。

8-1. ループとは

下記のコードがループを呼ばれるコードです。PHPの基本構文で、if文で条件分岐(投稿記事の有無)され、条件によって別の処理が行われるようになっています。この場合だと、記事があれば記事を表示し、記事がなければ「見つかりません」というコメントが表示されます。

<?php 
if (have_posts()) : //投稿記事があるかどうかをチェック
while (have_posts()) : the_post(); //投稿記事があれば、それを繰り返し出力 
?> 
<article>
     投稿記事
</article>
<?php endwhile; //投稿記事があれば繰り返されます  

else : ?> //投稿記事が見つからなければ以下のコメントを表示
  <p>お探しの記事は見つかりませんでした。</p> 
<?php endif; ?> //ループ終了	

WordPress Codex

8-2. ループさせる

それでは、「index.php」をループさせ、記事のタイトル、リンク先、日時、カテゴリー、タグ、サムネイル画像、記事内容、moreリンクをテンプレートタグへと置き換えていきます。

index.php

<?php get_header(); ?>
    <div id="main" role="main"> 
    <?php if (have_posts()) :
    while (have_posts()) : the_post(); ?>
      <article>
        <header>
         <h1><a href="<?php the_permalink(); ?>"title="<?php the_title_attribute(); ?>">
            <?php the_title_attribute(); ?></a></h1>
          <ul class="post_meta">
            <li class="time"><?php the_date(); ?></li>
            <li class="category"><?php the_category(', '); ?></li>
            <li class="tag"><?php the_tags('', ', '); ?></li>
          </ul>
        </header>
        <a href="<?php the_permalink(); ?>"title="<?php the_title_attribute(); ?>">
        <?php if(has_post_thumbnail()) {the_post_thumbnail(); } ?></a>
        <?php the_content('続きを読む &gt;'); ?>
      </article>
    <?php endwhile; ?>
   <?php else : ?> 
      <p>お探しの記事は見つかりませんでした。</p> 
    <?php endif; ?> 
    </div><!-- /#main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>	
  • the_permalink(); - 記事のパーマリンク、URLを表示
  • the_title_attribute(); - 記事のタイトルを表示
  • the_date(); - 日時を表示(同日の記事がある場合は最新の記事にのみ日付を表示)
  • the_category(', '); - カテゴリーを表示
  • the_tags('タグを表示する際、前頭に文字を入れたい場合はここに記述(例)Tag: ', '何で区切るか '); - タグを表示
  • the_content(''); - 記事や続きを読むリンクを表示

同じ日付で複数の記事を投稿する場合、the_date();の代わりに<?php echo get_the_date(); ?>とすると同じ日付の記事であっても、記事毎に日付けを取得してくれます。

9. functions.php

新しいPHPファイルを作成し「functions.php」と名前を付けてテーマフォルダ内に保存します。 sidebar.phpのところでも触れた、ウィジェットを使える様に設定していきます。他にも、ナビゲーション、アイキャッチ画像(サムネイル画像)、サイトタイトルの設定もここで行います。

「functions.php」を編集する時はPHPの終了タグ ?>の後に余分な空白や改行があると予期せぬ挙動を引き起こす場合があるので注意が必要です。編集する時は必ずバックアップをとるようにしてください。

9-1. ウィジェット機能の追加

ウィジェットを使えるようしていきます。

下記のコードを加えるとダッシュボードのメニューに「ウィジェット」が表示され、ウィジェットが編集できるようになります。今回はウェジェットエリアがサイドバーだけでしたが、フッターなどでもウェジェットを使用したい場合、idを変更することで別のウィジェットエリアを作成することが可能です。

ダッシュボード、ウィジェット

functions.php

<?php
register_sidebar(array (
'name' => 'サイドバーウェジェット',
'id' => 'sidebar',
'description' => '',
'before_widget' => '&lt;section id="widget" class="%2$s"&gt;',
'after_widget' => '&lt;/section&gt;',
'before_title' => '&lt;h2&gt;',
'after_title' => '&lt;/h2&gt;'
 ));
?>
  • descriptionは必須ではありませんがウェジェットの説明を付け加えることができます。
  • before_widgetではどんなマークアップでウェジェットを囲むかを記述します。
  • before_titleはウェジェットにタイトルを付ける場合のマークアップを指定できます。

下記は, 5.「sidebar.php」のところで書いたコードです。is_active_sidebar($number)dynamic_sidebar($number);$numberを上記「functions.php」の「id」名と同様にすることでサイドバーでウィジェットが表示されるようになります。

sidebar.php

<div id="sidebar">
  <?php if (is_active_sidebar('sidebar')):
    dynamic_sidebar('sidebar');
    else: ?>
  <?php endif; ?>
</div>
<!-- #side -->	

WordPress Codex

9-2. ナビゲーション

ナビゲーションを使用できるようにしていきます。
WordPressのカスタムナビゲーションを使えるようにするにはいくつかの方法があるようですが、今回私は以下を「functions.php」に加えましました。

functions.php

<?php
 register_nav_menu(array('header-nav'=>'ヘッダーナビ'));  
 ?>	

これでダッシュボードの「外観」に「メニュー」が追加されるのでナビゲーションを作成できるようになります。作成したナビゲーションを表示(出力)させるためにはwp_nav_menu()でパラメータにtheme_locationを指定して、register_nav_menuで登録したナビゲーションが使われる位置(ロケーション、ここでは'header-nav')を指定してあげます。下記は「header.php」に書いたコードです。

header.php

<?php 
 wp_nav_menu(array('theme_location'=>'header-nav'));
 ?>

9-3. アイキャッチ画像

アイキャッチ画像(サムネイル画像)を使用できるようにします。

functions.php

<?php 
add_theme_support( 'post-thumbnails' ); //アイキャッチを使えるようにする
set_post_thumbnail_size(640, 336, true); // 幅 640px、高さ 336px、切り抜きモード
?>

set_post_thumbnail_size($width, $height, $crop);でサイズの指定ができます。$cropfalseの場合は長い方のサイズでリサイズ(縮小)されます。trueは指定されたサイズで中心部分を切り抜いてくれます。

9-4. titleを表示させる

次は、<title></title>を表示させるコードを書いていきます。

functions.php

<?php
function my_setup_theme() {
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_setup_theme' );
?>

WordPress4.1以降は、<title></title>を直接書かずに、「functions.php」に上記のを加えると、自動でtitleを生成してくれます。

10. single.php

続いて、サイトのトップページにある「続きを読む」ボタンの先、投稿記事を表示する「single.php」を作成していきます。

uquico-single.page

先ほど作成した「index.php」を「single.php」という別名で保存します。保存ができたら、以下のように変更していきます。

「index.php」からの変更点は、記事タイトルとサムネイルのパーマリンクを外し、記事全文が表示されるようにmoreタグも外します。そして、前後の記事へのリンク、コメント蘭を追加します。

single.php

<?php get_header(); ?>
    <div id="main" role="main"> 
    <?php if (have_posts()) :
    while (have_posts()) : the_post(); ?>
      <article>
        <header>
         <h1><?php the_title_attribute(); ?>"></h1>
          <ul class="post_meta">
            <li class="time"><?php the_date(); ?></li>
            <li class="category"><?php the_category(', ') ?></li>
            <li class="tag"><?php the_tags('', ', '); ?></li>
          </ul>
        </header>
        
        <?php if(has_post_thumbnail()) {the_post_thumbnail(); } ?>
        <?php the_content(); ?>
      </article>

    <?php endwhile; ?>

      <section class="navigation">
        <?php if(get_previous_post()): ?>
        <div class="prev"><?php previous_post_link('%link','%title'); ?></div>
        <?php endif; if(get_next_post()): ?>
        <div class="next"><?php next_post_link('%link','%title' ); ?></div>
        <?php endif; ?>
      </section>

      <?php comments_template(); ?>

   <?php else : ?> 
      <p>お探しの記事は見つかりませんでした。</p> 
    <?php endif; ?> 
    </div><!-- /#main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>	
  • previous_post_link('%link','%title'); - 前の記事へのリンク
  • next_post_link('%link','%title' ); - 次の記事へのリンク
  • comments_template(); - comments.phpを読み込む

10-1. comments.php

新しいPHPファイルを作成し、「comments.php」と名前を付けてテーマフォルダ内に保存します。

comments.php

<div id="comments" class="comment_form"> //必ず #comments というIDを付ける
    <?php if(have_comments()): ?>
    <h1 class="comments-title">Comment</h1>
    <ul class="comments-list">
      <?php wp_list_comments('avatar_size=60'); ?>
    </ul>
    <?php endif; ?>
</div>

これでコメントがあった場合、表示されるようになります。

11. page.php

先ほど作成した、「single.php」を今度は「page.php」という別名で保存します。このpage.phpテンプレートファイルは固定ページと呼ばれるページを表示するのに使われます。このサイトではABOUT、LINEスタンプページとお問い合わせのページが固定ページです。

page.phpでは、日時、前後の記事へのリンク、コメント蘭は削除します。

single.php

<?php get_header(); ?>
    <div id="main" role="main"> 
    <?php if (have_posts()) :
    while (have_posts()) : the_post(); ?>
      <article>
        <header>
         <h1><?php the_title_attribute(); ?>"></h1>
        </header>
        
        <?php if(has_post_thumbnail()) {the_post_thumbnail(); } ?>
        <?php the_content(); ?>
      </article>

    <?php endwhile; ?>
   <?php else : ?> 
      <p>お探しの記事は見つかりませんでした。</p> 
    <?php endif; ?> 
    </div><!-- /#main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>	

また、page.phpの冒頭に下記を加えると、固定ベージで使用できるテンプレートを作成できます。

page.php

<?php
/*
Template Name: About
*/
?>	

固定ページ、テンプレート

「固定ページ」の作成画面で図のようじテンプレートが選択できるようになります。

12. 完成

以上が、ベーシックなオリジナルテーマの作り方です。最後に、不要になったHTMLファイルを削除したら完成です。今回作成したPHPファイルは全部で9つです。お疲れ様でした。

  • header.php - ヘッダー部分
  • siderbar.php - サイドバー部分
  • foodter.php - フッター部分
  • index.php - メインとなるテンプレートファイル
  • single.php - 個別記事用
  • page.php - 固定ページ用
  • searchform.php - 検索フォーム
  • comments.php - コメント部分
  • functions.php - 設定用

オリジナルのテーマを作成するときの参考になれば幸いです。WordPressの条件分岐については「WordPressで押さえておきたい条件分岐」で書いています。

Leave a Comment