Ήθελα να βεβαιωθείτε ότι δεν ήμουν αφήνοντας ένα δυναμικό διεθνές κοινό. Για παράδειγμα, ένα από τα φόρουμ μου συχνά μια παρτίδα ανήκει σε μια γαλλική εταιρεία.
Ευτυχώς, WordPress διαθέτει πληθώρα μετάφραση plug-ins και δύο εκ των οποίων έπεσε στην αντίληψή μου: Global Μεταφραστής από Davide Pozza και Transposh από Ομάδα Transposh.
Και οι δύο είναι εξαιρετικές plug-ins, αλλά επίσης υποφέρουν από ένα μειονέκτημα: πλαϊνή μπάρα που γεμίζει σας (widget) με 40-ορισμένες σημαίες ή έχετε μια ανόητη αναπτυσσόμενο πλαίσιο. Ήθελα μια πιο κομψή επιλογή, και αυτό είναι πως έχω καταφέρει να το κάνετε αυτό.
Τι κάνει?
Στα δεξιά σας πλευρά, θα βρείτε “TRANSLATE THIS” κουμπί. Όταν κάνετε κλικ, ένα μικρό κουτί αναδύεται με όλες τις διαθέσιμες επιλογές μετάφραση. Απλά επιλέξτε μία από τις σημαίες που ταιριάζουν στη χώρα σας / γλώσσα της προτίμησης και “Νωρίς!”.
Όταν δεν χρειάζεται καμία μετάφραση ή έχει ήδη μεταφραστεί σε γλώσσα της προτίμησής σας, τότε είναι ωραία έξω από το δρόμο σας και να μου δίνει περισσότερο χώρο για τα άλλα χαρακτηριστικά.
Και οδηγίες?
Αφορούσε ένα εκπληκτικά ελάχιστο ποσό των τροποποιήσεων στο θέμα, ειδικά το sidebar.php αρχείο, προσθέτοντας μερικές JavaScript μαγεία και φυσικά μερικές CSS για την ελάτη τα πράγματα λίγο.
PHP Portion
Ο κώδικας PHP είναι ως εξής:
<?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 } ?>
Αυτός ο κωδικός θα λειτουργήσει είτε για το Παγκόσμιο Μεταφραστής ή plugin Transposh. Θα ελέγχει αν ένα από τα δύο έχει εγκατασταθεί και να καταστήσει το widget στο εσωτερικό <div></ Div> TAGS. Εάν δεν είναι εγκατεστημένο, τίποτα δεν θα συμβεί. Έτσι είναι ασφαλές να απενεργοποιήσετε το plug-ins, κλπ..
Μπορείτε να τοποθετήσετε αυτόν τον κώδικα ουσιαστικά οπουδήποτε θέλετε. Στην περίπτωσή μου, Έχω έχει τεθεί υπό την sidebar.php αρχείο περιλαμβάνεται το “μονόχρωμος” θέμα από μονο-lab. Συγκεκριμένα, Βρίσκεται σχεδόν αμέσως μετά την <ul class =”ext_meta”> ημέρα.
CSS Portion
Η μερίδα CSS μπορεί να προστεθεί στο θέμα σας style.css αρχείο και πραγματικά εξαρτάται από το προσωπικό σας θέμα, με εξαίρεση τις ακόλουθες bit:
#translate_post {
display:none;
padding:5px;
position:absolute;
width:200px;
z-index:10;
margin-top:4px;
}
#translate_btn span {
cursor:pointer;
}
Όπως μπορείτε να δείτε από την προηγούμενη μερίδα PHP, το κατέστησε κώδικα για τις σημαίες είναι τυλιγμένα μέσα σε μια <div> ετικέτα με την ταυτότητα του “translate_post”. Δεν θέλουμε να το αποδείξει αυτό για το χρήστη ακριβώς ακόμα, έτσι που το εμφάνιση:Δεν επιλογή.
Οι άλλες επιλογές είναι να βεβαιωθείτε ότι το πλαίσιο δεν θα καταστεί freakishly καιρό (200 pixels), δεν κινείται άλλα πράγματα γύρω από την απεικόνιση (θέση:απόλυτη) και δεν πρέπει να καλύπτεται από τα ενσωματωμένα αντικείμενα, όπως τα βίντεο (z-index:10).
Το # translate_btn μερίδα βοηθά ένδειξη του τελικού χρήστη σε κάτι που μπορεί να κάνει κλικ όταν το ποντίκι είναι πάνω σας “TRANSLATE THIS” κείμενο.
Μπορεί να θέλετε να προσθέσετε και άλλες αξίες, καθώς και, για παράδειγμα για να προσθέσετε ένα χρώμα φόντου ή ένα σύνορο. Ξανά, αυτό εξαρτάται από το γούστο σας και το θέμα που χρησιμοποιείτε.
JavaScript Μερίδιο
Το μέρος που απαιτεί τη Javascript jQuery έχει ήδη φορτωθεί από WordPress. Σε μερικές περιπτώσεις αυτό δεν συμβαίνει το ίδιο με την προεπιλογή, έτσι θα πρέπει να περιλαμβάνει τα εξής σας header.php theme αρχείο προτύπου, πριν <?php wp_head(); ?> ημέρα:
wp_enqueue_script('jquery');
Τα περισσότερα από τα fancier θέματα περιλαμβάνουν ήδη ένα JavaScript που προετοιμάζει μερικά μεταβλητές ή ενσωματωμένο σε σενάρια. Γενικά ονομάζονται init.js ή script.js. Μπορείτε να χρησιμοποιήσετε αυτές για να προσθέσετε τις απαιτούμενες Javascript για αυτό το, ή μπορείτε να δημιουργήσετε ένα νέο αρχείο που ονομάζεται παίρνει από το header.php theme template. Για παράδειγμα:
Σχετικά με την πραγματική 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);
}
});
});
Ο κώδικας δεν είναι ιδιαίτερα αισιόδοξος για να σας βοηθήσει να καταλάβετε τι συμβαίνει. Αν δεν είστε εξοικειωμένοι με την JavaScript, θα πρέπει ακριβώς να δώσουμε προσοχή σε αυτό που ακολουθεί την Μετάφραση Box πώς, ειδικώς:
/* Translate Box */
var _translate_box_vars = {
init_timeout: 3000,
timeout: 1500,
button: '#translate_btn',
window: '#translate_post',
_timer: 0
};
Θέτει έναν μικρό αριθμό των μεταβλητών που θα χρησιμοποιηθούν από το υπόλοιπο του σεναρίου αργότερα. Το init_timeout μεταβλητή καθορίζει το χρονικό διάστημα από το παράθυρο μετάφραση (περιέχουν τις σημαίες) πρέπει να παραμείνει ανοικτή και ο χρήστης δεν έχει ακόμη τοποθετηθεί το ποντίκι μέσα που παράθυρο. Στο παραπάνω παράδειγμα, αυτό 3 δευτερόλεπτα (3000 χιλιοστά).
Το timeout : καθορίζει το χρονικό διάστημα στο ίδιο παράθυρο θα πρέπει να παραμείνει ανοικτή σε περίπτωση που ο χρήστης έχει τοποθετηθεί στο εσωτερικό του ποντικιού ότι το παράθυρο (δηλαδή, κυμαινόταν το ποντίκι πάνω από μια από τις σημαίες). Στο παραπάνω παράδειγμα, αυτό είναι το ήμισυ του χρόνου του το αρχικό χρονικό όριο – 1500 χιλιοστά του δευτερολέπτου ή 1.5 δευτερόλεπτα. Μπορείτε να αλλάξετε αυτές όπως σας παρακαλώ.
Οι ακόλουθες δύο μεταβλητές, κουμπί και παράθυρο, προσδιορίζονται οι <div id> περιέχει το κουμπί (κείμενο) για να ανοίξετε το παράθυρο μετάφραση, και το ίδιο το παράθυρο μετάφραση. Εάν δεν έχει τροποποιηθεί το τμήμα PHP προβλέπεται νωρίτερα, δεν πρέπει να αλλάξει αυτό.
Το υπόλοιπο της JavaScript χειρίζεται τρία πράγματα σε αυτή τη σειρά:
- Τι συμβαίνει όταν ο χρήστης κάνει κλικ στο κουμπί (ανοίξετε το παράθυρο και να ορίσετε ένα χρονοδιακόπτη για init_timeout χιλιοστά)
- Τι θα συμβεί όταν ο χρήστης μετακινεί το ποντίκι μέσα στο παράθυρο (σταματήσει το χρονόμετρο και να αρχίσει με το timeout χιλιοστά του δευτερολέπτου, αν χάθηκε και πάλι)
- Τι θα συμβεί όταν ο χρήστης κάνει κλικ οπουδήποτε αλλού (κλείστε το ανοιχτό παράθυρο μετάφραση)
Είσαι σχεδόν εκεί
Υπάρχουν μερικά πράγματα που πρέπει να θυμάστε σχετικά με το plug-in πλευρά. Εάν χρησιμοποιείτε σήμερα το Παγκόσμιο Μεταφραστής ή Transposh μικροσυσκευές στην πλαϊνή μπάρα σας, συνιστάται ιδιαίτερα να απενεργοποιήσετε αυτές (αποσύρει από την πλαϊνή μπάρα).
Global Μεταφραστής χρησιμοποιεί μόνο σημαίες, η οποία είναι επαρκής για το σκοπό αυτό. Ωστόσο, θα πρέπει να μειωθεί ο αριθμός των σημαιών ανά σειρά κατ 'ανώτατο όριο 10. Εναλλακτικά, μπορείτε να αυξήσετε το πλάτος του ανοίγματος στο τμήμα CSS.
Transposh χρησιμοποιεί μια αναπτυσσόμενη λίστα από προεπιλογή. Σχετικά με το plug-in Ρυθμίσεις σελίδα, μπορείτε να αλλάξετε αυτό με σημαίες. Θα ήθελα να συστήσω την απενεργοποίηση της γραμμή προόδου χαρακτηριστικό, ειδικά επειδή ο χρήστης δεν θα το δείτε όταν είστε εφαρμογή της παρούσας φανταχτερό μετάφραση WordPress.
Προσωπικά, συνιστάται η ενεργοποίηση του “SEO friendly” επιλογές σε ένα από τα plugins, το οποίο προβλέπει URLs όπως http:/ / Www.myatus.co.uk / I μετάφρασης.
Διαφορετικά, θα πρέπει να είναι έτοιμη να δώσει σε αυτό μια δοκιμή! Επιτρέψτε μου να ξέρω αν είστε με οποιοδήποτε θέματα – μόλις αφήσετε ένα σχόλιο κάτω ή Επαφή με απευθείας.
Σχετικές θέσεις:
