Para mostrar a los posibles usuarios de sus temas hay que hacer demos, a ser posible con contenido que muestre como se visualizarán los distintos estilos, imágenes, etc en el tema.

Ahora bien, el uso de “lorem ipsum” es cosa del pasado … 

WPfillMe es un servicio web que ofrece un entorno, basado en el editor TinyMCE, desde el que crear contenido real de muestra para utilizarlo en las demos de temas WordPress.

Con pestaña visual y HTML, dispone de tags para añadir los contenidos habituales, como texto, estilos de título, negritas, citas, imágenes con o sin pie de foto, listas, incluso tablas.

Si lo deseas, incluso puede generar contenido de ejemplo para ti, simplemente haciendo clic en el botón “Gimme everything“, que completa tu editor con los elementos más habituales.

Una vez hayas creado el contenido solo tienes que hacer clic en el editor y copiar el HTML para incluirlo en tus entradas de prueba para la demo, más fácil imposible.

La curva de aprendizaje es inexistente, así que puedes empezar a usarlo sin mayores indicaciones y así ofrecer una experiencia de tus desarrollos de temas WordPress y que tus usuarios comprueben ese maravilloso CSS que has preparado para su disfrute.

Artículos Relacionados:

• Diferente fondo en páginas y entradas
• ¿Qué tema WordPress usa esa web?
• Controlar automáticamente el ancho de imágenes en las entradas
• Mensajes a usuarios registrados y nuevos
• Syntax mode de WordPress para Panic CODA

Además, para seguir con las buenas noticias, no necesitas modificar tu tema, ni escribir ni una sola línea de código, sin tocar el CSS. Lo único que necesitas es instalar el plugin Background per page.

Una vez activo tendrás una pantalla nueva bajo el menú “Apariencia” en la que definir un fondo a tu gusto para todo el body, el contenido de entradas o de páginas.

También puedes definir el patrón de repetición de una imagen e incluso que tenga degradado, todo a golpe de clic.

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• ¿Qué tema WordPress usa esa web?
• Controlar automáticamente el ancho de imágenes en las entradas
• Mensajes a usuarios registrados y nuevos
• Syntax mode de WordPress para Panic CODA

Es una de las preguntas más leídas en los foros WordPress, la que provoca la curiosidad cuando vemos una web que nos gusta y nos preguntamos ¿Qué tema WordPress usa esa web?.

Y, aunque no es fácil siempre adivinar el tema que usa una web, pues en muchas ocasiones se cambian referencias al mismo, si tenemos algunos trucos para tratar de adivinarlo cuando no hay ninguna referencia al tema usado en la misma web, algo bastante común.

1. Ver código fuente

El primer método para adivinar el tema que suelo usar es ver el código fuente de la web en cuestión. Desde el clic derecho de cualquier navegador moderno tenemos acceso a ver el código de la web que estamos visualizando, y una simple búsqueda por la cadena “wp-content/themes/” nos “soplará” el nombre de la carpeta del tema activo en la primera referencia al mismo, que normalmente suele estar en la cabecera del código, en la llamada a la hoja de estilos …

2. Inspeccionar elemento de cabecera de hoja de estilos

Un método similar es acceder a la utilidad de inspección de elementos web de los navegadores modernos, o Firebug si usas Firefox, mediante la cual puedes hacer clic en la hoja de estilos y, directamente, ver toda la información de la cabecera de la misma donde, salvo que se haya modificado, tendrás el nombre, descripción y hasta URL de la web del autor del tema.

3. WWTIT

Quizás basado en este método, está el servicio web llamado “What WordPress theme is that?“. Pones la url en la caja de búsqueda y te muestra precisamente esta información de cabecera de la hoja de estilos que todos los temas WordPress usan.

Por supuesto, ninguno de estos métodos anteriores sirve de nada si el administrador o diseñador de la web cambió el nombre de carpeta del tema y la información de cabecera de la hoja de estilos.

4. Clases CSS distintivas

Si este fuera el caso hay alguna cosa que puedes probar. Por ejemplo, usando el método 3 descrito anteriormente, busca una clase CSS exclusiva del tema, que no sea la típica “post” o “content“, sino una con nombres extraños, del gusto de muchos diseñadores.

Una vez identificada una que no sea “corriente” solo tienes que “googlear” por esa clase y, con un poco de suerte, identificar alguna consulta de soporte en foros donde, ya si, se cite el nombre del tema, o incluso la página de soporte del autor.

Y, bueno, esto es lo que yo suelo hacer, si tu tienes algún otro método se agradecerá que lo compartas

Nota: para las capturas he usado la web de mi muy mejor amiga Ana Aldea

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Diferente fondo en páginas y entradas
• Controlar automáticamente el ancho de imágenes en las entradas
• Mensajes a usuarios registrados y nuevos
• Syntax mode de WordPress para Panic CODA

Pasa bastante a menudo, que insertamos imágenes y superan el ancho de nuestro tema WordPress. Por supuesto, podemos ajustar la imagen manualmente en el editor, modificando el ancho visible.

Pero ¿no te gustaría algo como lo que hace el tema por defecto TwentyEleven?. Si, esa cosa que hace que siempre se ajusten las imágenes al tema sin necesidad de tocar nada al insertarla en nuestra entrada.

Pues es muy fácil, solo hay que añadir unas líneas de código en la hoja de estilos del tema, normalmente un archivo llamado style.css.

Para ello, lo primero es buscar en la hoja de estilos la clase que define las imágenes, normalmente algo acompañado de img. Una vez localizado solo hay que añadir lo siguiente a esa clase:

max-width: 565px;
width: expression(this.width > 565 ? 565: true);

En este caso he adaptado el ancho máximo al de mi tema (565 pixels), que es el único parámetro que deberás modificar para que se adapte al tuyo.

Este truco puedes usarlo en tu WordPress alojado o en WordPres.com si adquiriste la actualización de diseño, con la que puedes modificar la hoja de estilos.

Este bonito truco se lo leí a Lorenzo Solís.

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Diferente fondo en páginas y entradas
• ¿Qué tema WordPress usa esa web?
• Mensajes a usuarios registrados y nuevos
• Syntax mode de WordPress para Panic CODA

Hay un modo de fidelizar a los usuarios registrados y, mediante el mismo método, animar a los que no lo están a que se registren o realicen otro tipo de acciones.

Para ello solo hay que, primero, identificar si el usuario está o no registrado, vamos, si ha accedido como usuario … 

Con esa pequeña comprobación ya tenemos todo el código necesario para mostrar mensajes personalizados, a usuarios registrados y a los que no lo estén.

Añade este código en el lugar que quieras de tu tema activo:

<?php

if ( is_user_logged_in() ) {
    echo '¡Bienvenido de nuevo!';
} else {
    echo '¡Hola!, parece que no estás registrado, aún estás a tiempo de <a href="/wp-register.php">hacerlo</a>.';
};
?>

Un buen sitio sería en single.php, aunque también puede quedar bien en portada en la barra lateral, y mucho mejor si le añades un poco de estilo mediante CSS, para distinguirlo del resto del contenido.

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Desactivar la comprobación de actualizaciones de plugins
• Diferente fondo en páginas y entradas
• ¿Qué tema WordPress usa esa web?
• Mostrar extractos de páginas inferiores

De hecho, hay desarrolladores web que se han pasado a Mac “solamente” para usar CODA. Y no es una locura, en realidad hay muchas razones para pasarse a Mac pero usar CODA es una de ellas, y poderosa. Pero bueno, que no se trata de hacer proselitismo de Mac o CODA.

Lo que quiero compartir contigo hoy es un fichero de descarga que permite usar la sintaxis de WordPress en CODA, para que identifique los códigos de tus temas y plugins WordPress, sus funciones en concreto, y te permite cosas como el autocompletado de sintaxis y esas cosas maravillosas que hace CODA.

Para tener esta funcionalidad solo tienes que hacer esto:

1. Descargar este archivo:
   Modo WordPress para Panic CODA v.1.0 (230.65 kB )
2. Descomprimir el zip
3. Copiar la carpeta descomprimida llamada PHP-HTML-WP.mode en la carpeta ~/Library/Application Support/Coda/Modes/
   
