Как оформить текст красиво, красивое оформление цитат текста, рамки для оформления текста.

Всем привет, я вот долго думал, как же правильно, а точнее как красиво оформить текст в блоге. Не простой текст, а текст, который я хочу как-то выделить. Например, цитаты. Цитаты выделяют часто, да и для пользователя это удобнее. Красивое оформление текста делает статью более читабельной и привлекательной. Но я столкнулся с такой проблемой: на моем блоге есть только стандартные типы выделений, а точнее выделение кодом в виде списков, изменение шрифта и обрамление в “квадратик” на фоне другого цвета. Вот пример:

• Пример 1
• Пример 2

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

Красивое оформление текста

С большего такое выделение уже выглядит более-менее. Можно смотреть , и даже понятно, что я хочу сделать акцент на этот блок. Но мне все-таки это показалось слишком простым. Кстати, такие типы выделения вы можете использовать и на своем блоге, достаточно попробовать использовать специальные html-теги , они кстати – стандартные в HTML. Вот как выглядит код нашего недавнего примера:

1
2
3
4

<ul><code>
	<li> Пример 1</li>
	<li> Пример 2</li>
</code></ul>

Как вывести html код

Раз уж зашла такая пьянка, давай разберемся, как это я вывел html код на страницу? Ведь если логически подумать – html код должен быть выполниться (скомпилироваться) и показаться пользователю как и в прошлом примере – с рамкой. Все дело в том, что я использовал хороший плагин, я его специально добавить в список мои wordpress плагины.

Называется плагин: WP-Syntax
Скачать плагин: можно отсюда

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

<pre lang="LANGUAGE" line="1"> здесь ваш код </pre>

А выглядеть это будет вот так:

1

 здесь ваш код

Под словом LANGUAGE в коде я имел ввиду язык программирования, например, туда можно поставить значение “php” – и в белом обрамлении будет выводится код с синтаксисом этого языка программирования. Ну это лишь рюшечки, кому как удобнее – тот так и настраивает.

К этому плагину, кстати, есть дополнение. Оно создано специально(!) для тех, кто пишет статьи в большинстве случаев в Визуальном редакторе. т.е. Когда закладка “Визуально” включена. Вот так:

Так вот, специально для вас было создано это дополнение.

Называется дополнительный плагин: wp-syntax button (кнопка)
Скачать плагин: можно отсюда

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

При нажатии на эту кнопку – вам выскочит окошко с вопросов “какой язык программирования взять за основу расцветки синтаксиса” и вы сможете выбрать из блошого списка – нужный вам вариант.

Рамки для оформления текста

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

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

Плагин называется: WP-Note
Плагин скачать: можно отсюда

Какова основная задача плагина? Правильно! При необходимости вывести нужную рамку для текста, чтобы читателю блога было более понятно, что хочет донести до него автор блога. Хочет ли автор привлечь внимание читателя или хочет дать указание на будущее или просто выделить какую-то интересную цитату? Теперь это сделать очень просто. Вот наглядные примеры работы плагина, как можно красиво оформить текст.

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

Не знаю как вы, а я лично плагином остался очень доволен. Более продвинутым пользователям могу посоветовать изменить стандартные картинки в этих заметках и придать рамкам для оформления текста больше уникальности. Все картинки находятся в папке плагина, в папке /images/ – далеко ходить не надо. Можно также настроить таблицы стилей в CSS . Если у вас что-то не получается – обращайтесь, будем помогать друг другу, всегда можно будет договориться.

Вот в принципе и все. Чтобы не пропустить еще что-то интересное – подпишись на обновления блога. А на десерт сегодня пособие как снять футболку за одну секунду.

С уважением, Тумилович Денис