このレッスンでは、style.css
ファイルにテーマ情報を掲載するためのコメントを掲載することで、テーマの詳細部分でテーマ情報を表示させることができるということを、実際に試していきます。
動画
レッスンの準備
このレッスンでは、上記リポジトリのwp-lesson-0
2というディレクトリにあるファイルを使って学習を進めていきます。
WordPressのルートディレクトリにあるwp-content
の中のthemes
にwp-lesson-02
ディレクトリを設置しましょう。
まず最初にfunctions.php
ファイルを作る
前回のレッスンで、テーマとして認識するために必要なファイルを確認しました。実際に認識させるためにはfunctions.php
ファイルは必要ありませんが、今後必要になってきますので、このタイミングで作っておきましょう。中には何も記載しなくて大丈夫です。後ほどのレッスンで記述していきます。
なお、このレッスン内では利用しませんので、このレッスンのみ学習される方は作る必要がありません。
style.css
にコメントを入力する
style.css
ファイルを開いて、以下のCSSコメントを入力してみましょう。
/*
Theme Name: テーマ名称
Theme URI: テーマの公式サイトURL
Description: テーマの説明
Author: テーマ作者名
Author URI: テーマ作者のURL
Version: テーマのバージョン
License: テーマのライセンス
License URI: ライセンスを示すURL
Tags: タグ
Text Domain: テキストドメイン
*/
Theme Name
テーマの名前を設定します。
Theme URI
テーマをダウンロードできたり購入できるウェブサイト、またはデモサイトのURIを設定します。
Description
テーマに関する説明文を設定します。
Author
テーマ作者の名前を設定します。
Author URI
テーマ作者のウェブサイトURIを設定します。
Version
テーマのバージョン番号を数値で設定します。(0.0.1など)
公式ディレクトリに掲載するテーマや、サードパーティプラグインなどを利用して更新通知をユーザー側に送信する際には、こちらの数値を参照して通知を送るようになっていることが多いです。
License
テーマ自体のライセンスや、利用しているライブラリなどのライセンスを掲載します。
License URI
上記ライセンスが複数形式のライセンスになる場合、license.txt
というようなファイルにそれぞれのライセンスを記載し、テーマ内に含めることが多いです。その際のファイル名をこちらに掲載します。
Tags
公式ディレクトリに掲載する際に、テーマが有する機能ごとに絞り込み検索を行うことができます。その際に指標となるタグを設定します。
Text Domain
多言語対応テーマを作成する際に、翻訳ファイルと翻訳箇所を連携させるために利用するドメイン名を設定します。
screenshot.png
について
テーマの一覧画面などで表示させるサムネイル画像を、テーマ内にscreenshot.png
という画像ファイルを用意することが可能です。
画像サイズは、横880px・縦660pxのPNG形式画像ファイルとなります。
まとめ
このように、style.css
に適切な情報をコメントにて設置することで、利用者に正確な情報を伝えることができます。また、screenshot.png
を用意しておくことで、受託案件などではお客さんに喜んでいただけるかと思います。そういった細かな対応もできると素敵ですね!
以上でこのレッスンは終わりです。引き続き、WordPressテーマ制作レッスンを進めていきましょう!
このレッスンの関連動画一覧を見る