В заголовке вашей веб-страницы (между тегами <head> и</head>) добавьте следующие 4 строчки:
<link type=“text/css” rel=“stylesheet” href=“https://puzzle-english.com/wp-content/themes/english/assets/css/balloon.css”>
<script type=“text/javascript” src=“https://puzzle-english.com/wp-content/plugins/pe-balloon/jBox.min.js”></script>
<script type=“text/javascript” src=“https://puzzle-english.com/wp-content/plugins/pe-balloon/pe_balloon.min.js”></script>
Эти строки подключают js-файлы управления словарём и css-стили с его оформлением.
Для работы js-файлов требуется библиотека jQuery. Возможно, вы уже используете её у себя на сайте.
Если нет, то дополнительно к этим строчкам добавьте загрузку jQuery:
В любом месте страницы (между тегами <body> и</body>) добавьте следующие строчки, они производят инициализацию словаря:
$(function() {
PE_Balloon.init({wrap_words: true, id_user: <Ваш ID>, our_helper: true});
});
// ]]></script>
id_user – Идентификатор партнера (ID); our_helper принимает значение либо true, либо false. Если false, то пользователь, при первом посещении, не увидит помощника Гарри, который кратко расскажет что делать.
Слова, при клике на которые должны показываться переводы, должны быть обёрнуты в тег с класcом balloon-row.
Вот пример html:
Ayo, my pen and paper cause a chain reaction
To get your brain relaxing, a zany acting maniac in action
A brainiac in fact son, you mainly lack attraction
You look insanely whack when just a fraction of my tracks run
My rhyming skills got you climbing hills
</div>
Вы можете обернуть в такой div всё что находится между тегами <body> и</body>, если хотите чтобы все английские слова страницы при нажатии показывали окно с переводом. Или же сделайте это выборочно только в тех местах, где должен появляться словарь Puzzle English.
Для сайтов партнеров добавлен выбор блоков в балуне -видео, текстовые фразы и выражения и блок с формами слов. Если не прописать эти 3 переменных, то по умолчанию эти блоки выключены:
balloon_video: true, balloon_phrases: true, balloon_form_words: true
в PE_Balloon.init({wrap_words : true, id_user: 1263499, our_helper:true, balloon_video: true, balloon_phrases: true, balloon_form_words: true});
Где balloon_video – блок с видео, если false, то выключен
balloon_phrases – блок с текстовыми фразами и выражениями (false – выключить)
balloon_form_words – блок с формами слова (false – выключить)