Creación de una página "Conozca al equipo" en WordPress | Programar Plus ▷ Tutoriales

La siguiente es una publicación invitada de Kevin Leary. Me entusiasmó mucho recibir esta publicación de invitado de Kevin porque es mi tipo de tutorial favorito: práctico y detallado.

Casi todos los temas personalizados que desarrollo con WordPress requieren un equipo de administración o una página para conocer al equipo. Si tuviera que adivinar, diría que construí alrededor de 50 configuraciones diferentes. Se me ocurrió que debe haber muchos otros desarrolladores de WordPress creando sistemas similares también. Por esta razón, compartiré el enfoque que suelo usar para crear y administrar una página de “Conozca al equipo” en WordPress.

Para aquellos de ustedes que solo quieren el producto final, consulten la clase de PHP en Github o vean un ejemplo.

Ver ejemplo de repositorio en Github

Crear y administrar una página de equipo como esta en WordPress implica la siguiente combinación de herramientas:

Tipo de publicación personalizada (p. ej. team)
Taxonomía personalizada para filtrado (p. ej. department)
Una interfaz de usuario de cuadro meta para administrar campos personalizados (por ejemplo, posición, correo electrónico, teléfono y enlaces de redes sociales)

Con estas herramientas, repasemos el proceso de creación de un Conozca a nuestro equipo plantilla para un tema personalizado de WordPress.

primero y principal

Antes de comenzar, debo aclarar algunas cosas. En el ejemplo de Github para este tutorial, estoy usando un enfoque orientado a objetos y he almacenado mi código en un .php archivo que normalmente incluyo en un tema functions.php Archivo.

En aras de la claridad, describiré el proceso paso a paso y me referiré a configurar esto dentro de su functions.php en lugar de.

Crear tipo de publicación y taxonomía

El primer paso es registrar un nuevo tipo de publicación (p. ej. team). También puede registrar una taxonomía (p. ej. department) si se requiere filtrado o categorización.

Este tipo de publicación agregará una nueva Perfiles de equipo menú al administrador de WordPress, separando todas las publicaciones del equipo de Publicaciones y Paginas para una gestión de contenidos más sencilla.

La taxonomía agregará una categoría personalizada a las publicaciones del equipo, lo que le permitirá filtrar o categorizar su equipo. Encuentro que esto es apropiado cuando tienes un equipo de más de diez personas. Suele ser útil para filtrar a los miembros del personal por ubicación de oficina o departamento.

Tipo de mensaje

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

Taxonomía opcional

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

En este ejemplo, en realidad no estamos usando el department taxonomía para cualquier cosa. Lo incluí en el tutorial porque es útil comprender que se puede usar para filtrar miembros del equipo.

Metabox para campos personalizados

Ahora que tenemos un nuevo menú *Perfiles de equipo* en WordPress, necesitamos personalizar los datos que almacenamos con cada publicación de equipo. En mi experiencia, la mayoría de los perfiles de equipo tienen los siguientes campos:

Posición
Correo electrónico
Teléfono
Gorjeo
LinkedIn

Para administrar este contenido, me gusta personalizar el Agregar nuevo y Editar Interfaz de usuario para el tipo de publicación del equipo, lo que permite a los administradores y autores del sitio actualizar intuitivamente esta información sin necesidad de capacitación.

Mi herramienta preferida para crear interfaces de usuario de metabox de campos personalizados es actualmente el complemento Advanced Custom Fields (ACF).

Para crear este cuadro meta, deberá instalar el complemento ACF, creando sus campos en el Campos Personalizados menú de administración. A continuación se muestra un vistazo a los campos y configuraciones que he usado para este tutorial.

Si es perezoso como yo, puede importar mi archivo de exportación XML para automatizar el proceso de creación de campos. Así es cómo:

Descargar mi exportación de grupo de campo ‘Detalles del equipo’: acf-export-team-details.xml.zip
Vaya a Herramientas » Importar y seleccione WordPress
Instale el complemento de importación de WP si se le solicita
Sube e importa el .xml Archivo
Seleccione su usuario e ignore Importar archivos adjuntos
¡Eso es!

El complemento ACF almacena sus datos dentro de un tipo de publicación personalizada, por lo que se puede usar la herramienta estándar de importación XML de WordPress. Un movimiento bastante inteligente por parte del autor del complemento, Elliot Condon.

Extras

En mi clase de PHP, agregué un aviso de administrador que le pedirá que instale el complemento ACF si aún no lo ha hecho. Esto proporciona un buen recordatorio de que lo necesita para que el tipo de publicación del equipo funcione correctamente.

Plantilla personalizada

Ahora que tenemos configurado nuestro sistema de administración de equipos, necesitaremos generar los perfiles de nuestro equipo en algún lugar del sitio. Para ello, suelo crear una plantilla de tema personalizada (p. ej. template-team.php) que altera la vista de una página específica de WordPress. Consulte los documentos en WordPress.org para obtener detalles sobre las plantillas personalizadas.

Bucle para mostrar publicaciones del equipo

Para mostrar las publicaciones de nuestro equipo dentro de nuestra plantilla personalizada, usaremos el siguiente código.

<?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">&ldquo;Individuals can and do make a difference, but it takes a team<br>to really mess things up.&rdquo;</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="https://css-tricks.com/creating-meet-team-page-wordpress/<?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="https://css-tricks.com/creating-meet-team-page-wordpress/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; ?>

Para obtener un bucle de nuestro team publicaciones, he usado el get_posts función. Es simple, fácil de usar y eficiente. He usado los siguientes argumentos para orientar y organizar los resultados de la consulta:

'post_type' => 'team' solo consultará las publicaciones del equipo
'posts_per_page' => 50 devolverá todos los perfiles de nuestro equipo, asumiendo que tiene menos de 50. Si planea tener más, ajuste esto en consecuencia.
'orderby' => 'title' ordenará los resultados por nombre
'order' =>; 'ASC' comenzará el orden alfabéticamente

Una vez que tenemos nuestro objeto de consulta, recorremos cada publicación del equipo, generando datos y contenido en nuestra estructura HTML.

El get_field y the_field Las funciones están integradas en el complemento ACF. Estas son probablemente las dos funciones más comunes que usará cuando trabaje con él. Muestran el valor de un campo personalizado dado.

Una vez que tenemos el bucle completo, podemos crear un nuevo Página en WordPress, seleccionando Equipo desde el menú desplegable de plantillas personalizadas. Cuando vea esta página, debería ver una lista de los perfiles de su equipo.

Notas sobre el rendimiento

Sin almacenamiento en caché, este fragmento de código agrega la friolera de 26 consultas a la página. Si tiene un sitio de gran volumen, es un requisito que aproveche la API de transitorios para almacenar en caché el resultado de una consulta personalizada intensiva como esta. He incluido una estática display() método en mi clase de PHP que maneja el almacenamiento en caché transitorio.

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

El display() utiliza el almacenamiento en búfer de salida y el almacenamiento en caché transitorio para almacenar y almacenar en caché el HTML generado por nuestro bucle de equipo.

El uso de este enfoque en lugar de nuestro ciclo anterior reduce la cantidad de consultas a 1, lo que nos ahorra 25 visitas a la base de datos. Esto también reduce la carga inicial de la página en 400-500 ms. ¡Nada mal!

Aplicar estilo a la plantilla con CSS

Ahora que tenemos nuestro sistema de administración de páginas de equipo en su lugar y nuestra salida de estructura HTML, necesitamos agregar algo de estilo a nuestra nueva plantilla.

Cargar condicionalmente en CSS

Para incluir una hoja de estilo solo para nuestra plantilla personalizada (template-team.php), podemos usar la siguiente verificación condicional.

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

Esto pondrá en cola un archivo CSS (/assets/css/team.css) Cuándo template-team.php Está en uso. El uso de este método ayuda a mantener la hoja de estilo básica ajustada.

Estilos de ejemplo

Estos son los estilos que he usado para el ejemplo que acompaña a este tutorial:

/* ==============================================
   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;
}

En el flujo de trabajo de mi proyecto, uso LESS para preprocesar mi CSS. Si desea usar LESS en su proyecto, a continuación se muestra el CSS en formato LESS.

/* ==================================================
   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;
	}
}

¡Impresionante, lo lograste!

Gracias por leer, espero que este tutorial le brinde una comprensión sólida de cómo crear una biografía de equipo/conocer el sistema de administración de perfil de equipo/equipo en WordPress. Si comprende los conceptos subyacentes explicados en este artículo, ahora debería tener un nuevo y valioso enfoque para administrar contenido personalizado en WordPress.

Los tipos de publicaciones personalizadas, las taxonomías y los campos personalizados administrados de meta box brindan un enfoque poderoso para administrar muchos escenarios complejos de CMS de WordPress.

(Visited 5 times, 1 visits today)

Creación de una página “Conozca al equipo” en WordPress | Programar Plus