自分だけのオリジナルプラグインを作ってみよう！

社会人３年目エンジニアの関です。
気づけば8月も終わり。小学生の皆さんは新学期に向けて残りの夏休みの宿題を片付けているところでしょうか。ちなみに私は始業式の朝も余裕で残りの宿題をやっているタイプでした。
（※良い子は真似しないでください。）

夏休みの宿題といえば工作ということで、今回は、誰でもできるプラグインの作り方について説明していきたいと思います。

今回の目標

ログインページを自分だけのデザインに変更するプラグイン「Original Login Page」を作ってみます。
完成形は以下に置いてありますのでよかったらどうぞ。

https://github.com/hseki-luckey/original-login-page

とりあえず作ってみる

ディレクトリを作成する

まずは「/wp-content/plugins/original-login-page」というディレクトリを用意しましょう。
さらに作成したディレクトリに以下のファイルを設置します。

index.php（メインで動作）
logo.png（ログインページで使用するロゴ画像）

名前・説明を付ける

思いっきり自分なりのオリジナリティを出してみましょう。ただし既存のプラグインとの名前被りに注意してください。被った名前のプラグインの更新情報が届いてしまったりします。
index.phpの最上部に以下のようなフォーマットで書きます。

<?php
/*
Plugin Name: プラグインの名前（今回の場合は「Original Login Page」）
Plugin URI: プラグイン説明・更新情報ページのURI
Description: プラグインの短い説明文
Version: プラグインのバージョン番号（1.0など）
Author: プラグイン作者名
Author URI: プラグイン作者の紹介URI
License: ライセンスslug（GPL2など)
*/
?>

すると「プラグイン＞インストール済みのプラグイン」にプラグインが表示されます。
表示されたら、各プラグイン名の下にある「有効化」リンクを押してプラグインを有効化しましょう。

動作部分を作る

プラグインの動作部分は、基本的にadd_filterやadd_actionといったフィルターフック関数を使って構築していきます。フィルターフックについては以下を参照してみてください。
プラグイン API/フィルターフック一覧

例えば、ログインページのロゴ画像を自分で用意したロゴ画像に差し替えるには以下のようなコードをindex.phpに書き足します。
ちなみに今回はロゴ画像に日本語版WordPress公式キャラのわぷーを用意しました。可愛いですね。

<?php
function custom_login_logo_img () { ?>
<style>
.login #login h1 a {
  width: 150px;
  height: 155px;
  background: url(<?php echo plugins_url( 'logo.png', __FILE__ ); ?>) no-repeat 0 0;
  background-size: cover;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo_img' );
?>

反映すると、こんなかんじにログインページが変更されます。

似たような要領で作っていくと、こんなページが出来上がりました。
今回はほぼcssとjQueryなので、PHPに苦手意識がある方でも作りやすいかと思います。

プラグインを無効化すると、すぐに元の簡素なログインページに戻ります。

おわりに

私が今まで作ってきたプラグインは当ブログでもいくつか紹介していますが、その他にも特定のサイト専用に作ったものもいくつかあります。

基本的に「既存のプラグインに求めている機能が無い」「求めている機能はあるけどカスタムしづらい」などといったときにオリジナルでプラグインを作ったりします。
ぜひ、自分だけのプラグインでご自身のサイトを使いやすく素敵にカスタムしてみてください。

それでは良いWordPressライフを！

自分だけのオリジナルプラグインを作ってみよう！

今回の目標