Я хотел, чтобы убедиться, что я был не выходя из потенциальной международной аудитории. Например,, одном из форумов я частый многое принадлежит одной из французских компаний.
К счастью,, WordPress имеет множество переводов Plug-Ins и два из них привлекло мое внимание: Глобальная Переводчик на Davide Pozza и по Transposh Команда Transposh.
Оба отличные Plug-Ins, но они также страдают от недостатка: он заполняет на боковой панели (Виджет) с 40-Некоторые флаги, или у вас есть глупо выпадающего списка. Я хотел более элегантного варианта, И вот как мне удалось это сделать.
Что она делает?
По правую сторону, Вы найдете “Перевести эту” Кнопка. Когда вы щелкните на нем, коробочку с СОЗ все имеющиеся варианты перевода. Просто выберите один из национальных флагов, соответствующих вашей стране / Язык предпочтения и “Рано!”.
Когда вы не нуждаетесь в переводе или она уже была переведена на нужном языке, то это красиво из ваш путь и дает мне больше возможностей для других функций.
И как?
Она участвует удивительно минимальная сумма, об изменениях в теме, конкретно sidebar.php файл, Добавление Некоторые JavaScript магии и, конечно, некоторое CSS, чтобы украсить вещи вверх немного.
PHP Порция
Код 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 } ?>
Этот код будет работать либо Глобальной переводчик или Transposh плагина. Она будет проверить, если одна из двух установлен и оказать виджет внутри <Div></ DIV> Теги. Если установлен ни, ничего не случится. Таким образом можно отключить плагин, и т.д..
Вы можете вставить этот код по существу нигде вы хотите. В моем случае, Я положил его в sidebar.php файла, включенного в “монохромный” Theme From моно-Lab. Конкретно, Она находится почти сразу же после <улица класс =”ext_meta”> день.
CSS Порция
Часть УС могут быть добавлены к вашей темы style.css файла и действительно зависит от вашей собственной темы, за исключением следующих разрядные:
#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”. Мы не хотим, чтобы показать это, чтобы пользователь просто еще, такой набор отображать:никакой опции.
Другие варианты, чтобы убедиться, что окно не стал капризно долгого (200 пикселов), не двигается другие вещи вокруг При отображении (позиции:абсолютные) и не покрываются с помощью встроенных такие объекты, как видео (Z-INDEX:10).
Определенный артикль # translate_btn Часть помогает понятия конечного пользователя в этом что-то может быть нажата, когда мышь находится над вашей “Перевести эту” Текст.
Вы можете добавить другие ценности, а, Например, чтобы добавить цвет фона или границы. Снова, Это зависит от вашего вкуса и темы вы используете.
JavaScript части
Часть JavaScript Jquery требует, чтобы уже загружены WordPress. В некоторых случаях этого не происходит по умолчанию, поэтому вам нужно включить следующее в ваш header.php Тема файл шаблона, прежде <?PHP wp_head(); ?> день:
wp_enqueue_script('jquery');
Большинство из более сложных темах, уже включает JavaScript, который инициализирует несколько переменных или встроенный в скриптах. Как правило, называют Init.js или script.js. Вы можете использовать это, чтобы добавить необходимые для этого JavaScript, или вы можете создать новый файл, который вызывается из header.php тема шаблон. Например,:
О фактическом 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 миллисекунды).
Определенный артикль таймаут переменная определяет, как долго же окно должно оставаться открытым, если пользователь поставил свои мыши внутри этого окна (т., завис мыши на один из флагов). В приведенном выше примере, Это половина времени от первоначальных ожиданий – 1500 миллисекунды или 1.5 секунд. Их можно изменять как угодно.
Следующие две переменные, Кнопка и окна, указать, какие <Div ID> содержит кнопки (Текст) Чтобы открыть окно перевода, и перевод самого окна. Если вы не изменили части PHP, предоставленную ранее, Вы не должны изменить эту.
Остальная часть JavaScript обрабатывает три вещи в таком порядке:
- Что происходит, когда пользователь нажимает на кнопку (открыть окно и установить таймер для init_timeout миллисекунды)
- Что произойдет, когда пользователь перемещает его мышью внутри окна (таймер остановится, и начать ее с таймаут миллисекунды, если она еще раз налево)
- Что произойдет, когда пользователь щелкает где-либо еще (закрыть открытые окна перевода)
Вы почти у цели
Есть несколько вещей, которые вам нужно помнить на вилке в сторону. Если вы в данный момент с помощью Глобальной переводчик или Transposh виджетов в боковой панели, Настоятельно рекомендуется отключить эти (удалить их из боковой панели).
Глобальный Translator использует только флагов, который является достаточным для этой цели. Однако, Вы должны уменьшить количество флагов в строке максимум 10. Альтернативы, Вы можете увеличить ширину окна в части CSS.
Transposh используется выпадающий список по умолчанию. На плагина в настройках страницу, Вы можете изменить это к флагам. Я рекомендую отключить функцию индикатора, особенно потому, что пользователь не увидит его, когда вы осуществлении этой фантазии перевода WordPress.
Лично я рекомендую позволило “SEO Friendly” ссылок в любой из плагинов, URL, который предусматривает такие как HTTP:/ / Www.myatus.co.uk / I для переводов.
В противном случае, Вы должны быть готовы предоставить эту попытку! Позвольте мне знать, если у вас возникли любые вопросы – просто оставьте комментарий ниже, или Контактная информация со мной напрямую.
Соответствующие должности:
