为您的WordPress产品构建欢迎页面：代码第2部分

最新推荐文章于 2023-06-15 10:18:09 发布

cunjie3951

最新推荐文章于 2023-06-15 10:18:09 发布

阅读量281

点赞数

文章标签： python java php javascript html ViewUI

在本系列的上一篇文章中，我开始为WordPress插件构建欢迎页面。我讨论了插件架构及其功能。然后，我为其基本文件和初始化程序文件编写了代码，在其中添加了代码块，这些代码块用于基于插件激活和停用来添加和删除瞬态。

在最后一篇文章中，我将讨论其余的插件文件以及该插件的实际实现。在本文结尾处，您将敏锐地意识到为WordPress插件编写第一个欢迎页面的过程。

欢迎页面重定向的逻辑

welcome-init.php文件定义了所有相关代码，这些代码将初始化我们的欢迎页面的过程。它首先通过set_transient() （在插件激活时）和delete_transient()函数（在插件停用时）添加和删除瞬态。

话虽如此，现在我们需要一种将用户重定向到欢迎页面的方法。为了管理插件逻辑，我创建了一个单独的文件welcome-logic.php 。

让我们查看该文件的代码。

<?php

/**
 * Welcome Logic
 *
 * @since 1.0.0
 * @package WPW
 */

if ( ! defined( 'WPINC' ) ) {

    die;

}

/**
 * Welcome page redirect.
 *
 * Only happens once and if the site is not a network or multisite.
 *
 * @since 1.0.0
 */
function wpw_safe_welcome_redirect() {

    // Bail if no activation redirect transient is present.
    if ( ! get_transient( '_welcome_redirect_wpw' ) ) {

        return;

    }

  // Delete the redirect transient.
  delete_transient( '_welcome_redirect_wpw' );

  // Bail if activating from network or bulk sites.
  if ( is_network_admin() || isset( $_GET['activate-multi'] ) ) {

    return;

  }

  // Redirect to Welcome Page.
  // Redirects to `your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page`.
  wp_safe_redirect( add_query_arg( array( 'page' => 'wpw_welcome_page' ), admin_url( 'plugins.php' ) ) );

}

add_action( 'admin_init', 'wpw_safe_welcome_redirect' );

因此，正如您现在所知道的，我喜欢遵循WordPress编码和文档标准，这就是为什么其中包含大量文档的原因，同时还添加了一些文档供您理解。

有一个文件头DocBlock，用于概述文件中包含的内容。该代码以ABSPATH检查开头，如果有人尝试直接访问该插件文件，该检查将终止该插件操作。之后，我编写了用于安全重定向的代码例程。

然后，我定义了一个名为wpw_safe_welcome_redirect()的函数来处理安全重定向到欢迎页面的操作。在其中，我执行了一些if检查来监视重定向方法。如果您阅读了前面的文章，那么您会知道我定义了_welcome_redirect_wpw瞬态并将其值设置为true。我将使用相同的密钥来执行这些检查。为了更好地理解代码，您必须详细阅读上一篇文章。

让我们开始了解wpw_safe_welcome_redirect()函数中的内容。

步骤＃1：如果没有重定向瞬态，则保释

我通过get_transient()函数检查是否存在激活重定向瞬态，即_welcome_redirect_wpw瞬态。此函数用于获取瞬态值。 如果瞬变不存在，没有值或已过期，则返回值将为false。

因此，如果检索到的值不等于true ，那么我们不需要将用户重定向到欢迎页面。如果检索到的值为true并且存在激活重定向瞬态，那么让我们继续前进。

步骤2：删除重定向瞬态

如果瞬态_welcome_redirect_wpw返回true ，则意味着两件事：第一，它存在于数据库中；第二，我们尚未将用户重定向到欢迎页面。因此，让我们删除此瞬态并将用户重定向到我们的欢迎页面。

步骤＃3：如果从网络或批量站点激活，则保全

然后，我们还有另一个检查语句，确认仅在不是网络或多站点的站点上才会发生安全的欢迎页面重定向。如果插件是通过网络激活的，我们不希望重定向欢迎页面。

步骤＃4：安全重定向到欢迎页面

最后，在完成所有这些检查之后，我将用户重定向到我们的欢迎页面。 wp_safe_redirect( $location )函数执行本地重定向，并告诉服务器有关$location以重定向用户。

为了定义位置，我使用了add_query_arg()函数来检索修改后的URL查询字符串。它占用一个关联数组，该数组具有一个键值对以及位置URL。

在这种情况下，我将创建一个名为page的键，其值为wpw_welcome_page并通过admin_url()函数将其重定向到plugins.php文件。这意味着我将用户重定向到“插件”菜单内的自定义页面，并且该用户将被重定向到your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page URL。

接下来，我将整个wpw_safe_welcome_redirect()函数连接到admin_init 。

添加欢迎页面子菜单

到目前为止，我已经定义了安全重定向的过程。该位置是PLUGINS菜单内的page 。但是我还没有创建页面。现在，让我们在“ 插件”菜单中创建一个欢迎页面。

welcome-logic.php文件的其余代码为：

