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

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

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

спойлер для wordpress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 и прописываем такой код:

.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 этап. Вставляем спойлер в блог и проверяем его работоспособность.

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

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

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

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

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

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

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

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

46 комментариев

  1. Андрей:

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

    Ответить
    • Андрей Назыров:

      Я если честно тоже только осваиваю 🙂

      Ответить
  2. Попробую на досуге спойлер у себя в блоге сделать. 🙂

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

    Ответить
    • Андрей Назыров:

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

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

    Ответить
  5. А еще лучше подпишусь на весь блог, так оно вернее будет =)

    Ответить
    • Андрей Назыров:

      Это точно 😉

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

    Ответить
    • Андрей Назыров:

      Всегда пожалуйста 🙂

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

    Ответить
    • Андрей Назыров:

      🙂

      Ответить
  8. Андрей смотрю новый дизайн? Или мне кажется?

    Ответить
    • Андрей Назыров:

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

      Ответить
  9. Получилось классно! Выглядит профессионально вполне.

    Ответить
    • Андрей Назыров:

      Спасибо, я старался 🙂

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

    Ответить
    • Андрей Назыров:

      Пожалуйста 🙂

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

    Ответить
    • Андрей Назыров:

      Спасибо, стараюсь 🙂

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

    Ответить
    • Андрей Назыров:

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

      Ответить
  13. Александр Каратаев:

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

    Ответить
    • Андрей Назыров:

      Да, идея отличная. Надо попробовать как-нибудь 🙂

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

    Ответить
    • Андрей Назыров:

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

      Ответить
  15. Прочитала еще раз пост о том, как сделать на блоге спойлер. Если задумаю, то буду знать, к кому обращаться.
    Вообще смотрится очень красиво и компактно так вся информация нужная в одном месте. мне понравилось, Андрей, как у тебя страничка о себе оформлена.
    А вот кнопочки соц. сетей не вижу, или тоже переделываешь их?

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

      Ответить
      • Александр Каратаев:

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

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

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

    Ответить
    • Можно кнопку вставлять плагин есть и руками вставляются кнопки так-же.

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

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

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

  18. Я на тестовом домене проверял на другом шаблоне работает. Просто скрипт конфликтует с другим скриптом скорее всего. Его надо попробовать зарегистрировать. Ну да ладно, я уже другой прикрутил.
    А насчет адаптивных шаблонов, может слышал, что Гугл в середине декабря в выдаче повесит на все адаптированные под мобилы сайты сниппеты.
    Будет ли это влиять на выдачу неизвестно, но факт есть факт. Они даже свой сервис по проверке запустили. Так что всем придется либо резину ставить, либо плагины.
    А ты хочешь этот шаблон перепилить?

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

      Ответить
  19. Ну, я видел твой сайт на Galaxi, как надо смотрится.

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

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

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

  20. Александр Каратаев:

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

    Ответить
    • Спасибо, Александр!
      Всегда найдется что спрятать 🙂 не сейчас, так в будущем.

      Ответить
  21. Андрей, здравствуй! Как-то сразу попала на эту страничку. Вижу, что и коды css и скрипты упоминаются, значит все таки изучал купленные книжки!! Андрей, поясни , где у тебя спойлер? Первый раз встретила это слово, погуглила, но там нашла, что это от слова портить, преждевременно раскрытие сюжета?? Вот думаю и зачем тогда этот спойлер красиво оформлять?

    Ответить
    • Здравствуйте,Софья.На этом шаблоне я не делал спойлер, он у меня был на предыдущем. Пример такого спойлера можете увидеть здесь

      Ответить

Добавить комментарий

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