Cómo añadir imágenes de cabecera aleatorias a tu blog de WordPress
Contenidos
Como mi tema anterior tenía imágenes de cabecera aleatorias, pensé que sería genial aprovechar la función incorporada y preparar un tema hijo que sustituyera esas imágenes de cabecera existentes por las mías. Así es como lo hice:
Empezaré creando una nueva carpeta dentro de wp-content/themes/ – puedes llamarla como quieras. Yo la llamaré versluis2013, que coincide con el título de este nuevo tema hijo. Dentro de esta carpeta crearé un único archivo llamado style.css, añadiendo estas líneas en la parte superior del archivo:
Estoy seguro de que usted está familiarizado con todo esto, sólo estoy añadiendo aquí para completar. Esto le dice a WordPress que un nuevo tema está en la ciudad y que requiere el tema padre TwentyThirteen. La última línea importa todas las reglas CSS del tema padre para que podamos sobreescribirlo.
Aunque está bien, necesitamos las nuestras. Esto es sencillo si sólo quieres mostrar una única imagen de cabecera: cárgala como sugiere el tema y listo. Sin embargo, me gustaría utilizar la opción Aleatoria y mostrar una imagen de cabecera diferente cuando el usuario actualice la página.
VBA Userform Aleatorio Imagen de Fondo de una Matriz
Muchos temas gratuitos y premium de WordPress soportan cabeceras personalizadas y permiten configurar y cambiar las imágenes de cabecera a su gusto. Si los sitios web promocionales y de negocios se ven muy bien con sliders, entonces un blog se verá bastante impresionante con una imagen de cabecera estática. ¿Por qué no? Podrás centrar la atención de tus lectores en el contenido y no distraerlos del contexto de tus posts.
Como uno de los temas gratuitos por defecto de WP soporta imágenes de cabecera, lo usaremos como ejemplo para mostrarte lo fácil que es configurar la imagen de cabecera, recortarla, cambiarla, aleatorizarla y publicarla en tu sitio web sin ningún esfuerzo. No se requieren conocimientos específicos o habilidades de codificación.
Después de que el plugin esté instalado y activado ve a Posts -> Add New. Aquí verás un cuadro de cabecera meta apareció bajo el editor de mensajes. Puedes seleccionar una imagen de cabecera aleatoria, no mostrar ninguna imagen de cabecera o restaurar una imagen de cabecera original si lo deseas.
WordPress de principio a fin: Parte 7 – Añadir Encabezado Múltiple
En este tutorial, vamos a aprovechar dos de las características más potentes de WordPress, get_posts() y los campos personalizados, para crear una impresionante galería de cabecera aleatoria estilo lightbox para las imágenes de tus entradas.
Mostrada antes del bucle estándar de la entrada, esta galería lightbox mostrará aleatoriamente las imágenes que están asociadas con tus entradas mientras que también proporciona un enlace descriptivo al título de la propia entrada. He aquí una representación gráfica que nos ayudará a visualizar el concepto:
Si ya has estado aprovechando los campos personalizados de WordPress, entonces ya entiendes la idea básica aquí. Para cada entrada que quieras que aparezca aleatoriamente en la cabecera de tu tema, crea el siguiente conjunto de campos personalizados:
Observe que estamos utilizando rutas de archivo relativas para las imágenes. Este truco asegura la máxima flexibilidad y portabilidad para nuestros datos de campos personalizados. Observa también las dos imágenes diferentes que estamos utilizando para cada entrada: una imagen a tamaño completo que se mostrará en la ventana emergente del lightbox, y una versión recortada o redimensionada de esa misma imagen para mostrarla en la cabecera aleatoria.
Imagen Aleatoria Al Cargar la Página / Al Hacer Clic Usando HTML – CSS
Vi un artículo en wprecipes.com que describía cómo mostrar una imagen aleatoria en la cabecera de un blog WordPress. Aunque el código mostrado funciona, es un poco verboso y difícil de mantener, así que pensé en mostrar cómo se hace la imagen aleatoria en la cabecera de este blog.
En esta técnica, la suposición es que usted tiene un directorio con imágenes de cabecera, ubicado en images/headers bajo el directorio de su tema (por ejemplo, /su/blog/directorio/wp-content/themes/yourtheme/images/headers/). El código que se muestra a continuación elegirá una imagen al azar de este directorio. Las imágenes ya deberían tener el tamaño/ratio adecuado para mostrarse en tu blog.