Advanced Custom Fields – Range

Advanced Custom Fields（通称:ACF）の使い方についての備忘録です。

この記事ではフィールドタイプ「Range」の設定と出力する方法について解説しています。

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

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

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

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

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

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

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

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

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

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

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

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

確認してみます。

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

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

今回は例として 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」に変換しています。

では確認してみます。

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

以上です。