Este es un post invitado por Josh Pollock
los PinterestLa visualización en cuadrícula de publicaciones ha sido un diseño popular para las páginas de índice de blogs de WordPress por un tiempo. Es popular no solo porque imita el aspecto del popular sitio de redes sociales, sino también porque hace el mejor uso del espacio en la pantalla. En un índice de blog de WordPress, permite que cada vista previa de la publicación tenga el tamaño que naturalmente debe tener, 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. Abordaré algunos problemas que debe tener en cuenta para la optimización móvil y cómo resolverlos.
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
Actualizar: WordPress 3.9 ahora incluye la última versión de Masonry.
Primero debes cargar Masonry en tu 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('masonry’, get_template_directory_uri().'/css/’); } add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' ); endif; //! is_admin() endif; //! slug_scripts_masonry exists
Este código simplemente carga mampostería y lo pone a disposición de 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 tampoco estamos agregando jQuery como una dependencia para ninguno. Una de las ventajas de Masonry 3 es que no requiere jQuery, pero puede usarse con él. En mi experiencia, la inicialización de 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 el Javascript
La siguiente función configura Masonry, define los contenedores que se usarán con ella y también se asegura de que todo suceda en el orden correcto. La albañilería necesita calcular el tamaño de cada uno de los elementos en la página para diseñar su cuadrícula dinámicamente. Un problema con el que me he encontrado con Masonry en muchos navegadores es que Masonry calculará mal la altura de los elementos con imágenes de carga lenta, lo que provocará la superposición de elementos. 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.
Esta es la función y acción que generará el script de inicialización en el pie de página:
if (! function_exists ('slug_masonry_init')): función slug_masonry_init () {?> php} // agregar a wp_footer add_action ('wp_footer', 'slug_masonry_init'); terminara si; //! slug_masonry_init existe
La función se explica paso a paso con comentarios en línea. Lo que hace la función Javascript es decirle a Masonry que mire dentro de un contenedor con la identificación "masonry-loop" para buscar elementos con la clase "masonry-entry" y que calcule la cuadrícula solo después de cargar las imágenes. Configuramos el contenedor externo con querySelector y el interno con itemSelector.
Paso 2: Crear 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 tantas plantillas diferentes como desee.
En su nuevo archivo agregará el código que se muestra a continuación. El marcado es similar a lo que normalmente verías para cualquier vista previa de contenido. Puede modificarlo de cualquier forma que necesite, solo asegúrese de que el elemento más externo tenga la clase de "entrada de albañilería" que configuramos como itemSelector en el último paso.
> " title="">" title="">
Este marcado tiene clases para cada una de sus partes, por lo que puede agregar marcado para que coincida con su tema. Me gusta agregar un borde bonito y ligeramente redondeado a .masonry-entry. Otra buena opción es que no hay borde para .masonry-entry, sino para darle una ligera sombra. Eso se ve particularmente bien cuando la miniatura de la publicación se extiende hasta el borde del contenedor, lo que se puede lograr dando márgenes de miniatura de mampostería y rellenos de 0 en todas las direcciones. Deberá agregar todos estos estilos en un archivo llamado masonry.css en el directorio css de su tema.
Paso 3: Agregue el bucle de mampostería a las plantillas
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ía. Si solo desea que se use en la página de inicio de su tema, cuando esté configurado para mostrar publicaciones de blog, lo usaría en home.php. Donde quiera que elija, todo lo que necesita hacer es envolver su bucle en un contenedor con el id "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: Establecer anchos de respuesta de elementos de mampostería
Hay varias formas de establecer el ancho de cada elemento de mampostería. Puede establecer el ancho usando una cantidad de píxeles cuando inicializa la mampostería. No soy fanático de hacerlo, ya que uso temas receptivos y requiere algunas consultas complejas de los medios para hacer las cosas bien en pantallas pequeñas. Para diseños receptivos, he descubierto que lo mejor que puede hacer es establecer un valor de ancho para .masonry-entry con un porcentaje, en función de cuántos elementos desea en una fila y dejar que Masonry haga el resto de las matemáticas por usted.
Todo lo que esto requiere es dividir los 100 por el número de elementos que desea establecer el porcentaje en una entrada simple en style.css de su tema. Por ejemplo, si desea cuatro elementos en cada fila, puede hacerlo en su archivo masonry.css:
.masonry-entry {ancho: 25%}
Paso 5: optimización móvil
Podríamos parar 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á contento con el aspecto de su teléfono, deberá hacer un poco de trabajo.
No creo que haya suficiente espacio en la pantalla de un teléfono para todo lo que agregamos a nuestra parte de plantilla de mampostería de contenido. Dos buenas soluciones disponibles para usted son acortar el extracto para teléfonos u omitirlo por completo. Aquí hay una función adicional que puede agregar a las funciones de su tema.php para hacerlo. Debido a que no creo que estos problemas sean un problema en las tabletas, estoy usando un excelente complemento Mobble en todos los ejemplos de esta sección para hacer solo los cambios en los teléfonos, no en las tabletas. También estoy verificando si Mobble está activo antes de usarlo y, si es necesario, recurriendo a la función de detección móvil más general wp_is_mobile, que está integrada en WordPress.
if (! function_exists('slug_custom_excerpt_length') ) : function slug_custom_excerpt_length( $length ) { //set the shorter length once $short = 10; //set long length once $long = 55; //if we can only set short excerpt for phones, else short for all mobile devices 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 exists
Como puede ver, comenzamos almacenando la longitud del extracto largo y la longitud del extracto corto en variables, ya que usaremos esos valores dos veces y queremos poder cambiarlos desde un lugar si es necesario más adelante. A partir de ahí, probamos si podemos usar is_phone () de Mobble. Si es así, establecemos el extracto corto para teléfonos y el extracto largo si no lo somos. 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 () no se puede usar. Esperemos que la otra parte de esta función nunca se use, pero es bueno tener una copia de seguridad por si acaso. Una vez que se establece la lógica de longitud del extracto, se reduce a conectar la función al filtro excerpt_length.
Acortar el extracto es una opción, pero también podemos eliminarlo por completo con un proceso simple. Aquí hay una nueva versión de la mampostería de contenido, con la parte completa del extracto omitida en los teléfonos:
> " title="">'; //if we can only skip for phones, else skip for all mobile devices if (function_exists( 'is_phone') { if ( ! is_phone() ) { echo $excerpt; } } else { if ( ! wp_is_mobile() ) { echo $excerpt; } } ?>" title="">
'; $excerpt .= the_excerpt(); $excerpt .= '