【WordPress】style.cssに書くこと－オリジナルテーマを作るために

「【Wordpress】オリジナルテーマを作るために必要なファイル」で、オリジナルテーマを作るために必要なファイルが「style.css」「index.php」ということが分かりました。

今回はその内の「style.css」には何を書けばいいかを説明します。

文字コードを設定

通常のスタイルシート（cssファイル）と同じように文字コードを設定しましょう（@charset）。

基本的に文字コードは「utf-8」で問題ありません。注意点としては、phpやhtmlファイルの文字コードも「utf-8」で統一しましょう。

書き方

style.cssの最初に下記のように書きます。

@charset "UTF-8";

「テーマの名前」を書く

WordPressに必要な設定は「テーマの名前」だけ書けば良いかなと思っています。

「テーマのテンプレート」「テーマの制作依頼」であれば、その他のテーマ情報も記載した方が良いかと思いますが、通常のホームページだけどお知らせを更新したいなど、WPの機能を使いたいレベルであれば、「テーマの名前」だけがあれば十分かなと。

書き方

文字コードに続けて下記のように書きましょう。

/*
Theme Name: テーマ名
*/

具体的には、テーマの名前が「lucklog」だとすると、下記のような感じです。

@charset "UTF-8";
/*
Theme Name: lucklog
*/

サイトに必要なスタイルを記述

以降は、必要なスタイルを記述していけばOKです。

@charset "UTF-8";
/*
Theme Name: lucklog
*/

html {
  margin:0;
  padding:0;
  border:0;
  outline:0;
}
・
・
・

以上が「style.css」に（最低限）記述する内容になります。Wordpress以外のcssファイルと大差ありません。

外観＞テーマ

外観＞テーマを確認します。

「style.css」に載せているテーマの情報はテーマの名前のみなので、下記のようにテーマの画像もなく、

「テーマの詳細」を見ても、テーマの名前以外の情報はありません。

クライアントが「外観」を編集することはありませんので、あまり気にする必要はないかと思います。もし見られたとしても、貧相ではありますが問題はありません。

その他のテーマ情報を掲載したい場合は下記を参考にしてみてください。

参考：外部CSSの読み込みは不要

好みもあるかと思いますが、僕は「@import」を使って外部cssは読み込みません。自分で編集するスタイルシートは「style.css」のみにしています。

理由は下記のとおりです。※大した理由ではありませんので、お好みで良いと思います

• １ファイルなのでキャッシュ対策が楽
• @importで読み込んでいるファイルの場合、キャッシュ対策が効きずらい気がする（過去の経験則なので、不確かです）
• ファイルを分けても結局あまり整理できない（既存のサイトを更新するときに感じます）

プラグインのcssについて

javascriptのプラグインに付属されているcssに関しては別途linkタグを使って読み込んでいます。

「style.css」より前に読み込むことで、調整が必要な場合は「style.css」にスタイルを上書いて対応しています

まとめ

「style.css」ファイルはかなりシンプルな形にできていると思います。

有難いことに、「ソースが綺麗」といっていただくことが多いので、１～２，３名で構築できる規模感であれば、このやり方がシンプルかつ管理もしやすいのでオススメです。
※数十ページ作る場合もありましたが、特に問題は起きていません。

ただ、組織でチームを組んでそれなりの人数でサイト構築をするのであれば、cssファイルを分けたり、ルール決めをする方がより効率的だと思いますので、適した方法を見つけていただければと思います。

スポンサーリンク