Ich wollte sichergehen, dass ich nicht verlassen, eine potentielle internationale Publikum. Zum Beispiel, einem der Foren ich häufig eine Menge gehört zu einer Französisch Unternehmen.
Zum Glück, WordPress hat eine Fülle von Übersetzungen Plug-Ins und zwei von ihnen caught my eye: Global Translator von Davide Pozza und Transposh von Team Transposh.
Beide sind hervorragende Plug-Ins, aber sie leiden auch einen Nachteil: füllt der Sidebar (Widget) mit 40-paar Flags oder Sie haben eine dumme Dropdown-Feld. Ich wollte eine elegantere Möglichkeit,, und auf diese Weise habe ich es geschafft, dies zu tun.
What does it do?
Auf der rechten Seite, finden Sie eine “TRANSLATE THIS” Schaltfläche. Wenn Sie darauf klicken, einen kleinen Kasten öffnet sich mit allen verfügbaren Optionen Übersetzung. Wählen Sie einfach eine der Fahnen passend zu Ihrem Land / Sprache der Vorzugs-und “Früh!”.
Wenn Sie brauchen keine Übersetzung oder sie bereits in der ausgewählten Sprache übersetzt wurde,, dann ist es schön aus dem Weg und gibt mir mehr Raum für andere Funktionen.
Und Anleitungen?
Es ging um eine überraschend geringe Maß an Modifikationen für das Thema, insbesondere die sidebar.php Datei, Hinzufügen einiger JavaScript Magie und natürlich einige CSS zum Fichte ein wenig.
PHP Portion
Der PHP-Code ist wie folgt:
<?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 } ?>
Dieser Code wird sich entweder für die Global Translator Plugin oder Transposh. Es wird, wenn einer der beiden zu überprüfen installiert ist und machen das Widget in <div></ Div> Tags. Wenn weder installiert ist, nichts passieren wird. So ist es sicher, die Plug-Ins zu deaktivieren, etc.
Sie können diesen Code einfügen im wesentlichen überall Sie möchten. In meinem Fall, Ich habe es an den dort platzierten sidebar.php mit der mitgelieferten Datei “Monochrom” Thema aus Mono-lab. Insbesondere, Es ist fast unmittelbar nach der Lage <ul class =”ext_meta”> tag.
CSS Portion
Die CSS-Anteil kann hinzugefügt werden, Ihres Themas style.css Datei und hängt wirklich davon ab Ihr eigenes Thema, mit Ausnahme der folgenden Bit -:
#translate_post {
display:none;
padding:5px;
position:absolute;
width:200px;
z-index:10;
margin-top:4px;
}
#translate_btn span {
cursor:pointer;
}
Da konnte man sehen, aus dem vorangegangenen PHP-Teil, der erbrachten Code für die Fahnen befindet sich in einem verpackt <div> tag mit der ID “translate_post”. Wir wollen nicht, diese für den Benutzer nur noch zeigen,, so setzen Sie die Anzeige:keine Option.
Die anderen Optionen sind um sicherzustellen, dass das Feld nicht zu lange freakishly (200 Pixel), bewegt sich nicht um andere Dinge bei der Anzeige (Position:absolute) und nicht durch eingebettete Elemente wie Videos abgedeckt erhalten (z-index:10).
der # translate_btn Teil hilft Ahnung den Endverbraucher in diesem etwas kann angeklickt werden, wenn die Maus über Ihre “TRANSLATE THIS” Text.
Vielleicht möchten Sie andere Werte als auch hinzufügen, zum Beispiel fügen Sie eine Hintergrundfarbe oder einen Rahmen. Erneut, Sie hängt von Ihrem Geschmack und das Thema, das Sie verwenden.
JavaScript-Teil
Die JavaScript-Teil setzt voraus, dass jQuery wird bereits von WordPress geladen. In einigen wenigen Fällen ist dies nicht der Fall ist standardmäßig, so müssen Sie die folgenden gehören in Ihren header.php Thema Template-Datei, vor <?php wp_head(); ?> tag:
wp_enqueue_script('jquery');
Die meisten Züchter Themen enthalten bereits ein JavaScript, dass ein paar Variablen oder eingebauten Skripten initialisiert. Allgemein nennt man sie init.js oder script.js. Sie können diese nutzen, um die erforderlichen JavaScript für diese Erweiterung, oder Sie können eine neue Datei erstellen, die von der aufgerufen wird, header.php Thema Vorlage. Zum Beispiel:
Auf die tatsächliche JavaScript:
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);
}
});
});
Der Code ist nicht hoch optimiert, damit Sie verstehen, was passiert. Wenn Sie sich nicht wohl mit JavaScript, Sie müssen nur darauf achten, was folgt die Bezahlung Translate Box wie, Insbesondere:
/* Translate Box */
var _translate_box_vars = {
init_timeout: 3000,
timeout: 1500,
button: '#translate_btn',
window: '#translate_post',
_timer: 0
};
Er legt eine kleine Anzahl von Variablen, die durch den Rest des Skripts später verwendet werden. der init_timeout Variable gibt an, wie lange die Übersetzung Fenster (mit den Fahnen) sollte offen bleiben und der Nutzer hat noch nicht legte seine Maus in diesem Fenster. In dem obigen Beispiel, Dies ist 3 Sekunden (3000 Millisekunden).
der Timeout Variable gibt an, wie lange das gleiche Fenster sollte offen bleiben, wenn der Benutzer seine Maus in das Fenster gestellt hat (dh, schwebte die Maus über eine der Fahnen). In dem obigen Beispiel, Dies ist die Hälfte der Zeit der ersten Timeout – 1500 Millisekunden oder 1.5 Sekunden. Sie können diese beliebig ändern Sie bitte.
Die beiden folgenden Variablen, Schaltfläche und Fenster, angeben, welche <div id> enthält die Schaltfläche (Text) öffnen Sie das Fenster Übersetzung, und die Übersetzung Fenster selbst. Wenn Sie nicht die PHP-Teil geändert haben, sofern zuvor, das hättest du nicht, dies zu ändern.
Der Rest der JavaScript-Griffe drei Dinge, die in dieser Reihenfolge:
- Was passiert, wenn der Benutzer auf die Schaltfläche klickt (Öffnen Sie die Fenster und stellen Sie einen Timer für das init_timeout Millisekunden)
- Was passiert, wenn der Benutzer seine Maus bewegt sich innerhalb des Fensters (die Zeitmessung stoppen und starten Sie es mit Timeout Millisekunden, wenn es wieder links)
- Was passiert, wenn der Benutzer anderswo Klicks (Schließen Sie das Fenster öffnen Übersetzung)
Sie sind fast da
Es gibt ein paar Dinge, die Sie brauchen, um das Plug-in-Seite erinnern. Wenn Sie derzeit mit dem Global Translator oder Transposh Widgets in der Sidebar, Es wird dringend empfohlen, diese zu deaktivieren (entfernen Sie sie aus der Seitenleiste).
Global Translator verwendet nur Fahnen, die für diesen Zweck ausreichend ist,. Jedoch, Sie sollten die Anzahl der Fahnen pro Zeile zu einem Höchstbetrag von 10. Alternativ, Sie können die Breite des Fensters in der CSS-Teil.
Transposh verwendet eine Drop-Down-Liste wird standardmäßig. Auf der Plug-In-Einstellungen Seite, Sie können dies jedoch mit Kennzeichen. Ich empfehle das Deaktivieren der Statusleiste Funktion, vor allem, weil der Benutzer nicht sehen, wenn Sie diese Phantasie WordPress Übersetzung der Umsetzung sind.
Ich persönlich empfehle damit die “SEO freundliche” Optionen in einem der Plugins, welche URLs enthält, wie http:/ / Www.myatus.co.uk / I für Übersetzungen.
Anderenfalls, Sie sollten bereit sein, diesem einen Versuch geben! Lassen Sie mich wissen, wenn Sie irgendwelche Probleme sind unter – einfach nur einen Kommentar unten oder Kontakt direkt an mich.
In Verbindung stehende Pfosten:
