1. HOME
  2. >
  3. WordPress
  4. >
  5. テーマ

オリジナル自作WordPressテーマの作り方を徹底解説【ブログ用】

アフィリエイト広告を利用しています

投稿日： 更新日：
オリジナル自作WordPressテーマの作り方を徹底解説【ブログ用】のアイキャッチ画像

今回は、WordPressのテーマを自作する方法を解説していきます。

WordPressテーマを自作できるようになれば、欲しい機能を搭載できますし、必要最低限の機能だけを実装して無駄のないサイトを作ることができます。

前提となる知識

  • PHPの基礎的な知識
  • HTML、CSSの知識
  • できればJavaScriptの知識
  • WordPressの操作

このような知識がある人なら、WordPressのテーマを自作できるでしょう。

PHPに関しては、そこまで高いレベルは要求されません。

どちらかといえばWordPress特有の挙動や関数を学ぶ必要があります。

知っておくべき基本的な関数は、この記事で紹介していきます。

必要なファイル

  • style.css
  • index.php
  • functions.php
  • header.php
  • footer.php
  • sidebar.php
  • 404.php
  • archive.php
  • single.php
  • page.php
  • search.php

最低限、style.cssとfunctions.php、index.phpだけでも作ることができますが、一般的なブログサイトを作るとなれば上のようなファイルは必要になります。

加えて、部品となるファイルも用意します。

  • searchform.php（検索ボックス用のテンプレート）
  • comments.php（コメント欄用のテンプレート）

ブログサイトで必要になるページは以下になります。

  • トップページ（index.php、home.php、front-page.php）
  • 記事ページ（single.php）
  • 固定ページ（page.php）
  • 月別ページ（archive.php）
  • カテゴリーページ（category.php、archive.php）
  • タグページ（tag.php、archive.php）
  • 404ページ（404.php）
  • 検索結果ページ（search.php）

この記事では、それぞれのページの作り方を解説します。

テーマ制作の準備

テーマを制作する前にいくつか準備が必要になります。

ローカル環境にWordPressをインストール

当然ですが、WordPressの開発をするためにはローカルにサーバーやデータベースをインストールしておく必要があります。

私はXAMPPやMAMPPを入れて開発をしています。

ローカル開発環境が整ったら、htdocsファイルにディレクトリを作成して、その中にWordPressをインストールして下さい。

ダミー記事をインポートしておく

記事が全くない状態でテーマを作るのは難しいと思います。

以下のページにある「clone and downloads」と書かれた緑色のリンクからエクスポートファイルをダウンロードして下さい。

https://github.com/jawordpressorg/theme-test-data-ja

ダウンロードしたフォルダの中に、ダミー記事用のxmlファイルがあるので、これをインポートして下さい。

ダミー記事があると、テーマの作成が楽になります。

wp-config.phpでデバッグモードをオンにする

wp-confit.phpの中にある、

define('WP_DEBUG', false);

この記述のfalseをtrueにすると、エラーの詳細が表示されるようになります。

define('WP_DEBUG', true);

エラーになった時に原因を調べるためには、テスト環境ではこれをtrueにしてデバッグモードにしておきましょう。

本番環境ではfalseにして下さい。

「WP Multibyte Patch」プラグインをインストールしておく

文字数のカウントを正確にするために、「WP Multibyte Patch」プラグインをインストールして下さい。

抜粋などで文字数を指定して出力する時など、必要になるからです。

出来上がるテーマ

この記事では簡単なテーマを作っていきます。

仕上がりとしては、

こんな感じです。

ただし、細かいCSSは解説を省きます。CSSはできる前提で進めていきます。

style.css

style.cssには、テーマの情報を先頭に記述します。

style.css

@charset "UTF-8";
/*
Theme Name: テーマの名前（必須）
Theme URI: テーマのURL
Description: テーマの説明
Author: 制作者の名前
Author URI: 制作者のURL
Tags: 特徴を表すタグ（カンマ区切り）
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

基本的な部分はこんな感じです。

WordPressのライセンスはGPLにする決まりがあるので、GPLライセンスにしておきましょう。

この記事では、全体的なCSSの説明は省きます。

注意が必要な部分については後ほど解説します。

functions.php

テーマの設定や機能の追加などは、functions.phpというファイルで行います。

functions.php

<?php
// この下に書いていく↓↓

始めに、<?php を記述して、その下に書いていきます。

?> の閉じタグは記述しないで大丈夫です。ミスを防ぐために、記述しないのが一般的ですね。

この記事では度々functions.phpが出てきますので、その都度説明していきます。

head要素やヘッダーの作り方

head要素や全ページ共通のヘッダーは、header.phpというファイルで作成します。

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?> RSS Feed" href="<?php bloginfo( 'rss2_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <div class="container">
    <header class="header" id="header">
      <!-- 省略 -->
    </header>

他にもOGPやTwitterのシェア用コードを入れる必要もありますが、基本的にはこのような形になります。

wp_head();

この関数は、WordPressを使う上で必要な情報が自動で出力するために必ず入れます。

title要素やCSSの読み込みなどは、functions.phpを使ってここに出力させます。

titleを出力する

titleはwp_head()の場所に自動で出力されますが、functions.phpで表示方法を指定することができます。

functions.phpには以下のように記述します。

functions.php

/**
 * タイトル周りのカスタマイズ
 */
add_theme_support( 'title-tag' );

if ( !function_exists( 'my_document_title_separator' ) ) {
  function my_document_title_separator( $separator ) {
    $separator = '|';
    return $separator;
  }
}
add_filter( 'document_title_separator', 'my_document_title_separator' );

if ( !function_exists( 'my_document_title_parts' ) ) {
  function my_document_title_parts( $title ) {
    if ( is_category() ) {
      $title['title'] = '「' . $title['title'] . '」カテゴリーの記事一覧';
    } else if ( is_tag() ) {
      $title['title'] = '「' . $title['title'] . '」タグの記事一覧';
    } else if ( is_archive() ) {
      $title['title'] = $title['title'] . 'の記事一覧';
    } else if ( is_404() ) {
      $title['title'] = '404 not found';
    }
    return $title;
  }
}
add_filter( 'document_title_parts', 'my_document_title_parts', 10, 1 );

こうすることで、タイトルの出力内容を好きなように変更できます。

add_theme_support( 'title-tag' );

このコードは、wp_head()でタイトルを出力するための記述です。

関数名には接頭辞をつける

上記のfunctions.phpの関数名には「my_」という接頭辞が付いています。

これは、プラグインなどの関数名と被らないようにするためです。

厳密に言うと「my_」も被る可能性があるので、他の人が使わないようなユニークな接頭辞をつけて下さい。

CSSファイルを読み込む

headでCSSファイルを読み込む際、header.phpで直に読み込ませるのではなく、functions.phpで設定をします。

理由は、CSSの読み込む順番を変えたり、読み込みをキャンセルしたりのカスタマイズができるようにするためです。

functions.php

/**
 * CSSの読み込み
 */
if ( !function_exists( 'my_load_files' ) ) {
  function my_load_files() {
    $my_theme = wp_get_theme();
    $my_theme_ver = $my_theme->Version;
    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), $my_theme_ver );
  }
}
add_action( 'wp_enqueue_scripts', 'my_load_files' );

これで、wp_head()　の位置にCSSの読み込みが出力されます。

バージョンを出力しているのは、アップデートの際に古いCSSのキャッシュを無効化するためです。

グローバルナビを出力する

お次はグローバルナビが表示されるようにコーディングしていきます。


グローバルナビは、管理画面から設定ができるように記述します。

まず、functions.phpに以下のように記述します。

functions.php

/**
 * メニューの設定
 */
if ( !function_exists( 'my_setup_nav' ) ) {
  function my_setup_nav() {
    register_nav_menus( array(
      'global'  => 'グローバルナビ'
    ) );
  }
}
add_action( 'after_setup_theme', 'my_setup_nav' );

次に、header.phpに出力されるように記述します。

今回は、サイト名と一緒に以下のようにしました。

header.php

<header class="header">
  <div class="header-inner">
    <div class="site-title">
      <?php if( is_home() || is_front_page() ): ?>
      <h1 class="site-title__text"><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
      <?php else: ?>
      <p class="site-title__text"><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></p>
      <?php endif; ?>
    </div>
  </div>
  <?php if( has_nav_menu( 'global' ) ) : ?>
  <div class="global-nav-wrap">
    <?php 
      wp_nav_menu( array(
        'theme_location' => 'global',
        'menu_class'      => 'global-nav__list',
        'container'      => 'nav',
        'container_class'=> 'global-nav',
        'depth'          => 1,
      ) );
    ?>
  </div>
  <?php endif; ?>
</header>

フッターの作り方

全ページ共通のフッターは、footer.phpというファイルで作成します。

footer.php

    <footer class="footer" id="footer">
      <div class="footer-inner">
        <div class="copyright">
          <?php $now = date('Y'); ?>
          <p class="copyright__text">copyright&copy; <?php echo $now; ?> - <?php bloginfo( 'name' ); ?></p>
        </div>
      </div>
    </footer>
  </div><!-- .container -->
<?php wp_footer(); ?>
</body>
</html>

上記コードにある、

wp_footer();

という関数は、必要なHTMLタグを自動で出力してくれます。

functions.phpを使って、ここにJavaScriptファイルを読み込むコードを出力するように設定します。

トップページの作り方

トップページは、index.php、home.php、front-page.phpで作ることができます。

index.phpは必須のファイルになります。

基本的にはトップページはindex.phpで作ります。home.phpで作っても大丈夫です。

front-page.phpにすると、固定ページをトップページにすることができないので、一般的にはindex.phpかhome.phpが使われます。

今回はindex.phpをトップページとして使います。

index.php

<?php get_header(); ?>
  <div class="wrapper">
    <main class="main">
      <?php if( have_posts() ) : ?>
      <div class="entries">
        <?php while ( have_posts() ) : the_post(); ?>
        <article class="entries-article">
          <div class="entries-article__info">
            <?php $datetime = get_the_date('Y-m-d'); ?>
            <time datetime="<?php echo $datetime; ?>" class="entries-article__time"><?php echo $datetime; ?></time>
            <h2 class="entries-article__title"><a class="entries-article__link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="entries-article__excerpt"><?php the_excerpt(); ?></p>
          </div>
        </article>
        <?php endwhile; ?>
      </div>
      <?php else: ?>
      <p>記事がまだありません。</p>
      <?php endif; ?>
    </main>
  </div>
<?php get_footer(); ?>

have_posts関数で投稿が存在するか判定をします。if( have_posts() )の部分ですね。

投稿が存在すれば、while ( have_posts() )でループを開始します。

the_post()で次の投稿のデータを取得してきます。

次の投稿がなければ、have_posts()がfalseとなり、ループが終了するという流れになります。

抜粋のカスタマイズ

the_excerpt()関数は、抜粋（記事の概要）を出力するための関数です。

投稿作成/編集画面 の抜粋文入力欄に記入してあればそれを、抜粋を入力していない場合は投稿内容の最初の110文字（デフォルト）の単語までを表示します。

※文字数を正確にカウントするためには「WP Multibyte Patch」プラグインを入れて下さい。

表示オプションの抜粋をチェックし、

抜粋の項目に記述をするとそれが表示されます。

この項目に記述がない場合に、投稿内容の最初の110文字（デフォルト）までが表示されます。

110文字を超えた分に関しては省略され、デフォルトでは末尾に[…]が挿入されます。

抜粋の文字数と末尾の文字列を変更するには、functions.phpに以下のような記述をします。

