本教程将指导您如何在WordPress前端，根据当前登录用户是否为正在浏览文章的作者，有条件地显示特定元素。我们将通过WordPress内置函数和钩子，实现对用户专属内容的精确控制，确保只有文章作者才能看到个性化操作按钮，提升用户体验和网站安全性。
在wordpress开发中，经常需要根据用户的身份或权限来显示不同的内容或功能。一个常见的场景是，当用户访问一个特定类型的文章（例如用户个人资料页，通常是一个自定义文章类型）时，如果当前登录的用户正是该文章的作者，我们就希望显示一个编辑按钮或其他专属操作。本教程将详细介绍如何实现这一功能，确保只有文章的真正作者才能看到这些敏感或个性化的元素。
核心实现原理
要实现这一功能，我们需要在WordPress的页面加载过程中，执行以下判断：
- 判断当前页面是否为单篇文章页： 确保我们的逻辑只在浏览具体文章时执行，而不是在归档页、主页或其他页面。
- 获取当前文章的作者ID： 确定当前正在浏览的文章是由哪位用户发布的。
- 获取当前登录用户的ID： 确定是哪位用户正在访问网站。
- 比较两个ID： 如果文章作者ID与登录用户ID一致，则执行显示操作。
我们将通过WordPress的内置函数和钩子来完成这些判断和操作。
实现步骤与代码示例
将以下代码添加到您当前活动主题的 functions.php 文件中。
<?php
/**
* 根据当前登录用户是否为文章作者，动态显示特定元素。
*
* 此函数通过检查当前页面是否为单篇文章页，并比较文章作者ID与当前登录用户ID，
* 如果两者匹配，则在页面头部注入CSS，使预设的编辑按钮可见。
*/
function current_user_is_post_author_conditional_display() {
// 确保当前页面是单篇文章页（包括自定义文章类型）
if ( is_single() ) {
// 声明全局的 $post 对象，以便访问当前文章的信息
global $post;
// 检查是否有文章对象且文章作者ID与当前登录用户ID一致
if ( isset( $post->post_author ) && get_current_user_id() == $post->post_author ) {
?>
<style type="text/css">
/* 当登录用户是文章作者时，显示具有 #profile_edit_button ID的元素 */
#profile_edit_button {
display: flex !important; /* 使用 flex 布局，确保元素可见 */
}
</style>
<?php
}
}
}
// 将函数挂载到 'wp_head' 动作钩子，确保在 <head> 标签内输出CSS
add_action( 'wp_head', 'current_user_is_post_author_conditional_display' );
?>
代码解析：
- current_user_is_post_author_conditional_display() 函数： 这是我们自定义的函数，包含了所有的逻辑。
- if ( is_single() )： 这是一个条件标签，用于判断当前页面是否为任何类型的单篇文章（包括默认文章、页面和所有自定义文章类型）的详情页。这避免了在列表页或归档页等不相关的页面执行此逻辑。
- global $post;： 在WordPress中，$post 是一个全局变量，它包含了当前正在循环或显示的文章对象。通过 global $post;，我们可以在函数内部访问到这个全局变量。
-
if ( isset( $post->post_author ) && get_current_user_id() == $post->post_author )：
- isset( $post->post_author )：一个安全检查，确保 $post 对象存在且包含 post_author 属性。
- get_current_user_id()：这是一个WordPress函数，用于获取当前登录用户的ID。如果用户未登录，它将返回 0。
- $post->post_author：这是当前文章对象的属性，存储了文章作者的用户ID。
- 通过 == 运算符比较这两个ID，如果它们相等，则表示当前登录用户就是正在浏览的文章的作者。
-
：
当条件满足时，这段代码会直接输出一个 - #profile_edit_button { display: flex !important; }： 这段CSS规则会覆盖掉 #profile_edit_button 元素的默认 display: none; 样式，使其可见。!important 关键字用于确保此规则具有最高的优先级，能够覆盖其他可能存在的样式。
- add_action( ‘wp_head’, ‘current_user_is_post_author_conditional_display’ );： 这行代码将我们的函数挂载到 wp_head 动作钩子。wp_head 钩子在HTML文档的 部分关闭之前触发，是输出CSS或JavaScript的理想位置。
前端HTML/CSS配合
为了使上述代码生效，您需要在前端页面中拥有一个ID为 profile_edit_button 的元素，并且默认情况下将其隐藏。例如：
<div id="profile_edit_button" style="display: none;">
<a href="/edit-profile">编辑我的资料</a>
</div>
或者在您的CSS文件中默认隐藏：
#profile_edit_button {
display: none;
}
注意事项与最佳实践
-
代码放置位置： 强烈建议将此代码放置在您当前活动主题的 functions.php 文件中。如果您使用的是子主题，请将其放在子主题的 functions.php 中，以避免主题更新时代码丢失。
-
display: flex !important; 的选择： 示例中使用 display: flex 是为了让按钮以弹性盒模型显示，您可以根据您的布局需求选择 display: block、display: inline-block 或其他合适的 display 值。!important 确保了样式能成功覆盖。
-
安全性考虑： 这种通过CSS隐藏/显示元素的方法，虽然简单有效，但它仅仅是前端的视觉隐藏。有经验的用户仍然可以通过浏览器开发者工具查看或修改CSS来发现或显示被隐藏的元素。如果您的“编辑按钮”链接指向的是一个敏感操作，并且该操作的后端没有做严格的用户权限验证，那么这种前端隐藏方式是不够安全的。务必确保后端处理（例如表单提交、数据更新）也进行了严格的用户权限检查，防止未授权访问。
-
缓存插件： 如果您的网站使用了缓存插件（如WP Super Cache, W3 Total Cache, LiteSpeed Cache等），这些插件可能会缓存页面内容，导致动态生成的CSS无法实时生效。在这种情况下，您可能需要配置缓存插件，排除包含此逻辑的页面，或者在用户登录后禁用页面缓存。对于更复杂的场景，可能需要考虑使用AJAX请求来动态加载内容，或者在服务器端渲染时直接判断并输出HTML，而不是通过CSS来控制显示。
-
替代方案： 对于更复杂的权限控制，或当您需要根据多种条件来显示不同内容时，可以考虑使用WordPress的条件标签（Conditional Tags）和current_user_can()函数，结合模板文件中的PHP逻辑直接控制HTML的输出，而不是仅仅通过CSS来隐藏/显示。例如：
<?php global $post; if ( is_single() && isset( $post->post_author ) && get_current_user_id() == $post->post_author ) { // 直接输出HTML，如果条件不满足则不输出 ?> <div id="profile_edit_button"> <a href="/edit-profile">编辑我的资料</a> </div> <?php } ?>登录后复制这种方式更彻底，因为如果条件不满足，HTML元素根本不会被发送到客户端，提高了安全性。然而，它要求您直接修改主题模板文件。本教程中的方法适用于不修改模板文件，仅通过注入CSS来控制显示的情况。
总结
通过将自定义函数挂载到 wp_head 钩子，并利用 is_single()、global $post 和 get_current_user_id() 等WordPress核心功能，我们可以高效且优雅地实现在WordPress前端根据文章作者身份动态显示特定元素的需求。这不仅提升了用户体验，也为网站的个性化功能提供了基础。在实际应用中，请务必结合安全性和性能考虑，选择最适合您项目需求的方法。
以上就是WordPress：动态显示用户专属内容——判断文章作者与登录用户的详细内容，更多请关注php中文网其它相关文章！