0

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!!

Campo, com os textos que devem ser traduzidos

2
  • Tu colocou no CSS personalizavel ? tentou atribuir uma class neste botão e alterar como você quer? 3/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. 15/04/2019 às 18:00

1 Resposta 1

0

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .