En esta publicación
En esta publicación
TranslatePress ofrece numerosas opciones para personalizar el selector de idioma de tu página web desde el primer momento. Esto facilita su integración con el diseño de tu página web y garantiza la coherencia de tu marca. Además, puedes personalizarlo aún más mediante código e incluso crear tu propio selector personalizado desde cero.
Así que, en este artículo, te mostraré cómo crear uno de 3 maneras distintas, comenzando con la opción sin código más fácil y llegando hasta la creación desde cero con PHP.
Pero primero, repasemos las ventajas de cambiar el diseño de tu selector de idioma. A continuación, te explicaré las opciones disponibles en la configuración de TranslatePress y cómo realizar cambios en tu selector mediante código de marcado.
¿Por qué crear un selector de idioma personalizado en TranslatePress?
Personalizar tu selector de idioma puede ayudar a mejorar el diseño, la usabilidad, la accesibilidad, la credibilidad y la efectividad de tu sitio web multilingüe:
- Asegura que esta parte necesaria de tu interfaz de usuario encaje bien con el resto de tu diseño de sitio, lo que lleva a una marca coherente, una experiencia de usuario agradable y una impresión profesional.
- Los visitantes pueden acceder más fácilmente al contenido en el idioma que deseen, lo que aumenta las posibilidades de que permanezcan más tiempo en tu sitio web. Esto también aumenta la confianza y hace que tu sitio web sea más atractivo.
- Puedes tomar decisiones de diseño apropiadas para visitores con discapacidades, como contraste de color suficiente y botones de tamaño adecuado.
Finalmente, la capacidad de ajustar el diseño de tu selector de idioma te da más libertad y control sobre cómo se ve tu sitio. Tienes la capacidad de experimentar con diferentes posiciones, formas, colores y aspectos del selector., fuentes, y hasta diseños móviles personalizados.
Bien, pasemos ahora a los tres métodos con los que puedes añadir un selector de idioma personalizado a tu sitio web si utilizas TranslatePress, ordenados de más fácil a más difícil.
Método sencillo: Opciones de personalización integradas en TranslatePress
Empecemos con el método más fácil (y el mejor, si me preguntas). Simple, rápido, sin código, pero aún con muchas opciones de personalización.
El plugin TranslatePress cuenta con numerosas opciones nativas para personalizar el selector de idioma integrado, lo que te permite realizar cambios radicales con solo unos clics. Las encontrarás todas en tu panel de control de WordPress, en la sección Configuración → TranslatePress → Cambiador de Idioma.
El selector de idioma predeterminado TranslatePress está disponible en tres versiones:
- como un botón flotante
- el
- o como un artículo del menú
Cada uno de estos ofrecen sus propias opciones de personalización. Vamos a revisar cada uno individualmente.
El cambiador de idioma flotante
Puedes activar el interruptor flotante con el control deslizante de la derecha. Una vista previa en la esquina superior izquierda te permite ver cómo se verá en la página. Este interruptor permanecerá en la parte superior de tu sitio y seguirá a tus visitantes en cada página que visiten.
Debajo Tipo de conmutador, Primero puede decidir si desea que sus idiomas aparezcan como un menú desplegable o, si ofrece exactamente dos idiomas en su sitio, puede mostrarlos uno al lado del otro. Debajo de eso hay una serie de diseños preestablecidos. Habilítelos con un solo clic.
Adicionalmente, el Diseño a Medida la sección tiene docenas de opciones para ajustar casi todas las partes del conmutador, como:
- Color de fondo y color al pasar el cursor
- Color de texto (normal y al pasar el ratón por encima)
- Color, ancho y radio del borde (significa la curvatura de las esquinas)
- Animaciones de movimiento del menú desplegable
- Bandera y tamaño de texto (normal o grande)
- Icono de bandera forma (rectángulo o cuadrado)
También tienes la opción de ingresar CSS personalizado, pero hablaremos de eso más adelante.
Debajo Personalizar Maquetación, puedes ajustar la posición y otras partes de la apariencia de tu selector de idioma.
Específicamente, puedes:
- Colócalo en las esquinas inferior o superior izquierda y derecha de la pantalla
- Ajustar el ancho del botón
- Personaliza el relleno (es decir, el espacio interno alrededor del texto)
- Coloca las banderas de idiomas antes o después del nombre, u ocúltalas por completo
- Mostrar los nombres completos de los idiomas, su código ISO (EN, DE, etc.), o nada
Ten en cuenta que también puedes tener diferentes configuraciones para el escritorio y visitores móviles.
Finalmente, está Ajustes adicionales.
Solo tiene dos configuraciones:
- Cuando tienes exactamente dos idiomas en tu sitio, puedes decidir que el selector muestre siempre el idioma opuesto al que está activo en ese momento.
- Puedes mostrar una pequeña etiqueta que diga “Powered by TranslatePress” en el selector de idioma flotante (te agradeceríamos mucho que lo hicieras ☺️).
Guarda tus cambios para hacerlos permanentes. Usa el Revertir cambios botón para volver a la configuración predeterminada.
El Conmutador de Idioma con Shortcode/Bloque
La configuración del código corto ofrece opciones similares a las del conmutador de idioma flotante. Una diferencia principal es que puede colocar este conmutador en lugares específicos de su sitio, como el pie de página o una página específica.
Puedes copiarlo y pegarlo en cualquier lugar de tu sitio para que el conmutador aparezca en esa ubicación específica.
Sin embargo, el shortcode está destinado principalmente a lo clásico temas. Para los temas de bloques, TranslatePress ofrece un Cambiador de Idioma bloquear.
Puedes cambiar el diseño del botón de prácticamente la misma manera que el conmutador flotante.
Debajo Ajustes adicionales, hay una opción adicional para que el cambiador de idioma se abra al hacer clic, no al pasar el ratón por encima.
El Selector de Elementos del Menú
Finalmente, tienes la opción de agregar el selector de idioma como un menú elemento a tu menú de WordPress.
Este tipo de selector también es muy útil para temas clásicos. Para temas que utilizan bloques, podría ser más fácil usar lo mencionado anteriormente. Cambiador de Idioma bloquear en su lugar.
Este es un poco más restrictivo en cuanto a personalización, ya que el diseño del menú está vinculado al diseño de su tema. Por lo tanto, las únicas opciones de personalización aquí son las posiciones del icono de la bandera y los nombres de los idiomas. También encontrará una configuración para controlar la forma del icono de la bandera (rectángulo, cuadrado, redondeado).
La parte complicada aquí es que también deberá agregar manualmente sus idiomas en el menú desde la configuración de su menú. Esto significa navegar a Apariencia → Menús, y seleccionando el menú específico al que quieres añadir tu selector.
Luego, desde el Agregar elementos de menú sección a la izquierda, abre la Cambiador de Idioma pestaña, y agrega los idiomas que desees en tu menú, colocándolos como subelementos debajo de Idioma actual. Esto creará un selector similar a un menú desplegable, donde los usuarios podrán elegir su idioma preferido.
Cambiar las Banderas de Idioma Predeterminadas
La opción integrada final que quiero repasar para crear un selector de idioma personalizado es cómo cambiar las banderas de idioma predeterminadas.
Si quieres usar un icono de bandera diferente para cualquier idioma, lo primero que necesitas hacer es subir el archivo a tu sitio de WordPress a través de Medios → Añadir archivo multimedia.
Cuando termines, abre la imagen en la biblioteca de medios y copia el enlace a su ubicación.
Luego ve Configuración → TranslatePress → Avanzado → Idioma personalizado. Aquí, introduce el Código ISO del idioma para el que desea cambiar el icono de bandera a continuación Código de idioma, Entonces, proporcione el enlace a su archivo de bandera recién subido en el URL de la bandera campo y clic Añadir, luego guarda.
Puedes hacer esto para tantos idiomas como estés utilizando. Cuando guardes, el nuevo icono de bandera aparecerá en el front-end de tu sitio.
Método avanzado: Cómo personalizar el selector de idioma de TranslatePress mediante CSS
Si bien la configuración que ya te he explicado te ofrece muchas opciones de personalización sin necesidad de escribir código, puede haber casos en los que quieras ir un poco más allá.
Para personalizar aún más el selector de idioma de lo que permiten las configuraciones predeterminadas, siempre tienes la opción de usar CSS personalizado.
Como se mencionó anteriormente, el menú flotante del selector de idioma tiene una dedicada CSS personalizado opción. Puedes activarlo e ingresar tu propio marcado para cambiar aún más el diseño del selector.
Let’s look at what’s possible. Right after a beginner crash course in CSS.
A Short Intro to CSS
In case you are an absolute beginner, CSS is the markup language that determines much of the look, layout, and behavior of websites. While HTML elements provide the structure, CSS is what decides:
- how large these elements are
- what colors they have
- which font they use
- how they are positioned
- how much space they have around them
- and much more
Here’s what a typical piece of CSS code (called “rule set”) looks like:
.button {
background-color: #0073aa;
color: #ffffff;
font-size: 16px;
}It consists of several parts:
- Selector: At the top, before the opening curly braces, is the so-called selector. It’s called that because it determines or selects which website element the CSS will modify. In this case, that’s an element with a class called “button,” so likely an actual button on the page.
- Property: This is the part that determines which attribute of the selected element the rule set targets. In this case, it’s the element’s background color, font color, and font size. But there are many CSS properties, including width, line-height, or text-align.
- Value: Properties need a value; it’s what decides what quality the targeted property takes on. For example, in this case font size is set to 16 pixels and the font color to #ffffff, which is the hex code for white. A property-value pair is called a declaration. As you can see, you can have several declarations in one rule set.
The final part that’s important is the syntax. CSS declarations need a semicolon at the end, and rule sets require open and closed curly braces. Of course, there’s much more to learn, but this will do for now.
Finding the Right Selectors
As you can imagine, to make changes via CSS requires that you target the right selectors. You can find them using browser developer tools. Simply right-click any element on a web page in your browser and then choose Inspect.
The browser developer tools will show you the HTML structure of the page and the CSS markup of the chosen element. It takes a bit of practice to understand which of the boxes you want to make changes to, but you’ll quickly get the hang of it.
Important selectors to customize the TranslatePress language switcher are:
.trp-language-switcher: That’s the class of the language switcher element itself..trp-language-switcher-inner: The wrapper element for the list of languages..trp-switcher-dropdown-list: Allows you to customize the language drop-down list..trp-language-item: For the individual languages in your list..trp-language-item__current: The class for the currently active language in your list..trp-flag-image: Targets the language flag images.
The different language switcher variations may also have additional classes. For example, the language switcher block has a wrapper element with the class .trp-block-container. These can help you distinguish code that’s aimed only at one type of language switcher. Plus, several elements have more than one class or id, which can help you create a more specific selector in order to overwrite other markup.
Don’t worry if you don’t understand all of this yet. It’ll become clearer once I go over the examples.
Change the Language Switcher Position
The floating language switcher comes with four default positions. If you want to place it anywhere else, you have to do it with code.
The easiest way is to overwrite the existing CSS. When you place the language switcher in the bottom right corner via its settings and examine it in the browser developer tools, you can see these two declarations attached to it:
--bottom: 0px;
--right: 10vw;(If you are confused that they look different from the other CSS properties I am using, it’s because they are custom properties or variables.)
You can overwrite these with .trp-language-switcher like so:
.trp-language-switcher {
right: 0px;
bottom: 50%;
}When you place the markup above into the CSS personalizado field in the language switcher settings and save, you get the following result (I also switched off the language names to make it look better).
Note that, if you’ve set the language switcher position differently in the settings (e.g., top left instead of bottom right), you may have to overwrite different CSS declarations to move it.
Customize Shape and Style
You can also use CSS to change the look of the language switcher. For example, in this case, I want to turn the switcher and the list of languages into circles. It’s already positioned where I want it to be; I just need a bit of space to the right of it. That’s possible with this CSS:
.trp-language-switcher {
bottom: 50%;
right: 1.5vw;
}To make the next changes visible, we first have to switch the background color and border color in the settings to transparent.
Then, we can turn the language switcher into a circle and give it some color back:
.trp-language-switcher .trp-language-item {
background-color: rgb(181, 11, 62);
border-radius: 50%;
padding: 16px;
}This rounds the corners and also adds some internal space to make each language button perfectly round. It ends up looking like this:
Now I want some gaps between the language fields:
.trp-language-switcher-inner,
.trp-language-switcher .trp-switcher-dropdown-list {
gap: 5px;
}
The layout is done, now it just needs a bit of styling and some adjustments to the way it opens:
.trp-language-switcher {
box-shadow: none;
pointer-events: none;
}
.trp-language-switcher .trp-language-item {
border: none;
pointer-events: auto;
}
.trp-language-switcher .trp-language-item:hover,
.trp-language-switcher .trp-language-item:focus-visible,
.trp-language-item:has(.trp-language-item__current:hover),
.trp-language-item:has(.trp-language-item__current:focus-visible) {
background-color: rgb(160, 8, 55);
}The code above:
- Adds a new background color
- Adjusts the hover background color
- Moves the trigger for the drop-down menu to the list items
Below is the result.
Here’s the entire code as one:
.trp-language-switcher {
bottom: 50%;
box-shadow: none;
pointer-events: none;
right: 1.5vw;
}
.trp-language-switcher-inner,
.trp-language-switcher .trp-switcher-dropdown-list {
gap: 5px;
}
.trp-language-switcher .trp-language-item {
background-color: rgb(181, 11, 62);
border: none;
border-radius: 50%;
padding: 16px;
pointer-events: auto;
}
.trp-language-switcher .trp-language-item:hover,
.trp-language-switcher .trp-language-item:focus-visible,
.trp-language-item:has(.trp-language-item__current:hover),
.trp-language-item:has(.trp-language-item__current:focus-visible) {
background-color: rgb(160, 8, 55);
}Adjust the Mobile Design
The final thing I want to cover in terms of CSS is how to customize the mobile design of your language switcher. This can be necessary to adjust the design for smaller screen sizes.
You can introduce mobile-specific design changes via so-called “media queries.” They introduce conditions to CSS markup. They basically say “only use this markup when the screen is below or above a certain size.” Here’s an example:
@media (max-width: 480px) {
.trp-language-switcher {
bottom: 1.5vw;
}
}The first line simply says “the following rule sets only apply on screens that are a maximum of 480 pixels wide.” Below that is a variation of the positioning markup we used earlier. This moves the custom language switcher back to the bottom of the screen.
Note that you only have to include those declarations you want to overwrite. Here, we’re only changing the bottom property of .trp-language-switcher. Everything else stays the way we set it up earlier.
Finally, it’s important that you place media queries at the end of your CSS markup. Browsers process CSS from top to bottom. So, if you want to overwrite earlier declarations or rule sets, your new code has to appear later than the original.
Método Profesional: Cómo Construir un Conmutador de Idiomas Usando PHP
Now, this section is for the pros. If, for some specific reason, you want to go even further, you can also build a custom TranslatePress language switcher from scratch.
This, for example, prevents you from having to overwrite existing CSS markup. Instead, you can have full control over the structure, layout, interactivity, and style of your language switcher from the get-go.
To show you how it works, we’ll create a flags-only, minimalist, horizontal switcher that can easily appear in different areas of your website.
1. Get to Know the PHP Function
TranslatePress offers a custom function for creating your own language switcher. It returns parameters for all important data points for the languages active on your site:
- language_name: The full language name (e.g., “English”).
- language_code: The language code (e.g., “EN”).
- short_language_name: The language slug used in URLs.
- flag_link: The URL to the language’s flag image.
- current_page_url: The URL of the page the visitor is on, but in that language.
You can use this to create your own language switcher with your own markup. One option is to place it directly in a theme file inside a child theme directory (not the main theme, as your changes will be overwritten if you update the theme). Alternatively, you can create a shortcode in functions.php, a code snippet plugin, or with your own custom plugin and use the shortcode to place the language switcher on your site.
We’ll go for the second option here.
2. Create the Shortcode
The first thing we will do is set up the scaffolding for the shortcode we’ll create. Place this inside your child theme’s functions.php or a PHP file in your custom plugin:
<?php
function my_custom_language_switcher() {
// language switcher code goes here
}
add_shortcode( 'my_language_switcher', 'my_custom_language_switcher' );This sets up the PHP function that will eventually register and output the shortcode in WordPress.
3. Build the Language Switcher HTML
Next up, we want to create the basic structure for the language switcher. Since we are going minimalistic, that’s relatively simple.
<div class="my-language-switcher">
<ul>
<li class="language-item">
<a href="#"><img src="flag.png" alt="Bandera del idioma"></a>
</li>
</ul>
</div>It’s basically a wrapper element with an unordered list in it. Each list item contains a link element for the language, which has the flag image inside.
4. Add Dynamic PHP Data
We’ll now add the HTML structure to our shortcode function and add the language data via PHP.
<?php
function my_custom_language_switcher() {
// Get all active languages
$languages = trp_custom_language_switcher();
// If no languages, return empty
if ( empty( $languages ) ) {
return '';
}
// Start capturing HTML
ob_start();
?>
<div class="my-language-switcher" data-no-translation>
<ul>
<?php foreach ( $languages as $language ) : ?>
<li class="language-item <?php echo !empty($language['current_language']) ? 'current' : ''; ?>">
<a href="<?php echo esc_url( $language['current_page_url'] ); ?>"><img src="<?php echo esc_url( $language['flag_link'] ); ?>" alt="<?php echo esc_attr( $language['language_name'] ); ?> flag"></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php
// Devolver el HTML para el shortcode
return ob_get_clean();
}
// Registrar el shortcode
add_shortcode('my_language_switcher', 'my_custom_language_switcher');This creates the same HTML markup we saw earlier, but for each active language on your site. It also fills in the language URL, link to flag image, and the language name as an image ALT tag. In addition, it adds an extra class to the currently active language in case you want to add extra styling.
5. Test the Output on Your Site
This already works. You can use the shortcode [my_language_switcher] to place the custom switcher wherever you want on your site, for example, via the Código corto block in the WordPress block editor. Alternatively, place it in a file like header.php o footer.php using this line of code:
<?php echo do_shortcode('[my_language_switcher]'); ?>You should already see your list of languages, however, completely unstyled.
The final step is to change that.
6. Add Styling via CSS
The last step of creating your custom TranslatePress language switcher is to make it look pretty. In order to achieve the result shown earlier, add this to your child theme, plugin style sheet, or the Additional CSS field in the WordPress editor:
.my-language-switcher {
display: inline-block;
}
.my-language-switcher ul {
list-style: none;
display: flex;
gap: 8px;
padding: 0;
margin: 0;
}
.my-language-switcher li a {
display: block;
overflow: hidden;
}
.my-language-switcher li a img {
width: 100%;
height: 100%;
display: block;
}
Crea tu propio selector de idioma personalizado hoy
Customizing the TranslatePress language switcher makes sure it fits the rest of your website design and provides the best experience for your users.
Above, I have gone over several ways you can make adjustments to its appearance, from the easy-to-use built-in plugin settings, to CSS customizations, and a completely built-from-scratch switcher via PHP. Hopefully, you now feel ready to fully integrate TranslatePress into your own website design.
As you can easily see, one option stands out when it comes to convenience and speed. TranslatePress comes with plenty of customization options out of the box, so you don’t have to be a code master to have a perfectly functional and personalized language switcher.
TranslatePress Multilingüe
Try it today, and have your language switcher up in minutes!
