Advanced Custom Fields – Range

ACF_Range

Advanced Custom Fields(通称:ACF)の使い方についての備忘録です。
この記事ではフィールドタイプ「Range」の設定と出力する方法について解説しています。

フィールド項目を入力するところからの解説となりますので、あらかじめご了承ください。

↓フィールドグループを新規追加するまでの手順はコチラに記載してあります。
Advanced Custom Fields – テキストを出力

Range のフィールド項目を入力

フィールドの項目を入力するところからやっていきます。

ACFフィールド項目入力

今回設定したフィールドの項目は以下の通り。

フィールド項目入力値説明
フィールドラベルタイトルの文字サイズ編集画面で表示される名前
フィールド名rangeサイトに表示するときに指定するフィールド名
フィールドタイプRangeフィールドタイプを選択
説明タイトルの文字サイズが、ここに入力した数値に変化しますこのフィールドに対する説明を入力
最小値10最小値を入力
最大値100最大値を入力
ステップサイズ1いくつ加算、減算するかのステップサイズを設定
先頭に追加font-size入力欄の先頭に表示されるテキスト
末尾に追加px入力欄の末尾に表示されるテキスト

入力が完了したら「公開」をクリックして保存します。

rangeフィールド

投稿画面を表示すると先程設定したカスタムフィールドが表示されました。

ACF Range フィールドの値を表示する

ACFのカスタムフィールドの値を出力するにはthe_field( )関数を使います。
この関数はフィールドに入力した値をそのまま出力したい場合に用いられます。

出力せずに値だけを受け取りたい場合はget_field( )関数を使います。
この関数は値を出力しません。値だけを受け取るので、なにか加工してから表示させたいなどといった場合に用いられます。

それでは先程入力した値を表示させたいところに下記コードを記述しましょう。

<?php the_field('range'); ?>

確認してみます。

14表示

これで値が表示されました。

タイトルの大きさを変えてみる

今回は例として Range フィールドタイプを使用して、タイトルのフォントサイズを変更してみたいと思います。

コードは以下のようになります。

<?php $title_font_size = intval(get_field('range')); ?>
<h1 style="font-size:<?php echo $title_font_size; ?>px;"><?php the_title(); ?></h1>
<?php echo 'タイトルのフォントサイズは' . $title_font_size . 'pxです。'; ?>

h1に style属性で直接フォントサイズを変更させています。

get_field( )で取得した値の型は「string」となっています。
今のままでは文字列として認識しているので、受け取った値を整数型の「int」に変換する必要があります。
なのでPHP関数の intval( )を使いデータ型を「int」に変換しています。

では確認してみます。

フォントサイズ変更後

タイトルの文字サイズが変わりました。

以上です。

この記事を書いた人

けいた

高校卒業してから15年間勤めた会社を退職→脱サラしてWeb制作。
現在はWordPressサイト構築とShopifyストア構築をメインに、副業で物販をやっています。