在 WordPress 中创建“团队成员”页面

以下是 Kevin Leary 的客座文章。我很高兴收到 Kevin 的这篇客座文章投稿，因为它是我最喜欢的教程类型：实用且详细。

我使用 WordPress 开发的几乎每个自定义主题都需要一个管理团队或 团队成员页面。如果让我猜测，我会说我构建了大约 50 种不同的设置。我意识到，一定还有许多其他 WordPress 开发人员也在创建类似的系统。因此，我将分享我通常用于在 WordPress 中构建和管理“团队成员”页面的方法。

对于那些只想查看最终产品的人，可以查看 Github 上的 PHP 类或查看示例。

查看示例   Github 上的代码库

在 WordPress 中创建和管理这样的团队页面涉及以下工具组合

• 自定义帖子类型（例如 team）
• 用于过滤的自定义分类法（例如 department）
• 用于管理自定义字段的元框 UI（例如职位、电子邮件、电话和社交媒体链接）

使用这些工具，让我们逐步了解为自定义 WordPress 主题创建“认识我们的团队”模板的过程。

首先

在我们开始之前，我应该澄清一些事情。在本教程的 Github 示例中，我使用了面向对象的方法，并将我的代码存储在一个单独的 .php 文件中，我通常将其包含在主题的 functions.php 文件中。

为了清楚起见，我将逐步描述该过程，并参考在您的 functions.php 中进行设置。

创建帖子类型和分类法

第一步是注册一个新的帖子类型（例如 team）。如果需要过滤或分类，您还可以注册一个分类法（例如 department）。

此帖子类型将在 WordPress 后台添加一个新的团队简介菜单，将所有团队帖子与帖子和页面分开，以便于内容管理。

分类法将为团队帖子添加一个自定义类别，允许您过滤或对团队进行分类。当您拥有一个超过十人的团队时，我发现这是合适的。它通常方便按办公地点或部门过滤员工。

帖子类型

/**
 * Register `team` post type
 */
function team_post_type() {
   
   // Labels
    $labels = array(
        'name' => _x("Team", "post type general name"),
        'singular_name' => _x("Team", "post type singular name"),
        'menu_name' => 'Team Profiles',
        'add_new' => _x("Add New", "team item"),
        'add_new_item' => __("Add New Profile"),
        'edit_item' => __("Edit Profile"),
        'new_item' => __("New Profile"),
        'view_item' => __("View Profile"),
        'search_items' => __("Search Profiles"),
        'not_found' =>  __("No Profiles Found"),
        'not_found_in_trash' => __("No Profiles Found in Trash"),
        'parent_item_colon' => ''
    );
    
    // Register post type
    register_post_type('team' , array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => false,
        'menu_icon' => get_stylesheet_directory_uri() . '/lib/TeamProfiles/team-icon.png',
        'rewrite' => false,
        'supports' => array('title', 'editor', 'thumbnail')
    ) );
}
add_action( 'init', 'team_post_type', 0 );

可选分类法

/**
 * Register `department` taxonomy
 */
function team_taxonomy() {
    
    // Labels
    $singular = 'Department';
    $plural = 'Departments';
    $labels = array(
        'name' => _x( $plural, "taxonomy general name"),
        'singular_name' => _x( $singular, "taxonomy singular name"),
        'search_items' =>  __("Search $singular"),
        'all_items' => __("All $singular"),
        'parent_item' => __("Parent $singular"),
        'parent_item_colon' => __("Parent $singular:"),
        'edit_item' => __("Edit $singular"),
        'update_item' => __("Update $singular"),
        'add_new_item' => __("Add New $singular"),
        'new_item_name' => __("New $singular Name"),
    );

    // Register and attach to 'team' post type
    register_taxonomy( strtolower($singular), 'team', array(
        'public' => true,
        'show_ui' => true,
        'show_in_nav_menus' => true,
        'hierarchical' => true,
        'query_var' => true,
        'rewrite' => false,
        'labels' => $labels
    ) );
}
add_action( 'init', 'team_taxonomy', 0 );

自定义字段的元框

现在我们在 WordPress 中有了新的团队简介菜单，我们需要自定义与每个团队帖子一起存储的数据。根据我的经验，大多数团队简介都有以下字段

• 职位
• 电子邮件
• 电话
• 推特
• 领英

为了管理此内容，我喜欢自定义团队帖子类型的添加新内容和编辑UI，允许网站管理员和作者直观地更新此信息，无需培训。

我目前用于创建自定义字段元框 UI 的工具是 Advanced Custom Fields (ACF) 插件。

要创建此元框，您需要安装 ACF 插件，在自定义字段后台菜单下创建您的字段。以下是本教程中我使用的字段和设置。

如果您像我一样懒惰，可以 导入我的 XML 导出文件来自动化字段创建过程。操作方法如下

1. 下载我的“团队详细信息”字段组导出文件：acf-export-team-details.xml.zip
2. 导航到工具 » 导入并选择 WordPress
3. 如果出现提示，请安装 WP 导入插件
4. 上传并导入 .xml 文件
5. 选择您的用户并忽略导入附件
6. 就是这样！

ACF 插件将其数据存储在自定义帖子类型中，因此可以使用标准的 WordPress XML 导入工具。插件作者 Elliot Condon 的一个非常聪明的举动。

其他

在我的 PHP 类中，我添加了一个管理通知，如果尚未安装 ACF 插件，它将提示您安装。这提供了一个很好的提醒，您需要它才能使团队帖子类型正常工作。

自定义模板

现在我们已经设置了团队管理系统，我们需要在网站上的某个位置输出团队简介。为此，我通常会创建一个自定义主题模板（例如 template-team.php），该模板会更改特定 WordPress 页面的视图。查看 WordPress.org 上的文档以了解有关 自定义模板 的详细信息。

循环显示团队帖子

要在我们的自定义模板中输出团队帖子，我们将使用以下代码。

 'team',
    'posts_per_page' => -1, // Unlimited posts
    'orderby' => 'title', // Order alphabetically by name
) );

if ( $team_posts ):
?>

团队成员

“个人可以并且确实会产生影响，但需要一个团队
才能真正搞砸事情。”

ID) ) { $src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘team-thumb’ ); $thumb_src = $src[0]; } ?>

为了获取 team 帖子的循环，我使用了 get_posts 函数。它简单易用且高效。我使用了以下参数来定位和组织查询结果

• 'post_type' => 'team' 将只查询团队帖子
• 'posts_per_page' => 50 将返回所有团队简介，假设您少于 50 个。如果您计划拥有更多，请相应调整。
• 'orderby' => 'title' 将按名称对结果进行排序
• 'order' =>; 'ASC' 将按字母顺序开始排序

获得查询对象后，我们将遍历每个团队帖子，将其数据和内容输出到我们的 HTML 结构中。

get_field 和 the_field 函数是 ACF 插件的内置函数。这可能是您在使用它时会发现的两个最常见的函数。它们输出给定自定义字段的值。

循环完成后，我们可以在 WordPress 中创建一个新的页面，从自定义模板下拉列表中选择团队。当您查看此页面时，您应该会看到团队简介的列表。

性能说明

在没有任何缓存的情况下，这段代码会向页面添加多达 26 个查询。如果您有一个流量很大的网站，则需要利用 Transients API 来缓存此类密集型自定义查询的输出。我在我的 PHP 类中包含了一个静态 display() 方法，该方法处理瞬态缓存。

if ( $team_profiles = TeamProfiles::display() )
  echo $team_profiles;

display() 方法使用输出缓冲和瞬时缓存来存储和缓存我们的团队循环生成的 HTML。

使用这种方法而不是我们之前的循环，可以将查询次数减少到 1 次，节省了 25 次数据库访问。这还可以将初始页面加载时间缩短 400-500 毫秒。不错！

使用 CSS 样式化模板

现在我们已经建立了团队页面管理系统并输出了 HTML 结构，我们需要为我们的新模板添加一些样式。

有条件地加载 CSS

要仅为我们的自定义模板 (template-team.php) 包含样式表，我们可以使用以下条件检查。

/**
 * Load CSS for template-team.php
 */
function team_styles() {
    if ( is_page_template('template-team.php') )
    wp_enqueue_style( 'team-template', get_stylesheet_directory_uri() . '/assets/css/team.css' );
}
add_action( 'wp_enqueue_scripts', 'team_styles', 101 );

当使用 template-team.php 时，这将加载一个 CSS 文件 (/assets/css/team.css)。使用此方法有助于保持核心样式表的简洁。

示例样式

以下是我在此教程随附的示例中使用的样式。

/* ==============================================
   Team profiles
   ============================================== */
.profiles {
  margin-bottom: -20px;
}
.intro {
  padding-left: 140px;
}
.intro h2 {
  margin: 0 0 7px;
}
.intro .lead {
  line-height: 120%;
  font-size: 1.1em;
  font-style: italic;
  margin: 0 0 35px;
}
.profile {
  position: relative;
  margin: 0 0 20px;
}
.profile:nth-child(even) {
  clear: left;
}
.profile-header {
  position: absolute;
  top: 0;
}
.profile-header img {
  float: left;
}
.profile-content {
  font-size: 14px;
  padding: 27px 20px 0 0;
  line-height: 1.4em;
  margin: 0 0 0 125px;
}
.profile-content h3 {
  margin: 0;
}
.profile-content .lead {
  font-size: 1.3em;
  line-height: 100%;
  font-style: italic;
  margin: 3px 0 20px;
}
.profile-content:before {
  content: '';
  width: 36px;
  height: 3px;
  background: #dededc;
  position: absolute;
  top: 0;
}
.profile-content p {
  margin: 0 0 10px;
}
.profile-footer {
  position: absolute;
  top: 121px;
  width: 100px;
  text-align: center;
}
.profile-footer a {
  line-height: 18px;
  margin: 0 3px;
  display: inline-block;
}
.profile-footer a:hover i {
  color: #595959;
}
.profile-footer a:active i {
  color: #000;
}
.profile-footer i {
  font-size: 18px;
  position: relative;
}
.profile-footer i.icon-envelope {
  font-size: 16px;
  top: -1px;
}
.profile-footer i.icon-linkedin {
  font-size: 16px;
  top: -1px;
}

在我的项目工作流程中，我使用 LESS 预处理我的 CSS。如果您想在您的项目中使用 LESS，下面是 LESS 格式的 CSS。

/* ==================================================
   Team profiles
   ================================================== */
  
// Mixins
.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

// Global
.profiles {
    margin-bottom: -20px; // Offset adjustment
}
.intro {
    padding-left: 140px;
    h2 {
        margin: 0 0 7px;
    }
    .lead {
        line-height: 120%;
        font-size: 1.1em;
        font-style: italic;
        margin: 0 0 35px;
    }
}
.profile {
    position: relative;
    margin: 0 0 20px;
    &:nth-child(even) {
        clear: left;
    }
}

// Header
.profile-header {
    position: absolute;
    top: 0;
    img {
        float: left;
    }
}

// Content
.profile-content {
    font-size: 14px;
    padding: 27px 20px 0 0;
    line-height: 1.4em;
    margin: 0 0 0 125px;
    h3 {
        margin: 0;
    }
    .lead {
        font-size: 1.3em;
        line-height: 100%;
        font-style: italic;
        margin: 3px 0 20px;
    }
    // Top separator
    &:before {
        content: '';
        width: 36px;
        height: 3px;
        background: #dededc;
        position: absolute;
        top: 0;
    }
    p {
        margin: 0 0 10px;
    }
}

// Footer
.profile-footer {
    position: absolute;
    top: 121px;
    width: 100px;
    text-align: center;
    a {
        line-height: 18px;
        margin: 0 3px;
        display: inline-block;
    }
    a:hover i { color: #595959; }
    a:active i { color: #000; }
    i {
        font-size: 18px;
        position: relative;
    }
    i.icon-envelope {
        font-size: 16px;
        top: -1px;
    }
    i.icon-linkedin {
        font-size: 16px;
        top: -1px;
    }
}

太棒了，你做到了！

感谢您的阅读，我希望本教程能使您深入了解如何在 WordPress 中创建团队简介/遇见团队/团队资料管理系统。如果您理解本文中解释的基本概念，那么您现在应该拥有了一种宝贵的管理 WordPress 自定义内容的新方法。

自定义帖子类型、分类法和元框管理的自定义字段为管理许多复杂的 WordPress CMS 场景提供了一种强大的方法。