如何使用WordPress开发会员网站：第1部分

最新推荐文章于 2024-09-15 19:46:31 发布

cunjie3951

最新推荐文章于 2024-09-15 19:46:31 发布

阅读量433

点赞数

文章标签： java python php vue css ViewUI

WordPress已经附带了很多好东西，可以用来制作会员网站。不幸的是，大多数过程都是通过网站后端处理的，理想情况下，我们希望使用户远离管理区域。因此，在这个由三部分组成的系列文章中，我们将把这个过程移到站点的最前面，进行一些自定义，并逐步进行样式设置。

在本系列的最后，您应该有一个网站，人们可以在该网站上注册，登录和编辑自己的帐户详细信息。由于主题如此广泛，我们无法涵盖所有内容，但我会尽力为您提供一个会员网站的坚实基础。

简而言之，这是对本系列的期望：

第一部分 ：注册和登录表格
第二部分 ：将自定义字段添加到注册表单
第三部分 ：开发“用户个人资料”部分

现在，在我们开始之前，有一个很好的论据可以将此代码作为插件进行制作—毕竟，它是很实用的。但是由于我们将要进行的“ 主题化 ”工作量很大，因此将代码存放在我们的主题中是完全合理的。

让我们来挖

作为WordPress开发人员，我将Sage用作入门主题，因此我将使用它进行开发。如果您以前没有使用过Sage（以前称为Roots），则由于使用Bower和Gulp会有一些学习上的困难，因此您需要具有一些使用它们的经验。说了这么多，您就可以轻松地将此处的原理应用于任何主题。关于入门主题，还有很多要说的，但让我们将其保存一段时间。

因此，让我们进入您网站的注册部分，不再拖延。基本上有两种方法，而我都尝试过。第一个是开发自定义表格并自行处理注册，第二个是扩展本机注册和登录表格。我更喜欢后者，这就是为什么：原生总是更好，它更易于维护，并且运动部件少得多。

使用本机表单进行登录和注册的一个缺点是您获得本机URL： http : //AnExampleDomain.com/wp-admin和http://AnExampleDomain.com/login/?register 。

不用担心，因为有重写它们的方法，所以这显然不是一个WordPress网站。

整理房子

我喜欢保持整洁的状态，因此在我的functions.php中将包含一个名为admin.php的文件，该文件将包含我们所有与管理员相关的功能。下面的代码（第12行）是使用Sage WP Starter Theme时如何包含文件的代码。

<?php

$sage_includes = [
    'lib/utils.php',                 // Utility functions.
    'lib/init.php',                  // Initial theme setup and constants.
    'lib/wrapper.php',               // Theme wrapper class.
    'lib/conditional-tag-check.php', // ConditionalTagCheck class.
    'lib/config.php',                // Configuration.
    'lib/assets.php',                // Scripts and stylesheets.
    'lib/titles.php',                // Page titles.
    'lib/nav.php',                   // Custom nav modifications.
    'lib/gallery.php',               // Custom [gallery] modifications.
    'lib/admin.php',                 // All our admnin tweaks (added).
    'lib/membership.php'             // The functions to aid membership (added). 
];

foreach ( $sage_includes as $file ) {
    
    if ( ! $filepath = locate_template( $file ) ) {
        
        trigger_error( sprintf( __( 'Error locating %s for inclusion', 'sage' ), $file ), E_USER_ERROR );
    }

    require_once $filepath;
    
}

unset( $file, $filepath );

如果您不使用Sage，则可以使用以下方法：

require_once locate_template( '/lib/admin.php' );

旁注：这与本主题无关，但是我建议您在functions.php中包含多个include，然后在相应的文件中进行编码。它使文件更整洁和可读。

我们将把我们的管理资产（CSS和图像）保存在单独的admin目录中。这是可选的，但是如果使用其他结构，请记住在引用这些文件时更改路径。

让我们从CSS开始

我们要覆盖WordPress已应用于登录和注册页面的样式。

因此，为此，我们需要在主题中包含样式表。在WordPress中执行此操作的方法是使用wp_enqueue_style函数。

因此，计划是为每个表单加载不同的样式表。为此，我们将检查传递的GET参数并加载相应的样式。如果您在想，“ GET参数到底是什么？” 那不用担心基本上是URL。为了我们正在做的事情，这就是您真正需要知道的全部。

因此逻辑是：如果URL为x，则加载x样式表，如果URL为y，则加载y样式表。因此，创建一个admin.php文件并将此代码复制到其中，然后将其保存在lib文件夹中。

<?php

function tutsplus_admin_css() {
    if ( $_GET['action'] === 'register' ) {
		wp_enqueue_style( 'register_css', get_template_directory_uri() . '/admin/css/register-form.css' );
	} else {
		wp_enqueue_style( 'login_css', get_template_directory_uri() . '/admin/css/custom-login.css' );
	}
}
add_action('login_head', 'tutsplus_admin_css');

我们在这里使用login_head操作将样式加载到登录页面上。为此专门设计了该动作。如果您不熟悉WordPress中的操作和过滤器，建议您花一些时间来学习它们。它们是WordPress开发的Struts。

现在介绍CSS本身。为了保持本教程的范围，我们将只编写原始CSS。没有少或无礼。 DOM在这些页面上并没有真正给我们带来太多帮助，因此我们需要有一点技巧。

要添加页眉和页脚类型样式，让我们before和after使用伪元素。我从http://unsplash.com抓取了一张图片作为我们登录页面的背景。这是一个很好的资源，但缺乏搜索功能。幸运的是，亚瑟·威尔（Arthur Weill ）创造了一种搜索图像的工具。

您可以获取或查看以下CSS文件：

本CSS仅作为指南。要点如下：

要获得页眉/页脚，请after伪元素before和after使用。
使用媒体查询来确保表格可以很好地缩小。您可能希望将它们用于模式/ iframe或从平板电脑或手机登录。

一些画龙点睛

我们页面上的徽标链接到http://wordpress.org ，这并不理想。幸运的是WordPress有一个方便的过滤器，我们可以用来更改它， login_headerurl 。因此，让我们将此片段包含在我们的admin.php中。

<?php

function tutsplus_the_url( $url ) {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'tutsplus_the_url' );

另一件事是，在我们的注册页面上有一些介绍文字。它的信息不是很丰富： “注册本网站” 。我们也进行调整。再次有一个动作（ login_message ）可以挂接并更改它。它不像以前的过滤器那么简单，但是使用PHP函数strpos，我们可以检查某些副本（ “ Register” ），然后返回修改后的副本。

<?php

function tutsplus_register_intro_edit($message) {
    if (strpos($message, 'Register') !== FALSE) {
		$register_intro = "Become a member. It's easy! Fill in the form below.";
		return '<p class="message register">' . $register_intro . '</p>';
	} else {
		return $message;
	}
}
add_action('login_message', 'tutsplus_register_intro_edit');

最后但同样重要的是，让我们更改这些URL。有很多方法可以做到这一点。您可以使用.htaccess，但我喜欢使用iThemes安全插件。在设置中，您可以将URL更改为您的管理区域。我将我的更改为/log‑in 。您可以使用该插件做很多其他的事情，所以我建议您检查一下。