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 configurando 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 aparece y se comporta el selector de idiomas de WPML en su sitio web. Puede configurar una serie de atributos, como los estilos CSS, la configuración de visualización y los shortcodes.

Esta guía es para desarrolladores que quieran 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 no traducido – Decida si desea mostrar u ocultar los enlaces al contenido no traducido
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 / del pie de página – Configure la apariencia del selector de idiomas en la barra lateral y en el pie de página, incluyendo:
- Si se muestran las banderas y/o los nombres de los 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 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 es necesario que todas estas secciones estén presentes en su archivo de configuración. Solo las que se apliquen a su plugin o tema.

Restablecer el selector de idiomas de WPML a la configuración predeterminada

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 valores predeterminados en la parte inferior de la página WPML → Configuración → Selectores de idiomas.

Recursos adicionales

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

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