¿Cómo convertir el bloque de preguntas frecuentes de Rank Math en acordeón? Guía Fácil. [2021]

En este artículo, le mostraré cómo puede convertir los bloques de preguntas frecuentes de Rank Math en un elegante bloque de acordeón. Puede hacerlo fácilmente siguiendo unos sencillos pasos.

Como sabe, el complemento SEO de Rank Math tiene una función incorporada para agregar un esquema de preguntas frecuentes a WordPress. Si está utilizando Gutenberg o el editor clásico en WordPress, puede agregar preguntas frecuentes a la publicación de blog utilizando RankMath Blocks. Pero tiene su propia limitación, ya que no nos permite diseñar las preguntas frecuentes como lo hacen la mayoría de los creadores de páginas.

Pero, la implementación del esquema de preguntas frecuentes de RankMath es compatible con SEO y pasó la prueba de resultados de Google Rich.

Ahora puede agregar fácilmente un esquema de preguntas frecuentes utilizando el complemento Rank Math SEO y ayudar a Google a comprender mejor su contenido. También puede ayudarlo a clasificarse en diferentes secciones de SERP de motores de búsqueda como Google, Bing, etc.

Entonces, aprendamos cómo convertir el bloque estructurado de preguntas frecuentes que viene con el complemento SEO de RankMath en un acordeón plegable .

Hay dos formas de lograrlo. Una es instalando un complemento de WordPress ligero y simple que contiene el CSS y JS necesarios para esto. O simplemente puede agregar el script CSS y JS a su tema actual.

¿Cómo agregar un estilo de acordeón en los bloques de preguntas frecuentes de matemáticas de rango?

Para agregar un estilo de acordeón a los bloques de preguntas frecuentes de RankMath, siga los pasos a continuación.

1. Vaya a la publicación de su blog y agregue el bloque de preguntas frecuentes de Rank math.
2. Ahora busque un complemento llamado " Turn Rank Math FAQ Block to Accordion "
3. Ahora active este complemento y el estilo de acordeón en Rank math SEO se agrega automáticamente.

Nota : el complemento está desarrollado por " WP How Know" y es un complemento muy liviano . Contiene las secuencias de comandos CSS y JS básicas necesarias para convertir el bloque estructurado de preguntas frecuentes que viene con el complemento SEO de RankMath en un acordeón plegable.

Ahora sus bloques regulares de preguntas frecuentes de matemáticas de rango se convierten en un hermoso bloque de preguntas frecuentes de estilo acordeón como se muestra en la imagen a continuación.

Es muy útil para aquellos que no quieren agregar CSS y JS manualmente al tema para diseñar la sección de preguntas frecuentes.

¿Los bloques de preguntas frecuentes seguirán siendo indexables después de agregar el estilo de acordeón?

Sí, funcionará perfectamente bien después de agregar el estilo de acordeón. Puede verificar esto en la prueba de resultados enriquecidos de Google.

¿Es posible cambiar el estilo de acordeón en este complemento?

Este complemento no tiene ningún otro estilo, pero aún puede cambiar la apariencia de este estilo usando CSS personalizado.

Puede cambiar el diseño de este bloque de preguntas frecuentes de acordeón generado por este complemento utilizando un código CSS personalizado . Aquí he cambiado un poco el estilo. [como se muestra en la imagen destacada].

 #rank-math-faq .rank-math-list-item { border: 2px solid #F8F9F9; margin-bottom: 20px; background-color: #E5E8E8; } #rank-math-faq .rank-math-answer { margin: 0; padding: 12px; background-color: #F8F9F9; font-size: 16px!important; line-height: 1.4!important; border-bottom: 1px solid #dedee0; display: none; }

Debe pegar el código CSS en la sección CSS adicional de su tema o en el archivo style.css de su editor de temas.

También puede cambiar el color de fondo, el ancho y el borde, etc. cambiando el código CSS anterior.

Guía de video para las preguntas frecuentes de Rank Math Estilo de acordeón

¿Cómo cambiar los bloques de esquema de preguntas frecuentes de RankMath en un bloque de preguntas frecuentes con encabezados contraíbles? [Manual]

Para aquellos que no quieren agregar un complemento adicional, tengo el archivo CSS y JS personalizado para eso. Pero el estilo en las formas manuales es muy básico y no compite con el estilo del plugin. Esto está destinado a un mejor rendimiento sin agregar mucha presión a la velocidad de carga.

Puede comprobar el resultado final de este proceso manual en la captura de pantalla.

Aprendamos cómo puedes lograrlo. Solo sigue los pasos correctamente.

Paso 1 : agregue CSS en el tema actual.

Aquí debe agregar el archivo CSS a continuación a la sección CSS adicional de su tema o a la sección style.css del editor de temas.

Vaya al panel de WordPress> Apariencia> personalizar> CSS adicional > pegue el código y guárdelo.

Copie el código CSS de aquí.

 #rank-math-faq .rank-math-list-item{ position:relative; } #rank-math-faq .rank-math-list-item input{ position: absolute; left: 0; top: 0; width: 100%; height: 41px; opacity: 0; cursor: pointer; z-index:999; } #rank-math-faq .rank-math-list-item h3 { background: #f1f2f6; padding: 10px 12px 10px 18px; cursor: pointer; font-size: 18px !important; font-weight: normal !important; position:relative; margin-bottom: 0; } #rank-math-faq .rank-math-list-item h3:before { display:inline-block; content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 12px; border-color: transparent transparent transparent #000000; margin-right: 8px; } #rank-math-faq .rank-math-list-item input:checked+h3:before { -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } #rank-math-faq .rank-math-answer{ padding: 10px; max-height: 0; overflow:hidden; } #rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer { max-height: 100vh; overflow:visible; } div.rank-math-list-item:hover > div.rank-math-answer { max-height: 100vh; overflow: visible; } #rank-math-faq .rank-math-answer { padding:0; }

Paso 2 : agregue JavaScript en el editor de temas

Ahora debe agregar JavaScript a su editor de temas para que funcione el acordeón plegable en el bloque de preguntas frecuentes de Rankmath.

Ahora vaya al panel de WordPress> Apariencia > Editor de temas> Funciones.php> pegue el siguiente script como se muestra aquí.

Copie el código javascript y péguelo en function.php

 function faq_accordion_hook_javascript_footer() { ?> <script> jQuery(document).ready(function() { var faqBlock = jQuery("div#rank-math-faq"); var faqItems = faqBlock.find("div.rank-math-list-item"); faqItems.bind("click", function(event) { var answer = jQuery(this).find("div.rank-math-answer"); if (answer.css("overflow") == "hidden") { answer.css("overflow", "visible"); answer.css("max-height", "100vh"); } else { answer.css("overflow", "hidden"); answer.css("max-height", "0"); } }); }); </script> <?php } add_action('wp_footer', 'faq_accordion_hook_javascript_footer');

Después de agregar el javascript, no olvide guardar el código.

Ahora el bloque estructurado de preguntas frecuentes de RankMath se convierte automáticamente al estilo acordeón. Ahora funcionará como un bloque de preguntas frecuentes con encabezados contraíbles.

Conclusión

El primer método discutido en este artículo es fácil de convertir el bloque de preguntas frecuentes de matemáticas de rango en un bloque de acordeón plegable . Pero el segundo método es un proceso un poco manual pero se carga más rápido que el primer método.

Entonces, ¿en qué método vas a diseñar tus bloques de preguntas frecuentes de Rank Math ? Házmelo saber en la sección de comentarios.

Además, no olvide compartir este artículo con sus amigos que usan Rank Math para agregar preguntas frecuentes.

Lea también : Cómo agregar el cuadro Autor en el tema GeneratePress usando el elemento de enlace. [sin complemento adicional.]