20 февраля 2010

WordPress советы — создание врезок в постах

врезка

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

Врезка — это блок дополнительной информации к статье

Ширину врезки вы, конечно, можете устанавливать сами, но есть правило (писаное или неписаное не знаю), что ширина врезки составляет 35% от ширины текста.

Когда элемент веб-страницы получает свойство float, он становится блочным элементом и вырывается из нормального потока (того, как браузер отобразил бы страницу без учета позиционирования CSS). Элемент прикрепляется к левой (float: left) или правой (float: right) стороне родительского блока (например, другого CSS-блока или ячейки таблицы), остальные элементы страницы будут обтекать float-блок с другой стороны

Теперь пример врезки справа, в нем я разместил информацию о свойстве CSS float. Это свойство является ключевым в данном примере, если вы его опустите, то текст разорвется вставкой и будет выглядеть не аккуратно. На самом деле и этот пример далек от образца верстки, поскольку чередовать левую и правую врезки, да и размещать их рядом не есть гуд. Но в данном случае важнее пример, чем следование образцу. Кроме того, когда будете просматривать код, обратите внимание на font-size: 0.8em;. Это относительная единица размера шрифта, в данном случае она составляет 80% от того размера, который применен в этой статье. Врезки смотрятся более симпатично не только выделяясь фоном, но и другим шрифтом, в нашем случае более мелким.
Кроме того врезкой можно разрывать текст на части, делая ее горизонтальной во всю ширину статьи.

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

Но какие бы виды врезок не использовались, не перегружайте текст ими. Не забывайте о мере: мера — дар богов. Пользуйтесь ей.
Теперь следует привести код, который необходимо вставить в файл style.css, находящийся в /wp-content/themes/наша_тема/. Обратите внимание, что для именования своих классов, я использую префикс cl_ , чтобы не путать с другими классами.
Сначала код для врезки слева:

.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
}

С файлом style.css мы закончили.  Теперь в любой статье достаточно использовать такой код <div class=»cl_lvrez»>текст врезки слева</div> чтобы вставить врезку в левую часть. Соответственно «cl_rvrez» для вставки врезки справа и «cl_vrez» для врезки в центре по ширине статьи,  разрывая основной текст.

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

Комментариев: 38

Вы можете следовать любому комментарию через RSS 2.0 feed.

Вы можете оставить комментарий или trackback с вашего сайта.

  1. Очень интересная статья! Мне очень помогла, теперь есть вариант выделения для самого важного и для рекламы!

  2. Полезная вещь врезка.
    Иногда бывает важно выделить нужную информацию. Вот и темка для создания ещё одного плагинчика.

  3. Вроде символ нижнего подчёркивания ( _ ) в названиях классов не желательно применять. Лучше заменять дефисом.

  4. Semm:

    А постовой с ссылкой если во врезке разместить, ссылка будет отображаться?

  5. Пробовал сделать врезку, но что-то не получилось.

  6. fish:

    Полезная статья, спасибо!

  7. По-моему будет очень уместно публиковать во врезках постовые. Большое спс за информацию. Буду пользоваться.

  8. MiG:

    Попробовал, всё как описано,но почему-то не работает… И файл стилей отредактировал, и вставку делаю — ничего не получается?..

  9. MiG:

    http://acaijuice.ru/?p=1170
    правда там что можно увидеть, хотел выделить предпоследний абзац (для справки), но ничего же не получилось

  10. MiG:

    Спасибо за помощь. Сейчас всё Ок. Еще бы строчку «код» на курсив…

  11. MiG:

    Чтобы текст в блоках всегда был курсивом как например ники в отзывах)

  12. Стас:

    В какое место файла style.css вставлять код?

  13. Огромное спасибо. Применил это на друпале — работает,только div классы обозвал по другому.

  14. на блоге http://10sea.org.ua/ улетела вниз боковая колонка как исправить?

  15. Ни чего не выходит. За отдельную плату можете сделать?

  16. Nazgul:

    А можно ли в вордпрессе создавать врезку-оглавление статьи(так как это сделано в википедии)? Вот например есть очень длинная статья с подзаголовками, и в самом ее начале чтобы можно было разместить список этих подзаголовков (оглавление), и когда читатель кликает на какой нибудь пункт, статья моментально прокручивается к соответствующему параграфу?

  17. Андрей:

    Доброго дня! Я начинающий (стаж 1 месяц). Столкнулся с проблемой, решение которой не могу отыскать уже третий день. Виджеты с успехом внедряются по сайтбарам и подвалам. Есть необходимость внедрения виджета типа «Text» непосредственно на страницу, т.е. так-же, как мы внедряем на страницу изображения, и при переходе на другую страницу, виджета уже не должно быть видно. Как этого добиться? Если ответ емкий по содержанию, просьба отправить на мыльце, указанное при регистрации. Заранее спасибо за Ваше участие!

  18. Блин… Видел раньше врезки на других блогах и по своей простоте думал, что это такие индивидуальные элементы шаблонов… У себя же для выделял все тегом blockquote :(
    Беру на вооружение Ваши наработки!

  19. […] эта идея изложена на блоге myris.ru . Кстати говоря, — чудесный блог с точки зрения […]

  20. Здравствуйте, никак не могу настроить врезку, хотя в Вордпресс более-менее разбираюсь. В чём можэет быть причина?
    Спасибо.

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

Обведите фигуру по линии:

Ставим WordPress на локальном копьютере