WordPress

WordPressで特定の記事やページにカスタムフィールドで指定したCSS・JSファイルを読み込む

個人的に今後ちょっと使いそうな機能だったのでメモがてらエントリー。WordPressで特定の投稿記事や固定ページに自分が指定したCSSファイルやJSファイルを読み込ませたいと思ったのでそのカスタマイズの紹介です。使い方はカスタムフィールドに読み込ませたいCSSファイルやJSファイルをちょちょいと指定してやるだけです。

[ads_center]

CSSとJSを読み込ませるカスタマイズ

基本的にはfunctions.phpにカスタムフィールドで指定した値を取得してadd_actionでwp_headにフックさせて出力させるというようなことをやっています。CSSファイルはsample-css、JSファイルはsample-jsというフォルダを作成して、その中に読み込むファイルを入れるようになってます。違うフォルダ名をつけたい場合はsample-css、sample-jsという部分を好きな名前に変更して下さい。最初は以下のコードを試してみました。そしたらCSS、JSファイル共に各1ファイルしか読み込めなかったものです。

function sample_css_js(){
    if(is_single()||is_page()){
        if($css = get_post_meta(get_the_ID(), 'sample_css', true)){
            echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('template_directory') . '/sample-css/' . $css . '" />' . "\n";
        }
        if($js = get_post_meta(get_the_ID(), 'sample_js', true)){
            echo '<script type="text/javascript" src="' . get_bloginfo('template_directory') . '/sample-js/' . $js .'"></script>' . "\n";
        }
    }
}
add_action('wp_head','sample_css_js');

まあ1つしか取得してないので当たり前ですよね…。別に各1ファイルだけでもいいんですが、万が一各ファイルを複数指定したいっていう時が来た場合に備えてもう少しカスタマイズしてみます。そして出来上がったのが以下になります。これでいくつでもファイルを読み込ませることができます。

function sample_css_js(){
    if(is_single()||is_page()){
        if($css = get_post_meta(get_the_ID(), 'sample_css', false)){
            foreach($css as $samplecss){
                echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('template_directory') . '/sample-css/' . $samplecss . '" />' . "\n";
            }
        }
        if($js = get_post_meta(get_the_ID(), 'sample_js', false)){
            foreach($js as $samplejs){
                echo '<script type="text/javascript" src="' . get_bloginfo('template_directory') . '/sample-js/' . $samplejs .'"></script>' . "\n";
            }
        }
    }
}
add_action('wp_head','sample_css_js');

ただforeachしただけですが…。ポイントはget_post_metaの第三引数の値をtrueからfalseにしたとこですかね。こちらをfalseにすることで第二引数のカスタムフィールドの値を配列で返してくれます。なのであとはその値をforeachを使って1つずつセットしていけばいいですね。WordPress Codexが参考になるかと思います。

あとは実際に読み込みたい記事のカスタムフィールドでsample_cssまたはsample_jsに読み込ませたいファイルを指定すればいいだけです。こんな感じで。

カスタムフィールドでCSSまたはJSファイルを追加

もっといい方法があるかもしれませんが、とりあえず自分がやりたかったことができたのでこの辺にしときます。

コンテンツの量に合わせて伸び縮みするシンプルでいい感じのjQueryタブパネル「Organic Tabs」前のページ

Photoshopで文字や画像を斜めから見た遠近法のような感じにするやり方次のページ

関連記事

  1. WordPress

    WordPressのショートコードをテンプレート(テーマ)内で使用したい時のやり方

    WordPressのショートコードってとても便利ですよね。AddQui…

  2. WordPress

    MAMP(インストール済)でWordPressをローカル環境で動かすまでの簡単な手順

    久しぶりにMAMPを使って新しいWordPressのローカル環境を作っ…

  3. フォトグラファーに最適なWordPressテーマ集

    WordPress

    フォトグラファーに最適なWordPressテーマ集

    フォトグラファーに最適なWordPressテーマ集「77 Free a…

  4. WordPressでmicrodataを使ったパンくずリスト

    WordPress

    WordPressでパンくずリストをmicrodataを使ってマークアップするやり方

    そういえばこのサイトではまだパンくずリストを作成していなかったので今回…

  5. WordPress

    WordPressのContact Form 7にCAPTCHAを導入するためのプラグイン「Real…

    WordPressのお問い合わせフォーム(Contact Form 7…

  6. WordPressでパンくずリストを設置

    WordPress

    WordPressの自動バックグラウンド更新(アップグレード)の設定について

    先日、WordPressのアップグレードがあったので後でやろう思ってい…

コメント

  1. この記事へのコメントはありません。

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP