WordPressサイトでメガメニューをプラグインを使わずに作る方法をご紹介します。
目次
メガメニューのサンプル
記事制作時点でWordPressにプリインストールされているテーマ「Twenty Twenty-Five」をベースに、以下のようなメガメニューをプラグインを使わずに作ります。
メガメニューの作り方
ブロックエディタでメニュー項目を作る
固定ページを新規追加して、タイトルに「メガメニュー」と入力します。
本文にはカバーブロックを挿入します。
右側のメニューよりスタイルタブ→色→オーバーレイを選択します。
カラーパレットからカバーブロックの色を選択します。
カバーブロックにデフォルトで表示されているタイトルの段落ブロックを削除します。
新たに段落ブロックを挿入します。
段落ブロックに「✕」と入力して、追加CSSクラスにmega-menu-close-buttonを設定します。
改行してカラムブロックを挿入します。
カラムブロックのレイアウトは3カラム均等割（33/33/33）を選択します。
カラムブロックに追加CSSクラスmega-menu-contentを設定します。
左側の列に画像ブロックを挿入してロゴを設定します。
中央の列に段落ブロックを挿入します。
メニュー項目を入力し、そのテキストを選択状態でリンクを設定します。
リンク先のURLを入力してリターンアイコンをクリックします。
必要なメニュー項目を繰り返し入力します。
カバーブロックに追加CSSクラスmy-mega-menuを設定します。
メガメニューの固定ページを下書き保存します。
ヘッダーにCSSクラスを設定する
外観→エディターを選択します。
パターンを選択します。
テンプレートパーツ一覧→ヘッダーを選択します。
利用中のヘッダーテンプレートパーツを選択します。
ヘッダーに追加CSSクラスmy-global-headerを設定します。
追加CSSで体裁を整える
以下のCSSをWordPress子テーマのstyle.cssに記載します。
/* メガメニュー 基本設定 */
.my-mega-menu {
display: none !important; /* 非表示 */
animation: open 0.2s; /* 表示スピード */
}
/* メガメニュー 表示したとき */
.my-mega-menu.displayed {
display: block !important; /* 表示 */
position: fixed; /* 位置 */
top: 0; /* 位置 */
width: 100%; /* 幅 */
height: 100%; /* 高さ */
}
/* メガメニュー 消すとき */
.my-mega-menu.closing {
animation: close 0.2s /* 消すスピード */
}
/* メガメニュー 表示アニメーション 透過 → 非透過 */
@keyframes open {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
/* メガメニュー 消すアニメーション 非透過 → 透過 */
@keyframes close {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
/* メガメニュー ラッパー */
.my-mega-menu.displayed .wp-block-cover__inner-container {
padding: 0; /* 内側の余白 */
height: 100%; /* 高さ */
margin: 0 auto; /* 余白 */
}
/* メガメニュー メニュー項目 */
.my-mega-menu.displayed .mega-menu-content {
margin-top: 50px; /* 外側の余白 */
max-width: 100%; /* 最大幅 */
display: grid; /* グリッドレイアウト */
grid-template-columns: repeat(4, 1fr); /* 4列表示 */
}
/* メガメニュー カバブロック 2列目 */
.my-mega-menu.displayed .mega-menu-content .wp-block-column:nth-child(2) {
grid-column: 3 / 4; /* 表示列 */
}
/* メガメニュー カバブロック 3列目 */
.my-mega-menu.displayed .mega-menu-content .wp-block-column:last-child {
grid-column: 4 / 5; /* 表示列 */
}
/* メガメニュー 閉じるボタン */
.my-mega-menu.displayed .mega-menu-close-button {
width: fit-content; /* 幅 */
margin: initial !important; /* 外側の余白 */
margin-left: auto !important; /* 外側の余白 */
cursor: pointer; /* カーソル */
}
/* メガメニュー 表示ボタン */
.mega-menu-display-button {
cursor: pointer; /* カーソル */
}追加PHPでメニュー開閉アニメーションを設定する
以下のPHPをWordPress子テーマのfunctions.phpに記載します。
// ヘッダーメニューにメガメニュー開閉ボタンを追加する
function add_mega_menu_display_button($block_content, $block) {
// スマホのときはテンプレートの機能でハンバーガーメニューがあるのでメガメニューを使わない
if (!wp_is_mobile()) {
if ($block['blockName'] === 'core/navigation') {
$pattern = '/(<\/li><\/ul>)<\/ul>/';
$replacement = '</li><span class="mega-menu-display-button material-symbols-outlined">menu</span></ul></ul>';
$block_content = preg_replace($pattern, $replacement, $block_content, 1);
}
}
return $block_content;
}
// 固定ページ「メガメニュー」を他のページに挿入する
function prepare_mega_menu() {
$query = new WP_Query(array(
'post_type' => 'page',
'title' => 'メガメニュー',
'post_status' => 'draft'
));
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$content = get_the_content();
echo do_blocks($content);
}
}
wp_reset_postdata();
}
// メガメニューの設定
function initialize_mega_menu() {
// スマホのときはテンプレートの機能でハンバーガーメニューがあるのでメガメニューを使わない
if (!wp_is_mobile()) {
prepare_mega_menu();
?>
<script>
// メニュー開閉で画面がブレるのを防止する
function preventFlicker() {
// スクロールバーなしのビューポート幅
const originalStyle = window.getComputedStyle(document.body).overflow;
document.body.style.overflow = 'hidden';
const viewportWidth = window.innerWidth;
document.body.style.overflow = originalStyle;
// bodyの幅
const contentWidth = document.body.clientWidth;
// スクロールバーの幅
const scrollbarWidth = viewportWidth - contentWidth;
// スクロールバーの幅を設定
document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
}
preventFlicker();
// メニュー開閉ボタンの位置を揃える
function alignMenuTogglePosition(closeButton) {
const myGlobalHeader = document.querySelector(".my-global-header");
const sourceStyle = window.getComputedStyle(myGlobalHeader);
const paddingTopValue = sourceStyle.getPropertyValue('padding-top');
closeButton.style.width = `${myGlobalHeader.offsetWidth}px`;
closeButton.style.paddingTop = paddingTopValue;
}
const closeButton = document.querySelector(".mega-menu-close-button");
alignMenuTogglePosition(closeButton)
// 開くボタン押下でメガメニューを表示する
function displayMegaMenu() {
const myMegaMenu = document.querySelector(".my-mega-menu");
myMegaMenu.classList.add("displayed");
document.body.classList.add('do-not-scroll');
}
const displayButton = document.querySelector(".mega-menu-display-button");
displayButton.addEventListener("click", displayMegaMenu);
// 閉じるボタン押下でメガメニューを徐々に消す
function closeMegaMenu() {
const myMegaMenu = document.querySelector(".my-mega-menu");
myMegaMenu.classList.add("closing");
}
closeButton.addEventListener("click", closeMegaMenu);
// メガメニューが消えたらスタイル初期状態にもどす
function initializeMegaMenu(event) {
const myMegaMenu = event.currentTarget;
if (myMegaMenu.classList.contains("displayed") &&
myMegaMenu.classList.contains("closing")) {
myMegaMenu.classList.remove("displayed", "closing");
document.body.classList.remove('do-not-scroll');
}
}
const myMegaMenu = document.querySelector(".my-mega-menu");
myMegaMenu.addEventListener("animationend", initializeMegaMenu);
</script>
<?php
}
}
// メニュー開閉ボタンにGoogle Fonts Iconsを利用
function initialize_google_fonts_icons() {
// スマホのときはテンプレートの機能でハンバーガーメニューがあるのでメガメニューを使わない
if (!wp_is_mobile()) {
?>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=menu" />
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
</style>
<?php
}
}
add_filter('render_block', 'add_mega_menu_display_button', 10, 2);
add_action('wp_footer' , 'initialize_mega_menu');
add_action('wp_head' , 'initialize_google_fonts_icons');まとめ
WordPressサイトでメガメニューをプラグインを使わずに作る方法をご紹介しました。
カナメグローバルホールディングスではWebサイトの制作や保守を行っています。
WordPressサイトも対応しているのでお気軽にご相談ください。
