[WordPress] HTMLアコーディオンメニュー適用する

Last Updated:2023年07月16日| コメントを残す

概要

サイドバーアコーディオンメニューを追加しようとする場合、 Nextend Accordion Menuのようなプラグインを使用することができます。 または有料のプラグインの中でも選択することができます。 しかし、単純なHTMLとCSSで動作するアコーディオンメニューを作成し、サイドバーに挿入することも可能です。

この作業のためには、まず使用アコーディオンメニューを検索して、ソースをダウンロード受けるします。 ここで無料のソースをダウンロードすることができます。 (あるいは 有料アコーディオンメニューを購入してもされます。 WordPress用は比較的高価であるが、単純なHTML / JSのソースは、比較的安価ですね。)

このページに記載されているソースを使用して Avada(AVADA)テーマに適用してみました。

HTMLソースコードにショートコードを作る

方法は、アコーディオンメニューのHTMLソースコードを変更して、直接メニューを作成するようです。 この作業は、HTMLコードのために少しの知識が必要です。 メニューを作成した場合のHTMLコードをショートコードにするようにします。

function html_accordion_menu() {
return 'HTML 코드';
}
add_shortcode('htmlaccordionmenu', 'html_accordion_menu');

HTMLコードの部分にAccordionメニューのHTMLコードを入力します。 ショートコードの詳細については、 ここを参考にしてみてください。 もしPHPコードが含まれていた場合、コードが多少複雑になります(この記事の下部にあるサンプルコードを参照)。

CSSコードをスタイルシートファイルに追加する

CSSコードは WordPress テーマのスタイルシートファイルに追加するようにします。 もしjsファイルがある場合 この記事を参考に適切にフックさせるようにします。 (参考までにjsスクリプトが正常に動作しない場合 $jQueryのに変えるようにします。)

今アコーディオンメニューを表示したい場所(例えば、サイドバー)に [htmlaccordionmenu]を入力すると、アコーディオンメニューが表示されます。

適用例

WordPress アコーディオンメニュー(HTML / CSS)

テストで有料テーマ販売1位を記録している Avada(AVADA)テーマのサイドバーに挿入してみました。 (テーマによってはうまく表示されない場合があります。)

この方法は、別のプラグインを使用せずに簡単にHTMLアコーディオンメニューをサイドバーに追加したい場合に便利です。 同じ方法で、他のHTML要素も、このようにサイドバーに追加することができます。

メモ:


コメントを残す

コメント