Wordpress proporciona una gran cantidad de información sobre su blog y su contenido. Mostrar mucha de esta información puede consumir mucho espacio. Una excelente solución para este aspecto es el contenido tabulado.!

En este tutorial, tomaremos el diseño de periódico de WordPress en el que trabajamos anteriormente y lo extenderemos con pestañas.

Prefacio

¡Derecha! Usaremos una combinación agradable y poderosa de la animación de jQuery y .enlazar Función combinada muy bien con la versátil de Wordpress. WP_Query () y las etiquetas condicionales exclusivas de Wordpress. Si eres como yo, te gusta ver el producto terminado antes que nada:

Si quieres hacer solamente En este tutorial, necesitará la última versión de jQuery para este tutorial. Descarguelo aqui. De lo contrario, ya debería estar en este tema que he preparado, que puede descargar aquí: myTheme.

Suponemos que tiene una instalación de Wordpress en vivo, ya sea local o alojada. Hay tutoriales sobre cómo ejecutar Wordpress localmente aquí para Windows, y aquí para OS X. Activar el tema que preparé anteriormente, miTema, sería una gran ayuda. Vamos a ampliar esto, así que abre index.php y vamos a editar.!

Paso 1 - Nuevo HTML estructural.

Necesitamos algo de HTML nuevo, obviamente. Esto es simple. Solo necesitamos algunos divs adicionales para envolver todo con lo que estamos trabajando. Coloque este código siguiente sólo encima

 
 
 
iBlog - Wordpress y jQuery juntos en Armonía.
 
 

Paso 2 - Etiquetas condicionales

Así que nos encanta el Contenido con pestañas que estamos a punto de crear, ¡pero solo lo queremos en nuestra primera página por el bien del programa! ¿Cómo es posible tener un código exclusivo en la primera página que pidas? Sencillo. Etiquetas condicionales de WordPress. ¡Esta es una valiosa lección para aprender! ¡Las etiquetas condicionales proporcionan un medio muy poderoso para personalizar tus temas un poco más! Son muy fáciles de explicar, pero les daré un resumen básico debajo del código. Añade esto justo debajo de nuestra nueva marca. h1 elemento en index.php.

Entiendes lo que es esto, correcto? if (is_home ()) es nuestra condición aquí, entonces Si la página que se está navegando actualmente es la casa, Incluye nuestro archivo tabbedContent.php. Que crearemos a continuación..

Paso 3 - tabbedContent.php (HTML)

Así que ahora hemos pedido a Wordpress que incluya tabbedContent.php cuando la página está en casa, pero todavía necesitamos el archivo y el contenido reales. Cree un nuevo archivo en nuestro directorio 'myTheme' y asígnele el nombre tabbedContent.php. Escribe o pega lo siguiente en este nuevo archivo:

 
 
Artículos Recientes
 
archivos mensuales
 
Buscar
 
 
 
 
  
 
 
 
  
 
 
  
 
 
 

Genial. En este momento, esto es solo HTML sin formato sin ninguna adición de Wordpress o jQuery. No mucho de esto es nuevo, pero déjame explicarte un poco el diseño.

• #tabsNav - Estas son las pestañas seleccionables! Hemos añadido un href atributo de su contenido correspondiente
• . Asegurándose de que hrefs coincide con el nombre de ID de su elemento de la lista de contenido correspondiente!
• #tabContent - Usamos un
  no a diferencia de las barras laterales de Wordpress, porque es fácil de diseñar y es esencialmente una lista de contenido de todos modos. Creo que los contenidos de este elemento son autoexplicativos..

  Paso 4 - tabbedContent.php (funciones de Wordpress)

  Ahora que está hecho, todavía se verá un poco vacío. Así que necesitamos reemplazar el <-- --> Comentarios con contenido real! Comenzaremos con WP_Query (), wp_get_archives () y un formulario de búsqueda.

  4.1 - WP_Query ()

  Otra lección valiosa para aprender. Es fantástico si quieres hacer cosas como lo estamos haciendo nosotros, o un "Publicación destacada". Básicamente, es un bucle simplificado en cualquier parte de la página. Es genial. Así que corte la etiqueta de comentario para nuestro WP_Query y escriba lo siguiente:

   have_posts ()): $ recent-> the_post ();?> 
   "title =" Enlace a "> 
   

  WP_Query () es fantastico. Sí, es un bucle. Aunque no toda la cosa. Todo lo que estamos haciendo es decirle al siguiente bucle inmanentemente que nos muestre una lista de las 5 últimas publicaciones. La cadena dentro de los corchetes de WP_Query puede ser cualquier cosa ... filtrar por fechas, categorías, etiquetas, límite, etc. Es una herramienta fantástica para entender, y aún así otro valiosa lección para sacar de esto!

  4.2 - Archivos

  Si eres un usuario frecuente de wordpress, debes saber cómo hacerlo. Es una convocatoria básica para una lista de mensual archivo. Y para que coincida con la sección WP_Query, solo queremos 5 de ellos (automáticamente en orden descendente). Simplemente cambia el <-- WP_ARCHIVES GOES HERE --> en tabbedContent.php con lo siguiente:

  4.3 - Búsqueda

  Solo usaremos una entrada y búsqueda muy simples, utilizando la búsqueda predeterminada que siempre uso en mis propias plantillas. Reemplace el comentario WP SEARCH con esto:

  Genial, así que ahora deberías tener un nuevo archivo dentro del mi tema directorio llamado tabbedContent.php, y la etiqueta condicional en index.php. Si has seguido todo correctamente, tu tema debería verse así:

  

  No es tan bonito todavía ... O con pestañas, o jQueried o CSSed en absoluto para esa materia. ¡Pero es un comienzo, y es bueno saber que nuestro código de wordpress funciona! Hemos terminado con tabbedContent.php, para que puedas cerrar eso ahora!

  Paso 5 - CSS

  Necesitamos que nuestras pestañas se integren, se convierta en parte de la página. Por el momento, son lados feos. Necesitamos hacer primero la página para personas sin JavaScript habilitado, para una degradación elegante. Necesitarás algunas imágenes si quieres hacerlo tan bonito como yo. Aquí hay una lista de ellos (haga clic con el botón derecho y guárdelos como en la carpeta de imágenes dentro del directorio myTheme!)

  • searchInputBg.png
  • tabContent.png
  • tabContentHover.png
  • tabsNavBg.png
  • tabsNavActive.png
  • tabsNavHover.png

  Cualquiera de los tipos, o pegar este bloque masivo de CSS. Nada nuevo aquí, solo alineamos las pestañas con los 'Detalles del post', alineamos el contenido con la columna blanca del contenido principal y usamos la instancia: hover unas cuantas veces.

  / * ------ TABS ------ * / #contenedor ancho: 600px; margen: 0 auto;  h1 font-size: 1.3em; transformación de texto: mayúsculas; color: # 949494; espacio entre letras: 1px;  #tabsAndContent ul, #tabsAndContent li padding: 0 ul # tabsNav float: left; ancho: 200px; estilo de lista: ninguno;  ul # tabsNav li background: url (images / tabsNavBg.png) centro sin repetición # a8a8a8;  ul # tabsNav li: hover background: url (images / tabsNavHover.png) centro de no repetición #eee;  ul # tabsNav *: focus outline: none ul # tabsNav li.active background: url (images / tabsNavActive.png) no-repeat center #fff;  ul # tabsNav li.active a color: # 303030;  ul # tabsNav li a padding: 1em 15px; margen: 0 0 1em 0; bloqueo de pantalla; ancho: 170px; texto-decoración: ninguno; color: # 7e7e7e; fuente: 11px / 20px Georgia; transformación de texto: mayúsculas;  ul # tabsNav a: hover color: # 0a0a0a ul # tabContent margin: 1em 0 0; background: url (images / tabContent.png) no-repetir superior derecha # fff; min-height: 180px; ancho: 350px; flotador izquierdo; estilo de lista: ninguno; relleno: 0 25px; Familia tipográfica: "Helvetica Neue", Arial, Helvetica, Ginebra, sans-serif;  #tabContent> li width: 350px; estilo de lista: ninguno; relleno: 0 25px 20px 0;  #tabContent li ul li estilo de lista: ninguno;  #tabContent li ul li a display: block; borde inferior: 1px sólido # e7e7e7; relleno: 10px 0;  #tabContent li ul li a: hover background: url (images / tabContentHover.png) no-repetir centro inferior;  form padding: 30px;  entrada de formulario background: url (images / searchInputBg.png) repeat-x #ddd; frontera: 2px sólido # cbc6c9; borde derecho: 0; relleno: 5px; margen derecho: 0; color: #fff; fuente: 16px Georgia, "Times New Roman", Times, serif;  #searchSubmit border-left: 0; borde derecho: 2px sólido # cbc6c9; margen izquierdo: 0; posición: relativa; izquierda: -3px; color: # 00416c;  #searchSubmit: hover background: url (images / tabContentHover.png) centro sin repetición; color: # 003459; cursor: puntero; 

  Si todo va según lo planeado, debería verse bastante bien, algo similar a esto (con su propio contenido, por supuesto):

  

  Ahora que nos hemos asegurado de que la página se vea bien para aquellos sin JavaScript, Podemos pasar a la restauración para aquellos que lo hacen!

  Paso 5 - jQuery

  Mi sección personal favorita del tutorial! jQuery time! Pongamos en palabras lo que tenemos que pasar:

  1. Ocultar todos los elementos de la lista que no queremos ver inicialmente, mostrando solo nuestra primera sección de contenido, la sección WP_Query.
  2. Agregue la clase 'activa' a la primera pestaña, porque su sección correspondiente está abierta.
  3. Cuando se hace clic en una pestaña, haga lo siguiente en orden:
     • Eliminar la clase activa de la pestaña activa actualmente
     • Agregue la clase activa a la pestaña que acaba de hacer clic.
     • Consigue el href atributo de la a dentro de la pestaña en la que se hizo clic, y conviértala en nuestra nueva variable 'target'
     • Luego haga que el objetivo se revele, y el área de visualización anterior se oculte con alguna animación

  Esto puede parecer algo difícil de lograr, pero gracias a jQuery's escribir menos, hacer más actitud, he logrado reducir lo que necesitamos a solo 9 líneas de código js! Esto va dentro de la $ (documento) .ready (función () );, debajo de la escritura del héroe y el villano.

  // Y nuestra pequeña área de deslizamiento animada, parte superior del diseño. $ ('# tabContent> li: gt (0)'). hide (); $ ('# tabsNav li: first'). addClass ('active'); $ ('# tabsAndContent #tabsNav li'). bind ('click', function () $ ('li.active'). removeClass ('active'); $ (this) .addClass ('active'); var target = $ ('a', this) .attr ('href'); $ (target) .slideDown (400) .siblings (). slideUp (300); return false;);

  Un desglose básico de nuestro código:

  • $ ('# tabContent> li: gt (0)'). hide (); - Esto, como queríamos en nuestra versión en Word del script, oculta todos los elementos de contenido mayor que cero, con artículos que comienzan en 0.
  • $ ('# tabsNav li: first'). addClass ('active'); - Agregamos la clase 'activa' a la primera pestaña, porque si solo se muestra la primera área de contenido, no queremos que la segunda pestaña esté activa.!?
  • $ ('# tabsAndContent #tabsNav li'). bind ('click', function () - La función .bind! Todo esto lo hace, es cuando el evento de parámetro ocurre (haga clic en nuestro caso) vincula la siguiente función al elemento. y la función es:
    • $ ('li.active'). removeClass ('active'); - Tome la clase activa fuera de su titular actual.
    • $ (this) .addClass ('active'); - agregar la clase a esta, un selector útil cuando estás dentro Una función, y es específica para el elemento pulsado..
    • var target = $ ('a', this) .attr ('href'); - Crea nuestra variable 'target' desde el hijo de la pestaña una El atributo href del elemento, una vez más usando esta en un selector.
    • $ (target) .slideDown (400) .siblings (). slideUp (300); - Nuestra animación! Ahora que tenemos nuestro objetivo, lo deslizaremos hacia abajo en cuatro décimas de segundo (o 40 milisegundos), y deslizaremos a los hermanos visibles hacia el abismo en casi un tercio de segundo (30 ms).
    • falso retorno; - ¡Esto es importante! No quieres que el historial de los navegadores tenga un millón de enlaces anteriores simplemente haciendo clic en las pestañas, ¿verdad? Cada vez que la URL cambia a #Artículos Recientes O algo así, agrega otra entrada al historial del navegador.. falso retorno; lo anula, por lo que no se cambian las URL ni se agrega ningún historial.

  Así que eso es todo lo que necesitamos, jQuery, CSS, HTML y Wordpress. Deberías tener algo parecido a esto:

  

  Sí, debería animarse, sí, el botón activo debería cambiar, y sí, acaba de crear su propio contenido dinámico con pestañas y lo ha implementado en un tema de Wordpress con contenido de Wordpress!

  Para terminar.

  Hemos pasado por mucho en este tutorial. En general, algunas lecciones importantes que aprendimos son:

  • WP_Query (); - Una poderosa herramienta para obtener contenido fuera del bucle principal..
  • Etiquetas condicionales de WordPress - Fantástico para personalizar aún más tu tema.
  • .función de enlace - para vincular fácilmente una función a un elemento específico con un evento.
  • animación jQuery - Increíblemente fácil de implementar, y tan bonito como un jardín de rosas.
  
  
  Código