Как подключить javascript в wordpress

Здесь я опишу те методы и способы подключения скриптов javascript, которые сам использую.

Скачать исходники для статьи можно ниже

Порой подключить (правильно вставить) javascript достаточно трудно и приходится перебирать все возможные способы его подключения, некоторые из методов могут не пригодится в одних ситуациях, однако сработать в других.

Также еще одна проблема, с которой сталкивается вебмастер – это то, что браузеры написаны на разных движках и соответственно обработку разных вещей (в том числе и javascript) делают по разному.

Например, можно почитать интересную тему на форуме про отличия в обработке скриптов (javascript) в Firefox (ФФ) и Internet Explorer (IE):

http://forum.spravkaweb.ru/index.php?/topic/4244-%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%B8%D1%8F-%D0%B2-%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B0%D1%85-%D0%B4%D0%BB%D1%8F-firefox-%D0%B8-ie/

Пожалуй приведу цитату из данной темы:

“…
Работает и там и там. Естественно, в ФФ не работает фильтр alpha.
Правильнее говорить о том что стандарты написаны для всех кроме мелкомягких:
document.all – приблуда IE. Её в стандарте нет!(хотя Opera и firefox, в зависимости от версии всё же включают её), вместо этого в стандарте document.getElementById
posTop в CSS тоже нет! Есть top, его понимают все браузеры.
Одна особенность, незнаю как в стандарте, но в IE cover по умолчанию поверх text, а в ФФ наоборот. z-index и там и там это разрулит.
Ещё top – это текст! Вида “[0-9]+px”, перед тем как с ним выполнять арифметические операции его нужно парсить. IE прощает, ФФ нет.
…”

Перейдем непосредственно к способам подключения скриптов.

1. Подключить javascript через произвольные поля.

Как применять данный способ можно ознакомится в моей предыдущей статье: Подключаем javascript с помощью произвольных полей.

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

2. Подключение javascript через индивидуальный шаблон.

Как применять данный способ можно ознакомится в моей предыдущей статье: Подключаем javascript
с помощью индивидуального шаблона.

Данный способ, по-моему мнению, более гибок, чем предыдущий, тем более позволяет создать страницу полностью на javascript.

3. Можно подключить javascript через HTML вкладку страницы или записи.

Данный способ не всегда срабатывает, так как движок wordpress иногда ломает скрипт, например добавляя в него свои теги редактирования.

Пример использования данного метода можно прочитать в моих предыдущих статьях:

При этом в данном способе подключить javascript можно как для всего сайта (для этого придется отредактировать файл page.php), так и непосредственно для определенной странички или записи вашего сайта (достаточно вставить объявление скрипта и сам скрипт во вкладке HTML в редакторе странички или записи). Первый вариант будет сильнее нагружать ваш сайт, так как скрипт будет подгружаться при просмотре любой из ваших страничек или записей, даже если в них не используется данный скрипт.

4. Для подключения javascript можно использовать специальные плагины WordPress.

Наиболее популярные из них:

– Allow Javascript in Posts and Pages – про него можете прочитать тут:

http://www.wordpressplugins.ru/posts/allow-javascript-in-posts-and-pages.html

– Inline Javascript Plugin коротко о нем можно прочитать тут:

http://vladtimoshenko.com/kak-vstavit-javascript-v-html-stranicu-na-wordpress/

Есть и другие.

5. И последний способ, который хотелось бы рассмотреть в данной статье – это не пытаться вставить javascript , позволяющий например воссоздать какой-то красивый эффект, а найти плагин, по установки и активизации которого данный эффект сам появится на вашем сайте.

Обычно плагины пишут для создания одного конкретного эффекта.

Плагины разработали как раз, чтобы облегчить жизнь новичкам – установил плагин, активизировал, возможно произвел простенькие настройки через панель управления и все – у тебя все работает!

Например, нашли мы в интернете javascript подающих листьев или снежинок, но он не работает на сайте (то ли ошибки в самом скрипте, то ли написан он под IE (Internet Explorer).

Что нам нужно сделать?

Для начала просто вбиваем запрос в поисковик: “плагин wordpress падающие листья” и смотрим результаты.

Не нашли не беда – переводим русское слова на английский язык (с помощью переводчиков от Google или Яндекс) и вводим его на официальном сайте wordpress (wordpress.org).

Пример: “падающие листья”

На английском их перевод будет выглядеть следующим способом: “falling leaves”.

Теперь заходим на сайт wordpress в раздел плагины, ссылка:

http://wordpress.org/extend/plugins/

и вбиваем в строку поиска falling leaves и смотрим результаты:

Он сразу же находит нужный нам плагин – WordPress Falling Leaves Plugin:

http://wordpress.org/extend/plugins/wordpress-falling-leaves/

Если же и на wordpress.org вы не смогли обнаружить нужный вам плагин, то откройте поисковик Google и вбейте следующий запрос: wordpres plugin falling leaves.

На англоязычных сайтах уж точно найдете нужный вам плагин!
PS: Советую также прочитать статью о том как добавить JavaScript и CSS в тему или плагин:
http://wordpresso.org/tutorials/kak-dobavit-javascript-i-css-v-wordpress-temu-ili-plagin/