Nazyrov.ru » » Как сделать красивый спойлер для своего блога на WordPress?

Как сделать красивый спойлер для своего блога на WordPress?

спойлер для wordpress

Привет всем читателям моего блога и просто гостям! С вами как всегда Андрей Назыров. В этом посте я расскажу вам, как сделать красивый спойлер для WordPress блога без каких-либо плагинов, но для начала давайте поведаю вам некоторые планы блога.

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

Что это значит? Вот, например,  я начал использовать спойлер для своего блога. Разумеется, я когда-то тоже этого не умел, но научившись, и использовав его на практике, написал об этом статью.

Во вторых, я решил, наконец, начать продвигать блог статьями и постовыми. Для начала начну покупку постовых в Ротапост. Что это за сервис, и как покупать там постовые я писал в статье «Где купить постовой?».

В третьих как это ни печально, буду немного реже писать в блог, но не реже одного поста в пять дней. Буду нажимать на качество, а не на количество.

На этом закончу с новостями, и вернемся к основной теме поста – как сделать красивый спойлер?

Как сделать красивый спойлер для блога?

Я думаю что спойлер нужен любому блогу. Он не только экономит место и прекрасно вписывается в дизайн, но и значительно упрощает чтение блога.

Кто не знает что такое спойлер для блога, вот вам пример:

Заголовок спойлера
Текст под спойлером

Спойлер можно сделать под любой дизайн. Вы можете сделать фон спойлера и рамку любого цвета. Как это сделать, я вам сейчас все объясню.

В первую очередь сделайте резервную копию своего блога, чтобы случайно не испортить отображение статей.

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

Итак, резервная копия сделана, теперь приступаем к созданию спойлера для блога.

1 этап. Проверьте, имеется ли подключение вашего блога к библиотеке jQuery. Для этого открывайте поочередно файлы footer.php, header.php, index.php и function.php. Если подключение имеется, то в одном из этих файлов должно быть упоминание о файле  jquery.min.js.

Если упоминание об этом файле имеется, отлично, можете пропустить этот этап. Если такового файла нет, то вам нужно добавить код в файл footer.php перед тегом </body>. Добавлять нужно вот такой код:

1
<script type="text/javascript" src="//http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

2 этап. В файл footer.php перед закрывающимся тегом </body> вставляем код. Отвечающий за работоспособность спойлера:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(".closed").toggleClass("show");
 
$(".title").click(function(){
 $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium");
 if ($(this).parent().hasClass("show"))
 $(this).children(".title_h3").css("background","rgb(253, 253, 253)");
 else $(this).children(".title_h3").css("background","rgb(240, 238, 238)");
});
</script>

3 этап. Прописываем стили css, чтобы наш спойлер выглядел красиво. Для этого заходим в файл style.css и прописываем такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.spoiler {
 overflow: hidden;
 margin-bottom: 20px;
 margin-top: 20px;
 border: 1px solid #dfdfdf;
 border-left: 2px solid цвет рамки;
 box-shadow: 0 0 9px #dddddd inset;
}
 
.title_h3 {
 cursor:pointer;
 font-size: 14px;
 background: rgb(цвет фона заголовка);
 margin: 0 -10px 0 -10px;
 padding: 10px;
 padding-left: 30px;
 -moz-box-shadow: 0 0 9px #dddddd inset;
 box-shadow: 0 0 9px #dddddd inset;
}
 
