【自作】Wareko Header Auto Accordion【ワードプレスプラグイン公開完了】

ワレコ

ワテもいよいよWordPressプラグイン作者になったのだ。

先日以下の記事で紹介したワテ自作のWordPressプラグインであるが、その一つの「Wareko Header Auto Accordion」をWordPress.orgの公式サイトでプラグインとして無事に公開出来た。

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

ワレコワテ自作のWordPress用プラグインのご紹介元々は自分用に作成していたプラグインだが、かなり便利で使いやすかったため、今回一般公開することにした。試してみたい人のために、記事後半にダウンロードリンクを貼っています。では本題に入ろう...

当記事ではWordPressプラグインの作成方法や、公開するまでの手順を紹介したい。

では、本題に入ろう。

ワードプレスプラグインを作成する
1. VSCodeを使ってプラグイン開発
2. Wareko Header Auto Accordionプラグインの解説
ワードプレスプラグインを公開申請する
ワードプレスプラグインを公開する
公開した自作プラグインを自分でインストールしてみる
1. プラグインをインストール
2. プラグインを使ってみる
まとめ

ワードプレスプラグインを作成する

VSCodeを使ってプラグイン開発

ワテの場合は、プログラミングは主にVisual Studioを使っている。

Visual Studio CodeつまりVSCodeはあまり使わないのだが、WordPressプラグインの開発に関しては、VSCodeを採用した。

その理由は、WordPressプラグイン開発ではWordPress本番環境にファイルをアップロードして動作確認する事が多いが、VSCodeならFTPが簡単に出来るから。

一方、Visual Studioの場合には、以前は拡張機能の中に個人作成のFTP関連のやつが幾つか有ったのだが、最近ではメンテナンスされていなかったり、削除されて見付からないものもある。

Visual StudioはファイルのアップロードはFTPよりもDeployと言うMicrosoft独自の方法が標準なので、FTP機能はあまり充実していないのかなと思うがワテの理解なので間違っているかもしれない。

図　VSCodeで開発中のWordPressプラグインのTypeScriptコード

今回公開したWareko Header Auto Accordionは文字通り、ワードプレスで作成した記事のヘッダー（h2とh3）を自動でアコーディオン化すると言う単純な機能だ。

どのような動作なのかは、このページにある緑色の見出し（h2）やその中にある小見出し（h3）をマウスクリックして頂ければ分かる。

その見出しの折り畳み/展開が行えるようになるのだ。

Wareko Header Auto Accordionプラグインの解説

Wareko Header Auto Accordionプラグインのフォルダ構成は以下の通り。

readme.txt
wareko-header-auto-accordion.php
css/wareko-header-auto-accordion.css
js/wareko-header-auto-accordion.js

この場合、php/css/jsの3つのファイルで同じファイル名を使っているが、一般には任意の名前で良いと思う。ワテは単に分かりやすくするために全部同じ名前にしたのだ。

もちろんcssを使わないプラグインならcssフォルダもファイルも不要だし、同様にJavaScriptを使わないならjsフォルダもファイルも不要だ。

なのでワテの理解ではプラグインに必要なのは最低限 phpファイルとreadme.txtファイルかな。

wareko-header-auto-accordion.phpの中身は以下の通り。

<?php
/**
* Plugin Name: Wareko Header Auto Accordion
* Plugin URI: https://www.wareko.jp/blog/wareko-header-auto-accordion
* Description: headers(h2, h3) auto accordion
* Version: 3.0.0
* Author: Wareko
* Author URI: https://www.wareko.jp/blog/
* License: GPLv2 or later
* Text Domain: wareko-header-auto-accordion
*/

if (!defined('ABSPATH')) {
    exit;
}

// プラグインのバージョンを一元管理する定数です
define('WAREKO_HEADER_ACCORDION_VERSION', '3.0.0');

add_action('wp_enqueue_scripts', function () {

    $base_url = plugin_dir_url(__FILE__);

    $js_path  = plugin_dir_path(__FILE__) . 'js/wareko-header-auto-accordion.js';
    $css_path = plugin_dir_path(__FILE__) . 'css/wareko-header-auto-accordion.css';

    wp_enqueue_script(
        'wareko-header-auto-accordion',
        $base_url . 'js/wareko-header-auto-accordion.js',
        [],
        file_exists($js_path) ? filemtime($js_path) : WAREKO_HEADER_ACCORDION_VERSION,
        true
    );

    wp_enqueue_style(
        'wareko-header-auto-accordion',
        $base_url . 'css/wareko-header-auto-accordion.css',
        [],
        file_exists($css_path) ? filemtime($css_path) : WAREKO_HEADER_ACCORDION_VERSION
    );
});

WordPressのphpプログラミングは久しぶりなので文法を思い出すのに苦労した。

上のphpコードではワテ自作プラグインのjsファイルとcssファイルをWordPressの環境に読み込んで貰うために、add_actionと言う関数を実行している。

ワードプレスプラグインを公開申請する

無事に以下の4つのファイルが完成したら、wareko-header-auto-accordion.zipファイルにまとめる。

css/wareko-header-auto-accordion.css
js/wareko-header-auto-accordion.js
readme.txt
wareko-header-auto-accordion.php

注意事項としてはcssやjsはminifyしてはいけない。難読化もやってはいけない。人間が見て分かるコードでないと、申請しても合格しないのだ。

それを知らずにワテはminify版を提出したので、一回目の申請では却下。

あかんがなｗ

無事にzipが完成したら、以下の申請サイトを開いてzipをアップロードすれば良い。

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

世界中の多くの人がアップロードするので常時数十件のプラグイン申請がレビュー待ち状態になっている。

でも数日以内に何らかの返事が来るので、その内容に応じて次のアクションを取れば良い。

今回は2回目の申請で、以下のメールが届いた。

Congratulations, the plugin hosting request for Wareko Header Auto Accordion has been approved.

Within one (1) hour your account will be granted commit access to your Subversion (SVN) repository.

要するにレビューした結果、正式プラグインとしての公開が承認されたのだ。

この時点で自動で世間に公開されるのかと思ったら、そうでは無い。

次のステップとしてはSVNというツールを使って自分でプラグインをWordPressのサイトにアップロードして公開する必要があるのだ。

ワードプレスプラグインを公開する

まずはTortoiseSVNと言うツールをダウンロードした。Gitみたいなやつらしいが、ワテ自身、Gitも十分には使いこなしていないので右も左も分からない。AIさんにアドバイスを貰いながら作業した。

図　TortoiseSVNをWindows11パソコンにインストール

次は、適当なフォルダを作成して、公開したいプラグインのファイルを保管する。

以下の作業フォルダを作成した。

"D:\MyWorks\WordPress\wareko-header-auto-accordion\"

このフォルダをWindows11のファイルエクスプローラーで開いて右クリックすると、TortoiseSVNのメニューが出るので、その中のサブメニューCheckoutを実行すると自動で以下のフォルダやファイルが生成された。

"D:\MyWorks\WordPress\wareko-header-auto-accordion\.svn"
"D:\MyWorks\WordPress\wareko-header-auto-accordion\assets"
"D:\MyWorks\WordPress\wareko-header-auto-accordion\tags"
"D:\MyWorks\WordPress\wareko-header-auto-accordion\trunk"

その中のtrunkフォルダに今回作成したファイルを保管する（下図）。

"D:\MyWorks\WordPress\wareko-header-auto-accordion\trunk\css\wareko-header-auto-accordion.css"
"D:\MyWorks\WordPress\wareko-header-auto-accordion\trunk\js\wareko-header-auto-accordion.js"
"D:\MyWorks\WordPress\wareko-header-auto-accordion\trunk\readme.txt"
"D:\MyWorks\WordPress\wareko-header-auto-accordion\trunk\wareko-header-auto-accordion.php"

次に、そのフォルダを指定してCommitを実行するとSVNで接続するためのユーザーIDやパスワードを求められるので入力する。

パスワードはWordPress.orgにログインするやつとは別にSVN用のパスワードが事前に発行されるのでそれを使えば良かった。

順調に行くと下図が出て、無事にコミット成功して、アップロードで来た。