olami 自定义上下文_将上下文帮助选项卡添加到自定义帖子类型屏幕

迈不过友情╰ 2022-12-03 09:22 86阅读 0赞

olami 自定义上下文

That little “Help” tab that sits in the top-right corner of the WordPress admin dashboard which, when clicked, reveals helpful information about the various admin pages and how they work is referred to as a contextual help tab.

位于WordPress管理仪表板右上角的那个小“帮助”选项卡在单击时会显示有关各种管理页面及其工作方式的有用信息，称为上下文帮助选项卡。

It is *contextual* because the information it displays pertains to the admin page that is currently being viewed.

这是*上下文相关的，*因为它显示的信息与当前正在查看的管理页面有关。

For example, when the contextual help tab is clicked while in the post edit screen, information on how perform several tasks is revealed, including the following examples:

例如，在后编辑屏幕中单击上下文帮助选项卡时，将显示有关如何执行多个任务的信息，包括以下示例：

*  How to customize the screen display
    
    如何自定义屏幕显示
 *  How to enter post title and content
    
    如何输入帖子标题和内容
 *  How to insert media files to the post content
    
    如何将媒体文件插入帖子内容
 *  How to turn comments and pings on or off
    
    如何打开或关闭评论和ping

![Contextual Help Tab - Post Screen][]

If you are a plugin or theme developer, this will be useful in providing quick documentation to your users which in turn reduces support questions from your customers. *If you are looking to learn about theme development, take a look at the [WordPress Theme Development][] course on SitePoint Premium*

如果您是插件或主题开发人员，这将有助于向用户提供快速文档，从而减少客户的支持问题。 *如果您想学习主题开发，请参阅SitePoint Premium上的[WordPress主题开发][WordPress Theme Development]课程。*

When a custom post type and a theme or plugin settings page is created, there exist no default contextual help tab. Therefore, in this tutorial, you will learn how to add one to the above mentioned admin pages.

创建自定义帖子类型和主题或插件设置页面时，不存在默认的上下文帮助选项卡。 因此，在本教程中，您将学习如何向上述管理页面添加一个。

## 将“上下文帮助”选项卡添加到帖子类型屏幕 **(**Adding Contextual Help Tab to Post Type Screens**)** ##

The `add_help_tab()` and `set_help_sidebar` methods of the [WP\_Screen][WP_Screen] class are used to add a contextual help menu and a sidebar to the help tab in an admin page.

[WP\_Screen][WP_Screen]类的`add_help_tab()`和`set_help_sidebar`方法用于在管理页面的帮助选项卡中添加上下文帮助菜单和侧边栏。

The function below will add three menus to the contextual help tab of an admin page.

下面的功能会将三个菜单添加到管理页面的上下文帮助选项卡中。

For now, the `sp_help_tabs` function won’t show up in any admin page because you have yet to define the page(s) where it will be displayed.

目前， `sp_help_tabs`函数不会显示在任何管理页面中，因为您尚未定义显示该页面的页面。

function sp_help_tabs() {
 
 $screen = get_current_screen();
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_overview',
 'title' => 'Overview',
 'content' => 'Overview of your plugin or theme here'
 )
 );
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_faq',
 'title' => 'FAQ',
 'content' => 'Frequently asked questions and their answers here'
 )
 );
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_support',
 'title' => 'Support',
 'content' => 'For support, shoot us a mail via me@w3guy.com'
 )
 );
 }

Below is a screenshot of the contextual help tab when added to an admin page.

以下是添加到管理页面时上下文帮助选项卡的屏幕截图。

![Custom Contextual Help Tab][]

The function `get_current_screen()` returns a `WP_Screen` object of the admin page currently being viewed, and its value saved to the `$screen` variable.

函数`get_current_screen()`返回当前正在查看的管理页面的`WP_Screen`对象，并将其值保存到`$screen`变量中。

The `add_help_tab()` method, which accepts the below parameters, is called three times to add three menus to the contextual help for the screen.

接受以下参数的`add_help_tab()`方法被调用三次，以将三个菜单添加到屏幕的上下文帮助中。

*  **id**: a unique ID for the tab. It must be HTML-safe and shouldn’t contain empty spaces.
    
    **id** ：选项卡的唯一ID。 它必须是HTML安全的，并且不能包含空格。
 *  **title**: title for the tab.
    
    **title** ：选项卡的标题。
 *  **content**: content of the help tab. can be in plain text or HTML.
    
    **content** ：帮助选项卡的内容。 可以是纯文本或HTML。
 *  **callback**: function to be called to output the content for this page.
    
    **callback** ：将被调用以输出此页面内容的函数。

From the description of the parameters above, you can see that the third and fourth parameters are related — they deal with displaying the tab’s content. While the former is a string containing the content in plain text or HTML format, the latter is a callback function to be called that echoes or prints the tab content.

从上面参数的描述中，您可以看到第三个和第四个参数是相关的-它们处理显示选项卡的内容。 前者是包含纯文本或HTML格式内容的字符串，而后者是要调用的回调函数，该函数回显或打印选项卡内容。

