Новости

WordPress: Вставка javascript в запис або сторінку

  1. Вставка javascript-коду в <head>
  2. Вставка javascript-коду в текст запису / сторінки

Додавання записів і сторінок в вордпресу не викликає особливих труднощів і не вимагає специфічних знань. У цьому заслуга досить простих і в той же час зручних текстових редакторів. Однак є в них одна вкрай неприємна особливість: з метою безпеки вони перекодують лапки «» та інші використовувані в скриптах знаки в спеціальні html-символи, що призводить до непрацездатності вставляються java-скриптів. Та й у випадках, коли ці символи залишаються на місці, скрипти все одно дивним чином відмовляються працювати. Від цього не рятує і перемикання редактора в режим тексту (HTML). Загалом, впровадження javascript до себе на сторінку / запис та ще морока. Але що ж робити, коли той чи інший скрипт вкрай необхідний на даній сторінці, а домогтися його коректної вставки на сторінку не виходить? Доведеться придумувати обхідні шляхи і трохи змінювати код використовуваної вами теми оформлення.

Найпростіший і, напевно, очевидний спосіб додавання javascript на сайт - додати його в хедер (header.php) або футер (footer.php) нашої теми оформлення через редактор тем. Але як правило специфічні скрипти нам потрібні на певній сторінці або в певному місці в тексті записи. Тому даний варіант підходить тільки для скриптів, які працюють на всьому сайті. У нашому ж випадку ідеальним був би варіант додавання необхідного коду в якусь певну область в редакторі сторінки / запису, і щоб потім цей код виводився в певному місці на сторінці.

Тут ми стикаємося з двома варіантами розвитку подій, які визначаються умовами роботи скрипта. Для прикладу візьму будь-таймер (нехай буде один з змінених мною від timergenerator ), А другий, скажімо, скрипт опитування від сервісу UpToLike.ru .

Обмовлюся заздалегідь, що в обох випадках будуть використовуватися стандартні вордпресовскіе довільні поля. Якщо у вас вони не відображаються при редагуванні сторінки / записи, то їх необхідно включити. Натискаєте «Налаштування екрану» в правому верхньому кутку сторінки і в виїхати віконці ставите галочку біля «Довільні поля».

Вставка javascript-коду в <head>

У випадку з таймером, скрипт повинен перебувати в Хеде сайту, а місце відображення таймера визначається невидимим блоком <div> з заданим класом. Тому висновок коду скрипта, розміщеного в довільному полі, ми повинні здійснити в «голові» сайту (а сам невидимий блок вставлятиметься в текстовому редакторі (вкладка Текст) у вигляді звичайного html-коду). Для початку необхідно створити довільне поле, де ми будемо розміщувати наш javascript-код. У перший раз необхідно скористатись лінком «Введіть нове» в області довільних полів.

Наступного разу на новій сторінці це поле вже буде в списку і вам необхідно вибрати його звідти. Тобто один раз вставивши своєрідне заслання на це поле в хедер, ми можемо задавати різні коди для цього поля на різних сторінках, і він буде виводиться в потрібному місці.

Після того, як ви задали нове ім'я поля або вибрали вже готове зі списку, а також додали абсолютно будь-який текст в поле праворуч «Значення», натискаєте кнопку «Додати довільне поле», і воно переміщується вгору, де значення можна буде змінити. Як ви вже зрозуміли, код яваскрипт необхідно буде вставляти саме в поле «Значення» навпроти доданого довільного поля.

Припустимо, що ви вже вставили необхідний код в довільне поле і опублікували сторінку / запис. Однак Ваш код ще ніде не виводиться. Щоб це виправити необхідно зайти в редактор тим і вставити перед закриває тегом <head> наступний php-код, який відповідає за виведення вмісту довільного поля:

<? Php echo get_post_meta ($ post-> ID, 'postcode', true); ?>

При цьому замість мого postcode ви повинні ввести назву вашого довільного коду.

Після цього можете повернутися на сторінку, куди ви вставляли ваш яваскрипт-код, і переглянути вихідний код сторінки (поєднання клавіш в браузері як правило ctrl + u). Якщо ви все зробили правильно, то перед закриває хеад повинен стояти ваш доданий на сторінку яваскрипт-код.

При це зазначу, що таким чином можна додавати в «голову» сайту не тільки яваскрипт-код, але і css-код.

Вставка javascript-коду в текст запису / сторінки

Необхідність виведення певного коду в тексті сторінки у мене виникла при вставці скрипта опитування від uptolike.ru в попередній статті. Простий яваскрипт, який вставляється посиланням на сайт, не вимагає особливого шаманства. Він працює і так. А ось коли ми намагаємося вставити код, що складається з декількох рядків, то вордпрес нав'язливо намагається додати туди свої теги розриву рядків або теги абзаців, що повністю виводить вставляється яваскрипт-код з ладу. Щоб обійти це можна використовувати довільні поля, де такого явища не спостерігається і код публікується в його початковому вигляді.

Для виведення коду в тексті сторінки я використовую шорткоди. Це звичайний текст певного виду, який вордпрес замінить на необхідний нам код. З шорткодамі ви можете зіткнутися, якщо використовуєте плагіни вставки аудизаписей або відео на сторінку.

Щоб використовувати шорткод для вставки javascript-коду на сторінку необхідно додати в кінець файлу теми functions.php наступний php-код:

function customscript_shortcode ($ atts, $ text) {global $ post; return get_post_meta ($ post-> ID, $ text, true); } @Add_shortcode ( 'customscript', 'customscript_shortcode');

Потім створюєте довільне поле, як я описав в попередньому пункті і виводите його на сторінці в потрібному місці, використовуючи наступний шорткод:

[Customscript] Ім'я вашого довільного поля [/ customscript]

Надалі вам не потрібно проводити додаткових маніпуляцій. Просто створюєте або вибираєте довільне поле, додаєте його і виводите за допомогою шорткода.


Але що ж робити, коли той чи інший скрипт вкрай необхідний на даній сторінці, а домогтися його коректної вставки на сторінку не виходить?
Php echo get_post_meta ($ post-> ID, 'postcode', true); ?

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: