Как да добавя фонов цвят към текста на заглавието? Интересни стилове за заглавия, използващи псевдоелементи Начини за стилизиране на заглавия h1, h2

: премахнаха ненужните h тагове от елементите на шаблона, изобразиха заглавието на всяка статия в h1 тага, присвоиха h2 тагове на обяви на публикации в категории.

Сега, използвайки тагове h1-h6, можете да дадете на вашите публикации ясна структура, която търсачките обичат толкова много. Но тук е проблемът – стиловете на заглавията, меко казано, оставят много да се желае.

Прост голям черен шрифт изглежда твърде скучен. Ярките цветове явно изискват заглавия.

Заглавието на статията в h1 просто иска да бъде подчертано с някаква линия, рамка или дори красиво фоново изображение с подрязани ръбове. Също така е желателно заглавието на следващото по-ниско ниво да е с малко по-малък шрифт от предишното.

Искате вашият сайт да е приятен за окото? Тогава нека научим как да присвояваме стилове на заглавките на уебсайта.

По традиция ще работим с шаблона Twenty Eleven. По-долу ще изброя няколко стила на заглавки, които можете да промените според вашите вкусове. Междувременно нека веднага да разберем къде са написани стиловете на заглавията в шаблона и къде ще вмъкнем нашия код.

Къде в шаблона се показват стиловете на заглавия?

Отворете "Външен вид" - "Редактор". Намерете стиловия лист style.css. Намерете блок от текст, наречен /* =Global.

Той съдържа редовете:

/* Заглавия */ h1,h2,h3,h4,h5,h6 ( ясно: и двете; )

Това са тези, с които ще работим.

Трябва да напишем следното вместо този код:

/* Заглавия */ h1 (бла бла бла) h2 (бла бла бла) h3 (бла бла бла) h4 (бла бла бла)

Вместо бла бла бла ще замените вашите собствени стойности за шрифтове, отстъпи, градиенти.

Ако някаква стойност, например размер на шрифта, не работи, тогава има конфликт на стилове. В този конкретен ред, преди точката и запетая, трябва да въведете вълшебната дума! важно Тази дума отменя ефекта на стилове от други части на документа и принуждава тази конкретна команда да бъде изпълнена.

Ще изглежда така:

Размер на шрифта: 23px !важно;

В общи линии беше така:

Готови стилове на хедъри за уебсайтове

Заглавка с рамкирано фоново изображение

Този стил използва плътно запълване и изображение за фон на заглавката. CSS кодът е конструиран правилно: отстъпите са посочени в проценти, така че когато изображението се намали, текстът на заглавието не се слива с фоновото изображение. Шрифтове - Titillium Web (sans-serif), Muli (sans-serif).

Направих заглавките тук на сайта въз основа на този стил.

H1 ( поле: 1em 0 0.5em 0; тегло на шрифта: 600; семейство шрифтове: "Titillium Web", sans-serif; позиция: относителна; размер на шрифта: 36px; височина на реда: 40px; подложка: 15px 15px 15px 15%; цвят: #355681; кутия-сянка: вмъкване 0 0 0 1px rgba(53,86,129, 0.4), вмъкване 0 0 5px rgba(53,86,129, 0.5), вмъкване -285px 0 35px бяло; радиус на границата: 0 10px 0 10px; фон: #fff url(../images/bartoszkosowski.jpg) без повторение център вляво; ) h2 ( поле: 1em 0 0,5em 0; тегло на шрифта: нормално; позиция: относителна; сянка на текста : 0 -1px rgba(0,0,0,0.6); размер на шрифта: 28px; височина на реда: 40px; фон: #355681; фон: rgba(53,86,129, 0.8); рамка: 1px плътен #fff; padding: 5px 15px; цвят: бял; border-radius: 0 10px 0 10px; box-shadow: inset 0 0 5px rgba(53,86,129, 0.5); font-family: "Muli", sans-serif; ) h3 ( поле: 1em 0 0,5em 0; тегло на шрифта: 600; семейство шрифтове: "Titillium Web", sans-serif; позиция: относителна; текстова сянка: 0 -1px 1px rgba(0,0,0,0.4); размер на шрифта: 22px;височина на реда: 40px;цвят: #355681; преобразуване на текст: главни букви; граница-отдолу: 1px плътен rgba(53,86,129, 0.3); ) h4 ( поле: 1em 0 0,5em 0; тегло на шрифта: 600; семейство шрифтове: "Titillium Web", sans-serif; позиция: относителна; размер на шрифта: 18px; височина на реда: 20px; цвят: #788699 ; семейство шрифтове: "Muli", sans-serif; )

Ще доведа изображението, използвано в примера, до пълен размер.

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

Адресът на изображението е изписан в реда:

Фон: #fff url(../images/bartoszkosowski.jpg) без повторение в центъра вляво;

Моля, включете пълния URL адрес на изображението на вашия сайт. Можете да добавите снимка към сайта чрез програмата за качване на медии, без да я публикувате в статията. Там в мениджъра за изтегляне можете да видите адреса на вашето ново изображение.

Цветът на текста може да бъде променен на всеки друг в реда

Цвят: #355681;

Хедър за уеб сайт с тъмен дизайн

Лицето има контраст от ярко син цвят и тъмно сив фон. Шрифтове - Hammersmith One (без сериф), Questrial (без сериф).

H2:след, h3:след, h4:след (позиция: абсолютна; съдържание: ""; ляво: 0; горе: 0; долу: 0; ширина: 5px; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3); ) h2:след (фон: #0AF;) h3:след (фон: #3BF;) h4:след (фон: # 6Cf; ) h1 (размер на шрифта: 36px; височина на реда: 40px; поле: 1em 0 .6em 0; тегло на шрифта: нормално; цвят: бял; семейство шрифтове: "Hammersmith One", sans-serif; текст- сянка: 0 -1px 0 rgba(0,0,0,0.4); позиция: относителна; цвят: #6Cf; ) h2 (поле: 1em 0 .6em 0; подложка: 0 0 0 20px; тегло на шрифта: нормално; цвят: бял; семейство шрифтове: "Hammersmith One", sans-serif; сянка на текста: 0 -1px 0 rgba(0,0,0,0.4); позиция: относителна; размер на шрифта: 30px; височина на линия: 40px; ) h3 ( марж: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; цвят: бял; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); позиция: относителна; размер на шрифта: 24px; височина на реда: 40px; семейство шрифтове: "Questrial", sans-serif; ) h4 ( поле: 1em 0 .6em 0; подложка: 0 0 0 20px; тегло на шрифта: нормално; цвят: бял; семейство шрифтове: "Hammersmith One", sans-serif; текстова сянка: 0 -1px 0 rgba (0,0,0,0.4); позиция: относителна; размер на шрифта: 18px; височина на реда: 20px; семейство шрифтове: "Questrial", sans-serif; )

Заглавка на фона на дървена текстура

Шрифтове - Scada (без сериф), Carrois Gothic (без сериф). Листовката за заглавието h2 е реализирана чрез шрифт, а не чрез изображение.

H1 i, h2 i, h3 i, h4 i (padding-right: 10px; цвят: #A8D13B; font-size: 0.8em; ) h2:after, h3:after, h4:after (позиция: абсолютна; съдържание: " "; височина: 1px; радиус на границата: 2px; ляво: 0; дъно: 0; сянка на полето: 0 -1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.6); ) h2:след (ширина: 100%;) h3:след (ширина: 75%;) h4:след (ширина: 50%;) h1 (поле: 1em 0 0,75em; подложка: 0 0 5px 0; цвят: #6B5344 ; тегло на шрифта: нормално; позиция: относителна; сянка на текста: 0 2px 0 rgba(255,255,255,0.5); размер на шрифта: 36px; височина на реда: 40px; семейство шрифтове: "Carrois Gothic", sans-serif; ) h2 ( поле: 1em 0 0.75em; подложка: 0 0 5px 0; цвят: #6B5344; тегло на шрифта: нормално; семейство шрифтове: "Scada", sans-serif; позиция: относителна; текстова сянка: 0 2px 0 rgba(255,255,255,0.5); font-size: 30px; line-height: 40px; ) h3 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font- семейство: "Scada", sans-serif; позиция: относителна; текстова сянка: 0 2px 0 rgba(255,255,255,0.5); размер на шрифта: 24px; височина на реда: 40px; ) h4 ( поле: 1em 0 0,75em; подложка: 0 0 5px 0; цвят: #6B5344; тегло на шрифта: нормално; семейство шрифтове: "Scada", sans-serif; позиция: относителна; текстова сянка: 0 2px 0 rgba(255,255,255,0.5); размер на шрифта: 18px; височина на реда: 20px; )

Заглавия с удебелен шрифт

Семпло и ненатрапчиво. Може би тази цветова схема ще ви даде някаква нова идея.

H1 ( поле: 1em 0 0,5em 0; тегло на шрифта: 100; преобразуване на текста: главни букви; цвят: #00caa6; стил на шрифта: курсив; семейство шрифтове: "Josefin Sans", sans-serif; размер на шрифта: 58px; line-height: 54px; text-shadow: 2px 5px 0 rgba(0,0,0,0.2); ) h2 ( margin: 1em 0 0.5em 0; color: #148773; font-size: 26px; line- височина: 40px; тегло на шрифта: удебелен; семейство шрифтове: "Josefin Sans", sans-serif; ) h3 (поле: 1em 0 0.5em 0; цвят: #343434; размер на шрифта: 22px; височина на линия: 40px ; тегло на шрифта: 100; преобразуване на текст: главни букви; семейство шрифтове: "Josefin Sans", sans-serif; разстояние между буквите: 1px; стил на шрифта: курсив; ) h4 (поле: 1em 0 0,5em 0; цвят : #343434; размер на шрифта: 18px; височина на реда: 20px; тегло на шрифта: получер; семейство шрифтове: "Josefin Sans", sans-serif; )

Прости заглавия във вестникарски стил

Стилът е идеален за медиен уебсайт. Без излишни украшения. Шрифтове – Ultra (sans-serif), Orienta (sans-serif).

Английски източник за тези стилове: http://tympanus.net/codrops/2012/11/02/heading-set-styling-with-css/

Заглавка в стил уеб 2.0

Заглавката е направена само в CSS без изображения. Полупрозрачен блок покрива основния текст. Цвят, фон, размер могат да се променят по ваш вкус.

Ако използвате няколко елемента с различна степен на прозрачност, можете да оцветите заглавния текст с ивици или да създадете красив градиент.

Пример 1. Заглавка в стил Web 2.0

H3#пример ( шрифт: нормален 27px tahoma; позиция: относителна; фон: #000; цвят: #0cf; подложка: 10px 0px; ) h3#примерен обхват (позиция: абсолютна; горе: 29px; ляво: 0; ширина: 100 %; височина: 15px; фон: #000; /* цветът на наслагвания блок трябва да съвпада с цвета на фона на основния блок */ преливане: скрит; непрозрачност: 0,45; филтър: алфа(opacity=45); )

Този метод обаче има един недостатък: частта от текста, която се намира под полупрозрачния блок, не може да бъде избрана с курсора.

Заглавка с шаблон

Тук не се наслагва полупрозрачен блок, а пълноценно изображение във формат PNG или GIF. Картината може да бъде всякакъв модел. В спектъра на шаблона трябва да има само един цвят - цветът на фона.

Пример 2. Проектиране на заглавка с шаблони

H3#example2 (шрифт: нормален 27px tahoma; позиция: относителна; фон: #000; цвят: #0cf; подложка: 10px 0px; ) h3#example2 span (позиция: абсолютна; горе: 15px; ляво: 0; ширина: 100 %; височина: 30px; фон: url(lines.gif); /* картина-модел */ преливане: скрито; непрозрачност: 0,60; филтър: алфа(opacity=60);/ )

В този пример текстът е засенчен, но можете да му придадете всякаква текстура: метален блясък, зърно, градиент, флорален модел.

Въз основа на всеки от тези стилове можете да създадете свои собствени уникални заглавия. В заключение ще дам малка таблица с основните свойства на текста, които могат да ви бъдат полезни.

Дизайнът на текстовата информация в мрежата има свои специфични особености. Ако публикувате някакво съдържание на сайта, тогава, като правило, то трябва да бъде добре структурирано - за това се използват заглавия. С тяхна помощ текстовете се правят максимално лесни за четене и разбиране.

Няколко точки преди да започнем:

• Всички примерни шрифтове са безплатни и достъпни в Google WebFonts.
• В примерите има само заглавки H1-H4, тъй като те са най-често използваните.
• Авторът на CSS стиловете използва модел, в който [ширина] = [действителна ширина на елемента] + [подложка] + [граници]. В кода има фрагмент за това:

*, *:след, *:преди (оразмеряване на кутия: граница-кутия;)

И накрая, въведението споменава понятието „вертикален ритъм“. Той всъщност задава цялата подложка между блоковете на страницата - било то заглавия, текстови параграфи, изображения или дори само елементи на шаблон на уебсайт. Това е особено вярно, когато използвате необичайни. И така, всички примери за CSS стилове използват един и същ „ритъм“:

h1 (размер на шрифта: 36px; височина на реда: 40px;) h2 (размер на шрифта: 30px; височина на реда: 40px;) h3 (размер на шрифта: 24px; височина на реда: 40px;) h4 (размер на шрифта : 18px; височина на реда: 20px; )

Сега можете да преминете директно към практиката.

Пример 1

Нека започнем с повече или по-малко проста опция. Типографията е чудесна за медиен уебсайт, може би дори за вестник. Това решение не предлага никакви специални функции, освен че използва 2 шрифта - Ultra (без сериф), Orienta (без сериф). Краен CSS код:

Demo-1 .main h1 ( margin: 1em 0 0.5em 0; color: #343434; font-weight: normal; font-family: "Ultra", sans-serif; font-size: 36px; line-height: 42px; преобразуване на текст: главни букви; сянка на текст: 0 2px бяло, 0 3px #777; ) .demo-1 .main h2 ( поле: 1em 0 0.5em 0; цвят: #343434; тегло на шрифта: нормално; размер на шрифта : 30px; line-height: 40px; font-family: "Orienta", sans-serif; ) .demo-1 .main h3 ( поле: 1em 0 0.5em 0; цвят: #343434; размер на шрифта: 22px; линия -height: 40px; font-weight: normal; text-transform: uppercase; font-family: "Orienta", sans-serif; междубуквени интервали: 1px; font-style: italic; ) .demo-1 .main h4 ( поле: 1em 0 0,5em 0; цвят: #343434; размер на шрифта: 18px; височина на реда: 20px; тегло на шрифта: нормално; семейство шрифтове: "Orienta", sans-serif; )

Пример 2

Ето една малко по-интересна реализация - добавен е фон за заглавието под формата на плътно запълване и картина. CSS кодът е написан доста правилно, отстъпите са посочени в проценти, така че при намаляване на изображението текстът на заглавието да не се слива с фоновото изображение. Използвани шрифтове: Titillium Web (sans-serif), Muli (sans-serif).

Demo-2 .main h1 ( margin: 1em 0 0.5em 0; тегло на шрифта: 600; семейство шрифтове: "Titillium Web", sans-serif; позиция: относителна; размер на шрифта: 36px; височина на реда: 40px; подложка: 15px 15px 15px 15%; цвят: #355681; box-shadow: вмъкване 0 0 0 1px rgba(53,86,129, 0.4), вмъкване 0 0 5px rgba(53,86,129, 0.5), вмъкване -285px 0 35px бяло ; border-radius: 0 10px 0 10px; фон: #fff url(../images/bartoszkosowski.jpg) без повторение в центъра вляво; ) .demo-2 .main h2 ( марж: 1em 0 0.5em 0; font- тегло: нормално; позиция: относителна; сянка на текста: 0 -1px rgba(0,0,0,0.6); размер на шрифта: 28px; височина на реда: 40px; фон: #355681; фон: rgba(53,86,129 , 0,8); граница: 1px плътен #fff; подложка: 5px 15px; цвят: бял; border-radius: 0 10px 0 10px; box-shadow: inset 0 0 5px rgba(53,86,129, 0.5); font-family: "Muli", sans-serif; ) .demo-2 .main h3 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; позиция: относителна; text- сянка: 0 -1px 1px rgba(0,0,0,0.4);размер на шрифта: 22px; височина на реда: 40px; цвят: #355681; преобразуване на текст: главни букви; граница-отдолу: 1px плътен rgba(53,86,129, 0.3); ) .demo-2 .main h4 ( margin: 1em 0 0.5em 0; тегло на шрифта: 600; семейство шрифтове: "Titillium Web", sans-serif; позиция: относителна; размер на шрифта: 18px; височина на реда: 20px; цвят: #788699; семейство шрифтове: "Muli", sans-serif; )

Пример 3

Сега пример за внедряване на хедъри за сайт с тъмен дизайн. За тази цел е избран доста ярък, контрастен син цвят в контраст с тъмносивия фон. Използваните шрифтове са Hammersmith One (sans-serif), Questrial (sans-serif).

Demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after ( позиция: абсолютна; съдържание: ""; ляво: 0; горе: 0; долу: 0; ширина: 5px; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3); ) .demo-3 .main h2:after ( фон: #0AF;) .demo-3 .main h3:after (фон: #3BF;) .demo-3 .main h4:after (фон: #6Cf;) .demo-3 .main h1 (размер на шрифта: 36px; line-height: 40px; margin: 1em 0 .6em 0; font-weight: normal; цвят: бял; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0 ,0,0,0.4); позиция: относителна; цвят: #6Cf; ) .demo-3 .main h2 ( поле: 1em 0 .6em 0; подложка: 0 0 0 20px; тегло на шрифта: нормално; цвят: бял ; семейство шрифтове: "Hammersmith One", sans-serif; сянка на текста: 0 -1px 0 rgba(0,0,0,0.4); позиция: относителна; размер на шрифта: 30px; височина на реда: 40px; ) .demo-3 .main h3 ( margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; цвят: бял; font-family: "Hammersmith One", sans-serif; текстова сянка: 0 -1px 0 rgba(0,0,0,0.4); позиция: роднина; размер на шрифта: 24px; височина на реда: 40px; семейство шрифтове: "Questrial", sans-serif; ) .demo-3 .main h4 ( margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; цвят: бял; font-family: "Hammersmith One", sans-serif; text-shadow : 0 -1px 0 rgba(0,0,0,0.4); позиция: относителна; размер на шрифта: 18px; височина на реда: 20px; семейство шрифтове: "Questrial", sans-serif; )

Пример 4

Нека експериментираме с фона - какво ще кажете за добавяне на дървена текстура. Шрифтове Scada (sans-serif), Carrois Gothic (sans-serif) и листовката за H2 също е внедрена чрез шрифт, а не чрез изображение.

Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i (padding-right: 10px; цвят: #A8D13B; font-size: 0.8em; ) .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after ( позиция: абсолютна; съдържание: ""; височина: 1px; радиус на границата : 2px; отляво: 0; отдолу: 0; box-shadow: 0 -1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.6); ) .demo-4 .main h2:after (ширина: 100%;) .demo-4 .main h3:after (ширина: 75%;) .demo-4 .main h4:after (ширина: 50%;) .demo-4 .main h1 ( марж: 1em 0 0.75em; подложка: 0 0 5px 0; цвят: #6B5344; тегло на шрифта: нормално; позиция: относителна; сянка на текста: 0 2px 0 rgba(255,255,255,0.5); размер на шрифта: 36px; височина на линия: 40px; семейство шрифтове: "Carrois Gothic", sans-serif; ) .demo-4 .main h2 ( поле: 1em 0 0.75em; подложка: 0 0 5px 0; цвят: #6B5344; тегло на шрифта: нормално; шрифт -семейство: "Scada", sans-serif; позиция: относителна; текстова сянка: 0 2px 0 rgba(255,255,255,0.5); размер на шрифта: 30px; височина на реда: 40px; ) .demo-4 .main h3 ( поле: 1em 0 0,75em; подложка: 0 0 5px 0; цвят: #6B5344; тегло на шрифта: нормално; семейство шрифтове: "Scada", sans-serif; позиция: роднина; текстова сянка: 0 2px 0 rgba(255,255,255,0.5); размер на шрифта: 24px; височина на реда: 40px; ) .demo-4 .main h4 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; позиция: относителна; текстова сянка: 0 2px 0 rgba(255,255,255,0.5); размер на шрифта: 18px; височина на реда: 20px; )

Пример 5

Друга интересна и необичайна цветова схема - може би ще ви тласне към някои ваши собствени идеи и реализации. Заглавията по принцип не винаги могат да имат удебелен, голям шрифт - има такива опции.

Demo-6 .main h1 ( margin: 1em 0 0.5em 0; font-weight: 100; text-transform: uppercase; color: #00caa6; font-style: italic; font-family: "Josefin Sans", sans-serif ; font-size: 58px; line-height: 54px; text-shadow: 2px 5px 0 rgba(0,0,0,0.2); ) .demo-6 .main h2 ( поле: 1em 0 0.5em 0; цвят: #148773; размер на шрифта: 26px; височина на реда: 40px; тегло на шрифта: удебелен; семейство шрифтове: "Josefin Sans", sans-serif; ) .demo-6 .main h3 ( марж: 1em 0 0.5em 0 ; цвят: #343434; размер на шрифта: 22px; височина на реда: 40px; тегло на шрифта: 100; трансформация на текст: главни букви; семейство шрифтове: "Josefin Sans", sans-serif; разстояние между буквите: 1px; шрифт -style: italic; ) .demo-6 .main h4 ( margin: 1em 0 0.5em 0; color: #343434; font-size: 18px; line-height: 20px; font-weight: bold; font-family: " Josefin Sans", без сериф; )

Ако познавате CSS почти напълно, тогава оригиналната статия ви казва как да използвате определени предварителни процесори в стилове, за да намалите количеството код и да го направите по-опростен. За да бъда честен, това е първият път, когато виждам използването на функции и заместване на параметри във файл със стил CSS, но кодът се оказва много визуален. Освен това, разбира се, в оригиналната статия ще намерите връзки към източници и демо версии на всички опции.

P.S. T За тези, които работят в Интернет или тепърва започват, статия за това какво е TIC ще ви помогне да се ориентирате в една от най-подходящите и обсъждани концепции в Интернет.

Казват, че не можеш да съдиш за книгата по корицата и въпреки това хората го правят всеки ден. Те взимат книга, гледат корицата и след това взимат нова, или я връщат обратно, или я обръщат и гледат какво има на гърба, ИЛИ я отварят само като гледат корицата. Уебсайтовете също се оценяват по корицата и първото им впечатление, което често идва от заглавието.

Заглавието на вашия сайт обикновено е първото нещо, което хората виждат. От този текст или рисунка в горната част на страницата хората правят широки преценки за това какво ще видят и прочетат. Същите хора, които казват, че не можете да съдите за книга по корицата, също казват, че имате само 30 секунди, за да направите добро впечатление. В света на Интернет, където следващата страница е само на един клик разстояние, имате много по-малко време да направите това.

Ще ви преведем през архитектурата на заглавката в WordPress и ще ви предложим съвети как да я персонализирате, така че да стане ваша собствена „корица на книга“, която примамва хората към вашия сайт, като същевременно прави добро впечатление. След това ще ви предложим няколко експертни съвета какво точно представлява едно добро заглавие на уебсайт.

Съдържание

Заглавка на WordPress

По подразбиране заглавката в WordPress е прост фрагмент от код. Не е необходимо да разбирате никакъв код, за да промените заглавката, която идва с която и да е тема на WordPress. Трябва да зададете заглавието и описанието на вашия блог или сайт на > > и WordPress ще свърши останалото.

В най-простата си форма - класическата тема - WordPress Header е код във файла на шаблона wp-content/themes/classic/header.php:

">

Заглавието се намира в тага h1 и изпълнява функцията да се използва в две различни опции или параметъра. Можете да научите повече за тези опции в. По принцип първият показва сайта във връзката, а вторият показва името на блога или сайта, както е зададено в панела > >. Когато потребителят премести курсора върху заглавие, върху заглавието може да се щракне, за да се върне към главната или началната страница на сайта, както е посочено в панела >>.

Темата на WordPress по подразбиране открива характеристиките на изображенията във фонов режим и представя заглавката по този начин в wp-content/themes/default/header.php:

Заглавката на темата по подразбиране/Кубрик

Тагът на шаблона показва името на блога или уебсайта във връзката, но това демонстрира друга употреба на заявка, подобна на URL адреса по-горе. Той получава същата информация, но по различен начин. Той добавя от описаниясайт в >>.

Просто казано, тези два примера за заглавки правят едно и също нещо по различни начини. Те предоставят заглавна информация с потенциал за включване на изображение, а създаването може да помогне при навигацията в сайта. Въпрос е само колко информация искате да видите в заглавката си и как тази информация ще бъде показана.

Използвайки първия пример от класическата тема, изображението все още може да се използва като фоново изображение, зададено в листа със стилове в селектора h1, втората тема дава повече контрол върху използването на изображението в заглавката, като му дава собствено разделяне ■ площ. Как изглежда се контролира изцяло от листа със стилове.

Стил на заглавие

Както е посочено в двата примера по-горе, стиловете за заглавието се съдържат в селекторите: h1, заглавие, заглавиеimg и описание. Всичко това е в style.css, въпреки че може да бъде и в стиловите файлове header.php от темата, която използвате. Ще трябва да проверите и на двете места. В класическа тема CSS за заглавката се съдържа в един селектор #header.

#header (фон: #90a090; граница-отдолу: двойно 3px #aba; граница-ляво: плътен 1px #9a9; граница-дясна: плътен 1px #565; граница-отгоре: плътен 1px #9a9; шрифт: нормален курсив 230% "Times New Roman", Times, serif; разстояние между буквите: 0,2 em; поле: 0; подложка: 15px 10px 15px 60px; )

Зелен оттенък е избран като цвят на фона и граница около заглавката, но границата е с различен нюанс и създава ефект на вдлъбната сянка. Шрифтът Times New Roman е настроен на 230% размер с по-широко от нормалното разстояние между знаците. Страничен отстъп създава отстъп за текста в заглавието.

Всички те могат лесно да се променят чрез просто редактиране на всеки стилов атрибут: дебелината на рамката може да се увеличи и всички с един и същ цвят, цветът на фона, размерът и стилът на шрифта, разстоянието между буквите и т.н. могат да бъдат променени.

Същото важи и за заглавката в темата на WordPress по подразбиране, с изключение на това, че има още няколко стила, за които трябва да се погрижите. Те се намират в header.php в тага "head". Ив style.css. Когато има голям брой стилове, по-добре е да преместите цялата информация в лист със стилове.

Стиловете, които контролират външния вид на заглавката, са в рамките на h1, селектори за CSS заглавие, заглавиеimg и описание. Точно както при класическата тема, можете да намерите тези връзки и да направите промени там, за да промените външния вид.

Промяната на заглавието на изображението по подразбиране Темата на WordPress е опростена с въвеждането на помощна програма, наречена Kubrickr. Той просто ви моли да поставите ново име на файл с изображение за заглавието и след това го превежда вместо вас, така че да не се налага да ровите в кода. Ако всичко, което искате да промените, е вашето заглавно изображение, това е изключително полезен и прост инструмент.

Ако желаете, програмирайте или се заровете в стиловете си на заглавки и направете необходимите промени. По-долу има лесен урок за това как ръчно да промените само заглавието на изображение.