PR

【ワテ自作】Wareko Header Auto Accordion【ワードプレスプラグイン紹介】

この記事は約4分で読めます。
スポンサーリンク
ワレコ
ワレコ

ワテ自作のWordPress用プラグインのご紹介

元々は自分用に作成していたプラグインだが、かなり便利で使いやすかったため、今回一般公開することにした。

スポンサーリンク
スポンサーリンク

Wareko Header Auto Accordion

プラグイン紹介

Wareko Header Auto Accordionと言うプラグインだ。

どんな機能かと言うと、WordPressサイトにこのプラグインをインストールすると、記事内の見出し(H2やH3)をクリックすることで、アコーディオンのように折りたたみ・展開できるようになる。

アコーディオン動作のサンプル動画です。

つまり、必要に応じてH2やH3の見出しをクリックするだけで、Collapse(折りたたみ)や Expand(展開)といった動作が可能になる。

一部のH2を折り畳んだ状態 全てのH2を折り畳んだ状態

実際に試してみたい人は、当ページに表示されているH2やH3の見出しをクリックして頂ければ、アコーディオン機能を体感出来る。

このプラグインを使うと、特に長文記事ではアコーディオン機能によって可読性が大きく向上する。

例えば、読み終えた章を折りたたんでおけば、過去の章構成を邪魔せずに現在の内容に集中できる。 また、前の章のタイトルをすぐ確認できるため、長文記事の閲覧性が高くなる。

本日このプラグインをWordPress公式サイトへプラグイン登録して貰うための申請を行った。

審査合格すれば近日中には下記URLの公式サイトからダウンロード可能となる。

 https://ja.wordpress.org/plugins/

是非皆さん、お試し下さい。

なお、以下の英語ページは「Wareko Header Auto Accordion」プラグインをWordPress公式サイトへ登録申請する際に、プラグイン説明のURLが必要だったので急遽作成したものだ。

Wareko Header Auto Accordion
Wareko Header Auto AccordionAutomatically converts WordPress H2 and H3 headings into collapsible accordion sections.Make...

興味ある人はご覧ください。

開発環境

プログラミングはTypeScriptとSCSSで行っている。開発にはVSCodeを使った。

TypeScript → JavaScript
SCSS → CSS

コンパイルにはesbuildを使っていて、Node.jsもインストールしているのでNMPスクリプトからesbuildを実行するようにしている。

今回数年ぶりにそれらの設定作業を行ったのだが、ChatGPTさんのお陰で数時間程度の作業でVSCodeでそれらの設定を行い、無事に開発環境を整えることが出来た。

もしChatGPTに頼らずに自力でやっていたら、恐らく数日掛かりの作業だったと思う。AIさんに頼りまくりのワテである。

なお、今回はVSCodeからGitHubも使えるようにした。従来は開発途中のファイルは手作業でファイルをコピペするなどしてバックアップを取得していた。

でもそんな低レベルな手法ではなく、世間でよく使われているGitHubを使ってみたのだ。

その結果、VSCodeの中から無事にGitHubサイトへプッシュでデータを書き込む事が出来た。超便利だ。

なお、Visual Studio 2026の環境からも同様にGitHubサイトへプッシュ出来る事も確認出来た。

なので今後のワテはプログラム開発におけるバックアップはGitHubを正式採用する事にした。

WordPress管理者用のWareko Header Auto Accordion Admin

なお、WordPressで記事を作成する際は、現在はGutenberg(ブロックエディタ)が主流だが、Classicエディタ(旧エディタ)を使っているユーザーも一定数存在する。

当ページで紹介したWareko Header Auto Accordionプラグインの応用版として、 Wareko Header Auto Accordion Admin という管理画面用プラグインも自作している(現時点では未公開)。

Wareko Header Auto Accordion   → 当記事で紹介(一般読者用) Wareko Header Auto Accordion Admin → Classicエディタで記事編集時に使う(管理者用)

この管理者用プラグインを使うと、WordPress管理画面で記事をClassicエディタで編集中にもアコーディオン機能が動作するようになる。

特に数千〜1万文字規模の長文記事を執筆する際に、構造把握や編集効率が大きく向上する。

特に、H2が複数あり、その中にH3が階層的に含まれるような記事では、全体構造の確認や推敲作業が非常にスムーズになる。

近日中にこの Wareko Header Auto Accordion Admin もWordPress公式サイトでプラグインとして公開予定である。

まとめ

ワレコ
ワレコ

この2年間ほどはプログラミングから遠ざかっていた。

久し振りにプログラミングを再開したのだ。

当記事では、ワテが数年前に自作したWordPress用の便利プラグインを紹介した。

Wareko Header Auto Accordionと言うプラグインだ。

WordPressサイトのH2やH3見出しタグを自動でアコーディオン機能にするプラグインである。

プログラミングは頭の体操になるので、今後も続けたい。

(つづく)

スポンサーリンク
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

WordPress
スポンサーリンク
シェアする
warekoをフォローする
スポンサーリンク

コメント