無料のブログ向けWordPressテーマ

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

WordPressテーマの作り方

Colors Themes

WordPressテーマの作り方

WordPressテーマの作り方を紹介しています。
まず、全体を仮完成させて、その後、細部を作りこんでいきます。

目次

  • ローカル環境で開発
  • Underscoresについて
  • シンプルなブログテーマの作り方
  • フッターにウィジェットエリアを追加する
  • カスタマイザーでカラーを変更する
  • テーマのデザインを改良する
  • 追加コードを分割管理する
  • Theme Checkプラグインのエラーをなくす
  • テーマ制作に関するFAQ

ローカル環境で開発

「LOCAL」を使用して、ローカル環境で開発します。
https://lucy.ne.jp/bazubu/how-to-create-local-environment-23801.html

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

Underscoresについて

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

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', Helvetica, Arial, 'Yu Gothic', '游ゴシック Medium', sans-serif;
	font-weight: 500;
}

/* 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. シンプルなブログテーマの完成

基本的な機能を備えたブログテーマの完成です。
投稿ページ、固定ページ、アーカイブページ、メニュー、モバイルメニューも機能します。

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

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

テーマ内の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' );

注意
関数名が重複しないように、テーマ名（スラッグ）の接頭辞（プレフィックス）を追加します。

footer.phpのウィジェットを表示したい場所に以下のコードをコピペします。

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

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

カスタマイザーで、テーマのカラーを変更できるようにします。
ここでは、リンクのホバーカラーを変更できるようにしてみます。

テーマ内の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部分を変更します。

  • ヘッダー：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ファイルの場合

  1. テーマ内にcssフォルダを作成して、その中にsample.cssファイルを追加します。
  2. テーマ内のjsフォルダ内に、sample.jsファイルを追加します。
  3. functions.phpを開いて以下の関数を探し、該当箇所に赤色のコードを追加します。

※赤色のコードだけを追加します。全体をコピペすると関数名の重複でエラーとなります。

function sample_scripts() {
	wp_enqueue_style( 'sample-css', get_theme_file_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' );

	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' );
	}
	wp_enqueue_script( 'sample-js', get_theme_file_uri( '/js/sample.js' ), array(), _S_VERSION, true );
}
add_action( 'wp_enqueue_scripts', 'sample_scripts' );

PHPファイルの場合

  1. incフォルダ内にsample.phpファイルを追加します。
  2. functions.phpに以下のコードを追加します。
require get_theme_file_path( '/inc/sample.php' );

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

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

テーマ内の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. なぜUnderscoresを使うのですか？

手本コードをベースに制作できるので品質や安全面の底上げができます。完成したテーマも多くの人が理解しやすい構成になります。手本コードが詰まっているので学習にも最適です。

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

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

Q4. HTMLサイトのWordPressテーマ化もできますか？

HTMLサイトをWordPressテーマとして表示させるだけであればここで紹介した方法の延長でできますが、カスタマイズ性を持たせるとなると相当大変な作業が必要になります。

この記事を書いた人

Colors Themes

無料のWordPressテーマ「Clock」と、多目的タイプのWordPressテーマ「Silent」の開発者です。

関連記事

  • 条件に合う投稿はありません