☆彡日常ブログ(本ページはプロモーションが含まれています)

WordPress グローバルメニューとか変えてみた

WordPress カスタマイズ

Last Updated on 2019年9月24日 by ぞん

  • バージョン情報(公開時)
    • WordPress 5.2.2-ja
    • LIQUID PRESS LIGHT 1.1.6
    • Simple Custom CSS and JS 3.26

フッターメニューをつけてみた

フッターメニューをつけたかったのだけど、私が使っているテーマ(LIQUID PRESS LIGHT)は、フッターメニューに対応していませんでした。

なんとかならないものかと探していたら、以下のような記事を見つけまして、コピペさせてもらいました。

参考記事:
コピペで簡単!WordPressでグローバルメニューの他にフッターメニューを追加するカスタマイズ方法

私が使用したのは、以下です。

  • functions.php(子テーマ)
  • footer.php(子テーマ)
  • CSS(プラグイン:Simple Custom CSS and JS)

わーい!でけた!

フッターメニュー

グローバルメニューの色を変えてみた

  • メニューバーの項目にマウスのポインタを載せたときに色が変わるようにしたい
  • 現在ページ(カレント)の時にメニューバーの項目に色がつくようにしたい

もう、何が何やらわからなくて、”current”とついているclassに片っ端から色をつけて確かめてみるという…

「気の遠くなるようなローラー作戦」

なんとか、色がつきました。

CSS適用前

グローバルメニュー(CSS適用前)

CSS適用後

グローバルメニュー(CSS適用後)

画面に上に貼りつくグローバルメニューにしてみた

プラグインを使わずにやろうとしたものの…

「なんでもかんでもプラグインに頼っちゃいけない」「プラグイン増やしちゃいけない」と、皆が言うので、「Clingify」というのでやってみました。

参考記事:
スクロール追従型のグローバルメニューを簡単に実装できる「Clingify」の使い方

紹介されている記事を真似して設置すると、確かに画面の上に貼りつきました。しかし、どうも動きが変。。。

貼りつかずにスルーされるときもあったり、プルダウンメニューが本体の下に入り込んだり。

スマートフォンのメニューが使い物にならなくなったり。

見えないスマホメニュー

私の使っているテーマでは、そのままでは使えないのかもしれません。
オプションがあるそうで、いじれば対応できるのかもしれませんが、どうすればいいのかわからず…

素人は去れ!

※ 私の能力が足りないだけで、Clingifyが悪いわけではありません。

結局プラグインを使う

諦めました。

My Sticky Menu

有効にしただけで、バーの色も初期設定のままですが、いい感じの仕上がりになりました。

くっついた!

My Sticky Menu 適用

スマホも大丈夫!

見えるスマホメニュー

ウェルカム素人!

教訓

  • 身の程を知れ!
  • 諦めが肝心!
コメント (2)
  1. KYO より:

    なんかエラー出てるよ
    全部のメニュー押してみた?

    1. ぞん より:

      KYOさんありがとう
      今、全部押してみたけど、エラーは出てないみたいです。。。様子見です。。
      追記:8/8現在、私のPCとAndroidスマホでは特におかしな動きもないので、大丈夫かなということで。