4. Abre un archivo PHP o de WordPress y carga el modo de sintaxis en CODA desde el menú “Text -> Syntax Mode -> PHP-HTML-WP“
5. Opcional: Si quieres que este modo sea la sintaxis por defecto, en el panel del Editor, en la venta de preferencias, elige el modo “PHP-HTML-WP” como tipo de archivo por defecto

Ahora CODA ya identificará las funciones WordPress, facilitándote la vida como desarrollador de WordPress, como ya hacía con PHP, HTML o CSS, por ejemplo.

Encontrado en HitchHackers

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Eliminar los atributos de ancho y alto del cargador de archivos WordPress
• Desactivar la comprobación de actualizaciones de plugins
• Diferente fondo en páginas y entradas
• ¿Qué tema WordPress usa esa web?

Hace poco salió un plugin, Admin Bar Login, que permite añadir la barra de login igual a la de WordPress.com, que además es flotante, así que es casi imposible que los visitantes de nuestro blog no se den cuenta de que pueden registrarse.

Una vez que el plugin está instalado y activado, tenemos esta barra en nuestro blog para que nuestros visitantes inicien sesión de una manera más fácil y cómoda.

En la barra también aparece el botón hacia el formulario de registro (si permitimos registro de usuarios), para invitar a registrarse a todo el que lo quiera hacer.

También podemos editar el CSS del plugin para personalizarlo:

#adminloginform .login-username input,
#adminloginform .login-password input {
	font: 13px/24px sans-serif;
	height: 24px;
	border: none;
	color: #555;
	text-shadow: 0 1px 0 #fff;
	background-color: rgba( 255, 255, 255, 0.9 );
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

Donde dice

	-webkit-border-radius: 3px;
	border-radius: 3px;

elegir qué tan redondeado seran los puntos del formulario para poner el usuario y contraseña.

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Diferente fondo en páginas y entradas
• ¿Qué tema WordPress usa esa web?
• Controlar automáticamente el ancho de imágenes en las entradas
• Mensajes a usuarios registrados y nuevos

Cada vez se usan menos en blogs, pues parece que todos nos hemos puesto un poco serios, pero los smileys siguen totalmente en vigor, especialmente en las redes sociales.

Esas pequeñas caritas nos ayudan a transmitir emociones en los textos, a hacer un poco más humana la publicación, aunque sea ayudándonos de iconos simples como son los smileys.

Ahora bien, a veces los smileys no se muestran integrados en el texto – que es su objetivo – ya que al ser imágenes heredan el mismo estilo del resto de imágenes de tu tema, y si tienes definido un borde o sombreado para las imágenes, los smileys también se mostrarán con esos bordes y demás florituras, y seguro que no es lo que te gustaría.

Afortunadamente solucionarlo es muy fácil, pues solo tienes que definir una clase CSS para los smileys, de modo que no tengan nada de adorno alrededor y así se integren mejor en los textos donde los incluyas.

Abre la hoja de estilos de tu tema WordPress, normalmente denominada style.css y añade la siguiente clase:

/* Clase CSS para quitar adornos a los smileys */
img.wp-smiley {
	background: transparent;
	border: none;
	margin: 0;
	padding: 0;
}

En el código hacemos que el fondo sea transparente, que no tenga borde, sin márgenes que separen el smiley del texto y sin borde de ningún tipo.

Guardas los cambios y ya lo tienes

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Diferente fondo en páginas y entradas
• ¿Qué tema WordPress usa esa web?
• Controlar automáticamente el ancho de imágenes en las entradas
• Mensajes a usuarios registrados y nuevos

El “bounce rate” o “porcentaje de rebote” es un concepto utilizado por los buscadores que viene a definir, dicho de manera burda, lo que tardan tus visitantes en abandonar tu web.

A modo de explicación sencilla el porcentaje de rebote se obtiene de dividir los visitantes a una sola página entre los visitantes de toda tu web. Hay un estándar establecido en 30 segundos y el “bounce rate” se mide en el porcentaje sobre esos 30 segundos (70% de bounce rate o similar). El ideal sería un “bounce rate” de 0% pero lo normal son porcentajes del 40% 0 50%.

