Advanced Custom Fieldsに入力した電話番号を表示と発信に使用させる

WordPress

wordpressのカスタムフィールド系プラグイン、
Advanced Custom Fieldsがめちゃくちゃ便利ですね！
記事投稿のページに
画像やテキストなどの項目を追加することができるので
入力項目が毎回決まっている投稿記事なんかでは
項目に沿って入力していけばOK！
という投稿ページにすることができます。

今回は電話番号の項目を作成した際に
表示用の番号（ハイフン有り）と
発信用の電話番号（ハイフン無し）を
一々それぞれ入力させずに
1つの項目に入力で済ます方法をメモ。

今回の例として
電話番号の『フィールドタイプ』を【テキスト】
『フィールド名』を【tel_num】と設定しました。
表示用番号も兼ねているので
投稿ではハイフン付きで記入します。
『フィールド記入のヒント』には
【ハイフン付きで記述】という感じに書いておけば
記事投稿の際に分かり易いですね。

では実際にページに表示させたい箇所に
以下の様に記述します。

今回は記事一覧ページ用のテンプレートに記載しましたが
index.phpやsingle.phpなど表示させたいファイルに記述してください。

【PHP】

<a href="tel:<?php
$変数 = get_field('フィールド名');
$変数 = str_replace(array('-', 'ー', '−', '―', '‐','(',')','（','）',' ','　'), '', $変数);
echo $変数;
?>"><?php echo post_custom('フィールド名'); ?></a>

例で置き換えると下記の様になります。

【PHP】

<a href="tel:<?php
$tel = get_field('tel_num');
$tel = str_replace(array('-', 'ー', '−', '―', '‐','(',')','（','）',' ','　'), '', $tel);
echo $tel;
?>"><?php echo post_custom('tel_num'); ?></a>

上記は半角ハイフンや全角ハイフン、括弧などが混ざってしまっていた際に
発信用ではそれらを削除するという内容です。
これで表示用と発信用番号が1回の入力で済みました！

ついでに・・・

もし番号フィールドへの入力がなかったら表示させない
という記述方法を。
今回、私の場合は電話番号の入力が必須ではなく
更にFont Awesomeのアイコンを使用したかったので
電話番号の入力がなかった場合に
アイコンだけが寂しく表示されるのを防ぐ為
以下のように書きました。

<?php if(post_custom('フィールド名')): ?>
<a href="tel:<?php
$変数 = get_field('フィールド名');
$変数 = str_replace(array('-', 'ー', '−', '―', '‐','(',')','（','）',' ','　'), '', $変数);
echo $変数;
?>"><i class="fa fa-phone-square"></i> <?php echo post_custom('フィールド名'); ?></a>
<?php endif; ?>

例で置き換え。

<?php if(post_custom('tel_num')): ?>
<a href="tel:<?php
$tel = get_field('tel_num');
$tel = str_replace(array('-', 'ー', '−', '―', '‐','(',')','（','）',' ','　'), '', $tel);
echo $tel;
?>"><i class="fa fa-phone-square"></i> <?php echo post_custom('tel_num'); ?></a>
<?php endif; ?>

<?php if(post_custom('フィールド名')): ?>
ここに内容
<?php endif; ?>

このif文を書くことで
tel_numへの入力があれば内容を表示、
tel_numへの入力がなかった場合には
内容を非表示と切り分ける事ができます。

更についでにお伝えすると
画像挿入用フィールドの場合はまたちょっと書き方が変わります。

<?php if(get_post_meta($post->ID, 'フィールド名', true)): ?>
画像：<img src="<?php $フィールド名 = get_post_meta($post->ID, 'フィールド名', true); ?>" />
<?php endif; ?>

この様に記述しておけば
もしフィールドへの入力がなかった場合にも
柔軟に対応する事ができますね！



参考サイト

http://d.hatena.ne.jp/k3akinori/20170210/1486716941
https://webboy.jp/customfieldtemplate/