収入・働き方別プログラミング言語の選び方

ACFで設定した日本語ルビをループで表示する方法【コピペ】

Advanced Custom Fieldで設定した日本語ルビをループで表示する方法をお伝えします。

完成イメージは「ブランド一覧の英語表記のブランド名に日本語ルビを振っているこちらのサイト」です。

ACFで設定した日本語ルビをループで表示する場面

woocommerceで商品カテゴリやタグを英語で作成し、日本語ルビを振りたい場合です。

例えば、ブランドを取り扱うショッピングサイトでブランド一覧を表示したい、しかし各商品が英語のブランド名のタグ、カテゴリなどで表示されるため日本語ルビを振ります。

この場合、for eachループを回してそれぞれのブランド名を表示していきます。

ACFで設定した日本語ルビをループで表示する方法

管理画面:ACFの設定で各ブランド名に日本語ルビを設定

1.ACFで、新規フィールドを作成

まず、Advanced Custom Fieldで、新規フィールドを作成し、フィールド名を「ruby」にします。

2.ACFで、「カテゴリー」にルビを振るための設定

さらに、「カテゴリー」にルビを振る表示させる設定をします。

この「カテゴリー」はwoocommerceで設定した場合はカテゴリやタグ、新規で作成した場合は新規タクソノミーです。「product_cat」という名前にします。

方法は、フィールド作成画面の「このフィールドグループを表示する条件」を以下のようにします。

「タクソノミー 」+「等しい」+「カテゴリー(product_cat)」

3.カテゴリページで商品それぞれにルビを振る

次に、表示したいページで商品それぞれに、先ほど設定した「ルビ(ruby)」欄が出ているはずなので、ルビを振っていきます。

 

ACFコーディング:ブランド一覧をアルファベットごとに表示しつつ、各ブランドに日本語ルビを振りたい場合

表示したい固定ページに、カテゴリとルビをfor eachループで回す表示をします。

 

コピペOKのコード
解説
アルファベットごとにブランド一覧を出す準備

 

変数「$categories」=カテゴリ(product_cat)と設定

 

カテゴリ一覧をfor each ループで回して表示

 

ルビを表示

 

ACFコーディング:2.ブランドをいくつかピックアップして表示しつつ、各ブランドに日本語ルビを振りたい場合

コピペOKのコード
解説
$termにAdvanced Custom Fieldのピックアップのフィールドを指定

 

$term(カテゴリ名)があった場合に、for eachループを回す

 

$term(カテゴリ名)を表示

 

もし$term(カテゴリ名)のスラッグと、$categoryのスラッグが同じならば、ルビを表示する、という設定をする。