概要

はじめての自作テーマは
これ1冊で大丈夫！
作りながら学べる入門書です。

WordPressを使った案件で，オリジナルテーマを作りたい，作らなければならなくなった。そんな時，HTMLやCSSはわかるけど，PHPは…。そもそもテーマってどうやって作ればいいの？そんな皆さんのために，本書はサンプルファイルとステップ解説で，テーマの自作方法を丁寧に解説。あらかじめ用意されたHTMLファイルをPHPファイルへと落とし込み，CSSを適用。ブロックエディターに対応したテーマを作成します。これ1冊で，オリジナルテーマの作り方がしっかり学べます！

こんな方におすすめ

• WordPressのテーマを自作したいWeb制作者

目次

第1章　WordPressとは？

• Step01　WordPressはCMSの1つ
• Step02　なぜWordPressを選ぶのか？
• Step03　静的ウェブサイトとWordPressで作成したウェブサイトの違い
• Column WordPressのライセンス

第2章　テーマ作成に必要な基礎知識

• Step01　WordPressのテーマとは？
• Step02　テーマのフォルダー構成
• Step03　テンプレートファイルとは
• Step04　PHPのしくみと書き方を知る
• Step05　WordPressにおけるタグとは
• Step06　WordPressのループとは？
• Step07　フックとは？
• Column テーマ開発者のためのハンドブック

第3章　オリジナルテーマの開発環境を準備する

• Step01　Localをインストールして基本的な使い方を知る
• Step02　WordPressの初期設定を行う
• Step03　プラグインの選定とインストール
• Step04　サンプルページを作成する

第4章　最低限のテーマを作成しWordPressに認識させる

• Step01　テーマフォルダーを作成する
• Step02　テーマに必要なファイルを作る
• Step03　テーマの表示を整える
• Step04　画像・CSS・JavaScriptを準備する

第5章　ウェブサイト作成の基本となるテンプレートファイルを作成しよう

• Step01　ウェブサイトの共通部分を作成する
• Step02　固定ページ用のテンプレートファイルを作成する
• Step03　投稿ページ用のテンプレートファイルを作成する
• Step04　アーカイブページ用のテンプレートファイルを作成する
• Step05　ナビゲーションを作成する
• Step06　フロントページ用のテンプレートを作成する
• Column テーマ作成のセキュリティ対策について

第6章　ウェブサイトの利便性を向上する

• Step01　サイト内検索をできるようにする
• Step02　404ページを作成する
• Step03　パンくずリストを作成する
• Step04　前後の投稿へのリンクを追加する
• Step05　ウィジェットエリアを追加する
• Column コメントを受け付けたいと思ったら

第7章　テーマをブロックエディターに対応させる

• Step01　テーマをブロックエディターに対応させる
• Step02　コアブロックのスタイルを独自に追加する
• Step03　ブロックパターンを削除・追加する
• Column ブロックエディターとGutenbergプロジェクト
• Column カスタムフィールドは本来の使い方へ

第8章　ウェブサイトの機能を拡張する

• Step01　カスタム投稿タイプを追加してコンテンツを拡張する
• Step02　カスタム投稿タイプに独自の分類を追加する
• Step03　カスタム投稿タイプに関連する部分の表示を整える
• Step04　カスタムページテンプレートで個別にデザインを変更する
• Step05　投稿インデックスページを作成する
• Step06　フロントページをブロックエディター化する　その1〜固定ページの指定とブロックの配置
• Step07　フロントページをブロックエディター化する　その2〜ショートコードブロックの活用
• Column WordPressへの理解をより深めるために

サポート

ダウンロード

サンプルファイルについて

本書のサンプルファイルは以下よりダウンロードできます。

サンプルファイルのデータは圧縮ファイル形式（zip）となっているため，ファイルダウンロード後はデスクトップなどに展開してご利用ください。

ダウンロード

サンプルファイル（kuroneko_sample_0607.zip）

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

P.275　functions.php　下から7行目

'フッターのサイドバー'

'フッターのウィジェットエリア'

P.132　出力場所（任意）

wp_header

wp_head()

P.205　loop-post.php　4行目

<?php if(has_post_thumbnail()): ?>a

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

「a」は不要です。

P.280　2行目

P.230　関数名

P.254　書き換え後のコード（黄色）３行目

P.307〜308

.wp-block-button__link {
	text-decoration: none;
	border-radius: 0.2em;
	opacity: 1;
	transition: all 0.2s ease-in-out;
	font-family: "Noto Sans JP", sans-serif;
	padding: 1em;
	display: inline-block;
	background-color: #FFFFFF;
	color: #00A1C6;
	border: 1px solid #00A1C6;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: #00A1C6;
	color: #FFFFFF;
}

.wp-block-button__link {
	text-decoration: none;
	border-radius: 0.2em;
	opacity: 1;
	transition: all 0.2s ease-in-out;
	font-family: "Noto Sans JP", sans-serif;
	padding: 1em;
	display: inline-block;
	background-color: #FFFFFF;
	color: #00A1C6;
	border: 1px solid #00A1C6;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:visited {
	background-color: #00A1C6;
	color: #FFFFFF;
}

.wp-block-button__link:visited {
	color: #00A1C6;
	background-color: #FFFFFF;
}

.wp-block-button__link:hover {
	background-color: #00A1C6;
	color: #FFFFFF;
	filter: contrast(150%);
}

P.318　エスケープ処理ツールURL

P.387　書き換え前コード（水色）３行目

赤字ではなく黒字です。「記述を削除する」の指示は4行目から開始します。

P.399　完成コード

<?php get_header(); ?>
<main class="main">
<?php
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        the_content();
    }
}
?>
</main>
<?php get_footer(); ?>

<?php get_header(); ?>
<main class="main">
    <div class="container-fluid">
<?php
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        the_content();
    }
}
?>
    </div>
</main>
<?php get_footer(); ?>

P.402　functions.php コード内最終行

$neko_news_html .= '</ul></div></a></article>';

$neko_news_html .= '</li></ul></div></a></article>';

P.409 functions.php コード内8行目

$neko_news_html .= '</ul></div></a></article>';

$neko_news_html .= '</li></ul></div></a></article>';