Personalizar el selector de idiomas de WPML con el archivo de configuración

WPML le permite personalizar el selector de idiomas para satisfacer sus necesidades específicas mediante la configuración de los ajustes en el archivo wpml-config.xml.

El archivo wpml-config.xml es un archivo de configuración que le permite personalizar cómo se ve y se comporta su selector de idiomas de WPML en su sitio web. Puede configurar una serie de atributos, como estilos CSS, ajustes de visualización y shortcodes.

Esta guía es para desarrolladores que quieren personalizar el selector de idiomas integrado de WPML. Si quiere crear uno personalizado, lea nuestra página sobre cómo crear un selector de idiomas personalizado.

¿Necesita generar un archivo wpml-config.xml? Visite nuestra guía paso a paso para generar automáticamente un archivo de configuración usando el plugin Herramientas multilingües.

¿Qué puedo personalizar en mi selector de idiomas?

WPML le permite personalizar una serie de variables en su selector de idiomas. Esto incluye:

Estilos CSS en línea – Añada CSS personalizado directamente al selector de idiomas
Enlace a contenido sin traducir – Decida si mostrar u ocultar los enlaces al contenido sin traducir
Parámetros de URL a copiar – Especifique los parámetros de URL que deben copiarse al cambiar de idioma
Selector de idiomas de la barra lateral / pie de página – Configure la apariencia del selector de idiomas en la barra lateral y el pie de página, incluyendo:
- Si mostrar banderas y/o nombres de idiomas
- Si el idioma actual debe mostrarse como un enlace
- Establecer un título para el widget del selector de idiomas
- Elegir una plantilla para el diseño del selector
- Personalizar los colores del texto, el fondo y los bordes usando códigos de color hexadecimales

Acciones de los shortcodes – Defina la apariencia de los selectores de idiomas añadidos mediante shortcodes

Ejemplo de cómo añadir una configuración personalizada para el selector de idiomas integrado de WPML

<wpml-config>
  <language-switcher-settings>
    <key name="additional_css">{inline CSS styles}</key>
    <key name="link_empty">{0 or 1}</key>
    <key name="copy_parameters">{parameter1, parameter2}</key>
    <key name="sidebars">
        <key name="{sidebar slug}">
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="widget_title">{widget title}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
    </key>
    <key name="statics">
        <key name="footer">
            <key name="show">{0 or 1}</key>
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
        <key name="post_translations">
            <key name="show">{0 or 1}</key>
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="display_before_content">{0 or 1}</key>
            <key name="display_after_content">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <key name="availability_text">{string like "See post translations: %s"}</key>
        </key>
        <key name="shortcode_actions">
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
    </key>
  </language-switcher-settings>
</wpml-config>

No todas estas secciones tienen que estar presentes en su archivo de configuración. Solo las que se aplican a su plugin o tema.

Restablecer el selector de idiomas de WPML a los ajustes predeterminados

También puede usar wpml-config.xml para restablecer la configuración del selector de idiomas si se cambió desde el backend (desde sus valores iniciales).
Para ver los nuevos cambios, asegúrese de hacer clic en el botón Restaurar predeterminado en la parte inferior de la página WPML → Idiomas.

Recursos adicionales

Para obtener más información sobre el archivo wpml-config.xml, visite la guía de Archivos de configuración de idiomas.

Para personalizar otros elementos usando el archivo wpml-config.xml, visite nuestras guías adicionales: