記事の詳細
【PHP】カスタムフィールドが空欄の時には中身があるかどうかチェックしてから表示する
WordPressで便利なプラグインとしてよく使われているアドバンスカスタムフィールド。
不動産の物件情報の詳細や、ネットショップでの商品情報の詳細など投稿画面でオリジナルのフィールドを追加したい時に簡単にフィールドを追加できてしまうとっても便利なプラグインです。
今回のブログの見出しはコチラです!
カスタムフィールドが空欄のとき余白ができてしまった
便利なカスタムフィールドですが、カスタムフィールドを空欄にして公開した時に投稿に謎の余白ができまいました。
カスタムフィールドが空欄になることを想定せずにテンプレートを作ってしまったため、本来は余白部分(下の画像の赤枠)はカスタムフィールドに入力している情報が表示される部分なのですが、空欄なのでカスタムフィールド分ぽっかりと余計な空白ができてしまっている状態です。
投稿用テンプレート(signle.php)を修正する
カスタムフィールドに何も書いていない状態、つまり空欄のときには非表示にさせて余白をなくすようにテンプレートを修正していきたいと思います。
今回は投稿画面の改善なのでsingle.phpを修正していきます。
single.phpを修正する場合は次の手順です。
ダッシュボード > テーマの編集 > single.php
個別投稿の部分(下図の赤枠内)をクリックすると、single.phpの編集画面に切り替わります。
カスタムフィールドが空欄のときはテーブルを非表示にする
そもそもなんで空白の行ができてしまっていたのかというと、以下のようにテンプレートを作っていたからです。
修正前
カスタムフィールドの値を取得して、テーブルに入れているわけですが、カスタムフィールドに値が入っていれば問題ないのですが、空欄になっていると、空っぽのテーブルだけができてしまいますね。。。。これが謎の余白の犯人です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table class="left"> <tr> <td> <?php $txt = get_field('物件名'); echo $txt; ?> </td> </tr> <tr> <td> <?php $txt = get_field('駐車場'); echo $txt; ?> </td> </tr> <tr> <td> <?php $txt = get_field('管理費'); echo $txt; ?> </td> </tr> </table> |
修正後
PHPのemptyという変数の中身が空かどうかを判定する関数を使って、カスタムフィールドの値が空っぽかどうか判定するif文を入れるように変更しました。
※ついでに<th>タグで項目名も表示するようにしてみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<table class="left"> <?php $txt = get_field('物件名'); if (!empty($txt)) { ?> <tr> <th class="wide">物件名</th> <td> <?php echo $txt; ?> </td> </tr> <?php } ?> <?php $txt = get_field('駐車場'); if (!empty($txt)) { ?> <tr> <th class="wide">駐車場</th> <td> <?php echo $txt; ?> </td> </tr> <?php } ?> <?php $txt = get_field('管理費'); if (!empty($txt)) { ?> <tr> <th class="wide">管理費</th> <td> <?php echo $txt; ?> </td> </tr> <?php } ?> </table> |
ちょっと解説をしておきますと、get_field()でカスタムフィールドの入力値を取得するのですが、取得した値を格納している変数$txtの中身が空かどうかを関数emptyを使って判定した後、空でなければ<tr>~~</tr>を表示するようにしました。
すると・・先程は余白があった部分が、綺麗さっぱり余白が消えてしまいました!
ちなみにカスタムフィールドが空欄でない場合はこのように表示されます。
参考までに今回使っているCSSも記載しておきます。良かったらコピペして使ってくださいませ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
table.left{ width: 50%; float: left; margin-bottom: 0px; border-bottom: 0px solid #EDEDED; border-right: 1px solid #EDEDED; height: 340px; } table { border-bottom: 1px solid #ededed; border-collapse: collapse; border-spacing: 0; font-size: 14px; line-height: 2; margin: 0 0 20px; width: 100%; } table.left th{ width: 35%; text-align: center; } body th { border-top: 1px solid #ededed; background-color: rgba(247, 245, 231, 0.7); } body th, body td { padding: 0.8em; } td { border-top: 1px solid #ededed; padding: 6px 10px 6px 0; } caption, th, td { font-weight: normal; text-align: left; } |
プログラムを学ぶことでプログラミング思考で考えられるようになります
インクループでは社内研修でプログラミング研修を実施しています。(主にPHP。M氏が講師やってます。)
私はプログラミングについて全くの未経験だったので、最初は暗号の用に感じていたプログラムですが、今では変数の意味、if文、ループ文をなんとか使えるようになりつつあります。プログラミングを知らないままWordPressのテンプレートをいじってたころを思い出すとよく触ってたな・・と恐ろしさすら感じてしまいます。
今回の関数empty()を使って変数が空かどうかを判定するという内容も今となってはごくごく簡単なことなのですが、当時はif文の存在すら知らなかったので、もしカスタムフィールドの中身が空欄だったらなんてことを考えることすら頭の中にありませんでした。
プログラムを学ぶようになって良かったことは、単純にPHPが分かるようになってWordPressのテンプレートの意味が以前よりも理解しやすくなっただけではなく、テンプレートを作る時にフローチャートを頭の中で考えながら作れるようになったことです。もしXXXだったら??という思考が常に頭の中にあるようになりました。
さて、いかがでしたか?
PHPやJavaScript、JQueryなどのWEB系のプログラミング言語を使うことができればなんでもできてしまうような…そんな気がしています。(実際にそうなんですが。今はまだそのレベルには達していません。。。)
まだまだ初級編ですので、どんどん中級~上級クラスのプログラムもご紹介していきたいと思います!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。