Создание страницы (записи) в wordpress с подключением jQuery - Личный сайт Рогова Андрея: информатика, программирование и робототехника

Итак, предположим, Вы хотите на своем блоге использовать jQuery. Сделать это довольно просто. Разберем на примере использования спойлера на jQuery отсюда.

Для того, чтобы использовать собственные стили (часто требуется при использовании jQury), их необходимо дописать в файл style.css (В админке: Внешний вид – Редактор – Список стилей (style.css))

Для спойлера, это будет стиль

.splCont {display:none; padding:5px 15px; border:2px solid#FF3300;}

Далее, необходимо подключить саму библиотеку jQuery. Для этого все в том же редакторе необходимо изменить файл header.php.

Если вы собираетесь хранить файл jQuery на сервере своего сайта, в него необходимо добавить примерно следующую строку:

<script type="text/javascript" src="/js/jquery.min.js"></script>

При этом необходимо сам файл скачать с сайта http://jquery.com/ и разместить у себя на сервере, в соответствующем каталоге.

Я предлагаю другой вариант, просто сослаться на данный файл на сервере источника. Для этого добавляется другая строка

В случае создания спойлера, в файл header.php необходимо добавить еще один скрипт:

<script type="text/javascript">

$(document).ready(function(){

$('.splLink').click(function(){

$(this).parent().children('div.splCont').toggle('normal');

return false;

});

</script>

Теперь, когда вся информация внесена в файл header.php, код спойлера можно применять как на новых создаваемых страницах и записях, так и на уже существующих, поскольку заголовок (header) у них у всех один и тот-же.

Чтобы использовать спойлер, необходимо при создании записи (страницы) указать код

<div><a href="">Ссылка для скрытия/отображения текста</a>
<div>
    Тут находится ваш контент, который планируется прятать под спойлер.
</div>
</div>

Изменив его под себя. результат использования данной вещи у меня на сайте можно увидеть на странице портфолио.

ОтветитьОтменить ответ