WordPressはテーマやプラグインが使えるので自分でCSSを書いてデザインを追加したりjQuery(JavaScript)で独自の機能を追加したり、ということは少ないと思います。

それでもテーマやプラグインでカバーできない部分はオリジナルのコードやスクリプトを書かなければ実現できないことも当然あります。

そして全てのページではなく、特定のページでだけ動作させたいCSSやスクリプトもあるかもしれません。

そこでここでは特定のページでだけオリジナルのCSSやjQueryコードを読み込ませる方法について紹介します。

そのやり方とは・・・

ではどうやって特定のページでだけ特定のCSSやスクリプトを読み込ませるかというと「カスタムフィールド」を使います。

これは記事のタイトルと本文以外の情報をページに埋め込むためのWordPress独自の機能のことです。

この機能を使って埋め込めるのは情報の例をいくつか挙げるとすると・・・

• 検索エンジン上での記事タイトルやデスクリプション
• 独自のCSSやJavaScriptコード
• 商品やサービスに対する評価
• 画像、日付、位置情報、その他色々

などなど・・・

これらの情報を記事とは切り離して埋め込むことで後から編集もしやすくなり、情報を利用しやすくなりますよね。

そしてここでやることはカスタムフィールドを使って編集画面上で独自のCSSやスクリプトの埋め込みのオン・オフを切り替えできるようにすることです。

といっても自力でカスタムフィールドを扱うのは知識が必要な上に手順も面倒なので、「Advanced Custom Fields」というプラグインの力を借りましょう。

このプラグインを使えば次の画像のように独自の設定を用意し、チェックボックスがチェックされているときだけCSSやjQurtyなどのコードを読み込む、といったことが可能になります。

しかも編集画面にオリジナルのフィールドを簡単に作成できるので、特別な知識は必要ありません。

設定手順

それでは独自CSS・JSの埋め込みを行う設定を編集画面に作ってみましょう。

その手順は次の通りです。

1. Advanced Custom Fieldsの導入
2. カスタムフィールドの作成
3. 各ページでのCSS・スクリプトの出力を制御

この３つの手順について順に解説します。

Advanced Custom Fieldsの導入

最初に「Advanced Custom Fields」をWordPressに導入します。

これは誰でもカスタムフィールドを簡単に扱えるように作られたプラグインで編集画面に次のようなフィールドを作成することが可能です。

• テキストエリア
• 数値入力
• セレクトボックス
• チェックボックス
• ラジオボタン
• その他色々・・・

操作方法も難しくなく標準機能だと扱いの難しいカスタムフィールドを簡単に作成することができるのでおすすめです。

このプラグインの導入から基本的な使い方については次の記事でまとめてあるので、インストール・有効化して使える状態にしておきましょう。

カスタムフィールドを簡単追加できる「Advanced Custom Fields」の使い方

WordPressで記事内に記事本文とは別の情報を埋め込みたい場合に役に立つのが「カスタムフィールド」という機能です。ただWordPressの標準機能だと少し扱いにくいのでここでは投稿画面で直感的にカスタムフィールドの入力ができる「Advanced Custom Fields」というプラグインの導入・使い方について解説します。このプラグインを導入するとフィールド値を入力するのにテキストだけでなくチェックボックスやセレクトボックスなどが使えるのでおススメです。

fukuro-press.com

2019-04-13 13:11

カスタムフィールドの作成

プラグインをインストール・有効化したら次に投稿ページの編集画面にCSS・jQueryなどのカスタムコードの埋め込みをオン・オフできるフィールドを作成します。

ではまずWordPressメニューから「カスタムフィールド」と書かれた項目を開いてください。

開いたら新しいフィールドグループを作成するために「新規追加」ボタンを押しましょう。

新規追加画面が開いたらまず上の方に「ここにタイトルを入力」と表示されたテキスト欄があるのでフィールドグループのタイトルを入力します。

タイトルは分かりやすければ何でもいいですが、ここでは「カスタムコードの切り替え」という名前をつけておきます。

タイトルを入力したら編集画面に表示するフィールドを追加するために「フィールドを追加」ボタンを押してください。

このボタンを押すとフィールドの設定項目がずらずらと出てきますが、絶対に入力しなくてはならないのは次のオレンジで囲った３つの項目です。

ここではこの３つの項目に次のような内容を入力・選択します。

• フィールドラベル
  編集ページに表示される名前。ここでは分かりやすいように「コードの切り替え設定」と入力
• フィールド名
  フィールドの値を取得するために必要な名前。ここでは「enable_custom_code」と入力
• フィールドタイプ
  編集画面に表示されるフィールドの種類。ここでは「真/偽」を選択

つまり次の画像のように設定すればOKです。

フィールドタイプには「真/偽」を選んでいるので、チェックボックスがフィールドとして表示されます。

ではこの３つを設定し終わったら次は下の方に進み、「メッセージ」の横にあるテキスト欄にチェックボックスの右側に表示したいメッセージを入力しましょう。

ここでは「カスタムコードを有効にする」というメッセージに設定しておきます。

この設定が済んだらさらに下の方に進み、「オプション」ー＞「Style」からフィールドのスタイルを選びます。

ここでは標準的なフィールドとデザインを合わせるために次の画像のように「Standard (WP metabox)」を選んでおけばOKです。

最後に「公開」ボタンを押してカスタムフィールドを公開しましょう。

以上でカスタムフィールドの作成は完了です。

各ページでのCSS・スクリプトの出力を制御

ここまでで作成したカスタムフィールドは投稿ページの編集画面で次のように表示されるようになります。

このようにそれらしく表示されるもののこの段階では単にチェックボックス付きの設定項目がが編集画面上に追加されただけです。

次はこのフィールド内のチェックボックスのON・OFFに応じてカスタムCSSやJSコードを書くページで切り替えできるように設定していきます。

では今使っているテーマに切り替え用のPHPコードを追加する必要があるので、まずは「functions.php」というファイルを開きましょう。

もしWordPress内でこのファイルを編集するならメニューから「外観」ー＞「テーマの編集」を開くことで直接funtions.phpが編集可能です。

functions.phpを開いたらファイルの最後に次のような内容を追加します。

/** カスタムコードが有効になっているページでだけコードを出力 */
function my_custom_code(){
  if(get_field('enable_custom_code')){
    echo <<<EOM

<style>
/**  カスタムCSSをここに記入 */
</style>

<script type="text/javascript">
/** カスタムJSをここに記入 */
</script>

EOM;

  }
}
add_filter('wp_footer', 'my_custom_code');

このPHPコード中の「/** カスタムCSSをここに記入 */」という部分にカスタムCSSを、「/** カスタムJSをここに記入 */」という部分にカスタムJSコードを挿入してください。

この内容を追加してfunctions.phpを保存すれば各ページでカスタムコードの出力の制御が可能になります。

カスタムフィールドが機能するかどうかの確認

最後に、ここまでで作成したカスタムフィールドが正常に正常に機能するかを確認します。

確かめ方は簡単で適当な投稿ページの編集画面を開き、先ほど追加したカスタムフィールドのチェックボックスにチェックを入れるだけです。

チェックを入れて投稿を保存したらページのソースを開いてみてください。ちなみにChromeなら「Ctrl + U」キーを同時押しすることで開けます。

コードに間違いがなく、カスタムフィールドが正常に機能しているなら次のようにカスタムコードが埋め込まれているはずです。

以上が特定ページでカスタムコードを切り替える手順です。

自分でコードを追加しなくてはならない部分はあるものの、プラグインを使えば簡単にカスタムフィールドが作れて最初からコードを書かかなくて済むのでこれが一番楽な方法だと思います。

まとめ

特定のページでだけ特定のCSSやJSコードを埋め込みたいならここで紹介した方法がおすすめです。

一部のページでしか使われていないコードを全てのページで読み込むのはパフォーマンス的には良くないので表示速度を犠牲にしたくないならこの方法を試してみてください。

以上ここでは編集画面にカスタムフィールドで設定を作り、特定のページでだけオリジナルのコードを読み込ませる方法について紹介しました。

The post CSSやjQueryを特定ページでだけ読み込ませる方法 first appeared on Fukuro Press.

WordPressで記事内に記事本文とは別の情報を埋め込みたい場合に役に立つのが「カスタムフィールド」という機能です。

これを使うと自分の好きな情報をページの好きな位置に出力することができますが、標準機能だとフィールド名とフィールドの値をすべてテキストとして入力することしかできず分かりにくい機能になっています。

そこで投稿画面で直感的にカスタムフィールドの入力ができる「Advanced Custom Fields」というプラグインの導入・使い方について解説します。

カスタムフィールドとは

カスタムフィールドとは簡単にいうと記事本文以外の情報をページに埋め込むためのWordPress独自の機能のことです。

例えば普段WordPressで記事を新規追加するときはタイトルと本文しか入力できませんが、カスタムフィールドを使うと次のような多種多様な情報をページに追加することが可能になります。

• デスクリプションとキーワード
• CSSなどのスタイル情報
• javascriptなどのスクリプト
• その他サイトオリジナルの情報

通常このようにページにデスクリプションを埋め込んだりCSSやjavascriptのようなコードを埋め込むにはプラグインが必要ですが、カスタムフィールドを使うとプラグインなしで全て自前でそのような機能を追加することができます。

WordPressの標準機能でカスタムフィールドを表示するには投稿画面上の「表示オプション」から「カスタムフィールド」にチェックを入れます。

すると投稿画面下に次のような名前を値がペアになったカスタムフィールドを追加するエリアが出現します。

このフィールドに入力した名前に対応する値をテーマのヘッダーやページ内でなどで出力することでメタデスクリプションやメタキーワードタグの挿入、スタイルやスクリプトの埋め込みが可能になります。

ただWordPressの標準機能では次のような点でカスタムフィールドはかなり使いにくいです。

• 値入力にテキスト欄しか使えない
  標準機能ではチェックボックスを表示してyesかnoのいずれかだけを選んだり、ドロップダウンメニューからあらかじめ用意された複数選択肢から何か１つを選ぶといったことができません。
• フィールドに注釈をつけられない
  標準機能のフィールドには注釈や説明などがつけられず、それがどのような役割を持つかは名前だけで判断しなくてはならないので分かりにくいです。

そこでその問題点を解決してくれるのがここで紹介する「Advanced Custom Fields」というプラグインです。

このプラグインを使用することで投稿画面にチェックボックスやセレクトボックス、エディタなどを表示して直感的にフィールの値を入力することができるようになります。

プラグインの導入

最初に「Advanced Custom Fields」をインストール・有効化してWordPressで使用可能な状態にします。

その手順ですがまずメニューから「プラグイン」ー＞「新規追加」を開きましょう。

そして新規追加画面の検索欄に「custom fields」などのキーワードを入力すると検索結果の上当たりに次のようなプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。

以下のプラグインページから直接ダウンロードして使うことも可能です。

https://ja.wordpress.org/plugins/advanced-custom-fields/

インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化するのを忘れないでください。

これでこのプラグインが使用可能になります。

プラグインの使用例

ここではプラグインの使用例としてページのヘッダー(headタグの間)にメタデスクリプションタグを挿入する方法を紹介します。

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

次の手順で投稿画面に表示するカスタムフィールドを新規追加します。

まずメニューから「カスタムフィールド」を開きます。

するとフィールドグループ画面が表示されるので「新規追加」ボタンを押してフィールドの新規追加画面を開きましょう。

新規追加画面が開いたら一番上に表示されている「ここにタイトルを入力」と書かれたテキスト欄にフィールド全体の名前をつけ(①)、「フィールドを追加」ボタンを押して(②)フィールドを追加します。

「フィールドを追加」ボタンを押すと次のようなフォームが出てくるのでまず赤色の「*」マークがついた３つの項目を入力しましょう。

それぞれの項目は次のような役割を持ちます。

• フィールドラベル
  ここでつけた名前が投稿画面のフィールドの値を入力するテキストエリアやチェックボックス・セレクトボックスの上に表示されます。
• フィールド名
  ここでつけた名前がテンプレートファイルでフィールドの値を取得するのに使われるので半角英数字とアンダースコア(_)とダッシュ(-)のみが使用可能です。日本語名などはつけないようにしましょう。
• フィールドタイプ
  ここではフィールドの値の入力に使われるフォーム部品のタイプを指定します。テキスト欄だけでなく、チェックボックス・ラジオボタン・セレクトボックスなど入力する値に適したフィールドタイプが選択可能です。

フィールド名には一応アンダースコア(_)とダッシュ(-)が使えると書かれていますが、フィールドの値が保存されないという現象があるのでもし上手く動作しないなら半角英数字だけで名前をつけてみてください。

ここではメタデスクリプションのフィールドを作りたいのでフィールドラベルに「メタデスクリプション」、フィールド名には「description」、長いテキストを入力するためにフィールドタイプにはテキストエリアを選択しました。

ここではフィールドを１つしか追加しませんが、「フィールドを追加」ボタンを押すことで必要なだけカスタムフィールドは追加可能です。

フィールドの追加が終わったら「公開」ボタンを押して公開すればカスタムフィールドの新規追加は完了です。

フィールドの値の出力

これで投稿画面に次のようなデスクリプション用のカスタムフィールドが表示されるようになります。

ただしこれで終わりではなく、ページ内容にフィールドの内容を反映するには必ずテンプレートファイルでそのフィールド値を取得して出力することが必要です。

例えばここで作ったメタデスクリプション用のフィールドに入力された内容をヘッダー(headタグの間)に出力する手順は次の通りです。

まずメニューから「外観」ー＞「テーマの編集」を開きます。

そしてテーマの編集画面でヘッダー内容を出力するテンプレートファイルである「header.php」を開きます。

そしてheader.phpの中でheadの終了タグ(</head>)の直前に次のような内容を追加します。

<!-- デスクリプション -->
<?php $description = get_field( "description" ); ?>
<?php if($description): ?>
<meta name="description" content=" <?php echo $description; ?>" />
<?php endif; ?>

この内容で保存し、投稿画面でデスクリプションを入力した後にページのソースを見ると次のようにheadの終了タグ直前にメタデスクリプションタグが追加されているのが分かります。

以上が「Advanced Custom Fields」を使って投稿画面にフィールドを作り、そのフィールド値をページに出力する手順例

ここではメタデスクリプションタグを出力する例を紹介しましたが、フィールドが複数あってもページ内にフィールド値を出力する手順は同じです。

まとめ

カスタムフィールドは便利なものの、WordPress標準機能だと少し扱いにくいです。

なので今紹介した「Advanced Custom Fields」を使うと操作しやすいフィールドが簡単に作れるので作業を効率化できると思います。

以上、 Advanced Custom Fields プラグインの導入・使い方について解説しました。

The post カスタムフィールドを簡単追加できる「Advanced Custom Fields」の使い方 first appeared on Fukuro Press.