HOME ＞ Tech ＞

ワードプレスのテーマを自作する手順

投稿日：2019年2月27日　最終更新日：2020年4月17日

ワードプレスのテーマは基本的なデザイン・機能のみであれば簡単に作成可能です。
本ブログのテーマも自作のものを適用しており、その作成手順を記載しております。
ワードプレステーマの適用方法など、テーマの基本的な使い方は本ページでは扱わないものとし、必要があれば都度解説へのリンクを貼っておきます。

Contents

必要な技術要素
前提
手順
その他の自作可能なファイル

必要な技術要素

PHP
HTML
CSS
JavaScript

前提

今回は、以下の前提で解説を進めていきます。

テーマ名は「sample_theme」
この記事を読む前にWordPress Codexのテーマ作成を軽く読んでおきましょう。
本ブログのテーマはgithubにソースあげてます。
CSSの設定はお好きにしてください。
この記事では、「動くものが作れた」という実感が持てる程度の実装をゴール地点としています。より詳細に学習しながらテーマ作成したい場合は、やはりWordPress Codexのテーマ作成を読み込みながら作成していきましょう。

手順

1.とりあえずトップページを表示可能にする

1-1.最小限のファイルの作成

まずは、必要最低限のファイル群を作成します。
ファイル群の構成は以下の通りです。
フォルダを作成して、空のファイルを作成してください。

samle_theme/
├ index.php
└ style.css

samle_theme/

├ index.php

└ style.css

1-2.style.cssの実装

ワードプレスでは、テーマ読み込み時にテーマ情報をstyle.cssから取得します。
この際に、style.cssに規格通りの実装がなければエラーとなります。
以下がサンプルです。必要最低限の記述をしています。

/*
Theme Name: Eng-Blog
Description:とあるEngineerのブログテンプレートです。
Theme URI: nothing
Author: とあるEngineer
Author URI: nothing
Version: 1.0.0
License: GPL
License URI: nothing
*/

Theme Name: Eng-Blog

Description:とあるEngineerのブログテンプレートです。

Theme URI: nothing

Author: とあるEngineer

Author URI: nothing

Version: 1.0.0

License: GPL

License URI: nothing

それぞれの項目に対して、以下の値を設定します。

Theme Name: テーマ名
Description: テーマの説明
Theme URI: テーマのURI
Author: 製作者名
Author URI: 製作者のURI
Version: バージョン
License: ライセンスの種類
License URI: ライセンスのURI

上記以外にも、「Tags」など、ワードプレステーマの公式レポジトリに登録した際の検索に有利となる項目も存在します。今回はレポジトリへの登録は前提としていないため、必要最低限の記述で進めていきます。

1-3.index.phpの実装

空ファイルのままテーマを適用すると、トップページは空白で何も表示されません。
そのため、

ヘッダー
コンテンツ部
フッター

を表示できるように、index.phpを実装します。
以下の関数は、index.phpと同階層に存在するheader.phpなどを呼び出す関数で、ファイルが存在しない場合はデフォルトで定義された処理が呼び出されるようになっています。

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

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php get_search_form(); ?>

この状態でテーマを適用すると、以下のようにトップ画面が表示されます。
もちろん、設定しているブログタイトルなどによって、表示されるテキスト情報は異なります。

これで、トップページをとりあえず表示できるようになりました。

1-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme.git commit b899e65baeb7fc5f63d2478ed14852e6c1d2ef39
うまくいかない場合は、こちらのリビジョンを取得して差分比較してみましょう。

2.JavaScript/CSSのライブラリを導入

今回はBootStrapを利用します。

2-1.ライブラリ取得

bootstrapの公式ページにて、「Download」ボタンを押下して、最新版のbootstrapをダウンロードします。

ダウンロードしたらzipファイルを展開して、以下のファイルを見つけましょう。

css/bootstrap.css： bootstrapのcss
css/bootstrap.min.css： bootstrap.cssの不要スペース・改行を削除したもの
js/bootstrap.js： bootstrapのJavaScript
js/bootstrap.min.js： bootstrap.jsの不要スペース・改行を削除したもの

この4ファイルを、sample_themeフォルダの中に配置します。
header.phpにて、bootstrap.min.cssとbootstrap.min.jsを読み込ませる予定ですが、フレームワークで定義されているクラス・関数について調査したい時のために、bootstrap.cssとbootstrap.js配置しておきます。

2-2.ライブラリ配置

配置先パスは宗教の問題なので、任意のフォルダ構成でどうぞ。
僕は以下のように配置します。

samle_theme/
├ index.php
├ static/　←追加
│  ├ css/　←追加
│  │  ├ bootstrap.css　←追加
│  │　└ bootstap.min.css　←追加
│  └ js/　←追加
│     ├ bootstrap.js　←追加
│　　　└ bootstap.min.js　←追加
└ style.css

samle_theme/

├ index.php

├ static/　←追加

│ ├ css/　←追加

│ │ ├ bootstrap.css　←追加

│ │　└ bootstap.min.css　←追加

│ └ js/　←追加

│ ├ bootstrap.js　←追加

│　　　└ bootstap.min.js　←追加

└ style.css

2-3.オリジナルのcss/jsファイルを作成

bootstrapだけでなく、オリジナルでcssやjsを定義したい場合があるため、あらかじめcustom.cssとcustom.jsを作成しておきます。
custom.css/jsというファイル名は、適当に僕が決めているだけなので、自由に変えてもらって構いません。

samle_theme/
├ index.php
├ static/
│　└ css/
│     ├ bootstrap.css
│     ├ bootstap.min.css
│　　　└ custom.css　←追加
│　└ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js　←追加
└ style.css

samle_theme/

├ index.php

├ static/

│　└ css/

│ ├ bootstrap.css

│ ├ bootstap.min.css

│　　　└ custom.css　←追加

│　└ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js　←追加

└ style.css

ソースの答え合わせ

対象のコミットハッシュは以下です。
https://github.com/web-commander/sample-theme.git commit 43215ab2f3f31092501cfc216e84922b4098948a
うまくいかない場合は、gitからこちらのリビジョンを取得して差分比較してみましょう。
custom.css/jsも自分の実装をpushしておきましたので、参考になればと思います。

3.オリジナルのヘッダーを作成

ヘッダー部分を作成していきます。
トップページおよび単一投稿記事、固定ページなど全ページ共通で呼び出すことを想定して作成します。
ページごとに異なるヘッダーを呼び出したい場合も、実装は可能なのでやってみたい方はget_header関数のレファレンスあたりをヒントに実装してみましょう。

3-1.header.phpを作成

header.phpというファイルを以下の場所に作成します。
各ページからget_header()関数が呼び出された際は、このファイルが存在している場合は、その存在するファイルを読み込み、存在しない場合はデフォルトの処理が呼び出されます。

samle_theme/
├ header.php　←追加
├ index.php
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
└ style.css

samle_theme/

├ header.php　←追加

├ index.php

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

└ style.css

3-2.header.phpを実装

以下、実装例です。
後述しますが、faviconの画像などもURL指定するようにしています。

また、ヘッダー部ではHTMLにおけるheadタグ〜head終了タグ、およびbodyタグを記述します。
各ページで共通的な部分はなるべくこのheader.phpに記述し、単一ページや固定ページで異なる部分はsingle.phpやpage.phpに記述していくことにします。

また、wp_head()関数をhead終了タグ直前で呼び出しておきます。


<!DOCTYPE html>
<html lang="ja" class="" >
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="ページの内容を表す文章">
    <title><?php bloginfo( 'name' ); ?></title>
    <!-- favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
    <!-- CSS -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/static/css/custom.css">
    <!-- JS  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/static/js/bootstrap.min.js"  type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/static/js/custom.js"  type="text/javascript"></script>
    <?php wp_head(); 
    ?>
  </head>
  <body>
    <header class="blog-header py-3">
      <div class="row align-items-center">
        <div class="col-md-4">
        </div>
        <div class="col-md-4 text-center">
          <a class="blog-header-logo text-dark" href="<?php echo home_url() ?>"><img src="<?php echo get_template_directory_uri(); ?>/static/img/arrow.png" /> <?php bloginfo( 'name' ); ?></a>
        </div>
        <div class="col-md-4">
        </div>
      </div>
    </header>
    <div class="container">
      <main role="main" class="container">
        <div class="row">

<!DOCTYPE html>

<?php wp_head();

</head>

<body>

</div>

<a class="blog-header-logo text-dark" href="<?php echo home_url() ?>"><img src="<?php echo get_template_directory_uri(); ?>/static/img/arrow.png" /> <?php bloginfo( 'name' ); ?></a>

</div>

</div>

</header>

3-3.ヘッダー・ファビコン表示に必要な画像ファイルを配置

header.php内で画像のURLを指定した箇所があるため、その画像を配置します。

samle_theme/
├ favicon.ico　←追加
├ header.php
├ index.php
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  ├ img/　←追加
│  │　└ arrow.png　←追加
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
└ style.css

samle_theme/

├ favicon.ico　←追加

├ header.php

├ index.php

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ ├ img/　←追加

│ │　└ arrow.png　←追加

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

└ style.css

3-4.画面表示確認

この状態でテーマを適用し、画面表示を確認してみましょう。
ヘッダーの表示が変更されたことが分かるかと思います。

また、ファビコンについても変更されているはずです。

3-5.ソースの答え合わせ

何か問題あれば、以下のリビジョンと差分をとってみましょう。
https://github.com/web-commander/sample-theme.git commit 120bf85acdb3d47c72ea939fe893a563138ba5f8

4.オリジナルのフッターを作成

フッター部分を作成していきます。
ヘッダーと同様に、今回は全ページで共通のフッターを呼び出す想定です。

4-1.footer.phpを作成

以下場所にfooter.phpを作成します。

samle_theme/
├ favicon.ico
├ footer.php　←追加
├ header.php
├ index.php
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  ├ img/
│  │　└ arrow.png
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
└ style.css

samle_theme/

├ favicon.ico

├ footer.php　←追加

├ header.php

├ index.php

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ ├ img/

│ │　└ arrow.png

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

└ style.css

4-2.footer.phpを実装

このファイル内では、body終了タグを記述する必要があります。
また、wp_footer()関数をbody終了タグ直前で呼び出しておきます。

コピーライト部の著者名はご自身の名前に変えておいてください。また、著者名に貼るリンク先についても任意でページ作成してリンクを貼っておきましょう。

        </div> <!-- row -->
      </main>
    </div> <!-- container  -->
   <?php wp_footer(); 
   ?>
  </body>
  <footer class="blog-footer">
    <p>© 2019  <a href="">とあるEngineer</a></p>
  </footer>
</html>

</div>

</main>

</div>

<?php wp_footer();

</body>

</footer>

</html>

4-3.画面表示確認

以下のようにフッターが表示されていると思います。
index.phpにて、get_footer()のあとにget_search_form()を呼び出しているため、検索窓がフッターより下に出てしまっており違和感がありますが、これは後ほど直しましょう。

4-4.ソースの答え合わせ

対象のコミットハッシュは以下です。

https://github.com/web-commander/sample-theme.git commit 704dc14e7949df5bb4a07c3927b8e2d0fba00912

何かあれば差分比較で。

5.indexのメインカラム・サイドバーを作成

index.phpのbody部を埋めていきます。
これにより、ひとまずページが１つ完成することとなります。

5-1.index.phpを実装

get_header()とget_sidebar()の間に、過去投稿のタイトル・ディスクリプションが一覧表示されるようにします。

<?php get_header(); ?>
      <div class="col-md-8 blog-main">
        <h1 class="my-3">Recent Posts</h1>
        <?php 
          if( have_posts() ):
          	while( have_posts() ):
              the_post();
        ?>
              <article id="post-<?php the_ID(); ?>" class="py-2">
              <header class="entry-header">
                <?php the_title( '<h3 class="entry-title">','</h3>' ); ?>
              </header>
              <div class="entry-content">
                <?php the_content( '続きを読む' ); ?>
              </div>
              </article>
        <?php endwhile; 
          else :
         ?> <p>表示する記事がありません。</p> <?php
         endif; 
        ?>
      </div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php get_search_form(); ?>

<?php get_header(); ?>

<h1 class="my-3">Recent Posts</h1>

<?php

if( have_posts() ):

while( have_posts() ):

the_post();

<article id="post-<?php the_ID(); ?>" class="py-2">

<?php the_title( '<h3 class="entry-title">','</h3>' ); ?>

</header>

<?php the_content( '続きを読む' ); ?>

</div>

</article>

<?php endwhile;

else :

?> <p>表示する記事がありません。</p> <?php

endif;

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php get_search_form(); ?>

5-2.functions.php/sidebar.phpを作成

