Как сделать красивый спойлер для своего блога на 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>

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

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

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

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

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

Поделись информацией:
Помогла статья? Оцените её
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Оценок: 1
Загрузка...

Подписка на рассылку

Комментарии
  1. Андрей

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

    • Андрей Назыров

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

  2. AndreyShaD

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

  3. Татьяна

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

    • Андрей Назыров

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

  4. Даниил Привольнов

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

  5. Даниил Привольнов

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

    • Андрей Назыров

      Это точно 😉

  6. Юрий Ваценко

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

    • Андрей Назыров

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

      • Юрий Ваценко

        Сегодня приступлю к созданию спойлеров у себя на блоге. 😉

      • Андрей Назыров

        🙂 Вечерком загляну

  7. Bikersky

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

    • Андрей Назыров

      🙂

  8. Дмитрий

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

    • Андрей Назыров

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

  9. Дмитрий

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

    • Андрей Назыров

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

  10. Pasagir

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

    • Андрей Назыров

      Пожалуйста 🙂

  11. Лара

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

    • Андрей Назыров

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

  12. Сергей

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

    • Андрей Назыров

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

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

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

    • Андрей Назыров

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

  14. Ольга Андреева

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

    • Андрей Назыров

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

  15. Ольга Андреева

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

    • Андрей Назыров

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

      • Александр Каратаев

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

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

  16. Денис Иванов

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

    • Егор

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

  17. Егор

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

    • Егор

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

      • Андрей Назыров

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

  18. Егор

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

    • Андрей Назыров

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

  19. Егор

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

    • Андрей Назыров

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

      • Егор

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

      • Андрей Назыров

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

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

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

    • Андрей Назыров

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

  21. Софья

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

    • Андрей Назыров

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

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