Cómo mostrar y diseñar metadatos de publicaciones en WordPress
Publicado: 2017-10-26
¿Alguna vez has notado una fecha o categoría en una publicación de blog? Esto es lo que se llama "metadatos de publicación", una parte importante de una publicación de blog. Ayuda a proporcionar metadatos sucintos con respecto a las piezas de contenido de su blog.
Si se usa correctamente, publicar meta puede mejorar la experiencia del usuario; digamos que un visitante está interesado solo en un tema determinado, entonces la categoría meta puede ayudarlo a acortar las publicaciones por categoría para que pueda ver las publicaciones sobre ese tema en particular en lugar de ver todas las publicaciones. O, si solo desea ver las publicaciones de un autor en particular, la publicación meta puede ayudarlo a hacerlo.
En esta publicación, le mostraré cómo mostrar y diseñar los metadatos de las publicaciones.
¿Qué son los metadatos de publicación y cómo pueden ayudar a mi blog?
La sección de metadatos de la publicación contiene información relevante de una publicación de blog, como la fecha de publicación, el nombre del autor, las categorías, las etiquetas y las taxonomías personalizadas, etc.
Si tiene un blog, debe asegurarse de que los metadatos de su publicación sean correctos, ya que esta información puede ayudar a un visitante a comprender más sobre la publicación y también puede ayudar a aumentar las vistas de su página al hacer que su sitio sea más fácil de navegar.
¿Cuántos metadatos de publicación debe mostrar?
La ubicación de los metadatos de la publicación varía de un tema a otro. Algunos pueden mostrarlo antes del título de la publicación, otros después del título y otros justo después del contenido.
Pero demasiadas metapiezas de publicación pueden estropear el diseño. La situación ideal es aquella en la que solo mostraría la información que considere necesaria.
Ahora veamos cómo puede personalizar y agregar metadatos de publicaciones.
Personalización de metadatos de publicaciones
Como se mencionó, la meta ubicación de la publicación varía de un tema a otro. Aquí trabajaremos en un tema en particular; en este caso, el tema predeterminado de TwentySeventeen, así que tenga en cuenta que el código y las páginas pueden ser diferentes de su tema.
En los temas modernos, los metadatos de las publicaciones se definen en la página de etiquetas de plantilla y se activan cuando es necesario, pero en algunos temas puede encontrar que los metadatos de las publicaciones se colocan directamente antes o después del título de la publicación.
En general, encontrará etiquetas meta de publicación en index.php , single.php , archive.php y páginas de plantilla de contenido .
Un código simple se vería así:
Publicado en
<?php el_tiempo('F jS, Y'); ?> por <?php the_author_posts_link(); ?> <?php edit_post_link(); ?>Este código mostrará algo como esto Fecha de publicación por nombre de autor con botón de edición (solo si ha iniciado sesión en el tablero).
Pero ahora la mayoría de los temas modernos están usando la página de etiquetas de plantilla para manejar el meta de la publicación. Vamos a ver cómo funciona.
Primero, tendría que crear un tema secundario antes de realizar cualquier cambio.
Trabajaremos en una sola página de publicación y así es como se ve desde el frente.
Digamos que queremos agregar un ícono de usuario antes del nombre del autor, para hacer eso haga lo siguiente:
En el tema TwentySeventeen, la plantilla single.php se usa para mostrar una sola publicación. Ahora busque get_template_part y observe la ruta de la plantilla allí, en nuestro caso, la ruta es:
get_template_part( 'template-parts/post/content', get_post_format() );
Ahora, de acuerdo con la ruta, abra content.php y busque la sección de encabezado de entrada .
<header class="entrada-encabezado">
<?php
if ( 'publicar' === get_post_type() ) {
echo '<div class="entrada-meta">';
si (es_soltero()) {
veintisiete_publicado_en();
} más {
echo veintisiete_tiempo_enlace();
veintisiete_editar_enlace();
};
echo '</div><!-- .entry-meta -->';
};
si (es_soltero()) {
the_title( '<h1 class="entry-title">', '</h1>' );
} elseif (es_primera página() && es_inicio()) {
the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
} más {
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
}
?>
</encabezado>
<!-- .encabezado-de-entrada -->
Podemos ver twentyseventeen_posted_on(); La función se llama aquí para mostrar el meta de la publicación, tenemos que editar esta función. Encontrará esta función en el archivo template-tags.php .
Un consejo: verifique el archivo function.php del tema para obtener el nombre y la ruta del archivo.
Busque twentyseventeen_posted_on() y copie y pegue la función completa en el archivo function.php de su tema secundario (si no tiene el archivo function.php en su tema secundario, cree un archivo en blanco con el mismo nombre).
Usaremos iconos de fuentes impresionantes aquí, la forma más sencilla de usar fuentes impresionantes en WordPress es instalando el complemento Better Font Awesome.
if ( ! function_exists( 'twentyseventeen_posted_on' ) ) :
/**
* Imprime HTML con metainformación para la fecha/hora y el autor actuales.
*/
function veintisiete_posted_on() {
// Obtener el nombre del autor; envuélvelo en un enlace.
$línea de autor = sprintf(
/* traductores: %s: autor de la publicación */
__( 'por %s', 'veintisiete' ),
'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '"><i class="fa fa-user" aria-hidden="verdadero"></i>' . obtener_el_autor() . '</a></span>'
);
// Finalmente, escribamos todo esto en la página.
echo '<span class="posted-on">' . veintisiete_tiempo_enlace() . '</span><span class="byline"> ' . $línea de autor. '</span>';
}
terminara si;
Ahora puede ver un icono de usuario junto al nombre del autor.
Un consejo: puedes hacer estos cambios directamente en el archivo content.php pero es una buena práctica seguir la estructura del tema.
Adición de metadatos de publicación
Hasta ahora, hemos personalizado metaetiquetas existentes. Ahora, para arreglar las cosas, supongamos que queremos mostrar la categoría y las etiquetas después del título de la publicación.
Para hacer esto, copie el archivo content.php del tema principal y péguelo en su tema secundario, manteniendo el mismo patrón de directorio.
veintisiete > partes de la plantilla > publicación > contenido.php a veintisiete niños > partes de la plantilla > publicación > contenido.php
Ahora tienes que escribir una nueva función.
¿Crees que es difícil? En realidad no lo es, esto es lo que debe hacer.
La mayoría de los temas mostrarán la categoría y las etiquetas en algún lugar de la publicación, solo necesita ubicar el archivo y replicar el código en su función, eso es todo.
En nuestro caso, en la categoría de tema de TwentySeventeen y las etiquetas se colocan después del contenido. Ahora tenemos que seguir nuestro flujo de trabajo anterior.
Abra content.php y vea qué función se usa para la categoría y las etiquetas.
<?php
si (es_soltero()) {
veintisiete_entrada_pie de página();
}
?>
Aquí está twentyseventeen_entry_footer().
Ahora ve al archivo template-tags.php y busca veinteseventeen_entry_footer().
if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :
/**
* Imprime HTML con metainformación para las categorías, etiquetas y comentarios.
*/
función veintisiete_entrada_pie de página() {
/* traductores: se usa entre los elementos de la lista, hay un espacio después de la coma */
$separate_meta = __( ', ', 'veintisiete' );
// Obtener categorías para publicaciones.
$categories_list = get_the_category_list ($separate_meta);
// Obtener etiquetas para publicaciones.
$tags_list = get_the_tag_list( '', $separate_meta );
// No queremos generar .entry-footer si estará vacío, así que asegúrese de que no lo esté.
if ( ( (twenteenteen_categorized_blog() && $categories_list ) || $tags_list ) || get_edit_post_link() ) {
echo '<footer class="entry-footer">';
if ( 'publicar' === get_post_type() ) {
if ( ($categories_list && twentyseventeen_categorized_blog() ) || $tags_list ) {
echo '<span class="cat-tags-links">';
// Asegúrese de que haya más de una categoría antes de mostrar.
if ( $categories_list && veintisiete_categorizados_blog() ) {
echo '<span class="cat-links">' . veintesiete_get_svg( array( 'icono' => 'carpeta abierta' ) ) . '<span class="screen-reader-text">' . __( 'Categorías', 'veintisiete' ) . '</span>' . $categories_list . '</span>';
}
si ($etiquetas_lista) {
echo '<span class="tags-links">' . veintesieteteen_get_svg( array( 'icono' => 'hashtag' ) ) . '<span class="screen-reader-text">' . __( 'Etiquetas', 'veintisiete' ) . '</span>' . $etiquetas_lista. '</span>';
}
echo '</span>';
}
}
veintisiete_editar_enlace();
echo '</footer> <!-- .entry-footer -->';
}
}
terminara si;
Encuentre el código para la categoría y las etiquetas, luego copie y pegue el código en el archivo function.php de su tema secundario dentro de una nueva función, como esta:
if ( ! function_exists( 'twentyseventeen_post_meta' ) ) :
/**
* Imprime HTML con metainformación para la fecha/hora y el autor actuales.
*/
función veintisiete_post_meta() {
/* traductores: se usa entre los elementos de la lista, hay un espacio después de la coma */
$separate_meta = __( ', ', 'veintisiete' );
// Obtener categorías para publicaciones.
$categories_list = get_the_category_list ($separate_meta);
// Obtener etiquetas para publicaciones.
$tags_list = get_the_tag_list( '', $separate_meta );
echo '<span class="cat-tags-links">';
// Asegúrese de que haya más de una categoría antes de mostrar.
if ( $categories_list && veintisiete_categorizados_blog() ) {
echo '<span class="cat-links"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Categorías', 'veintisiete' ) . '</span>' . $categories_list . '</span>';
}
si ($etiquetas_lista) {
echo '<span class="tags-links"><i class="fa fa-tags" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Etiquetas', 'veintisiete' ) . '</span>' . $etiquetas_lista. '</span>';
}
echo '</span>';
};
terminara si;
Puede ver que he usado íconos de fuentes increíbles para categorías y etiquetas.
Dar estilo a tu publicación meta
Dado que hemos colocado nuestras etiquetas meta en la ubicación deseada, es hora de ajustar un poco el estilo.
Es muy sencillo si conoces los conceptos básicos de CSS. Ajustemos nuestra sección de categorías y etiquetas.
.entry-header .cat-etiquetas-enlaces {
tamaño de fuente: 14px;
}
.entry-header .cat-enlaces {
relleno derecho: 5px;
}
Ahora se ve diferente.
Pero si desea mostrar su propio ícono personalizado en lugar de una fuente increíble o cualquier otra, puede usar su imagen como imagen de fondo en CSS de esta manera:
.entry-header .cat-enlaces {
fondo: url (categoría-img.jpg) izquierda centro sin repetición;
relleno-izquierda: 5px;
relleno derecho: 5px;
}
.entry-header .tags-enlaces {
fondo: url(tag-img.jpg) izquierda centro sin repetición;
relleno-izquierda: 5px;
relleno derecho: 5px;
}
Una vez hecho esto, no olvide eliminar el código impresionante de fuente de su archivo function.php .
Eliminar cualquier publicación meta
Eliminar cualquier meta de la publicación es muy simple, solo busque el código y elimínelo.
Por ejemplo, si ve nuestra página de publicación única ahora, las categorías y etiquetas ahora aparecen en dos secciones. Si no desea mostrarlo después del contenido, simplemente elimine la categoría y el código de la etiqueta de la función twentyseventeen_entry_footer().
Entonces, el nuevo código se vería así en su tema hijo.
if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :
/**
* Imprime HTML con metainformación para las categorías, etiquetas y comentarios.
*/
función veintisiete_entrada_pie de página() {
// No queremos generar .entry-footer si estará vacío, así que asegúrese de que no lo esté.
si (get_edit_post_link()) {
echo '<footer class="entry-footer">';
veintisiete_editar_enlace();
echo '</footer> <!-- .entry-footer -->';
}
}
terminara si;Conclusión
Como puede ver, los metadatos de la publicación se pueden mostrar de muchas maneras, pero es mejor si primero adquiere una comprensión básica de la estructura de su tema y solo luego, si es posible, haga los ajustes correspondientes. Esto minimiza la posibilidad de que su tema se rompa. PD: no olvides crear una copia de seguridad.
Espero que esta publicación lo haya ayudado a comprender cómo funcionan los metadatos de publicación, pero si tiene alguna pregunta relevante, publique sus comentarios a continuación.