WPML proporciona un selector de idiomas fácil de usar, pero a veces no querrá que aparezca en todas las páginas. Aprenda a mostrarlo u ocultarlo solo en páginas específicas.
Puede hacerlo fácilmente utilizando unas pocas líneas de CSS.
Mostrar el selector de idiomas solo en páginas específicas
Paso 1: Ocultar el selector de idiomas en todas las páginas
Primero, debe comprobar qué clase utiliza nuestro selector de idiomas.
Puede comprobarlo utilizando las herramientas para desarrolladores del navegador:
- Visite su sitio en el front-end y pulse la tecla F12 de su teclado.
- Utilice la herramienta «inspeccionar» para seleccionar el selector de idiomas y aparecerá su marcado HTML.
Estas son dos clases comunes para un selector de idiomas:
- Clase wpml-ls-menu-item cuando el selector aparece en un menú
- Clase wpml-ls cuando el selector aparece en el pie de página
Una vez que conozca la clase correcta, vaya a la página Apariencia → Personalizar , haga clic en CSS adicional y añada el siguiente CSS a su sitio web.
Ocultar el selector de idiomas del menú
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}Esto ocultará el selector de idiomas en todas las páginas.
Como alternativa, puede añadir estas reglas de estilo al archivo style.css de su tema, pero asegúrese de utilizar un tema hijo. De lo contrario, sus estilos personalizados se perderán cuando actualice el tema.
Para obtener información detallada sobre las clases CSS del selector de idiomas, visite nuestra página sobre estilos CSS para los selectores de idiomas.
Paso 2: Mostrar el selector de idiomas en una página específica
En el siguiente paso, debe añadir otro fragmento de CSS para mostrar el selector de idiomas solo en las páginas que desee.
WordPress añade automáticamente clases específicas a la etiqueta body de cada página. Esto le permite actuar sobre el selector de idiomas de una página concreta.
Para encontrar la clase, abra en el front-end la página en la que quiere mostrar el selector de idiomas. De nuevo, utilice la herramienta de inspección del navegador y busque la etiqueta body.
Verá algo como esto:
Encontrar la clase id
<body class="page-template-default page page-id-2 logged-in admin-bar wp-embed-responsive is-light-theme singular has-main-navigation customize-support">
En este caso, la clase page-id-2 se añade solo a esta página específica. El número representa el ID de esta página y puede utilizarlo para crear su fragmento.
El fragmento completo debería tener este aspecto:
Ocultar el selector de idiomas del menú – completo
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}
/*Display Language Switcher only in the page with ID 2*/
body.page-id-2 .wpml-ls-menu-item {
visibility: visible !important;
}
body.page-id-2 .wpml-ls {
visibility: visible !important;
}Recuerde sustituir la clase page-id-2 por la clase de su página.
Estas son algunas de las clases específicas que puede utilizar:
- page-id-X: se utiliza para las páginas (sustituya la X por el ID de la página)
- postid-X: se utiliza para las entradas (sustituya la X por el ID de la entrada)
- home: se utiliza para la página de inicio
- single-post: se utiliza para todas las entradas (no para una en concreto)
- page: se utiliza para todas las páginas (no para una en concreto)
Ocultar el selector de idiomas solo en páginas específicas
Ocultar el selector de idiomas en páginas específicas es muy similar a los pasos anteriores. Pero en lugar de ocultarlo en todas las páginas, solo lo ocultará en una página específica.
Para ello, solo necesita obtener la clase específica de la página y luego utilizarla para ocultar el selector de idiomas de esa página.
Su fragmento de CSS debería tener este aspecto:
Ocultar el selector de idiomas solo en la página con el ID 2
/*Hide Language Switcher only on the page with ID 2*/
/*Menu Language Switcher*/
body.page-id-2 .wpml-ls-menu-item {
visibility: hidden !important;
}
/*Footer Language Switcher*/
body.page-id-2 .wpml-ls {
visibility: hidden !important;
}Recuerde sustituir la clase page-id-2 por su clase específica.