Limpiar código de las imágenes subidas en WordPress

Cuando subimos una imagen a WordPress para incluirla en una entrada o página el código insertado en la entrada tiene elementos innecesarios, normalmente ya cubiertos por el CSS, propio de WordPress o del mismo tema que usemos.

Por supuesto, podemos modificar este código posteriormente, eliminando lo que sobra, pero si por eso fuera no escribiríamos, estaríamos todo el día corrigiendo errores tontos del software que usamos, en este caso WordPress.

De lo que estoy hablando es de que cuando subes una imagen y la insertas desde WordPress lo que obtienes es un código más o menos así:

<a href="http://misitio.com/wp-content/uploads/2012/10/imagenchula.png"><img src="http://misitio.com/wp-content/uploads/2012/10/imagenchula-550x820.jpg" alt="" width="550" height="820" class="alignnone size-large wp-image-29105" /></a>

Igual no lo sabes pero sobran algunas “tags, pues parte del código de la imagen es en realidad innecesario, especialmente el que define el ancho y alto de la imagen, ya que también lo está gestionando la clase CSS “alignnone que incluye WordPress automáticamente, pues determina las dimensiones de la imagen.

Dicho esto, si limpiamos manualmente un poco el código, valdría exactamente igual de este modo (de hecho es mejor):

<a href="http://misitio.com/wp-content/uploads/2012/10/imagenchula.png"><img src="http://misitio.com/wp-content/uploads/2012/10/imagenchula-550x820.jpg" alt="esto es mi imagen chula" class="alignnone size-large wp-image-29105" /></a>

Pero como ya he dicho antes, se supone que usamos WordPress para escribir cosas y compartirlas, no para dedicarle más tiempo al código que a la propia redacción de contenidos ¿no?.

Pues entonces, si te parece, podemos evitarnos esa tarea y automatizar la “limpieza” de código innecesario en nuestro WordPress, simplemente añadiendo unas líneas a nuestro plugin de funciones o al archivo functions.php del tema que tengamos activo, estas:

//Eliminar tags inútiles de ancho/alto a imágenes subidas
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
    $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
    return $html;
}

Cuando guardemos los cambios, a partir de ese momento se eliminarán los elementos de ancho y alto de las imágenes que subas para incluirlas en entrada y páginas, pero también para las que hayas definido como miniaturas en tus entradas, y también en las imágenes destacadas.

Fácil y, sobre todo, barato.

Ayuda WordPress está alojado en Gigas Cloud WordPress, hosting en la nube especializado en WordPress

Lista desplegable de tags

Ni me acuerdo la de tiempo que un lector, aburridito de las nubes de tags, me preguntó que cómo hacer una lista desplegable de etiquetas, no de categorías que es lo que siempre suele estar más fácilmente disponible. Y la verdad es que me lo apunté por ahí pero hasta hoy no me he acordado de localizar algo para darle una solución.

Pero todo llega … 

Y en vez de una solución traigo dos. Mejor ¿no?.

… Lista desplegable de tags con código …

Este bonito código, que encontré en WPlover, creará una lista desplegable de las etiquetas, tu decides donde quieres mostrarlo, en la barra lateral, al final de cada entrada, tu mismo:

<li id="categories">
	<h2><?php _e('Entradas en cada tag'); ?></h2>
	<form action="<?php bloginfo('url'); ?>/" method="get">
	<div>
<?php
$select = wp_dropdown_categories('taxonomy=post_tag&show_option_none=Select tag&show_count=1&orderby=name&echo=0');
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
	<noscript><div><input type="submit" value="View" /></div></noscript>
	</div></form>
</li>

Lo mejor de este código es que como trata a las tags como lo que son, una taxonomía más, puedes usarlo para hacer un desplegable de tus propias taxonomías cambiando taxonomy=post_tag por la tuya.

_ Lista desplegable de tags con plugin …

Y si quieres hacerlo aún más fácil tienes también un plugin que viene a ser el sustituto ideal del código anterior. Taxonomy dropdown widget, una vez instalado y activo, añade un widget para configurarlo a tu gusto y, si prefieres mostrar el resultado en otra parte puedes usar la función taxonomy_dropdown_widget así:

<?php if( function_exists( 'taxonomy_dropdown_widget' ) )

Ea, ¡misión cumplida!

Ayuda WordPress está alojado en Gigas Cloud WordPress, hosting en la nube especializado en WordPress

Limitar el número de etiquetas a mostrar en el tema

Si no cambias las opciones por defecto, cuando WordPress llama a la función the_tags mostrará en tu tema, donde esté esta llamada, todas las etiquetas (tags) que hayas marcado para la entrada en cuestión.

Y esto crea un problema, cuando el mismo diseño del tema no las muestra bien, especialmente si sueles marcar muchas etiquetas.

En este caso, lo que tenemos que hacer es limitar mediante una función el número de etiquetas a mostrar, independientemente de las que tu marques para la entrada.

Para ello trucaremos un poco la función the_tags añadiendo algo de código a nuestro plugin de funciones, este:

//Limitar tags mostradas a 5
add_filter('term_links-post_tag','limitar_tags');
function limitar_tags($terms) {
return array_slice($terms,0,5,true);
}

El valor a modificar a tu gusto de este código es el de la línea 4, poniendo los terms al número al que tu quieras limitar la visualización de etiquetas de la entrada.

Ya solo te queda asegurarte que tu tema muestra la función nativa de WordPress de “impresión” de las etiquetas, esta:

<?php the_tags() ?>

La pregunta que me vas a hacer … ¿cuales coge?, pues en este caso las 5 primeras que marques.

Tags para los Custom Post Types

nube de tags

Ya existe mucha documentación sobre cómo crear taxonomías y cómo usarlas en los custom post types, pero… ¿cómo usar las taxonomías que usa WordPress por defecto? A esta pregunta no existe mucha documentación, y menos en español. Por esto, he decidido volver a escribir en TodoWP y hacer un pequeño manual de cómo usar específicamente tags en un tipo de post personalizado.

Los ingredientes para lograrlo son:

  1. La definición o declaración del post type
  2. La conexión del tipo de post con la taxonomía
  3. El cambio en el query por defecto

Lo primero es tener el custom post type:

register_post_type('alojamiento',
array(
'labels' => array(
'name' => 'Alojamientos',
'singular_name' => 'Alojamiento'
),
'capability_type' => 'post',
'public' => true,
'supports' => array('title','editor'),
'taxonomies' => array('post_tag')
)
);

Este es un ejemplo básico de cómo se registra un post type, lo importante en este ejemplo es la linea donde se registran las posibles taxonomías para este tipo.

'taxonomies' => array('post_tag')

Nota: en esta parte no es necesario poner todas las taxonomías que se usarían. Luego se pueden crear taxonomías personalizadas para usarlas con este tipo de post.

tags

Hasta el momento aun no ponemos usarla, ¿por qué? Porque el editor no nos mostrará la caja que permite agregar las etiquetas. Para esto nuestro segundo ingrediente.


register_taxonomy_for_object_type('post_tag', 'alojamiento');

Esta última linea se coloca también en la acción init, al igual que el register_post_type. Hasta el momento todo funciona perfecto, podemos crear custom post y asignarles etiquetas. Incluso si agregamos un widget con la nube de etiquetas aparecerán las que hayamos creado y nos indicará cuántos posts tienen esa etiqueta.

Pero aún hay un problema: si en esa nube de etiquetas entramos a ver el listado de posts no veremos los de tipo especial, incluso aparecerán los posts normales, pero no los especiales.

Para esto nuestro tercer ingrediente. El problema radica en que el query que internamente tiene WordPress en el momento de solicitar los contenidos que se pasan a la plantilla para ser mostrados no incluye los post types.


function agregar_los_custom_posts($query)
{
if(is_tag() && empty($query->query_vars['suppress_filters']))
{
$post_types = array('post', 'alojamiento');
$query->set('post_type', $post_types);
return $query;
}
}
add_filter( 'pre_get_posts', 'agregar_los_custom_posts' );

Este filtro logra agregar nuestro o nuestros tipos al query en caso necesario.

Espero que esto les ayude cuando estén en sus desarrollos. Comenten sus resultados.

Como cambiar los emoticonos de WordPress (parte 2)

Ayer descubrí que desde la última actualización había perdido mis smilies personalizados, a juego con mi tema. Buscando por aquí sólo aparecía esta otra entrada, así que a currar ...

Para el que le interese que cada vez que se actualice WordPress no se pierdan sus smilies personales dejo mi solución.

Primero creo una carpeta "smilies" en la carpeta wp-content porque esta última carpeta no sufre actualizaciones.

En el fichero del tema /wp-content/themes/NOMBREdelTEMA/functions.php creo una función para las entradas y otra para los comentarios.

Para entradas

function mis_smilies1($text) {
$text = str_replace('wp-includes/images/smilies/icon_','wp-content/smilies/icon_', $text);
return $text;
}
add_filter('the_content', 'mis_smilies1');

Para los comentarios

function mis_smilies($text) {
$text=convert_smilies( convert_smilies( $text) );
$text = str_replace('wp-includes/images/smilies/icon_','wp-content/smilies/icon_', $text);
return $text;
}
add_filter('comment_text', 'mis_smilies');

Explicaciones:

(más...)

Retargeting, un paso más en la publicidad online


Como ya comenté hace semanas, estoy inmerso en el “Programa Avanzado de Marketing online” impartido por Secuoyas Academy, un curso que además de enseñar bastante sobre marketing online, me está dando el privilegio de conocer a grandes profesionales del sector, que nos cuentan su día a día, sus casos de éxito y sus creencias en cuanto a tendencias en publicidad online. Entre muchas temáticas me gustó bastante la visión del display con retargeting.

Ya han pasado cuatro semanas desde que comencé este curso de Marketing Online, semanas que están siendo frenéticas, pues el trabajo aprieta de lunes a jueves, y los viernes tengo que viajar a Madrid para asistir a las clases viernes y sábado; pero ante todo está siendo muy provechoso y estamos disfrutando de grandes charlas con muy buenos profesionales como Lakil Essady (Nurun) que nos brindó una buena clase de SEO, Roberto Carreras e Isabel Ramis (@yayel) con Social Media ó Nacho Carnés con una gran clase y unas posteriores cañitas con una charla muy interesante con varios compañeros de curso.

Con diez días de retraso hoy comento la grata impresión de la clase de Display con Nacho Carnés, y en especial el concepto de retargeting basado en la generación de impactos de valor y calidad para el usuario en base a su comportamiento anterior y consiguiendo así una afinidad mucho mayor entre usuario y anuncio en la búsqueda de generar interés hacia una acción del usuario sobre la publicidad mediante clicks, ventas, visitas, registros, fidelización, etc…

En sí el concepto es muy simple hasta ofensivo de la simplicidad que aplica; al recordarlo me viene a la cabeza un simple ejemplo de la similitud con un comercio tradicional, pues al igual que un tendero de una tienda de barrio te ofrece los productos que te suelen interesar a la voz de “¿no quieres hoy tomates? ¿te vas a llevar pollo?” sabedor de tu interés habitual en esos productos, las campañas de display a través de las cookies que guardan tags con información de comportamientos del usuario, nos permiten que los adservers muestren anuncios personalizados según comportamientos anteriores, preferencias y gustos.

El tendero guarda los tags (mis gustos habituales sobre consumo) en sus cookies particulares (en su cabeza inserta ese recuerdo) para después mostrarme campañas de retargeting (me ofrece los productos que sabe que me interesan) para intentar optimizar opciones de ventas.

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Retargeting, un paso más en la publicidad online

Mostrar artículos relacionados con un shortcode

Los shortcodes, introducidos en la versión 2.5 de WP, son una manera fácil de añadir en el editor HTML de WordPress diferentes funcionalidades, como las galerías de imágenes, la activación de tal ciertos plugins sólo para la ocasión (adición de tablas, formularios de contacto, botones de compra, …), etc.

Hoy vamos a pegar un código en functions.php que nos permitirá mostrar una lista de artículos relacionados siempre y cuando hayamos incluído cierto shortcode al final del artículo que estemos escribiendo escribiendo.

Copiar y pegar

Guardamos y regresamos a nuestros artículos. A los que les añadamos este shortcode

     [related_posts]

…mostrarán una lista de relacionados, basada en las etiquetas.

El shortcode lo podemos emplazar (he ahí otra ventaja además del poder escoger artículo a artículo si lo usamos o no) allí donde queramos: principio, mitad o final del post.

Listar artículos por frecuencia de tags en varias listas

Siempre es interesante que en nuestra web uno pueda sacar el máximo provecho al trabajo de clasificación realizado en la Administración. Una de las formas para lograr rendimiento es a través de las etiquetas, a las que hoy daremos un uso especial.

Vamos a listar 10 columnas. Cada una de ellas empieza con las 10 etiquetas más usadas en la historia de nuestro site, y dispone luego títulos de artículos etiquetados con ellas:

<?php
      $noOfTags = 10;
      $noOfPosts = 4;

      $cloudRight = get_tags("orderby=count&order=DESC&number=$noOfTags");
      foreach((array)$cloudRight as $tagRight) : ?>

          <?php
          $postsRight = new WP_Query();
          $postsRight->query("tag={$tagRight->slug}&showposts=$noOfPosts");
          ?>
          <?php if ( $postsRight->have_posts() ) :?>
            <dl class="xoxo">
              <dt><?php echo $tagRight->name ?></dt>

              <?php while ( $postsRight->have_posts() ) : $postsRight->the_post(); ?>
              <dd><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></dd>
              <?php endwhile;?>

            </dl>
          <?php endif; ?>           

      <?php
          unset($postsRight);
      endforeach; ?>

Llamamos a la nube de tags general y le pedimos el nombre de los 10 más usados. Para cada resultado lanzamos un loop que nos da título de etiqueta y 4 artículos asociados en una tabla.

Estos dos números, 10 etiquetas y 4 artículos de cada, pueden ser por supuesto modificados como mejor nos convenga. Si preferís usar listas en vez de tablas, sólo tenéis que cambiar los dl por ul, y los dt y dd por li, con algún encabezado h3 para las etiquetas.

Luego habría que darle anchura a cada lista con CSS para dar el formato de columna.

Esperamos que os sea útil este truco. ¡No dudéis en comentar!

Obtener etiquetas de una cierta (o ciertas) categoría(s)

Si queremos, en algún espacio de nuestros templates (en los archivos, el índice, single.php…), proponer un conjunto de etiquetas que reúnan posts no sólo marcados con ellas, sino que pertenezcan a una misma categoría, tenemos aquí el código para conseguirlo.

Abriremos functions.php y pegaremos lo siguiente: (copiar y pegar)

A partir de aquí, en nuestro template (por ejemplo, index.php), escogeremos el lugar que creamos más conveniente para nuestras etiquetas y escribiremos la llamada a la función:

   $args = array('categories' => '12,13,14');
   $tags = get_category_tags($args);

Por supuesto, deberemos poner los tags de apertura y cierre de PHP.

De este modo, vamos a reunir etiquetas que hayan sido usadas en artículos bajo las categorías con ID 12, 13 y 14. La identidad numérica de cada categoría la sabremos sobrevolándola con el cursor del ratón en nuestro panel de Administración.

Créditos: foros de WordPress.org

Loop: obtener etiquetas con get_posts

Cuando en WordPress nos interesa tener varios loops en una página (por ejemplo, para mostrar varias columnas, una por categoría), una de las más fáciles maneras de conseguirlo es con get_posts:

<?php
$posts = get_posts('category=vinos-blancos&numberposts=1');
foreach($posts as $post):
setup_postdata($post);
?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endforeach; ?>

En este ejemplo, estamos convocando a un artículo (numberposts=1), el último artículo que hayamos escrito de hecho, dentro de la categoría "Vinos Blancos".

Sucesivamente, en cada columna de nuestro index.php donde quisiéramos que ello ocurriera podríamos cambiar la categoría por una nueva, y disponer así de cuatro o cinco columnas por categoría (siguiendo el ejemplo: vinos blancos, vinos tintos, vinos rosados, champagne, licores…).

Si quisiéramos, sin embargo, disponer además de las etiquetas; por ejemplo, "afrutado", "seco", "fuerte", deberemos realizar un añadido especial en nuestro loop:

<?php
$posts = get_posts('category=4&numberposts=1');
foreach($posts as $post):
setup_postdata($post);
?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $posttags = get_the_tags($post->ID); if ($posttags) {
foreach($posttags as $tag) {
echo '<a href="';
echo get_tag_link($tag);
echo '">';
echo $tag->name . ' ';
echo '</a>';
}
}
?>
<?php endforeach; ?>

Como get_posts es un tipo de loop más sencillo que el normal de WordPress, necesitaremos especificar la ID numérica de cada post ($post->ID) para que WordPress nos dé, además de título y contenido, las etiquetas correspondientes enlazadas a sus archivos de etiqueta como en este caso.

Esperamos que este truco os sea útil y vuestros comentarios.