『Luxeritas』でフッターにカスタムフィールドを挿入する方法
WordPressテーマの『Luxeritas』には、ヘッド内にコードを挿入するためのカスタムフィールド addhead が用意されています。
カスタムフィールドの新規追加でフィールド名（名前）名に「addhead」、値に<script>～</script>を入力。そして新規追加すれば、その値が</head>の前に挿入されます。
しかしこれだと <script>～</script> もそのまま挿入され、ページ読み込み時にレンダリングをブロックしてしまいます。
スクリプトは下の方に入れたいところでなのに、addfoot は使えない。
そこでフッターにもカスタムフィールドの値を入れられるよう、子テーマの foot.php をいじりました。子テーマに追記するだけなので、とてもかんたんです。
また、 addhead で script がうまく動かないという記事を幾つか見かけたので、動いているかの確認と、どうしてもだめな場合に、<head>内に書き込むための新たなカスタムフィールド追記コードも載せておきます。
カスタムフィールドとは？
カスタムフィールドとは、Wordprss本体は利用しないけれど、テーマやプラグイン、投稿者が追加して、値（データ）を格納しておくための場所です。
本文やタイトルと同じく投稿ページや固定ページごとに追記できます。
しかしカスタムフィールドを増やしただけでは、そこに格納されたデータはページ上には表示されません。
カスタムフィールドの内容をページに反映させるためには、wordpress側がそのフィールドを呼び出して表示するように設定する必要があります。
といってもやることはシンプル。表示させたいパートの子テーマに、そのフィールドを表示させるための php コードを追記するだけです。
スクリプトをカスタムフィールドに入れたい理由
スクリプトを使うなら本文下に入れればいいじゃん、となりますよね。
なぜカスタムフィールドを使いたいかと言うと、ですね。
スクリプトを本文に書くと、ワードプレスが空行を許してくれないことがあるからです。
スクリプトを本文に書くのは面倒なんです。
下準備
カスタムフィールド名は『Luxeritas』にかぶらないよう、add_head と add_foot にします。
add_head の内容が出力されているかの確認にいちいちソースを見るのは面倒。
また、スクリプトの動作確認も兼ねていますから、Javascriptが実行されているかの確認のための要素を追加しておきます。
テキストモードで本文にこれをコピペ
<div id="div-addhead">addhead（デフォルト）挿入失敗</div>
<div id="div-add_head">add_head挿入失敗</div>
<div id="div-add_foot">add_foot挿入失敗</div>ビジュアルモードにすると、初期状態では「addhead（デフォルト）挿入失敗」となっています。
それぞれのカスタムフィールドの値がページに挿入され、スクリプトが動いていたら成功と表示されます。
最初から使えるはずの addhead が動くかを確認するなら、カスタムフィールドに以下の内容を入力します。
名前
addhead
値
<script>jQuery(function($){$("#div-addhead").text("addhead挿入成功");});</script>
すでにaddheadを使っているならドロップダウンリストに表示されます。
まだ使っていないなら、新規追加を押して入力欄を表示します。
フィールドにaddheadとスクリプトを記入したら『カスタムフィールドを追加』
カスタムフィールドを挿入するコード
コードの追加は管理バーの『Luxeritas』⇒『子テーマの編集』で行います。
</head>の前に書add headは『Head タブ』、下に入れるadd_footは『フッター』タブのコードの末尾 ?> の後ろに記入します。
Head タブ
<?php
{
$add_head = get_post_meta($post->ID,add_head,true);
if($add_head) {
echo $add_head;
}
}
?>
フッター
<?php
{
$add_foot = get_post_meta($post->ID,add_foot,true);
if($add_foot) {
echo $add_foot;
}
}
?>
あとはカスタムフィールドに add_head と add_foot を追加するだけです。
名前
add_head
値
<script>jQuery(function($){$("#div-add_head").text("add_foot挿入成功");});</script><script>console.log('add_head');</script>名前
add_foot
値
<script>jQuery(function($){$("#div-add_foot").text("add_foot挿入成功");});</script>ページを読み込んで、「失敗」が「成功」に変わっていたら成功です。
カスタムフィールドの内容は、カスタムフィールドに付属する「更新」ボタンを押せば内容は反映されます。Wordpressのプレビューボタンでなく、プレビュータブを再読込すれば結果がわかります。
「headタグ」のカスタムフィールド挿入位置はjQueryよりも後ろなので、jQueryコードは使えるはずです。しかし遅延読み込みなどを設定しているとadd_head失敗することがあるかもわかりません。
作業完了
北字を読み込んで、「成功」と表示されていたら完了です。これでかんたんにフッターにjavascriptを挿入できますね。
もちろんカスタムフィールドの値を本文の中に読み込ませることもできます。
子テーマのfunctions.phpを利用すると、ページの一番上に入ります。本文中の場所を指定したければ親テーマをいじる必要があります。
スクリプト類は</body>手前に置くのがいいのですが、そうするにはLuxeritas 本体の functions.php をいじらないといけなくなるためにフッター部に挿入しています。
Luxeritasはアップデートが多いので、本文に入れたいならプラグインを使うほうがいいですね。