Al final viene a ser una medida de la fidelidad de los visitantes a las publicaciones de tu web, que por supuesto podemos mejorar … y en WordPress es relativamente fácil con un poco de ayuda …

Si estamos hablando de bajar el “bounce rate“, o sea, de conseguir que los visitantes sigan viendo páginas de nuestra web, entonces habrá que fidelizarlos. Esto nos ayudará …

1. Lista de categorías

Asegúrate de que siempre hay en tus entradas la lista de las categorías a las que pertenece cada entrada, a ser posible al final de cada entrada, de modo que si tu publicación ha gustado quizás tu visitante quiera saber que más sabes sobre esa temática.

Normalmente esto se consigue a través de la función wp_list_categories y el código, que encontrarás en la mayoría de los temas en su portada (index.php) y la página de entrada (single.php) será algo así:

<?php wp_list_categories(); ?>

También puedes mostrarlas con esta la función get_the_category_list:

<?php echo get_the_category_list(); ?>

2. Lista de etiquetas

También cerciórate de que hay una lista de las etiquetas (tags) usadas en cada entrada. Esta lista es, si quieres, más potente, pues suele estar más íntimamente relacionada con el contenido concreto de la publicación.

Si tu tema no incluye un modo de mostrar las etiquetas utilizadas usa la función the_tags que, en su versión más sencilla sería algo así:

<?php the_tags('Etiquetas:', ', ', '<br />'); ?>

3. Entradas relacionadas

Un modo muy potente de conseguir que tus visitantes vean más páginas de tu web es colocar al final de cada entrada una lista de entradas relacionadas con la actual, que ofrecen la promesa de ampliar conocimientos sobre un mismo tema.

Hay muchos modos de ofrecer este tipo de recurso, estos son los que recomiendo:

• Entradas relacionadas sin plugin
• Opción de entradas relacionadas del plugin Simple Tags: funciona mejor que la mayoría de plugins especializados, en mi experiencia, y se integra de maravilla con tu tema sin tener que tocar código
• Entradas relacionadas con miniatura: un modo más potente de atraer a tus visitantes a tu contenido relacionado, valiéndote de miniaturas de imagen

4. Enlaces a entradas anteriores/siguientes

Otro modo habitual de mantener a los visitantes para que no se pierdan nada es ofrecer navegación hacia las entradas anteriores y siguientes a la que están viendo.

A este respecto, aunque son muy efectistas, los sistemas de paginación no son lo más recomendable, pues no informan de lo que se va a encontrar el lector, requieren de una fidelización previa.

Lo mejor es ofrecer los típicos enlaces (o no) a la entrada anterior y la siguiente, normalmente al final de la actual, para animar al visitante a que no se pierda “esa interesante entrada que puede no hayan visto”, sobre todo si llegan a tu web desde un buscador.

Lo puedes conseguir de varias maneras:

1. Con código – añadiendo al final del “loop” del fichero single.php el siguiente código (si tu tema no lo incluye ya):
   Entrada anterior:

   <?php previous_post_link(); ?>

   Entrada siguiente:

   <?php next_post_link(); ?>

2. Con plugin – y aunque hay muchos para esta utilidad el más potente que conozco es el upPrev Animation, una joya que anima a leer la entrada anterior/siguiente mediante un popup animado al final de la entrada actual. Igualito que en la web del New York Times, para que fardes de nivelazo.

5. Evita demasiada publicidad

Sobre todo evita los molestos anuncios en popup, que harán que la visita a tu web WordPress sea una experiencia desagradable, y puede que hasta dejen de visitarte, por muy interesante que sea tu contenido.

6. Enlaces externos en nueva pestaña/ventana

Esto también es consejo personal, pero creo que a nadie se le escapa que los enlaces externos a tu sitio, si quieres un “bounce rate” controlado, es mejor que no hagan perder el foco de tu web. Para eso usa en los enlaces externos el atributo de que se abra en nueva ventana/pestaña, que en código html sería así:

Target _blank:

<a target="_blank" href="http://sitioexterno.com">Sitio externo</a>

Target new:

<a target="new" href="http://sitioexterno.com">Sitio externo</a>

7. Buenos titulares

De nada sirve casi que pongas enlaces de entradas anteriores o relacionadas si no sabes atraer a tus visitantes al nuevo contenido con un buen titular, que incite a leer por si solo. Además, que sobre esto ya está casi todo escrito, y solo basta con aplicar algo de periodismo para escribir online.

8. Contenido de calidad y actualizado

Y, siguiendo en la línea del consejo anterior, pero ahondando en el mismo, de nada servirá – esto es seguro – si engañas o no convences a tus visitantes con el contenido. Es más, si ofreces una gran expectativa en el titular que no se refleja en una publicación de calidad y con información actual, estarás prácticamente echando de tu web a los visitantes, al sentirse manipulados.

Ofrecer contenido actualizado es especialmente importante, pues dirá muchas cosas a tus visitantes, como cuanto interés pones en mantener al día tu web, o si merece la pena volver para “estar al día”

9. Acelera tu WordPress

Por supuesto, si tu web carga lenta, si dispones de un mal hosting, o sobrecargas demasiado tu sitio con plugins innecesarios, la experiencia del visitante será mala, con tiempos de carga lentos, que – literalmente – le echarán de tu web, quizás para no volver.

Actualmente, con sistemas de Cloud hosting avanzados, no tiene sentido ofrecer contenido – y mucho menos alojar tu negocio – en un alojamiento barato y malo.

Así que ¡acelera WordPress!. Te dejo unos cuantos trucos:

• Comprime el contenido mediante htaccess
• Como acelerar WordPres
• Acelera WordPress definiendo llamadas a funciones
• Acelera la carga de WordPress con zlib
• Organiza y adelgaza tu CSS
• Comprime el CSS de tu tema
• Optimiza WordPress desde la base de datos
• 13 tags que puedes quitar para acelerar WordPress

10. Diseño

Vale que el aspecto es una característica subjetiva, que lo que para uno es bonito a otro le parece horrible, pero un diseño bien estructurado, con la navegación bien definida, con colores homogéneos y enfocado a la usabilidad, ofrecerá a tus lectores una visita agradable en tu web.

Bueno, espero que con estos consejos mejores tu “bounce rate”, o porcentaje de rebote. Seguro que en cualquier caso vas a mejorar la experiencia de tus visitantes, no te quepa duda. Lo que creo que ya sabrás de sobra es que WordPress y el SEO se llevan de maravilla.

¡Ah!, y si se me ha pasado algún buen consejo, nos lo cuentas en los comentarios.

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Página 404 que sirve de verdad para algo
• Hosting WordPress
• Rich Snippets en WordPress
• La web semántica está en el limbo

Aparte de una bonita frase, es una declaración que nos hacen en WordPress.com para animarnos a la actualización de CSS para su servicio de sitios con WordPress.

Y es que si haces la actualización de CSS no solo tendrás la posibilidad de aplicar un CSS preparado previamente por ti en tu editor favorito sino que también te ofrecen un par de funcionalidades extra por si quieres modificar el CSS desde WordPress.com.

La primera es el “selector de fuentes“, con el que puedes definir fácilmente las tipografías a emplear en tu CSS, eligiéndolas de entre más de 50, sin tener que “picar” código manualmente, y la segunda es un editor CSS integrado, con el que puedes guardar reglas de estilo utilizadas o incluso previsualizar como quedará tu sitio antes de hacer el pago por la actualización o los cambios a tu diseño.

Para rematar, si quieres aprender CSS, puedes visitar la página especialmente creada de CSS Basics, con los selectores y clases principales para dar tus primeros pinitos en este bonito “arte” del CSS.

Si te animas solo tienes que ir al escritorio de tu WordPress.com en el menú “Apariencia -> Custom design” y empezar a diseñar tu sitio con CSS.

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Eliminar los atributos de ancho y alto del cargador de archivos WordPress
• Diferente fondo en páginas y entradas
• ¿Qué tema WordPress usa esa web?
• Controlar automáticamente el ancho de imágenes en las entradas