プラグインを使ったカスタマイズの基本形

2019年10月15日2019年10月29日

さて、実際に自作のプラグイン（今はまだなんの機能もないですが）をアップロード・有効化し、WordPressでのカスタマイズの方法について学んできたので、次は実際にプラグインを使ってWordPressをカスタマイズする方法を学んでみましょう。

プラグインの基本構成・基本構造 | WordPressのプラグインを作ろうで準備した、my-original-plugin.phpファイル、class.wpmop.phpファイルを使用します。

プラグインを使ったカスタマイズの基本の形

とりあえず基本の形を書いてみました。

class.wpmop.phpファイル

<?php
class WPMOP {

    public function __construct()
    {
        add_action( 'アクション名', array( &$this, 'custom_func_for_action' ), 10 );
        add_filter( 'フィルター名', array( &$this, 'custom_func_for_filter' ), 10 );
    }
    
    public function custom_func_for_action()
    {
    }

    public function custom_func_for_filter( $args )
    {
    }

}

要は、クラスがインスタント化される際に自動的に実行されるコンストラクター（__construct()関数）の中に、add_action(), add_filter()関数を入れておき、WordPressが読み込まれてプラグインがインスタンス化されるたびにアクションやフィルターに実行するカスタマイズが書かれた関数名を設定するだけです。

ここで注意しなくてはいけないのは、add_action(), add_filter()関数の2番目の引数の関数名です。

functions.phpなどで使用する場合は、単純な関数名で良かったのですが、このプラグインの書き方のように、同じクラスのメソッド(クラス内の関数）をカスタマイズの関数として使用する場合、この2番目の引数は、array( &$this, '関数名’ )と書かなくてはいけません。

WordPressでは他にも「関数名」を書き込む関数がたくさん存在しますが、それらの関数でも同様に、メソッドの場合は、array( &$this, '関数名’ )と表記しなくてはいけないことを覚えておくとよいと思います。

それでは実際にやってみましょう！

カスタマイズ例１：管理画面に独自メニューの追加

管理画面にメニュー・サブメニューを追加したい | WordPressのプラグインを作ろうのページを参考に管理画面に独自メニュー・サブメニューを追加してみましょう。

ファイル構成

my-original-plugin.phpファイル

このファイルは何もいじりません

class.wpmop.phpファイル

<?php
class WPMOP {

    public function __construct()
    {
        add_action( 'admin_menu', array( &$this, 'my_admin_page_settings' ) );
    }
    
    public function my_admin_page_settings()
    {
        //管理画面にメニューを追加
        add_menu_page(
            'My Original Pluginメインページ',
            'My Original Plugin',
            'manage_options',
            'wpmop',
            array( &$this, 'wpmop_mainpage' ),
            '',
            99
        );

        //追加した「My Original Plugin」メニューにサブメニューを追加
        add_submenu_page(
            'wpmop',
            'サブメニュー1ページ',
            'サブメニュー1',
            'manage_options',
            'wpmop-submenu1',
            array( &$this, 'wpmop_subpage01' )
        );
    }

    //追加した管理メニューページのコンテンツ
    public function wpmop_mainpage() {
        ?>
<div class="PluginContainer ">
    <h2 class="Plugin__head">My Original Pluginメインページ</h2>    
</div>
<?php
    }    

    //追加した管理メニューサブページのコンテンツ
    public function wpmop_subpage01() {
        ?>
<div class="PluginContainer ">
    <h2 class="Plugin__head">My Original Pluginサブページ1</h2>    
</div>
<?php
    }  
}

カスタマイズ例：独自メニューに独自のCSSとJavaScriptを追加

管理画面ページごとに違うJavaScript,CSSを読み込ませたい | WordPressのプラグインを作ろうのページを参考に、先ほど追加した独自メニュー・サブメニューにCSSとJavaScriptを追加してみましょう。

ファイル構成

my-original-plugin.phpファイル

このファイルは何もいじりません

class.wpmop.phpファイル

<?php
class WPMOP {

    public function __construct()
    {
        add_action( 'admin_menu', array( &$this, 'my_admin_page_settings' ) );
        add_action( 'admin_enqueue_scripts', array( &$this, 'admin_page_scripts' ) ); 
    }
    
    public function my_admin_page_settings()
    {
        //管理画面にメニューを追加
        add_menu_page(
            'My Original Pluginメインページ',
            'My Original Plugin',
            'manage_options',
            'wpmop',
            array( &$this, 'wpmop_mainpage' ),
            '',
            99
        );

        //追加した「My Original Plugin」メニューにサブメニューを追加
        add_submenu_page(
            'wpmop',
            'サブメニュー1ページ',
            'サブメニュー1',
            'manage_options',
            'wpmop-submenu1',
            array( &$this, 'wpmop_subpage01' )
        );
    }

    //追加した管理メニューページのコンテンツ
    public function wpmop_mainpage() {
        ?>
<div class="PluginContainer ">
    <h2 class="Plugin__head">My Original Pluginメインページ</h2>    
</div>
<?php
    }    

    //追加した管理メニューサブページのコンテンツ
    public function wpmop_subpage01() {
        ?>
<div class="PluginContainer ">
    <h2 class="Plugin__head">My Original Pluginサブページ1</h2>    
</div>
<?php
    } 

    //管理画面にスクリプトを追加する関数
    public function admin_page_scripts() 
    { 
        global $hook_suffix;

        //My Original Pluginページにスクリプトを挿入
        if( 'toplevel_page_wpmop' === $hook_suffix ){
            wp_enqueue_script(
                'my_custom_javascript',
                plugin_url( 'script/my-js-toppage.js' ),
                array( 'jquery' ),
                false,
                false
            );

            wp_enqueue_style(
                'my_custom_css',
                plugin_url( 'script/my-css-toppage.css' )
            );

        }elseif( 'my-original-plugin_page_wpmop-submenu1' === $hook_suffix ){
        //My Original Pluginサブメニューページでスクリプトを挿入
            wp_enqueue_script(
                'my_custom_submenujavascript',
                plugin_url( 'script/my-js-submenu.js' ),
                array( 'jquery' ),
                false,
                false
            );

            wp_enqueue_style(
                'my_custom_css2',
                plugin_url( 'script/my-css-submenu.css' )
            );

        }
    } 
}

こんな感じにメニューが追加されるかと思います。