記事の詳細

WordPressで便利なプラグインとしてよく使われているアドバンスカスタムフィールド

不動産の物件情報の詳細や、ネットショップでの商品情報の詳細など投稿画面でオリジナルのフィールドを追加したい時に簡単にフィールドを追加できてしまうとっても便利なプラグインです。

 

カスタムフィールドが空欄のとき余白ができてしまった

便利なカスタムフィールドですが、カスタムフィールドを空欄にして公開した時に投稿に謎の余白ができまいました。

カスタムフィールドが空欄になることを想定せずにテンプレートを作ってしまったため、本来は余白部分(下の画像の赤枠)はカスタムフィールドに入力している情報が表示される部分なのですが、空欄なのでカスタムフィールド分ぽっかりと余計な空白ができてしまっている状態です。

これではいけません。テンプレートの改善が必要です。
カスタムフィールドが空欄だと余白ができる

投稿用テンプレート(signle.php)を修正する

カスタムフィールドに何も書いていない状態、つまり空欄のときには非表示にさせて余白をなくすようにテンプレートを修正していきたいと思います。

今回は投稿画面の改善なのでsingle.phpを修正していきます。

single.phpを修正する場合は次の手順です。

ダッシュボード > テーマの編集 > single.php

カスタムフィールドが空欄だと余白ができる

個別投稿の部分(下図の赤枠内)をクリックすると、single.phpの編集画面に切り替わります。

カスタムフィールドが空欄のとき非表示にしたい

カスタムフィールドが空欄のときはテーブルを非表示にする

そもそもなんで空白の行ができてしまっていたのかというと、以下のようにテンプレートを作っていたからです。

修正前

カスタムフィールドの値を取得して、テーブルに入れているわけですが、カスタムフィールドに値が入っていれば問題ないのですが、空欄になっていると、空っぽのテーブルだけができてしまいますね。。。。これが謎の余白の犯人です。

修正後

PHPのemptyという変数の中身が空かどうかを判定する関数を使って、カスタムフィールドの値が空っぽかどうか判定するif文を入れるように変更しました。
※ついでに<th>タグで項目名も表示するようにしてみました。

ちょっと解説をしておきますと、get_field()でカスタムフィールドの入力値を取得するのですが、取得した値を格納している変数$txtの中身が空かどうかを関数emptyを使って判定した後、空でなければ<tr>~~</tr>を表示するようにしました。

すると・・先程は余白があった部分が、綺麗さっぱり余白が消えてしまいました!

カスタムフィールドが空欄のとき非表示にできた

ちなみにカスタムフィールドが空欄でない場合はこのように表示されます。

カスタムフィールドが空欄だと余白ができる

参考までに今回使っているCSSも記載しておきます。良かったらコピペして使ってくださいませ。

プログラムを学ぶことでプログラミング思考で考えられるようになります

インクループでは社内研修でプログラミング研修を実施しています。(主にPHP。M氏が講師やってます。)

私はプログラミングについて全くの未経験だったので、最初は暗号の用に感じていたプログラムですが、今では変数の意味、if文、ループ文をなんとか使えるようになりつつあります。プログラミングを知らないままWordPressのテンプレートをいじってたころを思い出すとよく触ってたな・・と恐ろしさすら感じてしまいます。

今回の関数empty()を使って変数が空かどうかを判定するという内容も今となってはごくごく簡単なことなのですが、当時はif文の存在すら知らなかったので、もしカスタムフィールドの中身が空欄だったらなんてことを考えることすら頭の中にありませんでした。

プログラムを学ぶようになって良かったことは、単純にPHPが分かるようになってWordPressのテンプレートの意味が以前よりも理解しやすくなっただけではなく、テンプレートを作る時にフローチャートを頭の中で考えながら作れるようになったことです。もしXXXだったら??という思考が常に頭の中にあるようになりました。

さて、いかがでしたか?

PHPやJavaScript、JQueryなどのWEB系のプログラミング言語を使うことができればなんでもできてしまうような…そんな気がしています。(実際にそうなんですが。今はまだそのレベルには達していません。。。)

まだまだ初級編ですので、どんどん中級~上級クラスのプログラムもご紹介していきたいと思います!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
吉見 千香
WEBデザイン職業訓練校卒の新米WEBデザイナー。一児のママで毎日育児に奮闘しながらWEBデザインとマーケティング、SEOについて学んでます。日々壁にぶち当たりながらレベルアップ中!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る