【WordPress】意外と簡単!自作プラグインの覚書

 投稿日:2015年3月18日  更新日:

自作プラグインの覚書

こんにちは、kokaです。今回初めてオリジナルのプラグインを作ってみました。オリジナルのプラグインと言ってもショートコードをプラグイン化しただけですが(^_^;)
ともかく、やってみるととても簡単でしたのでプラグイン作成の流れのご紹介します。なお、今回の記事は下記のサイトを参考にさせていただきました。

参考:WordPressのプラグインを開発しよう(初級編)

はじめに

私はショートコードを結構多用しているのですが、それらをプラグインフォルダに入れるだけで簡単にプラグインができるという記事を見かけました。


ショートコードをプラグイン化できると、テーマに関わらずそのコードを実行できますし、当然テーマのアップデートの際に改めて【functions.php】を書き直すなどの手間 てまもなくなります。そんなわけで早速プラグイン化してみました。

ショートコードのご紹介。

まずはプラグイン化するショートコードをご紹介します。

今回プラグイン化するのは、HTMLタグのrubyを使ってルビを振るショートコードです。内容的には単純なものですが、rubyタグはキーワードSEOを考えるととても重要なタグであり私の運営サイトでは多用しています。

プラグイン化するまでは、これを【functions.php】に追加して使っていました。

次はショートコードの記述例をご紹介します。※“[”の部分は実際は半角になります。

[ruby 以心伝心 いしんでんしん]

ショートコードの内容を説明します。半角の空白区切りで、「ruby」の部分がショートコード。二番目の「以心伝心」がテキスト。さらに「いしんでんしん」の部分が読みという構成です。下記が実際にこのコードを適用したものになります。

以心伝心 いしんでんしん

このように漢字にルビが振られた状態で出力されます。

もしテキストや読みの部分に空白を使いたい場合は、“_”を使います。下記のような形です。

記述例:[ruby Web_Designer ウェブ_デザイン]

表示例:Web Designer ウェブ デザイン

ちなみに、rubyタグに対応していないFirefoxなどのブラウザでは、以心伝心(いしんでんしん)/Web Designer(ウェブ デザイン)のように“()”が付けられた形で表示されます。スマホではほとんど表示されるようです。

プラグイン作成の手順

それではこのルビを振るショートコードをプラグイン化して、新しいプラグインを作ってみます。

プラグイン用のフォルダの作成

まずは『wp-content』⇒『plugins』の中に新しいフォルダを作成します。フォルダの名前がプラグインの名前になりますので、今回は『ruby-maker』というフォルダを作りました。

フォルダを作ったらその中に同じ名前のphpファイル【ruby-make.php】というファイルを作成します。ファイルの内容についてはこのあと説明します。

プラグインフォルダの追加

プラグインフォルダの追加

プラグインファイルの中身

【ruby-maker.php】の中身には下記の内容を記述しました。

まずは上記のコードをご覧ください。上段の部分がプラグインに関する情報です。ここに記述した内容がプラグインの管理画面に表示されます。

下段部分に先程のショートコードを入力します。これでプラグインは完成です(^^)

プラグインの有効化で完了!

次は確認のためにWordPressの管理画面を開いてください。下記のように今作ったプラグインが表示されているはずです。

プラグイン画面

プラグイン画面

このプラグインを有効化すれば、【functions.php】にショートコードを記述した場合と同じようにルビを振るコードが使えるようになりました。いやー、思っていた以上に簡単ですね(・∀・)

さて、自分用のプラグインの場合はこれで十分なんですが、せっかくなのでもう少しだけ本格的なプラグイン的なことをやってみようと思います。

次はプラグインのオプションページを作ってみましょう。

オプションページの作成

先程の【ruby-maker.php】に下記のコードを追加します。具体的な場所はプラグインの説明の下段。ショートコードからコピーしたコードの上段になります。

これで「Ruby Maker」のオプションページを作成し、ツールメニューに「Ruby Maker」というメニューが表示されるようになります。下記が実際に表示された画像です。

ツールメニューに追加

ツールメニューに追加

オプションページの内容の追加

ただ、このままだとオプションページには何も表示されません。まあ、内容を指定していないので当然ですね。

そこで、先程の「//オブション画面に表示する内容」の箇所に表示したい内容を記述します。記述は下記のような感じです。

このように表示内容をHTML形式で記述すると下記のような形で表示されます。

オプションページの表示

オプションページの表示

最後に

いかがでしたか? プラグインを作るというと敷居が高い感じがしますが、やってみると簡単です。せっかくWordPressを使っているのですから、こういったプラグインの作成もやってみると新たな世界が広がって面白いですよ。

また、今回は一つのショートコードのみをプラグイン化しましたが、いつも使う複数の設定をまとめて一つのプラグインとすることもできます。そうすればよりコードの管理がしやすくなるでしょう。ぜひ、ショートコードを多用されている方はお試しください。

以上、『【WordPress】意外と簡単!自作プラグインの覚書』でした。

それでは次の記事で!

-WordPress

Copyright© いちごあじ , 2018 AllRights Reserved.