2017/04/12
WordPressで記事ごとに個別のCSSを設定する方法3選
テーマによって多少異なりますが、WordPress ではトップページでも記事ページでも同じ CSS を読み込んでいます。
ただ記事を投稿するだけならまったく問題ないのですが、場合によってはその記事でのみ使いたい指定が出てきますよね。
たとえば「CSS を使った見出しのデザインサンプル」という記事を書くときなど。基本の CSS に追記しておけばいいのですが、他の記事でまったく使わない指定を入れておくと表示スピードにも影響してしまいます。
その記事にだけ個別の CSS を適用するのが一番スマートなので、その方法を解説していきます。
目次
WordPress の CSS
一般的に、CSS は外部リンクとして <head> 内に置かれています。
WordPress では header.php に <head> ～ </head> が書かれているので、現在使用しているテーマをのぞいてみてください。
シンプルなものだと、下の 2 つのうちどちらかになっていると思います。
<link rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>” type=”text/css” />
WordPress デフォルトテーマの「Twenty Twelve」以降は functions.php で style.css を読み込んでいるのでちょっとわかりづらいかもしれません。
いずれにせよ、ブログが表示されたときには style.css へのリンクに置換されています。
Naifix の場合、こんな感じですね。
<link rel=”stylesheet” type=”text/css” href=”https://naifix.com/wp-content/themes/gush-naifix-edition/style.css” media=”all” />
header.php はトップページでも個別記事ページでも共通部品となっていることが多いので、そこに書かれている style.css も各ページ共通となっているわけです。
もしページの種類別に CSS を切り替えたいなと思っているなら、テーマを少し改造するだけで実現できます。
記事ページにのみ個別のCSSを出力する方法
改造方法はいくつかありますが、条件分岐タグを使うのが簡単でわかりやすいでしょう。
たとえば、「CSS」ディレクトリの中に 2 種類の CSS を用意しておき、以下のように記事ページのみ CSS を変えたい場合。
| ページ種類 | 出力するCSS |
|---|---|
| 記事ページ | article.css |
| それ以外の全ページ | style.css |
<head> 内には以下のように記述します。
| 1 2 3 4 5 | <?php if(is_single()): ?> <link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/article.css" type="text/css" /> <?php else: ?> <link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/style.css" type="text/css" /> <?php endif; ?> |
is_single という条件分岐タグを使って、記事ページとそれ以外のページで振り分けています。
ID やスラッグを指定すると、記事を特定して条件分岐することもできます。
ID が 100 の記事か、スラッグが sample となっている記事のみ article.css を出力する場合はこのような感じ。
| 1 2 3 4 5 | <?php if(is_single(array(100,'sample'))): ?> <link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/article.css" type="text/css" /> <?php else: ?> <link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/style.css" type="text/css" /> <?php endif; ?> |
もちろんその他の条件分岐タグを使って、トップページのみ変えるとか、404 ページのみ変える、あるいは複合させてページごとに出力する CSS を変更する、というのも可能です。
参考is_homeとis_mobileを使ってカスタマイズの幅を広げよう！
ページの種類で振り分けるならこの方法で良いのですが、特定の記事のみ分岐するならいちいちテーマの記述を変更しなければなりません。専用の CSS も別に用意する必要があり、ちょっと面倒ですね。
body内のstyle指定は非推奨
一部分のスタイルを変えるだけなら、本文内で直接指定するのが一番楽かもしれません。
指定方法はおもに 2 つ。
まず 1 つ目は、style を記事本文入力エリアの冒頭に書いてしまう方法。
| 1 2 3 4 5 6 | <style> span.gold {color:#ffd700} </style> <span class="gold">ここのテキストがゴールドになります</span>。 この記事以外では反映されません。 |
2 つ目は、タグに直接 style を指定してしまう方法。
| 1 2 | <span style="color:#ffd700">ここのテキストがゴールドになります</span>。 この記事以外では反映されません。 |
厳密に言うと、どちらも HTML の文法上正しくありません。というのも、こんなルールがあるからです。
- <style> は <head> 内に記述すべし
- HTML は構造のみ記述すべし
ただ、現在のブラウザはどちらの方法でもきちんと CSS を反映してくれます。ルールなんて気にしない！ というなら、この方法でも良いかもしれません。
HTML5 では scoped を指定すると本文内でも使えるのですが、これもけっこう厳格な規定があるので難しいかも。
実は僕もこのブログで直接スタイルを指定している記事がいくつかあり、とくに影響はないもののずっと気になっていました。
ルールに従うのであれば、その記事にのみ使う CSS を <head> 内に出力するのが理想的です。
投稿編集ページにCSS入力欄を作りたい
というわけで、管理画面の投稿編集ページに専用の CSS 入力欄を作り、そこに記述したものがその記事にのみ反映されるようにしてみましょう。
このような入力欄を作って、そこに CSS を記述。
この投稿記事のみスタイルが適用される。
記述した CSS はその記事の <head> 内にのみ出力される。
いい感じですね。
フォントカラーを変えるぐらいのシンプルな指定なら、タグに直接 style をつけてもいいかもしれません。
でも、グラデーションをかけたり擬似要素を使うような複雑な指定は、逆に面倒です。こうして CSS 欄を別に作っておいた方が記述も管理も楽ちん。
実装方法はいくつかありますが、ここでは以下の 3 パターンをご紹介します。
- プラグイン「Custom CSS and JS」を使う
- プラグインを使わず <head> にカスタムフィールドの値を出力する
- functions.php に追記して CSS 入力欄を作る
上から順に難易度が上がっていきますので、お好みの方法を取り入れてみてください。
Custom CSS and JS を使う方法
まず、プラグイン「Custom CSS and JS」を使ってみましょう。
インストールと有効化
上記リンクからプラグインをダウンロードするか、管理画面から検索してインストール・有効化します。
投稿編集画面にカスタムフィールドを表示
このプラグインは、カスタムフィールドを使用します。
- カスタムフィールド
- WordPress の標準機能で、投稿時に任意の情報を追加できる。使用時には PHP の知識が必要となる。
デフォルトでは投稿編集ページにカスタムフィールド欄が表示されていないので、右上にある「表示オプション」をクリック。
「表示する項目」に「カスタムフィールド」があるので、そこにチェックを入れます。
「カスタムフィールド」が表示されれば OK です。
名前を custom_css_code に設定してCSSを入力
では、実際に CSS を設定してみましょう。
カスタムフィールドの「新規追加」をクリック。
名前に「custom_css_code」と入れます。
つづいて、値に CSS を入力します。
サンプルではフォントカラーを #ffd700 に指定しました。
本文内のテキストに <span class=”gold”> を入れてみましょう。
きちんと反映されました。
記述した CSS は <head> 内に出力されます。
| 1 2 3 4 5 | <style type="text/css"> /* <![CDATA[ */ span.gold {color:#ffd700;} /* ]]> */ </style> |
ちなみに CDATA というのは XHTML の記述です。とくに気にしなくてもかまいません。
その他の使い方
「Custom CSS and JS」は、その名のとおり JavaScript を使うことができます。また、外部ファイルの読み込みも可能です。
名前を以下のように設定してください。
| 名前 | 値 |
|---|---|
| custom_css | .css までのパスを入力 |
| custom_css_code | CSS を直接入力 |
| custom_js | .js までのパスを入力 |
| custom_js_code | JavaScript を直接入力 |
参考WordPressで記事個別や固定ページ単体にCSS・JavaScriptを追加する
このように非常に便利なプラグインなのですが、残念ながらアップデートが止まっているので、ご利用のさいは自己責任でお願いいたします。
WordPress 4.1 でも動いていますが、今後のバージョンアップで使えなくなるかもしれません。
カスタムフィールドの利用はプラグインがなくてもできるので、気になる方は次項の方法をおすすめします。
プラグインを使わずカスタムフィールドを利用する方法
CSS を <head> に出力するのはさほど難しいカスタマイズではありません。
header.php に数行コピペするだけなので、練習がてらチャレンジしてみてください。
header.php に追記する
まず、header.php に書かれている <head> ～ </head> に以下のコードを追記します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php if (is_single()) { $article_css = get_post_meta($post->ID,article_css,true); if($article_css) { echo <<<EOS <style> $article_css </style> EOS; } } ?> |
CSS はできるだけまとめておいたほうが良いので、テーマの CSS を出力しているコードの前後にコピペしてください。
コードの意味は、「記事ページであれば article_css という名前のカスタムフィールドに書かれた値を出力しますよ」というものです。
カスタムフィールドに何も書かれていなければ、コードは出力しません。
ウェブシュフさんのコードを少し改造いたしました。ありがとうございます。
HTML4.1 と HTML5 の違い
サンプルでは単に <style> ～ </style> としていますが、これは HTML5 の場合です。
HTML4.1 では type をつける必要があります。
| 1 2 3 | <style type="text/css"> $article_css </style> |
現在使っているテーマがどちらなのかわからない場合は、とりあえず type をつけておけば問題ありません。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php if (is_single()) { $article_css = get_post_meta($post->ID,article_css,true); if($article_css) { echo <<<EOS <style type="text/css"> $article_css </style> EOS; } } ?> |
投稿編集画面でカスタムフィールドにCSSを入力
あとは「Custom CSS and JS」と同じ手順です。
カスタムフィールドが表示されていない場合は、表示オプションを呼び出してチェック。
カスタムフィールド欄が出てくるので、「新規追加」をクリック。
名前を article_css として値に CSS を書いていきます。
最後に「カスタムフィールドを追加」ボタンをクリックして完了です。
ここまでのまとめ
このように、カスタムフィールドを使うといろいろなデータを出力することができます。
ちょっと改造すればその記事でのみ使う JavaScript を指定することもできますし、あるいは記事ページの任意の場所に一言コメントを出すこともできますね。
ひとつだけ面倒なのが、使用するときに「名前」を入れる作業です。
そこで、functions.php に追記して CSS 専用枠を作ってみましょう。
カスタムフィールドを使わずにCSS入力欄を作成する方法
functions.php の扱いを間違うと、ブログが真っ白になったり管理画面に入れなくなってしまいます。
事前に必ずバックアップをとっておいてください。
functions.phpに追記するコード
作業自体は難しくありません。
まず、functions.php に以下を追記します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | //Custom CSS Widget add_action('admin_menu', 'custom_css_hooks'); add_action('save_post', 'save_custom_css'); add_action('wp_head','insert_custom_css'); function custom_css_hooks() { add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high'); add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high'); } function custom_css_input() { global $post; echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />'; echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>'; } function save_custom_css($post_id) { if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; $custom_css = $_POST['custom_css']; update_post_meta($post_id, '_custom_css', $custom_css); } function insert_custom_css() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>'; endwhile; endif; rewind_posts(); } } |
NxWorld さんのコードをそのままお借りしました。
これだけで準備完了です。
投稿編集ページの「Custom CSS」にスタイルを入力
投稿画面に移ってみましょう。
本文入力エリアの下に「Custom CSS」という入力欄が出ていれば正常です。
あとはスタイルを指定するだけ。
カスタムフィールド使用時と同じく、<head> 内に <style> を出力してくれます。
カスタマイズ作業に慣れているのであれば、この方法が最もスマートかもしれません。
まとめ
以上、記事ごとに個別の CSS を設定する方法でした。CSS を使ったカスタマイズ記事を書くときは重宝すると思うので、ぜひ使ってみてください。
新しいものを取り入れていくと、ますますブログを書くのが楽しくなりますよ！
それでは、また。
