BLOG

閲覧数: 1,369

【WordPress】オリジナルテーマの作成 準備編【HTML/PHP】

皆様、お久ぶりです!!

生駒万憲(いこまかずのり)です。

元気に生きております!!

ふふふ…。

さて、気付いたら、

ほぼ1年半ぶりのブログ更新です!

前回はUnityで当ブログの看板息子、まほば君の3Dモデルに

自動瞬きを実装する一例を紹介いたしましたが、

今回はWordPress(ワードプレス)というソフトウェアについてのお話です!

コンテンツ管理システム(CMS)と呼ばれるソフトウェアの一種で、

シンプルかつ高機能なエディタを使ってWebサイトの管理や更新が行えます。

サイトの管理者とって、とっても便利なソフトウェアなのですよ!

今皆さんが読んで下さっているこのブログも、

WordPressを使用しています!

そこで今回の記事のテーマですが

【オリジナルテーマの作成】です!!

WordPressには、Webサイトのデザインを管理するテーマという機能があります。

HTML等の知識がなくても、

無料あるいは有料で、数多くの素敵なデザインのテーマが利用出来ます。

とっても有り難い機能なのですが、

今回はあえて簡単なテーマを0から自作して、

WordPressで問題なく表示する!

という所までを今回の目標とします!

ぜひ最後までお付き合いくださいませ!

それでは行きましょう!!

WordPressのテーマとは

そもそもWordPressって何やねん?という方のために、

まずはWordPressとWordPressテーマについて簡単に解説いたします!

誰にとって便利なソフトウェアなのかといえば、前述した通り、

Webサイトの管理者です!

皆さん普段どんなWebサイトをご覧になってるでしょうか?

それらがほぼ全て、

HTML等のマークアップ言語で書かれているという話は聞いた事が有るかと思います!

Webサイトの全てのページには、

固有のHTML文書と固有のアドレスがセットで存在するのが原則です。

でもちょっと考えてみると、

そのWebサイト全部でいったい何ページあるでしょう!?

まさか全てのページ分、人が手打ちして用意している!?

訳ありませんよね!!

現在、特に大規模なWebサイトやサービスでは、

都度動的にアドレスとWebページをプログラムによって、

生成して表示するという方法が主流となっています!

この方法の場合、

該当ページのアドレスにユーザーがアクセスした時、

そこにはHTML文書ファイルもアドレスを構成するディレクトリすらも存在しません。

データベースに記録された最新の情報と、Webページのデザイン等を元に、

仮想アドレスと仮想ページが作成され、

本当にそんなアドレスとHTML文書ファイルが存在しているかの様に振舞います。

これによりユーザーのブラウザからは、実在するHTML文書に見えるという仕組みです。

この方法ならば、全てのページのHTML文書を用意しなくても済むのです。

これは大変助かります。

しかし、

確かに山のようにHTML文書を用意する必要は無くなりましたが、

その代わりにWebページを表示させる手続きが少々複雑になってしまいました!

メリットが有ればデメリットも有るという所でしょうか。

はい、そうです!

そこでWordPressの出番という訳です!!

WordPressは、このややこしいシステム周りの機能を全て提供してくれるのです!!

それだけではありません!

WordPressには、初心者にも扱いやすいよう設計されたエディタが用意されています。

Webサイトの新規記事の編集や更新の他、デザインや設定の変更、拡張機能の追加など、

Webサイトの管理に関わるほとんどの作業を、

このエディタ内で完結させる事が可能です。

正に至れり尽くせり!

WordPressはこのような特徴から、

現在多くのWebサイトが導入している、人気のソフトウェアとなっています!

さて、本題のWordPressのテーマですが、

主にWebサイトのデザインや、

表示内容等を制御するための記述がなされたファイル群です!

WordPressの仕様により、必要なファイルが複数必要である為

結局は複数、すなわちファイル群、となってしまう訳ですが、

事前に全てのページのHTML文書を用意する方法に比べたら、

そのファイルの数は圧倒的に少なくて済みます!

また動的Webサイト構築が前提のため、

HTMLに埋め込み可能なPHP等のプログラミング言語が使用されます。

何やらすでにややこしそうな雰囲気もしますが、頑張って解説いたします!!

作業前の注意点

さて、まず初めに一応注意事項です。

これから紹介する内容はあくまでWordPressテーマの開発手順の一例です。

また、分かりやすく解説する事が今回の主な目的なので、

未完成の状態とはじめから分かっているテーマを、

WordPressにいきなり適用します!

必要最小限の情報すら不足している状態から、解説を交え、

一つ一つの挙動を確認しながら、機能を加えていくという流れになります。

ですので、途中でどんなエラーやバグが発生してもおかしくありません。

間違っても、あなたがすでに本運用しているWebサイトで同じ方法を試したりしないで下さい!

もちろん、WordPressのテーマを変更する前には、必ずバックアップを取っておく事が基本ですが、

実際に試してみたい方は、

ローカルでWordPressの動作確認が出来るシステムや、

仮運用のサーバー等、開発用の環境を準備してから挑戦してみてください。

では、いよいよ作業開始です!

WordPressを新規にインストールした直後の状態からスタートします!

WordPressのバージョンは5.9.1です。

WordPressの初期テーマを確認する

初期状態のWordPressテーマの様子を確認してみましょう!

まずは、ブラウザからWordPressのエディターにログインしてみます!

ダッシュボードのサイドメニューから、外観⇒テーマと開いて行くと、

3つのテーマのサンプル画像が並んでいますね。

初期状態で3種類のテーマがインストールされているのが分かります。

白い文字で有効と表示されているのが、現在WordPressに適用されているテーマです。

サンプル画像をクリックすると、さらにそのテーマの詳細情報が表示されます。

WordPressにテーマとして正常に認識されれば、

自作テーマもここで、情報の確認や設定が出来る様になるはずです。

では次に、

WordPressをインストールした、フォルダ内のファイル構成を確認しに行きます。

WordPressエディタからは一旦離れて、

FTPソフト等でWordPressをインストールしたフォルダにアクセスしてみましょう。

沢山のフォルダとファイルがありますね。

この中から、wp-content⇒themesの順にフォルダを探して開いていきます。

3つのフォルダが並んでいますね!

これらが先ほど、初期状態でインストールされている事を確認した、

それぞれのテーマのテンプレートファイルが格納されているフォルダです。

という事はつまり、

今アクセスしているthemesフォルダが

WordPressテーマのインストールディレクトリという訳です。

勘のいい方はピンと来たかもしれません!

そうです!

ここに、4つ目の自作テーマのフォルダを作りたいと思います!

フォルダの作成とファイルの追加

themesフォルダの配下に、

FTPソフトで空のフォルダをアップロードします。

半角英数字で何か名前をつけておきましょう!

今回はT_01という名前にします!

この新しく出来たT_01というフォルダが、

自作テーマのファイル群を格納するフォルダになります。

では早速、

WordPressのエディターに戻って、先ほどのテーマ一覧の様子を確認してみます。

フフフ…はい、

やっぱり空のフォルダを作っただけでは、自作テーマはまだ一覧に追加されていない様ですね。

まあ、そりゃそうですよね。

ですが、

よくよく見ると下の方に、何かメッセージが表示されています!

どうやらスタイルシートなるファイルを作成する必要がある様です!

ちゃんと教えてくれていますね!

T_01フォルダの配下にファイルを一つ追加しましょう!

メモ帳等のテキストエディタで空のファイルを作成します!

ファイル名はstyle.cssという名前にしましょう。

この新しく作成したファイルを、

FTPソフトを使ってT_01フォルダの配下にアップロードします!

さて、テーマ一覧の様子に変化は有ったでしょうか?

おや?

今度は先ほどとはまた、違うメッセージが表示されていますね。

index.phpというファイルの追加がさらに必要な事と、

子テーマという謎のキーワードが出てきました。

子テーマでは、

先ほど作ったstyle.cssにテンプレートヘッダーというものが必要と書かれています。

メッセージに従いましょう。

ですが、いきなり沢山指示が来ましたね。

子テーマとテンプレートヘッダーの方については、とりあえず後回しにします。

先にindex.phpファイルの追加を行いましょう。

style.cssの時と同様の方法で、

今度はindex.phpという名前の空のファイルを同じ場所に追加します!

この様なファイル構成になったでしょうか?

再度テーマ一覧を確認してみましょう。

おおっ!!

ついにテーマのサンプル画像一覧の中に自作のテーマがしっかり追加されました!!

WordPressにテーマとして正常に認識されたという事です!

ワクワクしてきましたね!

自作テーマをWordPressに適用する

では、ここで自作テーマのサンプル画像エリアの上にマウスカーソルを乗せてみましょう!

