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でプラグインなしで関連する記事を一発で呼び出す関数をfunctions.phpに記…

    WordPressのシングルページで、よく記事の終わりにその記事に関連…

  2. WordPressのログイン時のツールバー

    WordPress

    WordPressでログイン中に上部ツールバーを表示・非表示にする設定方法

    WordPressでログイン中に上部ツールバーを表示または非表示にする…

  3. WordPress

    WordPressプラグイン「WPtap Mobile Detector」を使えばスマートフォン専用…

    WordPressでスマートフォン専用のテーマを作成した場合、iPho…

  4. WordPress

    WordPressの公式ロゴマークは公式サイトでダウンロードすることができる

    何気なくWordPress公式サイトを見ていたら、WordPressの…

  5. WordPress

    WordPressで自分だけのショートコードの作り方

    WordPressのショートコードが便利なのでちょこちょこ使い始めてま…

コメント

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

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP