投稿する時にチェックしてメッセージを出すプラグインを作るーその2

この記事は約15分で読めます。

投稿する時にスラッグ、カテゴリー、moreが抜けていないか?また公開をクリックしたときにすぐ公開せずに確認メッセージを出して答えを入力しないと公開できないようにする機能を持ったプラグインを作っています。今回は、ダッシュボードで何をどのようにチェックするかを指示する画面を作り、その値を保存します。
投稿する時にチェックしてメッセージを出すプラグインを作るーその1 の続きとなります。

作る画面の確認、フォルダとファイルの作成

今回作りたいプラグインの管理画面は

こんな感じにしたいと思っています。

また、プラグインの管理画面を作るにあたって

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

この本の第8章 管理画面が参考になりました。まず最初にプラグイン用のフォルダを作ってファイルを作ります。

P.167 1. プラグイン用のファイルを作成する

に書いてあることを実行します。新しく作るプラグインは warn-when-you-post という名前にしようと思っています。

wp-content\plugins\ に新しく作るプラグインのフォルダを作ります。warn-when-you-postというフォルダを作りました。

そしてこの中にディレクトリ名と同じ名前のphpファイル(warn-when-you-post.php)を作成します。

管理画面メニューが出るようにする

管理画面にメニューが出るようにします。元々あるメニュー、設定の下にこのWarn when you post が表示されるようにします。

今回は元々ある 設定 の下にメニューを追加したかったので、この部分についてはこの本ではなく、

WordPress Codex日本語版 管理メニューの追加

を参照しました。

先ほど作った warn-when-you-post.php を開いて、

<?php
/*
Plugin Name: Warn when you post
*/

add_action( 'admin_menu', 'wwyp_admin_menu' );

function wwyp_admin_menu() {
    add_options_page( 'Warn when you post', 'Warn when you post', 'manage_options', 'my-unique-identifier', 'wwyp_option_input' );
}

function wwyp_option_input() {
    if ( !current_user_can( 'manage_options' ) )  {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }
    echo '<div class="wrap">';
    echo '<p>Here is where the form would go if I actually had options.</p>';
    echo '</div>';
}

このように記述して保存します。

ダッシュボード プラグイン>インストール済みプラグイン をクリック

Warn when you post の下にある 有効化 をクリックします。

ダッシュボードの 設定 にマウスを載せるとWarn when you postメニューが表示されました。

メニューをクリックしたらwarn-when-you-postの管理画面を表示する

今のコーディングでこのメニューをクリックすると、

このようにCodexでコピーしてきたままになっています。これを既に考えてある画面が表示出来るようにします。

WordPressプラグイン開発のバイブル

P.179 8-3 管理画面を使って独自の設定を保存するを参考に進めます。

フォームを作成する

画面を表示しているのは、

function wwyp_option_input() {

このfunctionなのでここに記述します。

function wwyp_option_input() {
    if ( !current_user_can( 'manage_options' ) )  {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }
?>
<div class="wrap">
<h2 style="margin-bottom:10px;">Warn when you post</h2>
<form id="warn-when-you-post-form" method="post" action="">
    <?php wp_nonce_field('my-nonce-key', 'warn-when-you-post'); ?>
    <div style="margin-top:10px;">
        <div style="float:left;width:150px;">&nbsp;</div>
        <div style="float:left;width:150px;">投稿</div>
        <div style="float:left;width:150px;">固定ページ</div>
        <div style="clear:both"></div>
    </div>
    <div style="margin-top:10px;">
        <div style="float:left;width:150px;">スラッグチェック</div>
        <div style="float:left;width:150px;"><input type="checkbox" name="wwyp_slug_post" value="1"<?php echo wwyp_edit_checked('wwyp_slug_post');?>></div>
        <div style="float:left;width:150px;"><input type="checkbox" name="wwyp_slug_page" value="1"<?php echo wwyp_edit_checked('wwyp_slug_page');?>></div>
        <div style="clear:both"></div>
    </div>
    <div style="margin-top:10px;">
        <div style="float:left;width:150px;">未分類チェック</div>
        <div style="float:left;width:150px;"><input type="checkbox" name="wwyp_category1_post" value="1"<?php echo wwyp_edit_checked('wwyp_category1_post');?>></div>
        <div style="float:left;width:150px;"><input type="checkbox" name="wwyp_category1_page" value="1"<?php echo wwyp_edit_checked('wwyp_category1_page');?>></div>
        <div style="clear:both"></div>
    </div>
    <div style="margin-top:10px;">
        <div style="float:left;width:150px;">moreチェック</div>
        <div style="float:left;width:150px;"><input type="checkbox" name="wwyp_more_post" value="1"<?php echo wwyp_edit_checked('wwyp_more_post');?>></div>
        <div style="float:left;width:150px;"><input type="checkbox" name="wwyp_more_page" value="1"<?php echo wwyp_edit_checked('wwyp_more_page');?>></div>
        <div style="clear:both"></div>
    </div>
    <div style="margin-top:15px;">
        <div style="float:left;width:150px;">公開確認</div>
        <div style="float:left;width:150px;"><input type="checkbox" name="wwyp_publish_post" value="1"<?php echo wwyp_edit_checked('wwyp_publish_post');?>></div>
        <div style="float:left;width:150px;"><input type="checkbox" name="wwyp_publish_page" value="1"<?php echo wwyp_edit_checked('wwyp_publish_page');?>></div>
        <div style="clear:both"></div>
    </div>
    <div style="margin-left:60px;">
        <div style="margin-top:10px;">
            <div>質問</div>
        </div>
        <div>
            <input type="text" name="wwyp_confirm_q" style="width:390px;" value="<?php echo esc_attr(get_option('wwyp_confirm_q')); ?>">
        </div>
        <div>
            <div>答え</div>
        </div>
        <div style="margin-top:10px;">
            <input type="text" name="wwyp_confirm_a" style="width:390px;" value="<?php echo esc_attr(get_option('wwyp_confirm_a')); ?>">
        </div>
    </div>
    <p>
    <input type="submit" value="変更を保存">
    </p>
</form>
</div>
<?php
}

function wwyp_edit_checked ($field_name) {
    if (get_option($field_name) == '1') {
        return ' checked';
    }
    return '';
}

このように記述して保存します。

P.181にある CSRF対策としてwp_nonce_field()を挿入する を参考に

    <?php wp_nonce_field(‘my-nonce-key’, ‘warn-when-you-post’); ?>

という行を入れてあります。submitが押されたときにこのフィールドをチェックすることでCSRF対策を施すことができます。

この状態で ダッシュボード 設定>Warn when you post をクリックすると、

このようにフォームが表示されました。

変更を保存をクリックしたら値が保存されるようにする

あとは入力された値を保存する部分をコーディングします。


P.184 フォームで送信されたデータを受け取り保存する

を参考にコードを書きました

add_action('admin_init', 'wwyp_init');

function wwyp_init() {
    // 項目名配列
    $field_array = array('wwyp_slug_post', 'wwyp_slug_page', 'wwyp_category1_post', 'wwyp_more_post', 'wwyp_more_page', 'wwyp_publish_post', 'wwyp_publish_page', 'wwyp_confirm_q', 'wwyp_confirm_a');
    // デフォルトの質問と答え
    $default_q = '公開しても大丈夫ですか?';
    $default_a = '大丈夫';
    
    // nonceの値をチェック
    if ( isset($_POST['warn-when-you-post']) && $_POST['warn-when-you-post'] ) {
        if (check_admin_referer('my-nonce-key', 'warn-when-you-post')) {
            // 値を保存
            foreach ($field_array as $field) {
                if (isset($_POST[$field]) && $_POST[$field]) {
                    update_option($field, $_POST[$field]);
                } else {
                    // 公開チェック指定があるのに質問もしくは答えが入ってなければデフォルトの値を入れる
                    if (($field == 'wwyp_confirm_q') AND (($_POST['wwyp_publish_post'] == '1') or ($_POST['wwyp_publish_page'] == '1'))){
                        update_option($field, $default_q);
                    } elseif (($field == 'wwyp_confirm_a') AND (($_POST['wwyp_publish_post'] == '1') or ($_POST['wwyp_publish_page'] == '1'))){
                        update_option($field, $default_a);
                    } else {
                        update_option($field, '');
                    }
                }
            }
            // 再表示
            wp_safe_redirect(menu_page_url('warn-when-you-post', false));
        }
    }
}

このコードを追加して保存します。

add_action(‘admin_init’, ‘wwyp_init’);

の記述でadmin_initというアクションフックで wwyp_init という関数を実行します。

admin_initのCodexページを見ると

admin_init はユーザーが管理画面エリアにアクセスする際に他のフックより先に実行されます。このフックはパラメーターを持ちませんので、特定の関数をコールバックすることだけが可能です。

とあります。最初にこの画面を出したときやsubmitボタンをクリックしたときに実行されるようです。

wwyp_initでは先ほど設定しておいたnonceの値をチェックして、値を保存するコードを書きました。

実行してみます。

値を入力して 変更を保存 をクリック

値が保存されて再表示しました。ダッシュボードの別のページを参照したりしてもこのページに来ると値が入ったままなので保存されていることが分かります。

データベースを見ると wp_options に

このように保存されているのが分かります。

まとめ:管理画面から入れた値を保存するまではAPIを使って簡単にできた

と、このように書けば長くかかっている感じがしますが何も分かっていない状態からこのWordPressプラグイン開発のバイブルを参照しながらコードを書いて実際にできあがるまでは1時間もかかりませんでした。この本がとても参考になりました!

コーディングでは普通にDBに保存するコードを書くよりもOptions APIを使って簡単に値を保存できるのでコードも短く、確実に保存できます。

ということで、作ろうと思っているプラグインはあと、「指定された内容のチェックを投稿画面で行う」という部分が残っているだけとなりました。これについて、次回のblogで書いてみたいと思います。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress プラグイン
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。