WordPress

WordPressでカスタムフィールドを使って任意のコードやファイルをhead内に読み込ませる

以前「WordPressで特定の記事やページにカスタムフィールドで指定したCSS・JSファイルを読み込む」という記事を書いたんですが、こちらは指定したファイルを読み込ませるものでした。で、今回はカスタムフィールドに設定した値をそのままhead内に読み込ませるカスタマイズです。なので、フルパスで何かを読み込ませてもいいし、CSSやJavaScriptを直書きしても反映してくれるようにしてみます。

[ads_center]

カスタムフィールドの値を読み込ませる

以下をfunctions.phpに記述します。

// header内に任意のコードを読み込む
function head_original_load(){
    if(is_single() || is_page()){
        if($head_original_code = get_post_meta(get_the_ID(), 'head_load', false)){
            foreach($head_original_code as $head_code){
                echo $head_code . "\n";
            }
        }
    }
}
add_action('wp_head', 'head_original_load');

前回のコードを少し削っただけですが、これで好きなコードを読み込ませることができました。

カスタムフィールドの名前にhead_loadと指定して、あとは値に自分が読み込みたいファイルやスクリプトを記述するだけです。カスタムフィールドを設定した数の分だけ読み込むので、複数設定しても大丈夫です。

WordPressカスタムフィールド

例えば上記画像のように、グーグルフォントを読み込んだり、JavaScriptを記述したり、CSSを直接設定したりと自由度が高くなりますね。

カスタムフィールドは設定した記事のみ反映されるので、とても便利です。

関連記事

  1. WordPress

    WordPressでシェアする為のプラグインベスト10

    WordPressでソーシャルサービスなんかにシェアする為のボタンをさ…

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

    WordPress

    WordPressでプラグインなしで関連する記事を一発で呼び出す関数をfunctions.phpに記…

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

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

    WordPress

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

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

  4. WordPress

    予約投稿をカレンダーで一覧管理できるWordPressプラグインEditorial Calendar…

    こちらの記事を見て予約投稿っていいなぁって思ったので初めて使ってみまし…

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

    WordPress

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

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

コメント

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

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP