Плагин для WordPress «Wp note». Выделение важного текста!

Опубликовано: 31.07.2014 | 2362

Плагин Wp-note. Делаем красивые заметки!

Всем привет. На линии Александр Васильев. Уж и не думал что напишу так быстро, так как 15 часов не было интернета. Но вот опять я на связи.

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

Прямо сейчас сразу пример такой заметки в содержании поста.

1. Для чего нужны такие заметки?
2. Как сделать красивую заметку с помощью плагина?
3. Как изменить стиль заметок?

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

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

Зачем нужно выделять текст заметками?

Приступим. Для чего же нам это нужно?

Ну во первых, это даёт дополнительную красоту и удобство к стилю блога. Я думаю, что каждому посетителю будет приятно читать блог с красивым оформлением текста. Заметки помогут нам в этом.

Во вторых, есть несколько видов заметок, каждая из которых несёт в себе определённый смысл. Например, содержание Вы сможете сделать одной заметкой, если что-то нужно выделить важное — другой.

В третьих, заметки улучшают поведенческие факторы Ваших посетителей. Рассмотрим пример на себе. Мы заходим на любой блог или сайт за нужной нам информацией. Смотрим текст. Он нигде не выделен, оформлен плохо. Что мы делаем? Пролистали до низа и ушли. В редких случаях останемся почитать, но это только в очень редких.

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

Запомните, поведенческие факторы на данный момент играют Важную роль в продвижении Вашего блога в поисковых системах!

Устанавливаем плагин

Перейдём, собственно к установке и настройке плагина. Вернее к установке, так как настроек он не требует. Скачиваем плагин по этой ссылке, разархивируем его и закачиваем в папку wp-content/plugins. Далее из админки переходим во вкладку «Плагины» и активируем. Всё!

Или же устанавливаем прямо из админ-панели. Переходим в «Плагины» — «Добавить новый». В поле поиска пишем фразу wp-note и нажимаем поиск. Далее устанавливаем и активируем плагин.

Плагин Wp-note. Активация плагина.

Если Вы не знаете как устанавливать плагины, прочтите мою статью о том, как установить плагин на wordpress?

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

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

Ниже Вы можете посмотреть эти теги и собственно сами рамки. Вставляйте теги без звёздочек!

Первую заметку можно классифицировать как цитату. Я использую для оформления содержания. Для вывода такой рамки заключите текст в теги [*note*][*/note*]

Вторую заметку я классифицировал как помощь в чём либо. Также можно её использовать при интервью с кем либо, заключая вопрос в данную рамку. Для вывода такой рамки заключите текст в теги [*help*][*/help*]

Третью заметку можно использовать, когда Вам нужно выделить важный текст. Для использования такой рамки заключите текст в теги [*tip*][*/tip*]

Четвёртая заметка пригодится Вам, когда нужно будет вывести какое-либо предупреждение. Выводится такая рамка тегами [*warning*][*/warning*]

Ну и последняя заметка может понадобится, когда нужно выделить текст, который нужно запомнить. Ключ в этом случае говорит о том, что это как бы ключевой момент. Для использования такой рамки заключите текст в теги [*important*][*/important*]

Вам нужно ещё больше? Думаю не стоит. Этих пять рамок хватит Вам с головой. Могу сказать, что Вы даже не будете использовать их все.

Как поменять стиль заметок?

Как я уже упоминал, плагин wp-note не имеет настроек. Если Вам не нравятся такие рамки, Вы можете самостоятельно отредактировать файл стилей. Или же воспользоваться другим плагином.

Другими, более функциональными, плагинами для таких операций я бы не рекомендовал Вам пользоваться. Хоть WordPress и гибкий, но ресурсы он любит. Этого плагина Вам хватит. Если же Вы всё-таки упёртый и любите трудности, но не знаете что такое css, сейчас я расскажу Вам как отредактировать стили.

Глубоко лезть не будем, а рассмотрим как изменить фон заметки или картинку.

Значит так. Берём ведро картошек и 10 ман….. Ой. Извините. Не туда. Если вы хотите изменить картинку в рамке, Вам нужно всего навсего заменить картинки своими в папке wm-content/plugins/wp-note/images с таким же названием и расширением. Просто? Да проще не бывает.

Если Вы решили замахнуться и на фон заметки, отредактируйте html-цвет в файле style.css (путь к файлу: wp-content/plugins/wp-note/style.css)в строчках, показанных на иллюстрации. Чтобы посмотреть эти самые цвета введите в Яндексе запрос html цвета и воспользуйтесь результатами.

Плагин Wp-note. Настройка css-стиля

Как видите настройка плагина не составляет особого труда. Но опять же я не рекомендую Вам лезть в стили, если Вы ничего не понимаете в разметке css. Если У Вас есть какие-либо вопросы по этому поводу, задавайте их мне в комментариях. Буду рад помочь.

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

Несмотря на этот пост, не используйте слишком много таких тегов. В меру, как говорится. Выделяйте только действительно то что нужно и по существу. Здесь же я просто показал Вам суть и привёл примеры.

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

На этом у меня всё. Спасибо за внимание. С уважением, Александр!

БредТак себеНеплохоХорошоОтлично
Загрузка...
Подписка на новые статьи блога


Не будь жадиной! Поделись с друзьями :)



Комментарии к этой записи (Правила):

  1. Лара (02.08.2014)



    Хороший плагин — сразу в статье будет бросаться в глаза то, что автор посчитал нужным, чтобы остановить наше внимание. Спасибо за подробности!!!

  2. Александр Дубровченко (19.01.2015)



    Приветствую, Александр! Не в курсе, как обстоят дела с надежностью этого плагина, я смотрю он не обновлялся 5 лет. У меня на блоге был косяк с подобным плагином, он оказался «дырявый» и через него на блог попал вредоносный код, точней веб-шеллы.

    1. Александр Васильев (19.01.2015)



      У меня пока всё нормально. Проблем не замечал с его работой…
      А как Вы определили, что именно из-за этого плагина шелл пробрался на блог?

  3. Анатолий (27.01.2015)



    А тег что ручками прописывать нужно? установил но не вижу кнопок в панели для оформления текста, или их еще надо вкл. как-то?

    1. Александр Васильев (27.01.2015)



      Да, ручками. Думаю, это не так сложно. Хотя, рассмотрю идею внедрения кнопок в редактор :cool:

  4. Анатолий (28.01.2015)



    Новичек, експерементировал, просто ставил похожий на вордпрес в панели появлялось 3 кнопки, ваннинг, ноте и [*important*], а недавно подцепил какуюто заразу посносил половину плагинов и под раздачу попал и он, но вот проблемка непомню емае за статью спасибо, за ответ тоже

    1. Александр Васильев (28.01.2015)



      Вряд ли это из-за этого плагина. Возможно он просто скачал не с сайта wordpress, а откуда то ещё. Всё-таки я уверен, что дыра была где-то в другом месте. Нужно обновлять плагины, а также сам WordPress и следить за исправностью движка в целом :exclaim:

  5. Ольга (16.04.2015)



    Александр, здравствуйте!
    борюсь уже с каким плагином по офомлнию вставок, и везде ерунда (((
    он не помещает текст полностью в окошко заметки, а только вверху текста выводит тонкую полоску, что это «заметка» Хотя теги я ставлю перед текстом и второй закрывающий после текста.
    И второе. Весь последующий после заметки текст уходит за страницу поста, как бы обтекая эту заметку и уходит на фон
    Спасибо!

    1. Александр Васильев (17.04.2015)



      Возможные причины:

      1. Плагин не совместим с Вашей темой. Попробуйте поставить другую тему оформления и заново протестировать плагин.
      2. Какой-либо плагин на Вашем блоге мешает работе плагина заметок. Попробуйте отключить все существующие плагины и поодиночке включать и проверять результат.
      3. Что-то где-то сделали не так. Попробуйте ещё переустановить плагин заново.

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

  6. Ольга (17.04.2015)



    Спасибо! думаю , проблема в теме. Попробую протестировать на другой !

    1. Александр Васильев (17.04.2015)



      Не за что. Обращайтесь. Чем смогу помогу, что знаю — подскажу. Попробуйте, конечно.

      Если что сообщите о результате :question:

  7. Алексей (18.04.2017)



    Установил новую адаптивную тему, теперь WP-NOTE чуточку вылезает за пределы экрана на мобильных, из-за этого появляется, небольшая но все же, горизонтальная прокрутка. Может быть сталкивались с такой бедой, как можно исправить?

    1. Александр Васильев (26.04.2017)



      Такого не было. Но у меня теперь округлились углы, хотя я делал их квадратными. Пока нет времени разбираться. Блог завис в воздухе пока что :(

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

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

:arrow: 
:biggrin: 
:confused: 
:cool: 
:cry: 
:eek: 
:evil: 
:exclaim: 
:idea: 
:lol: 
:mad: 
:mrgreen: 
:neutral: 
:question: 
:razz: 
:redface: 
:rolleyes: 
:sad: 
:) 
:surprised: 
:twisted: