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


Продолжаем разговор о создании стильного контента. В предыдущих статьях мы разбирали плагины 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 class="cl_lvrez”>пример врезки слева</div>

Вот здесь у уважаемого автора wp-starter и закралась досадная ошибка, нет, опечатка. Кавычки обязательно должны быть такие, как в моем примере, т.е. такие – “” (английская раскладка клавиатуры), а не такие – «» (русская раскладка). Иначе вся наша конструкция работать просто не будет.

Текст, конечно, Вы можете написать любой. Обновляете статью и смотрите на сайте. Все работает, правда?

Но по стилю врезка не очень гармонирует с дизайном Вашего сайта? Значит, надо кое-что подредактировать. Для этого обратимся к коду врезки.

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

Важная строка ­ — float: left; (или right) , она показывает к какому краю статьи будет прикреплена врезка. Весь остальной текст будет ее обтекать. Оставляем.

Далее идет определение  размера шрифта — font-size: 0.8em;  Тут надо знать, что em – размер установленного шрифта на сайте, значит, выражение  0.8em означает, что во врезке шрифт будет мельче – он составит 0,8 от общего шрифта. Можете поменять размер, только обратите внимание, что после нуля (первая цифра) ставится точка. В коде большой врезки (на всю ширину) размер шрифта не оговаривается, значит, он будет таким же, как и во всей статье. Если хотите поменять, то скопируйте строчку — font-size: 0.8em; — и вставьте после строчки — .cl_vrez  {

Следующая строка — border: 1px solid #000000; — позволяет нам изменить границы врезки – ширину в пикселях, какая будет линия (solid — сплошная) и цвет линии. Как узнать код нужного цвета , читайте в этой статье Там же можно скачать и программу для определения цвета. И если хотите, то цвет рамки можно поменять.

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

Далее — 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_id="189e2fa06812deec4" 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]

 

Похожие записи по этой теме:

2 thoughts on “Делаем контент стильным: устанавливаем врезки в статью

  1. Николай

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

    Reply
    1. admin Post author

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

      Reply

Оставить комментарий

Your email address will not be published. Required fields are marked *