style.cssにテーマ用コメントを付ける – [02]WordPressテーマ制作レッスン

  • ブックマーク
  • -
    コピー

このレッスンでは、style.cssファイルにテーマ情報を掲載するためのコメントを掲載することで、テーマの詳細部分でテーマ情報を表示させることができるということを、実際に試していきます。

動画

レッスンの準備

このレッスンでは、上記リポジトリのwp-lesson-02というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemeswp-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テーマ制作レッスンを進めていきましょう!

このレッスンの関連動画一覧を見る