wordpressのプラグインを作成する【#2】データベースをカスタマイズ

スタイルシートを外部取り込みにしていく

前回の記事でプラグインの表示は成功しましたが、スタイルをhtml内で打っているため見づらかったので外部取り込みにします。

<link rel="stylesheet" href="./css/style.css" type="text/css" />

プラグインのフォルダにcssのフォルダを作成してスタイルシートのファイルを作成して普通にリンクさせてみました。

全然だめですね…。やはり相対パスじゃなくて関数を使った絶対パスが必要みたいですね。

プラグインまでの絶対パスを書き出す関数はplugins_url( '', FILE );

これをechoしてやれば正しく繋がるはず。

<link rel="stylesheet" href="<?php echo plugins_url( '', __FILE__ ); ?>/css/style.css" type="text/css" />

いけました！

最終目標はメディア一覧から画像を選択してファイルパスをデータベースに登録するフォームを作ることなのですが、その前段階として適当な文字列をデータベースに登録するフォームを作ります。

お気に入りのスタイルシートのフレームワークがuikitなので読み込んでいきます。

<link rel="stylesheet" href="<?php echo plugins_url( '', __FILE__ ); ?>/css/uikit/uikit.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo plugins_url( '', __FILE__ ); ?>/css/style.css" type="text/css" />
<script src="<?php echo plugins_url( '', __FILE__ ); ?>/js/uikit/uikit.min.js"></script>
<div class="plugin_title">スライドショー用画像選択テスト</div>
<form method="POST" action="">
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">テストテキスト</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-stacked-text" type="text" placeholder="なんか入れて">
        </div>
    </div>
    <button class="uk-button uk-button-primary" type="submit">登録</button>
</form>

とりあえずmethodやらactionやらは置いといて…。こんな感じでいれると、

こんな感じになりました。ボタンをちゃんとsubmitにしているので文字を入れてボタンを押すと送信されるようになっています。

wordpressのデータベースをカスタマイズする

次にここで入力したものをデータベースに送信して、このプラグイン内で使える値として登録できるようにします。そもそもプラグインで使う値はどこに保存されているのか調べてみました。

現在のwordpressのテーブル一覧をphpmyadminで見てみると

こんな感じ。wp_yoastというのはSEO向けのプラグインのテーブルでおそらくインストール時に追加されたんだろうなという感じです。あ、siteguardもテーブルを増やしていますね。しかし当然他にもプラグインは入れているはずなのに他はテーブルが増えていない。

と、いうことはテーブルを増やさなくてもどこかにプラグインで設定した値を保存できる仕組みになっているということですね。wp_optionsってのが露骨に怪しい…。というわけで中身を見てみます。

これはたぶん「設定」のサイトURLのフォームと項目名を一致させてますね。これをプラグインごとに増やすってことでしょうか。調べたところによるとwp_optionsというテーブルは大きなプラグインの値を管理するのには向いていないそうです。そのためyoastやsiteguardなんかは別でオリジナルのテーブルを作成してるんですね。

今回はそんな大きいプラグインを作るつもりもないのでここに項目を増やして入力したテキストを保存するようにしたいです。何か間違いがあった時も消すの簡単ですし。

どうやって項目を増やすのか

プラグインをインストールして有効化する際にいちいちテーブル構造をいじるわけにはいきません。有効化するときにプラグイン用の項目を増やさなければなりません。

説明としては少し戻るのですが、現在作っているクラスが動く前に有効化したときに項目の有無の確認、ない場合は項目を増やすような機能が必要です。

そこでこのような関数を作成したクラスの前に書きます。

function slider_image_select_plugin_option(){
    //初期化の処理を行う
    if(!get_option('slider_image_select_plugin_installed')){
        add_option('slider_image_select_plugin_installed', 1);
        add_option('slider_image_select_plugin_entry_form', '');
    }
}
register_activation_hook(__FILE__, 'slider_image_select_plugin_option');

slider_image_select_plugin_optionこれは関数名です。if〜の行でget_optionというwordpressの関数でwp_optionsのテーブルをチェックさせoption_nameのフィールドにslider_image_select_plugin_installedの項目があるかどうかをチェックさせます。

ない場合にadd_optionというwordpressの関数を使用しています。第一引数にoption_nameに入れる文字列（項目名）、第二引数にoption_value（値）を入れて実行しています。

一旦無効化して再度有効化してみます。

増えてますね。

次に入力フォームに入れたテキストを登録したときにslider_image_select_plugin_entry_formのoption_valueに登録（更新）するような仕組みを作成します。

作ったフォームを変更します。

<form method="POST" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">テストテキスト</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-stacked-text" name="slider_image_select_plugin_entry_form" type="text" placeholder="なんか入れて">
        </div>
    </div>
    <input type="hidden" name="posted" value="slider_save">
    <button class="uk-button uk-button-primary" type="submit">登録</button>
</form>

actionのところに<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>、hidden項目として<input type="hidden" name="posted" value="slider_save">を追加しました。あとinputにslider_image_select_plugin_entry_formという名前をつけました。データベースに追加したoption_nameと同じにします（わかりやすいから）。

actionのほうは現在のURLを取得して文字列を変換してるのか？hiddenのほうは送信したときにフォーム送信の有無を判定するために使用するやつですね。

戻ってきた時用にPOSTの有無、データベース更新をするためのコードを入れていきます。

if ($_POST['posted'] == 'slider_save') {
        //設定画面で入力された設定値を保存
        update_option('slider_image_select_plugin_entry_form', $_POST['slider_image_select_plugin_entry_form']);
        }

フォームの前でも後でもいいんだろか。いつもの癖で前に入れてます。

これで試しに適当なテキストを入力して登録してみると…

入れたテキストが登録されてますね。

ただ登録した際に

ただページが更新されたような挙動をするだけでこのままでは不気味なので、「登録完了」の文字が出るようにしたいのと、登録した文字がフォームに出るようにしたいですね。

まずはフォームのinputのvalueのところに

<?php echo esc_attr(get_option('slider_image_select_plugin_entry_form')); ?>

を追記。esc_attrはエスケープ処理、get_optionはwp_optionsで引数の項目のoption_valueを取得する関数ですね。更新すると、

表示されました。もちろん書き換えもできます。そして、「設定を保存しました」みたいな表記をタイトルの下あたりに欲しいので、タイトルの下あたりにコードを追加します。

<?php if($_POST['posted'] == 'slider_save') : ?>
<div class="updated"><p><strong>設定を保存しました</strong></p></div>
<?php endif; ?>

なんか位置ずれてますが追々気が向いたら直します。

これでフォームとしての形ができました。

さいごに

これでフォームの準備が整いました。次回はこのフォームの中にwordpressのメディア選択画面を出して、ファイルパスのテキストを書き出す機能を作成していきます。

お知らせ

株式会社プラン・ドゥではphpとデータベースを利用したアプリケーション開発を行なっております。
wordpressでのホームページ作成、phpのスクラッチ開発などが可能です。
業務効率化等でお困りのことがございましたら、システムのご提案からさせていただきますのでお気軽にご相談ください。

その他の取扱商品はこちらからご覧いただけます。
https://plando-inc.co.jp/product

お問い合わせはこちら

前の記事へ次の記事へ