なんと!有効化のボタンが現れました!

有効化とは、このテーマをWebサイトのデザインに適用するという意味です!

え?

有効化出来るの?

フォルダと空のファイルを用意しただけで、

まだHTMLも何も書いて無いのに?

なんだかちょっと怖いですが、これはもう押すしかありませんね!!

どきどき!

白い文字で有効と表示され、どうやら有効化されたようです。

Webサイトの見た目が変わっているはずなので、確かめてみましょう。

ブラウザの現在のタブではなく、新しいタブを開いてください。

新規のタブでWebサイトのトップページのアドレスを入力してアクセスしてみます!

ちょっと面倒な手順ですが、理由は後述いたします。

さて、

成功すれば、Webサイトのトップページが表示されるはずですが…。

タブにはちゃんとアドレスの文字列が表示されていますが、

肝心のWebサイトは真っ白で何も表示されていません。

やっぱり…。

0から自作テーマを作るなんて無理だったのか…。

いいえ、大丈夫です!

何故ならこれは、ブラウザ側の機能の一つで、

何も指定がないHTML文書を読み込んだ場合は、全面真っ白に表示するという、

プログラムがちゃんと働いている証拠です!

ページそのものが見つからなかったり、

読み込みに失敗した場合はその旨のエラーメッセージが表示されます!

現在のテーマの問題点

成功です!

作成した1つのフォルダと2つのファイルが、

WordPressテーマとしてちゃんと機能している事が確認出来ました!

まあ、

とはいえ、このままでは楽しくないですね。

ところで、先ほどWebサイトの見た目を確かめるために、

ブラウザで新しいタブをわざわざ開いてトップページにアクセスしました。

なぜそんな手間のかかる事をしたかというと、ちょっとした理由が1つあります。

まずはこの画像をご覧下さい。

本来ならばWordPressに管理者としてログイン中、

WordPressのエディタの上部には、

この画像の様に、常に管理ツールバーというUIが表示される仕様になっています。

ここにはちゃんと、

編集中のWebサイトのトップページと、

編集を行うダッシュボードを、行き来出来るリンクがあります。

このリンクを利用すれば、編集画面とWebサイトのトップページ間をスムーズに移動出来るので、

編集作業には、欠かせない機能と言ってもいいと思います!

しかし、同じタブ内での画面遷移になるため、

もし管理ツールバーが画面上部から消失したりすると、

ダッシュボードに戻れなくなってしまい、ちょっと作業が面倒になったりします。

そうです。

現在の何も指示が書かれていないテーマでは、その現象が100%起こるのです!

WordPressの管理ツールバーが利用出来る条件を、まだ満たしていない為です。

この問題も解決して、

ちゃんとWebサイトのトップページが表示される様にしてみましょう!

index.phpの編集

さて、いよいよここからテンプレートファイルにコードを入力します!

まずはHTMLの基礎的な構文の例を紹介します。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>タブに表示されるタイトル要素</title>
    </head>

    <body>
		<header>
			<p>ブラウザに表示されるヘッダー要素内の一要素、段落要素</p>		
		</header>		
		<main>
			<p>ブラウザに表示されるメイン要素内の一要素、段落要素</p>		
		</main>		
		<footer>
			<p>ブラウザに表示されるフッター要素内の一要素、段落要素</p>
		</footer>
    </body>

</html>

シンプルですが、これだけでも立派なHTML文書です!

解説は後述するとして、

まずはこれが、

どの様にブラウザで表示されるのか見てみたいですよね!

ダッシュボードメニューから、概観⇒テーマファイルエディターの順に開いていきましょう!

初めて開く時はこの様な、ちょっと初心者だと心配になるような確認ダイアログが現れます。

“理解しました”というボタンをクリックして先に進みます!

このテーマファイルエディター画面では、

すでに存在するテンプレートファイルの記述を、編集する事が出来ます。

画面右側上部にある”編集するテーマを選択”で、自作テーマのT_01を選択すると、

先に作成したstyle.cssとindex.phpの二つのファイルがリストに表示されるので。

index.phpをクリックして選択します。

すると、選択したファイルの内容が表示されます。

当然まだ何も書いていないので、内容は真っ白ですね。

ここに先ほどのコードを貼り付けましょう!

貼り付けたら、画面の一番下にある”ファイルを更新”というボタンを、

必ずクリックして更新します。

これで、Webサイトのトップページのデザインが更新されました。

ここでも念の為、別タブでトップページにアクセスしましょう。

WordPressエディターにログイン中のブラウザであれば、

もし条件を満たしていれば、別タブでトップページにアクセスしたとしても、

画面上部に管理ツールバーが表示されるはずです!

HTMLの基本構文

一度目は真っ白だったブラウザに、今度はちゃんと文字列が表示されました!

タブにもちゃんとタイトルが表示されていますね!

しかしやはり管理ツールバーは表示されていない様です。

ですが、

書き込んだHTML自体は正しく機能して表示されています。

せっかくなので、

ブラウザの表示結果とあわせて、

ここでHTMLについて簡単に解説をしておきたいと思います!

もう一度index.phpに貼り付けたコードを見てみましょう。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>タブに表示されるタイトル要素</title>
    </head>

    <body>
		<header>
			<p>ブラウザに表示されるヘッダー要素内の一要素、段落要素</p>		
		</header>		
		<main>
			<p>ブラウザに表示されるメイン要素内の一要素、段落要素</p>		
		</main>		
		<footer>
			<p>ブラウザに表示されるフッター要素内の一要素、段落要素</p>
		</footer>
    </body>

</html>

初めて目にする方には、とても複雑な暗号に見えるかも知れませんが、

ルールはとても簡単です!

HTML文書は基本的に要素の集合体です!

たとえば下記は、タイトル要素という一つの要素です。

<title>タブに表示されるタイトル要素</title>

一つ一つの要素は開始タグと終了タグの間に挟まれる形で定義されます。

また、要素をさらに別の要素タグで挟むことによって、

要素の中に要素が入った、いわゆる入れ子構造を作る事が出来ます!

上記のコードをよく観察してみると、

HTMLの基本構文

一番外側のhtml要素の中に、head要素とbody要素という2つの要素が入っていますね。

head要素の方には、

その中にmeta要素とtitle要素という2つの要素、

body要素の方には、

header要素とmain要素とfooter要素という3つの要素が入っています。

さらにその3つの要素にもそれぞれpという要素が、という具合です。

ではここで、もう一度トップページの表示結果を見てみましょう!

コードとの関係性を色分けしてみます。

特に注目して欲しいのは、head要素とbody要素という2つの要素です。

head要素とbody要素にはそれぞれ明確な役割分担があります。

head要素内には、HTML文書自体に関わるタイトル要素や文字コード要素等の情報要素を書きます。

body要素内には、実際にブラウザに表示されるヘッダー要素やフッター要素等の内容要素を書きます。

Webページとして表示したい要素はこのbody要素内に書けば良い訳です!

トップページで管理ツールバーを表示する

さて、Webサイトのトップページはちゃんと表示されましたが、

管理ツールバーは、やはり表示されていませんでした。

こちらの問題を解決しましょう!

管理ツールバーを利用出来る条件を満たさなければなりません。

その条件とは、

「WordPress側の情報を読み込むアクションをテーマで利用する事」です!

なんだか、ちょっと難しいですね。

具体的には、決められた2つの関数の呼び出しをテーマの中で行います。

下記のコードをご覧下さい。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>タブに表示されるタイトル要素</title>
		<?php wp_head(); ?>
    </head>

    <body>
		<header>
			<p>ブラウザに表示されるヘッダー要素内の一要素、段落要素</p>		
		</header>		
		<main>
			<p>ブラウザに表示されるメイン要素内の一要素、段落要素</p>		
		</main>		
		<footer>
			<p>ブラウザに表示されるフッター要素内の一要素、段落要素</p>
			<?php wp_footer(); ?>
		</footer>
    </body>

</html>

7行目と19行目に注目して欲しいのですが、

今まで見てきたHTMLの書式とは、ちょっと雰囲気の違う記述が2行増えています。

<?php wp_head(); ?>
<?php wp_footer(); ?>

これは、PHPというプログラミング言語の書式です。

wp_headとwp_footerという2つの関数を呼び出しています。

WordPressのテーマでは、

必ずこの2つの関数の呼び出しを書かなければならないという、仕様になっているのです。

では、もう一度テーマファイルエディターで、

このコードをindex.phpに貼り付けて更新しましょう!

さて、ちゃんと管理ツールバーは表示されるでしょうか?

ドン!

出来ました!!

無事管理ツールバーが表示されました!

とりあえず、これで目標の一つは達成です!!

今後は安心して管理ツールバーのリンクを利用出来る様になりました!

更新作業中の確認作業も捗りますね!

なお、ちょっと気になったので、この2つの関数呼び出しを、

もし一つずつ書いたらどうなるのか、ついでに試してみました。

表示結果はこちら、wp_headだけの場合。

管理ツールバーは表示されません。

ですが良く見ると、

Webページ全体の位置が下がって上部に空間が出来ていますね。

そしてこちらが、wp_footerだけの場合。

管理ツールバーは表示されましたが、Webページの一番上の文字が、

管理ツールバーで隠れて見えなくなってしまいました。

なるほど!

wp_head関数がWebページの表示位置の調整を行い、

wp_footer関数が管理ツールバーを表示していたんですね!

私も初めて知りました!

wp_head関数とwp_footer関数が行っている処理はこれだけではありませんが、

この事からも、やはり両方書く必要があるという事ですね!

もちろんこの管理ツールバーは、

WordPressエディタにログイン中の管理者にだけ表示される機能です。

Webサイトを見に来てくれるユーザーには表示されないので安心してください!

テーマの詳細情報と子テーマについて

さて、いよいよ最後の仕上げをしたいと思います。

WordPressのテーマの仕様として、

ファイルに記述しておくべき情報が、あともう一つ残っています!

後回しにしてたやつです。

ちょっと前に見たメッセージにこんな事が書いてありました。

「子テーマではスタイルシートにテンプレートヘッダーが必要です」と書かれていましたね。

先に申しますと、現在作成しているのは子テーマではありません。

今回は親テーマにあたるテーマの作成を試みています!

子テーマとは、

親テーマのファイルに手を加えず、温存したまま、

子テーマのファイルを追加実行するテーマ、及び機能です。

ちょっと難しそうですね。

すでに完成してインストールされているテーマを、

安全にカスタマイズしたい時に活躍するテーマですが、

ここでは、普通のテーマと特殊なテーマがある、くらいの理解で大丈夫です。

しかしこのメッセージでは、子テーマだけにテンプレートヘッダーが必要とも受け取れるので、

今回は関係無さそうにも思えますが、

実は全く関係がない訳ではありません。

ではテンプレートヘッダーとは何の事でしょう?

まずは、最初の方で何度か開いた、WordPressエディタのテーマの管理画面に戻ってみましょう!

ダッシュボードのサイドメニューから、外観⇒テーマと開いていきます。

現在インストールされているテーマの確認と設定が出来る画面ですね。

自作テーマのサンプル画像エリアをクリックすると詳細情報が表示されます!

他のインストール済みのテーマの様子と見比べてみると、

作成者名や紹介文等が無くて寂しいですね。

テンプレートヘッダーとは、ここに表示されるテーマの、

沢山の項目からなる詳細情報に含まれる項目の一つで、

子テーマの時にだけ必要な項目の事を指します。

具体的には、Template(テンプレート)と言う項目です。

その内容をstyle.cssファイルの方に書いて下さい、というメッセージだった訳ですね。

子テーマを作成する場合には、以下の様な書式でコメントを貼り付けます。

/*
Theme Name: T_01 Child
Description: これは子テーマ説明文です。自作テーマT_01の子テーマです!
Version: 1.01
Author: icoma kazunori
Author URI: https://icomanga.com
Template: T_01
*/

当然この場合、親テーマのT_01がすでに存在している事が前提です。

この様に沢山の項目から成り立っているのが、テーマの詳細情報であり、

その中のTemplateという項目が、テンプレートヘッダーです。

テーマの詳細情報は、翻訳の関係もあり、コメントヘッダーやスタイルシートヘッダー、

もしくはテーマヘッダーとも呼ばれます。

今回作成するのは親テーマなので、

Templateの項目を除外したテーマの詳細情報をstyle.cssファイルに書きます!

では、テーマファイルエディター画面に戻り、

自作テーマのstyle.cssを選択して、

下記のコメントを貼り付けましょう!

/*
Theme Name: T_01
Description: これは自作テーマの説明文です。この自作テーマの素晴らしさを紹介します!とてもシンプルです!これから素晴らしくなります!
Version: 1.01
Author: icoma kazunori
Author URI: https://icomanga.com
*/

貼り付けたら必ず、一番下の”ファイルを更新”のボタンを押して更新します!

テーマの管理画面に戻り、自作テーマの詳細情報を確認してみましょう!

バッチリですね!

テーマの製作者名には、Webサイトへのリンクもちゃんと設定されています。

しかし子テーマでもなく、配布する予定もない自作テーマの場合、

作成者本人にだけ分かれば良いので、

詳細情報なんて別に書かなくても良いのでは?

と疑問に思われる知れません。

詳細情報が何も書かれていなかった状態でも、

少なくともWordPressのバージョン5.9.1では、

特に問題は起きませんでした。

しかし、WordPressの仕様である以上、

何も書かないまま放置するのは、やはりリスクと言えるでしょう。

今後開発を進めていく段階で問題が発生するかも知れません!

ともかく、子テーマ、親テーマどちらの場合でも、

インストールされている他のテーマと、

テーマ情報かぶりが起きないように、

ちゃんと固有の詳細情報を記述しておきましょう!

子テーマについては、いずれ別の記事で詳しく解説したいと思います!

テーマのサンプル画像を追加する

さて、ここまで来たら後もう一息です!

自作テーマの詳細情報の内、テキスト部分は完成しました。

ですが、後もう一つ、ちょっと寂しい部分がありますね。

もうお気づきだと思いますが、サンプル画像がありません!

サンプル画像を用意して表示させましょう!

アスペクト比は4:3で、

今回は横1200px縦900pxのpng形式で画像を準備します!

普通は該当テーマを適用した、トップページのスクリーンショットが最適ですが、

現在の自作テーマでは、表示出来るのがまだ文字だけです。

画像感がいまいちなので、

今回はとりあえず、当ブログの看板息子、

まほばくんの画像を使用します!

かわいいのでヨシ!

ペイント等の画像編集ソフトでpng形式の画像ファイルを出力しましょう!

ファイル名をscreenshot.pngにします。

画像が準備出来たら、

自作テーマのフォルダ、T_01の配下に、

FTPソフトでアップロードします!

この様なファイル構成になればOKです!

テーマの管理画面に戻って詳細情報を確認しましょう!

どうなったでしょうか?

ちゃんとサンプル画像が表示されました!

これで、今回の目標は全て達成です!!

お疲れ様でした!!

WordPressのテーマ自作まとめ

それでは、今回のまとめです!

WordPressのテーマには、いくつかWordPressの仕様に基づくルールがありました!

特に注目して欲しいルールは、以下の3点です。

■一つ目のルールは、自作テーマのフォルダ配下に、

index.php、style.css、screenshot.pngというファイル名の、3つのファイルが必ず存在している事です。

■二つ目のルールは、テンプレートファイル内の何処かに、

phpというプログラム言語を使った、2種類の関数呼び出しが必ず書かれている事です。

今回の例では、index.phpファイルの7行目と19行目になります。

(wp_head関数呼び出しはHTMLのhead要素内、wp_footer関数の呼び出しはHTMLのfooter要素内に書くのが定石となっています。)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>タブに表示されるタイトル要素</title>
		<?php wp_head(); ?>
    </head>

    <body>
		<header>
			<p>ブラウザに表示されるヘッダー要素内の一要素、段落要素</p>		
		</header>		
		<main>
			<p>ブラウザに表示されるメイン要素内の一要素、段落要素</p>		
		</main>		
		<footer>
			<p>ブラウザに表示されるフッター要素内の一要素、段落要素</p>
			<?php wp_footer(); ?>
		</footer>
    </body>

</html>

■三つ目のルールは、style.cssファイル内の何処かに、コメント形式でテーマの詳細情報が必ず書かれている事です。

(冒頭に書くのが定石となっています。)

/*
Theme Name: T_01
Description: これは自作テーマの説明文です。この自作テーマの素晴らしさを紹介します!とてもシンプルです!これから素晴らしくなります!
Version: 1.01
Author: icoma kazunori
Author URI: https://icomanga.com
*/

以上の条件を満たすことで、

今回はシンプルですが、自作テーマによるトップページの表示と

WordPressエディタ内での自作テーマの管理が、正常に出来るようになりました!

今後は、さらにこのテーマをたたき台として、

実用的なテーマの開発の様子を紹介していきたいと思っています。

今回は以上になります。

最後まで読んでいただき本当にありがとうございました!

もし興味がわいたら、皆さんもぜひ、WordPressテーマの開発に挑戦してみて下さい!

ではまた。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

カテゴリー

アーカイブ

ページ上部へ戻る