/**
 * Adds welcome page sub menu.
 *
 * @since 1.0.0
 */
function wpw_welcome_page() {

  global $wpw_sub_menu;

  $wpw_sub_menu = add_submenu_page(
      'plugins.php', // The slug name for the parent menu (or the file name of a standard WordPress admin page).
      __( 'Welcome Page', 'wpw' ), // The text to be displayed in the title tags of the page when the menu is selected.
      __( 'Welcome Page', 'wpw' ), // The text to be used for the menu.
      'read', // The capability required for this menu to be displayed to the user.
      'wpw_welcome_page', // The slug name to refer to this menu by (should be unique for this menu).
      'wpw_welcome_page_content' // The function to be called to output the content for this page.
  );

}

add_action( 'admin_menu', 'wpw_welcome_page' );

/**
 * Welcome page content.
 *
 * @since 1.0.0
 */
function wpw_welcome_page_content() {

    if ( file_exists( WPW_DIR . '/welcome/welcome-view.php') ) {

       require_once( WPW_DIR . '/welcome/welcome-view.php' );

    }
}

为了添加子菜单，我创建了wpw_welcome_page()函数，在其中调用了add_submenu_page()函数。

add_submenu_page()函数可在菜单内添加页面。它带有参数列表：

$ parent_slug （必需）：父菜单的段或文件名。
$ page_title （必填）：选择菜单时在页面的标题标签中显示的文本。
$ menu_title （必填）：菜单所用的文本。
$ capability （必需）：向用户显示此菜单所需的功能。
$ menu_slug （必需）：引用此菜单所依据的标签名称（此菜单应唯一）。它是wpw_welcome_page ，与我们在安全重定向功能期间定义的相同。
$ function （可选）：要输出此页面内容的回调函数。

我定义了这些参数的值，最后，我将wpw_welcome_page()函数作为add_action添加到admin_menu 。

现在我们需要处理欢迎页面的内容，为此我创建了一个wpw_welcome_page_content()函数（这是add_submenu_page()的回调函数），该函数需要welcome-view.php文件。

您可能已经注意到，我创建了一个全局变量$wpw_sub_menu ，其中包含新子菜单页面的页面屏幕ID。我们将在下一部分中使用它。

排队自定义Style.css

紧接所有这些之后，我将一个style.css文件放入队列中，以在我们的欢迎页面中自定义样式。在上面的代码中，我设置了一个全局变量$wpw_sub_menu ，其中包含sub_menu页面的屏幕ID。

我们可以在将样式文件放入队列时检查此屏幕ID，以确保仅在浏览欢迎页面时才将其排入队列，而不是在管理人员中的任何地方。那就是下面的代码在做什么。

/**
 * Enqueue Styles.
 *
 * @since 1.0.0
 */
function wpw_styles( $hook ) {

    global $wpw_sub_menu;

    // Add style to the welcome page only.
    if ( $hook != $wpw_sub_menu ) {

      return;

    }

    // Welcome page styles.
    wp_enqueue_style(
      'wpw_style',
      WPW_URL . '/welcome/css/style.css',
      array(),
      WPW_VERSION,
      'all'
    );

}

// Enqueue the styles.
add_action( 'admin_enqueue_scripts', 'wpw_styles' );

欢迎页面的逻辑已完成。您可以在GitHub上查看welcome-logic.php文件的完整代码。

欢迎页面视图

现在，欢迎页面的逻辑已经完成，您可以实际测试您创建的插件，它将重定向您到欢迎页面。剩下要做的唯一事情就是建立欢迎页面的视图。这可能是您想要的任何东西，但是出于明显的原因，我想给您一些样板。

插件HTML和CSS部分位于welcome-view.php文件中。其代码如下：

<?php

/**
 * Welcome Page View
 *
 * @since 1.0.0
 * @package WPW
 */

if ( ! defined( 'WPINC' ) ) {

    die;

}

?>

该文件的开始类似于带有DocBlock的常规PHP文件，然后是ABSPATH检查的代码，因此没有人可以直接访问该文件。之后，我为插件版本和徽标图像的路径创建了一个变量。

CSS样式

我在其中添加了一个名为css的文件夹和一个名为style.css的文件，以为欢迎页面创建一些自定义样式。该代码如下所示。这是用于修改为徽标添加的额外类的代码。（您可以按自己喜欢的方式添加它；为了使本教程简单易懂，我已经重写了WP徽标。）

/* Logo */
.svg .wp-badge.welcome__logo {
    background: url('../img/logo.png') center 24px no-repeat #0092f9;
    background-size: contain;
    color: #fff;
}

