書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【simplicity】にグローバルナビ(メニュー)を増やして管理する

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

simplicity_menu

第1回目の記事です!

ブログは経験がありますが、ノージャンルのブログを運営するのは初めてですわ!

本日からよろしくお願いします!

さて、本日は『グローバルナビを追加する方法』をご紹介していきます!

使用しているテーマはカスタマイズが超絶楽な『simplicity』!

https://wp-simplicity.com/

ほとんどのブログユーザーは使用していますね!

編集するソースは

  • header.php
  • navi.php
  • functions.php
  • style.css
  • mobile.css

の5つ!

グローバルメニューにヘッダー最上部へ更にもう一つを追加!

メニューを2種類にして管理したいと思い編集開始!

それぞれのソースを編集する

headerphp

「header.php」の編集

たった3行の追加なのでめちゃ簡単です!

※親テーマのphpファイルをコピーして子テーマの下に置くことを推奨します。

[php]<div id=”container”>[/php]

を探して下さい!

コンテンツが始まる位置を表しています。

この真下に

を追加するだけです。

このロジックの場合は、メインのナビゲーションがある時のみ追加のメニューが表示されます。

hnaviについては任意なので好きな名前をつけてOKです。

headernaviでもfooternaviでもOK

フッターの上に追加したい場合は「footer.php」を編集します。

の真上に

を追加するだけです。

「navi.php」をコピーし編集

親テーマ下にある「navi.php」をコピーします。

名前を変更し、「header.php」にて追加した任意の名前を付け親テーマ下に格納します。

上記であれば、hnavi.phpになりますね。

hnaviの箇所はphpファイルと同じ名前を。

top-naviの箇所は次のfunctions.phpで編集します。

これで親テーマの下には

  • navi.php
  • hnavi.php

と2種類が保存されています。

「functions.php」にナビメニューを追加

45行目辺りにある「カスタムメニューの「場所」を設定」を追加編集します。

の下に

を追加します。

これで、wordpressの管理画面で編集が出来るようになります。

img000752

こんな感じです。

「style.css」の編集

これはデザインの編集なので、好みに合わせて自由に編集して頂いてOKです。

当サイト『書きタレ』と同じデザインであれば、以下のように設定すればOKです。

カラーとか変えれば、全く同じにはならないかと。

「mobile.css」の編集

このままの設定だと、スマホ画面にてレイアウトがかなり崩れているので、スマホ表示の際は

非表示に設定します。

こんな感じで追記すればOKです。

完成系

img000753

新規メニューでメニューを追加し、編集するメニューで「functions.php」で追加したメニューを選びます。

それ以降はメインのグローバルメニューと同じように編集して設定するメニューを選び保存するだけ。

img000754

これで、任意の場所にナビゲーションが追加されました。

PC版

img000755

スマホ版

img000756

 

これで完成です。

「functions.php」をさらに追加すれば、好きなだけメニューが増やせます。

まとめ

メニューバーのカスタマイズは他にもたくさんあるようなので、

ユーザーに合ったカスタマイズが出来ればいいなと思います♪

以下の記事も参考になるので、よかったら^^

 

あわせて読みたい

WordPressテーマ「Simplicity」をカスタマイズする19のポイント

 

あわせて読みたい

WordPress「Simplicity」のデザインカスタマイズ スマホのフッターメニュー

この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2016 All Rights Reserved.