Personaliza el fondo de tus post en WordPress - La Nina Photography

Personaliza el fondo de tus post en WordPress

Añade un poco de estilo extra a los posts y páginas de tu web empleando fondos de pantalla únicos. Personaliza el fondo de tus post en WordPress.

Las fotos, ilustraciones y gráficos son una buena forma de hacer los artículos más agradables. Pueden dar a tus palabras un poco de contexto para ayudarte a transmitir tu mensaje, cualquiera que sea. Además ayudan al posicionamiento de tu artículo y de tu web.

Por ejemplo, un artículo sobre tu viaje, resaltará mucho mas si además de usar las fotos en su contenido, añades un fundo de pantalla único para este post.
WordPress ya tiene una forma de personalizar fondos, pero estos fondos son globales. Voy a explicarte como hacerlo.

01.- Crea un child Theme

Como vamos a trabajar con el theme Twenty Twelve  vamos a empezar creando un child theme para no cambiar el original. Crea una carpeta llamada twenty-fondopersonalizado con el siguiente archivo style.css, súbelo a wp-content/themes/ y luego actívalo como si fuera otro theme desde el wp-admin.

childtheme

02.- Planifica la meta box

Usaremos una nueva meta box (ya que los campos personalizados son demasiado user-unfriendly) que será añadida a los posts y páginas. Para mantener las cosas fáciles (por ahora), vamos a dejar que este campo contenga texto, será el input donde pegarás la URL de la imagen que quieres de fondo. La meta box se muestra en la sidebar de la derecha cuando estas escribiendo o editando un post en wp-admin.

03.- Añade la meta box

Crea el archivo functions.php en tu theme twenty-fondopersonalizado y añade el siguiente código que creará todas las meta box (una de momento en nuestro caso) con la función fondopersonalizado_meta(). La función add_meta_box() contiene los datos, desde el nombre del meta box hasta el tipo de post que tendrán la meta box disponible, donde aparecerá (en el sidebar de la derecha) y cómo es de importante. En principio la meta box aparecerá vacía.

meta-box

04.- La función del meta box

En la función fondopersonalizado_meta_box() es donde escribiremos los input y los contenidos de nuestro meta box.

 

05.- Almancenar el meta post

Cuando se escribe algo (o se selecciona) en un campo de un meta box, se almacena en la base de datos. Necesitaremos una query para el meta post usando get_post_meta() y las llamadas adecuadas. Vamos a almacenar la url de la imagen de fondo en $url.

 

06.- Algo de seguridad

Para añadir algo de seguridad adicional, vamos a usar wp_nonce_field(). Esto añade algo de validación adicional para segurar que el contenido enviado viene del sitio correcto.

 

07.- Completa la función de la meta box

Lo único que falta son las especificaciones de la meta box. Es un simple campo input, al que le daremos un nombre apropiado, y una $url para almacenar el valor.

 

08.- Guarda el contenido

El siguiente paso es guardar el contenido cuando el post se guarda, incluyendo los auto guardados. Añade la función fondopersonalizado_meta_save() a al save_post action, y guardalo sólo si el usuario tiene los privilegios adecuados.

 

10.- Crear los estilos

Vamos a añdir los campos para añadir estilos al fondo y el output para enlazar con el header.

 

11.- Un nuevo header.php

Ya guardamos la imagen de fondo a través del meta box, ahora toca mostrarla. Para este ejemplo, vas a añadir algo de código a header.php, así que copia el archivo del theme Twenty Twelve a la carpeta twenty-fondopersonalizado y busca la etiqueta body (por la línea 34). Después busca body_class() y añadiremos un do_action() para llamar a  fondopersonalizado_output.

 

12.- Crea la función fondopersonalizado_output_style

Esta funcion envía la imagen como código css. Como queremos estar seguros de que sólo lo envía para un sólo post  añadiremos la condicional is_singular(). Esto esta fuera del loop de wordpress, pero queremos llegar a los post meta data, necesitamos la variable global $post. Finalmente hacemos un echo del estilo y traemos el contenido de _fondopersonalizado_meta_box_url y de _fondopersonalizado_meta_box_style con get_post_meta().

 

13.- Añade un fondo y pruébalo

Ya es hora de ver cómo funciona, ¿no te parece? Escribe un post y añade una URL al campo input de Fondo Personalizado. Después dale a publicar. Yo he escogido una foto de mi amiga la fotógrafa australiana Nina V Owens.

Personaliza el fondo de tus post en WordPress-pruebalo Personaliza el fondo de tus post en WordPress-resultado

Y aquí lo tienes, has terminado el tutorial Personaliza el fondo de tus post en WordPress. El post tiene su propia imagen. Pero no tienes porque parar aquí. Puedes utilizar estilos adicionales como escalar la imagen al 100% sin repetirla, y adaptarla al ancho de la pantalla (escribe en estilos adicionales: background-size:100%; background-position:fixed; background-repeat:no-repeat;).

Si te ha gustado, ¡compártelo!
Share on Google+0Tweet about this on TwitterShare on Facebook0Share on LinkedIn0Email this to someone