cuestiones
Cuando utilice el elemento Pestañas, puede encontrar problemas de rendimiento si añade un gran número de elementos (como los elementos Cuadrícula de bucle o Carrusel de bucle) o muchos elementos (como crear casi todo el contenido de la página en cada pestaña).
Estas cuestiones incluyen:
- Problemas de rendimiento del front-end (carga lenta de las páginas).
- Problemas de rendimiento en el editor de Elementor (dificultades con el funcionamiento del editor).
Otro problema es que si utiliza elementos dependientes de JavaScript en el contenido de la pestaña, puede que no se muestren correctamente. Por ejemplo, si utiliza una rotación circular en cualquier pestaña que no sea la primera,Elementos de Gallery Prou otros elementos que dependan de JS, puede producirse un error.
Estos problemas pueden evitarse con los métodos de este tutorial.
vantage
- mejora del rendimiento: Evitar problemas de rendimiento en el front-end y en el editor.
- Optimización SEO: El contenido de cada pestaña será una página separada con
y meta-descripción separados, y ningún contenido utilizará visualización, lo que tiene un impacto positivo en SEO.
Escenarios aplicables
- Cuando las pestañas tienen mucho contenido
- Cuando hay elementos en la ficha que dependen de JavaScript
- Cuando el SEO es una prioridad (es decir, cuando el contenido de la ficha es importante para el SEO)
Pseudoetiquetas en sitios web populares
El "pseudoetiquetado" es una opción muy utilizada por algunos sitios web populares, como Google:
Todos ellos actúan como títulos de etiquetas, pero en realidad son enlaces a otras páginas. Se trata de un patrón de diseño muy utilizado.
Creación de pseudoetiquetas
utilizarElemento Nav MenuSustitúyelo. Entonces.Vincule los elementos del menú a las distintas páginas correspondientes al "contenido de la pestaña".
Creación de pseudoetiquetas
Crear página
En primer lugar, cree una nueva página para el contenido de cada pestaña.
Hacerlo mejora el rendimiento y evita errores.
A continuación, asigne un nombre a estas páginas y publíquelas.
Creación de menús
A continuación, vaya al panel de WordPress y haga clic a su vez en "apariciones" > "menú", haga clic en " crear un nuevo menú"Crear un nuevo menú de navegación.
A continuación, añada todas las páginas que acaba de crear a ese menú y haga clic en "guardar (un archivo, etc.) (informática)".
Creación de plantillas de una página
Para asegurarnos de que todas las "pestañas" son coherentes, crearemos una plantilla de página única.
Esta plantilla puede enlazar a determinadas entradas o archivos de tipo de entrada personalizada (CPT).
Pasos:
- Vaya al backend de WordPress y haga clic a su vez en "plantilla" > "Creador de temas".
- Haga clic en "Añadir nueva plantilla de una página".
Añadir elementos al menú de WordPress
- Creación de menús::
- Inicie sesión en el panel de control de WordPress.
- Vaya a Apariencia > Menú.
- Haga clic en "Crear nuevo menú", asigne un nombre al menú y pulse el botón "Crear menú".
- En los elementos de menú de la izquierda, seleccione la página, el artículo, la categoría o el enlace personalizado que desea añadir al menú y haga clic en el botón "Añadir al menú".
- Puede arrastrar los elementos del menú para ajustar el orden. Cuando haya terminado, haga clic en "Guardar menú".
- Añadir un menú a una página::
- Vaya a Páginas > Todas las páginas, busque la página a la que desea añadir un menú y haga clic en Editar.
- Si se utiliza el editor clásico:
- En el editor de páginas, seleccione un widget de texto o añada un shortcode directamente al contenido de la página
[menu id="menu_id"]
quemenu_id
es el ID del menú que ha creado. - Uso del constructor Elementor
- Abre el editor de Elementor y busca el widget "Menú de navegación".
- Arrastre el widget Menú de navegación al lugar adecuado de la página.
- En el panel izquierdo, seleccione el menú que acaba de crear.
- En el editor de páginas, seleccione un widget de texto o añada un shortcode directamente al contenido de la página
- Estilos de menú personalizados(Opcional):
- Si necesitas personalizar el estilo del menú, puedes hacerlo en el personalizador del tema.
- Vaya a Apariencia > Personalizar > CSS adicional y añada código CSS personalizado según sea necesario.
Añadir elementos HTML
- Abre el editor de Elementor y busca el widget "HTML".
- Arrastre el widget "HTML" sobre el elemento del menú de navegación de la página.
Encuentra una sección de código similar a la siguiente y reemplázala con ese código. Los estilos se han ajustado para que sean los mismos que en la demostración anterior, lo que ahorra tiempo al cambiar todo el CSS.
<div class="custom-html">
<!-- 您的自定义HTML代码 -->
<style>
/* 添加您自定义的CSS样式 */
.custom-html {
/* 示例样式 */
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
</style>
<!-- 示例内容 -->
<p>Este es un elemento HTML de ejemplo que se sitúa encima del elemento del menú de navegación.</p>
</div>
Puede que sea necesario examinar el CSS a continuación y ajustarlo según sea necesario.
Ahora, ajuste el contenedor (que debe contener elementos HTML y elementos de menú de WordPress) hasta que tenga el estilo perfecto que desea.
Añadir donde sea necesario "Contenido de la entrada"Elemento. Eso es".Contenidos con etiqueta"Mostrar ubicación.
Publique su plantilla de una página yEstablecer condiciones para que todas las "pestañas" lo tengan.
Añadir contenido
Ahora sólo queda ir a cada una de las "pestañas" y añadirles el contenido que necesites.
Resumen:
¿Cómo optimizar el rendimiento y el SEO de tu sitio web WordPress utilizando pseudopestañas en lugar de elementos Tabs? Este post explica las formas de crear pseudopestañas, incluyendo la creación de nuevas páginas, la configuración de menús de navegación y la adición de elementos HTML personalizados. Esta técnica evita problemas de rendimiento en la carga y el editor front-end, garantiza que los elementos JavaScript se muestren correctamente y mejora el SEO con una estructura de página independiente. También se explica cómo crear plantillas de una sola página para mantener la coherencia y optimizar el contenido de las pestañas. Aplicando estos pasos, puede mejorar significativamente la experiencia de usuario de su sitio web y su posicionamiento en los motores de búsqueda.