Делаем контент стильным: устанавливаем врезки в статью |

Продолжаем разговор о создании стильного контента. В предыдущих статьях мы разбирали плагины Special Text Boxes  и WP-Note . Тогда я обещал, что расскажу о создании врезок в статью.

Что такое врезки? Это просто выделенный текст в статье для привлечения внимания. Слева Вы видите такую врезку. Врезки обычно делают для того, чтобы пояснить или разьястнить что-нибудь, сослаться на другую страницу (ресурс).

Ее можно сделать и на всю ширину страницы:

Сама эта идея изложена на блоге wp-starter.ru . Кстати говоря, — чудесный блог с точки зрения содержания. И автор – Alex – очень отзывчивый человек, что редкость.

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

Итак, для того, чтобы вставить такую врезку нам надо дополнить файл style.css вот таким кодом:

.cl_lvrez {

float: left;    /*блок слева*/

font-size: 0.8em;  /*размер шрифта*/

border: 1px solid #000000;  /*граница толщина вид цвет */

height: auto;  /*высота блока — зависит от текста в нем*/

width: 35%;  /* %% от ширины статьи */

text-align: left;  /*текст равняем влево */

background-color: #cccccc;  /*цвет фона */

margin-bottom: 5px;  /*отступ от блока снизу*/

margin-right: 10px;  /* —- справа*/

margin-top: 5px;  /* —- сверху  */

margin-left: 0px;   /* —— слева    */

padding: 5px;    /* отступ текста от границ внутри блока */

}

Это если мы хотим вставить врезку слева. Что все эти буквы и цифры означают и что в этом коде мы можем изменить (подогнать под свой дизайн), мы поговорим ниже. Учтите, что фон врезок у Вас будет серым, я его немного изменил. И еще. Обратите внимание на то, что цвет шрифта и его размер в левой врезке и большой врезке отличаются. Их я тоже изменил. В коде примера цвет шрифта отдельно не указывается, значит, он будет такой же, как на всем сайте.

Код для врезки справа:

.cl_rvrez {

float: right;

font-size: 0.8em;

border: 1px solid #000000;

height: auto;

width: 35%;

text-align: center;

background-color: #cccccc;

margin-bottom: 5px;

margin-right: 0px;

margin-top: 5px;

margin-left: 10px;

padding: 5px

}

Видим, что отличия от предыдущего небольшие – в первых двух строчках.

Код для врезки на всю ширины страницы:

.cl_vrez  {

border: 1px solid #000000;

height: auto;

width: 100%;

text-align: center;

background-color: #cccccc;

margin-bottom: 10px;

margin-right: 0px;

margin-top: 5px;

margin-left: 0px;

padding: 5px

}

Отличия от первых двух попробуйте найти сами. Обратите внимание, что наименование стилей отличается в зависимости от типа врезки:

• врезка слева — .cl_lvrez (видите, буква l);
• врезка справа — .cl_rvrez (буква r)
• на всю ширину — .cl_vrez  (без дополнительных букв).

Чуть позже это различие в написании нам понадобится

Теперь я предлагаю Вам скопировать любой из этих кодов (а можете и все три – ограничений нет), открыть файл style.css (напомню путь: в админке открываете вкладку «Внешний вид» — «редактор» — файл style.css) и дописываете в него скопированный код. Куда? Например, в самый низ файла. Обновляете файл.

Теперь открываете любую статью для редактирования, в визуальном редакторе открываете вкладку HTML (обязательно HTML!) и в любом месте статьи пишите такой код:

<div Почитать статью об определении кода цвета» href=»/kak-opredelit-kod-cveta-programma-htmlcolors-2000.html » target=»_blank»>этой статье Там же можно скачать и программу для определения цвета. И если хотите, то цвет рамки можно поменять.

Следующая строка устанавливает, что высота врезки будет устанавливаться автоматически – в зависимости от обьема текста. Оставляем.

Далее — width: устанавливает ширину врезки. Если установлено 100%, то врезка будет на всю ширину статьи. Если 35% (рекомендуется), то на одну треть.

Строчка text-align: устанавливает выравнивание текста во врезке  – слева, справа или по центру. Решайте сами.

Устанавливаем цвет фона в строке background-color: #cccccc;  Где его взять?- Ссылку на статью я дал чуть выше. Вы можете установить цвет фона левых и правых врезок, например, как цвет цветовой подложки сайта (у меня — серый), а цвет врезки на всю ширину – другой (голубой, розовый, желтый…). Тогда у Вас не будет излишней пестроты на сайте и, одновременно, Вы сможете цветом выделять какие-то важные куски текста.

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

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

color:#000000;

Куда вставлять? В первых двух кодах (правая и левая врезка) Вы можете вставить ее после строчки font-size: 0.8em, а коде широкой врезки после строчки width: 100%.

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

Отредактировав код врезок под себя. Вы можете долго наслаждаться плодами своей работы. До тех пор, пока не надумаете сменить шаблон. Тогда коды врезок надо будет устанавливать (!!!) в файл style.scc и редактировать (подгонять под дизайн) по-новой.

Теперь о том, как во врезках сделать ссылки?

Проще всего так: пишите текст врезки во вкладке HTML, потом переключаетесь в визуальный редактор и далее все как обычно – выделяете текст (анкор ссылки), нажимаете кнопку «Добавить ссылку», вставляете URL ссылки и т.д. Все это Вы знаете. Вот попробуйте для примера поставить во врезке ссылку на мой блог, буду очень признателен :-))).

Важное замечание. Этот прием с врезками работает на любых сайтах – с любой CMS или html- сайтах, главное чтобы был файл style.css.

Еще более важное замечание. Конечно, держать в голове все коды вставок в

статью затруднительно. К счастью, этот процесс можно автоматизировать – с помощью шорткодов и одного плагина (который, вдобавок, еще  для кое-чего пригодится). Статью об этом начинаю писать прямо сейчас. Но сначала допишу еще вот что: куда именно и как лучше всего вставлять врезку — прочитайте в следующей статье о плагине AddQuicktag, там подробно и с картинками :-).

P.S.  Хотите совет? Постарайтесь на сайте разместить какие-то сервисы для удобства читателей (покупателей). Отличный пример: на сайте компании МВО представлен очень удобный сервис для подбора шин. Причем если Вы не знаете точного типоразмера, то подобрать шины можно по марке — модели — году — модификации. Удобно? Еще как!

И кстати, зима на носу — не пора ли Вам переобуть машину или хотя бы купить авто шины зимние? Могу абсолютно безбоязненно рекомендовать фирму МВО — я сам имел с ней дело, очень порядочная организация. И еще у них можно хранить сменный комплект шин — чрезвычайно удобно!

P.P.S. А теперь — SEO ссылки:

жирная ссылка: тИЦ 850, PR 5.

3 DoFollow блога: тИЦ 10, 20, 30

Белый каталог — тИЦ 1200, PR 5.

[share-locker locker_ theme=»grey» message=»Чтобы увидеть ссылки, кликните по любой кнопке! Спасибо» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»]

Трастовый сайт — http://lostfilm.tv/ Тиц 850, PR 5. Тематика: фильмы. Необходимо: зарегистрироваться, в профиле указать сайт

DoFollow блог — http://baloven.info/ тИЦ 30, PR 2. Тематика: интересное в Сети

DoFollow блог — http://www.nayjest.ru/ ТИЦ 10, PR 2. Тематика: веб-разработка

DoFollow блог — http://kyoks.ru/ тИЦ 10, PR 1. SEO блог

Биржа статей http://www.miralinks.ru/ тИЦ  1200, PR 5. Необходимо зарегистрироваться и добавить сайт. Немного хлопотно, но оно того стоит

[/share-locker]