【WordPress】style.cssの編集方法や書き方を解説する【テーマ自作】

PR
WordPress
2021.7.6
2023.10.6

WordPressのテーマをゼロから自作したいと考えている方に向けて『style.css』の編集方法や、コメントヘッダーの書き方について解説してゆきます。

▼この記事を書いたひと

フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

1WordPressテーマの「style.css」について
- 1.1テーマの「style.css」がある場所は？
- 1.2テーマの「style.css」を編集する方法は？

2sytle.cssの「コメントヘッダー」について
- 2.1コメントヘッダーとは？
- 2.2最低限必要なコメントヘッダー
- 2.3コメントヘッダーのテンプレート【コピペOK】
- 2.4コメントヘッダーの項目一覧

3「style.css」を読み込む方法
- 3.1①「functions.php」にコードを追加する
- 3.2②各ページで「wp_head()」関数を実行させる

4WordPressテーマ制作のおススメ情報
- 4.1おススメ動画：『WordPress開発マスター講座』
- 4.2おススメ書籍：『WordPressデザインレシピ集』

5この記事のまとめ

WordPressテーマの「style.css」について

WordPressのテーマが動作するためには「style.css」というファイルがあり、この「style.css」は単なるスタイルシート以外にも、テーマの動作に関わるさまざまな役割をもちます。

▼style.cssの役割

WordPressテーマの動作に必ず必要なテンプレートファイル
コメントヘッダーでテーマの情報を設定することが出来る
テーマのデザインに必要となるCSSを記入できる

WordPressのテーマを動作させるための必須ファイルとなっており、また、「コメントヘッダー」という書式でテーマ名や作者名などの情報も設定してゆく必要もあります。

このほか通常のスタイルシートと同じ様に、そのテーマで使用するCSSコードを書く事もできます。

この様に「style.css」は、WordPressテーマの動作にも関わる重要な役割を持ったファイルとなっています。

ゼロからテーマを自作する際には、確実に設定をしてゆきましょう！

テーマの「style.css」がある場所は？

「style.css」は通常、WordPressのつぎの様なパスで、テーマごとに置かれています。

▼style.cssを配置するフォルダ
/wp-content/themes/＜テーマ名＞/style.css
/wp-content/themes/＜テーマ名＞/style.css
/wp-content/themes/＜テーマ名＞/style.css
　　　　　　　　：

ゼロからテーマを自作する場合も同様で、上記フォルダに含める形でstyle.cssを作成すれば、WordPress側から認識される様になります。

テーマの「style.css」を編集する方法は？

テーマのstyle.cssは、WordPress管理画面のテーマエディターから編集できます。

テーマエディターでstyle.cssを編集する — テーマエディターからstyle.cssを編集する

上記がもっとも手軽にstyle.cssを編集できる方法ですが、とはいえ新規テーマ制作を行う場合にはローカル環境でテキストエディタを使った方が、管理や作業がしやすくおススメです。

テーマ自作にあたって「ローカル環境」や「テキストエディタ」の導入が終わっていない方は、次の記事を参考に作業を進めてみましょう。

おススメ記事

WordPressのローカル環境とは？作り方やおすすめツールを解説するこの記事ではWordPressのローカル環境の作り方について詳しく解説していきます。Webサイト制作やブログ運営などの目...

おススメ記事

VSCodeのインストール方法・日本語化の手順を解説するテキストエディタ『Visual Studio Code』のインストール方法と、日本語化の手順を解説します。プログラミング...

sytle.cssの「コメントヘッダー」について

ここからは、冒頭にも登場した「style.css」のコメントヘッダーについて掘り下げて解説してゆきます。

コメントヘッダーとは？

コメントヘッダーは「テーマ名」や「作者名」など、WordPressテーマの概要を表す情報を書いておくための書式のことを言います。

コメントヘッダーを設定すると、そのテーマがWordPressに認識される様になり、設定した情報は管理画面で次のように利用されてゆきます。

最低限必要なコメントヘッダー

WordPressのテーマが動作するには最低限、次のコメントヘッダーが必要となります。

▼最低限必要なコメントヘッダー

/*
Theme Name: テーマの名前を記入します
*/

コメントヘッダーはstyle.cssの1行目に書く必要があり、その全体はCSSのコメントアウト/* */で囲われた書式となっています。また「Theme Name：」は、そのテーマの名前を表す必須の項目になります。

上記コメントヘッダーが不足していると、そのstyle.cssを含むテーマはWordPressから認識されませんので編集時には注意しましょう。

ゼロからテーマを自作する際には、忘れずに設定する様にしましょう！

コメントヘッダーのテンプレート【コピペOK】

最低限必要なコメントヘッダーについて触れましたが、その他の項目も含めたコピペで使えるテンプレートを用意しました。

▼コメントヘッダーのテンプレート

/*
Theme Name: テーマの名前を記入します
Theme URI: テーマのURLを記入します
Author: テーマの作者（組織名）を記入します
Author URI: テーマの作者のURLを記入します
Description: ここにテーマの説明文を記入します
Version: 1.0
*/

「Theme Name:」以外は基本的には無くてもOKですが、自分以外にテーマの概要を伝えるためにも、ある程度の情報を含めるのが適切といえます。

オリジナルテーマ制作の際には、ぜひ使ってみて下さいね！

コメントヘッダーの項目一覧

これまでに紹介した内容を含む、コメントヘッダーで使える主要な項目を掲載します。

▼主要なコメントヘッダー

Theme Name:	テーマの名前を記入します
Theme URI:	テーマのURLを記入します
Author:	テーマの作者（組織名）を記入します
Author URI:	作者のURLを記入します
Description:	テーマの説明文を記入します
Version:	テーマのバージョンを記入します
License:	テーマのライセンスを記入します
License URL:	ライセンスのURLを記入します
Tags:	テーマに関連するタグを設定できます。タグはカンマ区切りで複数設定できます
Template:	親テーマの名前を記入します（※そのテーマが「子テーマ」の場合にのみ必須となります）

「style.css」を読み込む方法

以下の方法でファイルを編集すると、テーマ内の各ページからstyle.cssが読み込めるようになります。

▼style.cssを読み込む方法

「functions.php」にコードを追加する
各ページで「wp_head()」関数を実行させる

①「functions.php」にコードを追加する

まずはテーマ内の「functions.php」にCSSファイルを読み込むための設定を追加します。

▼function.php

// テーマのスクリプトを読み込む
function enqueue_scripts(){
    // css
    wp_enqueue_style("style",get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

②各ページで「wp_head()」関数を実行させる

この上で各ページの<head>～</head>タグ内に <?php wp_head(); ?>というPHPコードを埋め込んでゆきます。

▼wp_head()関数の使用例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>トップページ</title>
    <?php wp_head(); ?>
</head>

上記作業を行うと、WordPressテーマの処理を通して各ページでCSSファイルが適切に読み込まれる様になります。また、上記は「header.php」などの共通化されたファイルでを実行させた方が適切な実装となります。

テンプレートファイル「header.php」を作成する方法は、以下の記事で確認できます。

おススメ記事