functions.php

// 抜粋の文字数
function my_excerpt_length( $length ) {
  return 100;
}
add_filter( 'excerpt_length', 'my_excerpt_length' );

// 抜粋の省略文字
function my_excerpt_more( $more ) {
  return '...'; //任意の文字列
}
add_filter( 'excerpt_more', 'my_excerpt_more' );

index.phpとhome.phpの違い

home.phpはトップページ専用のファイルで、index.phpは該当するファイルが見つからなかった場合に表示されるファイルになります。

例えば、カテゴリーページ用のcategory.phpがテーマにない場合、index.phpでカテゴリーページが表示されます。

index.phpは汎用性のあるファイルということです。

使い回せるコードはテンプレート化する

上記では、トップページに記事一覧を表示する方法を紹介しました。

カテゴリーページやタグページ、検索結果ページ、アーカイブページでも記事は一覧で表示されますよね。

ですので、記事を一覧表示するコードはテンプレート化すると使い回せて便利です。

まず、entries.phpというファイルを作成して、index.phpのコードを一部移します。

entries.php

<?php if( have_posts() ) : ?>
<div class="entries">
  <?php while ( have_posts() ) : the_post(); ?>
  <article class="entries-article">
    <div class="entries-article__info">
      <?php $datetime = get_the_date('Y-m-d'); ?>
      <time datetime="<?php echo $datetime; ?>" class="entries-article__time"><?php echo $datetime; ?></time>
      <h2 class="entries-article__title"><a class="entries-article__link" href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
      <p class="entries-article__excerpt"><?php the_excerpt(); ?></p>
    </div>
  </article>
  <?php endwhile; ?>
</div>
<?php else: ?>
<p>記事がまだありません。</p>
<?php endif; ?>

そして、index.phpを以下のように書き換えます。

index.php

<?php get_header(); ?>
  <div class="wrapper">
    <main class="main">
      <?php get_template_part( 'entries' ); ?>
    </main>
  </div>
<?php get_footer(); ?>

get_template_part()関数を使えば、ファイル名を指定してテンプレートを出力することができます。

これでindex.phpはだいぶスッキリしましたね。

記事一覧にページネーションを作る

このままだと、記事一覧が1ページしか表示されません。

次のページに進めるためのページネーションを表示させます。


↑これ

記事一覧はentries.phpにまとめているので、そちらを編集します。

entries.php

<?php if( have_posts() ) : ?>
<div class="entries">
  <?php while ( have_posts() ) : the_post(); ?>
  <article class="entries-article">
    <div class="entries-article__info">
      <?php $datetime = get_the_date( 'Y-m-d' ); ?>
      <time datetime="<?php echo $datetime; ?>" class="entries-article__time"><?php echo $datetime; ?></time>
      <h2 class="entries-article__title"><a class="entries-article__link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <p class="entries-article__excerpt"><?php the_excerpt(); ?></p>
    </div>
  </article>
  <?php endwhile; ?>
</div>
<div class="pagination pagination-top">
  <?php echo paginate_links( array(
    'type' => 'list',
    'prev_text' => '&laquo;',
    'next_text' => '&raquo;',
  ) ); ?>
</div>
<?php else: ?>
<p>記事がまだありません。</p>
<?php endif; ?>

サイドバーの作り方

サイドバーはsidebar.phpというファイルで作成します。

サイドバーには、新着記事やカテゴリー、タグなどのウィジェットを利用することが多いでしょう。

ウィジェットを設定するコードを、functions.phpに記述します。

functions.php

/**
 * ウィジェットの登録
 */
if ( !function_exists( 'my_widget_settings' ) ) {
  function my_widget_settings() {
    register_sidebar( array(
      'name' => 'サイドバー',
      'id' => 'sidebar',
      'description' => 'サイドバーに表示されます',
      'before_widget' => '<div id="%1$s" class="widget widget--sidebar %2$s">',
      'after_widget'  => '</div>',
      'before_title'  => '<h3 class="widget__title widget__title--sidebar">',
      'after_title'   => '</h3>',
    ) );
  }
}
add_action( 'widgets_init', 'my_widget_settings' );

これで、管理画面でウィジェットを設定することができるようになります。

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

sidebar.php

<div class="sidebar">
  <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar' ); ?>
  <?php endif; ?>
</div>

is_active_sidebar関数は、ウィジェットが使用されているか判定します。

dynamic_sidebar関数でidを指定して、その場所に管理画面で設定したウィジェットを出力します。

サイドバーは、get_sidebar関数を使って出力します。

index.php

<?php get_header(); ?>
  <div class="wrapper">
    <main class="main">
      <?php get_template_part( 'entries' ); ?>
    </main>
    <?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

記事ページの作り方

記事ページはsingle.phpを使って作成します。

single.php

<?php get_header(); ?>
  <div class="wrapper">
    <main id="main" class="main">
      <div class="main-inner">
        <article id="entry" <?php post_class(); ?>>
        <?php if ( have_posts() ) : while ( have_posts() ) :  the_post(); ?>
          <header class="article-header entry-header">
            <h1 class="entry-title single-title"><?php the_title(); //タイトル?></h1>
          </header>
          <div class="entry-content">
            <?php the_content(); ?>
            <?php wp_link_pages(); ?>
          </div>
        <?php endwhile; endif; ?>
        </article>
      </div>
    </main>
    <?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

こちらも記事一覧と同じように、

if ( have_posts() ) : while ( have_posts() ) : the_post();

このコードで投稿のデータを取得します。

the_title();はタイトルを出力する関数です。

the_content();は本文を出力する関数です。

wp_link_pages();は前後の記事を出力する関数です。

投稿日・更新日を表示させる

記事ページには投稿日と更新日を表示させるのが一般的ですね。

single.phpに以下のように追記します。

single.php

<!-- 省略 -->
<header class="entry-header">
  <?php $post_type = get_post_type( get_the_ID() ); ?>
  <h1 class="entry-title single-title"><?php the_title(); //タイトル?></h1>
  <?php if( $post_type === 'post' ): ?>
    <div class="post-date">
    <?php if( get_the_modified_date( 'Ymd' ) > get_the_date( 'Ymd' ) ): ?>
      投稿日：<time class="pubdate entry-time"><?php echo get_the_date( 'Y-m-d' ); ?></time>
      更新日：<time class="updated entry-time" datetime="<?php echo get_the_modified_date( 'Y-m-d' ); ?>"><?php echo get_the_modified_date( 'Y-m-d' ); ?></time>
    <?php else: ?>
      投稿日：<time class="pubdate entry-time" datetime="<?php echo get_the_date( 'Y-m-d' ); ?>"><?php echo get_the_date( 'Y-m-d' ); ?></time>
    <?php endif; ?>
    </div>
  <?php endif; ?>
</header>
<!-- 省略 -->

get_the_date()関数はフォーマットを指定して投稿日を取得する関数です。

get_the_modified_date()関数はフォーマットを指定して最終更新日を取得する関数です。

最終更新日と投稿日が同じ場合は、投稿日のみを出力し、投稿日以降に記事が更新されていたら両方を表示させるように分岐しています。

アイキャッチ画像を表示する

以下の画像のように、アイキャッチ画像を表示してみましょう。

まず、functions.phpでアイキャッチ画像をサポートするように記述を行います。

functions.php

add_theme_support( 'post-thumbnails' );

こうすると、記事作成画面に「アイキャッチ画像」という項目が出現します。

ここでアイキャッチ画像を設定することができます。

お次はsingle.phpを編集して、画像が表示されるようにします。

single.php

<!-- 省略 -->
  <?php if( $post_type === 'post' ): ?>
  <div class="post-date">
  <?php if( get_the_modified_date( 'Ymd' ) > get_the_date( 'Ymd' ) ): ?>
    投稿日：<time class="pubdate entry-time"><?php echo get_the_date( 'Y-m-d' ); ?></time>
    更新日：<time class="updated entry-time" datetime="<?php echo get_the_modified_date( 'Y-m-d' ); ?>"><?php echo get_the_modified_date( 'Y-m-d' ); ?></time>
  <?php else: ?>
    投稿日：<time class="pubdate entry-time" datetime="<?php echo get_the_date( 'Y-m-d' ); ?>"><?php echo get_the_date( 'Y-m-d' ); ?></time>
  <?php endif; ?>
  </div>
  <?php endif; ?>
  <?php if( has_post_thumbnail() ): ?>
  <?php
    $src = get_the_post_thumbnail_url( get_the_ID(), 'full' );
    $title = get_the_title();
  ?>
  <div class="post-eyecatch">
    <img src="<?php echo $src; ?>" alt="<?php echo $title; ?>のアイキャッチ画像" class="post-eyecatch__image">
  </div>
  <?php endif; ?>
</header>

has_post_thumbnail()この関数は、投稿にアイキャッチが設定されていればtrueを、なければfalseを返します。

get_the_post_thumbnail_url()この関数は、第一引数に記事IDを、第二引数に画像のサイズを指定して、記事に設定されたアイキャッチ画像のURLを取得します。

今回は、fullというサイズを使用しています。WordPressで画像をアップすると、自動で（オリジナルサイズを含めて）4つのサイズが生成されます。

  • ‘thumbnail’・・・デフォルト 150px x 150px :最大値
  • ‘medium’・・・デフォルト 300px x 300px :最大値
  • ‘large’・・・デフォルト 640px x 640px :最大値
  • ‘full’ ・・・アップロードした画像の元サイズ

functions.phpで、これ以外のサイズを自動生成することもできます。

add_image_size( '500x300', 500, 300, true );

固定ページの作り方

固定ページとは、例えば「運営者について」とか「問い合わせ」「プライバシポリシー」など、投稿記事とは異なる目的で利用されます。

固定ページはpage.phpというファイルで作成します。

基本的にはsingle.phpとほとんど一緒なので、コピペしてきます。

記事ページと違って、固定ページは投稿日や更新日は表示させないのが一般的なので、削除します。

page.php

<?php get_header(); ?>
  <div class="wrapper">
    <main id="main" class="main">
      <div class="main-inner">
        <article id="entry" <?php post_class(); ?>>
        <?php if ( have_posts() ) : while ( have_posts() ) :  the_post(); ?>
          <header class="entry-header">
            <?php if( has_post_thumbnail() ): ?>
            <?php
              $src = get_the_post_thumbnail_url( get_the_ID(), 'full' );
              $title = get_the_title();
            ?>
            <div class="post-eyecatch">
              <img src="<?php echo $src; ?>" alt="<?php echo $title; ?>のアイキャッチ画像" class="post-eyecatch__image">
            </div>
            <?php endif; ?>
          </header>
          <div class="entry-content">
            <?php the_content(); ?>
            <?php wp_link_pages(); ?>
          </div>
        <?php endwhile; endif; ?>
        </article>
      </div>
    </main>
    <?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

こんな感じです。

月別ページ、カテゴリーページ、タグページを作る

月別ページ、カテゴリーページ、タグページはアーカイブページとしてarchive.phpでまとめて作ることができます。

index.phpと作りは同じなので、コピペしてきます。

archive.php

<?php get_header(); ?>
  <div class="wrapper">
    <main class="main">
      <?php get_template_part( 'entries' ); ?>
    </main>
    <?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

記事一覧に、以下の画像のようにタイトルが出力されるようにentries.phpを編集します。

entries.php

<?php if( is_archive() ): ?>
<h3 class="top-section__heading"><?php the_archive_title(); ?></h3>
<?php endif; ?>
<?php if( have_posts() ) : ?>
<div class="entries">
  <?php while ( have_posts() ) : the_post(); ?>
  <article class="entries-article">
    <div class="entries-article__info">
      <?php $datetime = get_the_date( 'Y-m-d' ); ?>
      <time datetime="<?php echo $datetime; ?>" class="entries-article__time"><?php echo $datetime; ?></time>
      <h2 class="entries-article__title"><a class="entries-article__link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <p class="entries-article__excerpt"><?php the_excerpt(); ?></p>
    </div>
  </article>
  <?php endwhile; ?>
</div>
<div class="pagination pagination-top">
  <?php echo paginate_links( array(
    'type' => 'list',
    'prev_text' => '&laquo;',
    'next_text' => '&raquo;',
  ) ); ?>
</div>
<?php else: ?>
<p>記事がまだありません。</p>
<?php endif; ?>

is_archive()関数は、月別ページ、カテゴリーページ、タグページの場合trueを返します。

the_archive_title()関数は、自動でタイトルを出力してくれます。

検索結果ページ

お次は検索結果を表示するページを作成します。検索結果ページは、search.phpで作ります。

中身はarchive.phpと同じで大丈夫で、entries.phpを少し編集します。

search.php

<?php get_header(); ?>
  <div class="wrapper">
    <main class="main">
      <?php get_template_part( 'entries' ); ?>
    </main>
    <?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

entries.phpのタイトル周りを編集します。

entries.php

<?php if( is_archive() ): ?>
  <h3 class="top-section__heading"><?php the_archive_title(); ?></h3>
<?php elseif( is_search() ): ?>
  <h3 class="top-section__heading">「<?php the_search_query(); ?>」の検索結果: <?php echo $wp_query->found_posts; ?>件</h3>
<?php endif; ?>
<!-- 省略 -->

the_search_query()この関数で、検索された文字列を表示させます。

echo $wp_query->found_postsこの部分はヒットした記事の件数を表示させています。

$wp_queryはグローバル変数で、この中にページの情報が色々格納されています。

var_dumpでどんな情報が格納されているか試しに見てみるといいでしょう。

これで、検索結果ページのタイトルが以下のように表示されます。

記事が見つからなかった時の文言をちょっと変更します。

<?php else: ?>
  <?php if( is_search() ): ?>
<p>記事が見つかりませんでした。</p>  
  <?php else: ?>
<p>記事がまだありません。</p>
  <?php endif; ?>
<?php endif; ?>

404ページ

リクエストされたURLで記事が見つからなかった場合、404ページを表示させましょう。

404ページは404.phpで作成します。

404.php

<?php get_header(); ?>
  <div class="wrapper">
    <main id="main" class="main">
      <div class="main-inner">
        <div class="notfound">
          <h1 class="notfound-title">404 not found</h1>
          <p>記事が見つかりませんでした。</p>
          <p>記事は削除されたか、URLが変更になった可能性があります。</p>
          <?php get_search_form(); ?>
        </div>
      </div>
    </main>
    <?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

この404ページは以下のように表示されます。

検索フォームを表示させて、サイトを離脱されないようにするのがおすすめです。

get_search_form()この関数で検索フォームを出力することができます。

コメント欄の表示

コメント欄は、comments.phpというファイルを作成します。

comments.php

<div id="comments" class="comments">
  <?php if( have_comments() ): //コメントがあったらコメントリストを表示する ?>
  <h3 class="widget__title">コメント</h3>
  <ol class="commets-list">
  <?php wp_list_comments( 'avatar_size=80' ); ?>
  </ol>
  <?php endif; ?>

  <?php $args = array(
  'title_reply' => 'コメントする',
  'label_submit' => 'SUBMIT'
  );
  comment_form( $args ); ?>
</div>

wp_list_comments()この関数で記事についたコメントを表示させます。引数で細かい設定を行うことができます。

今回は、アバターが表示されるように設定しました。

comment_form()この関数はコメント入力欄を表示させる関数です。

引数に配列を入れて設定を行います。

次は、single.phpにコードを追加して、コメント欄が表示されるようにします。

single.php

<!-- 省略 -->
<div class="entry-content">
  <?php the_content(); ?>
  <?php wp_link_pages(); ?>
</div>
<div class="comment-area">
  <?php comments_template(); ?>
</div>
<!-- 省略 -->

comments_template()この関数で、先ほど作成したcomments.phpの中身が出力されます。

こんな感じですね。

コメント欄の設定は、管理画面の「設定」→「ディスカッション」から設定を行うことができます。

チェック事項

テーマ作成がある程度できたら、

  • トップページ
  • 記事ページ
  • 固定ページ
  • アーカイブページ
  • カテゴリーページ
  • タグページ
  • 404ページ
  • 検索結果ページ

上記ページがちゃんと表示されるか確認しましょう。

また、使用が想定されるウィジェットについては一通り設定してみて、綺麗に表示されるようにCSSを整えましょう。

プラグインの使用も想定する

「Table of Contents Plus（目次を表示させるプラグイン）」や「Contact Form 7（コンタクトフォームを生成するプラグイン）」のようなプラグインを使うことが想定される場合は、それらのCSSも整えるようにしましょう。

また、SNS Count Cacheのようなシェア数がカウントできるプラグインが利用できるようにするのもおすすめです。

まとめ

まずは大枠の部分から作っていき、少しずつ機能を細かい追加していきましょう。

最初は難しいかと思いますが、慣れてくれるとそこまで難しいものではないです。

不特定多数の人に使用されるのでなければ、自分で使用する最小限の機能だけで済みますからね。

ぜひこの記事を参考に、WordPressのテーマを自作してみて下さい。

 

他にもこんな記事があります。

ブログに最適なおすすめWordPressテンプレートテーマ【2018年版】（日本語、有料＆無料） | SHIROMAG

初心者向けにWordPressでブログを始める方法を徹底解説 | SHIROMAG

SEOに強いおすすめ日本語WordPressのテンプレートテーマ（無料版と有料版） | SHIROMAG

Search

運営者情報

Category

Tags

Amazon (14) CSS (2) hotentry (4) HTML (2) JavaScript (5) Kindle (3) Netflix (1) PC (2) pickup (5) recommend (18) SEO (1) Webサービス (1) Webデザイナー (2) Webデザイン (1) WordPress (16) お店 (2) はてな (7) アクセスアップ (1) インテリア (2) エディタ (1) カスタマイズ (16) カメラ (2) クレジットカード (5) コンビニ (1) サーバー (3) スクール (17) タブレット (2) ダンス (8) チケット (3) ツール (1) テーマ (4) ファッション (4) フリーランス (3) ブログ (22) プラグイン (1) プログラミング (11) レンタルサーバー (3) 仕事 (4) 大阪 (1) 東京 (5) 歴史 (2) 池袋 (1) 渋谷 (1) 買い物 (10) 転職 (1)

Archive

最近の投稿

最近のコメント

アーカイブ

カテゴリー

Recommend

WordPressテーマのAffinger5（Wing）を使ってみた感想、メリット・デメリット

WordPressテーマのAffinger5（Wing）を使ってみた感想、メリット・デメリット

東京都内の初心者・未経験におすすめのダンススクール（ダンス教室・ダンススタジオ）！

東京都内の初心者・未経験におすすめのダンススクール（ダンス教室・ダンススタジオ）！

【レンタルサーバー】エックスサーバーのスペック、おすすめポイント・不満点

【レンタルサーバー】エックスサーバーのスペック、おすすめポイント・不満点

東京都内の人気おすすめダンススクール、ダンス教室・レッスン！！

東京都内の人気おすすめダンススクール、ダンス教室・レッスン！！

お洒落なインテリア・雑貨が見つかるおすすめネットショップ・通販サイトまとめ

お洒落なインテリア・雑貨が見つかるおすすめネットショップ・通販サイトまとめ