ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマPHOTEK:ホームボタンを非表示にする方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.家のマークを非表示にしたい

ホームボタンはいつでもグローバルナビからTOPページに遷移させる為のボタンとしてありますが、ロゴからもTOPページに戻る事ができるため不要と考える方もいらっしゃいます。そこでホームボタンを非表示にする方法を紹介致します。


Before


After

A.下記のphpファイルの該当箇所を編集します

今回は、PHOTEKの下記ファイルを編集します。

編集するファイル:header.php
編集する箇所:

<a href="' . home_url() . '"><span class="glyphicon glyphicon-home"></span></a>

を削除してください。

<div class="row photek-sub-head">
	<div class="col-xs-12 col-sm-8 col-sm-offset-2">
		<?php wp_nav_menu(
			array(
					'theme_location' => 'primary',
					'menu_class' => 'nav nav-justified',
					'fallback_cb' => '',
					'menu_id' => 'main-menu',
					'items_wrap' => '<ul id="%1$s" class="%2$s"><li id="menu-toggler" class="menu-item visible-xs"><a href="#" onclick="if(document.getElementById(\'main-menu\').style.height != \'auto\') { document.getElementById(\'main-menu\').style.height=\'auto\'; document.getElementById(\'main-menu\').style.overflow=\'visible\'; } else { document.getElementById(\'main-menu\').style.height=\'50px\'; document.getElementById(\'main-menu\').style.overflow=\'hidden\'; } "><span class="glyphicon glyphicon-menu-hamburger"></span></a></li><li class="menu-item"><a href="' . home_url() . '"><span class="glyphicon glyphicon-home"></span></a></li>%3$s</ul>',
					'walker' => new wp_bootstrap_navwalker()
				)
			); ?>
		</div>
	</div>

↓ 

	<div class="row photek-sub-head">
		<div class="col-xs-12 col-sm-8 col-sm-offset-2">
			<?php wp_nav_menu(
				array(
					'theme_location' => 'primary',
					'menu_class' => 'nav nav-justified',
					'fallback_cb' => '',
					'menu_id' => 'main-menu',
					'items_wrap' => '<ul id="%1$s" class="%2$s"><li id="menu-toggler" class="menu-item visible-xs"><a href="#" onclick="if(document.getElementById(\'main-menu\').style.height != \'auto\') { document.getElementById(\'main-menu\').style.height=\'auto\'; document.getElementById(\'main-menu\').style.overflow=\'visible\'; } else { document.getElementById(\'main-menu\').style.height=\'50px\'; document.getElementById(\'main-menu\').style.overflow=\'hidden\'; } "><span class="glyphicon glyphicon-menu-hamburger"></span></li>
</a></li><li class="menu-item">%3$s</ul>',
					'walker' => new wp_bootstrap_navwalker()
				)
			); ?>
		</div>
	</div>

また、ホームのリンクを変えたいという場合には、上記で削除した箇所を下記のように編集いただくとリンク先の変更ができます。

<a href="' . home_url() . '"><span class="glyphicon glyphicon-home"></span></a>

<a href="http://●●●"><span class="glyphicon glyphicon-home"></span></a>

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事