您现在的位置是：首页 > cms教程 > WordPress教程WordPress教程

wordpress设计单页建立公司团队页的实现方法

袁修纯2025-02-10WordPress教程已有人查阅

导读目前有很多使用wordpress开发网站的公司，都需要一个专门介绍公司团队成员的页面，可以说有许多web开发者都会遇见或者开发过此类页面，下面就来分享通过wordpress页面和字段来创

目前有很多使用wordpress开发网站的公司，都需要一个专门介绍公司团队成员的页面，可以说有许多web开发者都会遇见或者开发过此类页面，下面就来分享通过wordpress页面和字段来创建公司管理团队页面的方法，该方法由Kevin Leary.所提供，本人亲自尝试过，对于创建团队页面来说，该方法确实是一种非常高效灵活，今天借此来分享给大家。
如果你想查看最终的页面效果，可以点击查看以下链接。
团队页面效果
在wordpress中创建和管理团队页面将会涉及到以下方法
1. 自定义发布类型 Custom post type (例如 team)
2. 自定义分类 Custom taxonomy 用于筛选 (例如 department)
3. 创建一个 meta box UI 用于管理自定义字段 (例如 position, email, phone, and social media links)
下面就让我们来为wordpress主题创建一个名为 Meet Our Team 的自定义页面模版
第一步
在我们开始之前，需要澄清几件事情，以下添加的自定义发布类型 Custom post type和自定义分类 Custom taxonomy的代码将直接添加到functions.php文件中，我将详细的介绍整个添加的过程。
添加Custom post type和Custom taxonomy
第一步就是注册一个新的文章发布类型例如 team，如果你需要进行过滤或者分类你还需要注册一个taxonomy分类，例如公司部门等等。
这个新添加的文章发布类型会在wordpress admin后台添加一个新的菜单栏目，用于区分默认的文章发布类型以及页面发布类型。
自定义分类taxonomy将会为之前创建好的team posts添加一个新的分类，让你能够在team的文章发布类型中进行一定程度的分类和过滤。当你公司的团队逐渐增大时，部门越来越多时，你就会发现使用该方法的好处了。

Post Type
/**
* 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 );
Taxonomy
/**
* 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 );

在这个实例当中，是否创建Taxonomy取决与你个人的需要，之所以创建它是因为它可以帮助我们更好的理解和筛选团队部门。
Meta Box自定义字段
现在我们在wordpress中已经拥有了一个新的Team Profiles菜单，我们现在开始需要在每一个团队发布页面中添加自定义字段，在以往大部分的公司项目中，团队介绍页面一般需要以下几个重要的字段
Position
Email
Phone
Twitter
LinkedIn
为了管理内容，我倾向于为团队发布页面添加一个新的可编辑的自定义字段UI页面，方便管理员和作者随时添加自定义字段和修改字段内容。
现在向大家推荐一个目前流行的自定义字段插件Advanced Custom Fields (ACF) plugin，这是一个非常实用的自定义字段插件，使用也简单功能强大，你可以轻松的为各种文章发布类型添加自定义字段，关键是非常容易管理。
如果你想创建 meta box 你需要安装 ACF plugin，安装好插件后就会在后台管理的侧边栏中出现字段栏目，今后你就可以在该栏目中添加和编辑自定义字段，以下是创建字段的效果图。
如果你像我一样懒的话，你可以选择直接导入整理好的XML文件包
1.下载acf-export-team-details.xml.zip压缩文件
2.后台工具栏目中导入xml文件
3.如果需要你应该先安装wordpress导入工具
4.选择上传.xml 文件
就这么多！
如果有不清楚或者疑问你还可以访问开发该插件作者Elliot Condon的网站
现在我们已经拥有了团队管理系统的基本设置，接下来我们还需要一个自定义页面模版用来专门显示团队信息，例如创建一个template-team.php的页面模版，要了解关于自定义页面模版可以参考WordPress.org的自定义模版
循环和显示出团队成员信息资料
为了在template-team.php页面模版中添加和显示成员信息，因此在该模版中添加以下代码。

<?php
/**
* Template Name: Team
*/
the_post();
// Get 'team' posts
$team_posts = get_posts( array(
'post_type' => 'team',
'posts_per_page' => -1, // Unlimited posts
'orderby' => 'title', // Order alphabetically by name
) );
if ( $team_posts ):
?>
<section class="row profiles">
<div class="intro">
<h2>Meet The Team</h2>
<p class="lead">“Individuals can and do make a difference, but it takes a team
to really mess things up.”</p>
</div>
<?php
foreach ( $team_posts as $post ):
setup_postdata($post);
// Resize and CDNize thumbnails using Automattic Photon service
$thumb_src = null;
if ( has_post_thumbnail($post->ID) ) {
$src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'team-thumb' );
$thumb_src = $src[0];
}
?>
<article class="col-sm-6 profile">
<div class="profile-header">
<?php if ( $thumb_src ): ?>
<img src="<?php echo $thumb_src; ?>" alt="<?php the_title(); ?>, <?php the_field('team_position'); ?>" class="img-circle">
<?php endif; ?></div>
<div class="profile-content">
<h3><?php the_title(); ?></h3>
<p class="lead position"><?php the_field('team_position'); ?></p>
<?php the_content(); ?></div>
<div class="profile-footer">
<a href="tel:<?php the_field('team_phone'); ?>"><i class="icon-mobile-phone"></i></a>
<a href="mailto:<?php echo antispambot( get_field('team_email') ); ?>"><i class="icon-envelope"></i></a>
<?php if ( $twitter = get_field('team_twitter') ): ?>
<a href="<?php echo $twitter; ?>"><i class="icon-twitter"></i></a>
<?php endif; ?>
<?php if ( $linkedin = get_field('team_linkedin') ): ?>
<a href="<?php echo $linkedin; ?>"><i class="icon-linkedin"></i></a>
<?php endif; ?></div>
</article><!-- /.profile -->
<?php endforeach; ?>
</section><!-- /.row -->
<?php endif; ?>

为了得到 team post的文章内容，我们使用了get_posts函数，它是一种简单高效的方法，并使用了以下变量和参数来获取相应的内容。

'post_type' => 'team' 搜寻文章发布类型为 'team' 的文章
'posts_per_page' => 50 显示文章的数量上限为50
'orderby' => 'title'根据标题搜寻
'order' =>; 'ASC' 按照字母循序排列显示

一旦我们得到了想要的对象，我们就可以通过循环每一篇发布类型为 team 的文章，就可以按照html结构输出相应的数据内容。
ACF plugin 插件中将会用到get_field和the_field两种调用方法。该方法就是插件中最常用的，当你想要输出相应字段的时候直接调用它们就好了。
一旦完成代码的添加后，我们就可以在wordpress后台选择名字为Team的自定义页面模版了。
为template-team.php页面模版文件添加独有的css样式
我们可以在function.php文件中添加一个独有的css文件

/**
* 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() . '/css/team.css' );
}
add_action( 'wp_enqueue_scripts', 'team_styles', 101 );
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;
}

大功告成
感谢您的阅读，我希望这边文章能够在一定程度上帮助大家更加高效的使用wordpress自定义字段来创建公司团队页面，对wordpress中的 Custom post types，taxonomies，和meta box 这三个重要的方法有一定程度的了解，如果有更好的方法，欢迎大家留言讨论，以下是关于这边文章完整的文件资料。