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

2019年7月22日

このエントリーをはてなブックマークに追加
Pocket

自作プラグインの覚書

こんにちは、kokaです。今回初めてオリジナルのプラグインを作ってみました。
といっても、オリジナルのプラグインと言ってもショートコードをプラグイン化しただけですが(^_^;)

ともかく、やってみるととても簡単でしたのでプラグイン作成の流れのご紹介します。

あなたもこの記事を読むことで簡単にプラグインを作ることができますよ。

koka

koka

実際に私が作ったこのプラグインが気になる方のために、ページの最後にダウンロードできるようにしておきました。

はじめに

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

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

そんなわけで自作のショートコードを早速プラグイン化してみました。

ルビをふるショートコード。

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

今回プラグイン化するのは、HTMLタグのrubyを使ってルビを振るショートコードです。
ちなみに、ルビとはフリガナのことです。

じつは上の段の「はじめに」のところでもこっそり使われています(^^)

内容的には単純なものですが、rubyタグはキーワードを考えるととても重要なタグであり私の運営サイトでは多用しています。

漢字にするべきか平仮名・カタカナにするべきかで悩む場合、両方表示できるからです。

使い方としては、下記の伝統色のサイトをご確認ください。

例：日本の伝統色−瑠璃色−

ショートコードの中身

ルビを振ってくれるショートコードの中身を紹介します。
【functions.php】を変更できる方は、このコードを自分の【functions.php】にコピペすることでショートコードを使うことも可能です。

function RubyMake($atts){
  $atts[0] = preg_replace("/_/"," ",$atts[0]);
  $atts[1] = preg_replace("/_/"," ",$atts[1]);
  return "<ruby>{$atts[0]} <rp>（</rp><rt>{$atts[1]}</rt><rp>）</rp></ruby>";
}
add_shortcode("ruby", "RubyMake");

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

次はショートコードの記述例をご紹介します。

※"［“と"］“の部分は実際は半角になります。

［ruby 以心伝心 いしんでんしん］

このショートコードの内容を説明します。

半角の空白区切りで、「ruby」の部分がショートコード。
二番目の「以心伝心」がテキスト。
さらに「いしんでんしん」の部分が読みという構成です。

下記が実際にこのコードを適用したものになります。

以心伝心 （いしんでんしん）

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

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

記述例：［ruby Web_Designer ウェブ_デザイン］

表示例：Web Designer （ウェブ デザイン）

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

koka

koka

このままfunctions.phpにコピペして、【Add QuickTag】などに登録すると投稿時に簡単に使えます。

↑ショートコードに戻る

プラグイン作成の手順

それではここから実際にプラグイン作成の手順をご紹介します。

事例として、このルビを振るショートコードをプラグイン化して、自作プラグインを作ってみます。

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

まずはFTPのソフトなどで『wp-content』⇒『plugins』の中に新しいフォルダを作成します。

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

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

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

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

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

<?php
/*プラグインの情報
Plugin Name: Ruby Make
Plugin URI: http://www.site.com/plugin
Description: テキストにrubyをふるプラグイン
Author: my name
Version: 0.1
Author URI: http://www.site.com
*/
 
//ショートコードの中身
function RubyMake($atts){
  $atts[0] = preg_replace("/_/"," ",$atts[0]);
  $atts[1] = preg_replace("/_/"," ",$atts[1]);
  return "<ruby>{$atts[0]} <rp>（</rp><rt>{$atts[1]}</rt><rp>）</rp></ruby>";
}
add_shortcode("ruby", "RubyMake");
?>

まずは上記のコードをご覧ください。
上段の部分がプラグインに関する情報です。

ここに記述した内容がプラグインの管理画面に表示されます。

下段部分に先程のショートコードを入力します。

じつは、これでプラグインは完成です(^^)

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

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

プラグイン画面
プラグイン画面

このプラグインを有効化すれば、【functions.php】にショートコードを記述した場合と同じようにルビを振るコードが使えるようになりました。

いやー、思っていた以上に簡単ですね(^^)

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

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

オプションページの作成

先程の【ruby-maker.php】に下記のコードを追加します。

具体的な場所はプラグインの説明の下段。ショートコードからコピーしたコードの上段になります。

class RubyMaker {
    function __construct() {
      add_action('admin_menu', array($this, 'add_pages'));
    }
    function add_pages() {
      add_management_page('RubyMaker', 'RubyMaker', 8,'ruby-maker.php', array($this,'ruby_maker_option_page'));
    }
    function ruby_maker_option_page(){
    //オブション画面に表示する内容
    }
}
$rubymaker = new RubyMaker;

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

下記が実際に表示された画像です。

ツールメニューに追加
ツールメニューに追加

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

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

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

記述は下記のような感じです。

<?
<h2>RubyMaker</h2>
ショートコードを利用してテキストにルビをふることができます。 内容的にはHTMLタグのrubyを使います。rubyに対応していないブラウザには前後に（）がついた状態で表示されます。 単語の可読性を高めるのはもちろん、キーワードSEOにも有効なrubyタグを手軽に使ってみましょう！
<h3>記述例</h3>
[<b style="color: #990000;">ruby</b> <b style="color: #006600;">以心伝心</b> <b style="color: #333399;">いしんでんしん</b>]
<h3>説明</h3>
半角の空白区切りで「<b style="color: #990000;">ruby</b>」の部分がショートコードの名前。 二番目の「<b style="color: #006600;">以心伝心</b>」の部分がテキスト。 「<b style="color: #333399;">いしんでんしん</b>」の部分が読みという構成です。 下記が実際にこのコードを適用したものになります。
<h3>表示例</h3>
<img src="/wp-content/plugins/ruby-maker/img.png" alt="以心伝心（いしんでんしん）" /> もしテキストや読みの部分に空白を使いたい場合は、“_”を使います。下記のような形です。
<h3>記述例</h3>
[<b style="color: #990000;">ruby</b> <b style="color: #006600;">Web_Designer</b> <b style="color: #333399;">ウェブ_デザイン</b>]
<h3>表示例</h3>
<img src="/wp-content/plugins/ruby-maker/img2.png" alt="Web Designer（ウェブ_デザイン）" />
?>

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

オプションページの表示
オプションページの表示

Ruby Makerのダウンロード

プラグイン化した「Ruby Maker」が気になる方は、下記よりダウンロードしてお試しください。

プラグインのインストールは、「プラグイン」→「新規追加」を選び、「プラグインのアップロード」からインストールできます。

ruby-maker-1

ruby-maker-2

注意事項

テーマによってはrubyタグ用のCSSが設定されてないことがあり、表示が崩れる場合があります。

最後に

プラグインを作るというと敷居が高い感じがしますが、やってみると簡単です。

せっかくWordPressを使っているのですから、こういったプラグインの作成もやってみると新たな世界が広がって面白いですよ。

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

ぜひ、ショートコードを多用されている方はお試しください。

 

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

それでは次の記事で！

投稿者プロフィール

koka
koka

WordPress