WordPressのカスタムフィールドを用いて個別ページにCSS・JavaScriptコードを組み込むカスタマイズ方法

WordPressで記事ごとに個別のCSSを設定する方法3選を読みました。

この記事を読んで、今更ながらに投稿ページ、固定ページに、管理画面から手軽に個別のCSS等設定を組み込む方法を知りました。

僕はこれまで、「スマートな方法じゃないなぁ」と思いながらショートコードとか、テンプレートに条件分岐して書き込んだりしていたので、良い方法を知ることができました。

で、冒頭の記事の中に、3種類の設定を組み込む方法が出てくるのですが、今回はカスタムフィールドを利用して個別ページにCSSやスクリプトを組み込む方法を紹介したいと思います。

今回のカスタマイズを行うことで、以下のようなページごとに個別コードを用いた記事をテンプレートをいじることなく手軽に作成することができるようになります。

Wordpressテーマの背景を動画にするカスタマイズ方法
Wordpressテーマの背景に動画を利用する方法の紹介です。 編集する前は、「結構大変なんだろうな」と思っていたのですが、動画用のタ...
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
先日、「Hover.css」というボタンをホバー時のCSSエフェクト集があるのを知りました。 このHover.cssを、ちょっ...
スポンサーリンク
レクタングル(大)広告

カスタムフィールドとは

カスタマイズの前に、カスタムフィールドについて簡単に説明します。

WordPress投稿ページには、基本的に「タイトル」と「本文」を書き込む入力欄があります。

カスタムフィールドとは、それ以外の情報を入力するための補助的な入力欄みたいなものです。

例えば、不動産サイトなどでは、「価格」「間取り」「住所」「交通」のような入力項目を設定して、テンプレート側で出力させることができます。

ただ、カスタムフィールドは、Wordpressデフォルトの機能そのままでは、出力させることができません。情報を出力させるには、プラグインか、、プレートのカスタマイズが必要になります。

カスタムフィールドの表示方法

カスタムフィルは、Wordpressデフォルト状態では表示されていません。

表示させるには、投稿ページにある「表情クション」をクリックします。

表示オプションをクリック

すると、以下のように「カスタムフィールド」というチェック項目が表示されるのでチェックします。

カスタムフィールドにチェック

そうすると、カスタムフィールドの入力欄が表示されます。

カスタムフィールド入力欄

ここに、様々な情報を入力することで、プラグインやテーマ側からその情報を利用することができます。

今回は、記事ごとに個別に出力されるカスタムフィールドを用いて、JavaScriptやCSSを設定できるようにする方法です。

カスタマイズの主な手順

今回のカスタマイズは、以下のようなことを行います。

  1. カスタムフィールドを<head></head>に組み込む
  2. カスタムフィールドを</body>タグ手前に組み込む

基本的に、スクリプトファイルやCSSファイルを読み込んだりするのは、headタグ内か、bodyの終了タグ手前なので、そこにコードを挿入できるようにカスタマイズします。

headにカスタムフィールドを組み込む

まずは<head></head>内にカスタムフィールドを組み込むためのテンプレートを作成します。

今回は、テーマ内に新しく「head-custom-field.php」というファイルを作成し、そこに以下のようなコードをコピペします。

あとは、<head></head>内のどこかで以下のようにテンプレートを呼び出します。

このようにすることで、個別ページに<head></head>内に以下のような呼び出しなどを追加して利用できるようになります。

  • <style>でCSSを書く
  • <link>でCSSファイルを読み込む
  • <script>でスクリプトファイルを読み込んだり、jQueryを追加

bodyの終了タグ手前にカスタムフィールドを組み込む

次は、</body>手前にカスタムフィールドを組み込むためのテンプレートを作成します。

今度は「footer-custom-field.php」というファイルを作成し、そこに以下のようなコードをコピペします。

あとは、</body>タグ手前で以下のように呼び出します。

このようにすることで、フッター手前で以下のような用途に利用できます。

  • フッターで呼び出す必要のあるスクリプトを書いたり、ファイルを呼び出す
  • スクリプトで利用するためのHTML要素を書く(例:モーダルウィンドウなど)

参考 1記事限定で反映させたいcssやjavascriptをカスタムフィールドで読み込む|ウェブシュフ

カスタムフィールドの利用

今回設定したカスタムフィールドを利用するには、以下のように利用します。

head部分のカスタムフィールドの利用

ヘッド部分のカスタムフィールドを利用するには、「カスタムフィールド名」に「head_custom」と入力し、利用するコードなどを以下のように書き込みます。

ヘッド部分のカスタムフィールドの追加

入力が済んだら、「カスタムフィールドを追加」ボタンを押してください。以下のように追加されたカスタムフィールドが表示されます。

ヘッド部分のカスタムフィールドが追加された

あとは、記事が投稿されれば、<head></head>内にコードが挿入されます。

body終了タグ手前のカスタムフィールドの利用

フッター部分のカスタムフィールドを利用するには、「カスタムフィールド名」に「footer_custom」と入力し、利用するコードなどを以下のように書き込みます。

フッター部分にカスタムフィールドを追加

入力が済んだら、「カスタムフィールドを追加」ボタンを押してください。以下のように追加されたカスタムフィールドが表示されます。

フッター部分のカスタムフィールドが追加された

あとは、記事が投稿されれば、</body>手前でにコードが挿入されます。

まとめ

カスタムフィールドは、単なるテキスト情報を格納しておく場所だと思っていたので、コードを登録しておいて個別ページのみで利用するという発想はありませんでした。

けれど、このようにカスタマイズしておくことで、個別ページにインタラクティブな機能を組み込むのに、Wordpress管理画面から編集できるようになります。

以前は、テーマのテンプレートファイルを編集して実装していたことを、よりスマートにできるようになりました。テンプレートファイルをいじらないので、もし入力ミスをしたとしても、その影響はそのページだけに限られます。

Simplicityを利用している場合は、既にこの機能は実装済みです。Simplicity上でこのカスタマイズを行ってしまうと、エラーが出てしまう可能性もあります。

『WordPressのカスタムフィールドを用いて個別ページにCSS・JavaScriptコードを組み込むカスタマイズ方法』へのコメント

  1. 名前:まきはら 投稿日:2015/05/19(火) 14:24:13 ID:348885530

    自分の環境ではカスタムフィールド内にスクリプトタグ自体入力できないんですがそちらではできるんでしょうか?
    デフォルトのwordpressでできないのですが。

    ちなみにhetemlの簡単インストールで入れたwordpressの現行最新版です

  2. わいひら 名前:わいひら 投稿日:2015/05/19(火) 17:57:56 ID:643b07d03

    僕の環境では、できています。
    以下の記事も、カスタムフィールドでスクリプトを埋め込んで、動的な動作をさせています。
    サクサク動作する画像拡大スクリプト「Zoom.js」をWordpressで使う方法

    おそらくですが、スクリプトのポストを規制されているサーバーもあるのかもしれません。
    やはり、通常のテキストをポストされるより、スクリプトをポストされると、セキュリティー的によくなさそうなので、サーバーのセキュリティ方針によっては、そういったこともあるのかもしれません。

  3. 名前:まきはら 投稿日:2015/05/19(火) 19:26:52 ID:348885530

    wordpressのほうでXSS対策が厳しくなった話は聞きましたが、サーバー側でも規制している可能性も十分ありそうですね。
    一応サーバー名とスクリプト投稿に関するキーワードで検索してそういった記事が見あたらなかったのでこちらで質問させてもらったのですが。

    サーバーさんに聞いてみようと思います。ご返信ありがとうございました。