【完全版】WordPressオリジナルテーマの作り方

2024年4月15日 22:01

はじめに

この本はプログラミング入門の入門書と連動している記事です。本を読んでいなくてもわかるように作り上げていますので、是非読んでいってくださいね。※2024/04/15時点ではまだ作りかけですが、本作成の関係上リンクが必要なので、オリジナルテーマを立ち上げるまででUPします。その後は、AIを使って簡単なポートフォリオサイトを作り、サーバーにUPするところまでをやっていきます。

開発環境の準備

必要な開発環境

WordPressでオリジナルテーマを作るには下記の2つを用意しましょう。

※私はこの他、GitHub（ギットハブ）も活用しますが、初心者には難しいので、ここでは割愛します。

あと、当然で忘れてましたが、パソコンは必須です。
スペックが低いとLocalの起動に時間がかかるかと思いますが、まずは今あるパソコンで良いでしょう。

Local（ローカル）
LocalだとGoogle検索で調べても、何やらわからないのですが、旧名Local by flywheelで調べるとどんなものかわかります。

詳しく説明すると、専門用語を多用して、難しくなるので書かないですが、WordPress開発に特化した便利な開発環境です。

イメージを新規作成したり、以前作ったイメージをワンクリックで、コピーしてクローンがすぐ作れます。

Localを使うまでは、Apache＋Mysql＋PHPを一つ一つ入れるのも面倒でしたし、その後Wordpress自体も構築しなければならず超面倒でした。しかし、Localはそれらを全部含んだイメージと作ってくれるので超便利です。

※Apache、Mysql、PHPがそれぞれ何かという部分は割愛してますので、Google検索で調べるか、生成AIさんに聞いてみましょう。

Vscode（ブイエスコード）
マイクロソフトが作った超軽量のコードエディタ。

プログラムを書くためのプログラムコード編集ソフトだと考えてもらえばいいかと思います。

私の経験上、JavaやらC#.netなどを作る際は、非常に起動が重いソフトを使わねばならなかったのですが、Vscodeはアイコン叩くとサクッと起動します。他のはもう使えません。eclipse嫌ぁ～。

Local（ローカル）のインストール方法

下記サイトが丁寧に書かれてますので、参考にして構築してください。最後までやって「WordPressTest」というサイトまで作っていただいて大丈夫です。

注意点としては、「OpenSite」ボタンを押した時に、下記参考ページの画面と違う内容のデザインが出てもどこかに「WordPressTest」という記載があれば問題なしで作成はOKとなる点です。WordPressは頻繁にバージョンが変わり、デフォルトのテーマも変わるので、新規インストールしたあと、「OpenSite」を押すとデザインが変わるのです。

Vscode（ブイエスコード）のインストール方法

下記サイトが丁寧にわかりやすく書かれてますので、参考にして構築してください。

もし、Vscodeのプラグインに追加したいというのがあれば、下記を参考にプラグインを追加してください。※プラグイン追加後の設定ではまって身動きとれないかもなので、最初はお勧めしないです。時間と余裕があれば便利には違いないので入れましょう。

WordPressの初期設定

LocalとVscodeがインストールできたら、後は簡単にですが、WordPressの初期設定をやっておきましょう。

LocalのWordPressTestの画面で、「WP　Admin」ボタンを押します。

アカウントやパスワードを入れます。
→設定時にメモしたものを入力しましよう。

管理画面に入ります。

左のメニューから「Settings」を選択します。

日本語にしましょう。

タイムゾーンも変更しておきます。

日付のフォーマットも変更しておきましょう。

終わったら、左下の「Save Changes」ボタンを押します。

日本語化され、わかりやすくなりましたね～。

現在のテーマを確認してみる。

左のメニューバーから「外観」→「テーマ」を確認します。

私の場合、WordPressデフォルトの無料テーマ「Twenty Twenty-Four」が「有効」になっています。

今回の目的は、オリジナルテーマですので、この後の作業で、「Twenty Twenty-Four」から自作のオリジナルテーマに変えます。楽しみですね。

※このテーマインストール段階で何になっていても気にしないでください。後で変更、削除できますので・・。

現在のテーマの場所を確認

WordPressにはテーマ用のフォルダがあり私ので設定されている「Twenty Twenty-Four」もその中にフォルダごとおいてあります。なので、その場所を確認します。

理由は、後で、オリジナルテーマのベースをそのテーマフォルダに置いてもらいたいからです。また、Vscodeでこのフォルダを参照することになるからです。

Localを開き、先ほどLocalで作成している「WordPressTest」の管理画面を開く。

タイトル「WordPressTest」の下にある「Go to site folder」をクリック。

Windowsだとエクスプローラーが開き、下記の部分が表示されます。

フォルダを移動します。

「app」→「public」→「wp-content」→「themes」へと各フォルダをクリックして移動します。

先ほどみた、各テーマ名のフォルダが表示されているかと思います。
「Twenty Twenty-Four」もありますね。

はい、ここがthemsフォルダ、各テーマ情報が格納されている場所です。
ここの場所は、メモ帳などにメモして保存しておきましょう。

オリジナルテーマフォルダを置いたり、Vscodeをつなげるのに使います。

オリジナルテーマをダウンロードする

次に私が使っている、オリジナル作成のベースフォルダをダウンロードしてください。正直、かなり苦労して作った秘蔵のノウハウなのですが、課金したい、限定公開にして、パスワードかけたい。ええ。無料にしましたよ、パスワードもかけてません。もはや「もってけ泥棒」古っ！

ダウンロードするフォルダ：（圧縮してあります）

ダウンロード先：どこでも良いですが、YourOriginalTheme.zipをデスクトップにとりあえずおきましょう。

下記よりダウンロードします。Noteの機能を使ってますので、安全かと思います。

ダウンロードしたら解凍します。

「YourOriginalTheme」を開くとこんな感じで、色々な〇〇.phpファイルやstyle.cssが並んでいます。

テーマフォルダに移動

次に、先ほど開いたテーマが入ったフォルダに、解凍したフォルダをいてます。

まず解凍したフォルダごと切り取って

以下のように、「YourOriginalTheme」が張り付けているかと思います。

オリジナルテーマのフォルダ構成解説

ここでは、オリジナルテーマのフォルダ構成やファイルの意味を
解説します。

エクスプローラーのテーマフォルダに移動します。

YourOriginalThemeフォルダをクリックします。

下記が開かれているかと思います。

上から順に解説します。

s_cssフォルダ

WordPressはstyle.cssにCSSを記載すれば、全ページに適応できるのですが、単一ページなどに適応させたい場合などに、このフォルダにCSSファイルを置きます。フォルダ名は私が振ったものなので、自由に変更できます。CSSのImportが必要になります。

s_imageフォルダ

WordPressのオリジナルテーマ内で使う画像などのデータはこちらに置きます。これも使う場合は、アドレスの指定が必要です。またこれも私が作ったフォルダなので自由に変更して構いません。

s_movie

WordPressのオリジナルテーマ内で使う動画を置くフォルダです。使わない場合は空で問題ありません。これも私が作成したものなので、自由に変更していただいて構いません。

404.php

削除されたページや存在しないページにアクセスすると表示されるページです。私が簡単に作ったものですので、とてもシンプルです。特にこだわりがなければこのままで良いかと思います。

footer.php

HTMLでいうfooterタグに当たる部分をWordPressではfooter.php内に記載します。ここに記載すると、全てのページ（固定ページや投稿ページ）がこのフッターの内容を適応します。

functions.php

HTML,CSS,JavaScriptでいう、JavaScriptの部分をここに書いていく形になります。WordPressはJQueryというJavaScriptのライブラリが標準で組み込まれているので、それをここで使用することもできます。ちょっと書き方にコツ入るみたいですが・・。

header.php

HTMLでいうHeaderタグ内に書かれる部分をWordPressではここに記述します。ここに記述した内容は、全ページ（固定ページや投稿ページ）に適応されます。ホームページを作成する場合、ナビバー（メニューバー）を使う場合はここを必ず触るので、重要なファイルだという認識を持っていただければと思います。

index.php

メインページ（最初に開くページの事、ホームページだとリンクに飛んで最初に開いた画面の事です。）の中身（ヘッダーやフッダ―を除く）を記載していきます。ホームページを作る場合は、このメインページを作り込むため、このファイルを触ることが一番多くなると理解していただければと思います。

page.php

固定ページのテンプレートです、ここで規定したものは、全固定ページに適応されます。つまりここに記載すれば、共通のヘッダーやフッターを固定ページでも呼び出せるという事になります。私が作っていますので、基本変更する必要はありません。

page-sample.php

ここに記載すると、WordPressの固定ページにはテンプレート名として「任意の名前を設定してください」というテンプレートが選択できるようになります。固定ページを個別に定義する場合に使用します。

single.php

投稿ページ（ブログのページです）の内容を記載します。基本的には余程の事がない限り、今の記載内容からの変更はないです。

このフォルダの記載に関しては下記のサイトが参考になります。

screenshot.png

次のオリジナルテーマを適応をやってもらえばわかるのですが、この画像ファイルがオリジナルテーマのサムネイル画像となっています。よりオリジナリティを出したい場合は、このscreenshot.pngという名前を変えずに、中身の画像だけ差し替えれば、本当の意味であなたオリジナルのテーマが完成します。ぜひこだわってみてください。

オリジナルテーマを適応する

オリジナルテーマの情報をテーマフォルダにコピーしたので、次はWordPress上でオリジナルテーマの適用を行います。

Localを開き、WP Adminを開きます。

ダッシュボードから、左サイドバーの「外観」→「テーマ」を選択します。

上手くオリジナルテーマ導入が完了している場合は、「Your Orignal Themeが出てきていると思います。それを選択し。

テーマを有効化します。

有効と表示されれば、設定完了です。次に反映されたかをみてみます。

Localに戻り、今度は「Open site」を開きます。※上記のページ（WP Admin)は閉じても構いません。

「おめでとうございます。 Your Original Theme　が完成しました！！」というメッセージが表示されていれば、オリジナルテーマの土台が完成です。

Vscodeでオリジナルテーマの各phpファイルを修正できるようにする

Vscodeをインストールする

まず、Vscodeをインストールしましょう。

VSCodeとは、パソコンでプログラミングする際に使う、テキストを書く作業をサポートするMicrosoftが作った無料のソフトウェアのことです。画面に文字を打ち込んでコードを書くことができ、書いたコードの間違いを見つけたり、見やすくする機能が備わっています。初心者でも使いやすく、プログラミングの学習に適しているツールです。

下記のページを参考にインストールしてください。日本語化までできれば完了です。