Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

如何使用WordPress开发会员网站:第3部分

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called How to Develop a Membership Site with WordPress.
How to Develop a Membership Site With WordPress: Part 2

Chinese (Simplified) (中文(简体)) translation by Wei Zhang (you can also view the original English article)

Final product image
What You'll Be Creating

在本系列的前面部分,我们介绍了如何自定义WordPress登录和注册表单。 然后我们在注册表单中添加了一些自定义字段。 今天,在本系列的第三部分和最后一部分中,我们将介绍如何为您网站的用户开发“我的帐户”部分,用户可以根据这些部分编辑他们的个人资料信息。

页面设置

我们要做的第一件事是创建一个页面模板来存放我们的内容。 我喜欢在页面模板前加上“模板”这个词。 所以我的文件名为template-user-profile.php,开头的PHP看起来像这样:

我已将其保存在主题目录的根目录中。 如果您不熟悉WordPress页面模板,我建议您阅读上面的链接。 它们非常方便。

现在让我们前往WordPress后端并创建一个名为“profile”的页面,并在Page Attributes元框中为其分配我们新创建的页面模板。 发布此页面后,您应该在前端有一个空白页面:http://yourdomain/profile.

User Profile

现在将一些内容注入我们的页面。 我们希望结构是页面内容(即在WordPress WYSIWYG中编写的任何内容),然后我们的配置文件表单将遵循。

从page.php获取代码并将其用作页面模板的起点通常很有帮助。 此代码根据您的主题有所不同,但它很可能包含一个循环播放某些页面内容的循环。 通常使用WordPress函数get_template_part()获取内容部分。 在检索内容的下方,让我们插入表单HTML。 所以回顾一下:

  1. 将page.php中的代码复制并粘贴到我们的页面模板中。
  2. 查找内容输出的位置。
  3. 在此之下,插入以下代码,然后我们将介绍它:

这里没有什么可疯狂的:表单使用Bootstrap标记,因为我们的主题是在Bootstrap上构建的。 其他需要注意的是表单是使用POST方法发送的,我们已经包含了一个wp_nonce_field  - 这是一种有助于防止恶意攻击的安全令牌。 如果您不熟悉WordPress的Nonce,我建议您阅读本文

检索数据

有了这个,你应该在网站的前面有一个表格,但它没有做太多。 我们希望它显示我们为登录用户提供的数据。 您可能已经注意到我们表单中的值属性正在回显一些PHP。

value="<?php echo $user_info->first_name; ?>"

现在$user_info对象不存在,因为我们还没有编写代码,所以让我们从那里开始。 将以下代码粘贴到template-user-profile.php中的表单之前。

使用一些WordPress本机函数,它获取当前用户的ID,并由此我们能够获取用户的数据。 它存储在一个名为$user_info的对象中,如上所示,我们可以非常轻松地检索用户数据。 要查看存储在该对象中的所有数据,可以像这样运行var_dump<?php var_dump($ user_info);?>。 这对于调试或仅查看您可以访问的内容非常有用。

处理数据

这个谜题还有一个最后一块,那就是处理数据,从而允许用户编辑他们的个人资料。 为了保持组织有序,我将会员代码放入一个名为membership.php的文件中。 这是在lib目录中,并已包含在我们的functions.php文件中。 完成此操作后,在代码编辑器中打开新创建的membership.php文件,然后创建将处理用户数据的函数。

首先,让我们快速浏览逻辑。 当按下提交按钮时,我们要检查我们的nonce字段是否已发送 - 这将检查数据是否来自正确的位置。

如果满足该条件,我们希望获得当前用户的ID,因为我们需要这样来存储数据。 然后我们想把我们的数据安排到WordPress喜欢的结构中 - 在这种情况下它是一个带有特定键的数组。 在保存数据之前,我们还想验证并清理它。 最后,我们希望向用户显示消息,无论是成功还是错误。

所有看起来像这样的代码:

现在您可能会注意到使用三种不同的WordPress函数保存数据:

  • update名称的update_user_meta()
  • wp_set_password()用于输入密码
  • wp_update_user()用于剩余数据

你对此提出质疑是正确的。 基本上,自定义元数据(Twitter名称)需要使用相对功能而不是通用更新用户功能进行处理。 至于密码,虽然它可以与wp_update_user()一起使用,但我遇到了问题,并且更喜欢使用这种方法。 请记住,这只是一个指南,通常代码旨在演示实现您的要求的不同方法。

好的,现在我们有了处理数据的功能,但它并没有在任何地方被调用。 在我们的功能结束时,您可以看到有与之关联的操作。 因此,要调用该函数,我们只需要使用提供的WordPress:do_action();. 因此,请在我们之前创建的用户个人资料页面模板中将此行粘贴到表单上方:

<?php do_ action ('tutsplus_process_user_profile');?>

有了这个,当我们提交表单时,它应该运行我们的函数并处理数据。

错误和成功消息

Error and Success Messages

我们的个人资料表格现在应保存或拒绝数据。 也许这两个密码不一样,也没有保存。 没有消息提供用户反馈。 让我们为用户节省一些悲伤并给他们一些消息。

在我们的tutsplus_process_user_profile()函数中,您可能已经注意到它会根据处理结果将不同的查询字符串附加到URL。 因此,如果所有内容都已保存并成功,那么我们的URL将附加?profile-updated=true,并且这些内容会根据结果而有所不同。 我们需要做的是根据这些响应触发消息。

下面我使用过滤器来抓取内容,通过$_GET的魔力,我们可以检查参数并吐出我们需要的内容。

好吧,不完全在那里 - 我们正在使用上面名为tutsplus_get_message_markup()的函数,但我们还没有定义它。 它包含两个参数:

  • 字符串:要显示的消息
  • 字符串:基于Bootstrap显示的警报的严重性

所以让我们定义我们的tutsplus_get_message_markup()函数:

很好。 现在我们的成员可以查看他们的数据是否被保存。

额外信用

所以现在我们有一个会员网站的工作原型。 WordPress附带了大部分功能,但我们对其进行了设计和调整,以使其为用户提供更好的体验。 所以,现在让我们点点'我的'并且越过'T'来改善体验。

首先,我们希望保持未登录的用户无法访问配置文件页面。 只需简单重定向到主页即可。 我已经创建了一个能够实现这一目标的功能,并且我在希望由登录用户专门访问的页面上调用它。

这是函数,它放在membership.php中:

现在我们可以简单地在我们的用户配置文件页面模板的顶部调用该函数。

接下来,我们希望将用户 - 好用户 - 用户 - 放在管理区域之外。 最重要的是,让我们删除登录用户的管理栏。 再次让我们把它放在我们的membership.php中。

最后,导航登录/注销屏幕并不容易。 让我们添加一些用户特定的导航。 我所做的是创建一个输出相关代码的函数,然后在我们的templates / header.php中调用,然后渲染主导航。

摘要

WordPress是会员申请的绝佳基础。 它已经具有与此类应用程序相关的大量功能。 最重要的是,WordPress的人们很容易挂钩事件并过滤内容,因此我们可以扩展现有的内容。

我希望这为您提供了开发自己的会员网站的方法,想法和知识。 这绝不是关于这个主题的完整指南,而是它作为基础。

欢迎任何反馈,我将尽力回答评论中的任何问题。

值得注意的事情

请注意:如果您从GitHub存储库下载代码,它将包含所有文件以使您的主题启动并运行。 这个想法是你可以抓住回购并运行必要的Gulp和Bower命令,你就会离开! 如果您只想要包含特定于此系列的代码的文件,则下面列出了这些文件:

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.