Ismael Benito

Soy doctorando en ingeniería y profe associado en @UniBarcelona. Como buen catalán hago cosas, concretamente en @recercaprecaria, @EUiAUniversitat y @cjbcn.

@ismansiete

1.926

Tweets

867

Siguiendo

497

Seguidores

el Hombre Orquesta

Blog Personal y nada musical de Isman Siete (Ismael Benito)

Construyendo el Blog (II): Categorías, Etiquetas y Meta-etiquetas

Código

19 Octubre, 2015

En la anterior entrada Construyendo el Blog (I) comenté los pasos básicos para construir un tema de WordPress, a partir de los archivos style.css y index.php. En esta entrega he trabajado las categorías, las etiquetas y las meta-etiquetas. Para lo primero he tenido que tocar un poco de Bootstrap, inspirándome en Trello. Para las otras dos iremos sólo sobre php. Los resultados son visibles en el blog.

Categorías

Una parte esencial de la navegación por blogs son las categorías. Y en concreto el Hombre Orquesta tiene temas muy variados, por lo tanto he visto esencial empezar a implantarlas. En este caso el códex de WordPress nos da la ayuda y nos enseña que función llamar para obtener las categorías de cada entrada, obviamente llamandola dentro de “el Bucle” (the Loop). Esta función es get_the_category(). En el siguiente ejemplo se usa la función para obtener las categorías y mostrarlas:

$categories = get_the_category();
$separator = ' ';
$output = '';
if ( ! empty( $categories ) ) {
    foreach( $categories as $category ) {
        $output .= '<a href="' . esc_url( get_category_link( $category->term_id ) ) . '">' . esc_html( $category->name ) . '</a>' . $separator;
    }
    echo trim( $output, $separator );
}

 

Siempre me han gustado las etiqutas de Trello, si no lo conocéis lo recomiendo como organizador de tareas, básicamente son unas etiquetas con un fondo sólido y un texto que contraste. Así que quería adaptar algo similar para el tema, y tirando de CSS es posible. Encontré una solución dinámica que permite usarse tanto en las classes button label de Bootstrap, y lo implementé:

[class*='-codigo'] {
	background-color:#222;
    color:#f0f0f0;
}

[class*='-codigo']:hover,[class*='-codigo']:focus {
	background-color:#f0f0f0;
    color:#222;
}

 

Así que solo hace falta relacionar las “apodos” (slugs) de las categorías dentro de WordPress con el código CSS que hemos picado. Modificando el código php anterior, tenemos:

$Categories = get_the_category();
$Separator = ' ';
$Output = '';
echo "<h4>";
if ( ! empty( $Categories ) ) {
foreach( $Categories as $Category ) {
$Output .= '<a href="' . esc_url( get_category_link( $Category->term_id ) ) . '">' . '<span class="label label-'. esc_html( $Category->slug ) . '">' . esc_html( $Category->name ) .'</span></a>' . $Separator;
}
echo trim( $Output, $Separator );
}

 

Que una vez ejecutado nos dará un resultado similar a este:

<h4>
<a href="http://elhombreorquesta.net/category/codigo/">
<span class="label label-codigo">Código</span>
</a>
</h4>


Código

 

Etiquetas

Este paso es similar al anterior si recurrimos a la función the_tags() sólo que su implementación es muy sencilla, con llamarla nos devuelve una cadena bien formada para ser legible. Por ejemplo para la anterior entrada de este hilo tenemos:

Etiquetas: 
<a href="http://elhombreorquesta.net/tag/blog/" rel="tag">Blog</a>, 
<a href="http://elhombreorquesta.net/tag/bootstrap/" rel="tag">Bootstrap</a>, 
<a href="http://elhombreorquesta.net/tag/css/" rel="tag">CSS</a>, 
<a href="http://elhombreorquesta.net/tag/el-hombre-orquesta/" rel="tag">el Hombre Orquesta</a>, 
<a href="http://elhombreorquesta.net/tag/github/" rel="tag">github</a>, 
<a href="http://elhombreorquesta.net/tag/php/" rel="tag">php</a>

Que renderiza como: Etiquetas: , , , , ,

 

Meta-etiquetas

La Meta-etiquetas, o Meta-tags, son elementos que se emplean para posicionar la página en buscadores. Aun que, sitios como Google hayan abandonado su uso. Existen diferentes tipos de meta-etiquetas: description, author o keywords, por ejemplo. Están situados al principio del código de la página. Esto nos supone un problema, por que si quisiésemos (y queremos) que las meta-etiquetas se adecuen a las etiquetas no estamos dentro del Bucle para ejecutar the_tags(), deberemos emplear otro código similar:

<meta name="keywords" content="<?php if ( is_single() ) {
        global $post;
		foreach(get_the_tags($post->ID) as $tag) {
		echo $tag->name . ', ';
		}
    } else {
		echo "Ismael Benito, Isman Siete, divulgación científica, magia, programación, política, reflexión";	
    }
    ?>" />

 

De forma que escogeremos entre unas etiquetas fijas o bien las etiquetas propias de cada entrada del blog.

Esto es todo por hoy, siempre podéis encontrar el código en Github, de hecho quien mire podrá ver algo que iré implementaré en el blog.

  

Ismael Benito Altamirano.
Basado en Wordpress y Bootstrap.