WordPressの「CSS追加」の疑問を全パターン解決します

WordPressの「CSS追加」の疑問を全パターン解決します
この記事を監修・執筆した専門家
【課題①】どこでもいいのでとにかくCSS(スタイルシート)を書きたい
【課題②】管理画面のメニュー「追加CSS」の使い方を知りたい
【課題③】CSSの外部ファイル読み込みを追加したい
【課題④】一番ベストなWordPressのCSS追加方法が知りたい
まとめ

↓↓↓　サイト内人気記事　↓↓↓

【2022年版】WordPressユーザーが絶対に知っておくべき
おすすめ人気レンタルサーバー8選！

WordPressの「CSS追加」の疑問を全パターン解決します

この記事では『WordPressの「CSS追加」』についてくわしく解説していきます。

このページをご覧になっている方はWordPressの「CSS追加」に関して何か課題を持っていると思うので、想定されるパターンに対する回答を全て用意しました。

「CSS 追加」に関するお持ちの課題に該当する項目を選んで読んでみてください

【課題①】どこでもいいのでとにかくCSS(スタイルシート)を書きたい
【課題②】管理画面のメニュー「追加CSS」の使い方を知りたい
【課題③】CSSの外部ファイル読み込みを追加したい
【課題④】一番ベストなWordPressのCSS追加方法が知りたい

この記事を監修・執筆した専門家

こんにちは！この記事を監修・執筆した斎藤はじめと申します。
私は現役のエンジニアで、普段はWordPressの開発案件などをメインに担当しています。経歴としては誰もが知っている月間数千万人が利用するサービスの開発をしたり、今でも月間数百万人が訪問する規模のWordPressサイトの運営しております。WordPressを触らない日はありません。

そんな私がプロの目で解説していきます！

【課題①】どこでもいいのでとにかくCSS(スタイルシート)を書きたい

まずは「どこでもいいのでとにかくCSS(スタイルシート)を書きたい」という方向けに2つ方法を紹介します。

【A】「初心者」の方、または「とにかく急いでいるので早く書きたい」
【B】中～上級者の方、または「しっかりベストな書き方を知りたい」

【A】「初心者」の方、または「とにかく急いでいるので早く書きたい」という方向け

とにかくCSSが書きたいという方の中でも「WordPressやCSSに関してまだよくわからない初心者」の方、もしくは「とにかく急いでいるのですぐにCSSを書きたい」という方は『【課題②】管理画面のメニュー「追加CSS」の使い方を知りたい』に進んでください。

【B】中～上級者の方、または「しっかりベストな書き方を知りたい」という方向け

とにかくCSSが書きたいという方の中でも「中～上級者の方」、または「しっかりベストな書き方を知りたい」という方。

ぜひ以下のページの「上級者」のやり方を読んでみてください。
ベストなCSSの追加方法をまとめています。

WordPressの「CSS編集」1番おすすめな方法とダメな方法～プラグイン比較表もあり

WordPressでCSSを編集する一番の方法とは？この記事では「WordPressでCSSを編集する一番おすすめの方法、やってはダメな方法」などCSS編集について初心者～上級者誰でも読めるように、詳しく解説していきます...

【課題②】管理画面のメニュー「追加CSS」の使い方を知りたい

WordPressには標準で「追加CSS」という名前のCSSを編集できるエリアがあります。
最初はこちらを編集するのが一番手っ取り早いでしょう。

初心者におすすめのCSS編集方法。とりあえずCSSを記述できればよいというときに一番やりやすいのが「カスタマイザー」と呼ばれるメニューの中にある「追加CSS」に入力する方法。

これはWordPressにデフォルトで実装されています。

起動は上部の管理バーの「カスタマイズ>追加CSS」から。

もしくは管理画面の「外観>カスタマイズ＞追加CSS」から起動します。

追加CSSを選択。

編集エリアにCSSを貼り付けていきます。簡単な補完機能や文法チェック、リアルタイムで右側にプレビューを反映してくれるので確認しながらCSS編集ができます。

※テーマによってこの「追加CSS」メニューが消されている場合は「Simple Custom CSS Plugin」というプラグインをインストールすることで同じ場所に同じようなメニューが追加されるので代替になります。

【課題③】CSSの外部ファイル読み込みを追加したい

WordPressのCSS追加に関する課題としては「外部ファイル読み込みを追加したい」という場合もあると思います。

CSSの外部ファイル読み込みを追加するとはどういうことかというと具体的には以下のような行を追加することです。

<link rel="stylesheet" href="/sample.css" madia="all">

sample.cssというファイルを新規作成し、HTML内のheadの中に追加することでCSSの外部ファイル読み込みが実現します。

CSSの外部ファイル読み込みを追加する2つの方法

このCSS外部ファイル読み込みを追加する方法を2つ紹介します。

【A】プラグインを使ってCSSを管理する方法【おすすめ！】
【B】functions.phpを編集してCSS追加する方法

