2008/06/13(金)

WordPressのある特定の投稿に、固有のCSSを適用したい

WordPress

（カスタムフィールドの利用）

　WordPressで記事を書いていて、その記事投稿の一部分にのみ独自のCSSを適用したい、という要求がしばしば発生する。その場合の対処は、

  1. 独自のidもしくはclassを割当て、style.css等の共用CSSファイルにその部分を記述する。
  2. 適用したいタグの中に直接 style="…" とアトリビュートとして記述する。
  3. 投稿部分に <style> タグを記述する。
  4. JavaScript を用いるなどして、強引にスタイルを変更する。
  5. WordPressのカスタムフィールド欄にCSS文を記述し、テンプレートファイルでカスタムフィールドを <head> 内の任意の場所に出力できるように修正する。

　といった方法が考えられる。しかし……

　1. の方法は、その投稿のためだけに共用CSSに記述するのは、あまり良い方法とは思えない。今後も他の記事で頻繁にその id ないし class を使い回すというならともかく、そのような予定も全くないのに共用CSSに記述するのはどうであろうか。ある記事のためだけの特殊なCSSなんて、時間が経つと、往々にしてすっかり忘れてしまうものだ。ある時共用CSSを見直して、それを不要なものだと思い込んで削除してしまったり、逆に、不要になった記事を削除した時、共用CSSの該当部分のほうは削除し忘れて、ゴミとして残ってしまったり……。
　そもそも、今後も同様の要望が発生した時に、また同じように共用CSSに追加してゆくのか？　すると共用CSSはそれらの特例的なCSSで膨れあがり、特殊な事例が混在していってしまいには収拾がつかなくなったりしないだろうか。──という次第で、どうしても共用CSSを使うことには抵抗がある。

　では 2. の方法はどうか？　これはたぶんもっとも簡単でシンプルな実現方法だ。ただし、記述するCSS文が多くなり過ぎると、HTMLソースがかなりひどいことになってしまうし、それにまた、繰り返し出てくるタグ（例えば <td> <li>）に対して、そのひとつひとつにいちいちスタイル属性を記述しなければならないというのも、面倒だし美しくもない。

　3. は、<body> 内に <style> を記述することになるから、これは文法違反になる。うまく動作するブラウザもあるけれど、今後もうまくゆくとは限らない。文法を厳密に解釈するブラウザがあれば、当然 NG になるし、その時ブラウザがどのように振る舞うかなど予想もつかない。

　4. は、これもちょっと採用したくない方法だ。まず、JavaScriptを投稿文中に直接書くのは、やはりHTMLソースとしてあまり美しくないし、外部ファイルにして読み込むのも、なんだかなあという感じだ。汎用性のあるスクリプトならまだしも、その時々に応じたCSS文をスクリプト中に書かなければならない以上、他の記事では使えない特殊なものにならざるをえない。というわけで、少々大袈裟すぎる気がする。

　というわけで、最後に残った 5. の方法を思いついた（もしかしたら、他にもぼくと同様のことを考えた人間がいるかもしれない）のだが、ぼくにはこれが一番適した方法のように思えるのだ。折角 WordPress にはカスタムフィールドという機能があるのだから、これを利用しない手はないと思う。カスタムフィールドのキーに 'CSS' という名前をつけ、'値' にCSS文を記述する。で、テンプレートの <head> 内に、'CSS' フィールドの内容を出力するよう変更を加えておく。テンプレートに変更を加えるのは最初だけなので、これなら、今後も同様の要求が起きた場合は、ただカスタムフィールド内にCSS文を記述するだけで済むから、とても簡単だ。しかも、記事本文とその記事独自のCSSを投稿画面の中でまとめて扱えるから、記事の修正や削除時にも忘れず対応できる。いいことずくめじゃないか。

　ただ、カスタムフィールドを他の目的にも利用している場合は、注意が必要だ。そっちの出力では 'CSS' というキーのフィールドは出力をキャンセルさせなければならないから。
　ぼくの場合はもともと、カスタムフィールドを一括してリスト出力するような使い方はしていないので、全く問題なかったのだけれど。

カスタムフィールドを利用する方法 : Sample

　一応下記に備忘とサンプルをかねて、テンプレートファイルの header.php の <head> 内に追加したPHPソースを掲載しておく。

<?php
$OptionCSS = '';
if (have_posts()) : while (have_posts()) : the_post();
    if ($Tmp = get_post_meta($post->ID, 'CSS', true)) $OptionCSS .= $Tmp . "\n";
endwhile; endif;

if ($OptionCSS) {
    $EchoOptionCss = <<<EOM
<style type="text/css">
{$OptionCSS}
</style>\n
EOM;
    echo $EchoOptionCss;
}
?>

使用例

　使用例として、以下のテーブルに、このテーブル固有のCSSを適用してみよう。表内の記述が、この投稿のカスタムフィールドに設定したCSS内容である。このページのHTMLソースを確認してもらえばわかることだが、 <head> 内にこの表と同じCSSの記述が見つかる筈。

キー 値
CSS table.ExampleTbl {
    margin: 1em 20px 1em 180px;
    border-collapse: collapse;
}
table.ExampleTbl th ,
table.ExampleTbl td {
    padding: 2px 6px;
    border: 1px solid #bcc;
}
table.ExampleTbl th {
    color: #366;
    background: #def;
}

Filed under: CMS,Sample | タグ: ,

Tail-Lagoon @ 17:56

コメントおよびトラックバック受付中です。
TB : http://weblogs.tail-lagoon.com/WebPC/2008/06/13/30/trackback/

3 件のコメント/トラックバック

  1. 特定の記事のスタイルシートを定義 - Getting OUT : 2009/05/03(日)10:36

    [...] http://weblogs.tail-lagoon.com/WebPC/2008/06/13/30/ [...]

  2. ネットショップとWPとワタクシ(´・ω・｀) : 2009/09/13(日)11:36

    パンくずリストとデザインの格闘

    さて、前回の続き。

    前回、何とかパンくずリストを使うめどが立って安心したのだけれど。実際見てみると、トップページに出るトップページみたいな言葉のみのリンクが張られない…

  3. id4s_blog » 投稿ページにCSS : 2009/11/15(日)19:08

    [...] http://weblogs.tail-lagoon.com/WebPC/2008/06/13/30/comment-page-1/ [...]

コメントをどうぞ

この投稿へのコメントは RSS 2.0 フィードで購読できます。

CakePHP 関連リンク   |   CakePHPの命名規則   |   PageUp