10 consejos útiles para mejorar tu experiencia con WordPress
- Autor Pablito
- Fecha de inicio
4. Incluir imágenes en el contenido del post
El problema. Usar los campos personalizados para mostrar las imágenes vinculadas a tus posts es una gran idea, pero a muchos usuarios de WordPress les gustaría dar con una solución para conseguir incrustar las imágenes en el mismo contenido del post.
La solución. Hasta donde yo se, no hay ningún plug-in para conseguir esto. Por suerte, el siguiente bucle nos lo solucionará: buscará imágenes en el contenido de los posts y los mostrará en pantalla.
1.Pega el siguiente código en cualquier lugar de tu theme:
Citar:
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?><?php$szPostContent = $post->post_content;$szSearchPattern = '~<img [^\>]*\ />~';// Run preg_match_all to grab all the images and save the results in $aPicspreg_match_all( $szSearchPattern, $szPostContent, $aPics );// Check to see if we have at least 1 image$iNumberOfPics = count($aPics[0]);if ( $iNumberOfPics > 0 ) { // Now here you would do whatever you need to do with the images // For this example the images are just displayed for ( $i=0; $i < $iNumberOfPics ; $i++ ) { echo $aPics[0][$i]; };};endwhile;endif;?>
Explicación del código. El código que acabas de utilizar consiste, básicamente, simplemente, en un bucle básico de WordPress. La única diferencia es que hemos utilizado PHP y expresiones normales para buscar imágenes dentro del contenido de los posts en lugar de mostrar los posts únicamente. De esta manera, si las imágenes se encuentran, se mostrarán.
5.Crea un botón de “Enviar a Twitter”
El problema. ¿Estás en Twitter? Si lo estás, ya sabrás lo bueno que es este servicio para compartir online con tus amigos todo lo que encuentres interesante. Así que, ¿por qué no darle a tus lectores la oportunidad de enviar directamente el link de tus posts a Twitter, trayéndote así más visitantes?
La solución. Este truco es muy fácil de conseguir. Lo único que tienes que hacer es crear un link a Twitter con el parámetro de status. Como estamos en un blog de WordPress, utilizaremos la función the_permalink() para obtener la URL:
Citar:
<a rel="nofollow" href="http://twitter.com/home?status=Currently reading <?php the_permalink();
Como ves, es muy fácil, pero al mismo tiempo muy útil.
6. Usar comillas normales en lugar de las comillas inglesas
El problema. Si eres un desarrollador que suele publicar pedazos de códigos en tu sitio web, probablemente te habrás encontrado con el siguiente problema: un usuario te dice que tu el código que has posteado no funciona. ¿Por qué? Simplemente porque, por defecto, WordPress transforma las comillas normales en las comillas inglesas, aquellas que se conocen como “smart quotes”, con las que no funcionan los códigos.
La solución. Para deshacerte de este tipo de comillas, haz lo siguiente:
1.Abre el archivo functions.php de tu plantilla. Si este archivo no existe, créalo.
2.Pega en él el siguiente código:
Citar:
Citar:
<?php remove_filter('the_content', 'wptexturize'); ?>
3.Guarda el archivo y adiós al problema.
Explicación del código. La función wptexturize ()convierte automáticamente las comillas normales en comillas inglesas. Utilizando la función remove_filter() le estamos diciendo a WordPress que no queremos que esta función se aplique al contenido de nuestros posts.
7. No permitir las peticiones de comentarios sin referencia.
El problema. El spam es un problema para todos los bloggers. Está claro que Akismet ayuda, pero ¿qué hay de malo en prevenir más, si cabe, el spam? El siguiente código buscará la referencia (la URL desde donde se ha llamado a la página) cuando se esté accediendo al archivo wp-comments-posts.php. Si la referencia existe, o si es la URL de tu blog, se permitirá el comentario. Por el contrario, si la referencia no existe, la página dejará de cargarse y el comentario no se posteará.
La solución. Para aplicar este truco, simplemente pega el siguiente código en el archivo function.php de tu plantilla. Si la plantilla no incluye este archivo, créalo.
Citar:
function check_referrer() { if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == “”) { wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, bugger off!') );}}add_action('check_comment_flood', 'check_referrer');
8. Utilizar CSS Sliding Doors en la navegación de WordPress
Antes de empezar, aclaro que no he traducido el término “Sliding Doors” porque no se cómo traducirlo literlamente (?). De todas formas, es fácil de explicar: un sliding door es un determinado efecto (modificable con el CSS) que tiene lugar al pasar el puntero por una determinada zona (normalmente, un menú de navegación. Desde aquí puedes ver un ejemplo, en el menú de navegación.
El problema. Las funciones wp_list_pages() y wp_list_categories() permiten un gran número de cosas, pero no permiten integrar un elemento <span> para que puedas utilizar la conocida técnica del CSS Sliding-Doors. Por suerte, con algo de PHP y algunas expresiones, podemos utilizar esta fantástica técnica en nuestro blog de WordPress.
Debido al gran número de tutoriales acerca de los CSS Sliding Doors, no explicaremos aquí como funciona; de todas formas, en este excelente artículo puedes leer más sobre esta técnica.
La solución. Crea las imágenes que necesites y, una vez hecho esto, edita el archivo style.css de tu plantilla de WordPress. Aquí tienes un ejemplo:
Citar:
#nav a, #nav a:visited { display:block;}#nav a:hover, #nav a:active { background:url(images/tab-right.jpg) no-repeat 100% 1px; float:left;}#nav a span { float:left; display:block;}#nav a:hover span { float:left; display:block; background: url(images/tab-left.jpg) no-repeat 0 1px;}
2.Ahora editaremos el header.php. Simplemente copia y pega uno de los siguientes códigos, de acuerdo con tus necesidades.
-Para tus páginas:
Citar:
<ul id="nav"><li><a rel="nofollow" href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li><?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exlude=181&titl e_li=&depth=1')); ?></ul>
-Para tus categorías:
Citar:
<ul id="nav"><li><a rel="nofollow" href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li><?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181 &title_li=&depth=1')); ?></ul>
Explicación del código. En este ejemplo, hemos hecho uso del parámetro echo=0 en las funciones wp_list_pages() y wp_list_categories(), que nos permite obtener el resultado de la función sin ponerlo directamente en pantalla. Entonces, el resultado de esta función es utilizado por la función PHP preg_replace() y finalmente se muestra con los tags <span> añadidos entre los tags <li> y <a>.
El problema. Usar los campos personalizados para mostrar las imágenes vinculadas a tus posts es una gran idea, pero a muchos usuarios de WordPress les gustaría dar con una solución para conseguir incrustar las imágenes en el mismo contenido del post.
La solución. Hasta donde yo se, no hay ningún plug-in para conseguir esto. Por suerte, el siguiente bucle nos lo solucionará: buscará imágenes en el contenido de los posts y los mostrará en pantalla.
1.Pega el siguiente código en cualquier lugar de tu theme:
Citar:
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?><?php$szPostContent = $post->post_content;$szSearchPattern = '~<img [^\>]*\ />~';// Run preg_match_all to grab all the images and save the results in $aPicspreg_match_all( $szSearchPattern, $szPostContent, $aPics );// Check to see if we have at least 1 image$iNumberOfPics = count($aPics[0]);if ( $iNumberOfPics > 0 ) { // Now here you would do whatever you need to do with the images // For this example the images are just displayed for ( $i=0; $i < $iNumberOfPics ; $i++ ) { echo $aPics[0][$i]; };};endwhile;endif;?>
Explicación del código. El código que acabas de utilizar consiste, básicamente, simplemente, en un bucle básico de WordPress. La única diferencia es que hemos utilizado PHP y expresiones normales para buscar imágenes dentro del contenido de los posts en lugar de mostrar los posts únicamente. De esta manera, si las imágenes se encuentran, se mostrarán.
5.Crea un botón de “Enviar a Twitter”
El problema. ¿Estás en Twitter? Si lo estás, ya sabrás lo bueno que es este servicio para compartir online con tus amigos todo lo que encuentres interesante. Así que, ¿por qué no darle a tus lectores la oportunidad de enviar directamente el link de tus posts a Twitter, trayéndote así más visitantes?
La solución. Este truco es muy fácil de conseguir. Lo único que tienes que hacer es crear un link a Twitter con el parámetro de status. Como estamos en un blog de WordPress, utilizaremos la función the_permalink() para obtener la URL:
Citar:
<a rel="nofollow" href="http://twitter.com/home?status=Currently reading <?php the_permalink();
Como ves, es muy fácil, pero al mismo tiempo muy útil.
6. Usar comillas normales en lugar de las comillas inglesas
El problema. Si eres un desarrollador que suele publicar pedazos de códigos en tu sitio web, probablemente te habrás encontrado con el siguiente problema: un usuario te dice que tu el código que has posteado no funciona. ¿Por qué? Simplemente porque, por defecto, WordPress transforma las comillas normales en las comillas inglesas, aquellas que se conocen como “smart quotes”, con las que no funcionan los códigos.
La solución. Para deshacerte de este tipo de comillas, haz lo siguiente:
1.Abre el archivo functions.php de tu plantilla. Si este archivo no existe, créalo.
2.Pega en él el siguiente código:
Citar:
Citar:
<?php remove_filter('the_content', 'wptexturize'); ?>
3.Guarda el archivo y adiós al problema.
Explicación del código. La función wptexturize ()convierte automáticamente las comillas normales en comillas inglesas. Utilizando la función remove_filter() le estamos diciendo a WordPress que no queremos que esta función se aplique al contenido de nuestros posts.
7. No permitir las peticiones de comentarios sin referencia.
El problema. El spam es un problema para todos los bloggers. Está claro que Akismet ayuda, pero ¿qué hay de malo en prevenir más, si cabe, el spam? El siguiente código buscará la referencia (la URL desde donde se ha llamado a la página) cuando se esté accediendo al archivo wp-comments-posts.php. Si la referencia existe, o si es la URL de tu blog, se permitirá el comentario. Por el contrario, si la referencia no existe, la página dejará de cargarse y el comentario no se posteará.
La solución. Para aplicar este truco, simplemente pega el siguiente código en el archivo function.php de tu plantilla. Si la plantilla no incluye este archivo, créalo.
Citar:
function check_referrer() { if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == “”) { wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, bugger off!') );}}add_action('check_comment_flood', 'check_referrer');
8. Utilizar CSS Sliding Doors en la navegación de WordPress
Antes de empezar, aclaro que no he traducido el término “Sliding Doors” porque no se cómo traducirlo literlamente (?). De todas formas, es fácil de explicar: un sliding door es un determinado efecto (modificable con el CSS) que tiene lugar al pasar el puntero por una determinada zona (normalmente, un menú de navegación. Desde aquí puedes ver un ejemplo, en el menú de navegación.
El problema. Las funciones wp_list_pages() y wp_list_categories() permiten un gran número de cosas, pero no permiten integrar un elemento <span> para que puedas utilizar la conocida técnica del CSS Sliding-Doors. Por suerte, con algo de PHP y algunas expresiones, podemos utilizar esta fantástica técnica en nuestro blog de WordPress.
Debido al gran número de tutoriales acerca de los CSS Sliding Doors, no explicaremos aquí como funciona; de todas formas, en este excelente artículo puedes leer más sobre esta técnica.
La solución. Crea las imágenes que necesites y, una vez hecho esto, edita el archivo style.css de tu plantilla de WordPress. Aquí tienes un ejemplo:
Citar:
#nav a, #nav a:visited { display:block;}#nav a:hover, #nav a:active { background:url(images/tab-right.jpg) no-repeat 100% 1px; float:left;}#nav a span { float:left; display:block;}#nav a:hover span { float:left; display:block; background: url(images/tab-left.jpg) no-repeat 0 1px;}
2.Ahora editaremos el header.php. Simplemente copia y pega uno de los siguientes códigos, de acuerdo con tus necesidades.
-Para tus páginas:
Citar:
<ul id="nav"><li><a rel="nofollow" href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li><?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exlude=181&titl e_li=&depth=1')); ?></ul>
-Para tus categorías:
Citar:
<ul id="nav"><li><a rel="nofollow" href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li><?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181 &title_li=&depth=1')); ?></ul>
Explicación del código. En este ejemplo, hemos hecho uso del parámetro echo=0 en las funciones wp_list_pages() y wp_list_categories(), que nos permite obtener el resultado de la función sin ponerlo directamente en pantalla. Entonces, el resultado de esta función es utilizado por la función PHP preg_replace() y finalmente se muestra con los tags <span> añadidos entre los tags <li> y <a>.
9. Muestra un header aleatorio en tu blog
El problema. Realmente no es un problema, sino que a muchos usuarios de WordPress les gustaría mostrar un header aleatorio a sus lectores.
La solución.
1. Primero selecciona las imágenes que quieras mostrar como header (llámalas 1.jpg, 2.jpg, 3.jpg y, así, sucesivamente). Puedes utilizar tantas imágenes como quieras.
2. Sube las imágenes a tu directorio [FONT="]wp-content/themes/yourtheme/images[/FONT][FONT="].[/FONT]
3. Abre el archivo header.php y pega el siguiente código en él:
Citar:
$num = rand(1,10); //Escribe un rango de números entre 1 y 10, asumiendo que 10 es el total de imágenes que tienes para utilizar como header
<div id="header" style="background:transparent url(images/.jpg) no-repeat top left;">
4. Hecho. Ahora cada página o post de tu blog mostrará un header aleatorio, de todos los que tu has dispuesto.
Explicación del código. Nada complicado. Simplemente hemos empezado una variable $num utilizando la función PHP rand() para obtener un número al azar entre 1 y 10, con el que obtendremos el header que tenga asignado ese número.
10. Haz una lista de tus posts programados
El problema. Como muchos bloggers, lógicamente, querrás que tus visitantes visiten tu blog con más frecuencia o que se suscriban a tu feed RSS. Una buena forma de hacer crecer la curiosidad de tus lectores acerca de tus futuros posts es hacer una lista de los títulos de tus posts programados.
La solución. Abre cualquier archivo de tu plantilla, y copia el siguiente código:
Citar:
<?php$my_query = new WP_Query('post_status=future&order=DESC&showposts= 5');if ($my_query->have_posts()) { while ($my_query->have_posts()) : $my_query->the_post(); ?> <li><?php the_title(); ?></li><?php endwhile;}?>
Explicación del código.
En este código hemos creado una pregunta personalizada utilizando WP_Query para enviar una base de datos y mostrar los 5 posts programados más recientes. Hecho esto, se utiliza un bucle para que aparezcan los títulos de los posts.
El problema. Realmente no es un problema, sino que a muchos usuarios de WordPress les gustaría mostrar un header aleatorio a sus lectores.
La solución.
1. Primero selecciona las imágenes que quieras mostrar como header (llámalas 1.jpg, 2.jpg, 3.jpg y, así, sucesivamente). Puedes utilizar tantas imágenes como quieras.
2. Sube las imágenes a tu directorio [FONT="]wp-content/themes/yourtheme/images[/FONT][FONT="].[/FONT]
3. Abre el archivo header.php y pega el siguiente código en él:
Citar:
$num = rand(1,10); //Escribe un rango de números entre 1 y 10, asumiendo que 10 es el total de imágenes que tienes para utilizar como header
<div id="header" style="background:transparent url(images/.jpg) no-repeat top left;">
4. Hecho. Ahora cada página o post de tu blog mostrará un header aleatorio, de todos los que tu has dispuesto.
Explicación del código. Nada complicado. Simplemente hemos empezado una variable $num utilizando la función PHP rand() para obtener un número al azar entre 1 y 10, con el que obtendremos el header que tenga asignado ese número.
10. Haz una lista de tus posts programados
El problema. Como muchos bloggers, lógicamente, querrás que tus visitantes visiten tu blog con más frecuencia o que se suscriban a tu feed RSS. Una buena forma de hacer crecer la curiosidad de tus lectores acerca de tus futuros posts es hacer una lista de los títulos de tus posts programados.
La solución. Abre cualquier archivo de tu plantilla, y copia el siguiente código:
Citar:
<?php$my_query = new WP_Query('post_status=future&order=DESC&showposts= 5');if ($my_query->have_posts()) { while ($my_query->have_posts()) : $my_query->the_post(); ?> <li><?php the_title(); ?></li><?php endwhile;}?>
Explicación del código.
En este código hemos creado una pregunta personalizada utilizando WP_Query para enviar una base de datos y mostrar los 5 posts programados más recientes. Hecho esto, se utiliza un bucle para que aparezcan los títulos de los posts.
- Desde
- 14 May 2009
- Mensajes
- 5.749
Gracias, esto debería ir enganchado(?)
Saludos
DarkLife
1
Lambda
Redactor
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
¡Usuario popular!
Suscripción a IA
- Desde
- 26 Jun 2009
- Mensajes
- 2.778
Muy bueno
Por cierto tengo una duda, este codigo no deberia quedar asi ?
$num = rand(1,10); //Escribe un rango de números entre 1 y 10, asumiendo que 10 es el total de imágenes que tienes para utilizar como header
<div id="header" style="background:transparent url(images/<?php echo $num ?>.jpg) no-repeat top left;">
Por cierto tengo una duda, este codigo no deberia quedar asi ?
$num = rand(1,10); //Escribe un rango de números entre 1 y 10, asumiendo que 10 es el total de imágenes que tienes para utilizar como header
<div id="header" style="background:transparent url(images/<?php echo $num ?>.jpg) no-repeat top left;">
