Дело № 6: Создание врезок в постах

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

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

Теперь пример врезки справа, в нем я разместил информацию о свойстве 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» для врезки в центре по ширине статьи,  разрывая основной текст.

• Улучшаем more >>
• Улучшаем внешний вид списка связанных постов
• Проверяем таблицу стилей CSS на ошибки
• Wordpress для чайников:где найти в блоге шаблоны и файл style.css
• Работаем с селекторами CSS. Псевдоэлементы
• Псевдоклассы. Часть 2.