WordPress（ワードプレス）で自作プラグインを作成する方法

ブログをWordpressで書いていると、もっといじりたいとか思いませんか？折角レンタルサーバを借りて、いくらでもWebに公開できるサーバがあって、Wordpressというプラットフォームがあるのであれば、触ってみたくなるでしょう。

既にWordpressでCSSとかもしくはPHPで少しだけカスタマイズしている人もいると思います。Wordpressを触れる人であれば、html/css/phpはある程度はカスタマイズしたことがあるんじゃないかと思います。

今回はその次のステップであるプラグインを作ってみたいと思います。プラグインは既に皆さんもガッツリ使っているとは思いますが、そのプラグイン自体を作成してみたいと思います。

プラグインを作成するための準備

プラグインを作成するためには、開発環境みたいなものが必要になってきます。本当に簡単なものであれば、単なる TXTファイルで書いてしまうこともできるんですが、僕が使っている開発環境は、Mac環境にてMAMP + NetBeansか、もしくはVisula Stadio Codeを使っています。

正直NetBeans以外にも良いものあるような気もするんですが、とりあえず今のところ不便を感じていないのでこのままにしています。

MAMPは、ApacheベースのWebサーバのデバッガーになるので、デバッグ用に使っています。ここでダウンロードできます。

NetbeansはIDE(統合開発環境)ですね。PHP以外にもJavaやCなども書けます。ダウンロード

WordPressプラグインとは？

そもそも先ずはプラグインってなんなのかというところなんですが、公式のマニュアルでは以下のように記載されています。

プラグインは、WordPressの機能を拡張するためのツールです。
WordPress のコアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。ユーザーそれぞれが特定のニーズに合ったプラグインを利用して、カスタム機能を取り入れられるように作られています。
WordPress Codex日本語版（公式オンラインマニュアル）

自分でコードを書くという観点では、僕の解釈は「拡張するためのコードを持ち運びやすくしたパッケージ」のようなものかなと思っています。

自分でちょっと書くんであれば、function.phpに書いても良いわけですし、独立したPHPファイルを作っても良いわけです。でもあえて、プラグインという形にするのは、プラグインにすることでコードの管理をしやすくしたり、コードの流用がしやすくなるという利点があります。

WordPressプラグインの仕組み

プラグインの仕組みを超ざっくり図式するとこんな感じです。

WordPressではプラグインは”plugins”のフォルダ内に所定の書式で書いたものを置いておけば、勝手に読み込まれます。あとはいつもの管理画面で有効化してあげればOKです。

つまりプラグインを書くに当たって、最低限必要なのは、pluginの名前のフォルダと、同じ名前のphpファイルだけです。

PHPファイルの先頭には以下を必ず記載する必要があります。ここで重要なのは、/**/の中に書かれたフォーマットであって、中身は特になんでも良いです。

<?php
   /*
   Plugin Name: デジラインアプリ
   Plugin URI: 
   Description: 試験用のアプリ
   Version: 1.0
   Author: Taka
   Author URI: http://twitter.com/degimonomedia
   License: GPL2
   */

ここに書かれたものがどうなるかというと、いつもの管理画面でプラグイン一覧で表示されるようになります。もちろんこのままだと、何も動作しないので、有効化しても何もおきません。

プラグインに必要なパーツを書いてみよう

ここから早速プラグインに色々な機能をつけていきましょう。ここら辺の書き方は基本的にWordpressのための書き方になるので、とりあえずこのまま書いても動くようにはしていますが、もっとよく知りたい方は公式のマニュアルやWikiをみてください。

管理画面を作ろう

先ずは簡単かつプラグインっぽい機能である管理画面機能です。

以下を書いてみましょう。その後、管理画面で有効化してください。

add_action('admin_menu', 'dejimono_CategoryCreatorMenu');

/* 管理画面呼び出し */
function dejimono_CategoryCreatorMenu()
    {
        add_menu_page('Dejimono Plugin','デジラインアプリ','administrator', __FILE__, 'dejimono_CategorySettingsPage' , 'dashicons-buddicons-replies');
    }
    
/* 管理画面表示部 */
function dejimono_CategorySettingsPage() {
        
    }

すると、管理画面に今回作ったプラグインメニューが出てくると思います。

但し、このままだと何も書いていないので、空欄になっていますので、試しに”hello world”をしてみましょう。

/* 管理画面表示部 */
function dejimono_CategorySettingsPage() {
        echo 'hello world';
    }

そうすると、管理画面にhello worldと表示されるようになったと思います。あとは、htmlとcssで好きなように書けるようになると思います。おそらく使い方は人それぞれですが、データベースのなかの統計データみたいなのを読み込ませて利用状況を確認したりする使い方もできるんじゃないでしょうか。

因みに”dashicons-buddicons-replies”部分は、管理画面のアイコンになります。ここでまとめられているアイコンを入れれば他のものに変更できるようになりますし、オリジナルのファイルの場所を指定すれば、オリジナルアイコンに変えることもできると思います。

データベースを作ろう

次にデータベースを作ってみましょう。

ここではPHPからプラグイン有効化時に、SQLデータベースを作成して、プラグイン削除時にはデータベースを削除(DROP)させるようにしています。

    register_activation_hook(__FILE__, 'dejimono_install');
    register_uninstall_hook ( __FILE__, 'dejimono_delete_data' );
    
    
    /* 初回読み込み時にテーブル作成 */
    function dejimono_install(){
        global $wpdb;
        
        $table = $wpdb->prefix.'dejimono_test';
        $charset_collate = $wpdb->get_charset_collate();

        if ($wpdb->get_var("show tables like '$table'") != $table) {
            
            $sql = "CREATE TABLE  {$table} (
                query_num int, 
                file_name VARCHAR(400),
                item1 VARCHAR(30),
                item2 VARCHAR(30),
                item3 VARCHAR(30)
                ) $charset_collate;";
            
            require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
            dbDelta($sql);
        }
    }
    
    /* プラグイン削除時にはテーブルを削除 */
    function dejimono_delete_data()
    {
            global $wpdb;
            $table_name = $wpdb->prefix . 'dejimono_test';
            $sql = "DROP TABLE IF EXISTS {$table_name}";
            $wpdb->query($sql);
    }

データベース名は、ここで指定しています。

$table = $wpdb->prefix.'dejimono_test';

ワードプレスのデータベース名は全て”wp_”という接頭字がつきます。なので、上記のように書くとなるとデータベース名は”wp_dejimono_test”ということになります。

因みにこれでどんなテーブルができるかというと、phpMyAdminで確認してあげるとこんな感じです。

カラム名や属性の指定はSQL文($sql部分)を変えてあげれば良いです。

ショートコードを作ろう

最後にショートコード部分になります。

ショートコード部分は、やりたいことによっていくらでも書けるので、ここではサンプルとして、ショートコード を読み出したら、予め用意したJavascript (jQuery)を実行するようなプログラムを書いてみます。

    /* デジラインテスト */
    function dejimono_app() {       
        wp_enqueue_script('dejimono_app_handle', plugin_dir_url( __FILE__ ) . '/js/test.js', array( 'jquery' ), false, true);
        
        ob_start();
        ?>
        
    <h3>今日の天気</h3>
    <div class="weather"><ul></ul></div>

    <?php
    return ob_get_clean();    
    }
    
    add_shortcode('dejimono_app', 'dejimono_app');

プラグインが置いてあるフォルダにjsフォルダを作成して（作成しなくても良い）、その中にtest.jsを入れおきます。test.jsはこんな感じに書いておきます。

$(function(){
    var li = $('<li>東京：晴れ</li>'); 
    $('.weather').find('ul').append(li);
})

これであとはショートコードを表示させたい部分に記載しましょう。

ここでは、”[dejimono_app]”になりますね。結果としてはこんな感じです。

めちゃくちゃシンプルなコードなのですが、単に今日の天気をjQueryから動的に記述してあげるだけです。これでクライアント側で動的に表示を変えています。

この書き方にしておけばあとはAPIなどを使って、Javascriptから動的に各地の天気を表示するみたいなプラグインも書けるようになりますね。

中身を少しだけ説明しておくと、以下の部分でJavascriptのファイルを呼び出しています。

wp_enqueue_script('dejimono_app_handle', plugin_dir_url( __FILE__ ) . '/js/test.js', array( 'jquery' ), false, true);

あとは以下の部分で、ショートコード を実行した時にサーバ側で表示させています。

　　ob_start();
    ?>
        
    <h3>今日の天気</h3>
    <div class="weather"><ul></ul></div>

    <?php
    return ob_get_clean(); 

ここの部分の書き方は、いろんな書き方があるので、これ以外でも良いんですが、今回の場合はPHPファイル内に直接HTMLを書き込んでみました。ただこのまま実行すると、編集画面でエラーが出ると思うので、ob_start()を使って、一番最後に読み込ませるようにしています。最後にreturn ob_get_clean()をするのを忘れずに。

これ以外にも単に’echo’で表示するようなやり方もありますし、returnで文章をEOFなどで囲って、出力する方法などなど色々あります。

ここは使い方によって色々試してみてください。

まとめ

如何でしたでしょうか？ちゃんと動くものができましたか？

最後に今回作成した全コードを貼っておきます。

test-your-plugin.php

<?php
   /*
   Plugin Name: デジラインアプリ
   Plugin URI: 
   Description: 試験用のアプリ
   Version: 1.0
   Author: Taka
   Author URI: http://twitter.com/degimonomedia
   License: GPL2
   */


    add_action('admin_menu', 'dejimono_CategoryCreatorMenu');

    /* 管理画面表示 */
    function dejimono_CategoryCreatorMenu()
    {
        add_menu_page('Dejimono Plugin','デジラインアプリ','administrator', __FILE__, 'dejimono_CategorySettingsPage' , 'dashicons-buddicons-replies');
    }
    
    /* 管理画面表示 */
    function dejimono_CategorySettingsPage() {
        echo 'hello world';
        echo plugin_dir_path( __FILE__ );
    }
    
    register_activation_hook(__FILE__, 'dejimono_install');
    register_uninstall_hook ( __FILE__, 'dejimono_delete_data' );
    
    
    /* 初回読み込み時にテーブル作成 */
    function dejimono_install(){
        global $wpdb;
        
        $table = $wpdb->prefix.'dejimono_test';
        $charset_collate = $wpdb->get_charset_collate();

        if ($wpdb->get_var("show tables like '$table'") != $table) {
            
            $sql = "CREATE TABLE  {$table} (
                query_num int, 
                file_name VARCHAR(400),
                item1 VARCHAR(30),
                item2 VARCHAR(30),
                item3 VARCHAR(30)
                ) $charset_collate;";
            
            require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
            dbDelta($sql);
        }
    }
    
    /* プラグイン削除時にはテーブルを削除 */
    function dejimono_delete_data()
    {
            global $wpdb;
            $table_name = $wpdb->prefix . 'dejimono_test';
            $sql = "DROP TABLE IF EXISTS {$table_name}";
            $wpdb->query($sql);
    }
    
    
    /* デジラインテスト */
    function dejimono_app() {
        
        wp_enqueue_script('dejimono_app_handle', plugin_dir_url( __FILE__ ) . '/js/test.js', array( 'jquery' ), false, true);
        
        ob_start();
        ?>
        
    <h3>今日の天気</h3>
    <div class="weather"><ul></ul></div>
    

    <?php

    return ob_get_clean();
        
    }
    
    add_shortcode('dejimono_app', 'dejimono_app');

test.js

$(function(){
    
    var li = $('<li>東京：晴れ</li>'); 
    $('.weather').find('ul').append(li);
    
})

アレンジして、色々作ってみてくださいね。何かわからないことがあれば、コメントで聞いてくれればできる限り回答しますよ。