Agregar y usar dimensiones de imágenes de WordPress personalizadas: una guía para lo mejor de todos

Actualización 4 de abril de 2017: se ha agregado una sección que detalla cómo funciona el sistema de imágenes receptivas de WordPress 4.4+ y cómo las imágenes personalizadas de WordPress interactúan con este sistema.
Realmente me gusta poder establecer dimensiones personalizadas para imágenes en WordPress. La potencia y la flexibilidad que se abre este sistema para construir sitios web hermosos y fáciles de administrar y de rendimiento es difícil de sobreestimar. El tema WPShout recientemente lanzado, por ejemplo, tiene dos dimensiones de imagen presentadas: la grande (aquí en la parte superior de esta publicación) y una más pequeña, en el medio de la página inicial. También utilizamos dimensiones de imagen personalizadas para garantizar que las imágenes en nuestros cuerpos de publicación no sean innecesarias para el espacio que ocupan.
Esto significa mucha complejidad para el tamaño de la imagen, y WordPress trata de todo para nosotros, directamente desde el cuadro. Imagínese si hiciéramos todo nuestro cambio de tamaño y optimización, en algo como Photoshop, comerían nuestro negocio. Las imágenes serían un lujo intacto. ¡Con esta discusión motivadora, veamos cómo puede usar las dimensiones personalizadas de las imágenes de WordPress! Algo más antes de comenzar. Si quieres aprender el desarrollo de WordPress, escribí la mejor guía para ello:
¡La mejor manera de aprender el desarrollo de WordPress y ejecutar hoy!

En funcionamiento está nuestro curso completo “Aprende el desarrollo de WordPress”. Ahora, en la tercera edición actualizada y extendida, ha ayudado a cientos de compradores felices a aprender el desarrollo de WordPress de una manera rápida, inteligente y completa.
Esto es lo que tienen que decir:
“Creo que cualquiera está interesado en aprender el desarrollo de WordPress necesita este curso. Ver videos era como si estuvieran muchas luces encendidas “. -Jason, desarrollador de WordPress “Otros cursos que casi siempre he intentado no tienen explicaciones claras de lo que WordPress hace las cosas de cierta manera o cómo funcionan las cosas juntas. En funcionamiento hace todo esto y todo se explica claramente en un lenguaje fácil de entender “. -Carolina, freelancer y corre ahora
Una guía muy rápida para el tamaño de las imágenes de WordPress cada vez que carga una imagen, WordPress genera una versión de imagen redimensionada para cada tamaño de imagen personalizado.
Cada vez que sube una imagen en su sitio de WordPress, WordPress genera automáticamente una versión redimensionada de esa imagen para cada imagen personalizada de su imagen (y tema principal, si está en un niño) se ha registrado. En su sistema de archivos de WordPress, que es el lugar donde se encuentran esos archivos de imagen, se ve así:
¿Ves el poder de esto? Mantenga la imagen original que cargó, que en este caso tiene más de 1 MB, demasiado grande para usarse en el sitio. Pero también puede usar versiones generadas, redimensionadas y cortadas automáticamente de la misma imagen en su sitio. La imagen cabe en los espacios donde deben coincidir y no será un archivo más grande de lo que debería ser y WordPress está ocupada todo automáticamente.

Un caso especial es la imagen presentada, una sola imagen que establece para ser el “representante oficial” de la publicación a la que se adjunta. WordPress tiene formas especiales de mostrar las imágenes presentadas en el sitio y puede aprovechar la misma funcionalidad de corte y cambio de tamaño que puede usar con cualquier otra imagen. Suena bastante bien, ¿verdad? Veamos cómo puede programar algunas imágenes de WordPress personalizadas para usted “Minaturii” y “Imágenes presentadas”: Ugh, aquí vamos antes de llegar a la codificación, tendremos que hacer un destacamento semántico de WordPress. “Imagen recomendado” ha comenzado y a menudo es llamado “miniatura”. Debido a que WordPress es compatible con la versión inversa, la “imagen recomendada” ha comenzado y a menudo se llama “miniatura”. (Este tipo de problema de nombre heredado debería sonar familiar en nuestra publicación anterior sobre “barras laterales” y “áreas de widgets”). Este problema surge de la siguiente manera: la función de WordPress set_post_thumbnail_size () establece el tamaño de la imagen en miniatura en su sitio (cuadrados de 150px de forma predeterminada) es la imagen predeterminada de la imagen presentada: es lo que verá si llama la función a un Muestre las imágenes presentadas – the_post_thumbnail () – sin argumentos.
Por lo tanto, tiene una función llamada confusa, the_post_thumbnail (), cuyo propósito es en realidad mostrar las imágenes presentadas.También tiene una función totalmente extraña, set_post_thumbnail_size (), que establece el tamaño predeterminado de “miniatura” y el tamaño de la imagen presentado en su sitio. Mi consejo es dejar set_thumbnail_size () completamente sin usar.Mi consejo es dejar set_post_thumbnail_size () en total paz;No lo uses.Deje las imágenes del tamaño “miniatura” (150 px cuadrado) para colgar como un apéndice y dejarlo así.En su lugar, usaremos una función llamada add_image_size () y llame a The_Post_Thumbnail () con argumentos para decirle qué tamaño de imagen queremos usar para nuestras imágenes presentadas.
Agregar las dimensiones de las imágenes de WordPress personalizadas en function.php En esta sección, analizaremos el código principal para administrar las imágenes presentadas y las dimensiones de las imágenes en WordPress. El ejemplo del código que usaremos está a continuación; Vaya a funciones.php de su tema activo: // Asegúrese de que las imágenes destacadas estén habilitados add_theme_support (‘post-thumbnails’); // Agregar tamaño de iMicled destacado ADD_IMAGE_SIZE (‘STARIRED-LARGE’, 640, 294, verdadero); // ancho, altura, recorte add_image_size (‘destacado-marl’, 320, 147, verdadero); // Agregar otro tamaño de imagen útil para usar a través de agregar medios modal add_image_size (‘width mediano’, 480); add_image_size (‘Medium-Weight’, 9999, 480); add_image_size (‘mediano-algo’, 480, 480); // Registre los tres tamaño de imagen útil para usar en Add Media modal add_filter (‘image_size_names_choose’, ‘wpshout_custom_sizes); Function wpshout_custom_sizes ($ size) {return array_merge ($ size, array (‘mediano-width’ => __ (‘ancho medio’), ‘mediano de altura’ => __ (‘altura media’), ‘mediana = > __ (‘Medium Something’),)); } Los comentarios en el código mismos explican bastante, así como el resto de esta publicación; Pero aquí hay dos notas rápidas que deberían ayudarlo a comprender el código por adelantado: add_image_size () argumentos add_image_size () tiene cuatro argumentos:
Nombre, una cadena (obligatoria)
Ancho, un entero (opcional)
Altura, un número completo (opcional)
cultivo, un booleano (opcional)
El nombre se explica por sí mismo. El ancho y la altura son valores del tamaño objetivo en píxeles. Explicaremos a continuación cómo funciona (y cómo trabajar con Crop). Wpshout_custom_sizes () Todo lo que necesita saber sobre esta función es que WordPress requiere un código estándar para agregar dimensiones de imagen personalizadas al modo “Agregar medios”, donde los usuarios del sitio pueden usarlos y definir qué nombres tienen esas dimensiones en “Agregue el entorno multimedia”. Conectarse en un gancho de filtro llamado Image_Size_Names_Choose y grabar las tres dimensiones de imagen deseadas también son wpshout_custom_sizes (); Aquí está el resultado: usando las dimensiones de imagen agregadas que hablé anteriormente sobre The_Post_Thumbnail (). Siempre se llama en el bucle. (Si está fuera del bucle, hay una función get_the_post_thumbnail () que le permite especificar de qué publicación está hablando). Siempre llamaremos The_Post_Thumbnail () con al menos un argumento: el nombre del tamaño personalizado del imagen. Debido a que no queremos obtener las “miniaturas” reales de 150px x 150px, como discutimos anteriormente, siempre llamaremos a The_Post_Thumbnail () con al menos un argumento: el nombre de la dimensión personalizada de la imagen registrada por nosotros. usar.
Se muestra de la siguiente manera (este código pertenece a una plantilla de página de WordPress, como index.php o single.php): // inicia el bucle if (have_posts): while (have_posts): the_post (); // Esta portada sea cualquier cosa; Aquí solo afirmaremos que queremos el post the_title (); // Mostrar la imagen destacada de la publicación, en ‘stize sense-implement-large’ the_post_thumbnail (‘streened-image-large’);
// Continúa con todo en el bucle … ¡aquí! Puso la imagen presentada de la publicación, en una dimensión de imagen definida, en la página. Hay mucho que aprender aquí, pero eso será para empezar. Si tiene más preguntas sobre los argumentos de función adicionales que puede acceder en The_Post_Thumbnail (), verifique el Codex. Regenere la regeneración de miniaturas en miniatura después de cada cambio en el tamaño de su imagen. Uno de mis primeros cinco complementos favoritos de WordPress de todos los tiempos son las miniaturas regeneradas. Hace el trabajo sucio para asegurarse de que cada imagen que cargue tenga versiones para todos los tamaños de imagen que declare. Ejecute después de cada vez que cambie el tamaño de la imagen en su sitio, o las imágenes antiguas comenzarán a verse realmente divertidas. Comprender el corte para ver un poco más de cerca los argumentos del add_image_size (). Si se da cuenta, algunas llamadas de llamadas tienen un cuarto argumento, establecido en verdadero, y otras solo tienen dos o tres. Resulta que esto importa mucho cómo se ven sus imágenes y es parte del poder extraordinario de las dimensiones personalizadas de las imágenes de WordPress. Estructuraremos esta discusión analizando los dos tipos disponibles de corte: corte suave y corte duro. Cultura blanda El término más preciso para la “cultura blanda” podría ser “cambiar el tamaño”. “Soft Cut” es en realidad un pequeño nombre equivocado: el término más preciso podría ser “cambiar el tamaño”. Es WordPress predeterminado:
Obtenga el corte suave, ya sea omitiendo el cuarto argumento de la función en add_image_size () (o set_post_thumbnail_size (), si decide usarla) o configurando ese argumento en falso.De todos modos, lo que debe saber sobre el corte suave es que mantiene la proporcionalidad de su imagen.En otras palabras, cambiará el tamaño de la imagen completa de acuerdo con las dimensiones que especifique, pero no cambiará la forma de la imagen y no reducirá ninguna de ella.Esto hace que el corte suave sea un predecesor inteligente para las dimensiones de las imágenes que espera usar en su publicación y páginas. Como punto fino, el corte suave puede funcionar de una de dos maneras:

con una o dos dimensiones especificadas. Con una dimensión especificada corresponde al código para las dimensiones de la imagen de altura media de ancho medio arriba. Si corta ligeramente y especifica un solo tamaño (solo el ancho o la altura más “9999” para el ancho), obtendrá una imagen que aumenta en proporción al tamaño de esa dimensión. Entonces, si especifica 300 para el ancho, su imagen tendrá un ancho de 300 píxeles y cualquier altura hace que la imagen sea proporcional. Con dos dimensiones especificadas corresponde al código para el tamaño medio de la imagen de arriba. Si corta ligeramente y especifica tanto el ancho como la altura, la imagen aumentará proporcionalmente hasta que una de las dimensiones alcance su objetivo y se detenga aquí. Entonces, si especifica 300px de ancho y altura de 100px, una imagen larga se detendría, por ejemplo, 300px x 80px, y una imagen alta se detendría en, por ejemplo, 60px x 100px. Las siguientes tres imágenes demuestran resultados de corte suave para las tres dimensiones de imagen de corte suave que hemos grabado anteriormente. Haga clic para aumentar
Cultura de tare esto corresponde al código para las dimensiones de las imágenes destacadas de larga y larga y de atención anterior. Básicamente, una cosecha dura cortó algo a una forma y tamaño predefinidos. Obtenga un corte difícil configurando el cuarto parámetro de add_image_size () (o set_post_thumbnail_size ()) en verdadero.
Haga clic para aumentar
Observe que la imagen de corte ya no tiene la misma forma que no contiene todo el contenido del original. El corte duro es a menudo el más útil para las imágenes presentadas, que generalmente deben estar en un área definida desde el aspecto de su sitio. Se cae en un área definida desde el aspecto de su sitio. Hay otros usos para ello, pero aquí es muy útil. Probablemente no quiera cortar las imágenes que insertará en sus publicaciones (a menos que desee, por ejemplo, que todas sus imágenes sean cuadradas como decisión de diseño) porque el contenido de publicación es de alguna manera más fluido y más difícil. -El descuento destruye la información de la imagen. ¿Qué sucede si la imagen original es más pequeña que el tamaño de corte deseado? Las dimensiones demasiado pequeñas solo seguirán siendo sus dimensiones originales.
¡Buena pregunta! En general, si la imagen que subió es demasiado pequeña para cumplir con las dimensiones deseadas, las dimensiones demasiado pequeñas conservarán sus dimensiones originales. Supongamos que cortó una imagen a 500px x 400px, pero la imagen original en sí es en realidad 300px x 200px. Recibirá la versión de tamaño completo. El cultivo suave Tenga en cuenta que el corte suave se detiene cuando la imagen alcanza la primera dimensión objetivo. Por lo tanto, la única forma en que no puede cortar en el modo de corte suave es si su imagen es demasiado pequeña en ambas dimensiones, como en el ejemplo en el párrafo anterior. Si corta fácilmente a 500px x 400px, y su imagen es 1000px x 200px, este no es un corte fallido; Recibirá una imagen de 500px x 100px, que probablemente es lo que está buscando. Sin embargo, es muy posible que una imagen sea lo suficientemente grande en un tamaño, pero demasiado pequeño en el otro. Si corta duro a 500px x 400px y el original es 1000px x 200px, recibirá una imagen de 500px x 200px. Se verá como la imagen original, con el 50% más exterior del 50% (500px) cortado de la izquierda y la derecha. Lo más importante es que no estará en el tamaño 5 x 4 que espere, pero 5 x 2. … así que cargue grandes imágenes como pueda imaginar, esto puede causar una fealdad de formato importante si, por ejemplo, las imágenes presentadas también son repentinamente. pequeño (y/o tener la forma incorrecta) para sus contenedores. Entonces, cargue lo más importante que tenga: en caso de emergencia, incluso puede ampliar una imagen para cumplir con sus requisitos en algo como Photoshop;
Pero tenga en cuenta que esto reducirá la calidad de la imagen. Configuración de las dimensiones de imagen correctas No queremos poner imágenes demasiado grandes en la página, por lo que aquí es donde necesitamos practicar limitar las dimensiones de imágenes y archivos. Bien, ahora sabemos cómo establecer el tamaño de las imágenes de WordPress. Ahora, ¿qué tamaño de imagen debemos configurar? ¡Recuerde en nuestra publicación anterior, el tamaño de la imagen de sentido común, que add_image_size () le permite ver cada imagen en cualquier tamaño que desee! Por esta razón, es mejor tener la materia prima más grande para trabajar, porque puede reducirla a cualquier tamaño y tamaño del archivo que desee. Sin embargo, para afirmar lo que es obvio, no queremos poner imágenes demasiado grandes en la página, ya que reducirán el sitio. Por lo tanto, aquí debemos ser prácticas en términos de limitar las dimensiones de imágenes y archivos. Afortunadamente, no es difícil: como en el tamaño de la imagen de sentido común, la guía es establecer las dimensiones de la imagen que serán: lo suficientemente grandes como para ser dimensionados adecuadamente en cualquier vista del sitio en cualquier dispositivo.

No más grande que eso.
En la práctica, esto significa solo mirar su sitio en diferentes anchos del dispositivo. Si una imagen debe llenar una columna completa, ¿cuál es la columna más grande?

Podría ser 800 píxeles cuando su sitio va a una sola columna en iPads, por ejemplo. Si tiene muchas imágenes que deberían llenar esa columna, querrá grabar un tamaño de imagen de 800 PX o un poco más ancho. Esto puede ser difícil si comienza a pensar, por ejemplo, en imágenes de fondo de ancho completo en pantallas iMac de 14 megapíxeles. (Tampoco me hace comenzar con pantallas de retina). Pero para la mayoría de las imágenes (y la mayoría de los sitios), simplemente manténgala simple, vea dónde una imagen en la página se ajusta a diferentes anchos y crea un tamaño de la imagen que es tan grande y no más grande. Las imágenes receptivas de WordPress y cómo interactúan con las imágenes personalizadas de WordPress, una mejora del tamaño de la imagen de WordPress principal ha llegado a fines de 2015, con WordPress 4.4: imágenes receptivas. Esta es una característica de fondo que no debe “hacer” nada para disfrutar, por lo que, en la mayoría de los casos, es mejor regocijarse que otras personas se hayan dado cuenta. Pero es bueno entender cómo interactúa con el sistema de tamaño de imagen de WordPress. A qué buenas imágenes responden, las imágenes receptivas aceleran los sitios web para usuarios en dispositivos estrechos, ofreciendo diferentes imágenes en las ventanas del navegador de diferentes anchos. Las imágenes receptivas son una convención web que apareció de un problema simple:
Los dispositivos estrechos se transmiten con imágenes amplias. Si usa un teléfono móvil con un ancho de 480 píxeles, ¿por qué debería cargar imágenes (por ejemplo, la imagen presentada) que tiene un ancho dos o más? Una imagen que es dos veces más grande en un punto de vista dimensional es cuatro veces mayor en términos de tamaño de archivo. Cuando un dispositivo móvil carga imágenes grandes solo para cambiarlas al ancho que el dispositivo puede manejar, ralentiza las páginas, especialmente problemática en los teléfonos, que a menudo tienen conexiones relativamente lentas e irregulares. Por otro lado, no podemos limitar cada imagen en Internet al ancho del teléfono más estrecho. Lo que necesitamos es ofrecer diferentes tamaños de imagen en diferentes dispositivos, dependiendo del ancho del dispositivo. Estas son las imágenes receptivas. Cómo funcionan las imágenes receptivas, es posible que haya abierto el inspector de código del navegador en algún momento y haya tenido miedo de una etiqueta que se ve así:

Esta es la marca para imágenes receptivas de WordPress. Para comprender cómo funciona, rompamos este ejemplo en sus componentes. Clase, Alt y Ancho: lo que no ha cambiado <img class = "Aligncenter Size-Large-Large WP-IMage-12558", alt = "WordPress Responsive Images Ejemplo" y Width = "

538 “altura =” 361 “> no son una novedad para las imágenes receptivas. Estas partes de marcado son cómo las clases de atributos de WordPress, las etiquetas ALT y (casi completamente desactualizados) valores codificados de ancho y altura de las imágenes, ya sean receptivas o no Images WordPress. Src: Ahora una reserva debería parecer familiar, porque así es como las imágenes que no responden: solo tienen un atributo Src (“fuente”), una URL que dice dónde se puede encontrar la imagen. Para una imagen Receptivo, SRC es una alternativa, una forma de hacer que las imágenes funcionen para los navegadores (¡bueno, es decir, que no acepta imágenes receptivas. Entonces, lo que hay en SRC es lo que se servirá en IE (y cualquier otro navegador antiguo con el que un usuario podría visitar el sitio, aunque todos los navegadores ordinarios, aparte de IE, aceptan imágenes receptivas). SCSET: un conjunto de imágenes de diferentes tamaños es nuevo y el motor principal de imágenes receptivas. RCSET identifica una lista de atributos SRC (un “conjunto de fuentes”) que el navegador se hará cargo, dependiendo de su ancho. Veamos la primera de las opciones de scSet: https://i0.wp.com/wpshout.com/wp-content/uploads/2014/12/wordpress_srcset_example_one.png?resize=1024%2C687&ssl=1 1024w Esto en realidad se hace en realidad se hace. de dos partes, separadas por un espacio:
https://i0.wp.com/wpshout.com/wp-content/uploads/2014/12/wordpress_srcset_example_one.png?resize=1024%2C687&ssl=1: Este es el enlace de imagen en sí, el trabajo que podría cumplir El navegador (¡pruébalo!) Para ver una imagen. Si este enlace de imagen te parece divertido, es porque WPShout usa un CDN (red de entrega de contenido) para transmitir sus imágenes. Su sitio conecta mi apariencia en lugar de simplemente https://mysite.com/media/ etc.1024w. Esto es lo que dicta el ancho de destino al que se aplicará esta imagen: en otras palabras, 1024W significa “esta fuente de imagen se aplica a anchos de 1024 píxeles de ancho o más estrecho”.
Pero, ¿qué significa “se aplica a los anchos”? 1024px ¿se refiere al ancho total del navegador? Es un poco más complejo que eso y desde aquí viene los tamaños. Tamaños: Reglas que dictan cuándo mostrar qué imagen en los tamaños de SRCSET opera con SRCSET como un componente crucial de las imágenes receptivas. El tamaño es un conjunto de instrucciones de ancho del navegador que se verificarán una tras otra, cada declaración asociada con una regla a seguir si esa declaración del navegador es verdadera. (No se preocupe, los siguientes dos párrafos aclararán esto). El tamaño del atributo de nuestra imagen receptiva se muestra de la siguiente manera: Leer en inglés, siga estas dos reglas:
“Si el navegador tiene un ancho de 1,000 píxeles o más estrecho, use la imagen más pequeña en SRCSET, que es al menos el 100% del ancho del navegador”.
“De lo contrario, use la imagen más pequeña con un ancho de al menos 1,000 píxeles”.
Por lo tanto, los tamaños van en orden desde la primera declaración de ancho hasta el último, deteniéndose en la primera verdadera. En el caso de WPShout, solo hay dos reglas en términos de tamaños: una que es válida si el navegador tiene un ancho de 1000 px o más estrecho (en cuyo caso se utilizará la imagen más pequeña en SRCSET. Y otra que se aplica en cualquier otro momento. (en cuyo caso se usará la imagen más pequeña en SRCSET que tiene 1000px o más). Especificando las reglas de tamaño con wp_calcule_image_sizes como una nota, la configuración de WPShout de dos tamaño, centrada alrededor de 1000px como punto de interrupción, es predeterminado para las imágenes receptivas de WordPress, porque nosotros, WPShout, nunca hemos cansado, especificamos reglas más inteligentes. Algunos otros temas, especialmente los temas “oficiales”, como veinte dieciséis, usan un gancho de filtro de WordPress llamado WP_CALCULEL_IMAGE_Sizes para establecer un tamaño más inteligente y específico. Para veinte dieciséis, el atributo de tamaños se muestra de la siguiente manera:
Si desea comprender más profundamente el tamaño y el tamaño, se explican bien aquí y en otros lugares. Y Smashing Magazine ha hecho un buen trabajo explicando cómo usar wp_calculat_image_sizes para establecer sus propias declaraciones de ancho, puntos de interrupción y reglas de tamaños para imágenes receptivas de WordPress. Cómo las imágenes receptivas de WordPress con las dimensiones personalizadas de las imágenes interactúan con las imágenes receptivas de WordPress interactúan de manera bastante simple y saludable con las dimensiones personalizadas de las imágenes. Durante mucho tiempo, estuve bastante nervioso porque crear sus propias imágenes personalizadas podría “romper” de alguna manera, reducir la velocidad o afectar las dimensiones de la imagen receptiva de WordPress (que no entendí bien). Me alegra informar que la forma en que interactúan estos dos sistemas es bastante simple y saludable: cada tamaño personalizado de la imagen que crea con la misma relación de apariencia (relación ancho-tin), ya que la imagen original simplemente se agregará al scSet.
Cada dimensión de imagen personalizada apenas corta que cree con una relación de aspecto diferente de la imagen original será ignorada por el sistema de imágenes receptivas de WordPress.
Para mostrarle cómo funciona, he hecho dos capturas de pantalla en una secuencia sobre un tema que es un niño de veinte y dieciséis y, por lo tanto, hereda las reglas de tamaños. Esta fue la primera captura de pantalla antes de crear dimensiones de imagen personalizadas en el niño:
Haga clic para aumentar
Luego creamos dos dimensiones de imagen personalizadas en funciones.php del tema infantil usando el siguiente código: add_image_size (‘big-size-soft-chirop’, 1600, 1200, falso);add_image_size (‘Giant-Size-Hard-Crop’, 2000, 1500, verdadero);Luego recargué la imagen e hice la siguiente captura de pantalla: haga clic en grande