テーマフォルダを作ろう – WordPressテーマをゼロから作る

投稿日:

最終更新日:

カテゴリー:

今回から徐々にですがWordPressテーマを作成していこうと思います。

前回にも少し書きましたが、今回の企画ではWordPress内にテーマフォルダを新しく作り制作していくという方法で制作していこうと思います。デザイニング・イン・ブラウザってやつですね。(やつですか?知ったかぶり)ブラウザなどで実際の表示を確認しながらコーディングを行い構築していく方法を指します。(のはずです)

テーマファイルとしてWordPressに認識してもらうために最低限必要なファイル群

WordPressで利用できるテーマは、WordPressが設置してあるディレクトリの中のwp-contentの中のthemesというフォルダの中にインストールされています。実際にWordPress管理画面より新しくテーマをインストールしてみると、新しくディレクトリが作られてテーマファイルが表示されるはずです。

そこにこれから作っていくテーマファイルを作って、その中で制作作業を行っていくのですが、最終的にどんなファイルが必要になってくるかは、現時点ではわかりません。最初からきっちりと仕様を決めて制作することも可能ですが、実際は制作過程でどんどんと最適化をしていくので、必ずしも予定していた通りにはならないこともあります。ですので、まずはWordPressにテーマとして認識してもらうために必要な最低限のファイルを設置することから始めます。そして、制作を進めていくなかで、ファイルを分割したりしていくことになります。

では、最低限必要なファイルですが、以下の様なものになります。

  • style.css(スタイルシート)
  • index.php(home.phpでも多分大丈夫。テンプレートファイル)

この2つのファイルがあればWordPressはテーマとして認識してくれます。

WordPress管理画面にしっかりとテーマの情報を掲載するために

最低限のファイルは用意できましたか?themesフォルダ内に任意のフォルダ名をつけて、その中にstyle.cssindex.phpという2つのファイルを作りましょう。ちなみに私は、od5.0というフォルダの中にファイルを作成しました。

現在の状況をWordPress管理画面にログインして確認してみましょう。今はこんな表示になっているのではないでしょうか。

dev-wp-theme-02-01

テーマの名前部分を見てみると、テーマフォルダ名に設定した名前が自動的に表示されています。【テーマの詳細】を押して詳細を見てみても、

dev-wp-theme-02-02

ほぼ何も表示されていないという状況です。他のテーマとも掲載情報を見比べてみてください。

こちらに情報を掲載するためには、style.cssファイルに必要情報を記載しないといけない仕組みになっています。

各項目いろいろと設定ができますが簡単に紹介してみます。

Theme Name
テーマの名前
Theme URI
テーマを紹介しているウェブページアドレス
Author
テーマ作者
Description
説明文
Version
バージョン
License
ライセンス名
License URI
ライセンス内容が確認できるページアドレス
Tags
WordPress公式さテーマサイトで利用するためのタグ
Text Domain
テキストドメイン。多言語化する際に利用します。

これらを入力していきます。公式にアップするのであれば、すべてもれなく入力する必要があります。が、今回は最低限の内容で割愛させていただきます。詳しくはこちらをご覧ください。

参照:https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90#.E3.83.86.E3.83.BC.E3.83.9E.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88

実際に入力した内容がこちらです。

このように入力すると、実際に管理画面で確認するとこのように表示されます。

dev-wp-theme-02-03

確認された際に【有効化】ボタンを押しておきましょう。有効化とは、WordPressにインストール(今回の場合だと作成)したこのテーマを利用しますよ!という作業になります。常にインストールされているテーマのどれかが有効化されている状態になっています。初期状態であれば、Twenty****というテーマが有効化されているはずです。

今後、制作を進めていく上で、ブラウザ上でも実際の表示やコードなどを確認していく必要があるので、有効化をしておいて適応されるようにしておきましょう。

コーディングや
WordPress開発のリソースが足りない!

オレインデザインでは、デザインデータからの HTML コーディングから WordPress テーマ・プラグイン開発まで幅広くウェブ制作に対応しています。

お気軽にお問い合わせください。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。