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.

Hace un tiempo atrás, bastante atrás… como un año aprox, leía sobre como trabajaba YQL y me parecía tan genial y sencilla que indagué un poco más. Utilicé meme de Yahoo un tiempo y cuando continué investigando sobre YQL, de cierta forma, me enamoré. Ahora comparto un plugin de jQuery que utiliza comandos YQL para generar un FEED de redes sociales. Acá vá, y no es necesario que pongan sal en sus bocas esta vez.

(más…)

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…)

Hace un tiempo atrás, un cliente planteó la duda sobre si su sitio podía mostrar la hora de su localidad y no de la PC del cliente. Esto era para que cuando un extranjero ingrese a su sitio, sepa que hora es en dicha localidad. Luego de algunas peleas con el código, caí con una solución en AJAX: llamar a un archivo PHP cada x tiempo que solamente contenga la funcion date(‘d/m/Y G:i:s’). Esto presentaba un problema, por lo que tuve que variar. Ahí entró en juego jQuery.

Actualización 10-08-2010, faltaban definir variables (Dah, error de novato?!)

(más…)

Bueno, en esta oportunidad les explico como utilizar fuentes tipo TTF en una web sin utilizar plugins, flash ni imágenes. Esta técnica es la que actualmente utilizo para que los títulos de los posts de mi sitio, se vean así tan bonitos. Basta de introducción y vamos a la práctica.

(más…)

Hace poco se me planteó sobre utilizar un newsticker en forma de marquesina en donde se mostrarán los últimos tweets. Para lograr esto, utilicé un plugin jQuery e hice uso de pocas lineas en JS para lograr esto.

(más…)