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のショートコードをテンプレート(テーマ)内で使用したい時のやり方

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

  2. WordPress

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

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

  3. WordPressアップデートでアイコンが表示されない時の対処方法

    WordPress

    WordPress 3.8のアップデートで管理画面のアイコン画像が上手く表示されない時の対処方法

    先程、WordPress 3.8にアップデートしたら管理画面の上部バー…

  4. WordPress

    テーマにWordPressのウィジェットを対応させ検索フォームをカスタマイズする

    WordPressにはウィジェットという便利な機能があります。これを使…

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

    WordPress

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

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

コメント

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

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP