кнопка наверх

Красивое оформление цитаты css. Плагин WP Note

6a00d834535c6c69e20148c69666f8970c-800wiСегодня я расскажу про оформление цитаты в WordPress разными способами. Посты о дизайне уже были на блоге, читайте, например, как сделать уголок на сайт.
Содержание статьи:

Зачем оформлять цитаты на сайте

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

, нажатием кнопки «цитата» на панели визуального редактора (цитатой станет целиком весь абзац, а не только выделенное слово).

цитата в ворпресс Теперь читателям вашего блога станет понятно, что данный текст вы цитируете. Кроме того, поисковые системы не будут воспринимать этот текст, как не уникальный, потому что это цитата. Информация воспринимается легче, когда она разбита на смысловые блоки, визуально отличающиеся друг от друга. Поэтому очень важно оформить вывод цитаты в WordPress соответствующим образом. Оформление цитаты по умолчанию будет зависеть от того, какую тему вордпресс вы используете. Если у вас рукописная тема, то она может вообще не иметь никакого оформления для цитат. Настроить стилизацию можно двумя способами:

  • Вручную с помощью css-стилей для цитат. При выборе этого способа придется работать с кодом вручную. Вы сможете поэкспериментировать: задавать нужные вам цвета, толщину линий и отступы.
  • Плагин цитат WP-Note для wordpress. Этот способ очень прост, он не требует лезть в код, нужно только установить плагин. Варианты оформления будут предложены стандартные и изменить их вы не сможете.

Оформление стиля цитат вручную, используя css.

Данный метод оформления цитат не требует знания html, делайте все по инструкции и проблем не возникнет.
В этом способе нам придется работать с кодом, а именно с главным стилевым css файлом темы вордпресс. Найти его можно следующими способами:

  1. В админке: Внешний вид » Редактор. Внизу правой колонки находим раздел стили, в нем Таблица стилей (style.css) и открываем.
  2. Зайти по FTP: /wp-content/themes/ваша_тема/style.css. Скачиваем файл на компьютер и открываем.

Теперь воспользовавшись поиском (ctrl+F) найдем тег “blockquote”, если для него уже заданы какие-то правила, можно их удалить и написать свои. Несколько примеров возможного оформления цитаты с помощью css:

1. Цитата CSS с кавычками

цитата1 В этом примере кавычки вставлены не с помощью изображения, а при использовании кода символа «кавычки». Цвет фона можно изменить во второй строке, заменив #E1F5FF на свой цвет.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
blockquote {
background: none repeat scroll 0 0 #E1F5FF;
color: #383838;
font-family: Georgia,serif;
font-size: 18px;
font-style: italic;
line-height: 1.45;
padding: 1.25em 40px;
position: relative;
width: 450px;
}
blockquote:before {
color: #7A7A7A;
content: "\201C";
display: block;
font-size: 80px;
left: -10px;
position: absolute;
top: -10px;
}
blockquote cite {
color: #999999;
display: block;
font-size: 14px;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}

2. Вертикальная линия слева

цитата2

Внешний вид вертикальной линии вы можете изменить. Строка 11 :   Здесь 3px — толщина линии, поставьте любую. Цвет линии задается  кодом #FF9300, его так же можно заменить на другой. Параметр dashed означает пунктир. Попробуйте использовать solid (прямая линия), dotted (точечная), double (двойная). Цвет текста можно изменить в строке номер 10.

1
2
3
4
5
6
7
8
9
10
11
12
13
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.28em 0;
padding: 0.85em 40px;
line-height: 1.45;
position: relative;
color: #c06f00;
border-left:3px dashed #ff9300;
background:#ffe0b6;
}

3. Блок с тенью и закругленными краями

цитата3

1
2
3
4
5
6
7
8
9
10
11
12
blockquote {
background-color: #D4F4EA;
border: 1px solid #00B37C;
border-radius: 6px;
box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.4);
font-family: Georgia,serif;
font-size: 16px;
font-style: italic;
margin: 20px;
padding: 20px 15px;
width: 550px;
}

За закругленные края отвечает стока 4, чем больше значение параметра border-radius, тем сильнее закруглены края. Тень добавляется в строке 5, поэкспериментировав c параметрами, можно добиться различного отображения тени.

Обратите внимание, что если какой-то параметр не работает (например, заданный вами цвет текста не отображается), скорее всего он перекрывается другими стилями. Чтобы это исправить, нужно дописать !important после параметра:

color: #d4f4ea !important;

После внесения изменений не забывайте сбрасывать кэш браузера, чтобы изменения отобразились. Для этого обновляйте страницу клавишами ctrl+F5.

Подобный урок написан по теме «Оформление формы подписки с помощью стилей», возможно вам будет интересно.

Плагин WP-Note для оформления цитат wordpress блога

Следующий способ оформления цитат на блоге вордпресс для тех, кто не хочет лезть в html или css код. Плагин WP-Note очень прост в использовании и он не имеет никаких настроек.

Установка.

Способ первый:

  1. Зайдите в админку блога. «Плагины» -> «Добавить новый»
  2. Скопируйте название «WP-Note» и вставьте в поле раздела «Поиск» и нажмите кнопку «Поиск плагинов»
  3. В открывшемся списке выберите плагин «WP-Note» и нажмите «установить»
  4. Кликните «ок» во вплывающем окне, после чего кнопку «активировать».

Способ второй:

  1. Аналогично сп.1
  2. Скачайте архив с плагином с официального сайта вордпресс по ссылке
  3. В меню плагинов кликните «Загрузить», выберите скачанный ранее файл с компьютера и нажмите «Установить»
  4. Аналогично сп.1

Чтобы начать пользоваться плагином, откройте любую запись на блоге. В данном способе не используется тег blockquote и кнопка “цитата” визуального редактора. Для оформления текста в виде цитаты необходимо заключить его в один из тегов: [note][/note], [help][/help], [tip][/tip], [warning][/warning] или [important][/important]. При этом не нужно открывать исходный код, текст вписывается прямо в визуальном редакторе:

тег для цитат

Теперь подробнее про теги

«Заметка». Заключите текст в теги [note][/note] и вы получите следующее: плагин WP-Note «Помощь». Заключите текст в теги [help][/help] и вы получите следующее:

плагин WP-Note

«Важное». Заключите текст в теги [tip][/tip] и вы получите следующее: плагин WP-Note «Предупреждение». Заключите текст в теги [warning][/warning] и вы получите следующее: плагин WP-Note «Запомни». Заключите текст в теги [important][/important] и вы получите следующее: плагин WP-Note Вот такие пять стандартных вариантов оформления цитаты предлагает данный вордпресс плагин. Css-стили прописаны в файле  /wp-content/plugins/wp-note/style.css (редактируется по ftp). Поэтому при желании можно изменить вывод цитаты wordpress блога на свой вкус.

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


1 звезда2 звезды3 звезды4 звезды5 звезд (6 оценок, среднее: 4,33 из 5)
Загрузка...
like
Понравилось?
Подпишитесь на блог и получайте новые статьи!
Добавляйтесь в соц. сетях:
  1. Людмила:

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

    Ответить
    • Анна:

      Людмила, если для вас первый способ проще, то это прекрасно (думаю, что для большинства проще второй способ). Вы ничего не потеряете, этот способ очень гибкий в настройке, позволяет придать любой вид цитатам.

      Ответить
  2. Константин:

    Давненько не было ничего на блоге, уже думал крест поставили

    Ответить
    • Анна:

      Константин, мы исправимся!) Постараюсь радовать вас статьями почаще.

      Ответить
  3. tav-mgn:

    Огромное спасибо за пост. Особенно за пояснения к строчкам кода. Очень пригодилось. А то на других сайтах картинка-код, картинка-код. Ни пояснений, ничего.

    Ответить
  4. Галина:

    Получилось! Спасибо!

    Обязательно развивайте свой блог-учебное пособие и дальше. У вас дар — очень доступно излагать материал!

    Ответить
  5. Людмила:

    И это верно!

    Зачастую, вэб-мастеру кажется, что всё так предельно понятно и он опускает мелочи и тонкости, а Анна, как учитель в школе:). Спасибо.

    Ответить
  6. Ольга:

    Давно искала информацию об этом, нашла, но все равно не понятно. Я открыла папку с css стилями, куда вставлять этот код, после чего или перед чем? Как потом выделять цитату в тексте, появится какая-то функция в админке? Хочу и цитаты так выделять, и сделать форму подписки под статьей красивые, но ничего не понимаю, куда вставлять. Прямо валенком себя чувствую... 🙁

    Ответить
    • Анна:

      Вставить код можно в любое место css-файла, вставьте, например, в самый конец. Как выделять цитату, в статье написано: «Для оформления текста в виде цитаты необходимо заключить его в один из тегов»

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

      Ответить
      • Ольга Суворова:

        Я просто посчитала, что эта фраза:"Для оформления текста в виде цитаты необходимо заключить его в один из тегов" относится к плагину, а не коду. Так как плагин ставить не собиралась, эту часть статьи пропустила, увы...

        Но спасибо за помощь, будем пробовать! 🙂

        Ответить
        • Анна:

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

          , нажатием кнопки «цитата» на панели визуального редактора»
          об этом говорилось в самом начале статьи.

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

    А как сделать оформление куда вставляться код программирования, например как у вас. Жду ответа!

    Ответить
    • Анна:

      не понимаю вашего вопроса!

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

        та форма куда вставлен код

        blockquote {

        background-color: #D4F4EA;

        border: 1px solid #00B37C;

        border-radius: 6px;

        box-shadow: 1px 2px 2px 2px rgba (0, 0, 0, 0.4);

        font-family: Georgia,serif;

        font-size: 16px;

        font-style: italic;

        margin: 20px;

        padding: 20px 15px;

        width: 550px;

        }

        Ответить
        • Анна:

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

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

            Я имею ввиду не сам код, а форма куда он вставлен, само внешнее оформление напоминающие notepad++, или подобное. Чтоб вделался программный код от основного текста, как у вас.

            Ответить
            • Анна:

              Установите плагин WP-Syntax и WP-Syntax Button и у вас на панели редактора появится кнопка «Code».

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

                спасибо, попробовал, что то, не понравилось. Но нашел ему замену Crayon Syntax Highlighter

  8. Милла:

    Crayon Syntax Highlighter Да, мне тоже его порекомендовали) Буду пробовать) Авось и чего выйдет)

    Ответить
  9. Вика:

    Добрый день, а у Вас нет случайно статьи, как удалить ссылку в дате комментариев?

    Ответить
    • Анна:

      Пока такой статьи нет, постараюсь написать!

      Ответить
      • Вика:

        Спасибо, я уже сама разобралась!

        Ответить
  10. Сергей:

    Огромное Вам СПАСИБО за статью... я использовал цитирование при помощи плагина «WP-Note», это просто превосходная дизайнерская идея, и наконец-то решила мою небольшую проблему с выделением текста на моем сайте...

    СПАСИБО еще раз...

    С уважением,

    Сергей Коржов...

    Ответить
  11. Вера Тюкаева:

    Здравствуйте!

    После установки плагина кнопка «Цитата» в визуальном редакторе не появилась.

    Почему?

    Будут ли описанные теги работать без плагина?

    Ответить
    • Анна:

      Вера, кнопка «Цитата» никак не связана с плагином, это стандартная кнопка, включить ее можно в настройках визуального редактора Tiny MCE, читайте о нем тут.

      Плагин нужен для того, чтобы работали теги из второй части статьи.

      Ответить
  12. Сергей:

    Добрый день! В блоке 3 («Блок с тенью и закругленными краями»), насколько я понимаю, скрин с кодом не отображается.

    Ответить
  13. Николай:

    Народ будьте бдительны и не ставьте дырявый плагин wp-special-textboxes

    ./wp-special-textboxes/stb-class.php

    :echo ($parse ? eval («?>».$text."<?") : $text);

    eval позволяет выполнить любой код, в том числе залить шелл, скрипты и спамить с сервера.

    Ответить
  14. амиран:

    Как создать свой стиль по мимо стандартных в плагине wp note? пробовал тупо скопировать

    .noteclassic {

    background-color: #EEF;

    background-image: url (images/note.png);

    }

    .notenovoe {

    background-color:#00BFFF;

    background-image: url (images/novoe.png);

    }

    затем заменить название цвет и картинку но не получается.

    .noteclassic, .noteimportant, .notewarning, .notetip, .notehelp, .notenovoe{

    /* IE5 hack */

    \margin: 0px 0px -3px 0px;

    ma\rgin: 0px 0px 0px 0px;

    .noteclassic, .noteimportant, .notewarning, .notetip,.notehelp, .notenovoe{

    width: 80%;

    margin-top:2em;

    margin-left: auto;

    margin-right: auto;

    border-radius: 10px 10px;

    -moz-border-radius: 10px 10px;

    -webkit-border-radius: 10px 10px;

    padding: 15px 20px 15px 80px;

    margin: 0px 0px 0px 0px;

    -webkit-box-shadow: 2px 2px 3px #999;

    -moz-box-shadow: 2px 2px 3px #999;

    /*IE min-height hack*/

    min-height:40px;

    height:auto !important;

    height:40px;

    overflow:visible;

    position:relative;

    bottom:6px;

    right: 6px;

    border: 1px solid #999999;

    /*Set the position of the background image*/

    background-position: 20px 50%;

    background-repeat: no-repeat;

    text-align: justify;

    заливал через filezilla

    Ответить
    • Анна:

      Попробуйте к каждому стилю, который вы изменяете дописывать !important;

      Если не получится, то пришлите ссылку на ваш сайт и файл стилей.

      Ответить
      • амиран:

        .note

        {

        text-align: center;

        }

        .noteclassic, .noteimportant, .notewarning, .notetip,.notehelp, .notekobuleti{

        width: 80%;

        margin-top:2em;

        margin-left: auto;

        margin-right: auto;

        border-radius: 10px 10px;

        -moz-border-radius: 10px 10px;

        -webkit-border-radius: 10px 10px;

        padding: 15px 20px 15px 80px;

        margin: 0px 0px 0px 0px;

        -webkit-box-shadow: 2px 2px 3px #999;

        -moz-box-shadow: 2px 2px 3px #999;

        /*IE min-height hack*/

        min-height:40px;

        height:auto !important;

        height:40px;

        overflow:visible;

        position:relative;

        bottom:6px;

        right: 6px;

        border: 1px solid #999999;

        /*Set the position of the background image*/

        background-position: 20px 50%;

        background-repeat: no-repeat;

        text-align: justify;

        }

        .noteclassic, .noteimportant, .notewarning, .notetip, .notehelp, .notekobuleti{

        /* IE5 hack */

        \margin: 0px 0px -3px 0px;

        ma\rgin: 0px 0px 0px 0px;

        }

        .noteclassic {

        background-color: #EEF;

        background-image: url (images/note.png);

        }

        .noteimportant {

        background-color: #FFC;

        background-image: url (images/important.png);

        }

        .notewarning {

        background-color: #FDD;

        background-image: url (images/warning.png);

        }

        .notetip {

        background-color: #E4F6F8;

        background-image: url (images/tip.png);

        }

        .notehelp {

        background-color: #D8F3C9;

        background-image: url (images/help.png);

        }

        .notekobuleti !important; {

        background-color: #00BFFF;

        background-image: url (images/kobuleti.png);

        }

        уже по всякому перепробовал добавлять и так и так и везде подставлял и с ковычками и без

        Ответить
        • Анна:

          !important вы добавили не туда, у вас ведь был образец, как его добавлять: height:auto !important;

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

          Ответить
          • амиран:

            Блин теперь я совсем запутался куда его добавлять......((((

            Ответить
            • Анна:

              Не нашла на этой странице подобных блоков.

              Ответить
              • амиран:

                так по этому и не нашли потому что добавленный блок не работает. авыглядет он вот так на сайте [kobuleti]Программа Туристического слета 2015 в Грузии город Кобулети.[/kobuleti]

                А рабочие блоки вот на этой странице так как добавить свой блок??? подскажите что куда и как прописать то???

  15. Анна:

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

    Ответить
    • амиран:

      так это возможно? а подсказать не можете мне???Плиз...

      Ответить
      • Анна:

        Нет ничего невозможного. Попробуйте поискать на фрилансе, кто за небольшую денежку сможет это сделать. Я только «за дорого» возьмусь за такое)

        Ответить
  16. Кинза за:

    Значит это точно что ни каких санкций со стороны поисковых систем не будет если я возьму в цитаты к примеру абзац с чужого блога?

    Ответить
  17. Кинза за:

    То есть я хочу спросить: Поисковики этот текст не будут считать не уникальным но так же они и не будут считать его уникальным ? Я правильно понял?

    Ответить
  18. Татьяна:

    Мне понравилось ваше самое первое оформление текста: «нажатием кнопки «цитата» на панели визуального редактора (цитатой станет целиком весь абзац, а не только выделенное слово).»

    Как сделать также, Вы можете подсказать?

    Ответить
  19. Алик:

    Всё супер, одно НО! Отступ или большой или маленький, как исправить? Здесь есть и все скрины :

    Ответить
  20. ывывыв:

    Прошу удалить этот коммент

    Тест. Работает ли?

    Ответить
Ваш комментарий: