Tag Archive カスタムフィールド

アイキャッチ CMS カスタムフィールド
このページはWordPress+Advanced Custom Fieldsご利用の方が対象です

このページは、2024年05月21日に作成したページです。
このページに掲載しているAdvanced Custom Fieldsの仕様・機能・操作手順は、現在リリースされている最新バージョンのAdvanced Custom Fieldsと異なる場合がございます。

このページに掲載している
Advanced Custom Fieldsのバージョン:
Advanced Custom Fields6.2.7

投稿一覧画面やプラグイン一覧画面で次の様な警告文が表示されている場合がございます。

Advanced Custom Fields 警告

ACF — ACF now automatically escapes unsafe HTML when rendered by the_field or the ACF shortcode. We've detected the output of some of your fields has been modified by this change, but this may not be a breaking change.

 

これは、Advanced Custom Fields 6.2.7以降にアップデートして、その警告に該当する可能性がある場合に表示されます。

もし上記のメッセージがWordpress管理画面で表示されているお客様が注意が必要です。

 

Advanced Custom Fieldsプラグインとは

Advanced Custom Fieldsプラグイン(ACF)は、投稿画面で入力フォームを増やし、その入力値や選択値を使って表示するだけでなく、値を使った処理を行える様にする為のカスタムフィールドを追加する為のプラグインです。このプラグインについて詳しくは以下をご覧ください。

 

この警告文が伝えていること

Advanced Custom Fieldsプラグインは、ACF専用のショートコードやACFの内容を出力する為の関数を使う時に、一部のHTMLタグを自動で省く(HTMLエスケープ)仕様に変わりました。この警告は、それに該当する関数がウェブサイトで使われている事がプラグインで検出されたので、重大では無い可能性はあるけど注意する様にという内容です。

 

 

この仕様変更について何が行われるのか

Advanced Custom Fieldsは、指定の関数を使ってカスタムフィールドの内容を出力する際に、カスタムフィールドに対して登録されるHTMLコードにおいてscriptタグとiframeタグをセキュリティの為に除去する仕様(HTMLエスケープ)に変わったそうです。

この2つのHTMLタグは、悪意がある目的で使われる可能性があるので、通常の方法では除去する仕様に変更したという事の様です。

scriptタグとiframeタグ

先ずscriptタグは、JavaScriptやVBScriptなどのスクリプト言語をページ内に埋め込む為のタグです。これをページ内のHTMLに記述すると、そのページで使われる動きや動的な処理を実装する事が可能です。但し、ACF公式が言う様に悪意の目的で利用とすれば、そのページにアクセスしたユーザーに対して個人情報を抜き取る(Webスキミング)ようなスクリプトを埋め込む事も可能になります。

続いてiframeタグはインラインフレームタグと言って、ページの中に別のページを表示させる事が出来るHTMLタグです。よく使われるのが、GoogleMapをページに埋め込む際に発行されるHTMLタグがこのiframeタグを使っています。

これも悪用するとすればscriptタグよりも簡単で、ウイルス感染させる為のスクリプトを仕込んだページをiframeタグで読み込んだり、サイトとは全く関係の無いリンクを仕込んだり、まるでサイトの部品の様に違和感のないフォームを表示させて個人情報を抜き取るという事も可能です。

ただ、これらのタグは昨今のウェブサイトでは欠かせないタグであり、Advanced Custom Fieldsで設定したカスタムフィールド経由でなくとも別のプラグインやWordpress自体も同じリスクを持っています。但し、悪意のあるタグを設置する為には、Wordpressの投稿権限がある事が必要なので、必要な対策(本体やプラグインのアップデート、投稿権限のあるIDとパスワードの漏洩対策など)を行っていれば、それほどリスクは高くないと思われます。

今回のAdvanced Custom Fieldsの仕様変更は、Advanced Custom Fields自体を悪意のある目的に利用されるリスクを減らすのが目的と思われます。

影響のあるウェブサイト

上記の通り、カスタムフィールドで登録する内容に直接<script>~</script>を含んだJavaScriptを登録する場合や、インラインフレームを含むHTMLを登録すると影響があります。

弊社のお客様に、カスタムフィールドを使ってJavaScriptを挿入したり、インラインフレームを挿入する様な目的でカスタムフィールドを設置した例はございません。但し、そこに何を登録するかはお客様自身の自由ですので、もしJavaScriptやインラインフレームを挿入していたら、影響を受けます。

本文以外の複数行テキスト入力フォーム(WYSIWYGエディター含む)に次の様な使い方をしていませんか?

GoogleMapのHTMLを登録している

GoogleMapのHTMLはインラインフレームを利用しているので、マップは表示されずに英単語の文字列などが表示されているかもしれません。

インスタグラム発行の埋め込みHTMLコードを登録している

インスタグラム発行の埋め込みHTMLコードは、インラインフレームは利用していませんが、JavaScriptが使われています。<script>と</script>は削除してしまうので、やはり英単語の文字列が表示されます。

Xの埋め込みHTMLコードを登録している

こちらもインラインフレームは利用していませんが、外部JavaScriptの読み込み指定があります。<script>と</script>は削除してしまうので、async src="https:~という様に英単語の文字列が表示されます。

その他ウィジェトを埋め込む、計測タグを埋め込んでいる場合

ウィジェトや計測タグは、JavaScriptを利用している場合が多いです。やはり英単語の文字列が表示されるだけで、そのウィジェトは表示されません。また計測の場合は機能しません。

 

 

この仕様変更に対する対策をしていないウェブサイトで、カスタムフィールドに<script>やインラインフレームを登録した場合

上記の様に、何を登録するかはお客様自身の自由ですのでJavaScriptやインラインフレームを登録する事も可能です。

この場合、<script>、</script>や<iframe>、</iframe>を除かれたものが出力されるので、その内容がそのまま表示される事になります。

下の様にJavaScriptのコード内容がそのまま表示される
その内容がそのまま表示

 

ページ毎に異なるJavaScriptを挿入するカスタムフィールドを設置しているウェブサイト

お客様が利用する為では無く、弊社が各ページをコーディングする為に、JavaScript専用のカスタムフィールドを設置している場合はございます。但し、この場合<script>~</script>も含めて登録する仕様にはしていません。そこに、スクリプトを登録したら自動的に<script>~</script>で囲む仕様になっています。

カスタムフィールドにGoogleマップ、
SNSなどの埋め込みコード、計測タグを登録したい場合

上記の通り、Advanced Custom Fieldsプラグインの仕様変更によりカスタムフィールドに<script>やインラインフレームを登録する事が出来なくなりました。

ただ以下の回避策があります。こちらの回避策を取りたい方は、有償となりますが当社で対応する事は可能です。ご希望の場合、お見積り致しますのでお問合せください。

 

警告で指摘されているカスタムフィールドの出力する為の処理を別の処理に変更する

今回使用変更となったAdvanced Custom Fieldsで用意された関数とは別の関数(Advanced Custom Fieldsで用意された関数)を使った処理に修正する事で、回避する事は可能です。

 

<script>やインラインフレーム登録専用のカスタムフィールドを追加する

<script>やインラインフレーム登録専用のカスタムフィールドを追加して、そのフィールドに対し登録がある場合は自動で<script>~</script>で囲むという処理をする事で、回避できます。但し、表示する場所が固定されてしまうので、自由度が下がります。

ACF6.2.5以上にアップデートされたお客様で記事一覧画面にACFからはじまる警告文が表示された場合の関連記事

この記事には、以下の関連記事がございます。合わせてご覧ください。

Wordpress
このページはWordPressご利用の方が対象です

このページは、2022年02月16日に作成したページです。
このページに掲載しているWordPressの仕様・機能・操作手順は、現在リリースされている最新バージョンのWordPressと異なる場合がございます。

このページに掲載している
WordPressのバージョン:
WordPress5.9

カスタムフィールドの中には、予めグループされたカスタムフィールドやカスタムフィールドグループを複数繰り返し使える様にしてあるカスタムフィールドがあります。

この様な機能を繰り返しフィールド機能と言います。

このページでは、Wordpressの繰り返しフィールド機能の使い方を説明します。

 

繰り返しフィールドで出来ること

 

例えばこんな場合

とある製品メーカーの商品詳細ページで、製品オプション表示の為に、カスタムフィールドを用意する必要がある。

また各オプションに必要なカスタムフィールドは、全て同様で良い。

この様な要望から、以下の様なカスタムフィールドを用意しました。

 

製品のオプション名 
 テキスト入力ができるフォームを追加
そのオプションの画像 
 画像登録ができるフォームを追加
そのオプションの製品番号  
 テキスト入力ができるフォームを追加
そのオプションの価格
 数値のみの入力ができるフォームを追加

 

 

そのメーカーの製品は、オプションの数が製品によって異なり、オプション数が1つの場合もあれば、5個ある場合もあとします。また今後、開発される製品は5以上になる場合も考えられる為、登録できるオプション数を5を上限にしてしまうと6つ以上のオプション数が発生した場合、プログラム修正する必要があります。

こんな時に役に立つのが繰り返しフィールド機能です。オプションに必要なカスタムフィールドを1グループとして、好きなだけグループを増やす事が出来ます。

通常のカスタムフィールドに対する出力処理よりも、複雑な処理が必要であり、且つ有料プラグインを使わなければならない場合がある為、通常のカスタムフィールドを利用する場合よりも工数が増えてしまいますが、利便性や将来性を考えるとこの機能を使った方が良いと判断した場合に、ご提案いたします。

 

 

繰り返しフィールド機能が使えるフィールド

繰り返しフィールド機能が使えるフィールドには、下の様な3つのアイコンが表示されています。

繰り返しフィールド機能が使えるフィールド

 

繰り返しフィールドの基本的な使い方

 

カスタムフィールドグループを追加する

アイコンの「+」をクリックすると、その後ろに空入力のカスタムフィールドグループが表示されます。

カスタムフィールドグループを追加する

追加できるカスタムフィールドグループの数に制限はありません。好きなだけ追加して利用できます。

 

 

任意のカスタムフィールドグループを削除する

削除したいカスタムフィールドグループの「×」をクリックすると、そのカスタムフィールドグループが削除されます。

任意のカスタムフィールドグループを削除する

追加できるカスタムフィールドグループの数に制限はありません。好きなだけ追加して利用できます。

 

 

カスタムフィールドグループを並び替える

登録したカスタムフィールドグループは、並び替える事ができます。並び替えたものは、そのカスタムフィールドグループを表示しているフロンド側のページでも、並び替えた順で表示されます。

並び替えるには、ドラック&ドロップを使います。移動したいカスタムフィールドグループの「三本線」にオンマウスして、十字に変わったら、ドラックして移動されたい場所にドロップします。

任意のカスタムフィールドグループを削除する

 

 

上記のどの操作でも、変更したら必ず「更新」してください。

WordPress
このページはWordPressご利用の方が対象です

このページは、2022年02月16日に作成したページです。
このページに掲載しているWordPressの仕様・機能・操作手順は、現在リリースされている最新バージョンのWordPressと異なる場合がございます。

このページに掲載している
WordPressのバージョン:
WordPress5.9

WordPressの記事投稿画面で最初に用意されている入力フィールドは、「タイトル」と「本文」です。特に現在のWordpressで「本文」はブロックエディタが実装されているため、従来の文字装飾が中心のエディタから、様々なパーツを組み合わせてページを作る事が出来る様になっています。

お知らせやニュース、ブログなどの投稿ではこの機能で十分ですが、メーカーの製品紹介、販売サイト、学校…など業界に特化した情報やそのページの特性によって、「製品番号」「寸法」などの独自の入力フィールドを用意する方がコンテンツを管理し易くなります。

この様なそのサイトの為に独自に用意する入力フィールドの事をカスタムフィールドと言います。

 

最初に用意されている入力フィールドだけの投稿画面
最初に用意されている入力フィールドだけの場合

 

カスタムフィールドが追加された投稿画面
最初に用意されている入力フィールドだけの場合

 

上の様に、カスタムフィールドが追加された投稿画面はそのサイトの為に独自に用意する入力フィールドが用意されます。

 

 

例えば製品紹介などの場合
タイトル 
 製品名に利用
本文 
 製品の紹介文に利用

 

 

製品のスペックは、どの製品ページでも同じ場所、同じデザインで表示する事が、サイトに訪れたユーザーへの配慮です。
また、製品詳細ページだけでなく、異なる製品情報を比較させる為のページを動的に表示する場合、それぞれの情報が切り離されている必要があります。

その場合、次の様な独自のカスタムフィールドを作ります。

 

製品番号 
 テキスト入力ができるフォームを追加
寸法(幅)
 数値のみの入力ができるフォームを追加
寸法(高さ)  
 数値のみの入力ができるフォームを追加
寸法(奥行)  
 数値のみの入力ができるフォームを追加
容量
 数値のみの入力ができるフォームを追加
 白、黒、赤、青の4色から選択するセレクトメニューを追加

 

またカスタムフィールドは、単純に表示するだけではなく、入力した数値、選択した項目によってコンテンツを動的に変化させる為の処理条件としても利用する事があります。

例えば、製品検索で幅「何cm以上の製品を検索する」という機能を付ける場合は、カスタムフィールドで入力された数値を元に検索結果を表示するという処理を作ります。

 

追加するカスタムフィールド

お客様のサイトに追加するカスタムフィールドは、CMS化するコンテンツで用意します。

表示内容を頻繁に変えたいコンテンツ、お客様で追加・更新したいコンテンツ、製品検索など動的な情報を表示するコンテンツなど静的な内容(頻繁に情報更新が無いコンテンツ)以外のコンテンツの為にカスタムフィールドを用意します。

用意するカスタムフィールドは、お客様へのヒアリングから導き出した要件を元に、必要と思われるカスタムフィールドを作成します。

カスタムフィールドとはの関連記事

この記事には、以下の関連記事がございます。合わせてご覧ください。

HTML Snippets Powered By : XYZScripts.com