wordpressのプラグインを作成する【#1】メニュー表示とオプション画面表示

とりあえず作るだけなら意外と簡単だったwordpressプラグイン

得意先のホームページをwordpressを使って作っていたのですが、スライドショーの画像を自分で設定したいという希望が出てきました。

Lightningなんかの有名なテーマを使っていれば簡単にできたのかもしれませんが、この手のテーマはそのあたりのカスタマイズに最適化するために無駄に複雑な作りになっていて好きではありません。

自分好みのデザインにしようとしたときにどれをいじったらいいのかわからないくらい複雑で…

これのせいで逆にwordpressの敷居は高くなってるんじゃないかと思うほどです。案の定リニューアルの際にローカルでやってたらwordpressとテーマのバージョンが合わなくてレイアウトボロボロになったし…。

最低限のテーマ作るだけだったらかなり簡単でしたwordpress。すごい！

Lightningについては追々勉強しようとは思います。

しかし、自作の簡易テーマの弊害としてこういった依頼があった場合コードをいじらないと画像の変更ができません。そんな知識や興味があるお客さんだったら最初から自分で作りますよね…

何かいい方法はないかなと調べていると、functions.phpに数行追加するとカスタマイズ画面で複数画像を選択できる機能をつけられるというのを知りました。

しかし複数のページにスライドショーがあるためこの方法は断念（トップページのものしか設定できませんでした）

いくつかスライドショーを設定するプラグインもあったのですが、現在設定しているスライダーと見た目や動きが変わってしまうのがいやで使いたくない…というわけで自分で作ってしまうことにしました。

テーマのカスタマイズに追加してもいいのですがテーマにそういうコードを追加するとメンテナンスが面倒になりそうなのでプラグインの形を取ります。

まずはメニューに表示してみる

プラグインフォルダとデータを作成

とりあえず簡単そうなところから始めます。ローカルのテスト環境で説明します。

まずはwp-content/pluginsに適当な名前のフォルダを作成します。今回はtestにしました。

その中にこれまた適当な名前でphpファイルを作成します。参考にしたサイトなんかはどれもプラグインの機能に応じたファイル名にしていたのですが、個人的には複数のファイルをまたぐことを想定してシンプルにindex.phpにしました。

まずはお決まり事としてプラグインの説明を冒頭に表記します。

<?php
/*
Plugin Name: スライドショー画像選択テスト
Plugin URI: https://plando-inc.co.jp
Description: スライドショーの画像を選択するテストです。
Author: 株式会社プラン・ドゥ
Version: 1.0
Author URI: https://plando-inc.co.jp
*/

こんな感じです。他にも入れられるのかどうかよくわからないですが。

とりあえずこれで保存してプラグインの管理画面を見てみましょう。

ちゃんと反映されてます。

クラスの作成

次にこれを有効化したときにメニューに表示させる処理、メニューをクリックしたときにオプション画面を表示する処理をコメントの下から表記していきます。

プラグイン内では複数の関数をまとめるためクラスを使用します。

クラスとはプログラムの処理をまとめたオブジェクトのことで、その処理結果を別のクラスに引き継いだりもできるそうです。クラスについて解説してくれているサイトはこちらです。難しいですね…。

後のメンテナンス性を上げるためとのことですが、ファイルを分けて取り込めばいいだけでこのように括弧でまとめる必要性ってなんだろ？変数をこの中だけで完結させられるからとかでしょうか？

初心者で同じような疑問を持ってる方がいらっしゃいました。それに対してクラスの有用性を説明してくれてる方もいらっしゃいますね。たしかにどこがどの機能かわかりやすい…か？もっと勉強が必要ですね。

とりあえず処理が長くなるのと、ひとつのプラグインで様々な処理をする可能性があるのでクラスを使ってみます。

class slider_image_select {
    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'), '', );
    }
    function show_text_option_page() {
        //オブション画面に表示する内容
    }
}
$slider_image_select = new slider_image_select;

最初にclass クラス名を表記します（クラス名は適当な名前）。内容は括弧で囲い、最初にfunction __construct()としてadd_action('admin_menu', array($this, 'add_pages'));を表記します。

__constructはインスタンス化するときに実行されるメソッド（関数）です。ってさっぱりわかりませんね。

「instance（インスタンス）」の意味は「事実」とか「実例」とか「実態」とかです。参考サイトによると、クラスという設計図をインスタンス（実体）化することだそうです。

最初のclass 〜でクラスを作成、中のfunction __constructでクラスをインスタンス化、最後の$変数=new クラス名でインスタンス化したクラスを実行までがクラスを作成する際のセットみたいです。

このセットがないととにかくプラグインは動きませんでしたのでとりあえず文法として覚えとけばいいかな…

__constructの中のadd_action('admin_menu', array($this, 'add_pages'));のadd_actionはfunctionsでもよく使う関数ですね。第一引数で使いたいアクションを指定します。admin_menuというのが今回使いたいアクションで、使えるアクションはこちらを参照してください。

第二引数で次に使いたい関数を指定してるっぽいです。決まり事として単純に関数名を書くのではなくarray($this,関数名)として配列にします。

次の行でadd_pagesの関数の表記をします。これまたadd_menu_pageというwordpressに元からある関数をここで実行しています。引数に決まりがあって、このページに書いてあります。最後の引数の部分でメニューのどこに表示されるかを指定できるので整理しやすいです。

array($this,’show_text_option_page’)で実行する関数を指定しています。次の行でメニューをクリックした際に画面に表示される内容を書いていきますが一旦ここで管理画面を更新してみます。

見事一番下に表示されました！なんだかテンション上がりますね。

次にshow_text_option_pageの内容を少し変えてみます。

function show_text_option_page() {
   //オブション画面に表示する内容
   echo 'あああ'
}

こんな感じで表示されます。タグで囲めばスタイルなども反映できるのですが、いちいちechoを書くのが面倒なので一旦?>タグで閉じて通常のhtmlを書いてやればストレスなく表記できます。

function show_text_option_page() {
        //オブション画面に表示する内容
?>
<div style="width: 50%;margin: 50px auto;border: 1px solid #000;">あああ</div>
<?php
}

こんな感じ。

さいごに

とりあえずメニューと内容を表示するところまではできました。

次は登録フォームの形をまず作成していきたいと思います。

お知らせ

株式会社プラン・ドゥでは一番くじなどで馴染みのあるミシン目の入ったくじの販売を行なっております。

他社ではなかなかできない製品を最適な価格でご案内させていただいておりますのでぜひお問い合わせください。その他の取扱商品はこちらからご覧いただけます。
https://plando-inc.co.jp/product

お問い合わせはこちら

前の記事へ次の記事へ