Hoy os traigo un how-to bastante interesante, eso sí, es un poco avanzado ya que vamos a hacer algo de programación. Vamos a añadir iconos a los tags que tenemos en WordPress y vamos a modificar su visualización para que en el lugar donde aparezcan los tags se vean con el icono delante.
Para ello vamos a hacer uso de la fuente Dashicons que viene incluida en WordPress para asignar iconos a las etiquetas.
Recordad que todo el código en WordPress para modificar sus funcionalidades debe ir en el fichero functions.php o en archivos llamados desde el mismo.
Los pasos que vamos a seguir son los siguientes:
- Añadir el campo de selección de icono en la pantalla de añadir etiqueta.
- Añadir el campo de selección de icono en la pantalla de edición de etiqueta.
- Modificar la función de guardado de la etiqueta.
- Mostrar los iconos en el listado de etiquetas del panel de administración.
- Mostrar los iconos en el listado de etiquetas de la parte pública de la web.
Empecemos… por el principio.
Desde la versión 4.4 de WordPress podemos añadir campos adicionales a las taxonomias, para ello tenemos que usar una acción que nos va a permitir modificar tanto la pantalla de nueva etiqueta como la de la edición.
Antes de nada quiero incluir un array que lo voy a usar para mostrar el listado de Dashicons en el campo de selección.
// A este array lo llamaremos cuando mostremos el selector de iconos
$iconos = array(
'menu',
'admin-site',
'dashboard',
'admin-media',
'admin-page',
'admin-comments',
'admin-appearance',
'admin-plugins',
'admin-users',
'admin-tools',
'admin-settings',
'admin-network',
'admin-generic',
'admin-home',
'admin-collapse',
'filter',
'admin-customizer',
'admin-multisite',
'admin-links',
'format-links',
'admin-post',
'format-standard',
'format-image',
'format-gallery',
'format-audio',
'format-video',
'format-chat',
'format-status',
'format-aside',
'format-quote',
'welcome-write-blog',
'welcome-edit-page',
'welcome-add-page',
'welcome-view-site',
'welcome-widgets-menus',
'welcome-comments',
'welcome-learn-more',
'image-crop',
'image-rotate',
'image-rotate-left',
'image-rotate-right',
'image-flip-vertical',
'image-flip-horizontal',
'image-filter',
'undo',
'redo',
'editor-bold',
'editor-italic',
'editor-ul',
'editor-ol',
'editor-quote',
'editor-alignleft',
'editor-aligncenter',
'editor-alignright',
'editor-insertmore',
'editor-spellcheck',
'editor-distractionfree',
'editor-expand',
'editor-contract',
'editor-kitchensink',
'editor-underline',
'editor-justify',
'editor-textcolor',
'editor-paste-word',
'editor-paste-text',
'editor-removeformatting',
'editor-video',
'editor-customchar',
'editor-outdent',
'editor-indent',
'editor-help',
'editor-strikethrough',
'editor-unlink',
'editor-rtl',
'editor-break',
'editor-code',
'editor-paragraph',
'editor-table',
'align-left',
'align-right',
'align-center',
'align-none',
'lock',
'unlock',
'calendar',
'calendar-alt',
'visibility',
'hidden',
'post-status',
'edit',
'post-trash',
'trash',
'sticky',
'external',
'arrow-up',
'arrow-down',
'arrow-left',
'arrow-right',
'arrow-up-alt',
'arrow-down-alt',
'arrow-left-alt',
'arrow-right-alt',
'arrow-up-alt2',
'arrow-down-alt2',
'arrow-left-alt2',
'arrow-right-alt2',
'leftright',
'sort',
'randomize',
'list-view',
'excerpt-view',
'grid-view',
'hammer',
'art',
'migrate',
'performance',
'universal-access',
'universal-access-alt',
'tickets',
'nametag',
'clipboard',
'heart',
'megaphone',
'schedule',
'wordpress',
'wordpress-alt',
'pressthis',
'update',
'screenoptions',
'cart',
'feedback',
'cloud',
'translation',
'tag',
'category',
'archive',
'tagcloud',
'text',
'media-archive',
'media-audio',
'media-code',
'media-default',
'media-document',
'media-interactive',
'media-spreadsheet',
'media-text',
'media-video',
'playlist-audio',
'playlist-video',
'controls-play',
'controls-pause',
'controls-forward',
'controls-skipforward',
'controls-back',
'controls-skipback',
'controls-repeat',
'controls-volumeon',
'controls-volumeoff',
'yes',
'no',
'no-alt',
'plus',
'plus-alt',
'plus-alt2',
'minus',
'dismiss',
'marker',
'star-filled',
'star-half',
'star-empty',
'flag',
'info',
'warning',
'share',
'share1',
'share-alt',
'share-alt2',
'twitter',
'rss',
'email',
'email-alt',
'facebook',
'facebook-alt',
'networking',
'googleplus',
'location',
'location-alt',
'camera',
'images-alt',
'images-alt2',
'video-alt',
'video-alt2',
'video-alt3',
'vault',
'shield',
'shield-alt',
'sos',
'search',
'slides',
'analytics',
'chart-pie',
'chart-bar',
'chart-line',
'chart-area',
'groups',
'businessman',
'id',
'id-alt',
'products',
'awards',
'forms',
'testimonial',
'portfolio',
'book',
'book-alt',
'download',
'upload',
'backup',
'clock',
'lightbulb',
'microphone',
'desktop',
'tablet',
'smartphone',
'phone',
'smiley',
'index-card',
'carrot',
'building',
'store',
'album',
'palmtree',
'tickets-alt',
'money',
'thumbs-up',
'thumbs-down',
'layout');
Usaremos primeramente el gancho post_tag_add_form_fields que nos permite añadir campos extras a la pantalla de creación de nueva taxonomía.
function jiac_icon_field() {
$iconos = /* El array que he declarado anteriormente */
?>
<div class="form-field">
<label for="jiac_term_meta[tag_icon]">Icono:</label>
<select name="jiac_term_meta[tag_icon]" id="jiac_term_meta[tag_icon]">
<?php
foreach ($iconos as $i) {
echo "<option value='dashicons-$i'>$i</option>";
}
?>
</select>
<p class="description">Elige el icono de la lista</p>
</div>
<?php
}
add_action( 'post_tag_add_form_fields', 'jiac_icon_field', 10, 2 );
El resultado de esta acción la podemos ver a continuación.
Pero atención… si creamos una nueva etiqueta y la guardamos no se guardará este nuevo campo pues también tenemos que añadir la funcionalidad de que guarde esta nueva opción.
function guarda_meta_tag( $term_id ) {
if ( isset( $_POST['jiac_term_meta'] ) ) { // Si el formulario pasa jiac_term_merta
$t_id = $term_id;
$term_meta = get_option( "datos_tag_$t_id" ); // Obtenemos los datos existentes
$cat_keys = array_keys( $_POST['jiac_term_meta'] ); // Separamos en un array las diferentes keys, ahora solo existe tag_icon
foreach ( $cat_keys as $key ) { // Para cada meta dato
if ( isset ( $_POST['jiac_term_meta'][$key] ) ) { // Vemos si lo hemos pasado por el formulario
$term_meta[$key] = $_POST['jiac_term_meta'][$key]; // Si es asi lo metemos en un array de metadatos
}
}
// Para guardarlo posteriormente
update_option( "datos_tag_$t_id", $term_meta );
}
}
add_action( 'edited_post_tag', 'guarda_meta_tag', 10, 2 );
add_action( 'create_post_tag', 'guarda_meta_tag', 10, 2 );
Con esto ya tenemos en la base de datos de WordPress un array de opciones personalizada asociado al id de la etiqueta, para verlo tenemos que añadir una función más asociada con la pantalla de edición de la taxonomía.
function jiac_icon_field_edit_screen($term) {
$iconos = /* Mismo array que anteriormente, lo mejor es meterlo en una variable de configuracion global */
$t_id = $term->term_id;
$term_meta = get_option( "datos_tag_$t_id" ); echo esc_attr( $term_meta['tag_icon'] );?>
<tr class="form-field">
<th scope="row" valign="top"><label for="jiac_term_meta[tag_icon]">Icono:</label></th>
<td>
<select name="jiac_term_meta[tag_icon]" id="jiac_term_meta[tag_icon]">
<?php
foreach ($iconos as $i) {
$seleccionado = (esc_attr( $term_meta['tag_icon']) == "dashicons-$i")? 'selected="selected"' : '';
echo "<option value='dashicons-$i' $seleccionado>$i</option>";
}
?>
</select>
<p class="description">Edita el icono</p>
</td>
</tr>
<?php
}
add_action( 'post_tag_edit_form_fields', 'jiac_icon_field_edit_screen', 10, 2 );
La cosa avanza, ahora mismo ya tenemos:
- El formulario de creación.
- El guardado del nuevo campo en los formularios de edición y creación.
- El formulario de edición.
Bueno, bueno, bueno, ahora debemos ‘simplemente’ hacer que se muestren estos iconos públicamente.
Tenemos que cargar los estilos de Dashicons en la parte pública de nuestro theme de la siguiente manera:
add_action( 'wp_enqueue_scripts', 'jiac_dashicons' );
function jiac_dashicons() {
wp_enqueue_style( 'dashicons' );
}
Y filtrar los enlaces de los tags cuando se muestra en WordPress haciendo uso del siguiente filtro:
function icons_to_tags( $term_links ) {
$nuevos_links = array();
$terms = get_terms("post_tag");
foreach ($terms as $term) {
$link = get_term_link($term);
foreach ( $term_links as $term_link ) {
if (strpos($term_link, $link) !== FALSE) {
$t_id = $term->term_id;
$term_meta = get_option( "datos_tag_$t_id" );
$icono = "dashicons " . esc_attr( $term_meta['tag_icon'] );
$nuevos_links[] = "<span class='$icono'></span>" . $term_link;
}
}
}
return $nuevos_links;
}
add_filter( 'term_links-post_tag', 'icons_to_tags' );
Como resultado tendremos…
