WordPress のプラグインを作成する際に参照した Web ページ

先日 SimpleApplinks という WordPress のプラグインを公開しましたが、その際に参考になったページ及びメモを羅列していきます。

https://wordpress.org/plugins/simpleapplinks/

基本

簡単な WordPress の Plugin の作り方 | Lonely Mobiler
WordPressのプラグインを開発しよう（初級編） | webOpixel

関数とかクラスを定義しておいて add_filter などで各処理にフックしていく感じ。

とてもシンプルなプラグインだとこんな感じ。

<?php /*
*************************************************************************
Plugin Name:  convert-japanese-punctuation
Plugin URI:   http://loumo.jp
Version:      0.1
Description:  convert japanese punctuation to comma and periods
Author:       ryomatsu
Author URI:   http://loumo.jp
**************************************************************************/
add_filter( 'the_content', 'convert_japanese_punctuation' );
function convert_japanese_punctuation($content) {
    $content = preg_replace('/。([^。])/u', '. $1', $content);
    $content = preg_replace('/、([^、])/u', ', $1', $content);
    $content = str_replace(array('。','、'), array('.',','), $content);
    return $content;
}

これを plugins 以下においておくとプラグインとして読み込んでくれる。

CSS, JavaScript の読み込み

関数リファレンス/wp enqueue script - WordPress Codex 日本語版
関数リファレンス/wp enqueue style - WordPress Codex 日本語版
wp_register_scriptとwp_register_styleの使い方

SimpleAppLinks だと以下のようにして JavaScript と CSS を読み込んでる。関係ないところは省略してあるが。

function init() {
    add_action('wp_enqueue_scripts', array($this, 'enqueue_style'));
    add_action('wp_enqueue_scripts', array($this, 'enqueue_script'));
}
function enqueue_style() {
    wp_register_style('simpleapplinks', plugins_url('style.css', __FILE__), array(), NULL);
    wp_enqueue_style('simpleapplinks');
}
function enqueue_script() {
    wp_register_script('simpleapplinks', plugins_url('simpleapplinks.js', __FILE__), array('jquery'), NULL);
    wp_enqueue_script('simpleapplinks');
}

AJAX

AjaxでWordPressのコンテンツを遷移せず表示させる | Show-web

SimpleAppLinks では AJAX はオプションとしているが使う事ができる。以下のように add_action を定義してやると ajax でアクセスする事が可能になる。

function init() {
    add_action('wp_head', array($this, 'ensure_ajaxurl'), 1);
    add_action('wp_ajax_nopriv_simpleapplinks_get_html', array($this, 'get_applink_ajax'));
    add_action('wp_ajax_simpleapplinks_get_html', array($this, 'get_applink_ajax'));
}
function ensure_ajaxurl() { ?>
<script type="text/javascript">
    //<![CDATA[
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    //]]>
</script>
<?php
}
function get_applink_ajax() {
}

wp_ajax_nopriv_... と wp_ajax_... とで2つあるのはユーザの権限毎に定義しないといけないからのようだ。片方だけ書いて非ログイン時に「なんで動かないんださっきまで動いてたのに・・・」ってなってたので注意が必要だろう。

admin-ajax.php の URL を取得する処理を分けているのは JavaScript の処理はファイルを分けたかったからです。php 内に JavaScript も書くのであれば ensure_ajaxurl あたりの処理は不要。

データベース

Class Reference/wpdb ≪ WordPress Codex
関数リファレンス/wpdb Class - WordPress Codex 日本語版
WordPressでオリジナルのデータベース（テーブル）を作成する [プラグイン開発中級編] | webOpixel

global $wpdb を使っておけば大丈夫だろう。間違っても直接 mysql 関数などでアクセスしてはいけない。

設定ページ

Settings API - WordPress Codex 日本語版
設定ページの作成 - WordPress Codex 日本語版
Function Reference/register setting ≪ WordPress Codex

ここホント謎なんだけど、他のプラグイン見ても form タグの中身ゴリゴリ書いてたり add_settings_field とか使って書いてたりとバラバラだし一体どんな仕組みなのかわからん。

とりあえず、以下のように書くと良いっぽい。

function init() {
    if (is_admin() {
        add_action('admin_menu', array($this, 'admin_menu'));
        add_action('admin_init', array($this, 'page_init'));
    }
}
function admin_menu() {
    add_options_page( self::PLUGIN_NAME, self::PLUGIN_NAME, 8, $this->option_page, array($this, 'settings_page'));
}
function settings_page() {
// 設定画面の HTML 書く
}
function page_init() {
    register_setting($this->option_group, $this->option_name);
    $section = 'general';
    add_settings_section(
        $section, // ID
        __('General', $this->text_domain), // Title
        array($this, 'print_section_info'), // Callback
        $this->option_page // Page
    );
    add_settings_field(
        'cache-time', // ID
        __('Cache Time(Second)', $this->text_domain), // Title-
        array($this, 'cache_time_callback'), // Callback
        $this->option_page,
        $section // Section
    );
    // 設定項目分 add_settings_field 書く
}
function cache_time_callback() {}

多言語対応

Poeditを使ったWordPressの翻訳ファイル.po、.moファイル作成方法 | レンタルサーバーのCPIスタッフブログ

poeditor というソフトウェアを使用して mo/po ファイルを対応する言語分用意し、プラグイン内の languages ディレクトリに保存、以下のように呼び出す。

function init() {
    load_plugin_textdomain( $this->text_domain, false, basename(dirname( __FILE__ )) . '/languages' );
}

何らかの文字を表示する際は WordPress が提供する以下の関数を使用する。

__('hoge', $this->text_domain); // 文字列を返す
_e('hoge', $this->text_domain); // 表示する

プラグインの公開

WordPress プラグインを公開する手順 | ninxit.blog
WordPress.org Readme Generator

申請が通ったら svn のリポジトリもらえるのでそこにコミットする。自分は git を使用していたので若干面倒くさい手順を踏んだ。

GitHub で管理してる WordPress プラグインを SVN のリポジトリにコミットする | Lonely Mobiler
WordPress Plugin Development with Git/GitHub

これで公開まで行う事ができた。