書籍概要

WordPressオリジナルテーマ制作入門

著者
発売日
更新日

概要

はじめての自作テーマは
これ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への理解をより深めるために

サポート

ダウンロード

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

(2022年6月7日最終更新)

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

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

ダウンロード
サンプルファイル(kuroneko_sample_0607.zip)

正誤表

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

(2022年5月9日最終更新)

P.230 関数名

wp_rest_postdata()
wp_reset_postdata()

(以下2022年4月20日更新)

P.254 書き換え後のコード(黄色)3行目

<?php echo esc_url( home_url(); ?>
<?php echo esc_url( home_url()); ?>

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

JSON Escape BestOnline Tool(https://w3tools.org/json-escape)
JSON Escape and JSON Unescape Online Tool(https://codebeautify.org/json-escape-unescape

P.387 書き換え前コード(水色)3行目

<div class="container-fluid">
<div class="container-fluid">

赤字ではなく黒字です。「記述を削除する」の指示は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(); ?>

(以下2022年3月24日更新)

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>';

商品一覧