Tenho o campo de "enviar arquivo", em um site multilingual, quero saber se é possível alterar esses textos, para posteriormente traduzi-los com o plugin WPML. obs:Já tentei com css, mas não atende ao que preciso!!
-
Tu colocou no CSS personalizavel ? tentou atribuir uma class neste botão e alterar como você quer?– Ricardo Gonçalves3/04/2019 às 17:26
-
@RicardoGonçalves já sim mas o problema não é o estilo, e sim o texto padrão, ali está em português, eu preciso trocar para inglês para depois traduzi-los atraves do plugin WPML.– Aurélio Campos15/04/2019 às 18:00
1 Resposta
Estes textos são de padrão do próprio navegador, o mesmo utiliza a linguagem do próprio usuário, então não é possível traduzir a menos que você o customize.
Um exemplo de como eu faria a customização:
1. Adicionar no functions.php do tema um ajuste para passar a string traduzida para todos os inputs do tipo "file".
function custom_admin_file_input($html, $input, $label, $value) {
if (strpos($html, 'input[type="file"]') !== false) {
$html = str_replace('<input', '<input data-label="Escolha um arquivo" data-not-filled="Nenhum arquivo selecionado"', $html);
}
return $html;
}
add_filter('wp_file_input', 'custom_admin_file_input', 10, 4);
2. Adicionar um novo script via functions.php
function enqueue_custom_admin_script() {
if (is_admin()) {
wp_enqueue_script('custom-admin-file-input', get_template_directory_uri() . '/assets/js/custom-admin-file-input.js', array('jquery'), '1.0', true);
}
}
add_action('admin_enqueue_scripts', 'enqueue_custom_admin_script');
3. Ajustar a estrutura dinamicamente via JavaScript para criar um label novo.
document.querySelectorAll('[type=file][data-label]').forEach(element => {
const elementHTML = element.outerHTML;
let html = `
<label class="label-file">
${elementHTML}
<span class="label">${element.dataset.label}</span>
<span class="filename">${element.dataset.notFilled}</span>
</label>
`;
element.outerHTML = html;
document.querySelectorAll('label.label-file [type=file]').forEach(element => {
element.addEventListener('change', event => {
element.closest('label').querySelector('.filename').innerHTML = event.target.files[0].name;
});
});
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 16px;
}
input[type=file][data-label] {
display: none;
}
label.label-file {
width: 100%;
float: left;
display: flex;
align-items: center;
margin-bottom: 16px;
}
label.label-file span.label {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
float: left;
margin-right: 10px;
}
label.label-file:hover span.label {
background-color: #f0f0f0;
}
<input data-label="Escolha um arquivo" data-not-filled="Nenhum arquivo selecionado" type="file" id="wp_file">
<input data-label="Escolha um arquivo" data-not-filled="Nenhum arquivo selecionado" type="file" id="wp_file2">
Desta forma, como os textos estão carregando direto no back-end, você pode usar o WPML para traduzir as strings do admin normalmente.