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:

• 10 maneras de reducir el “bounce rate” en WordPress
• El código es poesía, CSS es arte
• WordPress Jeopardy
• Miniaturas por defecto en todas las entradas
• Clases CSS por defecto de WordPress

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:

• Mejora el Posicionamiento Web con tu WordPress
• Mostrar miniaturas de vídeos YouTube en WordPress
• Añadir rel=”author” y rel=”me” en WordPress
• Consejos para elegir palabras clave de calidad sin herramientas de investigación
• Añadir paginación a las entradas

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:

• Cambia el estilo de tus smileys
• 10 maneras de reducir el “bounce rate” en WordPress
• WordPress Jeopardy
• Miniaturas por defecto en todas las entradas
• Clases CSS por defecto de WordPress

Ya casi no queda nada que no se pueda hacer con WordPress pero ¿un juego?, pues si. Eso es WordPress Jeopardy, una idea que surgió en WordCamp Suiza este año, la de hacer un juego con una instalación de WordPress, usando sus funciones y hooks.

Y, ni cortos ni perezosos, en Septiembre de este año empezó la primera tanda del WordPress Jeopardy, que para el que no lo sepa es un juego basado en un popular concurso de televisión norteamericano que surgió allí por 1964, hace nada menos que 47 años.

La idea es genial; cada respuesta es una entrada, con sus metadatos como preguntas y puntos de cada pregunta. El sitio es una instalación de WordPress simple, con un tema personalizado. Lo único que necesita es una lista de categorías de entradas y las entradas, que van en la categoría correspondiente de este modo:

<?php
$x = 1;
$cat_args = array( 'parent' => 0 );
$categories = get_categories( $cat_args );
foreach ( $categories as $category ) :
	// Muestra la cabecera de la categoría
	$y = 1;
	$post_args = array( 'category' => $category -> term_id );
	$posts = get_posts( $post_args );
	foreach ( $posts as $post ) :
		// Muestra la entrada de respuesta, aquí va la pregunta y los puntos
	endforeach;
endforeach;
?>

Luego se aplica un poco de CSS y a correr.

Artículos Relacionados:

• Cambia el estilo de tus smileys
• 10 maneras de reducir el “bounce rate” en WordPress
• El código es poesía, CSS es arte
• Miniaturas por defecto en todas las entradas
• Clases CSS por defecto de WordPress

Ya hace tiempo que se introdujeron las miniaturas de entrada en WordPress, en concreto en la versión 2.9. Y, posiblemente, te haya pasado como a mi, que actualizaste tu tema para que soportara las miniaturas de entrada y ¡mira por donde que putada!, ahora resulta que todas tus entradas anteriores no tienen miniatura y quedan feuchas en tu sitio recién tuneado.

Bueno, pues no te preocupes, que es fácil arreglar ese pequeño problema, como siempre … 

Si te ha pasado algo así, o simplemente no quieres andar metiendo miniaturas manualmente en cada entrada sino que prefieres poner una por defecto, hay solución sencilla.

Puedes hacerlo de dos maneras, como siempre:

1. Añadir miniatura por defecto mediante código

Aquí la idea es como añadir una especie de gravatar por defecto. Lo que tienes que hacer es localizar el “loop” y añadir lo siguiente, por supuesto con el CSS que más te guste o se adapte a tu tema:

<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/imagenes/miniatura-por-defecto.png" alt="<?php the_title(); ?>" />
<?php } ?>

2. Añadir miniatura por defecto mediante plugin

Si no te apañas con el código, o simplemente prefieres la facilidad de gestionar visualmente la miniatura por defecto, puedes usar el plugin Default post thumnbail, que te facilita la tarea.

Una vez activo tiene una página de ajustes en la que elegir la miniatura que irá por defecto, y cambiarla cuando te apetezca.

¡Hala, ya está!, que lo disfrutes

Artículos Relacionados:

• Cambia el estilo de tus smileys
• 10 maneras de reducir el “bounce rate” en WordPress
• El código es poesía, CSS es arte
• WordPress Jeopardy
• Clases CSS por defecto de WordPress

Lo que tienes a continuación es una relación de las clases CSS utilizadas por defecto por WordPress, que encontrarás en la inmensa mayoría de los temas WordPress que uses, así que toma nota y empieza a practicar. Si te animas a crear un tema WordPress luego me lo cuentas y lo promocionamos aquí.

Clases por defecto para el “body”

La etiqueta más importante en el contenido es body, y aquí hay ejemplos de las clases más comunes que WordPress suele añadir a este elemento:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Si quieres añadir estilo a la página de resultados de búsqueda, por ejemplo, puedes usar la clase “search-results” para añadir tu estilo ahí. WordPress solo añade esta clase a la etiqueta body cuando la página de resultados de búsqueda está activa, de modo que no afecta a otras páginas.

Estilos de entrada por defecto

Al igual que con el body, WordPress añade también clases dinámicas a los elementos de las entradas. En esta lista tienes los más utilizados:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

La idea es mostrar las entradas de manera dinámica, de acuerdo al formato que elijas. WordPress, de este modo, añade clases dinámicas usando la función post_class (), la cual te permite crear tus propios estilos para cada formato. Esta función añadirá una clase del tipo “.format-cosa” donde “cosa” es cualquier formato de entrada que hayas elegido, ya sea galería, minientrada, etc:

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Estilos por defecto para menús

De nuevo, podemos personalizar los estilos, en este caso para los menús de navegación:

#header .main-menu{} // clase del contenedor
#header .main-menu ul {} // clase del contender de la primera lista no ordenada (ul)
#header .main-menu ul ul {} //lista no ordenada (ul) dentro de una lista no ordenada (ul)
#header .main-menu li {} // cada elemento de navegación
#header .main-menu li a {} // cada texto de enlace de los elementos de navegación
#header .main-menu li ul {} // lista no ordenada si hay elementos desplegables
#header .main-menu li li {} // cada elemento de navegación desplegable
#header .main-menu li li a {} // cada texto de enlace de los elementos de navegación desplegables

.current_page_item{} // class para la página actual
.current-cat{} // class para la categoriá actual
.current-menu-item{} // class para cualquier otro elemento del menú
.menu-item-type-taxonomy{} // clase para una categoría
.menu-item-type-post_type{} // clase para las páginas
.menu-item-type-custom{} // clase para cualquier elemento personalizado que añadas
.menu-item-home{} // clase para el enlace a la portada

Observa que cuando creas un menú en WordPress automáticamente se envuelve en un div. Este div solo tiene un nombre de clase si lo especificas (por ejemplo main-menu). A partir de ahí ya puedes tu añadir estilo a cada elemento.

Estilos por defecto para el editor visual

El editor visual WYSIWYG es quizás uno de los elementos más utilizados de WordPress, y también de los más queridos. Así que no parece mala idea disponer de estilos por defecto para lo que añadimos en nuestro WordPress, como imágenes, citas, esas cosas. Las siguientes clases CSS son las que añade automáticamente WordPress a estos elementos y que, por supuesto, puedes identificar en tu hoja de estilos – normalmente style.css – y modificar a tu gusto:

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Estilos por defecto de los widgets de WordPress

Otro elemento muy popular, y nunca suficientemente valorados, son los widgets. Normalmente se adaptan de maravilla al CSS de tu tema pero si no fuera así no está de más saber que clases CSS les afectan y poder cambiarlas. Las habituales son estas:

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

Al aplicar estilos a los widges es probable que siempre necesites las mismas clases. Es por ello que es buena idea combinar clases en tu hoja de estilos usando comas. Por ejemplo, puedes combinar .widget_pages ul y .widget_archive ul haciendo algo así:

.widget_pages ul, .widget_archive ul {}

Estilos por defecto del formulario de comentarios

Una de las partes normalmente más feas en cualquier tema WordPress es el formulario de comentarios. Si quieres algo realmente chulo mejor que lo modifiques. Estas son las clases que encontrarás habitualmente en WordPress:

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Bueno, creo que esta lista es genial para empezar a perderle el miedo a programar, CSS en este caso. ¡Que lo pases bien!, y acuérdate de hacer las pruebas siempre en un WordPress destinado a tal efecto, no enredes en tu tema activo.

Este maravilloso resumen lo publicaron en WP beginner

Artículos Relacionados:

• Cambia el estilo de tus smileys
• 10 maneras de reducir el “bounce rate” en WordPress
• El código es poesía, CSS es arte
• WordPress Jeopardy
• Miniaturas por defecto en todas las entradas

Bueno, pues ya está aquí la versión final del plugin de creación de foros automáticos para WordPress: bbPress 2.0. Si aún no has probado como incorporar un foro en un par de clics en tu web este es el momento.

Instalarlo es tan fácil como cualquier otro plugin: lo instalas, lo activas, creas unos cuantos foros y empiezas a usarlo. Lo único que es posible que tengas que retocar sea tu tema activo, sobre todo CSS, para que se adapte al mismo, pero igual hasta tienes suerte en este aspecto porque se adapta bastante bien a muchos temas actuales.

Otra cosa es importar desde un foro bbPress previo, algo que en mis pruebas aún da algunos fallos, sobre todo si ya tenías mucha actividad, pero lo sigo intentando y ya te avisaré cuando termine los experimentos. Por supuesto, si tienes experiencia en este aspecto coméntalo.

Ea, nada más, a probarlo se ha dicho, olvídate de configuraciones imposibles, de administración engorrosa e instalaciones tediosas como en otros sistemas de foros, ¡esto es WordPresss!

Contenido exclusivo para suscriptores al Feed

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

Guía Domina tu Blog

Artículos Relacionados:

• Cambia el estilo de tus smileys
• bbPress plugin en español
• 10 maneras de reducir el “bounce rate” en WordPress
• El código es poesía, CSS es arte
• WordPress Jeopardy

Si recuerdas a Nekko, que ya ha publicado varias entradas en Ayuda WordPress, sabrás que es alguien a quien seguir, que le gusta compartir conocimientos.

Pues bien, ahora está elaborando un taller de creación de temas WordPress en su blog, del que va por la tercera sesión. Y como es de vital importancia la participación para la elaboración de los siguientes temarios os animo a aprender con lo ya publicado y participar para que al final se cree un estupendo tutorial.

El temario es el siguiente:

Clase 1: Introducción: Instalar WordPress en un servidor local
XAMPP
Generar una base de datos desde PhpMyAdmin
Contenido de pruebas para la plataforma

Clase 2: Cómo encarar el diseño a partir de un archivo PSD
Presentamos nuestra plantilla.
Introducción a las partes de un theme.

Clase 3: ¡Comenzamos a maquetar!
Comenzamos a maquetar el index.php
Funciones básicas de header.php
El archivo de estilos CSS

Clase 4: El bucle. ¿Qué es? ¿Cómo y dónde se usa?

Clase 5: Jerarquía de templates.

Clase 6: Header.php. Funciones, composición, barra de navegación.

Clase 7: Sidebar.php. Composición, elaborar una sección de Widgets.

Clase 8: Footer.php. Funciones, composición y widgets.

Clase 9: Single.php y Page.php.

Clase 10: Page template con una segunda sidebar.

Clase 11: archive.php y plantillas por categoría, fecha, autor, taxonomía, etiqueta.

Clase 12: Páginas personalizadas: Consultas personalizadas.

Clase 13: Página de búsquedas: search.php e integración con Google CSE

Clase 14: Insertar anuncios

Clase 15: Páginas de error personalizadas

Clase 16: Implementar un slider para el inicio: Nivo-slider sin plugins.

Clase 17: Paginación y breadcrumbs.

Clase 18: Comentarios.

Clase 19: Plantilla para una sección de portafolio.

¡Genial, no te lo pierdas!

Artículos Relacionados:

• Cambia el estilo de tus smileys
• 10 maneras de reducir el “bounce rate” en WordPress
• El código es poesía, CSS es arte
• WordPress Jeopardy
• Miniaturas por defecto en todas las entradas

Un modo de acelerar WordPress es comprimir, mediante gzip, todo el contenido que tu sitio sirve a los navegadores de los usuarios que lo visitan.

Esto reducirá los tiempos de carga de tu web ya que la mayoría del HTML se comprime de maravilla.

Para conseguirlo solo tienes que añadir lo siguiente al fichero .htaccess:

¡A correr!

Artículos Relacionados:

• Cambia el estilo de tus smileys
• 10 maneras de reducir el “bounce rate” en WordPress
• El código es poesía, CSS es arte
• WordPress Jeopardy
• Miniaturas por defecto en todas las entradas

Hoy vamos a ver algo que quizás sea una aberración si lo lee un diseñador, o el milagro esperado para muchos usuarios que quieren tener la libertad de diseñar sus sitios y no tienen tiempo o ganas para aprender a programar. En cualquier caso es una opción a tener en cuenta para ambos (recuerdo a los diseñadores que a ellos también les gusta la facilidad que ofrece CODA a la hora de programar CSS).

Estoy hablando de WP Paintbrush, que dicho sea de paso me parece un nombre más que adecuado. Quien recuerde el programa básico de dibujo Paintbrush que ha venido instalado desde las primeras versiones de Windows sabrá de qué estoy hablando, de una aplicación básica, que permite dar los primeros pasos, incluso conseguir resultados notables, pero sin ofrecer productos profesionales.

Pues bien, esto es bastante aproximado a lo que nos ofrece WP Paintbrush …

En principio se instala como un tema, pero una vez activado la cosa ya muestra todo su poder. En realidad es todo un framework que, partiendo de un diseño básico (ampliable), nos permite configurar un tema WordPress a nuestro gusto.

Para ello dispone de un editor de plantilla y otro de colores. Mediante arrastrar y soltar y clics puedes configurar un tema totalmente a tu gusto, cambiando colores, añadiendo o quitando barras laterales, modificando anchos y altos, prácticamente de todo.

Además, puedes ir viendo en directo los cambios antes de guardarlos, en tu sitio en directo. Luego, cuando hayas terminado, solo tienes que hacer clic en el botón de publicar y ya tendrás tu nuevo tema diseñado por ti listo para utilizar.

Pero vamos, que todo lo que yo te diga es poco comparado con lo fácil que es usarlo. Lo mejor es que lo pruebes y luego nos cuentes tus impresiones.

¿Pegas?, pues la principal es que los temas generados de momento solo se pueden usar como temas hijos de WP Paintbrush, pero ya se anuncia un futuro plugin que permitirá exportar estos temas hijos a temas normales, para su difusión y uso donde quieras.

Otra limitación es que no puedes modificar temas que no se hayan creado expresamente con WP Paintbrush, así que olvídate de hacer una versión vampirizada de tu tema favorito, tendrás que partir de las plantillas base que nos ofrece WP Paintbrush.

Por lo demás me parece una aplicación muy interesante, y sobre todo algo en lo que fijarse de cara a una implementación futura en otros temas o incluso en el núcleo de WordPress porque ¿a que te gustaría disponer de algo así en cualquier tema para poder modificar su estructura base y adaptarla a tus necesidades?, seguro que sería algo que, de incluirse como "plugin core", tendría muchos apasionados, yo el primero.

Ah, casi se me olvida. Si quieres incluso puedes probarlo online en esta dirección.

Sitio oficial: WP Paintbrush

Artículos Relacionados:

• Cambia el estilo de tus smileys
• 10 maneras de reducir el “bounce rate” en WordPress
• El código es poesía, CSS es arte
• WordPress Jeopardy
• Miniaturas por defecto en todas las entradas