WordPressテーマTCDのカスタマイズを研究するサイト

Q.スマホ表示のメニューボタンの表示の調整方法について

スマホ表示の際にヘッダーに表示されるメニューのアイコンや、文言を追加する場合の変更方法を教えてください。

A.下記のphpファイルの該当箇所を編集してください

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

<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\'; }
">MENU<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>',

「<span class=”glyphicon glyphicon-menu-hamburger”></span>」の[glyphicon glyphicon-menu-hamburger]はfont-awesome
でメニューボタンを表示させています。この箇所を編集することでアイコン変更ができます(変更方法はfont-awesomeサイトをご覧ください)
また、「<span class=”glyphicon glyphicon-menu-hamburger”></span>」の前に「MENU」を追加することで文言が適用されます。

The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。