Habakiriでヘッダー右上に電話番号を表示する方法

2017/04/10 2017/07/20

個人サイトの場合は必要ないんですが、企業サイトの場合は画面右上に電話番号を表示して欲しいって要望がよくあります。

あまりデザイン的には美しくない気がするんですが、BizVector的なテンプレートチックなアレです。

デザイン例として下記のようなイメージになります。

右上に電話番号とかお問合せへの導線が配置されてますね。

大会社とかオシャレなとこはまずやらないデザインです（白目）。

このレイアウト配置をするやり方を説明します。

管理画面から「外観」-「カスタマイズ」-「レイアウト」-「ヘッダー」を選択し、ヘッダーを「中央ロゴ」に設定します。

そして、header.phpを親テーマから子テーマの方にコピーします。

コピーした子テーマのheader.phpの31行目以降を下記のように書き換えます。

//header.php
 <header id="header" class="header <?php echo esc_attr(implode(' ', $header_classes)); ?>">
                <?php do_action('habakiri_before_header_content'); ?>
                <div class="container">
                    <div class="row header__content">
                        <div class="col-xs-10 <?php echo esc_attr($site_branding_size); ?> header__col">
                            <div class ="row">
                                <div class="col-md-6 col-md-offset-3 col-sm-12">
                                    <?php get_template_part('modules/site-branding'); ?>
                                </div>
                                <div class="col-md-3 col-sm-12">
                                    <div class ="top-right-area">
                                        <a class ="contact_link" href ="<?php echo esc_url(home_url('/contact-us')); ?>">
                                            <div class ="mail-area">
                                                <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/email.png" alt="メールマーク画像" class = "mailimg"> お問い合わせはこちらから
                                            </div>
                                        </a>
                                        <div class="tel-number"><div class = "tel-img"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/tel.png" alt="電話マーク画像"><a href="tel:0120-3456-7890">0120-3456-7890</a></div></div>
                                        <div class="font_white">ご予約・受付時間／10:00～20:00</div>
                                    </div>
                                </div>
                            </div>
                            <!-- end .header__col --></div>
                        <div class="col-xs-2 <?php echo esc_attr($gnav_size); ?> header__col global-nav-wrapper clearfix">
                            <?php get_template_part('modules/gnav'); ?>
                            <div id="responsive-btn"></div>
                            <!-- end .header__col --></div>
                        <!-- end .row --></div>
                    <!-- end .container --></div>
                <?php do_action('habakiri_after_header_content'); ?>
                <!-- end #header --></header>
            <div id="contents">
                <?php do_action('habakiri_before_contents_content'); ?>

考え方としてはbootstrap3でヘッダー部分を3つに分けるイメージです。