はじめに
私は普段Javaなどをメインにアプリケーション開発を行っていますが、ひょんなことから自社HP更改でWordPressを使用しての実装を任されました。
WordPressはまだ初めて触って1週間も経っていない状態のため、気づいたこと・使えそうなことは備忘も兼ねて記録しようと思います。
環境
- WordPress：バージョン6.7.2
- テーマ：Lightning G3（無料版）
- プラグイン（Lightningの推奨プラグイン）
- VK All in One Expansion Unit
- VK Block Patterns
- VK Blocks
モバイルメニューの子ページリスト
モバイルメニュー（ページ幅が992px未満のみ表示）では、メニューで設定したサブ項目がドロップダウンで表示されます。
デフォルト
デフォルトでは「下矢印」⇔「×」でアニメーションなどはありません。
悪くはないのですが、個人的に「×」は下矢印に対応していないと感じ、
下矢印の「開く」ボタンを上下反転させ、「閉じる」ボタンとして使用することにしました。
※カーソルで隠れてしまい見えにくく申し訳ありません。。。
矢印を上下反転させる
「×」の代わりに下矢印の画像を上下反転したものを使用します。
追加CSS
WordPress管理画面 → 外観 → カスタマイズ → 追加CSS を開き、以下のソースを追加します。
/* モバイルメニューのドロップダウン開閉 */
.acc-btn.acc-btn-close {
background: url(https://[WordPressアドレス]/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-acc-icon-open-black.svg);
transform: rotateX(180deg);
}
結果
上下がくるっと反転し開閉していることが分かりやすくなった！（気がします）
解説
「閉じる」ボタンにbackgroundで「開く」ボタンと同じ画像URLを指定します。
※「https://」に続くアドレスはサイトアドレスではなくWordPressアドレスなので注意してください。
WordPress管理画面 → 設定 → 一般 から確認できます。
transformでは要素の伸縮や移動を指定できます。
今回は回転に使用するrotateXでX軸に180°回転するように指定しました。
他の記述を同様に追加すれば、様々な動きが可能になりそうです。
CSSでは「閉じる」ボタンのみ装飾していますが、
開閉時のどちらもアニメーションしてくれるのはありがたいですね。
（すみません、理屈は分かりません。。。）
参考記事
transformの使い方はこちらの記事を参考にさせていただきました。
最後に
地味で拙い記事でしたが、読んでいただきありがとうございました。
少しでもお役に立てれば幸いです。
WordPresには様々なテーマ・プラグインがありますが、無料版ではできることが限られます。
有料版の方が多機能ですが、追加CSSを使ってできるカスタマイズの幅はまだまだありそうです。
また発見があったときは記事にしたいと思います。