Viktor Hugo Morales, Blog personal

Estimados escasos lectores en éste nuevo post les voy a mostrar un shortcode el cual les permitirá insertar mapas de google en las entradas o páginas de su blog en WordPress.

El código en cuestión es sencillo:

//  permite insertar mapa de google en entradas o páginas
function gmaps_sc( $atts, $content = null ) {
extract( shortcode_atts( array(
'width' => $width,
'height' => $height,
'latlon' => $latlon,
'zoom' => ($zoom) ? $zoom : 14
), $atts ) );

if ($width || $height || $latlon)
return "<iframe width='{$width}' height='{$height}' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://maps.google.com/maps?q={$latlon}&amp;num=1&amp;ie=UTF8&amp;t=m&amp;z={$zoom}&amp;ll={$latlon}&amp;output=embed'></iframe>";
}
add_shortcode( 'gmaps', 'gmaps_sc' );

Ahora bien, cuando estén escribiendo una página o entrada, agregan el siguiente shortcode:

[+gmaps width="620" height="350" latlon="-54.791778,-68.245955" zoom="8"+]

Nota: quitar los símbolos “+” en el código anterior para que funcione.

Las opciones son las que ven:

• width, que define el ancho del mapa.
• height, define el alto del mapa.
• latlon, la latitud y longitud de la posición del mapa,
• zoom, que tan lejos o cerca se verá el objetivo. (opcional, por defecto: 14)

Hasta acá todo muy lindo, pero… ¿de donde capturamos la latitud y longitud?. Pues bien, acá los pasos:

1. Ingresan a Google Maps: maps.google.com
2. Buscan la locación en el mismo utilizando las opciones de desplazamiento y zoom.
3. En el mapa, click con el botón derecho del mouse y elejir la opción “¿Qué hay aquí?…”
4. Copiar las coordenadas arrojadas en el buscador del Google Maps.
5. ¡Voilá! Esas serán las coordenadas utilizadas en la opción “latlon” del shortcode.

Sencillo, ¿verdad?.

Quizás se les habrá planteado más de una vez poder utilizar códigos javascript en sus páginas y/o entradas de WordPress pero nunca pudieron y huyeron buscando otra solución. Ésto me pasó hace poco y en lugar de esquivar éste problema, como lo hice en veces anteriores, se me dio por buscar una solución y me volví a topar con la magia de los shortcodes.

Para lograr agregar códigos javascripts en las páginas o entradas:

1. Agregar el siguiente código en el archivo functions.php

   function vhm_sc_html( $atts, $content = null ) {
   $str1 = array("<", ">", '&', ''', '"','<', '>', "”", "″");
   $str2 = array("<", ">",'&','\'','"','<','>', '"', '"');
   $content = str_replace($str1, $str2, $content); return $content;
   }
   add_shortcode( 'html', 'vhm_sc_html' );

2. Ahora en las páginas o entradas, y donde queramos que haya código javascript, hay que encerrar el mismo en las etiquetas “[ html ] [ / html ]” (sin espacios)

Ahí la solución, sean creativos.

De pronto se me viene a la mente, mientras escuchaba una suave lluvia de fondo, tener la posibilidad de encolumnar información en las páginas o entradas de un blog en WordPress. Ante ésta inquietud, pienso unos instantes:

Mediate CSS podría hacer que los items de las listas dentro del post tengan el atributo “float: left” y con un ancho específico. Ésto haría lo que necesito.

Entonces empiezo a trabajar con el código CSS

.clear { clear: both; }
.post ol { margin: 0 auto; padding: 0; list-style-type: none; }
.post ol li { float: left; width: 300px; }

Luego, en la entrada o página, creo una lista y ¡Voilá! Me crea las columnas.

Esto resultaría según lo esperado, el problema es que nunca podría crear una lista normal, ya saben, una lista en la que quiera listar – valga la redundancia –  productos, servicios, o lo que fuese. Entonces descarto ésta opción.

Pienso un poco más y me acuerdo de los “shortcodes” de wordpress:

¡Ah! Cierto que introdujeron los Shortcodes desde wordpress 2.5 que son un set de funciones para crear macro códigos para usarlo en los contenidos de páginas o entradas.

Empiezo a estudiar sobre como crear shortcodes usando la guía oficial de wordpress. Error va, error viene, me topo con la solución:

1. Crear un archivo .php y guardarlo en una carpeta del theme (plantilla). Para éste ejemplo yo cree “shortcodes.php” y lo guardé en la carpeta “incs” dentro de mi plantilla.
2. Copiar y pegar el siguiente código dentro del archivo creado en el paso anterior:

   // [cols] crea una capa <div> con la clase "cols" function
   vhm_sc_cols( $atts, $content = null ) {
   return '<div class="cols">' . do_shortcode($content) . '</div><div class="clear"></div>';
    }
    add_shortcode( 'cols', 'vhm_sc_cols' );
   

3. Abrir el archivo “functions.php” y añadir el siguiente código:

   include(TEMPLATEPATH . '/incs/shortcodes.php'); // Recuerden cambiar /incs/shortcodes.php por la ruta de su archivo.
   

4. Ahora vamos con el código CSS

   .cols ol { margin: 0 auto; padding: 0; list-style-type: none;  }
   .cols ol li { float: left; width: 300px; margin: 0 2px; }
   

Ya con ésto tenemos todo listo. Ahora vamos a crear una nueva página o entrada en wordpress y en un párrafo a parte, donde queramos encolumnar la información:

1. Iniciamos la etiqueta [cols].
2. Clickeamos el botón de “Lista sin ordenar (Alt + Shit + U)” del panel de botones del editor de texto.
3. Escribimos la información en cada item, los cuales harán las veces de columnas – ver CSS -.
4. Cerramos la etiqueta [/cols]

Al publicar ésta entrada o página y verla en funcionamiento, debería funcionar sin problemas – ver la imagen del post para apreciar el ejemplo -

En un nuevo trabajo con un cliente me surgieron más inquietudes/soluciones que de seguro las iré compartiendo.

Bueno bueno, otro tiempo sin escribir… y ahora decidido a compartir otro código con ustedes. Esta vez les paso una función para que puedan agregarla en los loops y que la misma seleccionará una imagen de la galería de imágenes del post y la mostrará, o si especifican un campo personalizado, que muestre dicha imagen. Vamos al código y dejemos las charlas de más.

(más…)

Hace pocos días atrás, conversando con @studiopatagonia, nos planteabamos la tarea de saber si podíamos ordenar las entradas de una categoría según la valoracion de los usuarios utilizando el plugin WP-PostRatings de Lester ‘GaMerZ’ Chan. Investigando un poco y sabiendo que se pueden utilizar los campos personalizados para tal fin, me topé con el código que solucionó este problema.

(más…)