/* Responsive Youtube Video*/
.embed-container {
    height: 0;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    top: 0;
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

在那之后，我们页面HTML部分。 YouTube中嵌入了一个视频作为响应视频。

欢迎页面HTML部分类似于WordPress默认欢迎页面HTML部分。这样做的好处是我们不必编写很多CSS，并且用户已经熟悉了内置格式。

插件是WordPress的扩展。您可以通过创建插件来扩展WordPress，这就是为什么我认为您必须始终使用默认的内置外观/样式以使内容与WordPress仪表板更加一致的原因。有些插件会添加彩色图标和沉重的背景或其他内容，但最终它们最终会干扰流畅的用户体验。

我敢肯定，插件开发人员会精通HTML编程。无论如何，这是代码。

<div class="wrap about-wrap">

    <h1><?php printf( __( 'WordPress Product &nbsp; %s', 'WPW' ), WPW_VERSION ); ?></h1>

    <div class="about-text">
        <?php printf( __( "WordPress Product's welcome page boilerplate for WordPress plugins.", 'WPW' ), WPW_VERSION ); ?>
    </div>

    <div class="wp-badge welcome__logo"></div>

    <div class="feature-section one-col">
        <h3><?php _e( 'Get Started', 'WPW' ); ?></h3>
        <ul>
            <li><strong><?php _e( 'Step #1:', 'WPW' ); ?></strong> <?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'WPW' ); ?></li>
            <li><strong><?php _e( 'Step #2:', 'WPW' ); ?></strong> <?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'WPW' ); ?></li>
            <li><strong><?php _e( 'Step #3:', 'WPW' ); ?></strong> <?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'WPW' ); ?></li>
        </ul>
     </div>

    <div class="feature-section one-col">
        <h3><?php _e( 'What is Inside?', 'WPW' ); ?></h3>
        <div class="headline-feature feature-video">
            <div class='embed-container'>
                <iframe src='https://www.youtube.com/embed/3RLE_vWJ73c' frameborder='0' allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <div class="feature-section two-col">
        <div class="col">
            <img src="http://placehold.it/600x180/0092F9/fff?text=WELCOME" />
            <h3><?php _e( 'Some Feature', 'WPW' ); ?></h3>
            <p><?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.', 'WPW' ); ?></p>
        </div>
        <div class="col">
            <img src="http://placehold.it/600x180/0092F9/fff?text=WELCOME" />
            <h3><?php _e( 'Some Feature', 'WPW' ); ?></h3>
            <p><?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.', 'WPW' ); ?></p>
        </div>
    </div>

    <div class="feature-section two-col">
        <div class="col">
            <img src="http://placehold.it/600x180/0092F9/fff?text=WELCOME" />
            <h3><?php _e( 'Some Feature', 'WPW' ); ?></h3>
            <p><?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.', 'WPW' ); ?></p>
        </div>

        <div class="col">
            <img src="http://placehold.it/600x180/0092F9/fff?text=WELCOME" />
            <h3><?php _e( 'Some Feature', 'WPW' ); ?></h3>
            <p><?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.', 'WPW' ); ?></p>
        </div>
    </div>

</div>

该代码显示以下布局：

插件标题，版本，描述和徽标
步骤形式的简短入门教程
通过YouTube提供的帮助视频教程
两列的插件功能列表

在撰写本文时，您可以使用以下CSS类创建列：

.feature-section和.one-col ：创建单个列。
.feature-section和.two-col ：创建两列。
.feature-section和.three-col ：创建三列。

这样就完成了我们的插件开发。让我们在演示网站上对其进行测试。

实际执行

要在演示网站上测试该插件，您可以下载并安装WP-Welcome-Page-Boilerplate-For-TutsPlus 来自GitHub。

之后，执行以下步骤：

登录到WordPress仪表板。
转到“ 插件”菜单，然后单击“ 添加新项” 。
单击上载插件按钮，然后添加从GitHub下载的压缩文件。
安装并激活插件

瞧！是否已重定向到欢迎页面？

完成后，返回到仪表板的主页，并将鼠标悬停在“ 插件”菜单上。添加了一个名为“ 欢迎页面”的附加子菜单。再次提醒您，这是我之前创建的页面。

顺便说一下，最终的欢迎页面如下所示。

这是欢迎屏幕的完整布局。

结论

这是您可以为WordPress插件创建欢迎页面的方式。我描述了一个非常基本的实现。您可以根据需要进行修改。我建议下载welcome文件夹，并将welcome-init.php到您的产品中（请在welcome-*。php文件中更改全局常量）。

最后，您可以在我的个人资料页面上捕获我的所有课程和教程，还可以在我的博客上关注我，和/或在Twitter @mrahmadawais上与我联系，在那儿我写了有关WordPress的开发工作流的信息。

和往常一样，请不要在下面留下任何问题或评论，我将尽力回答每个问题或评论。

翻译自: https://code.tutsplus.com/articles/building-a-welcome-page-for-your-wordpress-product-code-part-2--cms-26059

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为您的WordPress产品构建欢迎页面：代码第2部分

在本系列的上一篇文章中，我开始为WordPress插件构建欢迎页面。我讨论了插件架构及其功能。然后，我为其基本文件和初始化程序文件编写了代码，在其中添加了代码块，这些代码块用于基于插件激活和停用来添加和删除瞬态。在最后一篇文章中，我将讨论其余的插件文件以及该插件的实际实现。在本文结尾处，您将敏锐地意识到为WordPress插件编写第一个欢迎页面的过程。欢迎页面重定向的逻辑 w...
复制链接

扫一扫