問題描述

我與新作者遇到的一個非常常見的問題是,在提交他們的帖子以進行審查之前,他們忘記完成一些基本任務 (即使我有可用的指南) 。

是否可以新增一個確認框,僅在投稿者點選 「提交審閱」 按鈕時出現?有可能這樣一個 jQuery 框:

我在 webplugin archives 上遇到了幾個確認釋出程式碼,但所有這些都會觸發釋出 (不提交審閱) 並提示 Javascript 警報視窗。

最佳解決思路

一個有用的快捷方式是使用 JavaScript 與輸出框的 Ajax 操作結合使用。

建立一個小外掛。在 plugins 目錄下建立一個資料夾,命名為’SubmitReviewConf’ 。在此資料夾中建立一個名為 SubmitReviewConf.php 的 PHP 檔案。

在這個檔案中,放這個程式碼:

<?php
/**
* Plugin Name: Submit for Review Confirmation Message
* Description: Confirmation Message for Submit for Review Action
* Author: G.M.
*/

function add_my_admin_assets( $hook ) {
    // Only once variable force the box to be shown only one time. Can be from theme or plugin via filter.
    // Default is true
    $only_once = apply_filters( 'submit_review_conf_onlyonce', 1 );
    //
    if ( $only_once && $hook == 'post.php' ) $post = get_post( $_GET['post'] );
    $enqueue = $only_once ? ($hook == 'post-new.php' || ( $hook == 'post.php' && $post->post_status != 'pending') ) : ($hook == 'post-new.php' || $hook == 'post.php');
    if ( isset($post) && get_post_meta( $post->ID, '_skip_SubmitReviewConf', true ) ) return;
    $postid = '';
    if ( isset($_GET['post']) && is_object($post) ) $postid = $post->ID;
    if ( $enqueue && ! current_user_can( 'edit_published_posts' ) ) {
        wp_enqueue_style( 'thickbox' );
        wp_enqueue_script( 'SubmitReviewConf', plugins_url( 'SubmitReviewConf.js', __FILE__ ), array( 'jquery','thickbox' ), null );
        wp_localize_script( 'SubmitReviewConf', 'SubmitReviewConfData', array( 'only_once' => $only_once, 'postid' => $postid ) );
    } 
}
add_action( 'admin_enqueue_scripts', 'add_my_admin_assets', 30 );

function clean_up_SubmitReviewConf_meta( $post ) {
     delete_post_meta( $post->ID, '_skip_SubmitReviewConf' );
}
add_action( 'pending_to_publish', 'clean_up_SubmitReviewConf_meta', 30 );      

function confirmation_msg_out() {
    if ( isset( $_GET['only_once'] ) && isset( $_GET['postid'] ) ) update_post_meta( $_GET['postid'], '_skip_SubmitReviewConf', '1' );
    // SET HTML FOR THE CONFIRMATION MESSAGE IN THIS FUNCTION
    ?>
    <div id="confirmation_msg_out">
        <ul>
            <li><?php _e('Did you ... '); ?></li>
            <li><?php _e('Did you ... '); ?></li>
            <li><?php _e('Did you ... '); ?></li>
        </ul>
        <input id="confirmation_msg_submit" class="button button-primary button-large" value="<?php _e('Submit for Review') ?>" name="submitforreview"></input>
        <a id="confirmation_msg_submit_cancel" class="button button-large" href="#"><?php _e('Cancel') ?></a>
    </div>
    <?php
    die();
}
add_action( 'wp_ajax_output_review_confirm', 'confirmation_msg_out' );

這個小外掛只包含 2 個功能。 (編輯:在註釋中的 OP 請求後,變為 3)

第一個排列自定義指令碼 (稍後將解釋什麼) 和’thickbox’ 指令碼 (指令碼 WordPress 用於顯示模態訊息) 。

只有當前使用者無法編輯已釋出的帖子時,這些指令碼才會排隊,因此作者和更高階的使用者可以釋出沒有確認訊息的帖子。

第二個功能輸出確認框的 HTML 。這個功能被掛接到一個 Ajax 動作 output_review_confirm 中。

現在在同一個資料夾的 PHP 檔案中,我們建立我們的 JavaScript 檔案,並命名為 SubmitReviewConf.js

在這個檔案中:

jQuery().ready( function($) {

    var $publish = $('#publish');

    var only_once = SubmitReviewConfData.only_once;

    function remove_confirm_publish_button() {
        $('#confirm-publish-button').remove();
        $publish.show();
    }

    $(document).on('click', '#confirm-publish-button', function(e) {
        e.preventDefault();
        if ( only_once ) remove_confirm_publish_button();
        var tb_show_url = ajaxurl + '?action=output_review_confirm';
        if (only_once) tb_show_url += "&only_once=1";
        if ( SubmitReviewConfData.postid != '' ) tb_show_url += "&postid=" + 
            SubmitReviewConfData.postid;
        tb_show('', tb_show_url);
    });

    $(document).on('click', '#confirmation_msg_submit', function(e) {
        e.preventDefault();
        tb_remove();
        $publish.click();
    });

    $(document).on('click', '#confirmation_msg_submit_cancel', function(e) {
        e.preventDefault();
        tb_remove();
    });

    var newbutton = '<input id="confirm-publish-button" class="button button-primary button-large" type="button" value="' + 
        $publish.val() + '"></input>';
    $publish.hide().after(newbutton);

});

這個指令碼的作用:

  1. 隱藏 WordPress 的 「提交審閱」 按鈕,並將其替換為與 WP 一樣的按鈕,但不會觸發提交操作。

  2. 當我們的假提交按鈕被點選時,我們使用 Ajax URL 觸發我們的函式,並使用 ThickBox 指令碼提供的 tb_show 函式在模態確認中輸出 HTML 。

  3. 當使用者點選模式框內的 「提交審查」 時,我們模擬 WP 標準 「提交審查」 按鈕的點選並刪除模態視窗。如果使用者點選’Cancel’,我們只需刪除模態視窗,什麼都不做。

就這樣。記住在 WP 後端啟用外掛;)

請注意,此外掛需要在使用者瀏覽器上啟用 JavaScript 。如果停用,使用者將看不到任何確認,但是認為該模態視窗 (ThickBox) 是一個 JavaScript 指令碼,如果停用 JavaScript 則無法使用。

如果此功能非常關鍵,如果停用 JavaScript,您可能需要停用釋出,但是作為 not-critical 功能,您可以忽略停用 JavaScript 的使用者 (在這種情況下,WordPress 會照顧您的安全性) 他們的使用者百分比很小。

參考文獻

注:本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。