Salidas código html Imágenes en miniatura de la publicación actual.
Esta etiqueta de plantilla debe usarse dentro del bucle de WordPress.
Se puede crear un tamaño adicional de la imagen, que luego se puede obtener usando esta función, mediante add_image_size() . De forma predeterminada, están disponibles los siguientes tamaños: miniatura, mediano, grande, completo y posterior a la miniatura.
✈ 1 vez = 0.001739s = muy lento| 50000 veces = 6,79 s = rápido| PHP 7.1.2, WP 4.7.3
No hay ganchos.
Devoluciones
nulo (nada). Imprime una cadena en la pantalla. La función muestra el código html de la imagen o valor vacío(nulo) si la imagen no existe.
Uso
$tamaño (cadena/matriz)El tamaño de la miniatura a recibir. Puede ser una cadena: miniatura, mediana, grande, completa o una matriz de dos elementos (ancho y alto de la imagen): matriz(32, 32).
Cuando se especifica una matriz, no se crea una nueva miniatura con las dimensiones especificadas. Y WP busca el tamaño más adecuado entre los que ya existen, lo toma y simplemente especifica la altura y el ancho en píxeles de la etiqueta IMG para hacer la imagen más pequeña. Aquellos. La imagen se reduce solo visualmente.
Valor predeterminado: "post-miniatura", el tamaño que se establece para el tema usando set_post_thumbnail_size()
$atributo (cadena/matriz)
Una serie de atributos para agregar a lo recibido. etiqueta html img.
Puedes especificarlo como una línea: alt=alt&class=alignleft o como una matriz:
$default_attr = array("src" => $src, "class" => "attachment-$size", "alt" => trim(strip_tags($wp_postmeta->_wp_attachment_image_alt)),);
Se puede especificar cualquier atributo.
Por defecto: ""
Ejemplos
#1 Miniatura como enlace a una publicación
Ejemplo 1: utilice el siguiente código para convertir una imagen en miniatura en un enlace a una publicación. Ejemplo de uso dentro de un bucle de WordPress:
" título="!}" >
#2: Haz que la miniatura sea un enlace a la publicación
Para hacer esto, usamos el gancho post_thumbnail_html. En este caso, la imagen será un enlace a la publicación inmediatamente cuando se llame a la función the_post_thumbnail(); . El código debe agregarse al archivo de plantilla. funciones.php:
Add_filter("post_thumbnail_html", "my_post_image_html", 10, 3); función my_post_image_html($html, $post_id, $post_image_id) ( $html = "" . $html . ""; return $html; )
#3 Miniatura: enlace al tamaño original
Un ejemplo que muestra cómo crear una miniatura que haga referencia al tamaño original de la imagen:
#4 Registrar un nuevo tamaño
Puedes usar add_image_size() para registrar un nuevo tamaño y luego recuperarlo mediante la clave:
// digamos que en funciones.php registramos un tamaño adicional como este: add_image_size("spec_thumb", 360, 240, true); // más adelante en el bucle mostramos este tamaño así: the_post_thumbnail("spec_thumb");
Flexor 5
Este es un complemento pequeño pero muy útil cuya única función es regenerar miniaturas de blogs. Cualquier cambio en el tamaño de las miniaturas en la configuración del blog sólo afectará a las imágenes nuevas que hayas subido y todas las imágenes antiguas permanecerán en el mismo tamaño. ¿Qué pasaría si cambiaras la plantilla de tu blog por una en la que el diseño se adapte a un determinado tamaño de miniatura? Aquí es donde necesitas este complemento. Instalamos el complemento, regeneramos las miniaturas en el tamaño requerido y listo, el complemento se puede eliminar. Y no tenga miedo de experimentar con nuevas plantillas y diferentes tamaños de miniaturas: el complemento crea nuevas miniaturas sin eliminar las antiguas. De esta manera, siempre podrás volver a tu plantilla original sin ningún daño (bueno, excepto las imágenes adicionales en la carpeta de descargas) para tu blog.
1 Desempaquete el archivo.
2 Copia la carpeta regenerar-miniaturas V /wp-content/complementos/.
3 Vaya al panel de administración del blog en la "pestaña" Complementos" y active el complemento.
No hay configuraciones en el complemento. Así que no olvides ir primero a " Opciones\Medios" y configure los tamaños de miniatura que necesita.
Luego de esto tenemos dos opciones:
1 Regenere todas las imágenes a la vez. Ir a " Herramientas\Regeneración. Miniaturas" y haga clic en el botón " Regenerar todas las miniaturas":
Ahora todo lo que tienes que hacer es esperar a que el complemento vuelva a crear todas las miniaturas. Esto puede tardar desde unos pocos segundos hasta decenas de minutos, dependiendo del número de imágenes. En aproximadamente un minuto se recrean cien imágenes.
2 Regeneración de imágenes seleccionadas. Puede recrear sólo imágenes seleccionadas; para ello, vaya a la biblioteca de archivos multimedia. Allí podrás regenerar varias imágenes a la vez o cada una por separado:
En una plantilla, las miniaturas se pueden mostrar con tamaños relativos o con tamaños definidos con precisión. Los tamaños relativos (miniatura, mediano, grande) significan que la plantilla mostrará imágenes exactamente en los tamaños especificados en la configuración del blog. Independientemente de si las imágenes de estos tamaños encajarán o no en el diseño de la plantilla.
Función the_post_thumbnail(que puedes encontrar en el archivo index.php en la carpeta de plantillas) y se parece a esto:
the_post_thumbnail("miniatura"); // miniatura (150 por 150) the_post_thumbnail("medio"); // mediano (300 por 300) the_post_thumbnail("grande"); // grande (640 por 640) the_post_thumbnail("completo"); // completo (sin restricciones)
Si este código es similar al que se encuentra en los archivos de su plantilla, entonces tendrá que seleccionar manualmente los tamaños de miniatura que se verán bien en su nueva plantilla de blog. Pero, como regla general, si se especifican tamaños relativos, el autor de la plantilla espera que los tamaños de las imágenes se establezcan en los valores predeterminados.
| the_post_thumbnail(matriz (500, 150)); |
// 500 a 150
the_post_thumbnail(array(500,150)); // 500 a 150
Son estas dimensiones las que debes especificar en la configuración del blog y luego recrear las imágenes con estas dimensiones. Sólo en este caso la plantilla tendrá el aspecto exacto que pretendía su autor. Si no especifica estas dimensiones en la configuración del blog, la imagen se mostrará lo más cerca posible de las dimensiones especificadas. Lo que esto realmente significa es que en lugar de eso:
Este será el resultado:
El ejemplo es, por supuesto, inverosímil. Pero, sin embargo, esto muestra claramente que el diseñador podría tener una cosa en mente, pero resulta completamente diferente solo porque sus miniaturas no están configuradas en el mismo tamaño que las utilizadas por el autor de la plantilla. En este caso, las entradas generalmente se superponen y estropean completamente el diseño. Muchas plantillas son rechazadas por usuarios que simplemente no pueden entender que la curvatura del diseño de estas plantillas se debe a tamaños de miniaturas incorrectos y no a las manos torcidas de sus autores. $post_id( entero ) ID de la publicación cuya miniatura necesitamos obtener, de forma predeterminada: ID de la publicación actual del ciclo.$tamaño (
- cadena|matriz ) en este parámetro especificamos el tamaño de la miniatura. Puede tomar los siguientes valores:
- miniatura / mediano / grande: uno de los tamaños de imagen estándar registrados en WordPress de forma predeterminada, estos tamaños se pueden personalizar en
- Configuración > Medios,
Para que quede más claro, daré un ejemplo. Digamos que especificamos array(50, 30) como este argumento. Mi tamaño más cercano será 125x125 (miniatura); la URL de esta imagen se insertará en el atributo src. Bien, ¿qué pasa con las proporciones? Como 125x125 es un cuadrado, nuestra miniatura también será cuadrada, encajará según el parámetro más pequeño, es decir. el resultado será 30x30.
- Uno de los tamaños de imagen nativos registrados a través de .
- src: si lo necesitas, puedes incluso reemplazar la URL de la imagen.
- clase - clase de etiqueta
, por defecto tiene las siguientes clases wp-post-image y adjunto-(tamaño de imagen).
- alt - por defecto trim(strip_tags($attachment->post_title)) - especificado en el panel de administración al cargar/editar un archivo multimedia.
- título: por defecto trim(strip_tags($attachment->post_excerpt)) .
Ejemplo 1
Un ejemplo simple: simplemente muestre la miniatura de la publicación con ID = 5:
echo get_the_post_thumbnail( 5 , "miniatura" ); // 
|
Ejemplo 2. ¿Cómo hacer miniaturas con enlaces a una publicación?
Digamos que queremos implementar esto en páginas de categorías. Modifiquemos un poco el bucle:
| mientras (have_posts()): the_post(); |
if (has_post_thumbnail()): echo "ID). "">". get_the_post_thumbnail( $publicación ->ID, "miniatura"). "" ; .
endif;
echo "ID ). "">" . $publicación ->post_title . "" ; final mientras;
En este ejemplo, también utilicé una función para que, si no hay una miniatura, el código no genere una etiqueta adicional.
Ejemplo 3. ¿Cómo asegurarse de que al hacer clic en una miniatura se abra la versión completa de la imagen?
El código de este ejemplo sería excelente para usarlo en un complemento jQuery como fancybox o Pretty Photo. En este caso, es posible que también necesites agregar una clase para el enlace.
También puedes leer la documentación de la función en mi blog.
Ejemplo 4. Usando el tercer parámetro $attr para cambiar la clase de la miniatura
Agreguemos una clase de tipo align-left a nuestras miniaturas para que el texto fluya hacia la izquierda:
La cantidad de parámetros para este filtro es asombrosa; esto significa que podemos hacer lo que queramos con el código HTML devuelto.
$html ( línea) HTML devuelto por la función predeterminada, $post_id ( $post_id() ID de la publicación cuya miniatura desea obtener, $post_thumbnail_id ( $post_id() ID de miniatura, $tamaño ( ) ID de la publicación cuya miniatura necesitamos obtener, de forma predeterminada: ID de la publicación actual del ciclo.) tamaño de miniatura, $attr ( formación) una matriz de atributos HTML que se especificaron al llamar a la función, si no se especifican, entonces una matriz vacía;
Y ahora algunos ejemplos interesantes.
Ejemplo 1. Agregar enlaces automáticamente a una publicación
El truco es que cada vez que utilices la función get_the_post_tumbnail(), las miniaturas ya aparecerán con enlaces agregados automáticamente a la publicación.
| función true_auto_linking ($html, $post_id, $post_thumbnail_id, $tamaño, $attr) (retorno "". $html. "";) add_filter ("post_thumbnail_html", "true_auto_linking", 10, 5); |
Genial, ¿verdad? Y lo más importante es que todo es muy sencillo.
Ejemplo 2: devolver solo la URL en miniatura
Misha Rudrastykh
Si necesita ayuda con su sitio web o incluso desarrollarlo desde cero, .
En muchos blogs, junto a la descripción de las publicaciones, puede encontrar una miniatura pequeña (grande) que debe transmitir el contenido de la publicación. Hasta hace algún tiempo, crear algo así no era fácil. Con la llegada de Wordpress 2.9, esto se ha vuelto mucho más fácil.
En este tutorial, le mostraré cómo agregar funciones similares a sus plantillas de diseño de Wordpress.
HabilitandoMiniatura de la publicación funciones en plantillas
El encendido es muy sencillo. Todo lo que necesitas hacer es agregar una línea en el archivo funciones.php:
Add_theme_support("post-miniaturas");
Insertar miniaturas en publicaciones
Cuando vayas al panel de administración para escribir una nueva publicación, deberías ver una nueva sección en el costado de la página.
Ten en cuenta que es posible que el nuevo departamento no sea visible y tendrás que bajar un poco más. Después de hacer clic Establecer miniatura aparece un nuevo cuadro de diálogo
Haga clic en Usar como miniatura y se agregará una miniatura a su mensaje:
Mostrando miniaturas
Una vez que hayamos escrito la noticia, añadámosla. Para que se muestre la miniatura, debe agregar una línea al bucle Wordpress. Abrir el archivo index.php y agregue lo siguiente:
Esto le permitirá mostrar una imagen usando clases. archivo adjunto-post-miniatura y wp-post-image. do Usando estas clases podemos diseñar la apariencia de las miniaturas usando CSS. En la imagen de abajo podemos ver una miniatura con un borde y relleno.
En la imagen de arriba, la miniatura es bastante grande. Su tamaño se puede cambiar desde el panel de administración. Configuración > Medios.
Otra forma de determinar el tamaño de la miniatura es cambiar el archivo funciones.php. Para hacer esto necesitamos agregar una línea más:
Add_theme_support("post-miniaturas"); set_post_thumbnail_size(588, 250, verdadero);
Ahora tenemos que informar Wordpress, para que se utilice este tamaño. Necesitamos modificar ligeramente nuestro ciclo eníndice.php:
Ahora Wordpress sabe exactamente qué versión de la miniatura usar. Esto es lo que tenemos:
Ahora agreguemos algo más de PHP al archivo single.php para que cuando abras un mensaje, la miniatura esté en la parte superior:
Agregar más tamaños de miniaturas
Si desea que las miniaturas tengan un tamaño en la página principal y un tamaño diferente en la página del mensaje, debe hacer lo siguiente.
La idea es esta: queremos que la página de publicación tenga una imagen grande y la página principal tenga una imagen pequeña. Para hacer esto, necesitamos agregar otro tamaño de miniatura al archivo de funciones:
Add_image_size("loopThumb", 588, 125, verdadero);
Descripción de los argumentos:
Loopthumb- nombre del nuevo tamaño de miniatura
- 588 - ancho en píxeles
- 125 - altura
-
verdadero - configuración que dice Wordpress ¿Debo usar herramientas del motor para cambiar el tamaño de la imagen?
Necesitaremos cambiar nuestro código en el archivo.índice.php:
También vale la pena señalar que tendremos dos nuevos estilos para controlar la apariencia de la miniatura del nuevo tamaño: a ttachment-loopThumb y wp-post-image. Puede resultar útil consultar la clase. wp-post-imagen en la hoja de estilo o agrega tu propia clase al acceder a la miniatura:
"pulgares locos"); ?>
Esto producirá una etiqueta img con las siguientes clases: loopyThumbs y wp-post-image.
Digamos que queremos hacer miniaturas cuadradas, entonces necesitamos crear un nuevo tamaño:
Add_image_size("pulgar cuadrado", 125, 125, verdadero);
Además, es posible que desees que la miniatura esté a la izquierda y tenga un poco de relleno a la derecha:
Adjunto-post-miniatura (flotante: izquierda; margen derecho: 10px;)
Ahora cambiamos el código a index.php para mostrar nuestro cuadrado:
Esto es lo que obtenemos:
Si agrega imágenes cargadas anteriormente como miniaturas, puede terminar con cuadrados que no sean exactamente rectos. Esto sucede porque al cargar imágenes Wordpress No podía prever que en el futuro querrías utilizar miniaturas cuadradas.
Pero hay una salida a esta situación. El complemento nos ayudará Regenerar miniaturas. Después de instalar el complemento, inicie sesión Herramientas > Regenerar y generar nuevas miniaturas ( Regenerar todas las miniaturas ). Después de esto nos quedarán cuadrados pares.
Y recuerda: para mostrar miniaturas debes tener WordPress 2.9.
Esperanza, ¿Te gustó la lección? ¡Hasta la próxima!