第1回「WordPressのプラグイン作成」動作確認、まず第一歩 WordPress Plugin
今回は「WordPress」（ワードプレス)のプラグインの作り方について触れていきます。
ボリューム多めです。これから作ろうと思う方は、2時間位かけてゆっくり読んでください。
目次・プラグインとは？ ・簡単なプラグイン ・WordPressのオプションを設定するプラグインを作ろう ・プラグイン情報 付記 ・「construct()」 ・WordPressの左のオプション画面に表示する ・WordPressの管理画面でHTMLを表示する ・POSTされた情報をオプション専用のデータベースに登録 ・実際にページに表示してみる ・まとめ ・今回の記事を書くにあたって参考にしたサイト |
・プラグインとは？
WordPressの追加機能です。
WordPressのテンプレートをカスタマイズしていると、「function.php」にコードを書くことがあると思います。
このコードをプラグインフォルダに入れるだけでプラグインになります。
そのテンプレートに依存したものは、「function.php」に記述したままでもいいと思いますが、ある程度、使いまわせるものでしたら、プラグイン化するといいと思います。
・簡単なプラグイン
「function.php」に次のようなコードがあるとします。
function show_text(){
echo "おはようございます";
}
これはテンプレートファイルに「<?php show_text(); ?>」と書くと、「おはようございます」と表示されます。
これを今回はプラグイン化します。
プラグインは、「wp-content」→「plugins」に作成します。
今回は、「show_text」というフォルダを作り、その中に「show_text.php」というファイルを作成します。
・プラグインを作ろう
「show_text.php」
<?php
/*
Plugin Name: Show Text
Plugin URI: https://testtesttest21.sakura.ne.jp/wp
Description: テキストを表示するだけのプラグイン
Author: tsutomu fujii
Version: 0.1
Author URI: https://testtesttest21.sakura.ne.jp/wp
*/
function show_text(){
echo "おはようございます";
}
↑↑最後に「?>」と書かなくてもＯＫ見たいです。
・プラグイン情報 付記
先頭にプラグインの情報を書いています。コメントアウトしていますが、管理画面の「インストールされたプラグイン」画面で表示されるので、全て、書いてください。
| 項目 | 値 |
| Plugin Name | プラグインの名前 |
| Plugin URI | プラグインの説明と更新をするＵＲＬ |
| Description | プラグインの説明文 |
| Author | 製作者の名前 |
| Version | ヴァージョン |
| Author URI | 製作者のHP（あれば） |
※License:ライセンスというものもあります。
詳しくは、WordPressのプラグイン作成 公式ページをご確認ください。
ファイルを作成すると、WordPressの管理画面のプラグイン一覧に、プラグインが追加されます。
プラグインを有効化すると、「function.php」に記述した時と同等のことができるようになります。
そして、WordPress管理画面→外観→テーマの編集→header.php（今回はたまたまこのファイルにしました）で、ファイル内に「<?php show_text(); ?>」と記述し保存すると、ワードプレスのヘッダー部分に「おはようございます。」と表示されます。
参考サイト：https://qiita.com/sararilfy/items/4784508f2bba09d93bb4
・「construct()」
管理画面で入力したテキストを表示するプラグインをテストで作ってみましょう。
「show_text.php」のプラグイン情報の下を、下記のように書き換えます。
//クラスを作成
class show_text(){
//コンストラクタメソッドを定義
function __construct(){
}
}
//オブジェクトを作成します。
$showtext = new ShowText;
クラスを記述して、その場でインスタンス化（実行）しています。
「__construct()」メソッドは、クラスをオブジェクト化するときに処理に実行されるメソッドです。
この中に初期化など、最初の処理を書いていきます。
・WordPressの左のオプション画面に表示する
左のメニューバーに、プラグインのメニューを表示します。
「show_text.php」のプラグイン情報の下を、下記のように書き換えます。
class ShowText {
//管理者画面に表示する内容
function __construct() {
add_action('admin_menu', array($this, 'add_pages'));
}
function add_pages() {
add_menu_page('テキスト設定 タグタイトル','テキスト設定', 'level_8', __FILE__, array($this,'show_text_option_page'), '', 26);
}
function show_text_option_page() {
//オブション画面に表示する内容 をここに書きます。例、HTMLやPHPプログラム
}
}
$showtext = new ShowText;
説明
function __construct() {
add_action('admin_menu', array($this, 'add_pages'));
}
3行目～５行目
コンストラクタメソッド（オブジェクトが作成された時に実行されるメソッド)で、「admin_menu」フィルターを記述します。
「add_action(‘admin_menu’, ’add_page’);」と書くところですが、クラス内のメソッドを指定する場合は、第2引数に「$this」を含めた配列になります。
function add_pages() {
add_menu_page('テキスト設定 タグタイトル','テキスト設定', 'level_8', __FILE__, array($this,'show_text_option_page'), '', 26);
}
6行目～8行目
「add_menu_page()」で、メニュー名やメニューを配置する位置などを指定していきます。
ここでｈ、「コメント」ボタンの下に他のメニューと同階層に配置していますが、各ボタンのサブメニューで表示させたりといったこともできます。
第7引数で、このクラス内の「show_text_option_page()」メソッドを実行しています。「show_text_option_page()」では、HTMLやPHPプルグラミングを記述した、メイン部分を記述するメソッドです。
「add_menu_page()」の引数
| 引数 | 内容 |
| 第1引数 | メニューが選択された時に、ページのタイトルタグに表示されるテキスト |
| 第2引数 | 左メニューバーに表示されるテキスト |
| 第3引数 |
メニューを表示する為に必要な権限 ユーザーレベルでも可ですが、非推奨です |
| 第4引数 |
メニューのスラック名 例「__FILE__」ファイル名を指定します 「__FILE__」は、ファイルの古パスとファイル名が入っているPHPのマジック定数と呼ばれる変数です |
| 第5引数 |
メニューページを表示する際に実行される関数 オプション画面に表示される内容です |
| 第6引数 |
アイコン画像のパス アイコンは 20 × 20 ピクセル以下でなければなりません。 |
| 第7引数 | メニューが表示される位置、順番 |
・WordPressの管理画面でHTMLを表示する
「show_text_option_page()」メソッドの中を下記のように書き換えてください。
function show_text_option_page() {
//$_POST['showtext_options'])があったら保存
if ( isset($_POST['showtext_options'])) {
//管理画面からポストされたデータか確かめる。
check_admin_referer('shoptions');
$opt = $_POST['showtext_options'];
//データベースの「wp_options」テーブルにレコードをアップデート
update_option('showtext_options', $opt); ?><div class="updated fade"><p><strong><?php _e('Options saved.'); ?></strong></p></div><?php
}
?>
<!-- html部分 -->
<form action="" method="post">
<?php
//submitしてPOSTした時に、「check_admin_referer()」で管理者画面からPOSTされたかチェックするために
//「wp_nonce_field()」で指定します。
wp_nonce_field('shoptions');
?>
<div class="wrap">
<h2>テキスト設定</h2>
<table class="form-table">
<tr>
<th>テキスト</th>
<td><input name="showtext_options" type="text" id="inputtext" value="<?php echo $opt; ?>" class="regular-text" /></td>
</tr>
</table>
<p class="submit"><input type="submit" name="Submit" class="button-primary" value="変更を保存" /></p>
</div>
</form>
<?php
}
「show_text_option_page()」メソッドは、HTMLやPHPで書いていきます。
ブラウザで確認するとこうなります。
説明
<!-- html部分 -->
<form action="" method="post">
<?php
//submitしてPOSTした時に、「check_admin_referer()」で管理者画面からPOSTされたかチェックするために
//「wp_nonce_field()」で指定します。
wp_nonce_field('shoptions');
?>
<div class="wrap">
<h2>テキスト設定</h2>
<table class="form-table">
<tr>
<th>テキスト</th>
<td><input name="showtext_options" type="text" id="inputtext" value="<?php echo $opt; ?>" class="regular-text" /></td>
</tr>
</table>
<p class="submit"><input type="submit" name="Submit" class="button-primary" value="変更を保存" /></p>
</div>
</form>
14行目～30行目
HTML文ですね。少しPHPが入りますが、
WordPressには、専用のCSSスタイルシートがあります。「<div class=”wrap”>」やテキスト部分のclass「class=”regular-text”」や「<p class=”submit”>」など、色々種類がありますので、気になる方は調べてみてください。
・POSTされた情報をオプション専用のデータベースに登録
一つ上の、「WordPressの管理画面でHTMLを表示する」でのソースで既に登録できています。
//管理画面からポストされたデータか確かめる。
check_admin_referer('shoptions');
4行目～5行目
ここでは、ワードプレス専用の変数「check_admin_referer()」メソッドを使って、POSTされた内容が、WordPressの管理画面から来たのかをチェックします。
その為には、「<from></form>」の中に
wp_nonce_field('shoptions');
を記述します。※今回は20行目に書いています。これを書かないとエラーが出ます。
//データベースの「wp_options」テーブルにレコードをアップデート
update_option('showtext_options', $opt); ?><div class="updated fade"><p><strong><?php _e('Options saved.'); ?></strong></p></div><?php
9行目～10行目
WordPress固有の「update_option()」メソッドで、データベースに登録します。
「update_option()」の引数
| 引数 | 内容 |
| 第1引数 | オプションの名前 |
| 第2引数 | 値 |
データベースの「拡張子+options」テーブルに、登録されます。
他のデータベーステーブルに登録したい場合もあると思いますが、今回はここまでにします。
・実際にページに表示してみる
「show_text.php」の最後の行に、下記を追加します。
function get_text() {
//get_option()メソッドでオプション名を指定して、データベース内のあたいを取り出します。
$opt = get_option('showtext_options');
//return オプションの値を返します
return $opt;
}
「get_text()」という新しい関数を作ったことになり、この関数を呼び出すと、データベースに登録されている、「showtext_options」の値が取得できます。
例えば、外観→テーマの編集→「header.php」ファイルに下記を追記します。
<?php //プラグインの内容を表示 echo esc_html(get_text()); ?>
「esc_html()」メソッドは文字をエスケープする、WordPress固有のメソッドです。
参考ページ：関数リファレンス/esc html
このように登録されます。
位置はどこに表示するかは、お好きな位置で結構です。
・まとめ（個人的な感想です。飛ばしてもＯＫ）
WordPressのプラグインを開発しよう（初級編）のページを参考にしながら、5日間かけて、動かしてみました。
参考にさせて頂き、ありがとうございました。
書かれたのが数年前という事で、今のWordPressでは動かない部分があり、戸惑いましたが、それを調べると理解が深まりました。
WordPressのプラグイン、今はすごい需要があるように見えるので、自分も勉強し始めました！
結構、PHPのクラスを作ってみたり、新しい事が多くて面白かったです。内容が濃いので5日ほどかかりましたが
今後もWordPressのプラグインの需要はありそうなので、皆さんも作られてみてはどうでしょうか。
お疲れさまでした。
・今回の記事を書くにあたって参考にしたサイト
WordPress テーマ作成時のstyle.cssコメント
WordPress Codex 日本語版 「プラグインの作成」
参考にさせて頂いたサイトの管理者様、今回もありがとうございました。
Leave a comment