Cómo Crear un Acordeón para Preguntas Frecuentes (FAQ) en WordPress -

Cómo Usar y Personalizar el Código del Acordeón en WordPress

Presentación del Script Acordeón para Preguntas Frecuentes

Acordeón para Preguntas Frecuentes. «Con este sencillo tutorial, aprenderás a crear un acordeón dinámico y elegante para tu sitio de WordPress sin usar plugins pesados. Un acordeón es ideal para organizar contenido extenso, como preguntas frecuentes (FAQ), listas de características de productos o guías paso a paso.

Nuestro script está optimizado para la velocidad de carga y te da control total sobre la apariencia y el comportamiento, permitiéndote personalizar el diseño con CSS y la funcionalidad con JavaScript. Olvídate de los plugins lentos y dale a tus usuarios una experiencia de navegación más limpia y organizada.»

Aquí tienes una guía completa para que implementes y personalices el acordeón directamente en cualquier página o entrada de WordPress. El código que proporcionaste incluye todo en un solo archivo, por lo que las instrucciones son un poco diferentes a las anteriores.

Opción 1. Colocar el Código Completo del Acordeón para Preguntas Frecuentes

1. Colocar el Código en WordPress

Para este método, usaremos un bloque de HTML personalizado en el editor de WordPress, lo que te permite pegar el código completo sin necesidad de editar archivos del tema.

Edita tu Página o Entrada: En el panel de administración, ve a la página o entrada donde quieres añadir el acordeón.
Añade un Bloque de HTML Personalizado:
- Haz clic en el botón + para añadir un nuevo bloque.
- Busca «HTML personalizado» y selecciónalo.
Pega el Código Completo: Copia y pega todo el código que me proporcionaste (desde <!DOCTYPE html> hasta </html>) en este bloque. Es importante que incluyas todo, ya que el CSS y el JavaScript están incrustados en el HTML.
Actualiza o Publica la Página: Guarda los cambios. El acordeón ahora debería aparecer en tu página y ser completamente funcional.

Código completo

<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Mi Proyecto</title><style>.acordeon-item {
  border-bottom: 1px solid #ddd;
}

.acordeon-titulo {
  width: 100%;
  padding: 15px;
  background-color: #f7f7f7;
  border: none;
  text-align: left;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.acordeon-titulo::after {
  content: '+'; /* Icono para el estado "cerrado" */
  font-size: 20px;
  transition: transform 0.3s ease;
}

.acordeon-titulo.activo::after {
  content: '-'; /* Icono para el estado "abierto" */
  transform: rotate(180deg);
}

.acordeon-contenido {
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.acordeon-contenido.abierto {
  max-height: 500px; /* Un valor lo suficientemente grande para todo el contenido */
  padding: 15px;
}</style></head><body><div class="acordeon">
  <div class="acordeon-item">
    <button class="acordeon-titulo">
      ¿Qué es WordPress?
    </button>
    <div class="acordeon-contenido">
      <p>WordPress es un sistema de gestión de contenidos (CMS) de código abierto que se utiliza para crear sitios web, blogs y tiendas en línea. Es muy popular por su flexibilidad y facilidad de uso.</p>
    </div>
  </div>
  
  <div class="acordeon-item">
    <button class="acordeon-titulo">
      ¿Cómo puedo instalar un tema?
    </button>
    <div class="acordeon-contenido">
      <p>Puedes instalar un tema desde el panel de administración de WordPress. Ve a **Apariencia > Temas > Añadir nuevo** y sube el archivo .zip de tu tema o busca uno en el repositorio oficial.</p>
    </div>
  </div>
  
  <div class="acordeon-item">
    <button class="acordeon-titulo">
      ¿Qué son los plugins?
    </button>
    <div class="acordeon-contenido">
      <p>Los plugins son pequeñas piezas de software que añaden nuevas funcionalidades a tu sitio de WordPress, como formularios de contacto, galerías de imágenes, SEO y mucho más.</p>
    </div>
  </div>
</div><script>document.addEventListener('DOMContentLoaded', function() {
  const acordeonItems = document.querySelectorAll('.acordeon-item');

  acordeonItems.forEach(item => {
    const titulo = item.querySelector('.acordeon-titulo');
    const contenido = item.querySelector('.acordeon-contenido');

    titulo.addEventListener('click', () => {
      // Cierra cualquier otro elemento abierto
      acordeonItems.forEach(otherItem => {
        if (otherItem !== item) {
          const otherTitulo = otherItem.querySelector('.acordeon-titulo');
          const otherContenido = otherItem.querySelector('.acordeon-contenido');
          
          otherTitulo.classList.remove('activo');
          otherContenido.classList.remove('abierto');
        }
      });

      // Abre o cierra el elemento actual
      titulo.classList.toggle('activo');
      contenido.classList.toggle('abierto');
    });
  });
});</script></body></html>

Nota importante: Este método es rápido y sencillo, pero no es la mejor práctica a largo plazo. Si planeas usar el acordeón en varias páginas, es mejor separar el CSS y el JavaScript en archivos externos para que no tengas que repetir el código en cada página.

2. Personalización del Estilo (CSS)

Para personalizar la apariencia del acordeón, debes editar el código CSS que está dentro de la etiqueta <style>...</style>.

Abre el Bloque de HTML Personalizado: Vuelve a la página que estás editando y haz clic en el bloque que contiene el acordeón para abrir el código.
Modifica el CSS: Busca la sección <style>...</style> y cambia los valores de las propiedades CSS.

Ejemplos de Personalización:

Color de Fondo de los Títulos: Cambia el background-color de la clase .acordeon-titulo.CSS.acordeon-titulo { background-color: #e0f7fa; /* Un tono azul claro */ color: #004d40; /* Un verde oscuro para el texto */ }
Color al Hacer Clic: Personaliza el color de fondo cuando el acordeón está activo (abierto) con la clase .acordeon-titulo.activo.CSS.acordeon-titulo.activo { background-color: #b2ebf2; /* Un tono más claro que el anterior */ }
Personalizar el Contenido: Cambia el padding o el background-color para el texto que se muestra.CSS.acordeon-contenido.abierto { padding: 20px; /* Más espacio */ background-color: #f8f9fa; /* Color de fondo gris claro */ }
Cambiar el Ícono: Puedes usar otros caracteres Unicode en la propiedad content.CSS.acordeon-titulo::after { content: '\25BC'; /* Un triángulo que apunta hacia abajo */ } .acordeon-titulo.activo::after { content: '\25B2'; /* Un triángulo que apunta hacia arriba */ }

3. Personalización del Contenido (HTML)

Puedes editar el contenido de los títulos y las respuestas directamente en el código HTML.

Cambiar las Preguntas: Modifica el texto dentro de las etiquetas <button class="acordeon-titulo">...</button>.
Cambiar las Respuestas: Modifica el texto dentro de las etiquetas <p>...</p> en los bloques <div class="acordeon-contenido">.
Añadir Más Elementos: Simplemente copia y pega un bloque completo de <div class="acordeon-item">...</div> para añadir más preguntas y respuestas.HTML<div class="acordeon-item"> <button class="acordeon-titulo"> ¿Tu nueva pregunta? </button> <div class="acordeon-contenido"> <p>La respuesta a tu nueva pregunta.</p> </div> </div>

Una vez que hagas los cambios, recuerda actualizar la página para verlos en tu sitio.

Opción 2. Separar el Código en Archivos Externos

Por Qué es Mejor Separar el Código en Archivos Externos

Tienes razón en que el método de pegar todo el código en un solo bloque HTML es rápido, pero no es la mejor práctica. Aquí te explico por qué es más eficiente y escalable separar el CSS y el JavaScript en archivos externos cuando trabajas con WordPress.

1. Reutilización y Mantenimiento

Evita la Repetición de Código: Si decides usar el acordeón en 5 páginas diferentes, con el método del bloque HTML tendrías que pegar el mismo código CSS y JavaScript en las 5. Si necesitas hacer un cambio, como modificar un color o la velocidad de la animación, tendrías que editar las 5 páginas una por una.
Centralización: Al tener el código en archivos externos, solo tienes un lugar donde hacer cambios. Si los estilos del acordeón están en style.css y el script en acordeon.js, cualquier cambio que hagas en esos archivos se reflejará automáticamente en todas las páginas que usan el acordeón. Esto te ahorra tiempo y reduce la posibilidad de errores.

2. Rendimiento y Velocidad de Carga

Caching del Navegador: Cuando un visitante accede a tu sitio, su navegador descarga los archivos CSS y JavaScript una sola vez y los almacena en una caché. En la siguiente página que visiten, el navegador no necesita volver a descargar esos archivos, lo que hace que la carga sea mucho más rápida.
Menor Carga del Servidor: Con el método del bloque HTML, el navegador tiene que procesar el CSS y el JavaScript cada vez que carga una nueva página, lo que puede ser menos eficiente. Al tenerlos en archivos externos, la carga de la página es más ligera.

3. Organización y Buenas Prácticas

Código Limpio: Mantener el código en archivos separados (.html, .css, .js) es una práctica estándar en el desarrollo web. Esto hace que tu código sea mucho más legible, fácil de depurar y simple de entender para cualquier otra persona que trabaje en tu sitio.
Integración Correcta con WordPress: WordPress tiene un sistema llamado «enqueue» para cargar scripts y estilos. Al usar este sistema a través del archivo functions.php, te aseguras de que tus scripts y estilos se carguen de la manera correcta, en el orden adecuado y sin conflictos con otros plugins o con el tema principal.

En resumen, aunque pegar todo el código en un bloque HTML es una solución rápida para una sola página, separar el código es la mejor opción para un sitio web profesional y escalable. Si planeas usar el acordeón en múltiples lugares, te recomiendo encarecidamente seguir las instrucciones para separar el código en archivos externos y encolarlos correctamente.

Cómo Implementar el Acordeón para Preguntas Frecuentes con Archivos Externos en WordPress

Separar el código de tu acordeón en archivos externos es la mejor forma de hacerlo si quieres un sitio web bien organizado, fácil de mantener y que cargue rápido. Aquí te explico cómo hacerlo paso a paso.

Paso 1: Prepara tus Archivos

Lo primero que necesitas es crear un tema hijo. Esto es crucial porque si modificas los archivos del tema principal y este se actualiza, todos tus cambios se perderán.

Crea una carpeta de tema hijo si aún no tienes una.
Dentro de la carpeta de tu tema hijo, crea un nuevo archivo llamado functions.php.
También dentro de la carpeta de tu tema hijo, crea una nueva carpeta llamada js.
Dentro de esa carpeta js, crea un archivo llamado acordeon.js.

Al final, tu estructura de archivos debe ser similar a esta:

/wp-content/themes/tu-tema-hijo/
├── style.css
├── functions.php
└── js/
    └── acordeon.js

Paso 2: Copia los Bloques de Código en sus Archivos

Ahora, copia cada bloque de código que ya tienes y pégalo en el archivo correcto.

Copia el CSS: Pega el código CSS en el archivo style.css de tu tema hijo.

CSS

.acordeon-item {
  border-bottom: 1px solid #ddd;
}

.acordeon-titulo {
  width: 100%;
  padding: 15px;
  background-color: #f7f7f7;
  border: none;
  text-align: left;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.acordeon-titulo::after {
  content: ‘+’; /* Icono para el estado «cerrado» */
  font-size: 20px;
  transition: transform 0.3s ease;
}

.acordeon-titulo.activo::after {
  content: ‘-‘; /* Icono para el estado «abierto» */
  transform: rotate(180deg);
}

.acordeon-contenido {
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.acordeon-contenido.abierto {
  max-height: 500px; /* Un valor lo suficientemente grande para todo el contenido */
  padding: 15px;
}

Copia el JavaScript: Pega el código JavaScript en el archivo acordeon.js.

JavaScript

document.addEventListener(‘DOMContentLoaded’, function() { /* … */ });

Copia el PHP: Pega el siguiente código en el archivo functions.php para que WordPress sepa que debe cargar el archivo JavaScript. Este proceso se llama «encolar scripts».

PHP

<?php
function mi_acordeon_script() {
    wp_enqueue_script(
        'acordeon-script',
        get_stylesheet_directory_uri() . '/js/acordeon.js',
        array('jquery'), // Carga jQuery como dependencia
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'mi_acordeon_script');
?>

Paso 3: Agrega el HTML a tu Página

El último paso es añadir la estructura HTML del acordeón a tu página.

Ve al editor de WordPress: Abre la página o entrada donde quieres que aparezca el acordeón.

Añade un bloque de HTML personalizado: Busca «HTML personalizado» y selecciónalo.

Pega solo el código HTML: Pega únicamente la estructura HTML, sin las etiquetas <style> o <script>.

HTML

<div class="acordeon">
  <div class="acordeon-item">
    <button class="acordeon-titulo">
      ¿Pregunta aquí?
    </button>
    <div class="acordeon-contenido">
      <p>La respuesta va aquí.</p>
    </div>
  </div>
  </div>

Actualiza la página: Guarda los cambios.

Ahora, el acordeón se cargará automáticamente en esa página. Si quieres usarlo en otra página, solo tienes que repetir el paso 3, ya que los archivos CSS y JavaScript ya estarán encolados para todo tu sitio. Esto hace que sea mucho más eficiente y fácil de gestionar.

Así se vería el Acordeón para Preguntas Frecuentes con el código de la opción 1

Mi Proyecto

WordPress es un sistema de gestión de contenidos (CMS) de código abierto que se utiliza para crear sitios web, blogs y tiendas en línea. Es muy popular por su flexibilidad y facilidad de uso.

Puedes instalar un tema desde el panel de administración de WordPress. Ve a **Apariencia > Temas > Añadir nuevo** y sube el archivo .zip de tu tema o busca uno en el repositorio oficial.

Los plugins son pequeñas piezas de software que añaden nuevas funcionalidades a tu sitio de WordPress, como formularios de contacto, galerías de imágenes, SEO y mucho más.