Lightning × ExUnit 日本語デモ   Just another サイト 株式会社サンプル site.png

 

シンプルでカスタマイズしやすいWordpress公式のテーマ「Lightning」。

そのLightningをカスタマイズしてコーポレートサイトを構築しようとした時、右上のグローバルメニューをスライドショーやアイキャッチの下へ持っていき、空いた箇所には電話番号や[資料請求][お問い合わせ]ボタンを設置したいと思い色々やってみました。

①header.phpの24行目から40行目、43行目から48行目を切り取る。

②切り取った部分のみで差し込み用のメニューテンプレート「module_gnavi.php」を作成し貼り付けて整える。

③少し面倒だが、page,single,archiveなどのメニューを表示したい箇所に「」を差しこむ。

④CSSもろもろを調整して表示。

⑤完了

 

確認作業をしていたところ、「iPad」でメニューがおかしなことになっているというご指摘が・・・orz

 

iPadを回転させると、移動させる前の位置にメニューがひょっこり現れる。

さまざまな検証・実験を経て得た結論。

/wp-content/plugins/lightning-advanced-unit/inc/navigation/js/navigation.min.js に原因あり。

minファイルなのでnavigation.jsでご説明。

106行目に「jQuery('#gMenu_outer').insertAfter('.navbar-header');」とある。

この辺りは、メニューがアニメーションなどで変化した後に稼働する箇所。

要は、回転してメニューがアニメーションしてそのあとにメニューを「.navbar-header」要素の後に差しこみますってこと。

「.navbar-header」要素は、もともとヘッダーファイル内にメニューがあった箇所の1つ前の要素。

なのでこの個所を今の自分に合っているものに書きかえて終了。