『Luxeritas』でフッターにカスタムフィールドを挿入する方法

エセルクセリタスアイコンLuxeritas

WordPressテーマの『Luxeritas』には、ヘッド内にコードを挿入するためのカスタムフィールド addhead が用意されています。

カスタムフィールドの新規追加でフィールド名(名前)名に「addhead」、値に<script>~</script>を入力。そして新規追加すれば、その値が</head>の前に挿入されます。

名前(フィールド名) addhead
値 <script>~</script><style>~</style>

しかしこれだと <script>~</script> もそのまま挿入され、ページ読み込み時にレンダリングをブロックしてしまいます。

スクリプトは下の方に入れたいところでなのに、addfoot は使えない。

そこでフッターにもカスタムフィールドの値を入れられるよう、子テーマの foot.php をいじりました。子テーマに追記するだけなので、とてもかんたんです。

また、 addhead で script がうまく動かないという記事を幾つか見かけたので、動いているかの確認と、どうしてもだめな場合に、<head>内に書き込むための新たなカスタムフィールド追記コードも載せておきます。

カスタムフィールドとは?

カスタムフィールドとは、Wordprss本体は利用しないけれど、テーマやプラグイン、投稿者が追加して、値(データ)を格納しておくための場所です。

本文やタイトルと同じく投稿ページや固定ページごとに追記できます。

しかしカスタムフィールドを増やしただけでは、そこに格納されたデータはページ上には表示されません。

カスタムフィールドの内容をページに反映させるためには、wordpress側がそのフィールドを呼び出して表示するように設定する必要があります。

といってもやることはシンプル。表示させたいパートの子テーマに、そのフィールドを表示させるための php コードを追記するだけです。

スクリプトをカスタムフィールドに入れたい理由

スクリプトを使うなら本文下に入れればいいじゃん、となりますよね。

なぜカスタムフィールドを使いたいかと言うと、ですね。

スクリプトを本文に書くと、ワードプレスが空行を許してくれないことがあるからです。

WordPressを使い始めたら悩むこと3選

スクリプトを本文に書くのは面倒なんです。

下準備

カスタムフィールド名は『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とスクリプトを記入したら『カスタムフィールドを追加』

wordpressカスタムフィールド新規追加

カスタムフィールドを挿入するコード

コードの追加は管理バーの『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はアップデートが多いので、本文に入れたいならプラグインを使うほうがいいですね。

Luxeritas Theme