項目	【A】プラグインでCSS追加 ※おすすめ！	【B】functions.phpでCSS追加
簡単さ	★★★★☆	★★★☆☆
自由度	★★★★☆	★★★★★
今後の拡張性メンテナンス性	★★★★★	★★☆☆☆
初回の作業完了までにかかる時間	20分	20分

【A】プラグインを使ってCSSを管理する方法【おすすめ！】

1つ目のCSS追加方法は筆者が一番おすすめするCSS管理方法で、プラグイン使う方法です。

項目	【A】プラグインでCSS追加 ※おすすめ！
簡単さ	★★★★☆
自由度	★★★★☆
今後の拡張性メンテナンス性	★★★★★
初回の作業完了までにかかる時間	20分

紹介するのは次のプラグイン。

外部ファイル化、管理画面にも出力可なプラグイン「Simple Custom CSS and JS」

紹介するのは「Simple Custom CSS and JS」というプラグインで「外部ファイル化」や「管理画面やログイン画面にコードを追加できる」のが特徴です。これもインストール40万以上の★4.5評価を得ている大人気プラグインです。

「管理画面＞プラグイン＞新規追加」から以下のようにインストールして、有効化します。

まずは今インストールした「Simple Custom CSS and JS」で外部ファイル化されたCSSを作成します。
以下の通り、CSSの設定の中身を入力していきます。

CSS入力時の簡単な補完機能はついています。

これでプラグインの操作は完了です。

読み込みの確認

実際に外部CSSファイルが読み込まれたか確認してみましょう。

ブラウザ上で右クリックして「ページのソースを表示」

以下のような行があれば成功です。

<link rel='stylesheet' id='1489-css' href='//●●●●●/wp-content/uploads/custom-css-js/1489.css?v=5802' media='all' />

あれ？先ほどファイル名をつけたのにその名前で読み込まれてませんね。
これは仕様です。ステータスが有効で自動で外部ファイル読み込まれる場合は番号で読み込まれるようです。

つけたファイル名を使いたい場合はステータスを無効にして手動でlinkタグを別途パーマリンクで設置するなどしてください。

この「Simple Custom CSS and JS」プラグインをもっと応用させた使い方はこちらの記事で確認してください。

内容は中～上級者向けとなっていますが、一度身に着ければWebサイト制作がぐっと便利になりますのでぜひマスターしておいてほしい内容です。

【B】functions.phpを編集してCSS追加する方法

2つ目のCSS追加方法はfunctions.phpというファイルを編集するというやり方です。

項目	【B】functions.phpでCSS追加
難易度	★★★☆☆
自由度	★★★★★
今後の拡張性メンテナンス性	★★☆☆☆
初回の作業完了までにかかる時間	20分

functions.phpと新規CSSファイル作成がパパっと修正できるスキルがある方はこちらのほうが早いです。

そうでない方は、①②の方法でかかる時間もあまり変わらないと思うので、どちらにするか迷ったら、ぜひ①の「プラグインを使った方法」をおすすめします。

functions.phpでCSSファイルの読み込みを追加するサンプルソースコード

functions.phpでCSSファイルの読み込みを追加するには以下のソースコードを追加します。

<?php

//==================================================
// CSSファイルの追加読み込み
//==================================================
add_action("wp_enqueue_scripts", function () {

	//★以下2つを設定
	$css_handle = "my";          //登録ハンドル名(linkタグのid属性として使われる)
	$css_url = "/css/my.css";    //①CSSファイルのパス

	$ver = false;
	//$css_local_path = convert_url_to_local($css_url);
	$css_local_path = ABSPATH . $css_url;

	if(file_exists($css_local_path)){
		$ver = date_i18n('Ymdhis', filemtime($css_local_path));
	}

	//wp_enqueue_styleでCSS読み込みををWordPressに登録する
	wp_enqueue_style(
		$css_handle    //登録ハンドル名
		, $css_url     //CSSの場所
		, array()      //このCSSより前に読み込むCSSのハンドル名のリスト
		, $ver         //ver=に反映させるバージョン番号(省略時は自動)
	);

}, 100);

※2022/2/5修正

ソースコードの解説

アクションフック

headの中に文字列を出力するにはアクションフックという機能を使います。

add_action("wp_enqueue_scripts", function () {処理内容}, 優先順位);

アクションフックはWordPressの特定の場所に処理を差し込める機能の事です。

wp_enqueue_scriptsはWordPressがheadタグの内容を出力しようとする最初に呼ばれるフックです。優先順位はデフォルト10で数が増えるほど順番が後ろになります。

CSS読み込みの登録

アクションフックの処理の中にCSS読み込み登録の処理を記述します。

wp_enqueue_style(
	$css_handle,            //登録ハンドル名
	$css_path,              //CSSの場所
	array(),                //このCSSより前に読み込むCSSのハンドル名のリスト
	date_i18n('Ymdhis', filemtime($css_local_path))    //バージョン番号
);

ハンドル名は自由です。

functions.phpについても補足しておきます。