Ja sam htjela osigurati da nisam bio izostavljajući potencijal međunarodne publike. Na primjer, jedan od foruma sam često puno pripada francuske kompanije.
Sreća, WordPress je prezasićenost prijevod plug-ins i dvije od njih je uhvaćen moj oko: Global Translator by Davide Pozza i Transposh by Team Transposh.
Obje su odlične dodatke, no oni također pate od jedne mana: on popunjava sidebar (widget) s 40-neke zastave ili imate luckast drop-down box. Ja sam htjela više elegantan izbor, a to je kako sam uspio to učiniti.
Ono što se čini?
Na vaše desne strane, ćete naći “Translate This” gumb. Kada je kliknuti, kutijica otvara novi prozor sa svim dostupnim opcijama prijevod. Jednostavno odaberite jednu od zastava odgovara za svoju zemlju / jezik preferencija i “Rano!”.
Kada vam nije potrebna nikakva prijevod ili je već prevedene na željeni jezik, onda je lijepo van tvoj put i daje mi više prostora za druge značajke.
I postupci?
To su uključeni iznenađujuće minimalan iznos modifikacija teme, posebno sidebar.php datoteka, dodajući neke JavaScript magiji i naravno do nekih CSS smreka stvari se malo.
PHP Portion
PHP kod kao što je sljedeća:
<?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 } ?>
Ovaj broj će se raditi za bilo Global Prevoditelj čep ili Transposh. To će provjeriti jesu li jedan od njih je instaliran i pružiti widget iznutra <div></ Div> Tags. Ako je instaliran niti, ništa se neće dogoditi. Na taj način svoj 'siguran to isključivanje plug-ins, itd..
Možete umetnuti ovaj kod u suštini bilo gdje želite. U mom slučaju, Ja sam ga se u sidebar.php file uključeni u “jednobojni” teme iz mono-lab. Konkretno, Ona je smještena gotovo odmah nakon <ul. class =”ext_meta”> dan.
CSS Portion
CSS dio može biti dodan u vašu temu's style.css datoteku i zapravo ovisi o vlastitu temu uz iznimku sljedeći zalogaj:
#translate_post {
display:none;
padding:5px;
position:absolute;
width:200px;
z-index:10;
margin-top:4px;
}
#translate_btn span {
cursor:pointer;
}
Kao što ste mogli vidjeti iz prethodnih PHP dio, donijelo kod za zastave je omotan unutar <div> oznaku s ID “translate_post”. Mi ne želimo to pokazati korisnik pravedan još, tako skup prikaz:bez opcija.
Ostale opcije su kako bi se osigurao okvir ne postane freakishly dugo (200 piksela), ne kretati druge stvari kada je prikazan (položaj:apsolutna) a ne dobiti pokriva uložene stavke kao što su video (z-index:10).
The # translate_btn dio pomaže u trag krajnji korisnik u da nešto može biti kada klik miša preko “Translate This” tekst.
Vi svibanj želite dodati druge vrijednosti, kao, na primjer, za dodavanje boje pozadine ili obruba. Ponovno, to ovisi o vašem ukusu i temu koju koristite.
JavaScript Portion
JavaScript dio zahtijeva da jQuery je već učitan by WordPress. U nekoliko slučajeva to nije slučaj kod standardne postave, tako da ćete morati uključivati slijedeće informacije u Vašem header.php tema datoteka predloška, prije <?php wp_head(); ?> dan:
wp_enqueue_script('jquery');
Većina ljubitelj teme već uključiti JavaScript koji inicijalizira nekoliko varijabli ili ugrađene skripte. U pravilu se zovu init.js ili script.js. Možete koristiti te dodati potrebne JavaScript za ovaj, ili možete stvoriti novu datoteku koja se zove dobiva iz header.php tema predložak. Na primjer:
Na to stvarni 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);
}
});
});
Broj nije visoko optimiziran kako bi vam pomogao shvatiti što se događa. Ako vam se ne sviđa JavaScript, samo će se trebati obratiti pozornost na ono što slijedi Prevedi Box kako, posebno:
/* Translate Box */
var _translate_box_vars = {
init_timeout: 3000,
timeout: 1500,
button: '#translate_btn',
window: '#translate_post',
_timer: 0
};
To postavlja mali broj varijabli koje će se koristiti u odnosu na ostatak skripte kasnije. The init_timeout varijabla specificira koliko dugo prijevod prozor (sadrži zastave) treba ostati otvoren i korisnik još nije stavio je miša unutar prozora koji. U primjeru gore, ovo je 3 sekunda (3000 milisekunda).
The timeout varijabla specificira koliko dugo istom prozoru treba ostati otvoren i ako korisnik ima postavljen mu miša unutar prozora koji (ie, lebdio mišem preko jednog od zastave). U primjeru gore, to je pola puta od početne timeout – 1500 milisekundi ili 1.5 sekunda. Možete promijeniti te kako vam drago.
Sljedeće dvije varijable, gumb i prozor, specificirati koji <div id> sadrži gumb (tekst) da biste otvorili prozor prijevod, i prijevod samog prozora. Ako niste promjene PHP dio pod uvjetom ranije, ne biste trebali promijeniti ovu.
Ostatak JavaScript ručke tri stvari u tom redu:
- Što se događa kad korisnik klikne gumb (otvoren prozor i postaviti timer za init_timeout milisekunda)
- Što će se dogoditi kada se korisnik pomiče miša unutar njegova prozora (zaustaviti brojilo i početi s timeout milisekundi ako je opet lijevo)
- Što će se dogoditi kada korisnik klikne bilo gdje drugdje (zatvorite prozor otvoren prijevod)
Vi ste gotovo tamo
Postoji nekoliko stvari koje trebate zapamtiti o plug-in side. Ako trenutno koristite Globalno Prevoditelj ili Transposh clanak u sidebar, to je visoko preporučiti to onesposobiti ova (ih ukloniti iz sidebar).
Global Translator koristi samo zastave, što je dovoljno za tu svrhu. Međutim, te bi trebao smanjiti broj zastave po redu do maksimalno 10. Alternativno, možete povećati širinu prozora u CSS dio.
Transposh koristi drop-down listi po defaultu. Na plug-in postavke stranice, možete promijeniti to zastave. Preporučujem onemogućiti napredak šipka lice, posebno zato što korisnik neće ga vidjeti kada ste provedbi ovoga zavoljeti WordPress prijevod.
Ja osobno preporučam omogućavajući “SEO friendly” opcije u bilo kojem od plugins, koji osigurava URL-ove kao što je http:/ / Www.myatus.co.uk / I za prijevode.
Inače, te bi trebao biti spreman dati ovo probati! Pustiti mene znati ako imate bilo kakvih problema – samo ostavite komentar ispod ili Kontakt me izravno.
Related Posts:
