Share
En estos días, muchos temas de WordPress tienen una cantidad de áreas de widgets en el pie de página, lo que significa que puedes crear un "pie de página grueso" con múltiples áreas de widgets de lado a lado. Es algo que uso en todos mis temas..
Pero, ¿qué pasa si su tema tiene cuatro áreas de widgets pero solo quiere tres widgets? Si no tienes cuidado, terminarás con un hueco feo en el lado derecho donde está la cuarta área vacía del widget..
En este tutorial, le mostraré cómo evitar esto utilizando una combinación de etiquetas condicionales en PHP y algunas CSS orientadas a objetos (OOCSS), que verificará cuántas áreas de widgets ha poblado y cambiará el tamaño automáticamente para que cada una de ellas se ocupe. la proporción correcta del ancho de la página.
Para seguir este tutorial, necesitarás:
El primer paso es registrar las cuatro áreas de widgets para su pie de página. Si aún no tiene áreas de widgets registradas, deberá agregar este código a su funciones.php expediente:
Accentsconagua
function tutsplus_widgets_init () // Área del widget del primer pie de página, ubicada en el pie de página. Vacío por defecto. register_sidebar (array ('nombre' => __ ('Área del widget del primer pie de página', 'tutsplus'), 'id' => 'Área del widget del primer pie de página', 'Descripción' => __ ('El widget del primer pie de página area ',' tutsplus '),' before_widget '=>'',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); // Área del widget del segundo pie de página, ubicada en el pie de página. Vacío por defecto. register_sidebar (array ('nombre' => __ ('Área del widget del segundo pie de página', 'tutsplus'), 'id' => 'Área del widget del segundo pie de página', 'Descripción' => __ ('El widget del segundo pie de página area ',' tutsplus '),' before_widget '=>'',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); // Área del widget del tercer pie de página, ubicada en el pie de página. Vacío por defecto. register_sidebar (array ('name' => __ ('Área del widget del tercer pie de página', 'tutsplus'), 'id' => 'area del widget del tercer pie de página', 'description' => __ ('El widget del tercer pie de página area ',' tutsplus '),' before_widget '=>'',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); // Área del widget de cuarto pie de página, ubicada en el pie de página. Vacío por defecto. register_sidebar (array ('name' => __ ('Área del widget del cuarto pie de página', 'tutsplus'), 'id' => 'cuarto-widget-área-pie', 'description' => __ ('El cuarto widget del pie de página area ',' tutsplus '),' before_widget '=>'',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); // Registre las barras laterales ejecutando tutsplus_widgets_init () en el gancho widgets_init. add_action ('widgets_init', 'tutsplus_widgets_init'); Esto agregará cuatro áreas de widget de pie de página a su tema. Si ves el Widgets pantalla los verá todos allí, junto con cualquier otro que ya haya registrado:
Si agrega widgets a esas áreas de widgets ahora, no ocurrirá nada. Es necesario agregarlos al pie de página de tu tema. Trabajaré en el código que necesita agregar a su archivo de pie de página en etapas, agregando más comprobaciones para diferentes números de áreas de widgets poblados a medida que avanzamos.
Tenga en cuenta que es posible que deba modificar algunas de las clases y elementos que contienen el código de área del widget en línea con la estructura y el diseño de su tema..
El primer paso es verificar si no se rellenan áreas de widgets, en cuyo caso no se debe mostrar nada. Abre tu tema footer.php archiva y agrega el siguiente código.
A continuación, comprobaré si todas las áreas de widgets están llenas. Si este es el caso, el tema mostrará el contenido de los cuatro, cada uno de ellos flotará uno junto al otro y ocupará un cuarto del ancho de la pantalla. Agregaré las clases para esto aquí, pero luego agregaré el CSS a mi hoja de estilo..
Después de la línea leyendo regreso; pero antes de la terminara si; declaración en el código que acaba de agregar, agregue esto:
if (is_active_sidebar ('first-footer-widget-area') && is_active_sidebar ('second-foot-widget-area') && is_active_sidebar ('third-footer-widget-area') && is_active_sidebar ('four-footer-widget- área ')):?> Esto hace lo siguiente:
Si etiquetas.dynamic_sidebar () función, dando a cada una de estas clases para el diseño.Las clases son .cuarto izquierdo para la mayoría de las áreas de widgets, excepto la última que tiene .a la derecha..
El siguiente paso es agregar el código para generar las áreas del widget si solo se rellenan tres de ellas. Debajo del código que acaba de agregar, inserte lo siguiente:
Esto verifica si las tres primeras áreas de widgets están pobladas y la cuarta no, y luego genera las tres primeras utilizando las clases apropiadas que reemplazan .trimestre con .un tercio.
Tenga en cuenta que cuando esté poblando sus áreas de widgets, siempre debe perder las últimas si no desea usarlas todas, o esta verificación no funcionará. No deje el primero vacío y rellene los últimos..
Para mostrar solo dos áreas de widgets si se han llenado y la tercera y cuarta no, agregue este código debajo del código que acaba de agregar:
Esto funciona de manera similar a los dos fragmentos de código anteriores, usando el .mitad clase para el diseño.
La comprobación final es solo para la primera área del widget que se está llenando. Agregue esto debajo del código que acaba de agregar:
Esto generará el contenido del área de un widget en un elemento de ancho completo.
Ahora guarda tu footer.php expediente.
En este momento, sus áreas de widgets no funcionarán correctamente; de hecho, si las llena todas aparecerán una debajo de la otra en todo su ancho. Por lo tanto, debe agregar algunos OOCSS para que esas clases de diseño funcionen. El OOCSS que estoy agregando responde, por lo que he incluido consultas de medios para cambiar el tamaño de las áreas de widgets de pie de página en pantallas pequeñas.
Primero, asegurémonos de que las áreas de los widgets flotan una junto a la otra.
Abre tu tema style.css Archivo y añadir este código:
/ * flota * /. quarter, un tercio, .two-tercios, .half float: left;
Los anchos garantizarán que todas las áreas de widgets ocupen la proporción correcta de la pantalla. Estoy usando porcentajes ya que hace que el código sea más flexible y sensible. Agregue esto a su hoja de estilo:
/ * anchos * / .one-third ancho: 32%; .dos tercios ancho: 65.5%; .quarter ancho: 23.5%; .tres cuartos ancho: 74.5%; .half ancho: 48%;
Tenga en cuenta que los anchos no suman hasta el 100% porque se debe permitir espacio para los márgenes.
Ahora agregue el estilo de los márgenes a su hoja de estilo:
/ * márgenes * / .one-tercio margen: 0 0.5%; cuarto, .two tercios margen: 0 0.5%; .left, .quarter.left, .one-third.left margin: 0 1% 0 0; flotador izquierdo; .right, .quarter.right, .one-third.right margen: 0 0 0 1%; flotar derecho; .half.left ancho: 48%; margen: 0 2% 0 0; .half.right ancho: 48%; margen: 0 0 0 2%; .two-thirds.left margen: 0 1% 0 0; .two-thirds.right margen: 0 0 0 1%; flotar derecho;
Tenga en cuenta que los márgenes son diferentes para los elementos que también tienen la .Correcto o .izquierda clases aplicadas a ellos, de modo que se sientan al ras del borde de su elemento contenedor.
Las consultas de los medios harán dos cosas:
.trimestre La clase tendrá medio ancho y los márgenes se ajustarán en consecuencia..Agregue las consultas de medios en la parte inferior de su hoja de estilo junto con cualquier otra consulta de medios que pueda tener:
/ * consultas de medios para pantallas más grandes, como tabletas pequeñas en horizontal o tabletas grandes en pantalla vertical * / @media y (ancho máximo: 780px) / * solo la clase de diseño .quarter es relevante aquí; todas las demás clases tendrán una respuesta completa ancho * /. quarter ancho: 48%; .quarter.left margen derecho: 2%; .quarter.right margen izquierdo: 2%; footer .third.quarter.widget-area clear: both; / * consultas de medios para pantallas pequeñas en modo horizontal (o similar) * / @media screen y (ancho máximo: 600px) / * ancho de tamaño todo el ancho completo en pantallas pequeñas * / .quarter, .one-third, medio, dos tercios, tres cuartos, ancho completo ancho: 100%; margen: 0; / * ajustes de relleno * / .widget-area relleno: 0 0 10px 0;
Ahora guarda tu hoja de estilo.
Ahora es el momento de ver qué sucede cuando llena sus áreas de widgets.
A continuación se muestra una captura de pantalla de un sitio que administro que hace uso de este código. Normalmente el pie de página tiene cuatro áreas de widgets:
Si elimino el widget de la cuarta área de widgets, solo se muestran tres, con anchos iguales:
Y si elimino los widgets de la tercera área de widgets, los visitantes verán dos áreas de widgets que ocupan la mitad del ancho:
Esta técnica es útil si desea que su tema permita la población de múltiples áreas de widgets de pie de página, pero no sabe cuántas de esas áreas de widgets se usarán realmente.
Si está creando un marco, un tema de inicio o un tema que otras personas utilizarán para sus sitios, puede ayudar a que el diseño del pie de página sea más ordenado y ahorrar trabajo adicional en la línea al agregar el diseño CSS..
