Как заставить работать сторонний JavaScript на странице блога WordPress?

Здравствуйте, уважаемые блоговоды! В сегодняшнем посте я хочу поделиться с Вами небольшой фишкой, которую активно использовал в некоторых уроках, а именно «заставлял» работать javascript-коды, а также некоторые коды css.

Особенно актуальной информация будет для тех, кто ведет блог о создании сайтов, используя в них примеры различных скриптов. Подойдет не только для WordPress, но и для других систем управления контентом.

Существует вариант вывода javascript, да и любого кода с помощью произвольных полей, однако таким способом отобразить скрипт в работе можно будет только в шаблоне блога, изменив php-код его файлов. Нам же нужно, чтобы скрипт работал прямо на странице/в записи блога.

Также я находил пример использования JavaScript в записях блога в кодексе WordPress (на английском), однако и такой вариант меня тоже не устроил.

JavaScript WordPress

Первый и самый простой способ — вынести скрипт на отдельную html-страницу и поставить на нее ссылку вида «Демо».
При создании самой страницы не забываем указывать кодировку UTF-8 (без BOM), потому что если на странице есть русские буквы, они будут отображаться кракозябрами!

Способ второй — использование фреймов (iframe).

Точно также создаем html-страницу, запихиваем в нее скрипт-код, а на странице/в записи блога добавляем iframe.
Код iframe:

1

<iframe src="адрес html-страницы" height="180" width="400" frameborder="0" scrolling="no"></iframe>

Ничего сложного нет! Просто указываете ширину и высоту фрейма и отключаете полосу прокрутки с помощью scrolling=»no».

Приведу несколько примеров iframe, которые использованы в некоторых записях моего блога:

Карусель из нескольких изображений

Скрипт увеличения изображений TjpZoom

Изменение background color с помощью HTML

Выпадающее меню на HTML

Идем далее. Теперь разберемся с тем, как продемонстрировать сторонние css-стили, которых нет в файле style.css шаблона блога.

Такой прием я использовал тогда, когда прописывание стилей непосредственно в самом html-коде не давало никаких результатов.

В таком случае я создавал отдельный файл *.css, где прописывал все стили, а на странице поста использовал код подключения (импорта) в режиме html:

1
2
3

<style type="text/css">
@import 'путь к файлу стилей css';
</style>

Еще один вариант — прописывание стилей прямо в тексте поста (тоже в режиме html), например вот так:

1
2
3
4
5
6
7
8
9

<style type="text/css">
 .img1 { 
  opacity:0.4;
  filter:alpha(opacity=40);
}
 .img1:hover {
  opacity:1;
  filter:alpha(opacity=100);
}</style>

Но первый вариант мне больше нравится, поскольку все стили прописаны в стороннем файле, и не нужно засорять пост дополнительными стилями.

Примеры работы данного метода:

Как придать прозрачность css-элементу на сайте:

Придаем объемности любому элементу на сайте с помощью CSS3:

Кнопка

Вот такими вот хитростями мне приходится иногда пользоваться при демонстрации работы скриптов и CSS в некоторых постах блога!