目次
はじめに
WooCommerで作るECサイトのマイアカウントページのカスタマイズ方法をご紹介します。
WooCommerce とは、WordPress向けのeコマースプラットフォームです。
簡単にECサイト（ネットショップ・オンラインショップ・通販サイト）を構築し運営することができ、自由度の高いカスタマイズ性があります。
多様なカスタマイズが可能なWooCommerceですが、今回はマイアカウントページのサイドメニューをスマホでは表示・非表示を切り替えられるようにカスタムしていきます。
制作環境と前提条件
今回の制作環境は以下の通りです。
- WordPressバージョン： 6.7.1
- WordPressテーマ・バージョン：Storefront Child 4.6.1（Storefrontの子テーマを作成）
- PHPバージョン： 8.1.29
前提条件は以下の通りです。
- WordPressをインストールして子テーマを作成済み
- WooCommerceをダウンロードして初期設定済み
- 作業前のバックアップを保存済み（※作業中にエラーが起きた際は作業前の状態を復元できるようにしてください。本記事で紹介する作業は自己責任のもと実施してください。）
完成形
マイアカウントページをスマホで表示すると、ページの上部にメニューが配置されます。
そこで、今回はスマホでページを表示した際にメニューを開閉できるようにボタンを追加します。
マイページのサイドメニューの開閉機能の実装【スマホ対応】
さて、ここから具体的なカスタマイズ方法をご紹介します。
必ずバックアップを保存してから作業を進めてください。
※自己責任のもと作業を実施してください。
1. スマホ用メニューボタンの作成
functions.phpでメニューの開閉ボタンを追加するショートコードを作成します。
ただし、ユーザーがログインしていない時はメニューが表示されないため、ボタンも表示しないようにする必要があります。
下記コードを参考にしてください。
<?php
// メニューの開閉ボタンを設置する
add_shortcode('button-sp', function() {
if (is_user_logged_in()) {
// ボタンのHTMLを表示
return ' <button id=" btn-sp" class="btn-sp">MENU</button>';
}
return ''; // 非ログイン時は何も表示しない
});作成したショートコードをマイアカウントページの編集画面（ブロックエディタ）で追加します。
[button-sp]すでにある[woocommerce_my_account]よりも上に追加してください。
あとはCSSでボタンとメニューの表示/非表示を切り替えます。
下記コードを参考にしてください。
/* メニューの開閉ボタン */
.btn-sp {
display: none;
margin-left: auto;
margin-bottom: 24px;
background-color: rgba(0,0,0,.05);
border-radius: 2px;
color: #296197;
}
/* スマホ・タブレット対応 メニューがページ上部に配置された時 */
@media screen and (max-width: 768px) {
.btn-sp {
display: block;
}
/* メニュー要素に付与されているクラス */
.woocommerce-MyAccount-navigation {
display: none;
margin-bottom: 24px;
}
}2. メニューの開閉機能の実装（JavaScript）
メニューの開閉とボタンのテキスト（MENU／CLOSE）を切り替えます。
document.addEventListener("DOMContentLoaded", function () {
// メニュー項目を取得
const wooMyAccountNav = document.querySelector(".woocommerce-MyAccount-navigation");
// ボタンを取得
const btnSp = document.getElementById("btn-sp");
// ボタンが押されるとメニューの開閉・ボタンのテキストがトグル
btnSp.addEventListener("click", function (e) {
if (wooMyAccountNav.style.display === "none" || wooMyAccountNav.style.display === "") {
wooMyAccountNav.style.display = "block";
btnSp.textContent = "CLOSE";
} else {
wooMyAccountNav.style.display = "none";
btnSp.textContent = "MENU";
}
});
});ボタンのテキストは自由に変更可能です。
以上でカスタマイズは完了です。
今回はMENU／CLOSEのようなテキストボタンを実装していますが、ハンバーガー／×のトグルボタンにも応用できますので、カスタマイズしてみてください。
WordPress・WooCommerceを活用したホームページ・ECサイトの制作は株式会社クリエ・ココへお気軽にご相談ください。
