Share
Todos hemos escuchado acerca de las consultas de los medios de comunicación. Los hemos usado ampliamente en nuestros temas para que sean receptivos. Son excelentes para la mayoría de los propósitos, pero cuando se trata de diseños basados en columnas, a veces necesitamos más control para que nuestros diseños se destaquen..
En este artículo, aprenderá sobre el complemento SelQuery jQuery, y cómo usarlo en sus temas de WordPress..
¿Qué es? Bueno, piense que es algo así como consultas de medios, pero en lugar de usar el ancho del navegador como referencia, usa el ancho actual del elemento.
Antes de dirigirnos a la cuestión esencial de Selector-Query, primero hablemos sobre qué son las consultas de los medios. En una palabra, las consultas de medios permiten que los estilos en su CSS se apliquen solo cuando el ancho del navegador esté dentro de un cierto rango.
Las consultas de los medios son el corazón y el alma del diseño sensible. Dentro de una sola página web y un archivo CSS, podemos hacer que se muestre de manera diferente cuando se ve con diferentes resoluciones de pantalla y dispositivos. Con las consultas de los medios, no es necesario crear dos versiones diferentes de escritorio y móviles de un sitio web.
Vamos a hacer una revisión rápida de su uso. Para escritorios y tabletas, podemos ajustar nuestras reglas CSS con la siguiente consulta de medios. El CSS a continuación se seguiría para los anchos del navegador de 768px y por encima:
Pantalla de solo media y (ancho mínimo: 768 px) / * Las reglas de CSS van aquí * /
Para dispositivos más pequeños, como teléfonos inteligentes, podemos usar lo siguiente. Este sería seguido por anchos de 767px y por debajo:
Pantalla solo de media y (max-width: 767px) / * Las reglas de CSS van aquí * /
Al diseñar sitios web, podemos ajustar nuestro diseño exactamente a la forma en que queremos que se vea en diferentes tamaños de pantalla mediante consultas de medios. Sin embargo, cuando se trata de diseñar temas de WordPress, necesitamos más control.
Como autores de temas de WordPress, queremos que nuestros temas sean flexibles y se vean impresionantes al mismo tiempo. Ponemos funciones como códigos cortos y diseños de varias columnas, y damos a nuestros usuarios la libertad de hacer lo que quieran..
Cuanto más feliz sea el cliente, más happer somos..
Digamos, por ejemplo, que uno de nuestros clientes quería poner un código corto testimonial dentro de una columna de ancho completo. Digamos que solo diseñamos este código abreviado para que se coloque junto a otros testimonios (o cualquier otro contenido) dentro de 3 o más columnas:
Para este escenario determinado, podría ser mejor si hubiera un diseño diferente cuando se colocó el shortcode testimonial en un contenedor más grande. Quizás un diseño como este sería mejor para una columna de ancho completo:
Desafortunadamente, las consultas de los medios no podrán ayudar en este caso. ¿Por qué? Debido a que el ancho de la pantalla sigue siendo el mismo, ya sea que el testimonio se haya colocado en una columna de ancho completo o en una columna de un tercio!
Está bien, entonces podrías estar pensando, "¿Qué tal si solo usamos la clase de la columna en el CSS?" Probablemente termines con algo como esto en tu archivo CSS:
.Testimonial / * estilo de dos columnas o más aquí * / pantalla solo @media y (min-ancho: 768px) .one-column .testimonial / * anule con estilo de ancho completo aquí * /
Bueno, algo como el CSS de arriba funcionaría. Sin embargo, tengo una propuesta más elegante: Selector-Consulta.
Selector-Query es un complemento ligero de jQuery que permite aplicar diferentes estilos a sus elementos en función de su ancho.
Básicamente, lo que hace este complemento aplica nombres de clase adicionales a sus elementos en función de su ancho actual. Cuando el navegador cambia de tamaño, los nombres de las clases se actualizan adecuadamente para reflejar el nuevo ancho del elemento.
Luego puede usar estos diferentes nombres de clase para diseñar los diferentes diseños para su contenido.
Lo que hace Selector-Query es esperar los eventos de cambio de tamaño del navegador, luego toma el ancho de sus elementos HTML y los compara con una variedad de anchos llamada widthstops. Si el ancho del elemento es inferior a alguno de estos ancho paro valores, los nombres de clase de los más grandes se agregan al elemento.
Lo explicaré widthstops más adelante con un ejemplo, por ahora hablemos de cómo usar el complemento.
Lo primero que debemos hacer es incluir el script del complemento jQuery. Puede descargar Selector-Query desde su repositorio de GitHub y luego incluirlo en su directorio de temas. Colócalo en tu js carpeta para mantener su estructura de archivos limpia.
Una vez que lo tenga en su directorio de temas, puede agregar este código en su funciones.php para poner en cola el Selector-Consulta justo antes de cuerpo está cerrado. Esto nos ahorraría algo de tiempo de carga de página:
Accentsconagua
function wp_enqueue_script_selector_query () wp_enqueue_script ('selector-query', get_stylesheet_directory_uri (). '/js/jquery.selectorquery.min.js', array ('jquery'), false, true); add_action ('wp_enqueue_scripts', 'wp_enqueue_script_selector_query'); Habilitar el complemento jQuery es simple. todo lo que tienes que hacer es llamar selectorQuery en sus elementos:
jQuery (documento) .ready (función ($) $ ('. selector'). selectorQuery ();); Y eso es!
Además, el complemento tiene dos opciones configurables que puede pasar durante la inicialización.
Puedes personalizar estos valores a tu gusto:
$ ('. selector'). selectorQuery ('widthStops': [320, 480, 640, 960, 1024, 1280], // Una matriz de anchos 'classPrefix': 'max-' // Prefiere los nombres de las clases con esto ); widthstops son los anchos utilizados para verificar el ancho del elemento en contra. los prefijo de clase se usa junto con widthstops para generar los nombres de clase. Veamos un ejemplo para explicar mejor las cosas..
Usemos nuestro ejemplo de testimonio anterior y apliquemos Selector-Query para que podamos tener una idea más clara de cómo funciona y cómo podemos beneficiarnos de él. Por ejemplo, digamos que el HTML de nuestro testimonio está escrito así:
Algunos textos testimoniales aquí.
Si nuestro testimonio div tenía un ancho de 1000px, usando los valores por defecto para widthstops arriba, Selector-Query le agregaría algunos nuevos nombres de clase. Terminaríamos con:
Entonces si el testimonio div obtiene redimensionado más pequeño a 800px, entonces se vería así:
Podemos usar estos nombres de clase agregados dinámicamente para diseñar diferentes diseños para nuestro testimonio. Nosotros podemos usar .max-1024 a los anchos de estilo de 1024 y mas grande; y podemos usar .max-960 Anular estilos para nuestros diseños más pequeños..
Si tuviéramos que diseñar el contenido testimonial como este:
Podemos usar este como nuestro CSS:
/ * Testimonial grande * / .testimonial img float: left; altura: 200px; ancho: 200px; .testimonial span display: block; desbordamiento: oculto; / * Pequeño testimonio * / .testimonial.max-640 img float: none; bloqueo de pantalla; margen: 0 auto; / * Tiny testimonial * / .testimonial.max-480 img height: 150px; ancho: 150px;
Lo mejor de usar Selector-Query es que no necesitamos saber dónde se encuentra este contenido testimonial. Su estilo dependerá de su ancho, a diferencia de nuestro CSS anterior donde nuestro diseño para el gran contenido de testimonios dependía de su padre (recuerde que usamos .Testimonial de una columna. en el ejemplo anterior).
En este artículo, nos enteramos de una nueva forma de diseñar nuestro contenido en función de su ancho con Selector-Query. Esperamos que encuentre un uso increíble para este plugin jQuery en sus diseños..
Si desea una muestra en vivo de Selector-Query en acción, puede ver la demostración en el repositorio de Github..
Espero que hayan disfrutado este artículo. Aprecio mucho cualquier comentario, comentarios y sugerencias. Déjame saber lo que piensas de Selector-Consulta.
¿Utilizará este complemento en uno de sus próximos temas de WordPress? Comparte tus pensamientos a continuación!
