0

投稿ページにてチェックボックスにチェックを入れたら表示という設定を「来館予約と資料請求」の両方表示だったものを個々に設定できるようにカスタムフィールドにて1つずつに修正し、下記HTMLも1つのものを2つに変更しましたが、来館予約の部分だけ文字で表示されます。
改善点を教えていただけませんでしょうか。

担当エンジニアが現在事情で稼働できず簡易な修正のみやっている素人が質問しておりますので情報不足でしたら申し訳ございません。

【元のデータ】

<?php $value = get_post_meta($post->ID, 'show', true);?>
 <?php if(empty($value)):?>
 <?php else:?>
 
 <div class="chapel-reserve">
  <div class="btm-reserve">
   <ul>
    <li><a href="/reservation/?post_id=<?php echo get_the_ID();?>"><span>来店予約をする</span></a></li>
    <li><a href="/inquiry/?post_id=<?php echo get_the_ID();?>"><span>資料請求をする</span></a></li>
   </ul>
   <div style="display: none;"><?php echo get_field('show'); ?></div>
  </div>
 </div><!--reserve-->
 <?php endif;?>

【書き換えたコード】

 <?php $value = get_post_meta($post->ID, 'show', true);?>
 <?php if(empty($value)):?>
 <?php else:?>
 
 <div class="chapel-reserve">
   <ul>
    <li><a href="/reservation/?post_id=<?php echo get_the_ID();?>"><span>来店予約をする</span></a></li>
   </ul>
   <div style="display: none;"><?php echo get_field('show'); ?></div>
  </div>
 </div><!--reserve-->
 <?php endif;?>

 <?php $value = get_post_meta($post->ID, 'show2', true);?>
 <?php if(empty($value)):?>
 <?php else:?>
 
 <div class="btm-reserve">
   <ul>
    <li><a href="/inquiry/?post_id=<?php echo get_the_ID();?>"><span>資料請求をする</span></a></li>
   </ul>
   <div style="display: none;"><?php echo get_field('show2'); ?></div>
  </div>
 </div><!--reserve-->
 <?php endif;?>

こちらが表示される画面です。資料請求と同じデザインで表示させたいです。

こちらが表示される画面です。資料請求と同じデザインで表示させたいです。

元々のコードで表示されていたデザインです。

追記<divを2つずつ設置したコード 

     <?php $value = get_post_meta($post->ID, 'show', true);?>
 <?php if(empty($value)):?>
 <?php else:?>

<div> 
 <div class="chapel-reserve">
   <ul>
    <li><a href="/reservation/?post_id=<?php echo get_the_ID();?>"><span>来店予約をする</span></a></li>
   </ul>
   <div style="display: none;"><?php echo get_field('show'); ?>
 </div><!--reserve-->
 <?php endif;?>

 <?php $value = get_post_meta($post->ID, 'show2', true);?>
 <?php if(empty($value)):?>
 <?php else:?>
 
<div>
 <div class="btm-reserve">
   <ul>
    <li><a href="/inquiry/?post_id=<?php echo get_the_ID();?>"><span>資料請求をする</span></a></li>
   </ul>
   <div style="display: none;"><?php echo get_field('show2'); ?>
 </div><!--reserve-->
 <?php endif;?>

css ファイル

@charset "utf-8";
/* CSS Document */

.eo-venue-combobox-select{display: none;}
#eo-all-day,
#eo-end-time,
#eo-start-time,
#eo-start-date,
#eo-end-date{pointer-events: none;}

img.acf-image-image{width: 150px;height: auto;}

片方に寄ってしまった今の状況

8
  • 元々は<div class="chapel-reserve"> 内に <div class="btm-reserve"> があり更にその中に「来館予約と資料請求」があります。書き換えたコードでは別々に分かれてますが何か理由あるのでしょうか? …理由なければ同じ構造にしてみては? あとつじつま合わせと言うか, <div〜></div> というペアになってるので書き換えたコードは </div>の数が一つ多いかも
    – oriri
    Commented 2022年2月8日 11:38
  • ありがとうございます! 「来館予約と資料請求」でチェックすると2つ表示に設定しておりましたが、 ・来館予約のボタンのみを追加する場合 ・資料請求のボタンのみを追加する場合 ・2つとも設置する場合 上記の場合を想定して、2つを個別に設定したく書き換えておりました。 </div>の数変更して確認してみます!ありがとうございます。
    – Setsuko
    Commented 2022年2月8日 11:59
  • 元々のように, <div class="chapel-reserve"> 内に <div class="btm-reserve"> を配置するなら, 最後の方の </div>は消さないようにしてください。別々に分けて ひとつの <div 内に記述する場合は, 取り除く感じ
    – oriri
    Commented 2022年2月8日 12:10
  • ありがとうございます!分けて記述したいのでご教授いただきました通り</div>取り除いてみましたが来店予約だけ文字で表示されてしまいます。元々のようにしかできないのですかね、、素人質問で大変申し訳ないです。。
    – Setsuko
    Commented 2022年2月8日 12:20
  • 「来館予約と資料請求」を分けて記述することと, <div</div> を別々にすることは違うと思うけど, <div を分ける理由があるかどうか知りたいのですが … 理由がないのなら <div</div> を 2つずつ記述すればよいかも
    – oriri
    Commented 2022年2月8日 12:29

1 件の回答 1

0

【元のデータ】では, 以下のように並んでいます

<div class="chapel-reserve">
  <div class="btm-reserve">
   <ul>

仮に それぞれの divを "《" と "{" と置き換えると少し分かりやすいかもしれないので表現すると

  • 【元のデータ】では

    《{ 来館予約, 資料請求 }》

  • 【書き換えたコード】では

    《 来館予約 》》
    { 資料請求 }》

  • そうではなく, この様に記述してはどうか? … ということ

    《{ 来館予約 }》
    《{ 資料請求 }》

CSSでどの様に設定してるかにより, 実際に望むように表示されるかどうかは不明だけれど, このような記述で可能かもしれない, ということです
(【<divを2つずつ設置したコード】では class= 属性が取り除かれている)

<?php $value = get_post_meta($post->ID, 'show', true);?>
 <?php if(empty($value)):?>
 <?php else:?>
 
 <div class="chapel-reserve">
  <div class="btm-reserve">
   <ul>
    <li><a href="/reservation/?post_id=<?php echo get_the_ID();?>"><span>来店予約をする</span></a></li>
   </ul>
   <div style="display: none;"><?php echo get_field('show'); ?></div>
  </div>
 </div><!--reserve-->
 <?php endif;?>

 <?php $value = get_post_meta($post->ID, 'show', true);?>
 <?php if(empty($value)):?>
 <?php else:?>
 
 <div class="chapel-reserve">
  <div class="btm-reserve">
   <ul>
    <li><a href="/inquiry/?post_id=<?php echo get_the_ID();?>"><span>資料請求をする</span></a></li>
   </ul>
   <div style="display: none;"><?php echo get_field('show'); ?></div>
  </div>
 </div><!--reserve-->
 <?php endif;?>

CSS 内に .chapel-reserve.btm-reserve に関する記述があるはずで
色付けや(もしあれば)相関関係が記されているはずです

HTMLの(上記の)修正でもうまく表示できないようであれば CSS見直す必要があります

2
  • ありがとうございます!こちらで無事に来館予約は文字だけじゃなくなりました。 管理画面より資料請求だけチェックしても反映しなかったので資料請求部分のコードの<div class="chapel-reserve">を取り除きましたら反応するようになりました!しかし、表示位置が片方に寄ってしまい(画像追記)。。なんとか模索してみようと思います!ありがとうございます!!
    – Setsuko
    Commented 2022年2月9日 4:52
  • 表示位置は, CSS 内 .chapel-reserve.btm-reserve が記されてる場所にある可能性が高いので, そちらを調べるのがよいかもです
    – oriri
    Commented 2022年2月9日 6:12

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。