啊哈。。对WordPress指针。你知道，当谈到使用指针时，有很多复杂的感觉；）

上面的代码正确无误。但有几个问题。

@G、 M.关于pointer(\'open\') 命令立即打开所有指针。此外，您没有提供通过指针前进的方法。

我和这个问题斗争过。。并想出了我自己的方法。我在url中使用一个查询变量，将页面重新加载到要显示下一个指针的管理页面，并让jQuery处理其余部分。

WP Pointers Class

我决定把它作为一门课来写。但我首先要以增量的形式展示它，以帮助您更好地理解正在发生的事情。

Beginning the Class

// Create as a class
class testWPpointers {

    // Define pointer version
    const DISPLAY_VERSION = \'v1.0\';

    // Initiate construct
    function __construct () {
        add_action(\'admin_enqueue_scripts\', array($this, \'admin_enqueue_scripts\'));  // Hook to admin_enqueue_scripts
    }

    function admin_enqueue_scripts () {
    
        // Check to see if user has already dismissed the pointer tour
        $dismissed = explode (\',\', get_user_meta (wp_get_current_user ()->ID, \'dismissed_wp_pointers\', true));
        $do_tour = !in_array (\'test_wp_pointer\', $dismissed);
    
        // If not, we are good to continue
        if ($do_tour) {
        
            // Enqueue necessary WP scripts and styles
            wp_enqueue_style (\'wp-pointer\');
            wp_enqueue_script (\'wp-pointer\');
        
            // Finish hooking to WP admin areas
            add_action(\'admin_print_footer_scripts\', array($this, \'admin_print_footer_scripts\'));  // Hook to admin footer scripts
            add_action(\'admin_head\', array($this, \'admin_head\'));  // Hook to admin head
        }
    }

    // Used to add spacing between the two buttons in the pointer overlay window.
    function admin_head () {
        ?>
        <style type="text/css" media="screen">
            #pointer-primary {
                margin: 0 5px 0 0;
            }
        </style>
        <?php
    }

我们已经定义了类admin_enqueue_scripts.您不需要更改这些第一个函数中的任何内容。

Setting up the array of Pointer Items

下一步是定义每个指针。我们需要定义五项（最后一个指针的expept）。我们将使用数组来实现这一点。让我们看看函数：

// Define footer scripts
function admin_print_footer_scripts () {
    
    // Define global variables
    global $pagenow;
    global $current_user;
    
    //*****************************************************************************************************
    // This is our array of individual pointers.
    // -- The array key should be unique.  It is what will be used to \'advance\' to the next pointer.
    // -- The \'id\' should correspond to an html element id on the page.
    // -- The \'content\' will be displayed inside the pointer overlay window.
    // -- The \'button2\' is the text to show for the \'action\' button in the pointer overlay window.
    // -- The \'function\' is the method used to reload the window (or relocate to a new window).
    //    This also creates a query variable to add to the end of the url.
    //    The query variable is used to determine which pointer to display.
    //*****************************************************************************************************
    $tour = array (
        \'quick_press\' => array (
            \'id\' => \'#dashboard_quick_press\',
            \'content\' => \'<h3>\' . __(\'Congratulations!\', \'test_lang\') . \'</h3>\'
                . \'<p><strong>\' . __(\'WP Pointers is working properly.\', \'test_lang\') . \'</strong></p>\'
                . \'<p>\' . __(\'This pointer is attached to the "Quick Draft" admin widget.\', \'test_lang\') . \'</p>\'
                . \'<p>\' . __(\'Our next pointer will take us to the "Settings" admin menu.\', \'test_lang\') . \'</p>\',
            \'button2\' => __(\'Next\', \'test_lang\'),
            \'function\' => \'window.location="\' . $this->get_admin_url(\'options-general.php\', \'site_title\') . \'"\'  // We are relocating to "Settings" page with the \'site_title\' query var
            ),
        \'site_title\' => array (
            \'id\' => \'#blogname\',
            \'content\' => \'<h3>\' . __(\'Moving along to Site Title.\', \'test_lang\') . \'</h3>\'
            . \'<p><strong>\' . __(\'Another WP Pointer.\', \'test_lang\') . \'</strong></p>\'
            . \'<p>\' . __(\'This pointer is attached to the "Blog Title" input field.\', \'test_lang\') . \'</p>\',
            \'button2\' => __(\'Next\', \'test_lang\'),
            \'function\' => \'window.location="\' . $this->get_admin_url(\'index.php\', \'quick_press_last\') . \'"\'  // We are relocating back to "Dashboard" with \'quick_press_last\' query var
            ),
        \'quick_press_last\' => array (
            \'id\' => \'#dashboard_quick_press\',
            \'content\' => \'<h3>\' . __(\'This concludes our WP Pointers tour.\', \'test_lang\') . \'</h3>\'
            . \'<p><strong>\' . __(\'Last WP Pointer.\', \'test_lang\') . \'</strong></p>\'
            . \'<p>\' . __(\'When closing the pointer tour; it will be saved in the users custom meta.  The tour will NOT be shown to that user again.\', \'test_lang\') . \'</p>\'
            )
        );
    
    // Determine which tab is set in the query variable
    $tab = isset($_GET[\'tab\']) ? $_GET[\'tab\'] : \'\';
    // Define other variables
    $function = \'\';
    $button2 = \'\';
    $options = array ();
    $show_pointer = false;

    // *******************************************************************************************************
    // This will be the first pointer shown to the user.
    // If no query variable is set in the url.. then the \'tab\' cannot be determined... and we start with this pointer.
    // *******************************************************************************************************
    if (!array_key_exists($tab, $tour)) {
        
        $show_pointer = true;
        $file_error = true;
        
        $id = \'#dashboard_right_now\';  // Define ID used on page html element where we want to display pointer
        $content = \'<h3>\' . sprintf (__(\'Test WP Pointers %s\', \'test_lang\'), self::DISPLAY_VERSION) . \'</h3>\';
        $content .= __(\'<p>Welcome to Test WP Pointers admin tour!</p>\', \'test_lang\');
        $content .= __(\'<p>This pointer is attached to the "At a Glance" dashboard widget.</p>\', \'test_lang\');
        $content .= \'<p>\' . __(\'Click the <em>Begin Tour</em> button to get started.\', \'test_lang\' ) . \'</p>\';

        $options = array (
            \'content\' => $content,
            \'position\' => array (\'edge\' => \'top\', \'align\' => \'left\')
            );
        $button2 = __(\'Begin Tour\', \'test_lang\' );
        $function = \'document.location="\' . $this->get_admin_url(\'index.php\', \'quick_press\') . \'";\';
    }
    // Else if the \'tab\' is set in the query variable.. then we can determine which pointer to display
    else {
        
        if ($tab != \'\' && in_array ($tab, array_keys ($tour))) {
            
            $show_pointer = true;
            
            if (isset ($tour[$tab][\'id\'])) {
                $id = $tour[$tab][\'id\'];
            }
            
            $options = array (
                \'content\' => $tour[$tab][\'content\'],
                \'position\' => array (\'edge\' => \'top\', \'align\' => \'left\')
            );
                
            $button2 = false;
            $function = \'\';
            
            if (isset ($tour[$tab][\'button2\'])) {
                $button2 = $tour[$tab][\'button2\'];
            }
            if (isset ($tour[$tab][\'function\'])) {
                $function = $tour[$tab][\'function\'];
            }
        }
    }
    
    // If we are showing a pointer... let\'s load the jQuery.
    if ($show_pointer) {
        $this->make_pointer_script ($id, $options, __(\'Close\', \'test_lang\'), $button2, $function);
    }
}

好的。。让我们看看这里的一些东西。

首先，我们$tour 大堆这是一个数组，其中包含除显示给用户的第一个指针之外的所有指针（稍后将对此进行详细介绍）。因此，您需要从要显示的第二个指针开始。。并继续到最后一个指针。

接下来，我们有几个非常重要的项目。

在$tour 数组键必须唯一（quick\\u press、site\\u title、quick\\u press\\u last；如上所示）

function 命令将重新加载/重新定位窗口。这是用于显示下一个指针的内容。我们要么重新加载窗口，要么将其重新定位到下一个显示指针的管理页面get_admin_url() 具有两个变量的函数；第一个是我们下一步要去的管理页面；第二个是要显示的指针的唯一数组键

再往下，您将看到开始的代码if (!array_key_exists($tab, $tour)) {. 这是我们确定是否已设置url查询变量的地方。如果没有，那么我们需要定义要显示的第一个指针。

此指针使用完全相同的id, content, button2, and function 在我们的$tour 上面的数组。记住，的第二个参数get_admin_url() 函数必须与中的数组键完全相同$tour 变量这就是告诉脚本转到下一个指针的原因。

如果url中已经设置了查询变量，则使用该函数的其余部分。无需再调整任何功能。

Getting Admin Url下一个函数实际上是一个辅助函数。。。用于获取管理员url并前进指针。

// This function is used to reload the admin page.
// -- $page = the admin page we are passing (index.php or options-general.php)
// -- $tab = the NEXT pointer array key we want to display
function get_admin_url($page, $tab) {
    
    $url = admin_url();
    $url .= $page.\'?tab=\'.$tab;

    return $url;
}

记住，有两个论点；我们将要访问的管理页面。。和标签。选项卡将是$tour 我们要转到下一个数组键。THESE MUST MATCH.

所以，当我们调用函数get_admin_url() 并传递这两个变量；第一个变量确定下一个管理页。。第二个变量确定要显示的指针。

最后一点我们最终可以将管理脚本打印到页脚。

// Print footer scripts
function make_pointer_script ($id, $options, $button1, $button2=false, $function=\'\') {
    
    ?>
    <script type="text/javascript">
        
        (function ($) {
            
            // Define pointer options
            var wp_pointers_tour_opts = <?php echo json_encode ($options); ?>, setup;
        
            wp_pointers_tour_opts = $.extend (wp_pointers_tour_opts, {
                
                // Add \'Close\' button
                buttons: function (event, t) {
                    
                    button = jQuery (\'<a id="pointer-close" class="button-secondary">\' + \'<?php echo $button1; ?>\' + \'</a>\');
                    button.bind (\'click.pointer\', function () {
                        t.element.pointer (\'close\');
                    });
                    return button;
                },
                close: function () {
                    
                    // Post to admin ajax to disable pointers when user clicks "Close"
                    $.post (ajaxurl, {
                        pointer: \'test_wp_pointer\',
                        action: \'dismiss-wp-pointer\'
                    });
                }
            });
            
            // This is used for our "button2" value above (advances the pointers)
            setup = function () {
                
                $(\'<?php echo $id; ?>\').pointer(wp_pointers_tour_opts).pointer(\'open\');
                
                <?php if ($button2) { ?>
                    
                    jQuery (\'#pointer-close\').after (\'<a id="pointer-primary" class="button-primary">\' + \'<?php echo $button2; ?>\' + \'</a>\');
                    jQuery (\'#pointer-primary\').click (function () {
                        <?php echo $function; ?>  // Execute button2 function
                    });
                    jQuery (\'#pointer-close\').click (function () {
                        
                        // Post to admin ajax to disable pointers when user clicks "Close"
                        $.post (ajaxurl, {
                            pointer: \'test_wp_pointer\',
                            action: \'dismiss-wp-pointer\'
                        });
                    })
                <?php } ?>
            };
        
            if (wp_pointers_tour_opts.position && wp_pointers_tour_opts.position.defer_loading) {
                
                $(window).bind(\'load.wp-pointers\', setup);
            }
            else {
                setup ();
            }
        }) (jQuery);
    </script>
    <?php
}
} 
$testWPpointers = new testWPpointers();

同样，没有必要更改以上任何内容。此脚本将定义并输出指针覆盖窗口中的两个按钮。一个永远是；“关闭”；按钮并将更新当前用户元dismissed_pointers 选项

第二个按钮（操作按钮）将执行该功能（我们的窗口重新定位方法）。

我们关闭了课堂。

下面是完整的代码。WP Pointer Class

您可以将其复制/粘贴到您的开发站点，并访问；仪表板“；页它将引导你完成整个旅行。

记住，第一个指针是在代码中最后定义的，这有点令人困惑。这就是它应该工作的方式。数组将保存您希望使用的所有其余指针。

请记住，“id”数组项必须与get_admin_url() 来自上一个数组项“function”命令的函数。这就是指针相互“交谈”并知道如何前进的方式。

享受！！：）