Posts Tagged: Experto

« Older Entries

Marzo 11th, 2010

Usando shortcodes en todas partes

Tags: , , , , , , , , , ,
Posted in WordPress | Comentarios desactivados

hack wordpress

Ya hemos visto muchas maneras de personalizar WordPress con shortcodes pero estas pequeñas maravillas pueden usarse en muchos más sitios que en el editor de entradas, aquí tienes unos cuantos buenos ejemplos … 

Shorcodes en widgets de texto

Lo primero es añadir este código al fichero functions.php de tu tema activo:

Clic para ver Texto Plano
PHP:
  1. add_filter( 'widget_text', 'shortcode_unautop');
  2. add_filter( 'widget_text', 'do_shortcode');

La segunda línea es la que hace que funcionen los shortcodes en el widget de texto. Además, hay que tener en cuenta que los widgets de texto tienen una casilla para "añadir saltos de párrafo automáticamente", pues bien, la segunda linea inhabilita el código autop que podría, en caso de estar marcada la casilla, meter el shortcode introducido en un párrafo o incluso romper las tags.

Shortcodes en el tema

También se pueden usar shortcodes en el tema que uses. Para ello utilizamos la función do_shortcode() en la que el argumento será una cadena que contendrá el shortcode.

Por ejemplo, para mostrar el shortcode [publicidad] en tu tema pondrías algo así donde quieras que aparezca el resultado esperado:

Clic para ver Texto Plano
PHP:
  1. <?php do_shortcode('[publicidad]'); ?>

La función do_shortcode() acepta cualquier tipo de texto. Si la cadena contiene un shortcode procesará ese código. De este modo, por ejemplo, podrías mostrar manualmente contenido de tus entradas de este modo:

Clic para ver Texto Plano
PHP:
  1. <?php
  2. $content = get_the_content();
  3. echo do_shortcode($content);
  4. ?>

Shortcodes en comentarios

De nuevo recurrimos al fichero functions.php para añadirle este código que permite shortcodes en los campos de comentarios:

Clic para ver Texto Plano
PHP:
  1. add_filter( 'comment_text', 'shortcode_unautop');
  2. add_filter( 'comment_text', 'do_shortcode' );

Shortcodes en extractos

Ahora, en functions.php añadiremos esto para poder insertar shortcodes en los extractos de entrada:

Clic para ver Texto Plano
PHP:
  1. add_filter( 'the_excerpt', 'shortcode_unautop');
  2. add_filter( 'the_excerpt', 'do_shortcode');

Shortcodes en la descripción de usuario

Para poder meter shortcodes en la descripción del usuario hay que pasar la cadena de descripción por la función do_shortcode(). Para ello tendrás que añadir esto a tu tema activo:

Clic para ver Texto Plano
PHP:
  1. <?php
  2. // $user_id = 3;
  3. $userdata = get_userdata($user_id);
  4. echo do_shortcode($userdata->description);
  5. ?>

Solo tendrás que cambiar el ID de usuario, en este caso el 3.

Shortcodes en descripciones de etiquetas, categorías y taxonomías

También puedes filtrar estas descripciones. Para ello recurrimos de nuevo al fichero functions.php:

Clic para ver Texto Plano
PHP:
  1. add_filter( 'term_description', 'shortcode_unautop');
  2. add_filter( 'term_description', 'do_shortcode' );

Un mundo de posibilidades más ¿no?

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Marzo 8th, 2010

Prepara tu sitio para iPhone

Tags: , , , , , , , , , , , ,
Posted in WordPress | Comentarios desactivados

Impresionante la recopilación realizada por Cats who code sobre códigos con los que adaptar tu sitio a la visualización en iPhone. Como creo que es de un gran interés para desarrolladores y usuarios avanzados y que, por supuesto, son aplicables a WordPress, aquí los tienes con alguna adaptación a nuestro entorno:

Detectar iPhones e iPods usando Javascript

Al desarrollar para iPhone o iPod Touch lo primero que hay que hacer es detectarlo para que, luego, le apliquemos códigos o estilos. El siguiente código d etecta iPhones o iPods usando Javascript, y los redirige a una página  específica para iPhone.

Clic para ver Texto Plano
JavaScript:
  1. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  2.     if (document.cookie.indexOf("iphone_redirect=false") == -1) {
  3.         window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
  4.     }
  5. }

Fuente: http://davidwalsh.name/detect-iphone

Detectar iPhones e iPods usando PHP

Aunque el código anterior funciona de maravilla puede que Javascript esté desactivado en el iPhone. Si fuera el caso puedes usar PHP para detectar iPhones o iPods Touch.

Clic para ver Texto Plano
PHP:
  1. if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
  2.     header('Location: http://yoursite.com/iphone');
  3.     exit();
  4. }

Fuente: http://davidwalsh.name/detect-iphone

Definir el ancho de iPhone como viewport

En muchas ocasiones visitas una web con tu iPhone y la ves en miniatura. La razón es que el desarrollador olvidó definir el viewport (o no sabe que existe). La declaración de width=device-width te permite definir el ancho del documento al ancho de la pantalla del iPhone. Las otras dos declaraciones son muy útiles si estás desarrollando un sitio  "solo para iPhone". En caso contrario puedes borrar estas dos declaraciones.
Definir un viewport es fácil: Simplemente inserta el siguiente meta en la sección "head" de tu sitio (fichero "index.php" de la plantilla activa):

Clic para ver Texto Plano
PHP:
  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Insertar un icono específico para iPhone

Cuando un usuario añade tu web a su página de inicio el iPhone usa una captura de pantalla de tu sitio como icono. Pero tu puedes ofrecer un icono específico, lo que es mucho mejor.
Definir un icono personalizado para iPhone es fácil: Simplemente pega el siguiente código en la sección "head" de tu sitio (fichero "index.php" de la plantilla activa). La imagen debe ser de 57px por 57px en formato .png. No tienes por qué añadir brillos o esquinas ya que el iPhone las añade automáticamente:

Clic para ver Texto Plano
PHP:
  1. <rel="apple-touch-icon" href="images/template/engage.png"/>

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Evitar que Safari ajuste el tamaño de texto al rotar

Cuando rotas el iPhone, Safarie ajusta el tamaño de texto. Si por algún motivo prefieres evitar este efecto solo tienes que usar el siguiente CSS, que tendrás que añadir a tu hoja de estilos (fichero "style.css" de tu plantilla activa).
La declaración -webkit-text-size-adjust es una propiedad CSS exclusiva de webkit que permite controlar el ajuste de texto.

Clic para ver Texto Plano
CSS:
  1. html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  2.     -webkit-text-size-adjust:none;
  3. }

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Detectar la orientación del iPhone

Como el iPhone permite ver la página en vertical o apaisdo puede que necesites detectar en qué modo el documento será visible.
Esta función Javascript detecta la orientación actual del iPhone y aplica una clase CSS específica para cada modo de orientación. Fíjate que en este ejemplo la clase CSS se añade al ID del  page_wrapper. Remplázalo por el nombre de ID deseado (línea 24)

Clic para ver Texto Plano
CSS:
  1. window.onload = function initialLoad() {
  2.     updateOrientation();
  3. }
  4.  
  5. function updateOrientation(){
  6.     var contentType = "show_";
  7.     switch(window.orientation){
  8.         case 0:
  9.     contentType += "normal";
  10.     break;
  11.  
  12.     case -90:
  13.     contentType += "right";
  14.     break;
  15.  
  16.     case 90:
  17.     contentType += "left";
  18.     break;
  19.  
  20.     case 180:
  21.     contentType += "flipped";
  22.     break;
  23.     }
  24.     document.getElementById("page_wrapper").setAttribute("class", contentType);
  25. }

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Aplicar estilos CSS solo para iPhones/iPods

Si buscas un modo limpio de aplicar clases CSS solo para iPhone puedes usar el siguiente código:

Clic para ver Texto Plano
CSS:
  1. @media screen and (max-device-width: 480px){
  2.     /* Todo el CSS para iPhone va aqui */
  3. }

Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

Redimensionar imágenes automáticamente para iPhones

En las webs actuales la mayoría de las imágenes suelen ser de un ancho superior a 480px. Al ser de este tamaño la pantalla del iPhone puede que las imágenes más grandes se vean incorrectamente, incluso destrozando el diseño de tu sitio.

Pues bien, usando el siguiente código CSS podrás redimensionar automáticamente las imágenes que sean de un ancho mayor de 480px, el ancho estándar del iPhone, con lo que nunca se verán más anchas y no desconfigurarán tu sitio al visualizarse en un iPhone.

Clic para ver Texto Plano
CSS:
  1. @media screen and (max-device-width: 480px){
  2.     img{
  3.         max-width:100%;
  4.         height:auto;
  5.     }
  6. }

Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

Ocultar la barra de tareas por defecto

La barra de tareas es útil pero a veces ocupa demasiado sitio, que vendría estupendo para mostrar mejor tu web. Si quieres que Safari oculte la barra por defecto cuando un usuario de iPhone visite tu sitio solo tienes que añadir el siguiente Javascript:

Clic para ver Texto Plano
JavaScript:
  1. window.addEventListener('load', function() {
  2.     setTimeout(scrollTo, 0, 0, 1);
  3. }, false);

Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/2

Usar enlaces especiales

Al igual que con los enlaces "mailto", tan útiles para que te envíen emails, si se visualiza tu web con un iPhone puedes añadir otro tipo de enlaces que ejecutarán acciones, gracias a la función de teléfono de este miniordenador de bolsillo.

Si quieres ofrecer enlaces para que te llamen o te envíen un SMS puedes usar códigos html de este tipo:

Clic para ver Texto Plano
HTML:
  1. <a href="tel:12345678900">Llámame</a>

Clic para ver Texto Plano
HTML:
  1. <a href="sms:12345678900">Mándame un SMS</a>

Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/3

Simular la clase pseudo :hover

Como no se usa ratón en el iPhone no se utiliza la pseudo clase :hover. Sin embargo,  usando Javascript puedes simular la clase pseudo :hover cuando el usuario apoye el dedo sobre un enlace:

Clic para ver Texto Plano
JavaScript:
  1. var myLinks = document.getElementsByTagName('a');
  2. for(var i = 0; i <myLinks.length; i++){
  3.    myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
  4.    myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
  5. }

Tras añadir el código anterior puedes aplicar algo de estilo CSS:

Clic para ver Texto Plano
CSS:
  1. a:hover, a.hover {
  2.     /* el efecto hover que sea*/
  3. }

Fuente: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía para Administrar Wordpress

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 23rd, 2010

ThumbGen – Plugin para generar miniaturas

Tags: , , , , , , ,
Posted in WordPress | Comentarios desactivados

Me acaba de avisar Sebastián Barría que ha liberado un nuevo plugin: ThumbGen. Lo que ofrece esta pieza de código es autogenerar miniaturas desde cualquier imagen cargada en tu WordPress.

No es, eso si, un plugin para el público recién llegado a WordPress sino dirigido a desarrolladores que quieran incorporar la función que habilita el plugin: thumbGen().

Usarlo, no obstante, es bastante sencillo. Solo tienes que descargarlo, subirlo y activarlo, o instalarlo sin salir de WordPress.

En la página oficial del plugin tienes el modo de uso, que Sebastián promete traducir al español pronto, pero vamos, que no es complicado, solo son unos parámetros a aplicar dependiendo de como quieres que se genere y/o ajuste la miniatura.

La sintáxis básica es esta:

Clic para ver Texto Plano
PHP:
  1. <?php thumbGen(image,width,height,crop,center,grayscale); ?>

Un ejemplo sería este:

Clic para ver Texto Plano
PHP:
  1. <?php
  2. $img="";
  3. $args = array(
  4. 'post_parent'    => $post->ID,
  5. 'post_type'      => 'attachment',
  6. 'numberposts'    => 1,
  7. 'post_mime_type' => 'image'
  8. );
  9. $attachs = get_posts($args);
  10. if ($attachs) {
  11. $img=wp_get_attachment_image_src($attachs[0]->ID,'full');
  12. }
  13. if(!empty($img)){
  14. ?>
  15. <img src='<?php thumbGen($img[0],171,56,1,1,0); ?>' alt='' />
  16. <?php
  17. }
  18. ?>

En este ejemplo se lee la primera imagen de la entrada y guarda su información en una variable llamada $img. En la función thumbGen el primer parámetro es $img[0] que es la url de la imagen. El segundo y tercer parámetros son el ancho y la altura de la miniatura generada. El resto de los parámetros son el recorte (crop) y las opciones de centrado y escala de grises.

En cualquier caso una gran aportación de la comunidad hispana a WordPress que, por supuesto, estoy encantado de compartir. A ver si se animan más de los estupendos desarrolladores que hay.

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía Domina tu Blog

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 17th, 2010

Miniaturas en el menú de entradas

Tags: , , , , , , , , ,
Posted in WordPress | Comentarios desactivados

Curioso, aunque no sé si práctico, este truco que permite visualizar las miniaturas de entrada introducidas a partir de WordPress 2.9, también en la ventana de administración de entradas.

Para obtener el resultado de la captura solo tienes que añadir el siguiente código al fichero functions.php de tu tema activo:

Clic para ver Texto Plano
PHP:
  1. //miniaturas en admin de entradas
  2. if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {
  3.  
  4.     // para entrada y página
  5.     add_theme_support('post-thumbnails', array( 'post', 'page' ) );
  6.  
  7.     function fb_AddThumbColumn($cols) {
  8.  
  9.         $cols['thumbnail'] = __('Miniatura');
  10.  
  11.         return $cols;
  12.     }
  13.  
  14.     function fb_AddThumbValue($column_name, $post_id) {
  15.  
  16.             $width = (int) 35;
  17.             $height = (int) 35;
  18.  
  19.             if ( 'thumbnail' == $column_name ) {
  20.                 // miniatura de WP 2.9
  21.                 $thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
  22.                 // imagen de la galería
  23.                 $attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
  24.                 if ($thumbnail_id)
  25.                     $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
  26.                 elseif ($attachments) {
  27.                     foreach ( $attachments as $attachment_id => $attachment ) {
  28.                         $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
  29.                     }
  30.                 }
  31.                     if ( isset($thumb) && $thumb ) {
  32.                         echo $thumb;
  33.                     } else {
  34.                         echo __('Ninguna');
  35.                     }
  36.             }
  37.     }
  38.  
  39.     // para entradas
  40.     add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );
  41.     add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );
  42.  
  43.     // para páginas
  44.     add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );
  45.     add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );
  46. }

Una vez guardes los cambios añade una columna adicional en la que, si has definido una miniatura de entrada, la mostrará.

Se me antoja útil para identificar rápidamente entradas sin leer los títulos, por ejemplo ¿se te ocurre alguna otra utilidad¿

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 7th, 2010

Quitar la leyenda de “Privado” y/o “Protegido”

Tags: , , , , , ,
Posted in WordPress | Comentarios desactivados

Crear una entrada o página privada o protegida por contraseña es bien sencillo con WordPress, solo tienes que modificar las opciones de publicación en el editor y definirla como privada o incluso asignarle una contraseña para visualizarla.

Ahora bien, como ya sabes, al principio del título de la entrada se añade la leyenda "Privado:xxx" o "Protegido:xxx", según el caso, y en ocasiones eso es un engorro, ya sea por estética o por gusto personal.

Pues en el foro de soporte oficial se propuso un modo, sencillo, de eliminar o sustituir por otro texto estas leyendas en tus entradas y/o páginas privadas y protegidas. Solo tienes que pegar este código en el fichero 'functions.php' de tu tema activo para que no se muestren:

Clic para ver Texto Plano
PHP:
  1. function the_title_trim($title) {
  2.     // También puedes usar esta función para los atributos de escape
  3.     $title = attribute_escape($title);
  4.     // Esto busca en el título
  5.     $findthese = array(
  6.         '#Protegido:#', // # esto es solo el delimitador
  7.         '#Privado:#'
  8.     );
  9.     // Con lo que quieres remplazarlo
  10.     $replacewith = array(
  11.         'a', // Con lo que remplazas las protegidas
  12.         'b' // Con lo que remplazas las privadas
  13.     );
  14.     // Elementos a remplazar con la clave array
  15.     $title = preg_replace($findthese, $replacewith, $title);
  16.     return $title;
  17. }
  18. add_filter('the_title', 'the_title_trim');

Guardas el fichero y ya lo tienes. Fácil ¿eh?

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 7th, 2010

Como migrar usuarios de bbPress a WordPress

Tags: , , , , , , , , , ,
Posted in WordPress | Comentarios desactivados

Cuando se habla de integrar WordPress y bbPress normalmente se parte de la idea de que ya dispones de una base de usuarios en tu WordPress y lo que pretendes es que una reciente instalación de bbPress permita que esos usuarios accedan a los foros con su mismos datos.

Hasta ahí bien, pero ¿y si lo que quieres es lo contrario?, si ya tienes una base de usuarios en bbPress y quieres que tengan acceso también a WordPress.

La cosa se complica pero siguiendo estos sencillos pasos puedes lograrlo:

  1. Accede a PHPmyAdmin y exporta la tabla 'bb_users' (si usas otro prefijo adaptas este paso a tu configuración) como fichero de Excel csv.
  2. Abre el fichero csv y elimina el usuario con el ID 1 que será el Admin, para así compartir el usuario.
  3. Renombra el archivo csv a algo como 'users.csv'.
  4. Sube el fichero 'users.csv' a la carpeta de tu tema activo en WordPress.
  5. Edita el fichero 'functions.php' de tu tema activo y añádele el siguiente código:
    Clic para ver Texto Plano
    PHP:
    1. global $wpdb;
    2. require ( ABSPATH . WPINC . '/registration.php' );
    3. $file_handle = fopen(TEMPLATEPATH . "/users.csv", "r");
    4. while (!feof($file_handle) ) {
    5.   $field = fgetcsv($file_handle, 1024);
    6.   $ID = $field[0];
    7.   $user_login = $field[1];
    8.   $user_pass = $field[2];
    9.   $user_nicename = $field[3];
    10.   $user_email = $field[4];
    11.   $user_URL = $field[5];
    12.   $user_registered =  date("Y-m-d H:i:s", strtotime($field[6]));
    13.   $user_status = $field[7];
    14.   $display_name = $field[8];   
    15.   $adduser = "
    16.   INSERT INTO $wpdb->users
    17.     (ID, user_login, user_pass, user_nicename, user_email, user_URL, user_registered, user_status, display_name)
    18.   VALUES
    19.     ('$ID', '$user_login', '$user_pass', '$user_nicename', '$user_email', '$user_URL', '$user_registered', '$user_status', '$display_name')
    20.   ";
    21.   $results = $wpdb->query( $adduser );
    22.   $data = array(
    23.     "ID" => $ID,
    24.     "role" => 'subscriber'
    25.   );
    26.   wp_update_user($data);
    27. }
    28. fclose($file_handle);

  6. Guarda los cambios

    7. Lo que tienes es los usuarios de bbPress en WordPress. Entra y compruébalo.

  7. A partir de aquí sigues con la integración como vimos en este tutorial

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía Domina tu Blog

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 1st, 2010

Plantillas de autor en WordPress 3.0

Tags: , , , , , , ,
Posted in WordPress | Comentarios desactivados

En WordPress 3.0, como nos avisa WP Engineer, será posible usar plantillas para autores específicos. La función 'get_author_template()' se ha expandido en el archivo 'wp-includes/theme.php'.

A partir de WordPress 3.0 puedes crear, por ejemplo, una plantilla llamada author-fernando.php o author-123.php, a la que puedes hacer una llamada desde la jerarquía de plantillas de WordPress, ya sea para que conecte con el nombre de usuario amigable (fernando) o el ID (123). Es, básicamente, la misma funcionalidad que hoy tenemos para las categorías, y que podemos aplicar para crear un loop especial o una plantilla personalizada.

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Enero 22nd, 2010

Insertar Google Maps con shortcode

Tags: , , , , , ,
Posted in WordPress | Comentarios desactivados

Insertar un mapa de Google Maps es en realidad muy sencillo, solo tienes que copiar y pegar el código que se te ofrece al crear la ruta o mapa en tu editor HTML y este se mostrará en todo su explendor en tu web. Ahora bien, cuando andas cambiando al editor visual, o si acostumbras a usar solo el modo visual, es más, cuando tienes un cliente que no usa el editor de código, entonces tienes un problema.

Y es que los códigos de Google Maps en ocasiones se pierden al pasar de un editor a otro y, por supuesto, si los pegas en el editor visual no se van a mostrar.

En estos casos puedes recurrir a insertarlos con un shortcode. Para conseguirlo primero tenemos que crear la función que lo permita, y recurriremos - como no - al fichero functions.php de nuestro tema activo (¡ay madre como un día desaparezca este fichero!) y allí introducimos un código como este:

Clic para ver Texto Plano
PHP:
  1. //Google Maps Shortcode
  2. function fn_googleMaps($atts, $content = null) {
  3.    extract(shortcode_atts(array(
  4.       "width" => '640',
  5.       "height" => '480',
  6.       "src" => ''
  7.    ), $atts));
  8.    return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'"></iframe>';
  9. }
  10. add_shortcode("googlemap", "fn_googleMaps");

¿Cosas que puedes cambiar en este código?, pues el tamaño por ejemplo, y ponerlo a uno que se adapte al ancho de tu tema, o el nombre del shortcode, en este caso googlemap.

Luego, una vez guardados los cambios en el fichero functions.php solo tienes que, ya en el editor visual si quieres, insertar tu mapa de Google solo poniendo la URL entre el nuevo shortcode creado, algo así … 

Clic para ver Texto Plano
PHP:
  1. [googlemap src="[url]"]

En vez de [url] pones la URL que te facilita Google Maps desde el icono de "Enlazar" y ya lo tienes.

Si no quieres modificar el código por defecto, también puedes modificar el tamaño en cada shortcode, por ejemplo … 

Clic para ver Texto Plano
PHP:
  1. [googlemap width="400" height="200" src="[url]"]

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Enero 22nd, 2010

Utilizar última versión de prototype automáticamente…

Tags: , , , , , , ,
Posted in WordPress | Comentarios desactivados

Hola a todos, sabemos que prototype es una librería utilizada casi por todo aquel que utiliza wordpress, y bueno leyendo el artículo para utilizar jQuery automáticamente, me decidí a probar con prototype y solo modifique el código que mencionaban en ese post y lo agregué en el functions.php de mi theme activo, quedando de esta forma:

Clic para ver Texto Plano
PHP:
  1. //Función para utilizar siempre el prototype actualizado
  2. if( !is_admin()){
  3. wp_deregister_script('prototype');
  4. wp_register_script('prototype', ("http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"), false, '');
  5. wp_enqueue_script('prototype');
  6. }

Y como indican allí, si tienen un error en la carga de sus scripts, solo tienen que borrar esas líneas del fichero functions.php; cabe indicar que para utilizar siempre la última librería dentro de la versión 1, se indica la ruta prototype/1/prototype.js, pero si desean utilizar la última librería dentro de l versión 1.6 deben utilizar la ruta prototype/1.6/prototype.js y si desean indicar una versión específica como la 1.6.0.2, deben utilizar prototype/1.6.0.2/prototype.js y eso sería todo, espero que sea de ayuda.

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Enero 18th, 2010

Usa la última versión de jQuery automáticamente

Tags: , , , , , , ,
Posted in WordPress | Comentarios desactivados

Si usas jQuery en tu sitio creado con WordPress y quieres siempre disponer de la última versión, y que encima no tengas que alojarla en tu servidor sino que la cargue directamente desde los servidores de alta velocidad de Google solo tienes que copiar este código en el fichero functions.php de tu tema activo:

Clic para ver Texto Plano
PHP:
  1. if( !is_admin()){
  2.    wp_deregister_script('jquery');
  3.    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
  4.    wp_enqueue_script('jquery');
  5. }

Lo que hace este código es cargar la última versión disponible desde los servidores CDN de Google, de ahí que cargue la carpeta "/jquery/1/" en vez de desde la carpeta de la versión disponible en tu sitio. Este código realmente "puentea" la versión que tengas instalada y usa la última disponible en Google.

Ahora bien, usa esto con precaución, comprobando que tus scripts funcionan correctamente tras guardar los cambios en el fichero functions.php. Si algo no fuera bien simplemente borra las líneas añadidas y sigue usando la versión alojada en tu servidor.

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

« Older Entries