Блок цитат на Wordpress | Заметки вебмастера






Красивый блок цитат в статьях на WordPress

цитаты в статьяхПриветствую друзья! На связи снова Сергей Саранчин.

Сегодня я хотел бы вам рассказать о том, как сделать блок цитат в своих статьях на блоге или сайте.

Мне этот вопрос однажды задавала одна девушка в комментариях: «Сергей, как же сделать блок цитат, такой же как у вас, такой красивый?»

И я вот решил написать статью о том как же добавить такой блок цитат.

Как он вообще выглядит Вы можете увидеть в предыдущих статьях. Он оформлен с помощью специальных стилей.

Как сделать блок цитат?

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

Для начала переходим в админку (в административную панель своего блога) и открываем любую статью. Заходим в неё, открывая при этом вкладку «Визуально». Прежде чем редактировать блок цитат, необходимо знать, как его добавлять в свои статьи.

Сделать это очень просто. Необходимо выделить определенную область, какую вы хотите включить в цитату, и нажать кнопку «Цитата» на панели редактирования статей:

кнопка добавления цитаты

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

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

Нажимаете на файл style.php и находите стили блока цитат. Для того чтобы найти этот стиль, нажимаете ctrl+F и в открывшемся окошке вписываете название стиля. Называется он «blockquote».

Если Вы хотите такой же стиль блока цитат, то можете скопировать такой же код, как и у меня:

 blockquote {
 background:#F3F3F6;
 overflow: hidden;
 box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
 padding-left: 25px;
 padding-right: 30px;
 font-style: italic;
 font-family: Arial;
 font-size: 15px;
 color: #424177;
 border-left: 2px solid #7D76FA;
 }

Разместите его вместо своего стандартного кода в WordPress и ваш блок цитат будет оформлен также, как у меня. Что здесь есть, в этих стилях?

Background — заливка самого блока

Overflow – фиксация содержания в блоке цитат

Box-shadow — тень, которая имеется снизу и сбоку.

Padding left, padding right — отступ слева и справа

Font-style — тип шрифта для текста

Font-size — размер шрифта

Color — цвет шрифта

Border left — левая граница.

Вот такой код. Этот код вы можете скопировать и вставить между двумя фигурными скобками (смотрите видео). После вставки, нажимаете на кнопку «Обновить файл».

После обновления файла, ваш блок цитат будет выглядеть красиво.

В принципе все. Если остались какие-то вопросы, задавайте, буду рад на них ответить. А я прощаюсь с вами, до новых встреч. Увидимся в новых видео обзорах и статьях. Удачи.

И напоследок видео для лчшего понимания информации:

Успехов Вам и Удачи
С Уважением,


Книга о заработке в интернете:
Книга о заработке в интернете

Комментариев к статье: 18

  1. Валентин:

    Сергей, привет. Насчет цитат можно было бы добавить еще псевдокласс before, для добавления картинки в блок, а так по делу все. Предлагаю тебе поучавствовать в конкурсе на блоге в последней статье.

    Ответить

    • Сергей Саранчин:

      Привет, Валентин. Рад тебя видеть!
      Благодарю за уместное дополнение. Сейчас посмотрю что за конкурс. :smile:

      Ответить

  2. Дмитрий:

    На своём блоге я заказывал дизайн и верстку, но у меня есть еще пара контентников на вордпрессе, которым оформление цитат не помешало бы. Поставлю на них)

    Ответить

    • Сергей Саранчин:

      Конечно поставьте, Дмитрий. Лишним точно не будет)

      Ответить

  3. Надежда Суптеля:

    Сережа, приветствую! Огромное Тебе спасибо за красивый блок для цитат. Я немного по другому сделала, хотела под цвет своего шаблона, но решила воспользоваться твоим блоком. Спасибо Огромное и прими мои поздравления с ТИЦ 10. С меня Яша снял почему — то 10-ку, теперь у меня ТИЦ 10. Был ТИЦ 20.

    Мне почистили блог и нашли много *орнушек, видимо Яша терпел до поры до времени и не выдержал — снял как раз в день пересмотра ТИЦ. А может потому, что ребята во время работы деактивировали плагин перелинковки. Не знаю, но что характерно, в индекс стабильно добавляет статьи.

    Ответить

    • Сергей Саранчин:

      Привет, Надя!
      Благодарю за развёрнутый комментарий! :oops:
      Очень рад, чо своей статьёй помог тебе решить данную проблему!
      Спасибо за поздравление с десяточкой, но дело в том, что у меня уже давно она была, только недавно Яндекс отнял её и я не понял за что. Вот опять вернул на место! Чудеса какие-то…
      Я не совсем понял, что Яндекс нашёл на твоём сайте)) :smile:

      Ответить

      • Надежда Суптеля:

        Сережа, привет! У меня чистили блог и нашли видимо перенаправления в файлах на сайты… где виртуальная любовь -*орно. Видимо, он терпел, а тут выдача — переоценка веса и всех показателей и он снизил с 20 на 10. Он же все просекает наш Яша. Это мелочи)

        Ответить

        • Сергей Саранчин:

          Ах, вот как, понятно. Да, Яшка не дремлет))
          Виртуальная любовь))) Яша уличил Вас в этом, Надежда, и ему не понравилось :cry:

          Ответить

          • Надежда Суптеля:

            Ну да. Хорошо, что парни вычистили все, а то ведь мог и в вирусные загнать или вообще обнулить ТИЦ. Яшка все может — барин)))

            Ответить

          • Сергей Саранчин:

            Ага, барин-боярин)))

            Ответить

  4. Надежда Суптеля:

    Наверное рано я обрадовалась Сережа твоему коду) Здесь такое у меня все мудреное — подумаю, чтоб не накосячить.

    Ответить

    • Сергей Саранчин:

      Думаю, что разберёшься :oops: Если что спрашивай!

      Ответить

      • Надежда Суптеля:

        Разберусь попозже, у меня в шаблоне неплохой код под цвет шаблона сделан, я там увеличу буквы. Сделаю. Времени сейчас лишнего… хватает. Нам наконец выбили техническую воду и вода будет теперь целыми днями, а не по выдаче — 2 часа утром, 2 часа вечером. Скорей в Нижний Новгород переехать)

        Ответить

        • Сергей Саранчин:

          Надежда, передавайте привет Нижнему…Не был там уже 6 лет с 2010 года…Надо бы навестить крёстную :smile:

          Ответить

          • Надежда Суптеля:

            Сережа, дом продается, дай Бог скорее, обязательно передам привет. Сделаю статью потом про свой Нижний.

            Ответить

          • Сергей Саранчин:

            Понятно. Желаю поскорее найти покупателей на дом. Обязательно прочитаю статью о Нижнем с превеликим удовольствием! И конечно же с комментом от себя :smile:

            Ответить

          • Надежда Суптеля:

            Ладушки, договорились. Пока пока, пошла по своим делам.

            Ответить

          • Сергей Саранчин:

            Окей, успехов в делах :oops:

            Ответить


НАПИШИТЕ СВОЙ ПЕРВЫЙ КОММЕНТАРИЙ НА ЭТОМ БЛОГЕ И ПОЛУЧИТЕ ПОДАРКИ!

Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: