@ WordPress

プラグインの作り方

WordPress のプラグインとは、テーマとは別に機能を実装するためのプログラムのコンテナです。

プラグインでできることは、テーマでも実現でき、利用できる API や主にフックを利用するという開発手法にも違いはありません。

例えば、functions.php に次のようなソースコードを記述します。

functions.php

function get_message() {
	echo 'Webサイトをリニューアルしました。';
}

このソースコードは、テンプレートファイルに次のように記述すると、「Webサイトをリニューアルしました。」と表示します。

example.php

<?php get_message(); ?>

この機能をプラグインにして実装してみます。

プラグイン名の決定

プラグイン作成での最初の作業は、プラグインが何を行うかを考えて、プラグインの名前 (できれば唯一の) 名前を決定することです。

プラグインPHPファイルの作成

プラグイン名が決まったら、/wp-content/plugins ディレクトリにプラグイン名のディレクトリを作成し、そのディレクトリに「プラグインPHPファイル」と関連のリソースを格納します。

ここでは例として、プラグイン名を「oneline_message」。プラグインPHPファイル名を「oneline_message.php」とします。

/plugins
 └── /oneline_message
  └── oneline_message.php

プラグイン情報ヘッダー

「プラグインPHPファイル」には WordPress がプラグインを認識するための「プラグイン情報ヘッダー」というメタ情報記述する必要があります。

ここでは例として、以下のように oneline_message.php にプラグイン情報ヘッダーを記述します。

oneline_message.php

<?php
/*
Plugin Name: Oneline Message
Plugin URI: http://example.com/oneline_message/
Description: メッセージを表示するプラグイン
Version: 1.0
Author: my name
Author URI: http://example.com/
License: GPLv2 or later
*/
?>

「プラグイン情報ヘッダー」のフォーマットを以下に示します。

format

<?php
/*
Plugin Name: (プラグインの名前)
Plugin URI: (プラグインの説明と更新を示すページの URI)
Description: (プラグインの短い説明)
Version: (プラグインのバージョン番号。例: 1.0)
Author: (プラグイン作者の名前)
Author URI: (プラグイン作者の URI)
License: (ライセンス名の「スラッグ」 例: GPL2)
*/
?>

ライセンス

慣例として、標準プラグイン情報の次にプラグインのライセンス情報を書きます。

oneline_message.php

<?php
/*
Plugin Name: Oneline Message
Plugin URI: http://example.com/oneline_message/
Description: メッセージを表示するプラグイン
Version: 1.0
Author: my name
Author URI: http://example.com/
License: GPLv2 or later
*/

/*
Copyright 2017 Oneline Message [email : my_name@example.com]

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, version 2, as
published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/
?>

プラグインの実装

プラグインPHPファイルに「メッセージを表示する」機能を実装します。

oneline_message.php

<?php
/*
Plugin Name: Oneline Message
Plugin URI: http://example.com/oneline_message/
Description: メッセージを表示するプラグイン
Version: 1.0
Author: my name
Author URI: http://example.com/
License: GPLv2 or later
*/

/*
Copyright 2017 Oneline Message [email : my_name@example.com]

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, version 2, as
published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

*/

function get_message() {
	echo 'Webサイトをリニューアルしました。';
}
?>

ここまでの工程で、ダッシュボードの「インストール済のプラグイン」に作成したプラグイン「Oneline Message」が追加されます。

プラグインを有効化して、テンプレートファイルに次のように記述すると、「Webサイトをリニューアルしました。」と表示します。

example.php

<?php get_message(); ?>

ダッシュボードの管理メニューを利用する

次に、ダッシュボードにプラグインの管理メニューを表示して、表示するメッセージの内容を入力できるように機能を追加してみます。

oneline_message.php

<?php
/*
Plugin Name: Oneline Message
Plugin URI: http://example.com/oneline_message/
Description: メッセージを表示するプラグイン
Version: 1.0
Author: my name
Author URI: http://example.com/
License: GPLv2 or later
*/

/*
Copyright 2017 Oneline Message [email : my_name@example.com]

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, version 2, as
published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

class OnelineMessage {

	public function __construct() {
		add_action( 'admin_menu', array( $this, 'add_pages' ) );
	}

	// 管理メニューの追加
	function add_pages() {
		add_menu_page( 'oneline message', 'oneline message', 'level_8', __FILE__, array( $this, 'oneline_message_option_page' ), '', 26 );
	}

	// 設定ページの生成
	function oneline_message_option_page() {
		if ( isset( $_POST[ 'onelinemessage_options' ] ) ) {
			check_admin_referer( 'omoptions' );
			$opt = $_POST[ 'onelinemessage_options' ];
			update_option( 'onelinemessage_options', $opt );
			?>
			<div class="updated fade">
				<p><strong><?php _e('Options saved.'); ?></strong></p>
			</div>
			<?php
		}
		?>

		// 設定ページの表示内容
		<div class="wrap">
			<h2>メッセージ設定</h2>
			<form action="" method="post">
				<?php
				wp_nonce_field( 'omoptions' );
				$opt = get_option( 'onelinemessage_options' );
				$oneline_message = isset( $opt[ 'text' ] ) ? $opt[ 'text' ] : null;
				?>
				<table class="form-table">
					<tr>
						<th scope="row"><label for="inputtext">メッセージ</label></th>
						<td><input name="onelinemessage_options[text]" type="text" id="inputtext" value="<?php echo $oneline_message ?>" class="regular-text"></td>
					</tr>
				</table>
				<p class="submit"><input type="submit" name="Submit" class="button-primary" value="変更を保存"/></p>
			</form>
		<!-- /.wrap --></div>
		<?php
	}

	// メッセージを表示するメソッド
	function get_message() {
		$opt = get_option( 'onelinemessage_options' );
		return isset( $opt[ 'text' ] ) ? $opt[ 'text' ] : null;
	}
}
$onelinemessage = new OnelineMessage;
?>

プラグインを有効化すると、ダッシュボードに「oneline message」という管理メニューが追加され、メッセージの入力が可能になります。

テンプレートファイルに次のように記述すると、ダッシュボードのプラグイン管理画面で入力したメッセージが表示されます。

example.php

<?php echo esc_html($onelinemessage->get_message()); ?>

プラグイン独自のCSSファイルの読み込み

プラグインディレクトリに style.css というファイル名で、次のようにプラグイン専用のCSSを作成します。

style.css

@charset "utf-8";
.msg {
    font-size: 1.5em;
}

この style.css をキューに入れるように「プラグインPHPファイル」に以下を追加します。

oneline_message.php

add_action( 'wp_enqueue_scripts', function () {
	if ( is_admin() ) {
		return;
	}
	$cssurl = plugins_url( 'style.css', __FILE__ );
	wp_enqueue_style( 'oneline_message', $cssurl );
} );

テンプレートファイルに次のように、css のセレクタとなるクラス属性を追加します

example.php

<p class="msg">
	<?php echo esc_html($onelinemessage->get_message()); ?>
</p>

以上でプラグイン専用の CSS が適用されます。

WordPress Codex : プラグインの作成

WordPress Codex : 管理メニューの追加

WordPress Codex : 設定ページの作成

WordPress のアイコンフォント dashicons の一覧

WordPress.ORH : Developer Resources: Dashicons