Categorias: CSS | Plugins

Tags: Cabeçalho | Menu

Definir bandeiras personalizadas com o plugin Polylang

Escrito por Amanda de Lavra

26 de agosto de 2021

Para fazer um site multilingual, eu uso o plugin Polylang. O problema é que as bandeiras padrão são feias, mas é possível usar bandeiras personalizadas. É necessário criar uma pasta “polylang” dentro do tema filho e nomear as bandeiras segundo as línguas (ex: pt_br ou en_us). Depois, é necessário ir no painel administrativo em Idiomas > Configurações > Modificações de URL e salvar. Isso está explicado em: https://polylang.pro/doc/can-i-use-my-own-flags-for-the-language-switcher/.

Para incluir o seletor de idiomas no menu, deve-se ir em Aparência > Menus e, nas Opções de Tela, selecionar Seletor de Idiomas. Agora ele vai aparecer como opção para ser incluso no menu. Para mostrar as bandeiras, é necessário selecionar Exibir bandeiras.

Para ajustar o espaçamento entre as bandeiras no menu para que elas não fiquem tão longe umas das outras (caso esteja usando o módulo Menu), é necessário incluir o seguinte código:

/*Cabeçalho - Distância das Bandeiras */
.et_pb_menu .et-menu.nav li.menu-item.lang-item {
	padding-right: 0px !important;
}

Coloco aqui os arquivos das bandeiras que eu tenho, já no tamanho certo para irem no menu:

Posts relacionados

Customizações da página de login e painel administrativo do WordPress

Customizações da página de login e painel administrativo do WordPress

Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Como manter a proporção de um elemento com CSS

Como manter a proporção de um elemento com CSS

Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio....