HiGash.Net ホームページへ戻る

Home [Blog] » WordPressプラグイン「Get Custom Field Values」でheadタグ内にCSS・JavaScriptを読み込む

WordPressプラグイン「Get Custom Field Values」でheadタグ内にCSS・JavaScriptを読み込む

WordPressプラグイン「Get Custom Field Values」でheadタグ内にCSS・JavaScriptを読み込む

今回は、前回のエントリーでもチラッと触れたWordPressのプラグイン Get Custom Field Values を使って、記事毎の<head>タグ内に個別のCSSやJavaScriptを読み込む方法をまとめてみます。

当サイトのように、記事によってテンプレート以外のCSSを当てたり、特定記事のみにlightboxなどのJavaScriptを読み込んだりしたい場合にこの方法を使うと便利です。

JavaScriptは<body>内にも記述できるので投稿フォームに直接記述しても問題ありませんが、 CSSの場合は<body>内に<style>としてまとめて記述するのは文法違反 になります。
<h1 style="font-size:150%;">みたいにHTMLタグに直接CSSを指定する場合を除けば、<head>タグ内にCSSを書く必要が出てきます。

カスタムフィールドを上手に活用しよう

WordPressには カスタムフィールド という便利な機能があります。
たとえば、 All in One SEO というプラグインは<meta name="description">や<meta name="keywords">を記事毎に管理するためにカスタムフィールドにこれらの値を格納しています。
そして、もちろんカスタムフィールドに格納したdescriptionやkeywordsといった値を当該ページが表示される際に読み込んでいます。

All in One SEO

つまり、カスタムフィールドは記事として表示したい本文や画像以外のメタデータを記事毎に設定し、呼び出すための機能です。

このカスタムフィールドを簡単に使うためのプラグインがGet Custom Field Valuesというわけです。

Get Custom Field Valuesの使い方

Get Custom Field Valuesを使えば、カスタムフィールドに任意の名前を付けて値を設定し、 テンプレートに <?php echo c2c_get_custom(‘カスタムフィールド名’); ?> と書くだけで設定した値を呼び出すことができます。

ただし、1点注意したいのは WordPressループ のなかでカスタムフィールドを呼び出すか、それともループの外でカスタムフィールドを呼び出すかということ。

ループのなかでカスタムフィールドを呼び出す場合は、カスタムフィールドを設定した当該記事のみにカスタムフィールドの値が呼び出されます。しかし、ループの外でカスタムフィールドを呼び出す場合には、すべてのページにカスタムフィールドの値が呼び出されることになります。

「WordPressループ」が何なのかわからない人も多いと思うので簡単に説明しておくと、テンプレート中<?php if (have_posts()) : ?>ではじまり、<?php endif; ?>で終わる部分のことを言います。
つまり、すべてのページで異なる記事のコンテンツ部分がループによって処理されています。デフォルトのテンプレートで言うと、ヘッダー(header.php)やフッター(footer.php)、サイドバー(sidebar.php)などは全ページ共通でインクルードされているので、ループ外ということになります。

全てのページで共通のカスタムフィールドを呼び出す

たとえば、当サイトのフッターに「About HiGa」という項目がありますが、ここには全ページに同じ文章が表示されています。

これもGet Custom Field Valuesを使って表示していますが、footer.php(ループ外)でカスタムフィールドの値を呼び出しているので全ページで共通のものが表示されているわけです。

具体的には、「about_higa」という名のカスタムフィールドをどこか適当なページに追加して値として文章を入力します(HTMLタグを使ってもよい)。そして、テンプレートのfooter.php中の文章を表示したい場所に <?php echo c2c_get_recent_custom(‘about_higa’); ?> と記述しています。

about_higa

当サイトのフッターの「About HiGa」の文章はそうやって表示しています。

記事毎に個別のCSS・JavaScriptを呼び出すには

カスタムフィールド「about_higa」と同様に、「css」という名のカスタムフィールドを作って、テンプレート(header.php)の<head>タグ内に下記のような記述をしてこのカスタムフィールドの値を呼び出すとします。


<?php echo c2c_get_recent_custom
('css','<style type="text/css">','</style>');?>

これで確かに「css」というカスタムフィールドに入力された値を<head>タグ内に呼び出すことができます。ただし、header.phpはWordPressループの外側なので、 全ページ でカスタムフィールドの値が呼び出されます。記事毎に個別のCSSを書いて呼び出すには少しだけGet Custom Field Valuesを工夫して使ってやる必要があります。

ページのスラッグが記事毎にユニークであることを利用してカスタムフィールドの作り方と呼び出し方を工夫してみます。ソースコードはこんな感じ(↓)。


<?php echo c2c_get_recent_custom
('css' . "." . $post->post_name,'<style type="text/css">','</style>');?>

これで css.(スラッグ名) というカスタムフィールドを用意してやれば、当該記事のみ<head>タグ内にCSSを呼び出すことができるようになります。

たとえば、このエントリーにだけCSSを読み込みたい時、投稿スラッグは「get_custom_field_values」なので、 css.get_custom_field_values という名のカスタムフィールドを追加して値(CSS)を設定してやるという寸法です。

css.get_custom_field_values

このエントリーには確認用に、 body { background:#0e0e10; } というCSSを<head>タグ内に呼び出しています。ソースコードを覗いてみてください。

ちなみに記事IDを利用してカスタムフィールドを個別に用意し、呼び出す場合のソースコードはこんな感じ(↓)。この場合、カスタムフィールド名は css.(記事ID) ということになります。


<?php echo c2c_get_recent_custom
('css' . "." . $post->ID,'<style type="text/css">','</style>');?>

僕の場合はGet Custom Field Valuesを利用して、下記のようなソースをテンプレートの<head>タグ内に埋め込んでいます。


<?php echo c2c_get_recent_custom
('csslink' . "." . $post->post_name,
'<link rel="stylesheet" href="/wp-content/uploads/',
'" type="text/css" media="all" />');?>
<?php echo c2c_get_recent_custom
('css' . "." . $post->post_name,
'<style type="text/css">','</style>');?>
<?php echo c2c_get_recent_custom('jslink' . "." . $post->post_name,
'<script type="text/javascript" src="/wp-content/uploads/',
'"></script>');?>
<?php echo c2c_get_recent_custom
('js' . "." . $post->post_name,
'<script type="text/javascript">','</script>');?>

csslink.(スラッグ名) というカスタムフィールドは外部CSSファイルを読みたい場合のファイル名を値として設定、 css.(スラッグ名) というカスタムフィールドは<head>タグ内に直接CSSを書きたい場合にその内容を値として設定。

jslink.(スラッグ名) というカスタムフィールドは外部JavaScriptファイルを読みたい場合のファイル名を値として設定、 js.(スラッグ名) というカスタムフィールドは<head>タグ内に直接JavaScriptを書きたい場合にその内容を値として設定。

ただし、下書き状態だと機能しないのでプラグインをちょっとだけ改造

と、ここまですごく便利な感じなんですが、Get Custom Field Valuesをデフォルトのまま使うと、ひとつ大きな問題がありまして・・・。

このやり方、記事が下書きの状態だと機能しないんですよね。記事を公開しないとCSSもJavaScriptも<head>タグ内に挿入されない・・・。これはGet Custom Field Valuesの仕様のようなので、下書きをプレビューする際にも<head>タグ内にCSSやJavaScriptを呼び出すためには、プラグインをちょっと弄ってやる必要があります。

get-custom.php(Version 2.5)の131行目を弄ってやります。

修正前のソース


$sql .= "AND posts.post_status =
'publish' AND ( posts.post_type = 'post' ";

修正後のソース


$sql .= "AND posts.post_status =
('publish' || 'draft') AND ( posts.post_type = 'post' ";

この修正を行えば、記事が下書き状態でプレビューを行ってもCSSとJavaScriptをカスタムフィールドから呼び出して表示結果を確認することができます。

以上、Get Custom Field Valuesを使って<head>タグ内にCSSやJavaScriptを読み込む方法でした。かなり簡単に実装できると思いますので、ぜひお試しください。

こういうニーズはきっと多いはずだから、個人的にはこのぐらいの機能はデフォルトで備えておいてほしいなぁ・・・。

実際、同じようなことを考えておられる方もたくさんいらっしゃるようです。
いろいろ方法を模索してみたんですが、ちょうどGet Custom Field Valuesをフッターでも使っていたので、Get Custom Field Valuesを応用して使ってみることにしました。

ちなみに、元になるアイデアを瞬時に伝授してくれたのは bluegold.me の中の人。いつも何でも教えてくれてサンクスです。

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

5 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. hakase より:

    はじめてコメントさせていただきます。

    まさに知りたかった情報だったため、
    大変参考になりました。

    お恥ずかしながら、やっとカスタムフィールドの意味も
    わかりました。

    今後も立ち寄らせていただきます。
    すばらしいエントリありがとうございました。

  2. HiGash.Net より:

    > hakaseさん
    コメントありがとうございます。
    お役に立ててうれしいです。
    WordPressやプラグインのバージョンが
    この記事を書いたときよりも新しくなっていますので、
    その点だけご注意ください。

  3. [...] [参考サイト] WordPressプラグイン「Get Custom Field Values」でheadタグ内にCSS・JavaScriptを読み込む(HiGash.Net) Get Custom Field Values(WordPressのツボ) wordpress:Get Custom Field Values(Chibiの覚え書き) WP カ [...]

  4. [...] 引用元: WordPressプラグイン「Get Custom Field Values」でheadタグ内にCSS・JavaScriptを読み込む | HiGash.Net. [...]

  5. Real Finder より:

    ループ外でも利用できるカスタムフィールド「Get Custom Field Values」

    ワードプレス、カスタムフィールド利用時のメモ◆POINT・ループ外で利用(ループ外で利用するが記事毎に別の表示をさせたい)ループ外で利用できるカスタムフィールドプラグイン『Get Cust…

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20090212/get_custom_field_values.html/trackback/

Preview

トラックバック
http://higash.net/20090212/get_custom_field_values.html/trackback/

Page Top