Красивое оформление цитаты css. Плагин WP Note
Сегодня я расскажу про оформление цитаты в WordPress разными способами. Посты о дизайне уже были на блоге, читайте, например, как сделать уголок на сайт.
Содержание статьи:
- Зачем нужно оформление цитаты на сайте
- Css оформление цитаты — примеры
- Плагин WP-Note для быстрого и красивого оформления цитаты WordPress блога
Зачем оформлять цитаты на сайте
Предположим, вы хотите использовать в статье великое изречение или чью-то понравившуюся мысль. А может быть просто выдержку из понравившегося поста на другом сайте. Просто заключите данный фрагмент текста в html тег
, нажатием кнопки «цитата» на панели визуального редактора (цитатой станет целиком весь абзац, а не только выделенное слово).
Теперь читателям вашего блога станет понятно, что данный текст вы цитируете. Кроме того, поисковые системы не будут воспринимать этот текст, как не уникальный, потому что это цитата. Информация воспринимается легче, когда она разбита на смысловые блоки, визуально отличающиеся друг от друга. Поэтому очень важно оформить вывод цитаты в WordPress соответствующим образом. Оформление цитаты по умолчанию будет зависеть от того, какую тему вордпресс вы используете. Если у вас рукописная тема, то она может вообще не иметь никакого оформления для цитат. Настроить стилизацию можно двумя способами:
- Вручную с помощью css-стилей для цитат. При выборе этого способа придется работать с кодом вручную. Вы сможете поэкспериментировать: задавать нужные вам цвета, толщину линий и отступы.
- Плагин цитат WP-Note для wordpress. Этот способ очень прост, он не требует лезть в код, нужно только установить плагин. Варианты оформления будут предложены стандартные и изменить их вы не сможете.
Оформление стиля цитат вручную, используя css.
Данный метод оформления цитат не требует знания html, делайте все по инструкции и проблем не возникнет.
В этом способе нам придется работать с кодом, а именно с главным стилевым css файлом темы вордпресс. Найти его можно следующими способами:
- В админке: Внешний вид » Редактор. Внизу правой колонки находим раздел стили, в нем Таблица стилей (style.css) и открываем.
- Зайти по FTP: /wp-content/themes/ваша_тема/style.css. Скачиваем файл на компьютер и открываем.
Теперь воспользовавшись поиском (ctrl+F) найдем тег “blockquote”, если для него уже заданы какие-то правила, можно их удалить и написать свои. Несколько примеров возможного оформления цитаты с помощью css:
1. Цитата CSS с кавычками
В этом примере кавычки вставлены не с помощью изображения, а при использовании кода символа «кавычки». Цвет фона можно изменить во второй строке, заменив #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. Вертикальная линия слева
Внешний вид вертикальной линии вы можете изменить. Строка 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. Блок с тенью и закругленными краями
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 очень прост в использовании и он не имеет никаких настроек.
Установка.
Способ первый:
- Зайдите в админку блога. «Плагины» -> «Добавить новый»
- Скопируйте название «WP-Note» и вставьте в поле раздела «Поиск» и нажмите кнопку «Поиск плагинов»
- В открывшемся списке выберите плагин «WP-Note» и нажмите «установить»
- Кликните «ок» во вплывающем окне, после чего кнопку «активировать».
Способ второй:
- Аналогично сп.1
- Скачайте архив с плагином с официального сайта вордпресс по ссылке
- В меню плагинов кликните «Загрузить», выберите скачанный ранее файл с компьютера и нажмите «Установить»
- Аналогично сп.1
Чтобы начать пользоваться плагином, откройте любую запись на блоге. В данном способе не используется тег blockquote и кнопка “цитата” визуального редактора. Для оформления текста в виде цитаты необходимо заключить его в один из тегов: [note][/note], [help][/help], [tip][/tip], [warning][/warning] или [important][/important]. При этом не нужно открывать исходный код, текст вписывается прямо в визуальном редакторе:
Теперь подробнее про теги
«Заметка». Заключите текст в теги [note][/note] и вы получите следующее: «Помощь». Заключите текст в теги [help][/help] и вы получите следующее:
«Важное». Заключите текст в теги [tip][/tip] и вы получите следующее: «Предупреждение». Заключите текст в теги [warning][/warning] и вы получите следующее: «Запомни». Заключите текст в теги [important][/important] и вы получите следующее: Вот такие пять стандартных вариантов оформления цитаты предлагает данный вордпресс плагин. Css-стили прописаны в файле /wp-content/plugins/wp-note/style.css (редактируется по ftp). Поэтому при желании можно изменить вывод цитаты wordpress блога на свой вкус.
Если есть вопросы или что-то не получилось сделать, пишите в комментариях, я обязательно постараюсь помочь! В следующей статье я планирую рассказать о том, как перенести блог с одного хостинга и домена на другой, подпишитесь на RSS, чтобы не пропустить.
Спасибо за статью, очень полезная. Скажите, Анна, первый способ оформления цитат очень прост, второй сложен для новичка, если остановится на первом, то что потеряешь в итоге?
Людмила, если для вас первый способ проще, то это прекрасно (думаю, что для большинства проще второй способ). Вы ничего не потеряете, этот способ очень гибкий в настройке, позволяет придать любой вид цитатам.
Давненько не было ничего на блоге, уже думал крест поставили
Константин, мы исправимся!) Постараюсь радовать вас статьями почаще.
Огромное спасибо за пост. Особенно за пояснения к строчкам кода. Очень пригодилось. А то на других сайтах картинка-код, картинка-код. Ни пояснений, ничего.
Очень рада, что вам помогло!
Получилось! Спасибо!
Обязательно развивайте свой блог-учебное пособие и дальше. У вас дар — очень доступно излагать материал!
И это верно!
Зачастую, вэб-мастеру кажется, что всё так предельно понятно и он опускает мелочи и тонкости, а Анна, как учитель в школе:). Спасибо.
Давно искала информацию об этом, нашла, но все равно не понятно. Я открыла папку с css стилями, куда вставлять этот код, после чего или перед чем? Как потом выделять цитату в тексте, появится какая-то функция в админке? Хочу и цитаты так выделять, и сделать форму подписки под статьей красивые, но ничего не понимаю, куда вставлять. Прямо валенком себя чувствую... 🙁
Вставить код можно в любое место css-файла, вставьте, например, в самый конец. Как выделять цитату, в статье написано: «Для оформления текста в виде цитаты необходимо заключить его в один из тегов»
Ольга, советую вам не бояться, что вы ничего не понимаете, а пробовать. не получилось, значит попробуйте еще раз, сделайте как-то иначе. Когда совсем уже не получается, задавайте конкретные вопросы, обязательно поможем!
Я просто посчитала, что эта фраза:"Для оформления текста в виде цитаты необходимо заключить его в один из тегов" относится к плагину, а не коду. Так как плагин ставить не собиралась, эту часть статьи пропустила, увы...
Но спасибо за помощь, будем пробовать! 🙂
Все зависит от выбранного вами способа. Если вы делаете цитаты без плагина, то сделать нужно следующее: «Просто заключите данный фрагмент текста в html тег об этом говорилось в самом начале статьи.
А как сделать оформление куда вставляться код программирования, например как у вас. Жду ответа!
не понимаю вашего вопроса!
та форма куда вставлен код
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
Crayon Syntax Highlighter Да, мне тоже его порекомендовали) Буду пробовать) Авось и чего выйдет)
Добрый день, а у Вас нет случайно статьи, как удалить ссылку в дате комментариев?
Пока такой статьи нет, постараюсь написать!
Спасибо, я уже сама разобралась!
Огромное Вам СПАСИБО за статью... я использовал цитирование при помощи плагина «WP-Note», это просто превосходная дизайнерская идея, и наконец-то решила мою небольшую проблему с выделением текста на моем сайте...
СПАСИБО еще раз...
С уважением,
Сергей Коржов...
Здравствуйте!
После установки плагина кнопка «Цитата» в визуальном редакторе не появилась.
Почему?
Будут ли описанные теги работать без плагина?
Вера, кнопка «Цитата» никак не связана с плагином, это стандартная кнопка, включить ее можно в настройках визуального редактора Tiny MCE, читайте о нем тут.
Плагин нужен для того, чтобы работали теги из второй части статьи.
Добрый день! В блоке 3 («Блок с тенью и закругленными краями»), насколько я понимаю, скрин с кодом не отображается.
Спасибо, поправила.
Народ будьте бдительны и не ставьте дырявый плагин wp-special-textboxes
./wp-special-textboxes/stb-class.php
:echo ($parse ? eval («?>».$text."<?") : $text);
eval позволяет выполнить любой код, в том числе залить шелл, скрипты и спамить с сервера.
Как создать свой стиль по мимо стандартных в плагине 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]
А рабочие блоки вот на этой странице так как добавить свой блок??? подскажите что куда и как прописать то???
Я поняла, что вы изменить стиль существующего хотите. Добавить еще один, конечно, не просто, нужно как минимум разбираться в программировании на php.
так это возможно? а подсказать не можете мне???Плиз...
Нет ничего невозможного. Попробуйте поискать на фрилансе, кто за небольшую денежку сможет это сделать. Я только «за дорого» возьмусь за такое)
ясно
Значит это точно что ни каких санкций со стороны поисковых систем не будет если я возьму в цитаты к примеру абзац с чужого блога?
То есть я хочу спросить: Поисковики этот текст не будут считать не уникальным но так же они и не будут считать его уникальным ? Я правильно понял?
Мне понравилось ваше самое первое оформление текста: «нажатием кнопки «цитата» на панели визуального редактора (цитатой станет целиком весь абзац, а не только выделенное слово).»
Как сделать также, Вы можете подсказать?
Всё супер, одно НО! Отступ или большой или маленький, как исправить? Здесь есть и все скрины :
Прошу удалить этот коммент
Тест. Работает ли?
не работает