WordPress Betheme テーマサイドバーメニューのカスタマイズ

Last Updated: 2025 年 01 月 16 日 댓글

Bethemeは韓国の情緒とよく合うテーマの一つで、韓国でもよく使われている人気 WordPress テーマの一つです。ビデオは Avada続いてベストセリングテーマリストで2位をずっと占めましたが、今は見てみると4位にランクされていますね。

BeThemeは独自のページビルダーであるBeBuilderを搭載していますが、 エレメンページビルダーもサポートし、エレメント用デモも提供しています。 (参考までに、以前はMuffin Builderという名前が使用されていましたが、今はBeBuilderに名前が変わったようです。)

この記事では、ビデオのサイドバーメニューをカスタマイズする方法について簡単に説明します。

WordPress Betheme テーマサイドバーメニューのカスタマイズ

ヴィーテマ(Betheme)はエレメントをサポートしていますが、テンプレートなどの一部の機能はまだBeBuilderで編集できます。 テンプレ セクションでは、ヘッダー、メガメニュー、サイドバーメニュー、フッタ、ポップアップなど、サイトのすべてのセクションのテンプレートを作成できます。テンプレートは BeBuilder で編集できます。

クライアントがハンバーガーメニューを押したときに表示されるサイドバーメニュー(オフキャンバスメニュー)にロゴを追加するように求めてきました。

サイドバーメニューをカスタマイズしたい場合は、テンプレートからサイドバーメニューテンプレートを作成して、サイドバーメニュービルダー(Vertical Header Builderとも呼ばれます)を使用して構成できます。

サイドバーメニューを作成する方法については、次のYouTubeのビデオを参照してください。

サイトにサイドバーテンプレートが使用されておらず、ハンバーガーメニューを押したときにメインメニューが縦に表示されていました。 CSSを使用してロゴを追加する方法で作業しました。私は次のCSSコードを使ってロゴを適切な場所に配置しました:😄

#menu-main-menu {
	margin-top: -100px;
	text-align: center; 
}

#menu-main-menu::before {
	content: url("/wp-content/uploads/2024/08/logo.png");
	display: block;
	width: 100px;
	height: auto;
	transform: scale(0.5) translateX(-50%) translateX(-30px);
	margin: -120px auto -30px;
	left: 50%;
}

もし Betheme テーマでサイドバーメニューテンプレートを作成せずにロゴのみサイドバーメニューに追加したい場合は、上記のコードを適用できます。 (実際のコードは状況に応じて適切に修正する必要があります。)

ユーザー CSS コードは 外観 » カスタム » 追加 CSSに追加するか、チャイルドテーマのスタイルシートファイル(style.css)に追加します。

正しくサイドバーメニューを設定したい場合 テンプレ ページから Add New Template ボタンを押して新しいサイドバーメニューテンプレートを作成して編集することを検討できます。

ビテーマは多くの機能を提供する多目的テーマなので Avada同じくらい複雑なテーマオプションを提供します。

このテーマを正しく使用するには、テーマのマニュアルを見て、YouTubeのビデオを参照してください。 WordPressとテーマ、ページビルダーについてよく分からない状態でランダムに始めると、簡単なこともカスタムするのに時間がかかります。

最後に、

以上で WordPress 人気のテーマの一つである Betheme テーマでサイドバーメニューを構成する方法について説明しました。私が知っているデザイナーの数分 Bethemeや Divi など特定のテーマだけを使ってサイトを制作しています。特定のテーマを1つ2つの使い方を正しく習得すれば、ほとんどのサイトを作ることができます。 1つか2つのテーマに精通すると、他のテーマも比較的簡単に扱えるようになります。 😄

また、最近ではコーディングが分からなくてもチャットGPTなどのAIを使用してカスタマイズできる可能性がさらに拡大しているようです。最新技術をうまく活用すると、サイトの制作や WordPress ホームページの管理に役立ちます。

参照


コメントを残す

コメント