以下の場所にfunctions.phpとsidebar.phpを作成します。

samle_theme/
├ favicon.ico
├ footer.php
├ functions.php　←追加
├ header.php
├ index.php
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  ├ img/
│  │　└ arrow.png
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
├ sidebar.php　←追加
└ style.css

samle_theme/

├ favicon.ico

├ footer.php

├ functions.php　←追加

├ header.php

├ index.php

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ ├ img/

│ │　└ arrow.png

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

├ sidebar.php　←追加

└ style.css

5-3.function.phpを実装

function.phpに、ウィジェット登録に必要な関数をオーバーライドし、作成したウィジェット用の関数をadd actionでフックします。

<?php
class My_Widget extends WP_Widget {

	/**
	 * ウィジェット名などを設定
	 */
	public function __construct() {
		// widget actual processes
	}

	/**
	 * ウィジェットの内容を出力
	 *
	 * @param array $args
	 * @param array $instance
	 */
	public function widget( $args, $instance ) {
		// outputs the content of the widget
	}

	/**
	 * 管理用のオプションのフォームを出力
	 *
	 * @param array $instance ウィジェットオプション
	 */
	public function form( $instance ) {
		// 管理用のオプションのフォームを出力
	}

	/**
	 * ウィジェットオプションの保存処理
	 *
	 * @param array $new_instance 新しいオプション
	 * @param array $old_instance 以前のオプション
	 */
	public function update( $new_instance, $old_instance ) {
		// ウィジェットオプションの保存処理
	}
}
?>

<?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function arphabet_widgets_init() {

	register_sidebar( array(
		'name' => 'サイドバー',
		'id' => 'sidebar-1',
		'before_widget' => '<div class="pb-6 mt-3 bg-light rounded">',
		'after_widget' => '</div>',
		'before_title' => '<h4 class="font-italic ml-3 mt-18">',
		'after_title' => '</h4>',
	) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

<?php

class My_Widget extends WP_Widget {

/**

* ウィジェット名などを設定

public function __construct() {

// widget actual processes

}

/**

* ウィジェットの内容を出力

* @param array $args

* @param array $instance

public function widget( $args, $instance ) {

// outputs the content of the widget

}

/**

* 管理用のオプションのフォームを出力

* @param array $instance ウィジェットオプション

public function form( $instance ) {

// 管理用のオプションのフォームを出力

}

/**

* ウィジェットオプションの保存処理

* @param array $new_instance 新しいオプション

* @param array $old_instance 以前のオプション

public function update( $new_instance, $old_instance ) {

// ウィジェットオプションの保存処理

}

<?php

/**

* Register our sidebars and widgetized areas.

function arphabet_widgets_init() {

register_sidebar( array(

'name' => 'サイドバー',

'id' => 'sidebar-1',

'before_widget' => '<div class="pb-6 mt-3 bg-light rounded">',

'after_widget' => '</div>',

'before_title' => '<h4 class="font-italic ml-3 mt-18">',

'after_title' => '</h4>',

) );

}

add_action( 'widgets_init', 'arphabet_widgets_init' );

5-4.sidebar.phpを実装

sidebar.phpに以下の内容を記述して、ウィジェットの内容を取得可能とします。

    <!-- サイドバー -->
    <div class="col-md-4 blog-side">
      <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
	  <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
         <?php dynamic_sidebar( 'sidebar-1' ); ?>
	  </div><!-- #primary-sidebar -->
      <?php endif; ?>
    </div><!-- /.blog-sidebar -->

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>

<?php dynamic_sidebar( 'sidebar-1' ); ?>

</div>

<?php endif; ?>

</div>

5-5.画面表示確認

以下のように、メインカラムに投稿済み記事のタイトル・ディスクリプションが表示されているか確認します。
また、サイドバーについても、ウィジェット登録した内容が表示されていることを確認します。

5-6.ソースの答え合わせ

コミットハッシュは以下の通りです。

https://github.com/web-commander/sample-theme commit b1b6c66628cece4fb56ab1e352cd49c1a084efd6

6.カテゴリページの作成

続いて、カテゴリページを表示できるようにします。
作りとしてはindex.phpとほとんど同じです。

6-1.category.phpの作成

以下の場所にcategory.phpを作成します。

samle_theme/
├ category.php　←追加
├ favicon.ico
├ footer.php
├ functions.php
├ header.php
├ index.php
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  ├ img/
│  │　└ arrow.png
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
├ sidebar.php
└ style.css

samle_theme/

├ category.php　←追加

├ favicon.ico

├ footer.php

├ functions.php

├ header.php

├ index.php

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ ├ img/

│ │　└ arrow.png

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

├ sidebar.php

└ style.css

6-2.category.phpの実装

category.phpに以下の内容を記述します。
ヘッダー・フッター・サイドバーはindex.phpと同様に呼び出します。

<?php get_header(); ?>
          <div class="col-md-8 blog-main">
            <h1>
              <?php
              // カテゴリ名を取得
              $category = get_the_category();
              echo $category[0]->cat_name;
              ?>
            </h1>
            <section class="archive">
            <ul>
              <?php if (have_posts()): while (have_posts()) : the_post(); ?>
              <li>
                <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </li>
              <?php endwhile;endif; ?>
            </ul>
            <nav class="pagination-area">
              <?php //the_posts_pagination(); 
              ?>
            </nav>
            </section>
          </div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php get_header(); ?>

<h1>

<?php

// カテゴリ名を取得

$category = get_the_category();

echo $category[0]->cat_name;

</h1>

<ul>

<?php if (have_posts()): while (have_posts()) : the_post(); ?>

<li>

</li>

<?php endwhile;endif; ?>

</ul>

<?php //the_posts_pagination();

</nav>

</section>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

6-3.画面表示を確認

カテゴリページのメインカラムに、対象カテゴリの記事タイトルが箇条書きされるようになりました。

6-4.実装答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme commit 1e8588de717cc1016611e64ca5b64c8a05960088

7.アーカイブページの作成

カテゴリページと同様にアーカイブページも作成していきます。

7-1.archive.phpを作成

archive.phpを作成します。

samle_theme/
├ archive.php　←追加
├ category.php
├ favicon.ico
├ footer.php
├ functions.php
├ header.php
├ index.php
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  ├ img/
│  │　└ arrow.png
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
├ sidebar.php
└ style.css

samle_theme/

├ archive.php　←追加

├ category.php

├ favicon.ico

├ footer.php

├ functions.php

├ header.php

├ index.php

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ ├ img/

│ │　└ arrow.png

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

├ sidebar.php

└ style.css

7-2.archive.phpを実装

以下のように実装します。
日付ごと、タグごとそれぞれでタイトルを出しわけられるようにしてあります。


<?php get_header(); ?>

          <div class="col-md-8 blog-main">
          <?php if ( have_posts() ) : ?>
            <header class="archive-header">
              <h1 class="archive-title"> <?php
                if ( is_day() ) :
                  // 必要に応じてフォーマッタを使用
                  printf( '日別アーカイブ：' . '<span>' . get_the_date() . '</span>' );
                elseif ( is_month() ) :
                  // 必要に応じてフォーマッタを使用
                  printf( '月別アーカイブ：' . '<span>' . get_the_date() . '</span>' );
                elseif ( is_year() ) :
                  // 必要に応じてフォーマッタを使用
                  printf( '年別アーカイブ：' . '<span>' . get_the_date() . '</span>' );
                elseif ( is_tag() ) :
                   printf(  '<span>' . single_tag_title('タグ：') . '</span>' );
                endif;
          ?> </h1>
          </header><!-- .archive-header -->
          <?php
          /* Start the Loop */
          while ( have_posts() ) : the_post(); ?>
              <article class="py-2">
              <header class="entry-header">
                <?php the_title( '<h3 class="entry-title">','</h3>' ); ?>
              </header>
              <div class="entry-content">
                <?php the_content( '続きを読む' ); ?>
              </div>
              </article>
              <?php endwhile; ?>
            <?php else : ?>
          <header class="archive-header">
           <h1 class="archive-title"> <?php
             printf( 'アーカイブ' );
            ?> </h1>
        </header><!-- .archive-header -->
        <p>該当記事なし。</p>
        <?php endif; ?>
      </div>

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

<?php get_header(); ?>

<?php if ( have_posts() ) : ?>

<h1 class="archive-title"> <?php

if ( is_day() ) :

// 必要に応じてフォーマッタを使用

printf( '日別アーカイブ：' . '<span>' . get_the_date() . '</span>' );

elseif ( is_month() ) :

// 必要に応じてフォーマッタを使用

printf( '月別アーカイブ：' . '<span>' . get_the_date() . '</span>' );

elseif ( is_year() ) :

// 必要に応じてフォーマッタを使用

printf( '年別アーカイブ：' . '<span>' . get_the_date() . '</span>' );

elseif ( is_tag() ) :

printf( '<span>' . single_tag_title('タグ：') . '</span>' );

endif;

?> </h1>

</header>

<?php

/* Start the Loop */

while ( have_posts() ) : the_post(); ?>

<?php the_title( '<h3 class="entry-title">','</h3>' ); ?>

</header>

<?php the_content( '続きを読む' ); ?>

</div>

</article>

<?php endwhile; ?>

<?php else : ?>

<h1 class="archive-title"> <?php

printf( 'アーカイブ' );

?> </h1>

</header>

<p>該当記事なし。</p>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

7-3.画面表示を確認

日付やタグのアーカイブページを表示した際に、以下のようになっていれば想定通りです。

7-4.実装答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme commit a40e0a7caeaf1e4bf888a7d0633c34b7d74e22d1

8.404ページの作成

指定されたコンテキストパスに対応するページが存在しない場合に表示する画面を作成します。

8-1.404.phpの作成

以下の場所に404.phpを作成します。

samle_theme/
├ 404.php　←追加
├ archive.php
├ category.php
├ favicon.ico
├ footer.php
├ functions.php
├ header.php
├ index.php
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  ├ img/
│  │　└ arrow.png
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
├ sidebar.php
└ style.css

samle_theme/

├ 404.php　←追加

├ archive.php

├ category.php

├ favicon.ico

├ footer.php

├ functions.php

├ header.php

├ index.php

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ ├ img/

│ │　└ arrow.png

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

├ sidebar.php

└ style.css

8-2.404.phpの実装

404.phpの実装はすごく簡単です。
ヘッダなどは他のページと同様に取得し、メインカラムに記事が存在しない旨を表示します。

<?php get_header(); ?>

<div class="col-md-8 blog-main">
  <h1>ページは見つかりませんでした。</h1>
</div>

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

<?php get_header(); ?>

<h1>ページは見つかりませんでした。</h1>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

8-3.画面表示確認

URLの末尾に?p=123456789など適当なクエリパラメータを付与してアクセスすると、以下のように表示されます。

8-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme commit 465c205ec57cd27d66e69f4450d35557ddb6ebb0

9.単一記事ページの作成

単一記事ページの画面を作成していきます。
これは、管理者画面にて「投稿」より作成したページが表示されます。

index.phpとほぼほぼ同じになりますので、そのつもりで実装確認して頂ければと思います。

9-1.single.phpの作成

samle_theme/
├ 404.php
├ archive.php
├ category.php
├ favicon.ico
├ footer.php
├ functions.php
├ header.php
├ index.php
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  ├ img/
│  │　└ arrow.png
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
├ sidebar.php
├ single.php　←追加
└ style.css

samle_theme/

├ 404.php

├ archive.php

├ category.php

├ favicon.ico

├ footer.php

├ functions.php

├ header.php

├ index.php

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ ├ img/

│ │　└ arrow.png

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

├ sidebar.php

├ single.php　←追加

└ style.css

9-2.single.phpの実装

以下の通り、記事タイトル・記事コンテンツ・コメントテンプレートを出力します。

<?php get_header(); ?>

          <div class="col-md-8 blog-main">
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <div class="breadcrumbs">
            <?php
              // パンくずリスト取得
              $categories = get_the_category();
              $separator = ' ＞ ';
              $output = '<a href="' .home_url() .'">' .'HOME' .'</a>';
              if ( $categories ) {
                foreach( $categories as $category ) {
                $output .=  $separator .'<a href="' . get_category_link( $category->term_id ) . '" title="' 
                   . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) 
                   . '">' . $category->cat_name . '</a>' ;
                }
                $output .=  $separator;
                echo $output;
              }
            ?> <?php the_title(); ?>
          </div>
          <?php the_title('<h1 class="mt-3">','</h1>'); ?>
          <?php the_content(); ?>
          <?php comments_template( '', true ); ?>
          <?php endwhile; endif; ?>
        </div>

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

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php

// パンくずリスト取得

$categories = get_the_category();

$separator = ' ＞ ';

$output = '<a href="' .home_url() .'">' .'HOME' .'</a>';

if ( $categories ) {

foreach( $categories as $category ) {

$output .= $separator .'<a href="' . get_category_link( $category->term_id ) . '" title="'

. esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) )

. '">' . $category->cat_name . '</a>' ;

}

$output .= $separator;

echo $output;

}

?> <?php the_title(); ?>

</div>

<?php the_title('<h1 class="mt-3">','</h1>'); ?>

<?php the_content(); ?>

<?php comments_template( '', true ); ?>

<?php endwhile; endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

9-3.画面の表示確認

以下の画像のように単一記事が表示されます。

9-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme commit cba3c123634cbd1e43f364190268a8c61c846b39

10.固定ページの作成

固定ページの画面を作成していきます。
これは、管理者画面にて「固定ページ」より作成したページが表示されます。
single.phpとほぼほぼ同じ実装となります。

10-1.page.phpの作成

page.phpを以下の場所に作成します。

samle_theme/
├ 404.php
├ archive.php
├ category.php
├ favicon.ico
├ footer.php
├ functions.php
├ header.php
├ index.php
├ page.php　←追加
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  ├ img/
│  │　└ arrow.png
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
├ sidebar.php
├ single.php
└ style.css

samle_theme/

├ 404.php

├ archive.php

├ category.php

├ favicon.ico

├ footer.php

├ functions.php

├ header.php

├ index.php

├ page.php　←追加

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ ├ img/

│ │　└ arrow.png

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

├ sidebar.php

├ single.php

└ style.css

10-2.page.phpの実装

以下の通り、page.phpを実装します。

<?php get_header(); ?>

          <div class="col-md-8 blog-main">
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <div class="breadcrumbs">
            <?php
              // パンくずリスト取得
              $separator = ' ＞ ';
              $output = '<a href="' .home_url() .'">' .'HOME' .'</a>';
              foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) {
                $output .=    $separator .'<a href="' . get_page_link( $parid ) . '" title="' 
                . esc_attr( sprintf( __( "View all posts in %s" ), get_page($parid)->post_title ) ) 
                . '">' . get_page($parid)->post_title . '</a>' ;
              }
              $output .= $separator;
              echo $output;
            ?> <?php the_title(); ?>
            </div>
            <?php the_title('<h1 class="mt-3">','</h1>'); ?>
            <?php the_content(); ?>
            <?php endwhile; endif; ?>
          </div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php

// パンくずリスト取得

$separator = ' ＞ ';

$output = '<a href="' .home_url() .'">' .'HOME' .'</a>';

foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) {

$output .= $separator .'<a href="' . get_page_link( $parid ) . '" title="'

. esc_attr( sprintf( __( "View all posts in %s" ), get_page($parid)->post_title ) )

. '">' . get_page($parid)->post_title . '</a>' ;

}

$output .= $separator;

echo $output;

?> <?php the_title(); ?>

</div>

<?php the_title('<h1 class="mt-3">','</h1>'); ?>

<?php the_content(); ?>

<?php endwhile; endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

10-3.画面の表示確認

固定ページにアクセスすると、以下のように表示されます。

10-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme commit 48b59897109d5e274c121894fe21358de77eea22

11.検索結果表示ページの作成

続いて検索結果のページです。

11-1.search.phpの作成

以下の場所に、search.phpを作成します。

samle_theme/
├ 404.php
├ archive.php
├ category.php
├ favicon.ico
├ footer.php
├ functions.php
├ header.php
├ index.php
├ page.php
├ static/
│  ├ css/
│  │  ├ bootstrap.css
│  │  ├ bootstap.min.css
│  │　└ custom.css
│  ├ img/
│  │　└ arrow.png
│  └ js/
│     ├ bootstrap.js
│     ├ bootstrap.min.js
│　　　└ custom.js
├ search.php　←追加
├ sidebar.php
├ single.php
└ style.css

samle_theme/

├ 404.php

├ archive.php

├ category.php

├ favicon.ico

├ footer.php

├ functions.php

├ header.php

├ index.php

├ page.php

├ static/

│ ├ css/

│ │ ├ bootstrap.css

│ │ ├ bootstap.min.css

│ │　└ custom.css

│ ├ img/

│ │　└ arrow.png

│ └ js/

│ ├ bootstrap.js

│ ├ bootstrap.min.js

│　　　└ custom.js

├ search.php　←追加

├ sidebar.php

├ single.php

└ style.css

11-2.search.phpの実装

実装は以下の通りです。

<?php get_header(); ?>

          <div class="col-md-8 blog-main">
          <?php 
            if( have_posts() ): ?>
                <h1 class="my-3">「<?php echo get_search_query(); ?>」の検索結果</h1>
          <?php while( have_posts() ):
                the_post();
          ?>
                <article id="post-<?php the_ID(); ?>" class="py-2">
                <header class="entry-header">
                  <?php the_title( '<h3 class="entry-title">','</h3>' ); ?>
                </header>
                <div class="entry-content">
                  <?php the_content( '続きを読む' ); ?>
                </div>
                </article>
          <?php endwhile; 
            else :
           ?> <p>表示する記事がありません。</p> <?php
           endif; 
          ?>
        </div>

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

<?php get_header(); ?>

<?php

if( have_posts() ): ?>

<h1 class="my-3">「<?php echo get_search_query(); ?>」の検索結果</h1>

<?php while( have_posts() ):

the_post();

<article id="post-<?php the_ID(); ?>" class="py-2">

<?php the_title( '<h3 class="entry-title">','</h3>' ); ?>

</header>

<?php the_content( '続きを読む' ); ?>

</div>

</article>

<?php endwhile;

else :

?> <p>表示する記事がありません。</p> <?php

endif;

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

11-3.画面表示確認

検索結果は以下のように表示されます。
この画面では「テスト」というワードで検索した結果です。

11-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme commit b6bf16968158c52e66254d2b0f9757d31e0eb14b

以上で、テーマをざっくりと作成できました！
他にも、自作可能だけど今回は作らなかったファイルが存在するため、以下に列挙しておきます。

その他の自作可能なファイル

attachment.php
author.php
comments.php
date.php
front-page.php
rtl.css
home.php
image.php
screenshot.png
searchform.php
single-.php
tag.php
taxonomy.php

ワードプレスのテーマを自作する手順

必要な技術要素

前提

手順

1.とりあえずトップページを表示可能にする

1-1.最小限のファイルの作成

1-2.style.cssの実装

1-3.index.phpの実装

1-4.ソースの答え合わせ

2.JavaScript/CSSのライブラリを導入

2-1.ライブラリ取得

2-2.ライブラリ配置

2-3.オリジナルのcss/jsファイルを作成

ソースの答え合わせ

3.オリジナルのヘッダーを作成

3-1.header.phpを作成

3-2.header.phpを実装

3-3.ヘッダー・ファビコン表示に必要な画像ファイルを配置

3-4.画面表示確認

3-5.ソースの答え合わせ

4.オリジナルのフッターを作成

4-1.footer.phpを作成

4-2.footer.phpを実装

4-3.画面表示確認

4-4.ソースの答え合わせ

5.indexのメインカラム・サイドバーを作成

5-1.index.phpを実装

5-2.functions.php/sidebar.phpを作成

5-3.function.phpを実装

5-4.sidebar.phpを実装

5-5.画面表示確認

5-6.ソースの答え合わせ

6.カテゴリページの作成

6-1.category.phpの作成

6-2.category.phpの実装

6-3.画面表示を確認

6-4.実装答え合わせ

7.アーカイブページの作成

7-1.archive.phpを作成

7-2.archive.phpを実装

7-3.画面表示を確認

7-4.実装答え合わせ

8.404ページの作成

8-1.404.phpの作成

8-2.404.phpの実装

8-3.画面表示確認

8-4.ソースの答え合わせ

9.単一記事ページの作成

9-1.single.phpの作成

9-2.single.phpの実装

9-3.画面の表示確認

9-4.ソースの答え合わせ

10.固定ページの作成

10-1.page.phpの作成

10-2.page.phpの実装

10-3.画面の表示確認

10-4.ソースの答え合わせ

11.検索結果表示ページの作成

11-1.search.phpの作成

11-2.search.phpの実装

11-3.画面表示確認

11-4.ソースの答え合わせ

その他の自作可能なファイル

コメントはこちらから コメントをキャンセル

ADRESS

MORE INFO

TWEET

コメントはこちらからコメントをキャンセル