Agregar imagen destacada automáticamente los post de wordpress

Una imagen vale más que mil palabras y es bastante cierto, por eso en nuestro artículos agregamos imágenes que digan algo a los usuarios, en este tutorial agregaremos de forma automática una imagen destacada por si se nos olvida alguna vez.

Con este fragmento de código explicaremos como Agregar imagen destacada automáticamente a los post en wordpress., dejaré el código necesario y tratare de explicar cada trozo de código y la función que realiza cada linea.

Esta función ademas de capturar la primera imagen del post si no existe imagen destacada también puede agregar una imagen por defecto para este caso que el post no tenga ninguna imagen, es muy interesante ya que no todos los post tienen imagen y con esta opción podemos agregarle una por defecto.

Código completo para Agregar imagen destacada automáticamente

En esta función llamamos la imagen o las imágenes adjuntas si existen, utilizando las distintas funciones que wordpress nos proporciona,a continuación las más importantes.

Verificamos si hay imágenes destacadas

  • has_post_thumbnail($post->ID);: Con esta función preguntamos al sistema si hay o no imagen destacada y guardamos el resultado en la variable $already_has_thumb

Extraemos la primera imagen del post si no hay destacadas

Agregamos una condicional que dice: si no hay imagen adjunta if (!$already_has_thumb), mostramos la primera imagen del post utilizando la función get_children();en el code de wordpress explica perfectamente esta función y el funcionamiento con ejemplos de cada uno de estos parámetros.

Mostramos la imagen capturada

En esta parte con otro condicional preguntamos si hay algún valor en la variable $attached_image, que es la que contiene el valor de la función get_children() y si es así con un bucle foreach agregamos los datos capturados en la variable $attachment_id, ahora podemos postrar la imagen utilizando la función set_post_thumbnail($post->ID, $attachment_id); con sus dos parámetros, necesarios para saber respectivamente el post de donde vamos a extraer la imagen y el id o nombre de adjunto a mostrar.

Si no tenemos (else) ninguna imagen adjunta mostramos un archivo adjunto por defecto que podemos asignar nosotros mismos, simplemente agregando el ID de dicho archivo en esta parte del código.

Buscar el id del archivo por defecto

Para agregar una imagen predeterminada en los post si no hay imágenes destacadas o imágenes en el post, podemos crear una imagen personalizada subirla desde la Librería multimedia y fijarnos en el ID de esa imagen, lo agregamos en nuestra función y listo.

Agregar la función auto_post_thumbnail() a los hook de wordpress

Esta es la última parte del código y creo que la más importante, la función anterior sin estos ganchos o hook no realiza ninguna acción, esta es la parte del código donde se le dice a la función cuando tiene que trabajar.

En nuestro caso nos interesa que esta función trabaje cuando se publica alguno de los tipos de post que trae wordpress, esto lo aremos utilizando la función add_action(), a esta función les pasamos 2 parámetros:

  • El primero: Nombre de la acción o hook que hace que se ejecute nuestra función
  • El segundo: Nombre de la función a ejecutar.

Si quiere aprender un poco más sobre las acciones de wordpress aquí tiene un listado completo de estas acciones.

Conclusión

Solo con pegar esta función y agregar el id de una imagen por defecto te ahorra trabajo como lo de agregar imágenes a tus post, es una función muy interesante y útil, espero la explicación le sea de utilidad y que se entienda perfectamente.

¿Que te ha parecido este artículo? Dejanos tu valoración...

HorribleMaloBuenoMuy BuenoExcelente (1 votes, average: 5,00 out of 5)
Cargando…

  • Gago

    Muy buena información, lo utilizare en mi blog

  • No pude activarlo, lo coloque tal cual, cambiando el id de la imagen, en mi caso era 127, pero no sale nada, me podrías ayudar?

    • Revisa bien el código, por que la acabo de probar para comprobar que no hay nada raro y me funciona perfectamente.

  • allan

    muy buen codigo pero confirmame algo esto lo colocas dentro de functions.php p algun otro lugar

    • Si, en el archivo function.php, al parecer se me paso ponerlo 🙂

  • allan

    que tal jordano, estuve probando y funciona relativamente “bien”, ya que tengo post con imagenes dentro pero al hacer funcionar el script sólo me esta capturando la imagen estatica que le mando la ID como parametro y no me esta cogiendo las imagenes vinculadas a cada post.

    Dentro de la pagina index.php que en teoria es el homepage hay funciones dentro del loop de worpress que utiliza la funcion the_post_thumbnail(), será que esto influye en el resultado??

  • Si tienes imágenes colocadas en cada post como destacadas el script debería tomarlas por que funciona en este orden:

    1.- Revisa si el post tiene imagen destacada.

    2.- Si no hay imágenes destacadas busca en el contenido de la entrada y captura la primera imagen que encuentre y la coloca como destacada.

    3.- Y si no están ninguna de las imágenes anteriores es cuando debe de utilizar la imagen colocada mediante el ID.

    Fíjate bien si de verdad tienes imágenes destacadas por que he probado todas las opciones y funciona a la perfección, revisa bien el código que no tenga una coma de mas o menos.

    El loop en el index.php no influye para nada en este funcionamiento, esa función solo se utiliza para mostrar la imagen en pantalla, mientras que el script que muestro en este tutorial lo que hace es colocar una imagen como destacada de forma automática.

  • abraham

    Hola, pero como lo coloco dicha función en mi index.php?? ??? Necesito ayuda, mi wordpress es la v 3.5.1

    • No amigo, en comentarios anteriores he dicho que tienes que agregar este código en el archivofunctions.php de tu plantilla.

  • Hola, Gracias por el aporte esta magnifico, pero yo tengo un pequeño problema, estoy editando una plantilla por lo cual yo quería que las imágenes destacados sean puestos desde otro server sin necesidad que se suba al a mi pagina mediante una url, he logrado hacerlo y funciona perfectamente, pero el detalle es que ahora ya no funciona el que biene por defecto, me gustaría que este funcione por ambas partes, necesito tu ayuda urgente. Gracias

    aqui te dejo los codigos

    Saludos.

    • Voy a probar el código y te comento una solución.

  • cabello

    Hola, te cuento mi caso a ver si me puedes ayudar, yo tengo un blog de recetas que lo que hace es que coge entradas de otros blogs, estas entradas las coge automaticamente con un pugin, este plugin lo que hace es coger el texto y la direccion de la imagen. ¿como puedo hacer para que ponga automaticamente como destacada?

    • Se me llegan algunas ideas a la cabeza, dime el nombre del plugin para instalarlo en local y hacer algunas pruebas, hay que crear código personalizado para esto.

  • cabello

    El nombre del plugin es FeedWordPress
    la direccion de mi web es esta, http://www.recetaklia.com, yo no se casi nada de wordpres, como veras en mi web esto ya lo hace, pero ahora quiero cambiar el tema y no se como hacerlo, esta web me la hizo un informatico

  • ¿Funciona en la version 3.8? lo copie y lo pegué tal cual en la hoja functions.php y no pasa nada.

    • ¿Las imagenes en el post tienen que estar alojadas en la carpeta local? Porque llamo todas mi imagenes desde URL externa. :-/

  • Hola muchas gracias por el port, me ha sido muy útil. Solo una pregunta como podría forzar el tamaño para que la imagen no sea excesivamente grande y que todas tenga un tamaño stándar.

    Muchas Gracias otra vez

    • Hola @Issa,

      Esto que preguntas puedes hacerlo de dos formas, Con CSS o con tamaños personalizados en las miniaturas de wordpress.

      Con Css: Puedes utilizar alguna técnica para imágenes responsive, poniendo el ancho de la imagen en 100% y el alto en auto, y controlar su tamaño con las dimensiones de su contenedor.

      Con la función add_image_size(): con esta función tienes la opción de crear un tamaño de imagen para cada lugar de tu web, de esta forma utilizas el tamaño óptimo para cada espacio en el que necesites una imagen.

      Este es un ejemplo de su uso.

      Para más información sobre esta función visita el codex de wordpress

      • Pablo

        Muy buen blog y post.

        Hace unos días me he instalado en framwork genesis con un tema, en ese tema cuando le das en una categoría sale todos los post seguidos y la verdad que no me gusta nada, Se podría hacer ¿que las categorías y subcategorías solo aparecieran la imágenes destacadas?

        Muchas gracias y enhorabuena por tu blog!!!

      • Te refieres a que al entrar a una categoría, los post de esa categoría, muestren por ejemplo la imagen destacada y su título?

        Si te refieres a eso, se puede hacer, solo debe editar el archivo category si lo quieres modificar en todas las categorías, o crear un nuevo archivo category-ID.php para una categoría especifica.

        Si no es lo que preguntas, agrega una imagen por que no he entendido muy bien.

        Un saludo.

      • Pablo

        Exacto, quiero poner para todas las categorías y las subcategorias la imagen desatacada y el título.

        – En la plantilla de Génesis que no tiene el archivo category.php, entonces me lo tengo que crear, ¿no?.
        – Por otra parte como no se mucho de php no se como se hace este tipo de plantillas(diseño) para las categorías y subcategorias.