Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Navegación desplegable: cómo mantener la opción seleccionada en WordPress

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En un tutorial previo, aprendimos cómo utilizar un elemento «select» para la navegación y mantener la opción seleccionada al cargarse la página. Para demostrarlo usamos un proyecto como ejemplo con algunas páginas estáticas.

Hoy, iremos un paso más allá y analizaremos las acciones necesarias para incorporar esta funcionalidad en un sitio web de WordPress.

Nota: Este tutorial asume que estás familiarizado con WordPress, así como con el proceso de creación de «temas hijos» (child themes).

1. Crea un «tema hijo»

Para iniciar, crearemos un nuevo sitio de WordPress y lo ejecutamos localmente a través de XAMPP. Luego, creamos un tema hijo para el tema Twenty Fifteen (v2.1 en el momento de escribir este artículo).

Su estructura inicial de archivos tendrá el siguiente aspecto:

The initial file structure of our themeThe initial file structure of our themeThe initial file structure of our theme

Echemos un vistazo más de cerca a los contenidos de nuestro tema hijo.

La hoja de estilo

La hoja de estilos del tema hijo («style.css») inicia con el siguiente encabezado de archivo (puedes enriquecerlo dependiendo de tus necesidades, pero para nuestros propósitos está bien):

Dentro de este archivo, colocamos los estilos que van dirigidos al elemento select el cual añadiremos en la próxima sección.

Por ahora, agreguemos estos estilos, la mayoría de los cuales provienen del tutorial anterior:

Encolando los archivos

Dentro del archivo «functions.php» ponemos en cola las hojas de estilo del tema principal y el tema child. Además de estos, encolamos un archivo JavaScript que contendrá nuestro código JavaScipt.

Aquí está el código PHP que se requiere:

Captura de pantalla

Tenemos una miniatura de 1200 x 900px del diseño del tema denominada «screenshot.png».

Recursos

La carpeta «assets» contiene las imágenes y los archivos JavaScript que necesitaremos para nuestro sitio. En un proyecto más grande, también puede contener otras carpetas, como una carpeta llamada «scss».

JavaScript

Dentro de la carpeta «assets», está el archivo «main.js» que incluye el código que debe ejecutarse cada vez que se selecciona una opción.

Aquí está el código que se requiere:

Nota: este código se tomó del tutorial anterior, donde vimos la funcionalidad y explicamos cómo trabaja. La única pequeña adición aquí es la declaración inicial if que verifica si la página contiene un elemento select o no. Eso ocurre porque, como veremos, el elemento select aparecerá solo en ciertas páginas. En vez de añadir esta comprobación adicional, un enfoque alternativo sería poner condicionalmente en cola el archivo JavaScript.

2. Activa el «tema hijo»

Ahora que estamos familiarizados con los contenidos del tema hijo, estamos listos para activarlo.

Activating the child themeActivating the child themeActivating the child theme

3. Crea algunas entradas y categorías

Como siguiente paso, crearemos cuatro categorías de publicaciones diferentes:

The post categoriesThe post categoriesThe post categories

Con las categorías preparadas, añadiremos un grupo de publicaciones y las asignaremos al azar a las categorías antes mencionadas, de esta manera:

The postsThe postsThe posts

Ahora que hemos añadido el contenido, veamos la apariencia de las páginas de la categoría (archivo).


4. Modifica las páginas de las categorías

Dentro de cada una de las páginas de las categorías, necesitamos añadir un elemento select que contendrá todas las categorías de los artículos. Cada vez que se selecciona una opción, la categoría relacionada debe cargarse y la opción de destino debe marcarse como seleccionada. Además, debe aparecer una opción adicional All que cargará todas las entradas (por defecto, la página de inicio muestra todas los artículos).

Teniendo en cuenta eso, primero enlazamos todas las categorías de las publicaciones y las añadimos como opciones al elemento select.

El código responsable de ese comportamiento es el siguiente:

Ponemos este código dentro de un archivo denominado «content-post-categories.php». Este archivo se almacena en un directorio llamado «template-parts».

Necesitamos importar el archivo de destino en los archivos parents «index.php» y «archive.php». Dicho lo cual, tendremos que invalidar esos archivos y añadir nuestro código personalizado.

Para hacer esto, primero copiamos y pegamos esos archivos en nuestro tema hijo. La nueva estructura de nuestro tema se convierte en la siguiente:

The new theme structureThe new theme structureThe new theme structure

Luego en el archivo «index.php» añadimos este código:

Overriding the parent themeOverriding the parent themeOverriding the parent theme

Y en el archivo «archive.php» agregamos esto:

Overriding the parent themeOverriding the parent themeOverriding the parent theme

En este punto, naveguemos de nuevo a las páginas de la categoría.

Por fortuna, select funciona como se esperaba. ¡Buen trabajo!

Conclusión

En este tutorial, creamos un «tema hijo» en WordPress y cubrimos el proceso de mantener la opción seleccionada al cargar la página. Esperamos que todos los puntos que hemos tratado aquí te hayan resultado útiles y que puedas aplicarlos en tus próximos proyectos.

Por último, aunque no menos importante, todos los archivos de nuestro «tema hijo» están disponibles como repositorio en Github.

Más bondades de WordPress

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.