Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【WordPressでCSSが効かない場合の対処法】

コーディングテクニック WordPressの基礎知識

f:id:wp-lesson:20150825095808j:plain

ワードプレスだとCSSが効かないことがある

「静的なHTMLサイトの場合は問題なくCSS（スタイルシート）が書けるのに、ワードプレスだとCSSが効かないことがある

  • 。いったい何故？」という体験をしたことはありませんか？

なぜワードプレスでCSSが効かないことがあるの？

結論から言いますと、「他のCSSのほうが優先順位が高いから」です。
ワードプレスで作ったページをブラウザで開いて、ソースの内を見てみると、多くの場合次のようになっています。

<head>
・・・
<link rel="stylesheet" src="●●●/テーマ名/style.css" />　・・・（１）
<link rel="stylesheet" src="別のCSS" />　・・・（２）
<link rel="stylesheet" src="別のCSS" />
<link rel="stylesheet" src="別のCSS" />
・・・
</head>
//-->
</style>

（１）は、今使っているテーマ専用のCSSです。
通常はテーマフォルダの中に「style.css」というファイル名で配置されています。

（２）は、テーマに付随するその他のスタイルシートや、インストールしてある各種プラグイン等に付随するCSS群です。これらはお使いのテーマや、インストールしているプラグインによって変わりますが、ワードプレスが自動的にの中に挿入します。

ワードプレスの管理画面（ダッシュボード）の「外観->テーマの編集」から更新できるのは（１）のCSSですが、CSSには優先順位があり、同じスタイル定義が同じページ内で複数回登場すると、一番最後に登場した定義が使われます。

ですから、いくら（１）でCSSを書き換えても、（２）で同じCSS定義が入っていると、（２）のCSSのほうが優先されてしまい、ページの表示に反映されないのです。

この「CSSの優先順位」は、ワードプレスに限らず、全てのウェブサイトに共通するウェブの仕様です。

「原則として、あとから読み込まれるCSSが勝つ」と覚えておけば良いでしょう。
これを基本知識として押さえておくと、ウェブサイトの制作・カスタマイズに役立ちます。

原因は分ったけれど、どうすれば解決できるか？

もう一つ、CSSに重要な仕様があります。読み込み順に関係なく、何が何でも最優先になる書き方があります。

#header {
	margin-top:0 !important;
}

このように、CSS定義に「!important」を付けると、読み込み順（書いた順）に関係なく最優先されます。ちなみに important は「重要な」という意味です。ブラウザに対して「このスタイルが一番重要なので優先させてください」と伝える意味になります。

!important を使うと、ほとんどの場合において（１）のCSSをカスタマイズするだけで解決できてしまいます。

しかし、読み込み順に関係なく必ず優先されてしまう書き方なので、もっと優先させたいカスタマイズが発生すると、テコでも優先順を変えることができなくなってしまうというデメリットがあります。

ですから、CSSのコーディングにおいて、!important の使用は基本的にご法度とされています。どうしてもやむを得ない場合にだけ使うものだということを覚えておいて下さい。

こちらのページにも同じ解説が載っています。
CSS基礎知識〜!importantルールを使う〜

より良い解決方法とは？

（１）と（２）の場所そのものを入れ替えてしまうのです。そうすれば、!important を使わなくても（１）に書いたCSS定義が自動的に優先されるからです。

HTMLサイトの場合は、ヘッダー部分を直接書き換えてあげればOKです。ワードプレスの場合は、ヘッダー部分のテンプレートファイル（多くのテーマでは header.php というファイル名です）の中に書いてあることが多いので、そこを書き換えればOKです。

ただし、ヘッダー部分のテンプレートには書かれていないテーマもあります。その場合、「外観->テーマの編集」にある functions.php を探してみてください。functions.php は、ワードプレス本体ではなくテーマ側で自由にプログラムを書くためのファイルです。

<?php
function ●●●() {
    wp_enqueue_style( '任意の名前', get_stylesheet_uri() );
    wp_enqueue_style( '任意の名前', get_template_directory_uri() . '/css/example.css' );
}
add_action( 'wp_enqueue_scripts', '●●●' );
?>

functions.php の中に、このような記述があれば、●●● の部分で（１）や（２）にCSSが挿入されている可能性が高いと言えます。探すキーワードは wp_enqueue_scriptsです。 wp_enqueue_scripts は、ワードプレスに備わっている機能で、HTMLの内を目がけてCSSやjavascriptなど任意のファイルを読み込むタグを挿入する役割を担っています。

興味のある方はワードプレス公式ページをご確認ください。
関数リファレンス/wp enqueue style - WordPress Codex 日本語版

ただしこの方法は、CSSのファイル単位で読み込み順を変更しますので、カスタマイズしたい箇所以外で優先順位の入れ替えが発生する可能性もあります。

ベストな解決方法とは？

以上の知識を前提とすると、次の方法がお勧めです。

  1. カスタマイズしたいCSSだけを書いたファイルを用意する（例：my_style.css）
  2. functions.phpで他のCSSよりも後ろにCSSの読み込みを追加する

つまりこういうことです。

<?php
function ●●●() {
    wp_enqueue_style( '任意の名前', get_stylesheet_uri() );
    wp_enqueue_style( '任意の名前', get_template_directory_uri() . '/css/example.css' );
    wp_enqueue_style( '任意の名前', get_template_directory_uri() . '/css/my_style.css' );
}
add_action( 'wp_enqueue_scripts', '●●●' );
?>

この方法なら、自分で分けたCSS（例：my_style.css）は必要最低限の記述量で済みますし、既存のCSSの読み込み順には全く影響を与えませんので、修正が修正を呼ぶような泥沼状態になる心配もありません。

基礎を実戦的に身につけたい方へ

制作中のワードプレスサイトで行き詰ってしまったら、こちらのサイトからお気軽にご相談ください。ワードプレスを得意とするWEBサイト専門のプログラマーがマンツーマンでサポートさせていただきます。ご相談は無料ですので、お気軽にお問い合わせください。oshierumanaberu.net