The callback function accepts two arguments `$screen` and `$tab`, where the former is the `WP_Screen` object of the current page and the latter an array of `add_help_tab()` arguments and their values.

回调函数接受两个参数`$screen`和`$tab` ，其中前一个是当前页面的`WP_Screen`对象，后一个是`add_help_tab()`参数及其值的数组。

These two arguments will come in handy if you would want to display the tab content base on certain conditions. For example, you may already have the content you need to output, making it easier to just output the string. However, you might need to manipulate something to acquire that content, making the use of a callback more appropriate.

如果要在某些条件下显示选项卡内容，这两个参数将派上用场。 例如，您可能已经具有需要输出的内容，这使得仅输出字符串更加容易。 但是，您可能需要进行一些操作才能获取该内容，从而使回调的使用更加合适。

An example of the use of `callback`:

使用`callback`的示例：

function sp_help_tabs() {
 
 $screen = get_current_screen();
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_overview',
 'title' => 'Overview',
 'callback' => function ( $screen, $tab ) {
 echo 'Overview of your plugin or theme here.';
 }
 )
 );
 }

In the code above, an anonymous function is used as the callback. A named function can also be used like so:

在上面的代码中，匿名函数用作回调。 命名函数也可以这样使用：

function sp_help_tabs() {
 
 $screen = get_current_screen();
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_overview',
 'title' => 'Overview',
 'callback' => 'overview_content'
 )
 );
 }
 
 function overview_content( $screen, $tab ) {
 echo 'Overview of your plugin or theme here.';
 }

Both `content` and `callback` can be combined together with the former displayed before the latter.

`content`和`callback`都可以与前者一起显示在后者之前。

To add a sidebar to the contextual help for the screen, use `WP_Screen`‘s `set_help_sidebar` method as follows:

要将边栏添加到屏幕的上下文帮助中，请使用`WP_Screen`的`set_help_sidebar`方法，如下所示：

To add the contextual help tab to a `book` custom post type screen, hook the `sp_help_tabs` function to `load-edit.php` and `load-post.php` actions. Then, do a conditional check to ensure you are in a `book` CPT like so:

要将上下文帮助选项卡添加到`book`自定义帖子类型屏幕，请将`sp_help_tabs`函数挂接到`load-edit.php`和`load-post.php`操作。 然后，进行条件检查，以确保您像这样的`book` CPT：

add_action( "load-edit.php", 'sp_help_tabs' );
 add_action( "load-post.php", 'sp_help_tabs' );
 
 
 function sp_help_tabs() {
 
 $screen = get_current_screen();
 
 $screen_ids = array( 'edit-book', 'book' );
 
 if ( ! in_array( $screen->id, $screen_ids ) ) {
 return;
 }
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_overview',
 'title' => 'Overview',
 'content' => 'Overview of your plugin or theme here'
 )
 );
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_faq',
 'title' => 'FAQ',
 'content' => 'Frequently asked questions and their answers here'
 )
 );
 
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_support',
 'title' => 'Support',
 'content' => 'For support, shoot us a mail via me@w3guy.com'
 )
 );
 
 
 // Add a sidebar to contextual help.
 $screen->set_help_sidebar( 'This is the content you will be adding to the sidebar.' );
 }

The function `sp_help_tabs()` was hooked to`load-edit.php` and `load-post.php` actions because you want the contextual help tab to show up in the post type listing (page that list post belonging to the post type) and post edit (admin page where a post is edited, saved and published) screens.

函数`sp_help_tabs()`已挂接到`load-edit.php`和`load-post.php`操作，因为您希望上下文帮助选项卡显示在帖子类型列表(列出帖子类型的页面)中，并进行编辑(在管理员页面上编辑，保存和发布帖子)屏幕。

To be sure you are adding the contextual help tab to `book` custom post type screen, you use the `if` conditional statement inside the function to ensure that the current screen ID is either `edit-book` or `book`. *Note that the screen ID is `edit-book` and `book` in `load-edit.php` and `load-post.php` action hooks respectively.*

为确保将上下文帮助选项卡添加到`book`自定义帖子类型屏幕，请在函数内部使用`if`条件语句，以确保当前的屏幕ID是`edit-book`或`book` 。 *请注意，屏幕ID分别是`load-edit.php`和`load-post.php`操作挂钩中的`edit-book`和`book` 。*

If you want the contextual help tab displayed in `book` post listing and `edit-book` screens to be different, hook two functions containing the tab content to `load-edit.php` and `load-post.php` as follows:

如果希望在`book`帖列表和`edit-book`屏幕中显示的上下文帮助选项卡不同，则将包含选项卡内容的两个函数挂接到`load-edit.php`和`load-post.php` ，如下所示：

add_action( 'load-edit.php', 'post_listing_screen_help_tab' );
 
 /**
 * This will be added to the admin page listing all post in "book" CPT.
 */
 function post_listing_screen_help_tab() {
 
 $screen = get_current_screen();
 
 if ( 'edit-book' != $screen->id ) {
 return;
 }
 
 $screen->add_help_tab(
 array(
 'id' => 'book_review',
 'title' => 'Book Reviews',
 'content' => 'How to add a book review here'
 )
 );
 
 // Add a sidebar to contextual help.
 $screen->set_help_sidebar( 'This is the content you will be adding to the sidebar.' );
 }
 
 add_action( 'load-post.php', 'post_edit_screen_help_tab' );
 
 /**
 * This will be added to the admin page for editing a post belonging to "book" CPT.
 */
 function post_edit_screen_help_tab() {
 
 $screen = get_current_screen();
 
 if ( 'book' != $screen->id ) {
 return;
 }
 
 $screen->add_help_tab(
 array(
 'id' => 'edit_book_review',
 'title' => 'Book Review Edit',
 'content' => 'How to edit a book review entry.'
 )
 );
 
 // adds a sidebar to contextual help.
 $screen->set_help_sidebar( 'This is the content you will be adding to the sidebar.' );
 }

## 将上下文帮助选项卡添加到设置页面 **(**Adding Contextual Help Tab to Settings Pages**)** ##

Adding a help tab to a plugin or theme settings page is pretty much the same process as a post type screen added above. The only difference is the `action hook` that the function containing the contextual help tab setup will be hooked to, which in this case is the `hook_suffix` returned by `add_menu_page()`. If you are creating a top level menu or `add_submenu_page()` if it is a sub menu.

向插件或主题设置页面添加帮助标签的过程与上面添加的帖子类型屏幕几乎相同。 唯一的区别是将包含上下文帮助选项卡设置的函数`action hook`到`action hook` ，在这种情况下，该`hook_suffix`是`add_menu_page()`返回的`add_menu_page()` 。 如果要创建顶级菜单，请创建`add_submenu_page()`如果它是子菜单)。

The code below creates a top-level menu for our demo plugin and our contextual help tab added to the plugin settings page.

下面的代码为我们的演示插件创建一个顶层菜单，并将上下文帮助标签添加到插件设置页面。

add_action( 'admin_menu', 'register_plugin_page' );
 
 function register_plugin_page() {
 
 $hook_suffix = add_submenu_page( 'plugins.php', 'SitePoint Plugin', 'SitePoint', 'manage_options', 'sp-config', 'sp_plugin_page' );
 
 add_action( "load-$hook_suffix", 'sp_help_tabs' );
 }
 
 function sp_plugin_page() {
 /* Code for the settings page will go here */
 }
 
 function sp_help_tabs() {
 
 $screen = get_current_screen();
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_overview',
 'title' => 'Overview',
 'content' => 'Overview of your plugin or theme here'
 )
 );
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_faq',
 'title' => 'FAQ',
 'content' => 'Frequently asked questions and their answers here'
 )
 );
 
 $screen->add_help_tab(
 array(
 'id' => 'sp_support',
 'title' => 'Support',
 'content' => 'For support, shoot us a mail via me@w3guy.com'
 )
 );
 
 $screen->set_help_sidebar( 'This is the content you will be adding to the sidebar.' );
 }

The `hook_suffix` returned by `add_menu_page()` was saved to `$hook_suffix` variable and then used together with `load` prefix to form a `load-$hook_suffix` action which was used to include our contextual help tab — `sp_help_tabs()` — to the plugin settings page.

该`hook_suffix`通过返回`add_menu_page()`被保存到`$hook_suffix`变量，然后一起使用`load`前缀，以形成一个`load-$hook_suffix`这是用来包含我们的上下文帮助选项卡行动- `sp_help_tabs()` \-到插件设置页面。

## 结论 **(**Conclusion**)** ##

In this tutorial, we learned what a contextual help tabs is, its importance and how to implement in to WordPress post types and plugin / themes settings page screens, hopefully leading you to a decrease in support questions and technical customer assistance!

在本教程中，我们了解了上下文帮助选项卡的含义，其重要性以及如何在WordPress帖子类型和插件/主题设置页面屏幕中实施，希望可以帮助您减少支持问题和技术客户支持！

If you have any questions or contributions, leave a comment below!

如果您有任何疑问或贡献，请在下面发表评论！

> 翻译自: [https://www.sitepoint.com/contextual-help-tab-custom-post-types/][https_www.sitepoint.com_contextual-help-tab-custom-post-types]

olami 自定义上下文

[Contextual Help Tab - Post Screen]: /images/20221123/7caf9a03eeb542e89c4a829f4f7645a4.png
[WordPress Theme Development]: https://www.sitepoint.com/premium/courses/wordpress-theme-development-2931
[WP_Screen]: https://codex.wordpress.org/Class_Reference/WP_Screen
[Custom Contextual Help Tab]: /images/20221123/55a50a97f7f246e99df947466888cc98.png
[https_www.sitepoint.com_contextual-help-tab-custom-post-types]: https://www.sitepoint.com/contextual-help-tab-custom-post-types/