Apple siempre ha sido Dios en cuanto a la forma en que se presentan a sí mismos y sus productos. Me encanta la barra lateral en la página de inicio de Apple, y quería usar el complemento Accordion en jQuery UI para lograr esto. Como si eso no fuera suficiente para mí, también quiero poder mostrarlo y ocultarlo a mi gusto. Te voy a mostrar como!

Prefacio

Este tutorial asume que tiene un motor de wordpress ejecutándose en un servidor al que tiene acceso para cargar archivos, descargar archivos y navegar. Si desea ejecutar un servidor local en su computadora con una instalación de wordpress, hay un tutorial sobre eso aquí para Windows y aquí para OS X.

Archivos que necesitaras.

Necesitamos un total de 6 archivos para este tutorial:

• funciones.php - Esto mantendrá una pequeña línea de código registrando nuestra barra lateral.
• index.php - Definitivamente necesitamos este archivo. Cualquier conjetura por qué?
• jQuery - Aquí está la versión 1.2.6 para ti.
• jQuery UI (acordeón) - Solo necesitamos el complemento Accordion y el núcleo de la interfaz de usuario, no toda la biblioteca de la interfaz de usuario.
• barra lateral.js - Contiene todo el código jQuery para la barra lateral.
• style.css - Necesario para activar el tema, y ​​contiene todos los CSS..
• carpeta de imagenes - Te daré una lista de imágenes para completar esto un poco más adelante, en la parte de CSS. Por ahora, sin embargo, solo necesitamos una imagen que esté en el código HTML: ¡el icono RSS! Colóquelo en la carpeta 'imágenes' y comencemos!

¡No olvide activar el tema de Wordpress (que debería llamarse adecuadamente sidebarTheme) en Dashboard! Derecha. Para el tutorial! Vamos a comenzar con el HTML y Wordpress que necesitaremos. Esto incluirá el strcutre que necesitaremos. Luego, lo rellenaremos con el código de Wordpress que mostrará las publicaciones, se registrará y mostrará nuestra barra lateral. Todavía se verá complicado después de esto, así que lo arreglaremos con un bonito CSS que hará que se parezca un poco a la página de inicio de Apple, y que la barra lateral se vea también como Apple-Y. Hacemos esto antes de JS para que aquellos sin JS aún vean lo bonito. Entonces, finalmente, mi favorito - el jQuery. Lo animaremos abierto y cerrado, y lo usaremos. acordeón() Y sus parámetros para generar el efecto hover..

Paso 1 - HTML

Abrir rapidamente funciones.php, y poner esto en:

 'AppleQuery')); ?>

funciones.php es automáticamente recogido por PHP / Wordpress y ejecuta las funciones. Esta función le pide a Wordpress que registre una nueva barra lateral en el Tablero para agregarle widgets. Sin embargo, eso no es todo ... ¡Tenemos que poner eso en nuestro tema! Te lo explicaré después del bit HTML / Wordpress siguiente. La matriz solo da nombre a la barra lateral, de modo que en el Panel de control podemos seleccionar qué barra lateral editar (no es realmente un problema ... Más que un buen hábito en caso de numerosas barras laterales).

Copia o escribe esto en tu index.html:

            
 
 
 
   
 
 
 
  Historias principales  "title =" RSS 2 feed "> 
  
  
"title ="">
 
  
 
   
 
  

Explicación

Ok ... Sé que eso es mucho. Mucho mucho. Pero este tutorial no se enfoca específicamente en Wordpress y HTML, pero seleccionaré los intereses que probablemente deberías entender.

• Todo el segmento de la barra lateral. - Esta es la parte principal de lo que es importante. Lo que estamos pidiendo wordpress, es que Si, en todo el motor de wordpress local, la función dynamic_sidebar está presente (que está en funciones.php), ejecute la función. AppleQuery especifica el nombre de la barra lateral que le asignamos (en funciones.php, ¿recuerda?).
• - Esto es algo de PHP en bruto para repetir la fecha y hora actual del usuario. ¡Solo está aquí porque está en Apple! Está en el formato de: (Mes DD, YYYY 00:00 AM GMT).
• - Mira en la cabeza Elemento ... ¿Ves lo mismo? Una vez más, está en el sitio web de Apple. Es solo el feed de entradas XML para el blog..
• - Nada sorprendente ... Este es solo el botón que cambiará la visibilidad de la barra lateral. Lo he hecho un tramo así que no se puede hacer clic en los navegadores JSless, pero puedo usar la función .click () de jQuery people WITH JS!

Así que con el HTML y Wordpress, sugiero ir a tu administrador de WP y agregar algunos widgets a tu blog. Por alguna razón, la Búsqueda no tiene un título, y el widget de nube de etiquetas no desaparece - ¡Imagínate! Utilicé lo siguiente en la mía:

• Categorías
• Archivo
• Campo de golf
• Páginas
• Meta

Y debería verse algo como esto: Un poco feo ¿eh? No temas, CSS está aquí!

Paso 2 - CSS

Sí, ¡el fantástico CSS está aquí para salvar el día! Queremos crear algo parecido a esto (maqueta de photoshop):

¿Como mi pequeño efecto borroso? Pensé que encajaba ... De todos modos. El desenfoque será el JS, pero por ahora queremos que todo se expanda y se muestre, de modo que para el 1% de las cookies inteligentes que no tienen JS habilitado, la barra lateral seguirá siendo visible y aún se verá bonita. Muy, muy grande, pero sin embargo, allí. Es un pedazo grande, así que lo puse en otro archivo, para no llenar esta página - ¡No me mates! Copia o escribe este CSS en tu style.css. Necesitarás todas estas imágenes:

• activeBg.png
• h1.png
• inactiveBg.png
• sidebarClose.png
• sidebarOpen.png
• topStoriesBg.png

Algunas cosas a tener en cuenta

• He hecho todo lo posible por mantener el ems en términos de tamaño de fuente, por lo que el 75% reduce el tamaño de todo el texto a 12px, que se convierte en 1em. Eso es para otro tutorial aunque!
• En el código h1 he usado 'text-shadow'. Esto es CSS3. Solo contribuye a la apariencia de la manzana.!
• #contenido - Tiene un color de fondo blanco. ¿Porque preguntas? El fondo siempre será blanco de todos modos, ¿cuál es el punto? Bueno, mis amigos, cuando lleguemos a la jQuery necesitamos #contenido para convertirse en una manta para la barra lateral, y si no hay un conjunto de fondo, será transparente y mostrará la barra lateral.
• #sidebarToggleButton - Ese es un infierno de nombre ... Esto establece el botón que cambiará la visibilidad de la barra lateral para que esté correctamente en su posición, pero invisible para la gente de JSless. Cuando nos movemos a la JS, las imágenes de fondo se aplicarán entonces, por lo que solo se mostrarán a las personas de JS.!

Esas 3 cosas son las únicas peculiaridades que hay. He probado ese código en FF, Safari 3 y Opera 9, ¡y todo se ve perfecto! Aquí es cómo debe verse:

A continuación tenemos que jQueryfy.

Paso 3 - Tiempo de jQuery!

¡Me encanta jQuery! Me encanta que puedas traducir las palabras al código tan fácilmente, y siempre empiezo haciendo las palabras. Aquí hay una idea básica de lo que queremos que haga el script..

• Ocultar la barra lateral.
• Al hacer clic en '.sidebarOpen', alterne lo siguiente:
  • Eliminar la clase 'sidebarOpen'.
  • Agregue la clase 'sidebarClose' (que le daremos estilo a la siguiente sección).
  • Animar la barra lateral para deslizarse desde abajo (literalmente, usando posición: relativa;)
  • Animar (esto) para mover X cantidad de píxeles a la izquierda (para que quede en línea con la barra lateral).
• Iniciar el acordeon.

Todo eso parece mucho (pero en realidad no lo es), así que lo llevaré paso a paso. Abre el archivo que creaste llamado barra lateral.js y empieza a escribir!

Paso 3.1

Como siempre, no olvide envolver todo en el documento especial de jQuery listo:

$ (document) .ready (function () // El código jQuery va aquí);

Ponga todo aquí entre el documento listo!

Paso 3.2

$ ("# sidebar"). css (left: "205px");

Esto 'oculta' la barra lateral al manipular el CSS de nivel DOM. En realidad no lo hace, simplemente se barre debajo de la alfombra. La alfombra literal siendo div # contenido. Esto no funcionará hasta que hayamos agregado un poco más de CSS, pero lo cubriré después de esta sección.

Paso 3.3

$ (". sidebarOpen"). toggle (function () $ (this) .removeClass ("sidebarOpen") .addClass ("sidebarClose") .animate (right: "205px", 500); $ ("# barra lateral "). animate (left:" 0px ", 500);, function () $ (this) .removeClass (" sidebarClose ") .addClass (" sidebarOpen ") .animate (right:" 0px " , 500); $ ("# sidebar"). Animate (left: "205px", 500););

OK puedo entender tu confusión. Esto es mucho para una instrucción paso a paso, ¿verdad? Bueno, sí ... Pero en realidad son 2 cosas muy similares. La primera función en el .palanca() será:

• Elimina la clase de 'sidebarOpen' (las clases son para CSS en la siguiente sección).
• Agrega la clase de 'sidebarClose'.
• Anima nuestro pequeño botón para deslizarse hacia la izquierda junto a:
• La barra lateral se desliza, animándose con jQuery. Ambos están listos para salir durante medio segundo, por lo que deben moverse juntos.

La cuestión es que la segunda función es exactamente eso, ¡pero a la inversa! Eso:

• Elimina la clase de 'sidebarClose'.
• Agrega la clase de 'sidebarOpen'.
• Anima nuestro pequeño botón para deslizarse hacia la derecha junto a:
• La barra lateral se desliza hacia atrás.

¡Ver! No tan duro. Es solo un montón de código para leer.

Paso 3.4

Tiempo de acordeón! ¡Hurra! Finalmente podemos usar la jQuery UI siempre presente. La forma en que han diseñado el widget hace que sea súper simple de implementar:

$ ("# sidebar ul"). accordion (header: 'h2', evento: 'mouseover', activeClass: 'selected');

Es solo el .acordeón() función, aplicada a la ul dentro de #sidebar div. Los parámetros (uno por línea) son los siguientes (bastante explicativos ... Pero eh):

• encabezamiento - Esto define los manejadores de cada 'cajón' de acordeón. En nuestro caso, el h2 de cada widget..
• evento - Define cuándo cambiar los cajones, y queremos el efecto de desplazamiento como el de Apple, así que usamos ratón sobre
• clase activa - Esto es útil para el pequeño CSS adicional que estamos a punto de soportar. Le da al cajón expandido una clase de 'seleccionado'.

Eso es todo el código JavaScript que necesitaremos. Todo es bastante sencillo y se puede modificar fácilmente para adaptarse a lo que necesites!

Por qué esto es tan fantástico

¡Siento que esto no ha sido suficientemente glorificado todavía! Lo sorprendente del complemento de acordeón es que no tiene que editar ninguno de los Wordpress generado código, que no hemos formateado en absoluto (aparte de la envoltura ul, pero eso es necesario a pesar de todo). No solo es 100% discreto y 100% poco fiable en el código HTML editado, sino que también es una función rápida y breve. Accordion hace todo el trabajo sucio de seleccionar, animar, activar, cambiar clases, etc. ¡Es genial! ¡Considera el AccordionUI glorificado! Probablemente deberías tener algo similar a esto (he puesto el acordeón muy a la ligera para que puedas ver dónde debería estar):

Paso 4 - jQuery CSS

Así que, obviamente, vamos a necesitar un poco de CSS adicional para satisfacer todos los cambios que JQuery hace por nosotros. Las cosas que necesitan un estilo adicional son:

• #sidebarToggleButton - Usando las clases que jQuery nos asigna, ahora podemos diseñar de forma segura las imágenes 'sidebarClose.png' y 'sidebarOpen.png' que te hice guardar antes.
• El acordeón definitivamente necesita algo de trabajo. Necesitamos arreglar los cordones cuadrados con algunos CSS3 y diseñar la clase activa.

/ * jQUERY CSS * / #sidebar> ul border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -opera-borde-radio: 5px;  span.sidebarOpen background: url (images / sidebarOpen.png) centro sin repetición;  span.sidebarClose background: url (images / sidebarClose.png) centro sin repetición;  h2.selected background: url (images / activeBg.png) repeat-x! IMPORTANTE; color: blanco! IMPORTANTE; 

Solo 2 cosas a tener en cuenta:

1. #sidebar> ul - Es decir, el directo. ul niño de #sidebar obtiene los corders redondos frescos - todavía beta CSS3. Pero funciona en todos los navegadores basados ​​en Mozilla, Opera y WebKit.
2. !IMPORTANTE - Esto es necesario para anular lo que se ha establecido previamente: el fondo gris del controlador predeterminado.

Y así, ahora, su producto final será algo así: (Haga clic para la versión HTML)

Terminando

Así que hemos repasado un poco de cosas en este tutorial. Hemos examinado las barras laterales dinámicas, una gran cantidad de jQuery para mostrar y ocultar la barra lateral que es de hecho un acordeón en sí mismo! Este tutorial estaba dirigido a usar complementos adicionales para la jQuery predeterminada (hemos conectado la interfaz de usuario de jQuery) y también la función dynamic_sidebar.