footer の電話と地図ボタンの動作設定

footer の電話と地図ボタンの動作設定

まず電話番号から

<?php echo post_custom("tel")?>

で電話番号がでるので

<li><a href="#" data-icon="phone">電話</a></li>

の部分をかえてみます

電話発信用のリンクを設定する

にあるように

<a href="tel:0312345678">電話はこちらへ</a>

というように

href="tel:電話番号"

となるようにすればOK

<li><a href="tel:<?php echo post_custom("tel")?>" data-icon="phone">電話</a></li>

でOK
ただしPCでは確認できないので
ipod touch や　スマホでの確認が必要

次にナビ機能

href="http://maps.google.com/maps?q=クエリ"

で起動するので

地図に関しては

<?php echo post_custom("Address")?>

で取得できるので

<li><a href="#" data-icon="location">地図</a></li>

を

<li><a href="http://maps.google.com/maps?q=<?php echo post_custom("Address")?>" data-icon="location">地図</a></li>

とすることで
google map によるナビが起動します

こちらはPCで動作確認できました

今回の変更で footer.php は以下のようになります

</div>
<div data-role="footer" <?php if(is_single()):?>data-position="fixed"<?php endif;?>>
<?php if(is_single()):?>
 <div data-role="navbar">
        <ul>
          <li><a href="tel:<?php echo post_custom("tel")?>" data-icon="phone">電
話</a></li>
          <li><a href="http://maps.google.com/maps?q=<?php echo post_custom("Address")?>" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
<?php endif; ?>
</div>
 Copyright　2015 <?php if(date_i18n('Y')!=2015){
   echo '- ';
   echo date_i18n('Y');
 } ?><br>
 <?php bloginfo('name'); ?>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>