Je voulais m'assurer que je ne partais pas à un public international potentiel. Par exemple, l'un des forums que je fréquente un lot appartient à une société française.
Heureusement, WordPress a une pléthore de plug-ins de traduction et de deux d'entre elles a attiré mon attention: Global Translator par Davide Pozza et par Transposh Team Transposh.
Les deux sont d'excellents plug-ins, mais ils souffrent aussi d'une ristourne: il remplit votre barre latérale (widget) with 40-quelques drapeaux ou si vous avez une chute stupide déroulante. Je voulais une solution plus élégante, et c'est ainsi que j'ai réussi à le faire.
Ce qu'il ne fait?
Sur votre droite de la contribution, vous trouverez une “Traduire cette” bouton. Lorsque vous cliquez dessus, une petite boîte apparaît avec toutes les options de traduction disponible. Il suffit de sélectionner l'un des drapeaux correspondant à votre pays / langue de préférence et “Tôt!”.
Lorsque vous n'avez pas besoin de toute traduction ou qu'il a déjà été traduite dans votre langue préférée, alors c'est bien de votre chemin et me donne plus de place pour d'autres fonctions.
Et Comment?
Il s'agissait d'une quantité étonnamment peu de modifications au thème, spécifiquement la sidebar.php fichier, ajoutant un peu de magie JavaScript et bien sûr des CSS pour l'épinette des choses un peu.
PHP Portion
Le code PHP est la suivante:
<?php if(function_exists("gltr_build_flags_bar") || function_exists("transposh_widget")) { ?>
<div id="translate_btn">
<span title="<?php _e('Translate this page into another language','monochrome'); ?>">
<?php _e('TRANSLATE THIS','monochrome'); ?>
</span>
</div>
<div style="clear: both;"></div>
<div id="translate_post">
<?php if (function_exists("gltr_build_flags_bar")): gltr_build_flags_bar(); else: transposh_widget(array()); endif;?>
</div>
<div style="clear: both;"></div>
<?php } ?>
Ce code permettra de travailler, soit pour le Global Translator ou plugin Transposh. Il vérifiera si l'un des deux est installé et rendre le widget dans <div></ Div> Tags. Si aucune n'est installée, rien ne se passera. Alors qu'il est sûr de désactiver les plug-ins, etc.
Vous pouvez insérer ce code pour l'essentiel partout où vous voulez. Dans mon cas, Je l'ai placé dans le sidebar.php fichier inclus avec la “monochrome” Theme from mono-Lab. Plus précisément, Il est situé presque immédiatement après la <ul class =”ext_meta”> jour.
CSS Portion
La partie CSS peuvent être ajoutés à votre thème style.css fichier et dépend vraiment de votre propre thème, à l'exception du bit suivant:
#translate_post {
display:none;
padding:5px;
position:absolute;
width:200px;
z-index:10;
margin-top:4px;
}
#translate_btn span {
cursor:pointer;
}
Comme vous avez pu le voir dans la partie précédente PHP, le code de rendu pour les drapeaux est enveloppé dans une <div> tag avec l'ID de “translate_post”. Nous ne voulons pas le montrer à l'utilisateur tout de suite, donc désactive le afficher:aucun option.
Les autres options sont pour s'assurer que la case ne pas devenir à long freakishly (200 pixels), ne bouge pas d'autres choses autour lorsqu'elles sont affichées (position:absolue) et ne soit pas couverts par les postes embarqués tels que des vidéos (z-index:10).
Le # translate_btn partie indice permet à l'utilisateur final en ce que quelque chose peut être cliqué lorsque la souris se trouve sur votre “Traduire cette” Texte.
Vous mai tiens à ajouter d'autres valeurs, ainsi, par exemple pour ajouter une couleur d'arrière-plan ou une bordure. À nouveau, Cela dépend de vos goûts et le thème que vous utilisez.
JavaScript Portion
La partie exige que JavaScript jQuery est déjà chargée par WordPress. Dans quelques cas, ce n'est pas le cas par défaut, vous aurez donc besoin d'inclure les éléments suivants dans votre header.php Thème fichier modèle, avant <?php wp_head(); ?> jour:
wp_enqueue_script('jquery');
La plupart des thèmes plus fantaisistes comprennent déjà un code JavaScript qui initialise quelques variables ou incorporés dans des scripts. En général, ils sont appelés init.js ou script.js. Vous pouvez les utiliser pour ajouter le code JavaScript nécessaire pour cette, ou vous pouvez créer un nouveau fichier qui est appelée à partir de la header.php Thème Template. Par exemple:
Sur le JavaScript réelle:
jQuery(document).ready(function( $ ){
/* Translate Box */
var _translate_box_vars = {
init_timeout: 3000,
timeout: 1500,
button: '#translate_btn',
window: '#translate_post',
_timer: 0
};
/* What follows does not need editing */
$(_translate_box_vars.button).click(function (e) {
if (!$(_translate_box_vars.window).is(':visible')) {
leftVal=e.pageX-($(_translate_box_vars.window).width()/2)+"px";
topVal=(e.pageY+4)+"px";
$(_translate_box_vars.window).css({left:leftVal,top:topVal}).fadeIn(300);
_translate_box_vars._timer = setTimeout("jQuery(function($){$('"+_translate_box_vars.window+"').css({left:leftVal,top:topVal}).fadeOut(300)});", _translate_box_vars.init_timeout);
}
e.stopPropagation();
});
$(_translate_box_vars.window).hover(
function () {
clearTimeout(_translate_box_vars._timer);
},
function () {
_translate_box_vars._timer = setTimeout("jQuery(function($){$('"+_translate_box_vars.window+"').css({left:leftVal,top:topVal}).fadeOut(300)});", _translate_box_vars.timeout);
}
);
$('body').click(function(e) {
if (!$(e.target).is(_translate_box_vars.window)) {
$(_translate_box_vars.window).fadeOut(300);
clearTimeout(_translate_box_vars._timer);
}
});
});
Le code n'est pas très optimisée pour vous aider à comprendre ce qui se passe. Si vous n'êtes pas confortable avec JavaScript, vous aurez juste besoin de faire attention à ce qui suit le Traduire Box comment, spécifiquement:
/* Translate Box */
var _translate_box_vars = {
init_timeout: 3000,
timeout: 1500,
button: '#translate_btn',
window: '#translate_post',
_timer: 0
};
Il définit un petit nombre de variables qui seront utilisées par le reste du script côté. Le init_timeout variable indique depuis combien de temps la fenêtre de traduction (contenant les drapeaux) doit rester ouvert et l'utilisateur n'a pas encore mis sa souris à l'intérieur de cette fenêtre. Dans l'exemple ci-dessus, Ceci est 3 seconde (3000 millisecondes).
Le timeout variable indique combien de temps la même fenêtre doit rester ouverte si l'utilisateur a mis sa souris à l'intérieur de cette fenêtre (ie, planait la souris sur un des drapeaux). Dans l'exemple ci-dessus, Ceci est la moitié du temps du délai d'attente initial – 1500 millisecondes ou 1.5 seconde. Vous pouvez changer les comme vous s'il vous plaît.
Les deux variables suivantes, bouton et fenêtre, préciser lesquels <div id> contient le bouton (Texte) pour ouvrir la fenêtre de traduction, et la fenêtre de traduction elle-même. Si vous n'avez pas modifié la partie PHP fournies précédemment, vous devriez pas avoir à changer cette.
Le reste du code JavaScript permet de gérer trois choses dans cet ordre:
- Qu'advient-il lorsque l'utilisateur clique sur le bouton (ouvrir la fenêtre et définir une minuterie pour init_timeout millisecondes)
- Qu'est-ce qui se passera lorsque l'utilisateur déplace sa souris dans la fenêtre (arrêter le décompte et il doit commencer par timeout millisecondes si elle a encore à gauche)
- Qu'est-ce qui se passera lorsque l'utilisateur clique n'importe où ailleurs (Fermez la fenêtre de traduction ouvert)
Vous y êtes presque
Il ya quelques choses que vous avez besoin de se souvenir du plug-in Side. Si vous utilisez actuellement le Global Translator ou widgets Transposh dans votre barre latérale, Il est fortement recommandé de désactiver ces (retirez-les de la barre latérale).
Global Translator utilise uniquement des drapeaux, ce qui est suffisant à cet effet. Cependant, vous devrez réduire le nombre de drapeaux par ligne jusqu'à un maximum de 10. Alternativement, vous pouvez augmenter la largeur de la fenêtre dans la partie CSS.
Transposh utilise une liste déroulante par défaut. Sur le plug-in paramètres de la page, vous pouvez changer cela en drapeaux. Je recommande de désactiver la barre de progression fonctionnalité, en particulier parce que l'utilisateur ne sera pas le voir quand vous implémentez cette traduction fantaisie WordPress.
Je recommande de permettre au “SEO friendly” options dans l'une des plugins, qui fournit des URL telles que http:/ / Www.myatus.co.uk / I pour les traductions.
Sinon, vous devriez être prêt à opter pour cette solution! Faites-moi savoir si vous rencontrez des problèmes – il suffit de laisser un commentaire ci-dessous ou Contact moi directement.
Related Posts:
