ワテ自作の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が必要だったので急遽作成したものだ。
興味ある人はご覧ください。
開発環境
プログラミングは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 Admin → Classicエディタで記事編集時に使う（管理者用）
この管理者用プラグインを使うと、WordPress管理画面で記事をClassicエディタで編集中にもアコーディオン機能が動作するようになる。
特に数千〜1万文字規模の長文記事を執筆する際に、構造把握や編集効率が大きく向上する。
特に、H2が複数あり、その中にH3が階層的に含まれるような記事では、全体構造の確認や推敲作業が非常にスムーズになる。
近日中にこの Wareko Header Auto Accordion Admin もWordPress公式サイトでプラグインとして公開予定である。
その後、Wareko Header Auto Accordion Admin も公開に向けての改良作業が完了したのでWordPress公式サイトでプラグイン申請しようとしたら、前作Wareko Header Auto Accordionの審査がまだ完了していないので申請出来なかった。
要するにプラグインは複数同時には申請出来ないようだ。
申請に必要となる「Wareko Header Auto Accordion Admin」の英文説明ページは作成した。
ワレコ自作のWordPressプラグインダウンロード
試したい人はここからダウンロードできます↴
Wareko Header Auto Accordion
Wareko Header Auto Accordion【WordPressプラグイン】機能：ワードプレス投稿記事のH2、H3ヘッダーを自動でアコーディオン化する
Wareko Header Auto Accordion Admin
Wareko Header Auto Accordion Admin【WordPressプラグイン】機能：Classicエディタで投稿記事の編集作業中にH2、H3ヘッダーを自動でアコーディオン化する
Wareko Header Auto Numbering
Wareko Header Auto Numbering 【WordPressプラグイン】機能：ワードプレス投稿記事のH2、H3、H4ヘッダーに自動で見出し番号を付ける
これらのプラグインはもし申請が無事に通れば、近日中にWordPress公式サイトのプラグインライブラリにも掲載予定です。
まとめ
この2年間ほどはプログラミングから遠ざかっていた。
久し振りにプログラミングを再開したのだ。
当記事では、ワテが数年前に自作したWordPress用の便利プラグインを紹介した。
Wareko Header Auto Accordionと言うプラグインだ。
WordPressサイトのH2やH3見出しタグを自動でアコーディオン機能にするプラグインである。
プログラミングは頭の体操になるので、今後も続けたい。
とは言っても、今回の作業ではChatGPTさんに殆ど頼りっぱなしと言う感じ。
自分が数年前に書いたTypeScriptコードを自分自身で理解出来ないので、そのコードの意味をChatGPTさんに質問して解説して貰いながら解読して行ったのである。
もしChatGPTさんの力を借りずに自力でコードを解読した場合には、恐らく一週間以上掛かったと思う。あるいは途中で挫折していたかもしれない。
（つづく）
コメント