掲題の件でご相談です。
現在ワードプレスで作成したサイトに下記のようにボタンを
2カラムで表示させています。
ソースは下記です。
<div class="column-wrap cf "> <div class="d-1of2 t-1of2 m-all"><!-- 2カラム表示のスタイリング --> <div class="btn-wrap aligncenter simple big"> <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する </a> </div> </div> <div class="d-1of2 t-1of2 m-all"><!-- 2カラム表示のスタイリング --> <div class="btn-wrap aligncenter simple big"> <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a> </div> </div> </div>
<?php the_field('tel-button',$post->ID); ?> <?php the_field('web-reserve-button',$post->ID); ?>
→プラグインのカスタムフィールドで電話番号、リンク先のWeb予約URLを入力するための関数です
ただ、Web予約を使わない場合、Web予約をボタンを非表示にするのですが、
そうすると2カラムのスタイリングには変わりないので、
電話予約のボタンが左に寄りに表示されます。
逆に電話予約を使わない場合、電話予約ボタンを非表示にするのですが、
今度は右に寄ってWeb予約ボタンが表示されます。
スマホではレスポンシブ表示なので問題ないのですが、
PCの場合、上記のように右、もしくは左によって表示されるので、
これをどうにかしたく思っています。
今のところ解消法として、Web予約しか使わないときは、
<div class="text-center"> <div class="btn-wrap aligncenter simple big"> <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a> </div> </div>
とソース自体を都度変更しています。
このような方法以外に例えばif文を使って都度手動でソースを書き換えることなく、
Web予約しか使わないとき、または電話予約しか使わないときのボタンを
中央寄せに表示させることはできるのでしょうか。
CSSは下記です。
@media only screen and (min-width: 1100px) { .d-all { float: left; padding-right: 0.75em; width: 100%; padding-right: 0; } .d-1of2 { float: left; padding-right: 0.75em; width: 50%; } } @media only screen and (min-width: 768px) and (max-width: 1099px) { /* グリッドシステム */ .t-1of2 { float: left; padding-right: 0.75em; width: 50%; } } @media only screen and (max-width: 767px) { /* グリッドシステム */ .m-all { float: left; padding-right: 0.75em; width: 100%; padding-right: 0; margin-bottom: .5em; } } @media only screen and (min-width: 1100px){ .column-wrap { width: 100%;} }
できるとすればどのような書き方になるのでしょうか。
つまり、
the_field('tel-button',$post->ID)
と
the_field('web-reserve-button',$post->ID)
に両方文字列の入力があったときは
<div class="column-wrap cf "> <div class="d-1of2 t-1of2 m-all"><!-- 2カラム表示のスタイリング --> <div class="btn-wrap aligncenter simple big"> <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約 </a> </div> </div> <div class="d-1of2 t-1of2 m-all"><!-- 2カラム表示のスタイリング --> <div class="btn-wrap aligncenter simple big"> <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a> </div> </div> </div>
と表示し、
the_field('tel-button',$post->ID)
だけ入力があった場合は
<div class="text-center"> <div class="btn-wrap aligncenter simple big"> <a href="<?php the_field('tel-button',$post->ID); ?>" target="_blank">Web予約</a> </div> </div>
だけを表示し、
the_field('web-reserve-button',$post->ID)
だけ入力があった場合は
<div class="text-center"> <div class="btn-wrap aligncenter simple big"> <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a> </div> </div>
としたいのですが、どのように記述すればいいのでしょうか。
下記のように記述したのですが、リクエストを処理できませんとなり、画面を表示することができません。
<div class="column-wrap cf "> <?php if get_field('tel-button',$post->ID)and('web-reserve-button',$post->ID) :?> <div class="d-1of2 t-1of2 m-all"> <div class="btn-wrap aligncenter simple big"> <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する<br> (スマホの場合タップすると電話がつながります)</a> </div> </div> <?php elseif get_field('tel-button',$post->ID): ?> <div class="text-center"> <div class="btn-wrap aligncenter simple big"> <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する<br> (スマホの場合タップすると電話がつながります)</a> </div> </div> <?php elseif get_field('web-reserve-button',$post->ID): ?> <div class="text-center"> <div class="btn-wrap aligncenter simple big"> <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約をする</a> </div> </div> <?php endif; ?> </div>
追記
下記で実装できました!!!
<div class="column-wrap cf "> <?php if(get_field('tel-button',$post->ID) and get_field('web-reserve-button',$post->ID)) :?> <div class="d-1of2 t-1of2 m-all"> <div class="btn-wrap aligncenter simple big"> <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する </a> </div> </div> <div class="d-1of2 t-1of2 m-all"> <div class="btn-wrap aligncenter simple big"> <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a> </div> </div> <?php elseif( get_field('tel-button',$post->ID)): ?> <div class="text-center"> <div class="btn-wrap aligncenter simple big"> <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する つながります)</a> </div> </div> <?php elseif( get_field('web-reserve-button',$post->ID)): ?> <div class="text-center"> <div class="btn-wrap aligncenter simple big"> <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a> </div> </div> <?php endif; ?> </div>
もし詳しい方がいらっしゃればご教示いただきたく思います。
回答2件
あなたの回答
tips
プレビュー