Slider en cabecera para tema twentyeleven en WordPress

Muchas veces he utilizado como tema base para crear un template para WordPress, el tema twentyeleven, que viene por defecto en la instalación de la última versión.

Siempre había querido hacer un slider con las imágenes que se muestran en la cabecera y que son configurables desde Apariencia / Cabecera. El caso es que el otro día tuve que hacerlo para un cliente y, antes de ponerme a hacerlo desde cero, busqué un poco por si alguien lo había hecho ya, no es cuestión de ir reinventando la rueda porque sí.

El caso es que encontré un plugin que añade una opción más a la ventana de configuración de la cabecera para que esta se muestre como un slider, utilizando para ello el plugin para jQuery Nivo Slider (qué casualidad, porque yo iba a poner ese).

El caso es que después de instalar el plugin y de realizar un par de ajustes ya me aparecían las imágenes de la cabecera pasando de una a otra.

Ahora solo me hacía falta configurar mis imágenes para que salieran estas en lugar de las que vienen por defecto en twentyeleven.

Abrimos el archivo functions.php y al final del todo lo que haremos será:

  1. Deshabilitar las imágenes de la cabecera que vienen por defecto y…
  2. Habilitar nuestras imágenes habiendo subido previamente las nuevas al servidor via ftp

Para esto lo que habrá que hacer, como ya he dicho, es escribir el siguiente código al final de functions.php:

Con esto lo que hacemos es borrar las antiguas imágenes y poner cinco nuevas.

Mucha gente utiliza los child themes, o temas basados en otros, para crear modificaciones de estos. Yo no lo hago pero más que nada porque no me he puesto nunca. Simplemente me gusta enredarme con el código y crear un nuevo tema a partir del original, aunque igual lo de hacer un child theme sea mejor opción.

Espero que le sirva a alguien 😀

Act: Suelo dejar para el final el tema de hacerlo todo compatible a versiones antiguas de IE. En este caso IE7 no carga las imágenes. Por lo visto el utilizar la opción auto insert del plugin no le gusta mucho al dichoso IE y no carga bien. La solución es cambiar el código de carga de las imágenes directamente en el archivo header.php. Donde pone esto:

Por esta línea:

Con esto ya cargará bien las imágenes en IE7 y nos podremos olvidar del tema…

+ info: http://wordpress.org/extend/plugins/header-image-slider/
http://wpti.ps/functions/replace-remove-header-image-twenty-eleven-theme/

39 opiniones en “Slider en cabecera para tema twentyeleven en WordPress”

    1. Exacto, cambias todo ese código por la línea, eso para que funcione en IE7 y acuerdate de activar la opción auto insert

      Ya me dirás si te sale o no ;D

    1. En la configuración de la cabecera, tienes la opción Enable auto-insert the slider?. Tienes una imagen en el post de la pantalla de configuración. Haz scroll para arriba a ver si la encuentras 😀

  1. hola carlos, amigo te comento que con la nueva version de wordpress(3.3.1) ya no es necesario el código para cambiar las imagenes unicamente tienes que elegir subir una imagen desde el dashboard en appareance->Header->Upload Image. Espero también les sirva a los compañeros(tus visitantes Carlos).

    Ahora tengo una pregunta ¿Cómo le hago para que cada imágen tenga un vínculo hacia la página correspondiente para ampliar la información acerca de la imágen(por ejemplo hablando de que mis imagenes son un juguete diferente cada imagen, como le hago para que al dar clic sobre una imagen me lleve hacia la descripción completa del juguete)? Muchas gracias de antemano. Si alguien sabe como hacerlo por favor aporte, estoy segura que le serira a mas de uno. Dios los bendiga gracias.

  2. Hola Maria,

    Gracias por la info del tema de subir las imágenes.

    Para solucionar tu problema habría que modificar el plugin para que se pudieran configurar desde el administrador. Si lo que quieres es una solución rápida puedes modificar el fichero header-image-slide/general-template.php y modificar la función boom_build_nivo_slider reemplazando este código:

    por este otro:

    Todo esto teniendo en cuenta que has usado la función boom_header_image(); en lugar del auto insert

    Espero que te sirva. Un saludo.

  3. Muchisimas gracias Carlos, aun no pruebo el código pero estoy muy agradecida ya te contaré en cuanto lo pruebe. Abusando un poco de tu bondad Carlos podrias ayudarme con ¿Cómo puedo excluir el slider del resto de páginas, es decir “Necesito que solo se vea en el home”. Gracias de antemano y felicidades por el blog, es de gran ayuda, ten la seguridad de que estas ayudando a mucha gente pues por ejemplo mi caso no solo lo aprovecho yo si no todos tus visitantes. Gracias.

  4. Carlos respecto a tu respuesta del 11 enero, 2012 at 10:26 , te comento que entre las comillas parece existir un link con una imagen como la que aparece cuando hay un vínculo roto o cuando no se encuentra la imagen, de cualquier manera le di clic y me lleva a un 404 not found. Ojalá puedas corregir para que no aparezca la 404. Y volviendo a lo mio, que debo poner entre las comillas pues parece ser que hay algo pero no puedo verlo por lo que ya comente. Gracias Carlos. Saludos

    1. Jo, perdona Maria… las prisas…

      Ya lo tienes arreglado en el comentario anterior, dime si te funciona ok?

      Para lo que dices de que sólo apareciera en la home lo más fácil sería poner el código de la cabecera dentro de una condición con la función is_home(). El código de inclusión está en el archivo header.php. Así que ahí harías algo como esto:

      Un saludo

      1. me sale este error “Parse error: syntax error, unexpected T_STRING in /home/nombredeusuario/public_html/midominio.com/prueba/wp-content/plugins/header-image-slider/general-template.php on line 79” ojalá me puedas ayudar. gracias de antemano

      2. he revisado el código y está idéntico a como me hiciste el favor de compartir Carlos, No se solucionar el error, me sigue apareciendo. será que tiene que ver con la declaración de la variable links o el contador cont o algo así? Tendrá que ver con el alcance de las variables, disculpa no soy experta en programación pero si me esfuerzo por entenderte Carlos, de hecho he estado leyendo aun mas sobre la misma ayuda que tu me das. quedo pendiente Gracias

      3. ahora he leido y hay quien dice que en una misma linea no puedes insertar ” con ‘ (o sea comillas dobles con comillas sencillas) ya estoy muy desesperada no logro corregir el error Carlos.

  5. Carlos algo hice mal, no me funciona. Tal vez sea porque no entendí bien la parte de “Todo esto teniendo en cuenta que has usado la función boom_header_image(); en lugar del auto insert” Cuando no utilizo el auto insert se supone que entonces debo insertar el código: boom_header_image() en el lugar donde quiero el slider ¿Que no? o entendí mal. Agradezco de antemano tu tiempo y la voluntad de ayudar CArlos. Gracias

    1. Vale, ya lo tengo. El problema está en el rel=”nofollow”. Al tener comillas dobles está cerrando las que abres al principio de la cadena. Donde dice esto:

      Tiene que poner esto otro

      Acuerdate también que con esta solución tendrás que tener exactamente el mismo número de enlaces que imágenes vayas a mostrar en la cabecera ya que si hay menos el bucle intentará acceder a elementos del vector que no existen y fallará.

      Yo acabo de probarlo y funciona. Así que si no te va dímelo y veremos a ver que es lo que pasa. Esto se convierte en algo personal ya… 😀

  6. Genial Carlos ha funcionado, eran las comillas. Eres muy amable y generoso. Gracias pero esto no queda aqui, tienes mi correo y si en algo puedo corresponder estoy a tus ordenes. Gracias otra vez.

  7. hola Carlos,
    primero muchas gracias por compartir tus conocimientos.
    Mira ya casi resolvi lo del slider, ahora solo tengo un detalle:

    Se me solapa, o sea se me encima en el menu. He andado buscando el slider-wrapper
    en el archivo style.css y no encuentro la linea o parámetros a modificar.
    Te adjunto captura de pantalla.

    Tambien intente buscando dentro del css del plugin
    en el archivo nivo-slider.css

    tambien lo hice dentro del archivo,
    slider.css.php(que desconozco porque tiene .css y tambien tiene .php)

    Ojalá puedas ayudarme te estoy muy agradecida ya de por si.
    Lo que quiero es que no se encime en el menu.

    muchisimas gracias por todo de antemano.

  8. disculpa Carlos, las prisas. PAra no enredarnos mira:

    tengo el código así:

    Esto me marca error. Que es lo que estoy haciendo mal, lo que quiero es que el código:
    if (function_exists(‘get_thethe_image_slider’))
    {
    print get_thethe_image_slider(‘Slider1’);
    }
    Solo se ejecute en la pagina de inicio y no puedo me marca el siguiente error:
    Parse error: syntax error, unexpected T_ENDIF in /home/cuentadeusuario/public_html/midominio.com/wp-content/themes/twentyeleven/header.php on line 93
    Disculpa mi ignorancia Carlos, estamos aprendiendo jejej. Gracias de antemano.

  9. me borro el codigo pero algo asi:

    “if (is_home())
    {
    if (function_exists(‘get_thethe_image_slider’))
    {
    print get_thethe_image_slider(‘Slider1’);
    }
    }

    Quiero que el siguiente codigo solo se ejecute en la pagina de inicio:

    if (function_exists(‘get_thethe_image_slider’))
    {
    print get_thethe_image_slider(‘Slider1’);
    }


    }”

    no se que estoy haciendo mal, muchisimas gracias de antemano y disculpa tanta guerra.

  10. Hola, corregi, era error de sintaxis pero ¿Que crees Carlos? Resulta que ahora si tengo configurado en wordpress 3.3.1 >Settings > reading = Your latest posts.

    Pues si me pone slider en el home y en el resto de las páginas no, tal y como conviene que sea.

    Pero ahora el problema es que yo necesito poner una página de inicio diferente a la que trae el blog por defecto con las entradas recientes.
    Yo necesito Poner una página de inicio estática y que ahi se visualize el slider, pero con el mismo código con el que si hace su trabajo estando seleccionada la opción Your Latest Post, resulta que cuando configuro desde Settings > reading = A static page (select below) una pagina de inicio(página estática de nombre inicio) me quita el slider de todas las páginas, en ninguna página lo pone, es decir tampoco lo pone en la página inicio. Lo que a mi desde mi ignorancia me da por conclusión que es un error de wordpress y no se si sea solo esta versión pero como el código ya hizo su trabajo bien estando configurado Front Page Displays como “Your latest posts” Pues deberia de hacerlo igual cuando tengo seleccionado A static page (select below) desde Front Page Displays ¿Que no? O corrigeme por favor y ojalá puedas ayudarme. Gracias una vez más Carlos.

  11. Que tal, por cierto, ¿Es legal quitar el “Powered by WordPress” del footer?, lo pregunto porque veo que tu no lo has hecho pero la verdad es que no se si porque sea legal o no o simple gusto. Solo curiosidad. Gracias

  12. Tal y como pone la gente de WordPress:

    If you’d like to support WordPress, having the “powered by” link somewhere on your blog is the best way; it’s our only promotion or advertising.

    Así es que no parece que sea obligatorio. Yo lo dejo porque quiero hacerles publicidad y que todo el mundo sepa lo que se puede hacer con este software.

    De nada!! 😉

  13. Gracias, esta muy bueno tu trabajo, temgo una duda.. sabes que debería hacer para agregarle un hipervinculo a cada imagen (sliders que se crearon)…
    trate de hacerle modificaciones pero no di pie con bola..!!
    Ante todo muchas gracias.

  14. Yo buscaba otra cosa y no se como llegué aki, pero sólo queria felicitar al autor de esta página por la paciencia y el buen hacer… ojalá hubiese mas gente asi, gracias!

  15. Hola Carlos, está genial la ayuda que ofreces, a mi me gustaria saber si alguno ha probado con el plugin header image slider, lo que hace es acoplar en modo slider las imagenes de la cabecera. Lo que me gustaria saber es como hacer para vincular cada imagen a su pagina, como quería hacer Maria pero no sé si funciona igual este plugin. He intentado instalar el Jquery nivo slider en el twenty eleven – versión WordPress 3.42. y no funciona.
    Si me pudieras ayudar te lo agradecería.

    Saludos a todos.

  16. Bien, antes de nada me gustaría agradecer tanto a el autor/autora como a la gente de los comentarios la ayuda. Pero ahora tengo la duda igual que los otros de como poner un link a cada imagen pero yo el slider lo activé con auto insert y no se como hacerlo, si me echais un cable os estaré eternamente agradecido, XD

  17. Hola Carlos, instale el plugin y me da la opcion en la cabecera para colocar el slide y configurarlo, pero a la hora de guardar solo me muestra el icono de imagen rota sin funcionar. Que puedo hacer al respecto?

  18. Carlos qué tal? Tengo una duda, necesito que la barra del menú (main header) aparezca dentro del slider o foto principal del home. Es decir, no quiero el main header con fondo sino que esté integrado en el Slider.

    Espero tu pronta respuesta.

    Mil gracias

  19. Buen ejemplo, pero mi problema es otro. En la página principal aparece la imagen que tengo definida de manera estándar, pero al entrar en cualquiera de los posts, la cambia por la imagen destacada. Estoy revisando el código y he ralizado varias pruebas pero no logro encontrar la instrucción para que me mantenga la principal. Si me pudieras orientar te lo agradecería mucho.

    Un saludo y felicidades por tu trabajo,

Deja un comentario

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