Habakiriを王道のコーポレーションサイトデザインにする方法

habakari

王道デザイン

Habakiriのヘッダーに「バナーを表示」して王道のコーポレーションサイトデザインにする方法を紹介します。

バナーのサイズは、ロゴのサイズに合わあせて調整してください。

 
[スポンサーリンク]

 
 

PC・変更イメージ

※メニューの均等割などは以前の記事(下記載)を参考に変更して下さい

Habakiriのヘッダー

 
 

スマホ・変更イメージ

電話ボタンを表示します

Habakiriスマホ

 
 

タブレット・変更イメージ

横表示

タブレット横

 
 
縦表示 (複数毎バナーを用意してバナーを表示させる事も可能です)

タブレット縦

 
 

変更ファイル

変更ファイル habakiri/modules/logo.php の1ファイル

※子テーマの場合は、子テーマのファイルを変更して下さい

変更ファイル

 
 

追加コード

用意したバナーURL(説明の為、1毎のバナーですが複数毎のバナーおよびリンク可能)
用意した電話ボタンURL を記載してください 

25行目

 

25行目 <a href=”%s” rel=”home”>%s</a>の後に記載する

<img src=”https://yellowglasses.jp/バナー.jpg” alt=”098-000-1111″ class=”pull-right hidden-xs hidden-sm” /><a href=”tel:00000000″><img src=”https://yellowglasses.jp/電話ボタン.png” alt=”098-000-0000” class=”pull-right visible-xs” /></a>


<?php
/**
 * Version    : 1.0.0
 * Author     : inc2734
 * Author URI : http://2inc.org
 * Created    : August 30, 2015
 * Modified   :
 * License    : GPLv2 or later
 * License URI: license.txt
 */

$header_logo = Habakiri::get( 'logo' );

if ( $header_logo ) {
	$header_logo = sprintf(
		'<img src="%s" alt="%s" class="site-branding__logo" />',
		esc_url( $header_logo ),
		get_bloginfo( 'name' )
	);
} else {
	$header_logo = get_bloginfo( 'name' );
}

printf(
	'<a href="%s" rel="home">%s</a><img src="http://yellowglasses.jp/design/01/wp/wp-content/uploads/2016/06/700.png" alt="098-000-1111" class="pull-right hidden-xs hidden-sm" /><a href="tel:00000000"><img src="http://yellowglasses.jp/design/01/wp/wp-content/uploads/2016/06/tel5611.png" alt="098-943-3568" class="pull-right visible-xs" /></a>',
	esc_url( home_url( '/' ) ),
	$header_logo
);


 
 

完成

下記事を参考にすると、日本的王道デザインのホームページが出来上がります。

王道のコーポレーションサイト

 

この投稿へのコメント

  1. jnak said on 2016-08-21 at 3:16 PM

    初めまして。jnakと申します。habakiriを使用していて、変更したい内容と全くお案じ内容を書いてくださっていて行き着きました。 
    記事の記載の通りURLを変更してチャレンジしてみたのですが、logo.phpのどこに追記すれば良いのかわからず、いろいろ試してみましたが、サイトの表示が消えてしまったりと。。恥ずかしながらながらお手上げ状態です。。。
    お手数とは思いますが、もう少し詳しくご教授頂けるととてもありがたいです。
    何卒宜しくお願い致します。

    • mario said on 2016-08-21 at 4:07 PM

      jnak様 はじめまして記載不足で申し訳ございませんでした。

      記載内容を修正いたしました

      logo.phpの25行目<a href=”%s” rel=”home”>%s</a>の後に記載すれば表示されます。

      • jnak said on 2016-08-21 at 9:52 PM

        管理者様
        素早いご回答ありがとうございます。
        表記していただいた通り、追記してみたのですが、ロゴの後にH1サイズのタグが表示されてしまいます。

        ちなみにですが、画像のように複数のバナー(問い合わせ電話番号)の場合の表記(サンプル画像のように)この場合のコードも掲載していただけると本当の本当に助かります。

        勝手に参考にさせていただいているのに、ご面倒とは思いますが何卒ご教授いただければ幸いです。

        • jnak said on 2016-08-21 at 10:27 PM

          管理者様
          先ほどはありがとうございました。
          再度記載していただいたコードを書き込み直しましたら表示できました。

          ありがとうございました。

          今後もちょくちょく訪問させていただきます。

コメントを残す