
WordPressのオリジナルテーマを作成してみたいと思っていても、wordpressテーマの自作は難しいと考えている人がほとんどだと思います。
Amazonに「WordPressテーマの作り方」と言うkindle版があったので、ご紹介してみようと思います。
グーテンベルク時代のWordPressノート テーマの作り方 Kindle版
グーテンベルク時代のWordPressノート テーマの作り方(入門編) (EP NOTE SERIES) [プリント・レプリカ] Kindle版
WordPressのブロックエディタ「Gutenberg」を活かしたオリジナルテーマの作成方法をステップ・バイ・ステップで解説。レイアウトにはCSSグリッドを使用し、ゼロからしっかりサイトを構築していきます。本書は、テーマの作成を通してWordPressの基本的な仕組みや機能を習得していただけるように構成し、グーテンベルクとの付き合い方や、ブロックが持つHTMLとCSSの扱いなどについて詳しく解説しています。
2019/5/17に発売されたこの書籍は、一般的な2カラムのテーマ作成します。ブロックエディタ「Gutenberg」のポテンシャルを引き出すテーマの作成に必要なことが、しっかりと詰め込まれています。
・ WordPressを使ったサイト構築・テーマ作成の基本を学びたい方
・ WordPressレッスンブックを読まれた方
・ グーテンベルクに対応したテーマ作成に興味がある方
といった方はもちろん、これまでのWordPressの知識をリニューアルしたい方にもきっと役立つ内容になっています。
〈章構成〉
■ Chapter 1 本書で作成するサンプル
■ Chapter 2 WordPressのインストールと基本設定
■ Chapter 3 テーマ作成の準備 – コンテンツの投稿とメニューの作成
■ Chapter 4 テーマの作成 – 5つのパーツの出力
■ Chapter 5 テーマの作成 – パーツのデザインとレイアウト
■ Chapter 6 テーマの作成 – ページの種類ごとのカスタマイズ
■ Chapter 7 テーマの仕上げ
グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編) Kindle版
WordPressのブロックエディタ「Gutenberg」を使う方法、使わない方法の両方で、ランディングページ&1カラムサイトの作成方法を解説。ステップ・バイ・ステップで作成していく中で、これまで以上に自由に作り込んでいけること、制作方法の選択肢が増えたことなどを実感していただけるのではないかと思います。
2019/7/16に発売されたこの書籍は、上記で紹介した入門編で作成したテーマをベースに、一般的にLPと呼ばれる1カラムのテーマを作成します。
・最新のWordPressによるランディングページ&1カラムサイトの作成
・広い画面全体を活かした全幅・幅広のレイアウト
・ブロックスタイルによるブロックのデザインアレンジ
・再利用ブロックの活用
などを習得していただける内容になっています。
〈章構成〉
■ Chapter 1 多様なブロックへの対応力をつけるためのテーマ修正
■ Chapter 2 1カラムレイアウトに再構築
■ Chapter 3 ブロックスタイルの活用
■ Chapter 4 ランディングページのデザインの検討
■ Chapter 5 ランディングページの作成 – 従来のスタイル
■ Chapter 6 ランディングページの作成 – グーテンベルクを活用するスタイル
■ Chapter 7 WordPressによるページ制作
■ APPENDIX
WordPress Gutenberg(ブロックエディタ)について
WordPressのGutenbergは、WordPressのバージョン5.0から標準搭載された、ブロックエディタと呼ばれる新しい編集画面です。Gutenbergは、従来のWordPressの編集画面とは異なり、コンテンツをブロックと呼ばれる単位に分け、それぞれのブロックを編集することができるようになりました。
Gutenbergの主な特徴としては、以下のようなものが挙げられます。
- ブロックエディタ:Gutenbergでは、コンテンツをブロックとして扱います。テキスト、画像、ビデオなど、さまざまな種類のブロックが用意されており、それぞれのブロックを自由に配置・編集することができます。
- カスタマイズ性の向上:Gutenbergでは、カスタマイズが容易になりました。新しいブロックを追加するために、カスタムブロックを作成することもできます。
- テーマによるサポート:Gutenbergは、WordPressテーマの制作者によってサポートされています。テーマによっては、特定のブロックをサポートすることができるため、テーマとの親和性が高くなっています。
- コードの再利用性:Gutenbergでは、ブロックをカスタムコードとして保存することができます。このため、同じコンテンツを再利用する場合に便利です。
Gutenbergは、WordPressの編集画面の大幅な変更をもたらしたため、一部のユーザーからは批判されることもありますが、WordPressの未来を担う技術として期待されています。また、Gutenbergによって、より直感的で使いやすい編集体験が提供されることになると考えられます。
Gutenbergを使わないと言う選択をしたClassicPress

ClassicPressは、WordPressの派生版であり、WordPressのバージョン5.0で導入された新しいブロックエディター「Gutenberg」を含まない、従来の編集画面を使用することができるCMS(コンテンツ管理システム)です。
WordPressのバージョン5.0で導入されたGutenbergは、一部のユーザーから批判されたため、ClassicPressは、WordPressの従来のエディターを維持しながら、最新の安全性更新や機能強化などのメンテナンスを提供することを目的としています。
ClassicPressは、WordPressのプラグイン、テーマ、およびコードを使用して開発されており、従来のWordPressに似たデザインと機能を提供します。ClassicPressは、自社のウェブサイトを維持するために、従来の編集画面を好むユーザーや、WordPressの変化に追いつくことが困難な企業や組織などに適しています。
ClassicPressは、WordPressと同じように、オープンソースのソフトウェアであり、ユーザーは自由に使用することができます。ClassicPressの開発は、WordPressと同じように、コミュニティによって支えられています。
ただし、ClassicPressはWordPressの派生版であるため、WordPressと同じように、適切なセキュリティプラクティスを確保する必要があります。また、ClassicPressは、WordPressに比べてプラグインやテーマの選択肢が限られているため、これらの制限に対して考慮する必要があります。
公式サイト https://www.classicpress.net/
WordPressテーマとは?
WordPressテーマとは、WordPressで使用されるウェブサイトの外観を設定するためのテンプレートファイルやスタイルシート、画像などのファイルの集合体です。
WordPressテーマは、ウェブサイトのデザイン、レイアウト、色、フォントなどの外観を決定するために使用されます。WordPressには、デフォルトのテーマ(Twenty Twenty-Oneなど)がいくつか用意されていますが、ユーザーはこれらのテーマをカスタマイズすることも、独自のテーマを作成することもできます。
WordPressテーマには、PHP、HTML、CSS、JavaScriptなどのコードが含まれます。これらのファイルを編集することで、ウェブサイトの外観や動作を変更することができます。また、WordPressテーマには、ウィジェットやメニュー、ページテンプレートなどの機能を追加することもできます。
WordPressテーマは、外観だけでなく、ウェブサイトの機能にも影響を与えます。たとえば、特定のテーマには特定のカスタマイズ用の機能が付属しており、これらの機能を利用することで、ウェブサイトの機能性を拡張することができます。
WordPressテーマは、WordPressのコミュニティから多数の無料や有料のものが提供されており、独自のテーマを作成することも可能です。自社のブランドやデザインに合わせたテーマを作成することで、独自性の高いウェブサイトを構築することができます。
WordPressテーマを自作する手順
WordPressのテーマを自作することは、ウェブ開発者にとって非常に有用であり、WordPressでのカスタムデザインのニーズに応えることができます。以下は、WordPressテーマの自作に関する基本的な手順です。
- 開発環境をセットアップする
WordPressテーマを作成するには、ローカル環境でWordPressをセットアップする必要があります。XAMPPやMAMPなどのローカル開発環境を使用すると、WordPressを自分のコンピューター上で実行することができます。 - 基本的なWordPressファイル構造を理解する
WordPressのテーマは、PHP、CSS、JavaScript、画像、およびその他のリソースを含むフォルダーのセットです。WordPressの公式サイトからダウンロードできる「_s(アンダースコアs)」というスケルトンテーマを使用すると、基本的なWordPressファイル構造を学ぶことができます。 - テーマファイルを作成する
WordPressテーマの最初のステップは、functions.phpファイルを含む基本的なファイルセットを作成することです。また、index.php、style.css、header.php、footer.phpなど、テーマに必要なファイルを作成する必要があります。これらのファイルを作成するために、基本的なHTML、CSS、JavaScript、およびPHPの知識が必要です。 - WordPressループを作成する
WordPressテーマを作成するには、WordPressループを理解する必要があります。WordPressループは、WordPressがデータベースから投稿やページを取得する方法です。WordPressテーマでループを作成することにより、WordPressの投稿やページのデータを表示することができます。 - テーマをデザインする
WordPressテーマの最後のステップは、CSSとJavaScriptを使用してテーマをデザインすることです。WordPressテーマで使用するスタイルシートを作成し、必要に応じてJavaScriptを使用してテーマを動的にすることができます。
以上が、WordPressテーマの自作の基本的な手順です。しかし、実際にはこれ以上の作業が必要になる場合もあります。
自作テーマを公開する前に、テーマがWordPressの最新バージョンと互換性があることを確認することが重要です。また、セキュリティにも十分に注意することが必要です。
WordPressオリジナルテーマ制作入門 – 2022/1/13
WordPressを使った案件で、オリジナルテーマを作りたい、作らなければならなくなった。本書はサンプルファイルとステップ解説で、テーマの自作方法を丁寧に解説。
あらかじめ用意されたHTMLファイルをPHPファイルへと落とし込み、CSSを適用。ブロックエディターに対応したテーマを作成します。これ1冊で、オリジナルテーマの作り方がしっかり学べます!
自作テーマに必要なページ
主に、図のような感じで作られていますので、それぞれのファイルについて説明します。
header.php
ウェブサイトのヘッダー部分を定義するために使用されるテンプレートファイルです。このファイルには、ウェブサイトのタイトル、メニュー、ロゴ、ヘッダー画像などが含まれます。
通常、header.phpはWordPressテーマのルートディレクトリに置かれます。WordPressがページを表示する際には、header.phpが自動的に読み込まれ、ウェブサイトのヘッダー部分が表示されます。
header.phpには、WordPressのメニューシステムを呼び出すための関数が含まれます。これにより、管理画面で作成したメニューを表示することができます。また、header.phpには、ウェブサイトのタイトルや説明を表示するための関数も含まれます。
また、header.phpには、ウェブサイトのロゴやヘッダー画像を表示するためのコードが含まれる場合があります。これにより、テーマをカスタマイズする際に、ウェブサイトのロゴやヘッダー画像を変更することができます。
WordPressのテーマにおいて、header.phpはウェブサイトのヘッダー部分を定義するために必要不可欠なテンプレートファイルです。テーマ制作においては、このテンプレートファイルを基礎として、独自のカスタマイズを追加することができます。
index.php
WordPressのテーマにおいて、index.phpは最も基本的なページテンプレートの1つです。WordPressの投稿やページが表示されるページの構造を定義するために使用されます。
具体的には、WordPressの投稿や固定ページを表示するためのページテンプレートとして使用されます。通常、テーマディレクトリのルートにindex.phpが置かれ、WordPressがページを表示する際には、このテンプレートファイルが自動的に読み込まれます。
index.phpには、WordPressループを含めることができます。WordPressループは、WordPressが投稿やページのデータを取得する方法を定義します。また、index.phpには、ヘッダーやフッターを呼び出すための関数が含まれる場合があります。
WordPressのテーマにおいて、index.phpは最も基本的なページテンプレートであり、WordPressの投稿やページを表示するために必要不可欠なテンプレートファイルです。テーマ制作においては、このテンプレートファイルを基礎として、独自のカスタマイズを追加することができます。
page.php
ページを表示するためのテンプレートファイルの一つです。WordPressでは、ページは投稿とは異なり、コンテンツを静的に表示するために使用されます。例えば、ウェブサイトの「About us」ページや「Contact us」ページなどがこれにあたります。
page.phpファイルは、WordPressがページを表示する際に読み込まれるテンプレートファイルであり、WordPressテーマの重要な構成要素の一つです。page.phpファイルには、通常、ページのタイトル、本文、コメントセクション、投稿者情報、タグ、カテゴリーなどの情報を表示するためのコードが含まれます。
page.phpファイルは、WordPressテーマの他のテンプレートファイルと同様に、テーマをカスタマイズする際に重要な役割を果たします。ページのデザインを変更する場合や、ページごとに異なるレイアウトを適用する場合には、このファイルを編集することが必要になる場合があります。
なお、WordPressテーマには、page.phpファイル以外にも、さまざまな種類のテンプレートファイルが用意されており、それぞれ異なるページタイプを表示するために使用されます。例えば、投稿を表示するためのsingle.phpや、カテゴリーページを表示するためのcategory.phpなどが挙げられます。
single.php
投稿を表示するためのテンプレートファイルの一つです。WordPressでは、投稿はコンテンツを時系列順に表示するために使用されます。例えば、ウェブサイトのブログ記事などがこれにあたります。
single.phpファイルは、WordPressが投稿を表示する際に読み込まれるテンプレートファイルであり、WordPressテーマの重要な構成要素の一つです。single.phpファイルには、投稿のタイトル、本文、コメントセクション、投稿者情報、タグ、カテゴリーなどの情報を表示するためのコードが含まれます。
single.phpファイルは、WordPressテーマの他のテンプレートファイルと同様に、テーマをカスタマイズする際に重要な役割を果たします。投稿のデザインを変更する場合や、投稿ごとに異なるレイアウトを適用する場合には、このファイルを編集することが必要になる場合があります。
なお、WordPressテーマには、single.phpファイル以外にも、さまざまな種類のテンプレートファイルが用意されており、それぞれ異なるページタイプを表示するために使用されます。例えば、固定ページを表示するためのpage.phpや、カテゴリーページを表示するためのcategory.phpなどが挙げられます。
footer.php
テーマのフッター部分を表示するためのファイルです。テーマのデザインによっては、ページの下部に表示される情報やリンクなどが含まれることが一般的です。
footer.phpファイルには、通常、次のような要素が含まれます。
- フッターのHTMLマークアップ
- テーマのクレジット情報
- コピーライト情報やプライバシーポリシーへのリンク
- ページの下部に表示されるウィジェットエリア
- ページの下部に表示されるJavaScriptコードなどの追加機能
footer.phpは、テーマのデザインをカスタマイズする場合に重要なファイルの一つであり、必要に応じて編集することができます。ただし、テーマのフッター部分がすでに標準的な形式に従っている場合は、変更する必要がない場合もあります。
style.css
WordPressテーマのスタイルシートファイルです。スタイルシートは、Webページの外観やレイアウトを制御するためのスタイルルールを記述するために使用されます。
style.cssファイルは、WordPressがテーマを読み込む際に自動的に読み込まれます。WordPressテーマのスタイルシートは、WordPressのテーマディレクトリ内のstyle.cssというファイルに保存されます。このファイルには、WordPressテーマの基本的なスタイルルールが含まれます。例えば、フォントサイズ、色、背景、レイアウトなどのスタイルルールが含まれます。
style.cssファイルは、WordPressテーマの他のテンプレートファイルと同様に、テーマをカスタマイズする際に重要な役割を果たします。テーマの色やフォントサイズを変更する場合、このファイルを編集することが必要になる場合があります。
WordPressのスタイルシートは、CSSの規則に従って記述されます。これには、セレクタ、プロパティ、および値が含まれます。セレクタは、スタイルルールが適用される要素を指定します。プロパティは、スタイルルールが適用される要素の属性を指定し、値はその属性の値を指定します。例えば、次のようなスタイルルールがあります。
WordPressテーマの自作とブロックエディタのまとめ
今回このページでご紹介した書籍は、全部購入しました。
私も、Gutenberg(ブロックエディタ)が苦手で普段はプラグインを入れてClassic Editorを使っています。ただし、自由なレイアウトをしたいとなると、かなり制限されてしまうので「Elementor Website Builder」と言うプラグインを使ってランディングページなどを作成しています。
Gutenbergとうまく付き合っていく事ができれば、「Elementor Website Builder」に頼らずとも、かなり自由なデザインができるので、頑張ってGutenberg(ブロックエディタ)を使ってみようかなと考えています。
WordPressのテーマを自作できるのか?と言うと、HTMLとCSSの知識があればできなくはないですね。ただし、ローカル環境でWordPressをセットアップする必要があるため、XAMPPやMAMPなどのローカル開発環境を準備する事がネックになる方は多いと思います。
私としては、WordPressのオリジナルテーマを自作できなくても、これらの書籍から学べる知識があれば、無料のテーマなどをカスタマイズして自分の満足のいくデザインにすることが可能だと思います。