Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

WordPress(ワードプレス)でカスタムフィールドテンプレートを利用し、カスタムフィールドが空だった場合の表示方法

01.10.15 02:06 | コメント(0)

カスタムフィールドが空だった場合の表示

WordPress(ワードプレス)でカスタムフィールドテンプレートプラグインを利用して、カスタムフィールドに入力を行いWebサイトにフィールド内容を表示させる方法がありますが、カスタムフィールドが空(入力を行わなかった場合)の場合、他の内容を表示させることが出来ます。

カスタムフィールドが空(入力を行わなかった場合)の場合に違う表示方法や、入力があった場合と入力が無い場合のcssやhtmlを変更したい場合があります。 今回はカスタムフィールドテンプレートを利用した時にフィールドが空だった場合の表示方法をご紹介いたします。

WordPress(ワードプレス)管理画面

カスタムフィールド 空
 1. phpコードの書き方(テキストフィールド)
 2. phpコードの書き方(画像フィールド)

phpコードの書き方(テキストフィールド)

カスタムフィールドテンプレート項目に入力が無い場合や入力がある場合と入力が無い場合のcss及びhtmlを変更する場合は、下記のphpコードで囲んでください。 ※例で「サングラスフレーム」というカスタムフィールド名にしています。

【空だった場合(入力が無い場合)に非表示にする】
<?php if(post_custom('サングラスフレーム')): ?>
<?php echo post_custom('サングラスフレーム'); ?>
<?php endif; ?>

【空だった場合(入力が無い場合)にcss及びhtmlを変更する】
<?php if(post_custom('サングラスフレーム')): ?>
<p class="inner"><?php echo post_custom('サングラスフレーム'); ?></p>
<?php else:?>
<p class="test">空だった場合(入力が無い場合)の表示</p>
<?php endif; ?>

【①に入力が有りの場合と②に入力が有りの場合を異なる表示にする】
<?php if(post_custom('サングラスフレーム①')): ?>
<?php echo post_custom('サングラスフレーム①'); ?>
<?php elseif(post_custom('サングラスフレーム②')): ?>
<?php echo post_custom('サングラスフレーム①'); ?>
<?php echo post_custom('サングラスフレーム②'); ?>
<?php endif; ?>

phpコードの書き方(画像フィールド)

カスタムフィールドテンプレート項目に画像が無い場合や画像がある場合と画像が無い場合のcss及びhtmlを変更する場合は、下記のphpコードで囲んでください。 ※例で「アイテム写真」というカスタムフィールド名にしています。

【空だった場合(入力が無い場合)に非表示にする】
<?php if(get_post_meta($post->ID, 'アイテム写真', true)): ?>
<?php echo wp_get_attachment_image(post_custom('アイテム写真'),'thumbnail'); ?>
<?php endif; ?>

【空だった場合(入力が無い場合)にcss及びhtmlを変更する】
<?php if(get_post_meta($post->ID, 'アイテム写真', true)): ?>
<?php echo wp_get_attachment_image(post_custom('アイテム写真'),'thumbnail'); ?>
<?php elseif; ?>
<p>空だった場合(入力が無い場合)の表示</p>
<?php endif; ?>

【①に入力が有りの場合と②に入力が有りの場合を異なる表示にする】
<?php if(get_post_meta($post->ID, 'アイテム写真①', true)): ?>
<?php echo wp_get_attachment_image(post_custom('アイテム写真①'),'thumbnail'); ?>
<?php elseif(get_post_meta($post->ID, 'アイテム写真②', true)): ?>
<?php echo wp_get_attachment_image(post_custom('アイテム写真①'),'thumbnail'); ?>
<?php echo wp_get_attachment_image(post_custom('アイテム写真②'),'thumbnail'); ?>
<?php endif; ?>

以上がWordPress(ワードプレス)でカスタムフィールドテンプレートを利用し、カスタムフィールドが空だった場合の表示方法になります。
カテゴリ:WordPress(ワードプレス)構築と技術, カスタマイズ方法(WordPress), ブログツール【CMS】情報とWEBコンテンツ技術, プラグイン紹介(WordPress)
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP