WordPressテーマ制作の備忘録

テーマ開発
  1. Home
  2. テーマ開発  /  
  3. WordPressテーマの作り方

WordPressテーマの作り方

Colors Themes

WordPressテーマの作り方

WordPressテーマ（クラシックテーマ）の作り方を紹介しています。
最初に全体を仮完成させて、その後、細部を作りこんでいきます。

準備

ローカル環境で開発します。
https://lucy.ne.jp/bazubu/how-to-create-local-environment-23801.html

文字化けしないように、文字コードUTF-8（BOMなし）で保存できるテキストエディタを使用します。
Visual Studio Code　/　Mery（Windows用）

Underscoresについて

スターターテーマの「Underscores」をベースにして制作します。

  • Automattic社が開発しています。
  • スターターテーマ、ブランクテーマです。
  • _s とも表記されます。
  • 開発時間の大幅な短縮が可能です。
  • 本格的なテーマ制作が可能です。
  • ガイドラインに沿った標準的なテーマ制作が可能です。
  • 手本コードをベースに制作できるので、品質やセキュリティ面の底上げができます。
  • 手本コードが詰まっているので学習にも最適です。
  • 完成したテーマも多くの人が理解しやすい構成になります。

全体を仮完成させます

1. Underscoresのダウンロード

  1. Underscoresの公式サイトにアクセスします。
  2. 好きなテーマ名を入力して、「GENERATE」ボタンを押します。
  3. ここではテーマ名をSampleとします。
  4. ダウンロードしたsample.zipファイルを解凍します。

2. style.cssにコードを追加

テーマ内のstyle.cssファイルの最下部に以下のコードをコピペします。

/* ----------------------------------------------------------------------
	# Sample
---------------------------------------------------------------------- */
body {
	position: relative;
	overflow-x: hidden;
	background: #f7fbff;
	margin: 0;
	text-align: left;
	font-size: 1rem;
	line-height: 1.8;
	font-weight: normal;
	color: #334466;
	font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
	font-weight: 400;
}

/* Header */
.site-header {
	padding: 50px 0;
	width: 100% !important;
}

.site-branding {
	padding: 20px 0;
}

/* Entry */
.entry-meta {
	padding: 20px 0;
}

.entry-meta .posted-on,
.entry-meta entry-date.published,
.entry-meta entry-date.updated,
.entry-meta entry-date.byline {
	padding: 20px 10px 20px 0;
}

.entry-footer .cat-links,
.entry-footer .tags-links,
.entry-footer .comments-link {
	padding: 20px 10px 20px 0;
}

/* Menu */
.main-navigation {
	padding: 30px;
	background: #fff;
	width: 100%;
}

.main-navigation ul li {
	padding: 0 20px;
	display: block;
	float: none;
}

.main-navigation ul li a {
	display: block;
	float: none;
}

.main-navigation ul ul {
	display: block;
	float: none;
	padding: 30px;
	background: #fff;
}

.main-navigation ul ul li {
	padding: 10px;
}

/* Mobile Menu */
@media screen and (min-width: 992px) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}

}

@media screen and (max-width: 991px) {

	.main-navigation {
		background: rgba(255, 255, 255, 0);
	}

	.menu-toggle {
		display: block;
	}

	.main-navigation ul {
		display: none;
	}

}

/* Layout */
.site {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background: #f7fbff;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

@media (min-width: 576px) {

	.site {
		max-width: 540px;
	}

}

@media (min-width: 768px) {

	.site {
		max-width: 720px;
	}

}

@media (min-width: 992px) {

	.site {
		max-width: 960px;
	}

}

@media (min-width: 1200px) {

	.site {
		max-width: 1140px;
	}

}

.site-main {
	position: relative;
	width: 100%;
	min-height: 1px;
	background: #f7fbff;
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.site-main article {
	background: white;
	padding: 50px;
	margin-bottom: 50px;
}

.widget-area {
	position: relative;
	width: 100%;
	min-height: 1px;
	background: #f7fbff;
	padding: 0 30px 50px;
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.widget-area .widget ul {
	padding: 20px;
	margin: 0;
}

@media (max-width: 992px) {

	.site-main {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	.widget-area {
		display: block;
	}

}

/* Page */
.page .site-main {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

.page .widget-area {
	display: none;
}

3. page.phpから一行を削除

固定ページでサイドバーを表示しないようにします。
テーマ内のpage.phpファイルから以下の1行を削除します。

get_sidebar();

4. WordPressテーマの完成

基本的な機能を備えたWordPressテーマの完成です。
投稿ページ、固定ページ、アーカイブページ、メニュー、モバイルメニューも機能します。
ここから以下は、仮完成したテーマの細部を作りこむ作業になります。

フッターにウィジェットエリアを追加する

Underscoresはサイドバーにウィジェットエリアが追加されています。
ここでは、フッターにウィジェットエリアを追加します。

1. footer.phpに以下のコードをコピペします。

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

2. functions.phpに以下のコードをコピペします。

function sample_footer1_widgets_init() {
	register_sidebar(
		array(
			'name'          => esc_html__( 'Footer1', 'sample' ),
			'id'            => 'footer-1',
			'description'   => esc_html__( 'Add widgets here.', 'sample' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);
}
add_action( 'widgets_init', 'sample_footer1_widgets_init' );

注意
関数名が重複しないように、テーマのスラッグ（赤色部分）を接頭辞として追加します。

カスタマイザーでカラーを変更する

公式ディレクトリのテーマでは、「設定」は「カスタマイザー」を使用します。
ここでは、リンクのホバーカラーをカスタマイザーから変更できるようにします。

functions.phpに以下のコードをコピペします。

function sample_theme_customizer_color( $wp_customize ) {
	$wp_customize->add_section( 'sample_theme_color_section', array(
		'title' => esc_html__( 'Theme Color', 'sample' ),
		'priority' => 21,
	) );
	$wp_customize->add_setting( 'sample_theme_color', array(
		'type'              => 'theme_mod',
		'default'           => '#e58722',
		'sanitize_callback' => 'sanitize_hex_color',
	) );
	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sample_theme_color', array(
		'label'       => esc_html__( 'Theme Color', 'sample' ),
		'section'     => 'sample_theme_color_section',
		'settings'    => 'sample_theme_color',
	) ) );
}
add_action( 'customize_register', 'sample_theme_customizer_color' );


function sample_theme_customizer_css() {
?>
<style>
a:hover, a:focus, a:active { color: <?php echo esc_html( get_theme_mod( 'sample_theme_color', '#e58722' ) ); ?>; }
</style>
<?php
}
add_action( 'wp_head', 'sample_theme_customizer_css' );

注意
ユーザーが入力した内容を出力するときはセキュリティ面に注意する必要があります。
ここでは赤色の部分でサニタイズとエスケープ（文字列の無害化）を行っています。

テーマのデザインを改良する

テーマのデザインを変更するには、PHPファイルにHTMLを追加して、style.cssにCSSを追加します。
上記でテーマを仮完成させるために追加したCSSは消しても大丈夫です。

  • ヘッダー：header.php
  • フッター：footer.php
  • サイドバー：sidebar.php
  • 投稿一覧ページ：index.php
  • シングルページ：single.php と template-parts/content.php
  • 固定ページ：page.php と template-parts/content-page.php
  • アーカイブページ：archive.php と template-parts/content-archive.php
  • 404ページ：404.php

追加コードを分割管理する

テーマ内のstyle.cssとfunctions.phpにコードを追加していくと肥大化していきます。
ファイルを分割管理したい場合は以下のように書きます。

CSSファイル、JavaScriptファイルの場合
「css/sample.css」と「js/sample.js」ファイルを追加したい場合は、funcstions.phpに以下のように書きます。以下のようにsample_scripts()関数に黄色マーカーのコードを追加します。

function sample_scripts() {
	// CSS
	wp_enqueue_style( 'sample-css', get_template_directory_uri() . '/css/sample.css', array(), _S_VERSION );
	wp_enqueue_style( 'sample-style', get_stylesheet_uri(), array(), _S_VERSION );
	wp_style_add_data( 'sample-style', 'rtl', 'replace' );
	// JS
	wp_enqueue_script( 'sample-js', get_template_directory_uri() . '/js/sample.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'sample-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'sample_scripts' );

PHPファイルの場合
「inc/sample.php」ファイルを追加したい場合は、funcstions.phpに以下のように書きます。

require get_template_directory() . '/inc/sample.php';

Theme Checkプラグインのエラーをなくす

Theme Check プラグインは、公式ディレクトリ掲載テーマのレビューでも使用されているチェッカーです。
以下の作業を行うと殆どのエラーが解消されてテストにも通過します。

テーマ内のphpcs.xml.distファイルを削除します。
テーマ内のREADME.mdファイルを削除します。
style.cssファイルのコメント欄の「underscores」の記述3個を変更します。
footer.phpファイル内の<a href='http://underscores.me/'>Underscores.me</a>を変更します。
language/sample.poファイルをエディタで開いて「underscores」の記述2個を変更します。
テーマフォルダ内にeditor-style.cssを作ります（中身は空白にしておきます）。
functions.phpを開いて以下の関数を探し、該当箇所に赤色のコードを追加します。
※赤色のコードだけを追加します。全体をコピペすると同じ関数名でエラーとなります。

function sample_setup() {
	add_theme_support( 'responsive-embeds' );
	add_theme_support( 'align-wide' );
	add_theme_support( 'wp-block-styles' );
	add_theme_support( 'editor-styles' );
	add_editor_style( 'editor-style.css' );
}

テーマ制作に関するFAQ

Q1. ブロックテーマとクラシックテーマとは？

フルサイトエディティング（FSE）対応のテーマを「ブロックテーマ」、それ以外を「クラシックテーマ」と分類するようです。この記事はクラシックテーマの作り方となります。

Q2. テーマ制作を学ぶのは無駄ですか？

ここで紹介したのはテーマ制作の入り口に過ぎませんが、取り組み続けるとテーマが完成するだけでなく、カスタマイズ力がついたり、情報の真偽を見分ける力がついたりもします。

この記事を書いた人

Colors Themes

WordPressテーマを制作しています。配色、レイアウト、文字数、画像サイズ等の変更に柔軟に対応できるよう、汎用性の高いデザインでの制作を心がけています。

関連記事

  • TACプラグインテスト
  • Bootstrap v4からv5への移行
  • アップデートチェッカーとアップデートサーバー
  • Theme Checkプラグインテスト