WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

5 maneras de hacer que tus posts sean mucho más bonitos

Jorge López by Jorge López
16 abril 2017
in Optimización
Reading Time: 4 mins read
0

Los posts de tu blog son la parte más importante de tu sitio web. Es el medio que nos ofrece WordPress para interactuar con nuestros visitantes y que, como administrador, puedes actualizar para hacer que tu proyecto sea 100% dinámico. Lógicamente, como administrador de WordPress supongo que querrás que tus posts luzcan bien y sean fáciles de leer. En este artículo te proponemos 5 métodos para hacer que tus posts sean mucho más bonitos.

Utilizar la imagen destacada como imagen de fondo

Una manera de conseguir que tus sean bonitos, es la de decorar tus posts utilizando la imagen destacada de los posts como imagen de fondo personalizada. Esta técnica te abre un amplio abanico de posibilidades y dotará a cada uno de tus posts de un aspecto único.

Para llevar a cabo esto, solo tienes que editar el archivo single.php del theme que tienes activado actualmente, y añadir el siguiente código. Una vez hecho esto, simplemente debes establecer como imagen de fondo, la imagen destacada del artículo.

Artículos relacionados

Consejos para mejorar el rendimiento de WordPress

15 octubre 2019

Cómo añadir campos personalizados en el formulario de comentarios

11 enero 2016

4 cosas que desconoces del archivo de configuración de WordPress

10 mayo 2016

Cómo insertar suscriptores en una lista de Acumbamail mediante un formulario creado con Gravity Forms sin utilizar plugins

6 febrero 2020
<div class="image-thumbnail" style="background-image; url(<?php echo get_the_post_thumbnail_url() ?>)"></div>

Si no cuentas con los conocimientos necesarios para editar ficheros de WordPress, puedes echar un vistazo a nuestra guía en la que te narramos cómo editar ficheros de WordPress mediante un cliente FTP.

También te puede interesar: Cómo personalizar el diseño de los correos de WordPress

Asegúrate de que WordPress lo has escrito con la P en mayúsculas

No se escribe wordpress… ¡Se escribe WordPress! Si sueles hablar sobre tecnología, diseño web o programación, este error al escribir la palabra WordPress puede hacerte parecer muy poco profesional. Sí, ya sé que es difícil recordar que siempre debes escribirlo con la P en mayúsculas, y que el poco tiempo del que disponemos no ayuda. Por suerte, podemos ayudarnos de una función que se introdujo en WordPress a petición del mismísimo Matt Mullenweg.

La función capital_P_dangit nos ayuda a escribir bien la palabra WordPress. Para ello coge una cadena como parámetro, en la que comprueba si el nombre del CMS está bien escrito. En caso contrario, la reemplaza por la nomenclatura correcta.

<?php capital_P_dangit( "Siempre me olvido de escribir bien la palabra wordpress. ¡Cachis!" ); ?>

Muestra el código de manera correcta

Debes ser muy cuidadoso a la hora de mostrar código en tus posts de WordPress. El hecho de publicar código mal formateado puede ocasionar errores de comprensión en tus visitantes: sintaxis mal coloreada, saltos de línea inesperados… Por desgracia, muchos themes gratuitos y premium no muestran el código fuente de manera idónea.

Existen un montón de plugins que te facilitan eso de mostrar código bien formateado en la parte pública de WordPress. Hace un par de años escribí un artículo en el que os hablaba de ello. ¿No tienes tiempo? No pasa nada, a continuación tienes un código CSS que te puede ayudar a formatear esos <pre> que utilizas al mostrar el código en tu web.

pre{                     
	background:#f5f5f5;
	border:1px #eee solid;
	border-top:20px #eee solid;
	font-family:Consolas, courier;   
	font-size:0.9em;        
	white-space:pre;
	overflow-x:auto;
}

Presta atención a la tipografía

La tipografía es tan clave que, personalmente creo, que es el 80% del diseño de un sitio web. Debes asegurarte de que tu texto siempre sea legible (también en dispositivos móviles), que tenga un buen espaciado y un tamaño adecuado. Pero no solo en el cuerpo de los posts, también en los títulos, citas, comentarios, etc.

Aunque no existen reglas escritas en términos de tipografía, aquí tienes unas cuantas pautas a la hora de tener en cuenta en el diseño de una web.

  • Al hablar de fuentes, menos es más. Lo ideal es contar con dos (como mucho tres) fuentes diferentes en tu diseño web.
  • Asegúrate de que el contraste entre el color de la fuente y el fondo hace que sea legible.
  • Haz uso de diferentes tamaños de fuente, colores… para diferentes elementos que contengan texto (citas, h1, h2, excerpts…)
  • Asegúrate de que tu fuente sea lo suficientemente grande para que sea legible por todo el mundo y por toda clase de dispositivos.

Si te interesa más el tema, hace poco escribí un artículo en el que os hablaba de 9 plugins de WordPress para hacer mucho más con tus fuentes.

Haz que los posts se muestren rápido

El aspecto de un blog definitivamente es algo importante, pero lo es aún más la velocidad de carga. Si tu página tarda 10 segundos en cargar, no importa lo bonita que sea, que el 95% de tus potenciales visitantes no esperarán y se marcharán a la web de tu competidor, en lugar de permanecer en la tuya.

Utiliza Google PageSpeed Insights para comprobar la velocidad de visualización de tu sitio web en equipos de escritorio y en dispositivos móviles. Obtendrás un montón de consejos sobre qué solucionar para hacer que tu sitio web sea más rápido. Si necesitas más información. consulta este artículo: 10 claves para optimizar WordPress al máximo.

También te puede interesar: 10 plugins tipográficos para mejorar tu diseño

Y hasta aquí nuestro artículo sobre 5 maneras de hacer que tus posts sean mucho más bonitos. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El icono de la imagen destacada es obra de kokiri studio. ¡Nos leemos!

Continue Reading
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

Optimización

Cómo activar Gzip en .htaccess y solucionar errores

5 mayo 2025

¿Buscas acelerar tu sitio WordPress? Activar la compresión Gzip mediante el archivo .htaccess es...

Plugins

Cómo optimizar WordPress con plugins de caché: guía avanzada para acelerar tu sitio web

4 mayo 2025

Los plugins de caché son una de las herramientas más eficaces para mejorar la...

Optimización

FlyingPress: el plugin de caché para WordPress que optimiza la velocidad real del usuario

1 mayo 2025

En un ecosistema web cada vez más competitivo, la velocidad de carga se ha...

Optimización

La Revolución de la Optimización de Imágenes: WebP vs AVIF en la Web

30 abril 2025

En la actualidad, la velocidad de carga de un sitio web se ha convertido...

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.