【WordPressマナブログコピー】グローバルナビ(メニュー)の設定

基本デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

Manablog Copyのグローバルナビの設定方法を紹介します。
変更の方法は、テーマのphpファイルを直接変更します。

注意念のため必ずコードのBackupを取っておいてください。(テキストファイルなどにコピペでもOK)

当ブログについて

マナブログさんに参考マニュアルとして掲載して頂きました😆
本家認定のマニュアルです。

Manablog Copy グローバルナビの設定方法

変更は、管理画面外観テーマエディターnavi-menu.phpを修正します。

実際の変更は10行目〜29行目の間を修正します。

変更前のソース

		<li itemprop="name" class="sp-none"><a href="<?php echo home_url(); ?>/" itemprop="url"><i class="fa fa-home" aria-hidden="true"></i></a></li>
		<li itemprop="name" class="pc-none"><a href="<?php echo home_url(); ?>/profile/" itemprop="url"><i class="fa fa-home" aria-hidden="true"></i> プロフィール</a></li>
		<li class="dropdown" itemprop="name">
			<a href="#" itemprop="url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-line-chart" aria-hidden="true"></i> Menu01 <span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="<?php echo home_url(); ?>/seo/">Nav01</a></li>
				<li><a href="<?php echo home_url(); ?>/seo/">Nav01</a></li>
			</ul>
		</li>
		<li class="dropdown" itemprop="name">
			<a href="#" itemprop="url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-code" aria-hidden="true"></i> Menu02 <span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="<?php echo home_url(); ?>/seo/">Nav01</a></li>
				<li><a href="<?php echo home_url(); ?>/seo/">Nav01</a></li>
			</ul>
		</li>
		<li itemprop="name"><a href="<?php echo home_url(); ?>/category/crypto-currency/" itemprop="url"><i class="fa fa-btc" aria-hidden="true"></i> Menu03</a></li>
		<li itemprop="name"><a href="<?php echo home_url(); ?>/category/travel/" itemprop="url"><i class="fa fa-plane" aria-hidden="true"></i> Menu04</a></li>
		<li itemprop="name"><a href="<?php echo home_url(); ?>/category/thought/" itemprop="url"><i class="fa fa-spinner" aria-hidden="true"></i> Menu05</a></li>
		<li itemprop="name"><a href="<?php echo home_url(); ?>/category/party/" itemprop="url"><i class="fa fa-glass" aria-hidden="true"></i> Menu06</a></li>

注意グローバルナビの設定にカテゴリURLを使いますので、先にカテゴリの設定を済ませておきましょう。

【WordPressマナブログコピー】カテゴリの設定

修正するソースはを1つずつ説明します。

ホームボタン部分設定

一番左のホームボタン部分の設定です。

変更前のコード

		<li itemprop="name" class="sp-none"><a href="<?php echo home_url(); ?>/" itemprop="url"><i class="fa fa-home" aria-hidden="true"></i></a></li>
		<li itemprop="name" class="pc-none"><a href="<?php echo home_url(); ?>/profile/" itemprop="url"><i class="fa fa-home" aria-hidden="true"></i> プロフィール</a></li>

基本的にこのコードは修正する必要がありません。

ホームアイコンのデザインを変更したい場合は、fa fa-homeの部分を変更します。変更するコードは、https://fontawesome.com/で探しましょう。

ちなみに、コード内のプロフィールという文字ですが、どこで使っているかと言うとスマホのハンバーガーメニュー内に登場する文言です。
こちらの表現を変更すると、スマホメニュー内の表示も変更できます。

2番目のナビゲーション

2番めのナビゲーションを変更するにはコードの13行目〜16行目を変更します。

変更前のコード

			<a href="#" itemprop="url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-line-chart" aria-hidden="true"></i> Menu01 <span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="<?php echo home_url(); ?>/seo/">Nav01</a></li>
				<li><a href="<?php echo home_url(); ?>/seo/">Nav01</a></li>

変更可能箇所(目安)は以下です。

緑数字の該当箇所は以下です。

  • ① a href=”#” ← #の部分にURLを入れるとリンクが張れます。
  • ② fa fa-line-chart ←アイコンのデザイン(上記同様に変更)
  • ③ Menu01 ← 文言を修正すれば反映します
  • ④ /seo/ ← ジャンプさせたいURLを入力
  • ⑤ Nav01 ← 文言を修正すれば反映します
  • ⑥ /seo/ ← ジャンプさせたいURLを入力
  • ⑦ Nav01 ← 文言を修正すれば反映します

⑤⑦のURLは、カテゴリであればカテゴリのURL部分(相対パス)を入力すればOKです。

例)当ブログで言うと、基本デザイン設定というカテゴリであれば、URLはhttps://sarugamamani.org/category/basicdesign/
になりますが、
/basicdesign/
だけでOKです。

3番めのナビゲーション

基本的に変更作業は、2番目のナビゲーションと同様です。
コードは20行目〜23行目になります。

4番目〜7番目のナビゲーション

4番目以降のナビゲーションはプルダウンメニューが無いバリエーションとなります。単一リンクであれば、このコードをそのまま使いましょう。
※同じくサブカテゴリ表示したい場合は、前述の2番目、3番めのコードをそのままコピペして流用します。

変更前のコード

	<li itemprop="name"><a href="<?php echo home_url(); ?>/category/crypto-currency/" itemprop="url"><i class="fa fa-btc" aria-hidden="true"></i> Menu03</a></li>
		<li itemprop="name"><a href="<?php echo home_url(); ?>/category/travel/" itemprop="url"><i class="fa fa-plane" aria-hidden="true"></i> Menu04</a></li>
		<li itemprop="name"><a href="<?php echo home_url(); ?>/category/thought/" itemprop="url"><i class="fa fa-spinner" aria-hidden="true"></i> Menu05</a></li>
		<li itemprop="name"><a href="<?php echo home_url(); ?>/category/party/" itemprop="url"><i class="fa fa-glass" aria-hidden="true"></i> Menu06</a></li>
  • ① Menu01 ← 文言を修正すれば反映します
  • ② /カテゴリURL/ ← URLを入れるとリンクが張れます。
  • ③ fa ●●● ←アイコンのデザインコード(上記同様に変更)

②のURLは、カテゴリであればカテゴリのURL部分(相対パス)を入力すればOKです。

画像提供:Freepik – jp.freepik.com によって作成された infographic ベクトル