.closed .contents { display:none; }
.closed h3 { background: #bbbbbb; }
.contents { padding: 10px; }

В коде измените надписи «цвет рамки» и «цвет фона заголовка» на желаемые цвета. У меня к примеру цвет рамки — #026194, а цвет заголовка — (253, 253, 253)).

4 этап. Вставляем спойлер в блог и проверяем его работоспособность.

Для этого вставьте код спойлера на страницу какой-нибудь статьи:

1
2
3
<div class="spoiler closed">
<div class="title"><div class="title_h3"><strong>Заголовок спойлера</strong></div></div>
<div class="contents">Текст под спойлером</div></div>

Вот и все, спойлер работает. Теперь, чтобы сделать спойлер на блоге, вам достаточно вставить код спойлера, написать его заголовок и добавить текст.

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

Этот способ создания спойлера для блога хорош тем. Что вам не нужно устанавливать плагин, который бы занимал драгоценное место на блоге и грузил блог, снижая скорость его загрузки.

Понравилась статья? Поделись с другими, нажав на любую кнопку ниже.

А вы используете спойлер для блога?

Как вам статья?
Полная ерундаНичего интересногоТак себеХорошоОтлично (Голосов нет. Стать первым.)
Loading...Loading...

Понравилась статья? Поделись с другими, нажав на одну из кнопок.


Комментариев 44 на “Как сделать красивый спойлер для своего блога на WordPress?

  1. Да интересно, но я с кодами пока не очень. Зато сегодня написал о том, как украсить статьи на блоге. Правда при помощи плагина ;-)

  2. Андрей, я вчера как раз об этом думала, давно хотела сделать себе на блог. А тут смотрю у Вас статья как раз вышла. Теперь уж точно сделаю, только вот с кодами страшновато :grin:

    • Татьяна, волков бояться в лес не ходить :) Когда-то же надо начинать.

  3. Прикольно! Молодец, Андрей. Я внес в закладки и буду использовать в будущих статьях =)

  4. Блин, прикольная статья. Я как уже многократно говорил, что каждый день нужно делать что-то для своего блога, вот сегодня сделают страницу 404 и такой спойлер. Спс, Андрей, как всегда полезно.

  5. Полезная статья! Если понадобится спойлер для блога или даже для поста, воспользуюсь этим постом) ;-)

    • Да, Дим. Поменял немного. Сначала хотел воспользоваться услугами фрилансера, но дороговато выходит, пока не по карману. Решил своими силами немного изменить. Не шедевр конечно, но вроде нормально получилось или нет?

  6. Отличный спойлер получился. Я искал одно время, но уже использую другую реализацию.

    А эта может на свежем проекте пригодится, очень приятно смотрится. Спасибо.

  7. Спасибо, Андрей — очень полезная информация. Всё хочу попробовать сделать спойлер, но потом забываю, что хотела=))) Вот, опять знак свыше=))) Всё таки, смотрю на шаблон от Борисова и поражаюсь, как вы все его красиво видоизменяете под себя! :)

  8. Увы, у меня не сработал код.

    Я сначала подумал, что дело в лишних // в адресе библиотеки jQuery, но нет, видимо в чем-то другом. Спойлер не открывается, а жаль.

    • Скорее всего дело в скрипте который и отвечает за работоспособность спойлера. Спойлер работает 100 % результат вы же видите на странице.

  9. Идея отличная. А еще в файл function.php добавить маленькую функцию и такой спойлер можно будет вызывать просто вставкой шорткода в статью. Пареметром туда может передаваться нужный заголовок спойлера. Надо будет как-нибудь заняться...

  10. Идея для блога хорошая. Но я тоже боюсь с кодами работать. Не хочется в них копаться совсем.

  11. Прочитала еще раз пост о том, как сделать на блоге спойлер. Если задумаю, то буду знать, к кому обращаться.

    Вообще смотрится очень красиво и компактно так вся информация нужная в одном месте. мне понравилось, Андрей, как у тебя страничка о себе оформлена.

    А вот кнопочки соц. сетей не вижу, или тоже переделываешь их?

    • Кнопки сделаю в форме подписки, там сейчас только Google +

      Еще хочу сделать форму подписки под каждой статьей + соц кнопки

      • Еще хочу сделать форму подписки под каждой статьей + соц кнопки

        Это, кстати, очень полезно. Я такое у себя делал...

  12. Еще бы кнопочку в редакторе для вставки спойлера этого. Выделил нужный текст, нажал кнопочку, ввел заголовок и опа — текст под спойлером. :)

  13. Здравствуй, Андрей. Вот смотрел спойлер без плагина. Твой понравился плавной прокруткой вниз. Но увы, на мою тему не идет что-то. Про дублирование библиотек скриптов я вкурсе. Пробовал скрипт в Header подключать, то-же не открывается. Сейчас проверю на другом шаблоне. Результат сообщу )))

    • Увы не работает. Ну и ладно. Я кстати то-же обновился. Перешел на адаптивный шаблон. Теперь вот настраиваю. А то Яша ругался на меня, говорил что плохо на мобилах видно сайт.

      • Значит шаблон такой :( у меня на одном сайте, тоже не заработал, на этом же работает прекрасно.

        Адаптивный шаблон это хорошо. У меня тоже на мобилах коряво все отображалось. Я пока установил плагин WPtouch Mobile Plugin. Чуть позже буду заказывать у фрилансеров кроссбраузерность и адаптацию шаблона под мобилу.

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

    А насчет адаптивных шаблонов, может слышал, что Гугл в середине декабря в выдаче повесит на все адаптированные под мобилы сайты сниппеты.

    Будет ли это влиять на выдачу неизвестно, но факт есть факт. Они даже свой сервис по проверке запустили. Так что всем придется либо резину ставить, либо плагины.

    А ты хочешь этот шаблон перепилить?

    • Да, я слышал про гугл. Думаю это определенно повлияет на выдачу. Я уже попробовал воспользоваться их сервисом, мой блог подходит. Спасибо плагину! :)

    • Смотриться вроде нормально, но неслабо нагружает блог. Поэтому и хочу со временем сделать шаблон адаптивным и отказаться от плагина.

      • А я решил вопрос кардинально. Тупо поменял шаблон. У меня пока записей немного, так-что кое где поправил форматирование. И некоторые функции переносил, которые вручную дополнял. Короче убил один день на все. Так по мелочам осталось, кое-где перевод поправить А если ты будешь этот шаблон править, то по моему (лично мое мнение) править, хуже, чем новый ставить шаблон. Там за одно потянешь, другое вылезет. Переписывать много нужно. Если найти толкового верстака, иначе нервоз.

        А посетители уже привыкли, да и сам. Как быть? Заказывать, точную копию дизайна, только адаптированную, а потом все проверять на работоспособность, так лучше всего, наверное.

        • Просто я уже не раз менял шаблон, наконец нашел, тот, который меня устраивает во всем, ну или почти во всем :)

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

  15. Понравилось, как сделана подсветка автора комментария. Красиво.

    А насчёт спойлера — пробовал использовать и кодом, и плагином, всё работает, но оказалось невостребованным. И хотел-бы спрятать что-нибудь, да нечего... :)

    • Спасибо, Александр!

      Всегда найдется что спрятать :) не сейчас, так в будущем.

Добавить комментарий для Юрий Ваценко Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Юрий Ваценко