Sucede que WordPress te permite, gracias a la API de oembed, auto-embeber facilmente videos y fotos de otros servicios con tan solo pegar la URL del recurso a compartir.

Mi problema era que el código creado me superponía (z-index) los videos sobre todos los elementos HTML. La solución fue crear un filtro en WordPress (add_filter) que agregue el parámetro WMODE al IFRAME u OBJECT creado por oembed. Agreguen la siguiente función en el archivo function.php de la plantilla:

Esto agregará a la URL embebida el parámetro “wmode=opaque”, ya sea OBJECT o IFRAME.

Si embeben los videos manualmente, lo que deben hacer es agregar éste parámetro a la variable GET del servicio en cuestión. Como ejemplo, en YouTube sería de la siguiente forma:

<iframe width=”420″ height=”315″ src=”http://www.youtube.com/embed/6ituf7OslK0?wmode=opaque” frameborder=”0″ allowfullscreen></iframe>

Como siempre, espero que lo compartido sea útil.

Relacionados: add_filter, html, iframe, maquetacion, object, oembed, php, wordpress, z-index

Resulta ser que utilizo PasteBin y jsFiddle para compartir códigos con amigos y me planteé la duda existencial de si podía utilizar estos medios para compartir códigos en mi blog. Para mi suerte, ambos servicios te dan la opción de embeber los mismos en tu página a través de la etiqueta IFRAME. Bien sabemos que si queremos insertar directamente etiquetas IFRAME en nuestro blog, éste no lo permitirá, por lo que es ahí cuando entra en juego éste shortcode.

Bien, para ésto tuve que crear el siguiente código para WordPress en el archivo functions.php:

El ejemplo anterior es el resultado de PasteBin y el siguiente es el resultado de jsFiddle.

Hasta antes de dar con éste resultado, utilizaba el plugin “sintax highlighter“, pero con ésto, podré utilizar mis códigos en PasteBin y jsFiddle.

Espero les sea útil. ¡Saludos!

Relacionados: css, iframe, javascript, jsFiddle, PasteBin, php, shortcodes, wordpress

Bueno, para muchos wordpress developers ésto debe ser familiar puesto a que la referencia oficial dice que la función nativa para paginar existe desde la 2.1.0. Hasta hoy, utilizaba el plugin “PageNavi”; luego de haber caído, hasta casi por milagro, diría yo, con ésta función nativa de WordPress, la comparto con el mundo para que puedan implementarlo en sus sitios.

Siga los pasos marcados como comentario para utilizar correctamente ésta función:

Y listo. Bastante sencillo, ¿Verdad?.

Fuente: codex.wordpress.org/Function_Reference/paginate_links

Relacionados: funciones, pagenavi, paginador, php, wordpress

Hace un tiempo había visto una web en donde en la sección de comentarios de un post usaba tabs para alternar entre los comentarios del blog y el plugin comments de Facebook. Lo que llamó mi atención fue ver que en la tab de facebook tenía el número de comentarios obtenidos de dicho plugin. Planteado el problema, comencé a investigar y luego de exhaustivas búsquedas, preguntas, prácticas y un largo etcétera caigo con la solución y la comparto con el mundo.

Descargar Facebook PHP-SDK

El PHP-SDK nos provee funcionalidades del lado del servidor para poder acceder a la API de Facebook. Esto incluye todas las características de la Graph API, FQL y las REST API.

Lo pueden descargar desde acá. Una vez descargado, lo descomprimen y suben al servidor donde tienen su web.

Obtener API de Facebook

Podemos obtener los datos necesarios para continuar trabajando, ingresando a la pagina de developers facebook y crear una nueva aplicación.

Función PHP para mostrar los comentarios

Ahora vamos con la parte divertida: el código para mostrar la cantidad de comentarios del plugin. Vean los comentarios en el código para no perder el hilo

// Incluir el archivo "facebook.php" que descargamos del Facebook PHP-SDK
require_once( TEMPLATEPATH . "/incs/facebook-php-sdk/facebook.php");
 // Creamos la instancia (reemplazar los valores con los datos obtenidos al momento de crear la aplicación).
 $facebook = new Facebook(array(
 'appId' => 'xxxxxxxxxxxxxx',
 'secret' => 'xxxxxxxxxxxxxxxxxxxxxxxxx',
 ));
// Creamos la función. Yo la llamé "facebook_comment()".
 function facebook_comment($url)
 {
 global $facebook;

// Indicamos a facebook que usaremos el método "FQL" y en el query realizamos la consulta
$ret = $facebook->api(array(
'method' => 'fql.query',
'query' => 'SELECT url, commentsbox_count FROM link_stat WHERE url="'.$url.'"'
));

echo $ret[0]['commentsbox_count']; # Imprimimos en pantalla el resultado
 }

Mostrar la cantidad de comentarios en la plantilla.

Ahora solo nos queda ubicar la función con la URL como parámetro para que muestre la cantidad de comentarios del plugin Comments de Facebook.

<?php facebook_comment( get_permalink() ); ?>

Alternativa sencilla.

Si en su sitio solo desean mostrar los comentarios y no ven necesidad alguna para utilizar el PHP-SDK de Facebook, la solución más sencilla y directo a lo que buscamos es utilizar un código html que el mismo Facebook proporciona y lo pueden conseguir en el siguiente enlace. Busquen la sección “FAQ” y verán la pregunta “How do I access the number of comments left of my page?”. Ahí tendrán todo lo necesario en una sola porción de código.

Conclusión.

Con ésta sencilla función y el uso del PHP-SDK de Facebook, podemos hacer muchísimas cosas. Para ser mi primera vez que trabajo con ésta herramienta, el resultado obtenido me funcionó a la perfección.

¡A continuar investigando!

Relacionados: facebook, php, plugin, sdk, wordpress

¡Uff! Costó, pero logré hacerlo. “VHM Bitly” es mi primer plugin OOP para WordPress. Una vez instalado, lo que hace éste plugin es crear (o actualizar) una URL corta de la entrada o página usando la API de bit.ly.

Instalación

1. Descargar el plugin
2. Subir la carpeta `vhm-bitly` a `/wp-content/plugins/`
3. Activar el plugin a traves de la opcion `Plugins` en WordPress
4. Escriba el codigo `<?php if (function_exists(“the_bitly”)) { the_bitly(); } ?>` en la plantilla donde quiera mostrar la URL corta.

Dejen sus comentarios, dudas, mejoras, etc. en éste post y con gusto iré resolviéndolas.

Relacionados: bitly, php, plugin, wordpress

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?.

Relacionados: php, shortcodes, wordpress

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.

Relacionados: javascript, php, shortcodes, wordpress

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.

Relacionados: css, php, programación, shortcodes, wordpress

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

Relacionados: funciones, galería de fotos, php, wordpress