WordPressのオリジナルテーマを自作する手順と具体的な作り方

※この記事はNotion AIを活用して作成しています。

目次

はじめに

WordPressは無料で使えるCMS(コンテンツマネジメントシステム)であり、多くの人が利用しています。WordPressのテーマは、サイトの外観を決定するもので、ユーザーはWordPressの管理画面から簡単にテーマの切り替えができます。しかし、WordPressにはデフォルトで搭載されているテーマの他に、無料または有料のテーマをダウンロードして利用することもできます。

そこで、本記事ではWordPressのオリジナルテーマを自作する手順と作り方についてより詳しく解説します。WordPressのテーマ作成は、プログラミング言語であるPHP、CSS、JavaScriptを用いて行います。PHPはサーバー上で動作する言語で、WordPressの機能を実装する部分に使用します。CSSはデザインを行う言語で、サイトのレイアウトや見た目を制御します。JavaScriptはブラウザ上で動作する言語で、サイト上でのインタラクティブな動作を実装する部分に使用します。

WordPressのテーマを作成するにあたっては、PHPの基礎的な知識、CSSによるレイアウトの実装方法、JavaScriptを用いたインタラクティブな動作の実装方法を理解しておく必要があります。PHPの基本構文やWordPressが提供する機能、テンプレートタグについても学ぶ必要があります。CSSについてはCSS3に準拠したコーディングができるようにしておきましょう。JavaScriptについてはjQueryライブラリを用いた動作を実装できるようにしておくと良いでしょう。

テーマファイルの準備

テーマファイルは基本的にCSS、PHP、JSなどで構成されています。WordPressのテーマを作成するにあたって、必要なファイルやフォルダーは次のとおりです。

・style.css…テーマのスタイルシート
・index.php…アーカイブページのテンプレート
・header.php…ヘッダーのテンプレート
・footer.php…フッターのテンプレート
・single.php…投稿ページのテンプレート
・page.php…固定ページのテンプレート
・functions.php…テーマの機能を追加するファイル
・imagesフォルダー…テーマで使用する画像を置くフォルダー
・cssフォルダー…追加のCSSファイルを置くフォルダー
・jsフォルダー…JavaScriptファイルを置くフォルダー

これらのファイルやフォルダーを、テーマ名で命名されたフォルダー内に配置する必要があります。
style.cssファイルはテーマのスタイルシートです。サイトのデザインをCSSで記述します。index.phpファイルはサイトのアーカイブページ(月別アーカイブやカテゴリー別アーカイブなど)を表示するためのテンプレートファイルです。header.phpファイルとfooter.phpファイルはそれぞれサイトのヘッダーとフッターを表示するテンプレートファイルです。
single.phpファイルとpage.phpファイルはそれぞれ投稿ページと固定ページを表示するためのテンプレートファイルです。functions.phpファイルはテーマで使用する機能を追加するファイルで、後ほど説明します。
imagesフォルダーはテーマで使用する画像ファイルを格納するためのフォルダーです。cssフォルダーとjsフォルダーはそれぞれCSSファイルとJavaScriptファイルを格納するためのフォルダーです。

テーマの設定

style.cssファイルの先頭には、テーマの基本情報を記載する必要があります。

/*
Theme Name: [テーマ名]
Theme URI: [テーマのURL]
Author: [作成者名]
Author URI: [作成者のURL]
Description: [テーマの説明]
Version: [バージョン番号]
License: [ライセンス]
License URI: [ライセンスURL]
Text Domain: [テキストドメイン]
*/

ここで指定した情報は、WordPressの管理画面上でテーマを選択する際に表示されます。そして、テキストドメインはテーマ内で翻訳ファイルを利用する際に必要となります。

次に、index.phpファイルはサイトのアーカイブページ(月別アーカイブやカテゴリー別アーカイブなど)を表示するためのテンプレートファイルです。WordPressはアーカイブページを表示する際にはindex.phpファイルを利用します。
header.phpファイルとfooter.phpファイルはそれぞれサイトのヘッダーとフッターを表示するテンプレートファイルです。WordPressはこれらのファイルに定義されたHTMLコードをそれぞれサイトのヘッダーとフッターに表示します。
single.phpファイルとpage.phpファイルはそれぞれ投稿ページと固定ページを表示するためのテンプレートファイルです。WordPressは投稿や固定ページを表示する際には、それぞれsingle.phpファイルとpage.phpファイルを利用します。
functions.phpファイルはテーマで使用する機能を追加するファイルです。WordPressはこのファイルを読み込み、定義されたPHPコードを実行します。後ほど、具体的な機能追加の方法について説明します。

まとめ

WordPressのオリジナルテーマを作成するには、必要なファイルや設定、機能を追加していくことが重要です。本記事では、テーマ作成の手順と基本的なファイルについてより詳しく解説しました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

【略歴】
システム会社に営業として十年程度勤めた後、独立してWeb関連など複数の会社を設立。独学でHTML・CSSを学び自社Webサイトを制作し、実践にてSEOとWebマーケティングの独自ノウハウを得る。十数年の会社経営後、全ての会社を廃業。現在はストーンウェブにて SEO x AI x SNS の事業を展開。
【会員】
全日本SEO協会会員 / SHIFT AI会員 / 生成AI活用普及協会個人会員 / AI Database Newsletter購読
【資格 / 検定 / 修了】
AI For Everyone 修了 / ネットマーケティング検定 / ITパスポート / 初級システムアドミニストレータ 他

目次