Здравствуйте, уважаемые блоговоды! В сегодняшнем посте я хочу поделиться с Вами небольшой фишкой, которую активно использовал в некоторых уроках, а именно «заставлял» работать 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
Идем далее. Теперь разберемся с тем, как продемонстрировать сторонние 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 в некоторых постах блога!
А почему, интересно, у тебя стили отказывались работать из основного файла? Просто @import — очень тормозная штука. Обычно простой !important помогает.
Ничего не отказывалось работать! Тут основной файл стилей ни при чем вообще! Объясню простым языком: я написал пост, в котором хочу продемонстрировать, допустим, прозрачность картинки. Прозрачность (opacity) у меня при этом не прописана в основном файле CSS. Я создаю новый отдельный файл стилей, например 01.css, где прописываю стили именно для этой картинки (ведь демонстрировать ее прозрачность я буду только в этом посте):
.img1 {
opacity:0.4;
filter:alpha(opacity=40);
}
.img1:hover {
opacity:1;
filter:alpha(opacity=100);
}
[/source]
А в самом посте подключаю этот самый файл через @import и далее прописываю вот такой код для прозрачности картинки:
<img class="img1" src="путь к изображению" />
[/source]
Делая таким образом код компактнее.
А, все, сразу что-то не поняла)) Да, действительно, хорошее решение, удобное.
Виноват я. Написал непонятным языком наверное