WordPressで記事ごとに個別のCSSを設定する方法3選を読みました。
この記事を読んで、今更ながらに投稿ページ、固定ページに、管理画面から手軽に個別のCSS等設定を組み込む方法を知りました。
僕はこれまで、「スマートな方法じゃないなぁ」と思いながらショートコードとか、テンプレートに条件分岐して書き込んだりしていたので、良い方法を知ることができました。
で、冒頭の記事の中に、3種類の設定を組み込む方法が出てくるのですが、今回はカスタムフィールドを利用して個別ページにCSSやスクリプトを組み込む方法を紹介したいと思います。
今回のカスタマイズを行うことで、以下のようなページごとに個別コードを用いた記事をテンプレートをいじることなく手軽に作成することができるようになります。
目次
カスタムフィールドとは
カスタマイズの前に、カスタムフィールドについて簡単に説明します。
WordPress投稿ページには、基本的に「タイトル」と「本文」を書き込む入力欄があります。
カスタムフィールドとは、それ以外の情報を入力するための補助的な入力欄みたいなものです。
例えば、不動産サイトなどでは、「価格」「間取り」「住所」「交通」のような入力項目を設定して、テンプレート側で出力させることができます。
ただ、カスタムフィールドは、Wordpressデフォルトの機能そのままでは、出力させることができません。情報を出力させるには、プラグインか、テンプレートのカスタマイズが必要になります。
カスタムフィールドの表示方法
カスタムフィールドは、Wordpressデフォルト状態では表示されていません。
表示させるには、投稿ページにある「表示オプション」をクリックします。
すると、以下のように「カスタムフィールド」というチェック項目が表示されるのでチェックします。
そうすると、カスタムフィールドの入力欄が表示されます。
ここに、様々な情報を入力することで、プラグインやテーマ側からその情報を利用することができます。
今回は、記事ごとに個別に出力されるカスタムフィールドを用いて、JavaScriptやCSSを設定できるようにする方法です。
カスタマイズの主な手順
今回のカスタマイズは、以下のようなことを行います。
- カスタムフィールドを<head></head>に組み込む
- カスタムフィールドを</body>タグ手前に組み込む
基本的に、スクリプトファイルやCSSファイルを読み込んだりするのは、headタグ内か、bodyの終了タグ手前なので、そこにコードを挿入できるようにカスタマイズします。
headにカスタムフィールドを組み込む
まずは<head></head>内にカスタムフィールドを組み込むためのテンプレートを作成します。
今回は、テーマ内に新しく「head-custom-field.php」というファイルを作成し、そこに以下のようなコードをコピペします。
<?php
///////////////////////////////////////
// ヘッダーのカスタムフィールドを挿入
// ヘッダーで呼び出すCSSやスクリプトなど
// カスタムフィールドに「head_custom」と入力することで使用。
///////////////////////////////////////
if ( is_singular() ){//投稿・固定ページの場合
$head_custom = get_post_meta($post->ID, 'head_custom', true);
if ( $head_custom ) {
echo $head_custom;
}
}
あとは、<head></head>内のどこかで以下のようにテンプレートを呼び出します。
<?php get_template_part('head-custom-field');//カスタムフィールドの挿入（カスタムフィールド名：head_custom）?>
このようにすることで、個別ページに<head></head>内に以下のような呼び出しなどを追加して利用できるようになります。
- <style>でCSSを書く
- <link>でCSSファイルを読み込む
- <script>でスクリプトファイルを読み込んだり、jQueryを追加
bodyの終了タグ手前にカスタムフィールドを組み込む
次は、</body>手前にカスタムフィールドを組み込むためのテンプレートを作成します。
今度は「footer-custom-field.php」というファイルを作成し、そこに以下のようなコードをコピペします。
<?php
///////////////////////////////////////
// フッターのカスタムフィールドを挿入
// フッターで呼び出すスクリプトなど
// カスタムフィールドに「footer_custom」と入力することで使用。
///////////////////////////////////////
if ( is_singular() ){//投稿・固定ページの場合
$footer_custom = get_post_meta($post->ID, 'footer_custom', true);
if ( $footer_custom ) {
echo $footer_custom;
}
}
?>
あとは、</body>タグ手前で以下のように呼び出します。
<?php get_template_part('footer-custom-field');//カスタムフィールドの挿入（カスタムフィールド名：footer_custom）?>
このようにすることで、フッター手前で以下のような用途に利用できます。
- フッターで呼び出す必要のあるスクリプトを書いたり、ファイルを呼び出す
- スクリプトで利用するためのHTML要素を書く（例：モーダルウィンドウなど）
参考 1記事限定で反映させたいcssやjavascriptをカスタムフィールドで読み込む｜ウェブシュフ
カスタムフィールドの利用
今回設定したカスタムフィールドを利用するには、以下のように利用します。
head部分のカスタムフィールドの利用
ヘッド部分のカスタムフィールドを利用するには、「カスタムフィールド名」に「head_custom」と入力し、利用するコードなどを以下のように書き込みます。
入力が済んだら、「カスタムフィールドを追加」ボタンを押してください。以下のように追加されたカスタムフィールドが表示されます。
あとは、記事が投稿されれば、<head></head>内にコードが挿入されます。
body終了タグ手前のカスタムフィールドの利用
フッター部分のカスタムフィールドを利用するには、「カスタムフィールド名」に「footer_custom」と入力し、利用するコードなどを以下のように書き込みます。
入力が済んだら、「カスタムフィールドを追加」ボタンを押してください。以下のように追加されたカスタムフィールドが表示されます。
あとは、記事が投稿されれば、</body>手前にコードが挿入されます。
まとめ
カスタムフィールドは、単なるテキスト情報を格納しておく場所だと思っていたので、コードを登録しておいて個別ページのみで利用するという発想はありませんでした。
けれど、このようにカスタマイズしておくことで、個別ページにインタラクティブな機能を組み込むのに、Wordpress管理画面から編集できるようになります。
以前は、テーマのテンプレートファイルを編集して実装していたことを、よりスマートにできるようになりました。テンプレートファイルをいじらないので、もし入力ミスをしたとしても、その影響はそのページだけに限られます。
自分の環境ではカスタムフィールド内にスクリプトタグ自体入力できないんですがそちらではできるんでしょうか？
デフォルトのwordpressでできないのですが。
ちなみにhetemlの簡単インストールで入れたwordpressの現行最新版です