いろいろドツボにはまりました

ワードプレスで中級者からレベルアップしたいならこの本だ!!と、WordPressの教科書2を昨日猛プッシュしたわけですが。

実は、カスタマイズ中にたくさんドツボにはまったので、それを書いておこうと思います。

わたくし、しょっちゅういろいろ忘れてしまうトリ頭ですので、こうやってブログに書いておくと、あとで検索できるので、いいんですよ。

やり方忘れても、記事書いてあることはなぜか覚えてるんで。

PCグローバルナビのカスタマイズ方法

さて、今回は、PC用テンプレートのグローバルナビのカスタマイズ方法について、メモしておきたいと思います。

実は、これ、複雑系テンプレ全然関係なさそうな感じで、たぶんCSSの問題。

わたしもなんでこれで解決できるのか、どう動いてるか謎なんで、もっとわかる方いたら、解説記事書いて教えてください。アダルトとか情報商材のNGブログじゃなければ、紹介しますw

グローバルナビは画像です

まずは、このサイト、わたしが昨日作った「福岡スイーツ三昧の旅!」っていうサイトなんですが、上の方に青い色のグローバルナビがありますよね。

福岡スイーツ三昧の旅

これね、画像なんですよ。

だから、いくら管理画面のメニューから修正しても直んないの。

しかも、ソース見ただけでは、わたしのような未熟者には、一見、画像が使われているとはわからなかった。

なので、ひたすらメニューの保存ボタン押して、「なんで変わらないのよ、むきーっ!!」とやってたわけだw

まあそれを数回やったら、さすがに気がつくよね。これは、画像だろう!画像に違いない!じゃないとキャッシュにしても、こんなに変わらぬわけがない!!!

グローバルナビの画像

じゃあ、グローバルナビの画像はどこにあるのよさ!!って話しなんだけど。

このテンプレは、PC用テンプレと、スマホ用テンプレがあって、スマホ用テンプレが、PC用テンプレの子テンプレになってます。

で、PC用テンプレは、

/themes/apt-pc/

内に格納されているんだけど、その中に、さらにcssというフォルダがあるので、そこにlayout.cssというのがあります。

それが、大元のCSSです。

これは、管理画面からは開けないので、サーバーへアップロードする前にローカルにダウンロードしたものを、じっくり眺めてみます。

とりあえず、たくさんあるんで、ソースで見つけたidクラスの「global_nav」とでも入力して検索してください。わかんない人は、196行目あたりから出てくるんで見てください。

で、210行目にそれらしき、画像が出てきます。なので、それを見つけて実際に見てみると・・・

140826gloval_nav

なんじゃこりゃ!!!

すみません。わたしCSSむっちゃ苦手ですので、よくわかりません。これを使って、何かマウスオーバーさせたら色が変わる的なことができるんでしょうか!!??

フォトショで修正してサーバーにアップロード

とりあえず、この画像の文字部分をフォトショップのスタンプツールを使って消して、カスタマイズ後のメニューバーに表示させたい文字を入れました。

それがこちら。

140826gloval_nav2

で、これを元あったところへアップロードしたらOKと思ったら甘かった・・・。

なぜか固まりのはずの画像が分割されてぐだぐだに

えーっと、なんでひとかたまりのはずの画像が、分割されて、TOPが3つくらいあったり、スイーツ情報が一番右側に来てたりするんですかね!!!

しまった、スクリーンショットとっときゃ良かった。

もう頭の中は???マークだらけです・・・。

しかし、これをどうにかしないと前へ進めない。

なので、再び、layout.cssを眺めてみました・・。

む??

こ、これは?

urlとCSSが連動している

218行目からのCSSを眺めていると、規則的な並びになっていることがわかりました。

クラスで、「menu-item-slug-top」というのが3回出てきます。

その次が、「menu-item-slug-about」というのが4回。

それ以降、同じように、メニューの数だけ、CSSが設定されています。

そして、この「menu-item-slug」の後ろの文字が、

top
about
csr
tour-info
office

と、カスタマイズ前にメニューバーに表示されていた項目へのサイトURL(http://tabijoho.jp/fukuoka/)以降のURLと同じなのです。

なので、トップはそのままに、それ以外をそれぞれ、新しいメニュー項目のURL

menu-item-slug-sweets-info
menu-item-slug-hotel-info
menu-item-slug-news
menu-item-slug-about

に変更して、layout.cssをサーバーへアップロードしたら・・・

ちゃんと、グローバルナビが思ったとおりに表示されるようになりました。

このやり方がCSS的に正解なのかどうかは謎ですし、なんで表示されるかもよくわからないんですが、とりあえずこれでやったらやりたいことができたので、記録のためメモしておきます。

そして、モバイルのナビゲーション変更も大変だったけど、これはまた次の記事で。

ワードプレス、中級以上を目指したい人は、この本をどうぞ。新たな地平が開けますw