wordpress - 如何创建基本的 WordPress 管理指针？

Question

我已经四处寻找了一段时间，我发现的只是 3-4 年前的教程，解释了如何进行指针之旅。我想做的就是添加一个指针，当有人激活我的插件时会弹出一个指针，以便我可以通知他们一个新的菜单选项，他们将在其中查看我的插件设置。任何帮助将不胜感激!

Answer 1

WP 中的指针需要 3 个组件:

1:wp指针CSS文件

2:wp指针JS文件

3:JavaScript 片段

到 1 和 2

将它们简单地包含在:

wp_enqueue_style( 'wp-pointer' );

和

wp_enqueue_script( 'wp-pointer' );

JS代码:

    <script type="text/javascript">
    (function($){
        var options = {"content":"<h3>Personal Data and Privacy<\/h3><h4>Personal Data Export and Erasure<\/h4><p>New <strong>Tools<\/strong> have been added to help you with personal data export and erasure requests.<\/p><h4>Privacy Policy<\/h4><p>Create or select your site&#8217;s privacy policy page under <strong>Settings &gt; Privacy<\/strong> to keep your users informed and aware.<\/p>","position":{"edge":"left","align":"bottom"},"pointerClass":"wp-pointer arrow-bottom","pointerWidth":420}, setup;

        if ( ! options )
            return;

        options = $.extend( options, {
            close: function() {
                $.post( ajaxurl, {
                    pointer: 'wp500_isrc_pointer',
                    action: 'dismiss-wp-pointer'
                });
            }
        });

        setup = function() {
            $('#menu-settings').first().pointer( options ).pointer('open');
        };

        if ( options.position && options.position.defer_loading )
            $(window).bind( 'load.wp-pointers', setup );
        else
            $(document).ready( setup );

    })( jQuery );
    </script>

当然，您需要将它们全部包装在一个 php 文件中以检查用户功能并检查用户元数据中的关闭。

我已在 wp-admin/includes/class-wp-internal-pointers 中复制了 WP 指针类，并从中创建了一个自定义类。

这里是完整的代码，我可以使用像这样的 Action 钩子(Hook)来调用它:

add_action( 'admin_enqueue_scripts', array( 'isrc_Internal_Pointers', 'enqueue_scripts') );
add_action( 'user_register',array( 'isrc_Internal_Pointers', 'dismiss_pointers_for_new_users' ) );

完整的 PHP 文件(将其包含在您的代码中并调用 2 个操作):

<?php
/**
 * Administration API: WP_Internal_Pointers class
 *
 * @package WordPress
 * @subpackage Administration
 * @since 4.4.0
 */

/**
 * Core class used to implement an internal admin pointers API.
 *
 * @since 3.3.0
 */
final class isrc_Internal_Pointers {

    /**
     * Initializes the new feature pointers.
     *
     * @since 3.3.0
     *
     * All pointers can be disabled using the following:
     *     remove_action( 'admin_enqueue_scripts', array( 'WP_Internal_Pointers', 'enqueue_scripts' ) );
     *
     * Individual pointers (e.g. wp390_widgets) can be disabled using the following:
     *     remove_action( 'admin_print_footer_scripts', array( 'WP_Internal_Pointers', 'pointer_wp390_widgets' ) );
     *
     * @static
     *
     * @param string $hook_suffix The current admin page.
     */
    public static function enqueue_scripts( $hook_suffix ) {
        /*
         * Register feature pointers
         *
         * Format:
         *     array(
         *         hook_suffix => pointer callback
         *     )
         *
         * Example:
         *     array(
         *         'themes.php' => 'wp390_widgets'
         *     )
         */
        $registered_pointers = array(
            'index.php' => 'wp500_isrc_pointer',
        );

        // Check if screen related pointer is registered
        if ( empty( $registered_pointers[ $hook_suffix ] ) )
            return;

        $pointers = (array) $registered_pointers[ $hook_suffix ];
        /*
         * Specify required capabilities for feature pointers
         *
         * Format:
         *     array(
         *         pointer callback => Array of required capabilities
         *     )
         *
         * Example:
         *     array(
         *         'wp390_widgets' => array( 'edit_theme_options' )
         *     )
         */
        $caps_required = array(
            'wp500_isrc_pointer' => array(
                'install_plugins'
            ),
        );

        // Get dismissed pointers
        $dismissed = explode( ',', (string) get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );

        $got_pointers = false;
        foreach ( array_diff( $pointers, $dismissed ) as $pointer ) {
            if ( isset( $caps_required[ $pointer ] ) ) {
                foreach ( $caps_required[ $pointer ] as $cap ) {
                    if ( ! current_user_can( $cap ) )
                        continue 2;
                }
            }

            // Bind pointer print function
            add_action( 'admin_print_footer_scripts', array( 'isrc_Internal_Pointers', 'pointer_'.$pointer ) );
            $got_pointers = true;
        }

        if ( ! $got_pointers )
            return;

        // Add pointers script and style to queue
        wp_enqueue_style( 'wp-pointer' );
        wp_enqueue_script( 'wp-pointer' );
    }

    /**
     * Print the pointer JavaScript data.
     *
     * @since 3.3.0
     *
     * @static
     *
     * @param string $pointer_id The pointer ID.
     * @param string $selector The HTML elements, on which the pointer should be attached.
     * @param array  $args Arguments to be passed to the pointer JS (see wp-pointer.js).
     */
    private static function print_js( $pointer_id, $selector, $args ) {
        if ( empty( $pointer_id ) || empty( $selector ) || empty( $args ) || empty( $args['content'] ) )
            return;

        ?>
        <script type="text/javascript">
        (function($){
            var options = <?php echo wp_json_encode( $args ); ?>, setup;

            if ( ! options )
                return;

            options = $.extend( options, {
                close: function() {
                    $.post( ajaxurl, {
                        pointer: '<?php echo $pointer_id; ?>',
                        action: 'dismiss-wp-pointer'
                    });
                }
            });

            setup = function() {
                $('<?php echo $selector; ?>').first().pointer( options ).pointer('open');
            };

            if ( options.position && options.position.defer_loading )
                $(window).bind( 'load.wp-pointers', setup );
            else
                $(document).ready( setup );

        })( jQuery );
        </script>
        <?php
    }


    /**
     * Display a pointer for wp500_isrc_pointer
     *
     * @since 4.9.6
     */
    public static function pointer_wp500_isrc_pointer() {
        $content  = '<h3>' . __( 'Personal Data and Privacy' ) . '</h3>';
        $content .= '<h4>' . __( 'Personal Data Export and Erasure' ) . '</h4>';
        $content .= '<p>' . __( 'New <strong>Tools</strong> have been added to help you with personal data export and erasure requests.' ) . '</p>';
        $content .= '<h4>' . __( 'Privacy Policy' ) . '</h4>';
        $content .= '<p>' . __( 'Create or select your site&#8217;s privacy policy page under <strong>Settings &gt; Privacy</strong> to keep your users informed and aware.' ) . '</p>';

        if ( is_rtl() ) {
            $position = array(
                'edge'  => 'right',
                'align' => 'bottom',
            );
        } else {
            $position = array(
                'edge'  => 'left',
                'align' => 'bottom',
            );
        }

        $js_args = array(
            'content'  => $content,
            'position' => $position,
            'pointerClass' => 'wp-pointer arrow-bottom',
            'pointerWidth' => 420,
        );
        self::print_js( 'wp500_isrc_pointer', '#menu-settings', $js_args );
    }

    /**
     * Prevents new users from seeing existing 'new feature' pointers.
     *
     * @since 3.3.0
     *
     * @static
     *
     * @param int $user_id User ID.
     */
    public static function dismiss_pointers_for_new_users( $user_id ) {
        add_user_meta( $user_id, 'dismissed_wp_pointers', 'wp500_isrc_pointer' );
    }
}