Web筋トレも使っているサーバー!ロリポップを使ってみない?

カスタムフィールドが空欄の時に任意の言葉を出力させる方法

Sponser Link

こんにちは。

今日はプリスクールパークでSNSリンクを追加する欄を作成したので、

その解説をしていきたいと思います。

Facebook、Instagram、Twitterを使っているプリスクールさんもとても多いです。

サイト充実のために、SNSリンクを追加することにしました。

①カスタムフィールドでSNS欄を作成

②single.phpでSNSリンクを表示させる記述

③カスタムフィールドが空欄の時に任意の言葉を出力させる方法(リンクなし)

④CSSで整える

こんな流れになります。

Sponser Link

①カスタムフィールドでSNS欄を作成

フィールドラベル:Facebook

フィールド名:cf_facebook

フィールドタイプ:URL

説明:なし

必須:なし

デフォルト値:なし

プレースホルダー:なし

条件判定:なし

ラッパーの属性:なし

これでFacebook欄が出来上がりました。

同様にInstagramとTwitterも作成しました。

Sponser Link

②single.phpでSNS欄を表示する記述

これで該当のFacebookページにリンクが貼られます。

Sponser Link

③カスタムフィールドが空欄の時に任意の言葉を出力させる方法

single.php

カスタムフィールドのデフォルト値に『ー』を入れることもできるのですが、

リンクにしているので『ー』に<a href=”ー” target=”_blank”>

というリンクが自動的についてしまいます。

それを避けるためにphpに空欄の場合は『ー』と記述するようにしました。

if文で分岐しています。

空欄の場合

値がある場合

Sponser Link

④CSSで整える

見出しの<dt>はfontawesomeでアイコンを入れました。

そして色をそれぞれのテーマカラーに合わせました。

Facebook

Instagram

Twitter

なかなか見やすくなったのではないでしょうか♫

カスタムフィールド はとっても便利です。

今回のようにif文などと組み合わせると

便利さ無限大といった様相です。

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA