Comment traduire les built-in words sur Squarespace ?

Squarespace n'est disponible qu'en anglais. Vous pouvez bien sûr rédiger votre contenu dans la langue de votre choix, mais certains éléments ne peuvent pas être traduits directement via l'interface d'administration de Squarespace. C'est le cas notamment des éléments suivants:

  1. Liens "Newer post" / "Older post" à la fin des articles de blogs
  2. Lien "Read more" à la fin des excerpts d'articles de blog
  3. Bouton "Share" sur les pages d'articles de blog
  4. Placeholders "First name" / "Last name" sous les champs de texte des formulaires de contact
  5. Dates des articles de blog: Mois de l'année et inversion jour / mois
  6. Placeholders "First name" / "Last name" du bloc de newsletter

Heureusement, il est possible de traduire facilement ces éléments avec un peu de CSS et de Javascript. Vous trouverez ci-dessous le code à copier/coller pour chacun d'eux.

NB: les éléments liés au ecommerce ne sont pas pris en compte dans cet article.

 

1. Newer Post / Older Post

Copier/coller simplement le code suivant dans Settings > Advanced > Code injection (Header).

<!-- Traduction Older / Newer post -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$(".next-label").text("Article suivant");
$(".prev-label").text("Article précédent");
});
</script>
<!-- Fin de traduction Older / Newer post -->
 

2. Read More

Copier/coller simplement le code suivant dans Design > Custom CSS.

/* Traduction du lien Read more */
.entry-more-link a::before { 
content: "Lire la suite"; 
}
/* Fin de traduction du lien Read more */
 

3. Share button

Copier/coller simplement le code suivant dans Settings > Advanced > Code injection (Header).

<!-- Traduction du bouton Share -->
<script> 
var shareButtonTranslation = "Partagez"; 
// Traduire le bouton quand la page est chargée
YUI().use('node', function(Y) { 
Y.on("domready", function(){ 
console.log('dom is ready'); 
// Traduire le bouton Share 
Y.all('.ss-social-button').setHTML('<span class="ss-social-button-icon"></span>'+ shareButtonTranslation); 
}); 
}); 
</script> 
<!-- Fin de traduction du bouton Share -->
 

4. First name / Last name

Copier/coller simplement le code suivant dans Settings > Advanced > Code injection (Header).

<!-- Traduction First et Last name -->
<script>
function addLoadEvent(func) {
 
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
 
addLoadEvent(function() {
  sqsFirstName = document.getElementsByClassName("caption")[0].innerHTML;
  myFirstName = sqsFirstName.replace("First Name", "Prénom");
  document.getElementsByClassName("caption")[0].innerHTML = myFirstName;
 
  sqsLastName = document.getElementsByClassName("caption")[1].innerHTML;
  myLastName = sqsLastName.replace("Last Name", "Nom");
  document.getElementsByClassName("caption")[1].innerHTML = myLastName;
});
</script>
<!-- Fin de traduction First et Last name -->
 

5. Dates de blog

Copier/coller simplement le code suivant dans Settings > Advanced > Code injection (Header).

<!-- Traduction des dates de blog -->
<script> 
var month=new Array(12); 
month[0]="Janvier"; 
month[1]="Février"; 
month[2]="Mars"; 
month[3]="Avril"; 
month[4]="Mai"; 
month[5]="Juin"; 
month[6]="Juillet"; 
month[7]="Août"; 
month[8]="Septempbre"; 
month[9]="Octobre"; 
month[10]="Novembre"; 
month[11]="Décembre"; 
</script> 
<!-- Ajout transition--> 
<style> 
time.published{ 
opacity:0; 
transition: opacity .3s ease; 
-webkit-transition: opacity .3s ease; 
} 
</style> 
<script> 
YUI().use('node', 'event', function(Y) { 
Y.on("domready", function () { 
<!-- Fonction de traduction --> 
Y.all('time.published').each( 
function() { 
var pdate = new Date(this.getAttribute('datetime')); 
this.setHTML(pdate.getDate() + " " + month[pdate.getMonth()] + " " + pdate.getFullYear()); 
} 
); 
<!-- Après la traduction, opacité sur 1 -->
Y.all('time.published').setStyles({opacity: 1}); 
}); /* use node */ 
}); /* on domready */ 
</script> 
<!-- Fin de traduction des dates de blog -->
 

6. Placeholders Newsletter

Copier/coller simplement le code suivant dans Settings > Advanced > Code injection (Header).

<!-- Traduction des placeholder du bloc newsletter -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script>
 $(document).ready(function () {
     $('.first-name').find('input').attr('placeholder', 'Prénom');
     $('.last-name').find('input').attr('placeholder', 'Nom');
     $('.email').find('input').attr('placeholder', 'Email');
 });
 </script>
<!-- Fin de traduction des placeholder du bloc newsletter -->