Cómo usar mampostería para agregar una cuadrícula de publicaciones de estilo Pinterest en WordPress

Esta es una publicación de invitado de Josh Pollock La visualización de cuadrícula de publicaciones al estilo de Pinterest ha sido un diseño popular para las páginas de índice de blogs de WordPress durante algún tiempo. Es popular no solo porque imita el aspecto del popular sitio de redes sociales, sino también porque aprovecha al máximo el espacio de la pantalla. En un índice de blog de WordPress, permite que la vista previa de cada publicación tenga el tamaño que necesita naturalmente, sin dejar espacio adicional. En este tutorial, le mostraré cómo usar la popular biblioteca Masonry JavaScript para crear diseños de cuadrícula en cascada para el índice de su blog, así como páginas de archivo para su tema. Cubriré algunos problemas que debe considerar para la optimización móvil y cómo solucionarlos.

Nota: Este es un tutorial de nivel avanzado para aquellos que se sienten cómodos editando temas de WordPress y tienen suficiente conocimiento de HTML / CSS.

Paso 1: agregue las bibliotecas necesarias a su tema

Contents

Poner al día: WordPress 3.9 ahora incluye la última versión de Masonry. Primero debe cargar Masonry en su tema, usando este código: if (! Function_exists (‘slug_scripts_masonry’)): if (! Is_admin ()): function slug_scripts_masonry () {wp_enqueue_script (‘Masonry’); wp_enqueue_style (‘albañilería’, get_template_directory_uri (). ‘/ css /’); } add_action (‘wp_enqueue_scripts’, ‘slug_scripts_masonry’); terminara si; //! is_admin () endif; //! slug_scripts_masonry existe Este código simplemente carga mampostería y lo pone a disposición para los archivos de plantilla de su tema (consulte nuestra guía sobre cómo agregar correctamente JavaScripts y estilos en WordPress). También tenga en cuenta que no agregamos jQuery como una dependencia para ninguno. Una de las ventajas de Masonry 3 es que no requiere jQuery, pero se puede usar con él. En mi experiencia, inicializar Masonry sin jQuery es más confiable y abre la posibilidad de omitir la carga de jQuery, lo que puede ayudar tanto con los tiempos de carga de la página como con los problemas de compatibilidad.

Paso 2: inicializa JavaScript

Esta siguiente función configura la mampostería, define los contenedores que se utilizarán con ella y también se asegura de que todo vaya en el orden correcto. La mampostería debe calcular el tamaño de cada elemento de la página para diseñar su cuadrícula de forma dinámica. Un problema que he encontrado con Masonry en muchos navegadores es que Masonry calculará mal las alturas de los clips con imágenes de carga lenta, lo que provocará que los clips se superpongan. La solución es usar imagesLoaded para evitar que Masonry calcule el diseño hasta que se carguen todas las imágenes. Esto asegura el tamaño adecuado. Aquí está la función y acción que mostrará el script de inicio en el pie de página: if (! Function_exists (‘slug_masonry_init’)): function slug_masonry_init () {?

Paso 2: cree un bucle de mampostería

En lugar de agregar el marcado HTML para Masonry directamente a una plantilla, vamos a crear una parte de plantilla separada para ella. Cree un nuevo archivo llamado «content-masonry.php» y agréguelo a su tema. Esto le permitirá agregar el bucle de mampostería a tantos modelos diferentes como desee. En su nuevo archivo, agregará el siguiente código. El marcado es similar al que vería normalmente en cualquier vista previa de contenido. Puede cambiarlo cuando lo necesite, solo asegúrese de que el elemento más externo tenga la clase «Masonry-entry» que configuramos como itemSelector en el último paso.»

«título =»«

«título =»«

Este marcado tiene clases para cada una de sus partes para que pueda agregar marcado para que coincida con su tema. Me gusta agregar un bonito borde ligeramente redondeado a la entrada .masonry. Otra buena opción es no usar un borde para la entrada .masonry, sino darle una ligera sombra. Esto se ve especialmente bien cuando la etiqueta adhesiva del artículo llega hasta el borde del contenedor, lo que se puede lograr dando márgenes de la etiqueta adhesiva de mampostería y relleno de 0 en todas las direcciones. Querrá agregar todos estos estilos a un archivo llamado masonry.css en el directorio css de su tema.

Paso 3: agregue bucle de mampostería a los modelos

Ahora que tenemos nuestra parte de plantilla, puede usarla en cualquier plantilla de su tema que desee. Puede agregarlo a index.php, pero no a category.php si no desea que se use para archivos de categorías. Si desea que solo se use en la página de inicio de su tema, cuando esté configurado para mostrar publicaciones de blog, lo usará en home.php. Donde sea que elija, todo lo que tiene que hacer es envolver su bucle en un contenedor con la identificación «masonry-loop» y agregar la parte de la plantilla al bucle usando get_template_part (). Asegúrese de iniciar el contenedor de bucle de mampostería antes de while (have_posts ()). Por ejemplo, aquí está el bucle principal del index.php de veintitrés:

Y aquí se modifica para usar nuestro bucle de mampostería:

Paso 4: Defina los anchos de respuesta de las unidades de mampostería

Hay varias formas de definir el ancho de cada pieza de mampostería. Puede definir el ancho usando un cierto número de píxeles cuando inicializa la mampostería. No soy fanático de esto, ya que uso temas receptivos y requiere consultas complejas de medios para hacer las cosas bien en pantallas pequeñas. Para diseños receptivos, he descubierto que lo mejor que se puede hacer es establecer un valor de ancho para .masonry-entry con un porcentaje, dependiendo de cuántos elementos desee en una fila y dejar que Masonry haga el resto de los cálculos por usted. Todo lo que se necesita es dividir el 100 por la cantidad de elementos que desea establecer en porcentaje en una sola entrada en el style.css de su tema. Por ejemplo, si desea cuatro elementos en cada línea, puede hacerlo en su archivo masonry.css: .masonry-entry {width: 25%}

Paso 5: optimización móvil

Podríamos detenernos aquí, pero no creo que el resultado final funcione increíblemente bien en pantallas de teléfonos pequeños. Una vez que esté satisfecho con el aspecto de su tema con la nueva cuadrícula de mampostería en su escritorio, compruébelo en su teléfono. Si no está satisfecho con el aspecto de su teléfono, tendrá que trabajar un poco. No creo que haya suficiente espacio en la pantalla de un teléfono para cualquier cosa que hayamos agregado a nuestra parte del modelo de mampostería de contenido. Tiene dos buenas soluciones: acortar el fragmento para teléfonos o ignorarlo por completo. Aquí hay una función adicional que puede agregar al functions.php de su tema para hacer esto. Debido a que no creo que estos problemas sean un problema en las tabletas, estoy usando un excelente complemento de Mobble en todos los ejemplos de esta sección para realizar los cambios solo en teléfonos, no en tabletas. También estoy verificando si Mobble está activo antes de usarlo y, si es necesario, volviendo a la función de detección móvil wp_is_mobile más general que está integrada en WordPress. if (! function_exists (‘slug_custom_excerpt_length’)): function slug_custom_excerpt_length ($ length) {// establece la longitud más corta una vez $ short = 10; // define una longitud larga una vez $ long = 55; // si solo podemos definir un fragmento corto para teléfonos, de lo contrario uno corto para todos los dispositivos móviles if (function_exists (‘is_phone’) {if (is_phone ()) {return $ short;} else {return $ long;}} else {if (wp_is_mobile ()) {return $ short;} else {return $ long;}}} add_filter (‘excerpt_length’, ‘slug_custom_excerpt_length’, 999); endif; //! slug_custom_excerpt_length existe Como puede ver, comenzamos almacenando la longitud del fragmento largo y la longitud del fragmento corto en variables, ya que usaremos esos valores dos veces y queremos poder cambiarlos de un lugar si es necesario más adelante. A partir de ahí, probamos si podemos usar Mobble is_phone (). Entonces, si configuramos el fragmento corto para teléfonos y el fragmento largo si no lo estamos. Después de eso, hacemos lo mismo básico, pero usando wp_is_mobile, que afectará a todos los dispositivos móviles, si is_phone () tu usado. parte de esta función nunca se utilizará, pero es bueno tener una copia de seguridad por si acaso. Una vez que se establece la lógica de longitud del fragmento, simplemente enlaza la función al filtro excerpt_length. Acortar el fragmento es una opción, pero también podemos eliminarlo por completo con un proceso simple. Aquí hay una nueva versión de Content Masonry, con toda la parte del fragmento omitida en los teléfonos:»

‘; // si solo podemos ignorar para teléfonos, de lo contrario para todos los dispositivos móviles if (function_exists (‘is_phone’) {if (! is_phone ()) {echo $ extract;}} else {if (! wp_is_mobile ()) {echo $ extraer;}}?