Начало > Помощен център > Апликации > WordPress > Създаване на WordPress бизнес сайт - персонализиране на настройки през WP Customizer

Създаване на WordPress бизнес сайт - персонализиране на настройки през WP Customizer

Помощен център

Създаване на WordPress бизнес сайт - персонализиране на настройки през WP Customizer

Следващата стъпка от създаване на бизнес сайта е да персонализираме настройките през WordPress Customizer в съответствие с избраните структура и дизайн на сайта.

Зареждане на сайт в WordPress Customizer

В секция Theme Settings имаме достъп до голям брой панели, в които ще въведем подходящите настройки:

Настройки в секция Theme Settings

В панела Branding премахваме оригиналното лого с бутона Remove или директно избираме от Media Library новото лого като кликнем бутона Change image. Изображението Retina Logo е същото като нормалното лого, но е с два пъти по-големи размери. Например, ако обикновеното лого е с размер 100х100 пиксела, изображението Retina Logo трябва да е с размер 200х200 пиксела.

Промяна на лого панела Branding

Има точно определени изисквания за името на файла Retina Logo. Той трябва да носи същото име като оригиналното лого като в края на името, преди точката с разширението, се добавя суфикс @2x - в примера, highline-yellow.png и highline-yellow@2x.png.

Ако разгледате кода на началната страница ще забележите, че първо се посочва пътя до нормалното лого като параметър src, а след това в параметъра srcset се посочват двата файла с добавките 1x и 2x след имената на файловете:

<div class="site-branding">
<a href="https://austin.icn-demo.com/" rel="home">
<span class="screen-reader-text">Home</span>
<img width="162" height="50" src="https://austin.icn-demo.com/wp-content/uploads/2019/11/highline-yellow.png" class="custom-logo" alt="highline logo" srcset="https://austin.icn-demo.com/wp-content/uploads/2019/11/highline-yellow.png 1x,https://austin.icn-demo.com/wp-content/uploads/2019/11/highline-yellow@2x.png 2x" /></a>
</div><!-- .site-branding -->

Retina Logo е предназначено за устройствата с Retina Display, а Retina Display е търговска марка, използвана от Apple за серията IPS LCD и OLED дисплеи с по-висока плътност на пикселите (pixel density) от традиционните дисплеи на Apple и предоставят много по-качествени изображения.

Дефинираме основен и допълнителен цвят за линковете като кликнем в цветната палитра или въведем код за желания цвят:

Избор на цвят от палитра

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

See Specimen в Google Fonts

В Main Font въвеждаме основния шрифт за текст в сайта. Опцията Variant има цифрови стойности между 100 и 900 като 100 означава много тънък текст, докато 900 е за максимално удебелен текст. Опцията Regular съответства на стойност 400.

Избор на шрифт Main Font

Heading font определя шрифта на заглавията:

Избор на шрифт Heading font

Details font е шрифта за подзаглавия:

Избор на шрифт Details font

Шрифта на линковете в менюто се дефинира в Menu font:

Избор на шрифт Menu font

Следващите настройки дефинират цвета на текста в следната последователност:

  • Dark - цвят на заглавия;
  • Medium - цвят на текста на страници и публикации;
  • Light - цвят на текста на коментари и хоризонтални списъци с линкове (breadcrumps);
  • Meta - цвят на мета информацията в публикациите - автор, категории, тагове;

Избиране цвят на текст

Цветовете на линковете в менюто се дефинират в следващата секция, където:

  • Menu Text Color е цвета на линковете;
  • Menu Text Hover Color e цвета на линка при посочване с мишката;
  • Menu Text Current Color е цвета на линка на текущата страница;

В панелите Icons и Page Structure не правим никакви промени и оставяме настройките по подразбиране.

В панела Header може да извършим следните промени:

  • Да поставим логото и менюто в центъра;
  • Да активираме текст в горната лента;
  • Да променим цветовете на фона на горната лента и менюто, както и цвета на границата;

Промени на настройки в Header

Промяна на цветове в структура в Header

А това са текущите настройки на сайта - възстановяваме огириналните цветове като кликнем бутона Default:

Възстановяване на настройки в Header

В панела Navigation избираме следните настройки:

  • Menu search - показване икона за търсене в главното меню;
  • Sticky menu - залепва менюто към горната част на екрана;
  • Sticky menu scales logo - при начално скролиране скалира размера на логото;
  • Post navigation - показване на следваща и предишна страница след публикация;
  • Scroll to top - бутон за връщане в началото на страницата;
  • Scroll to top on mobile - бутон за връщане в началото на страницата на мобилно устройство;
  • Smooth scroll - анимирано скролиране на страницата с вътрешни котвени връзки;

Настройки в панела Navigation

В панела Blog настройваме архивирането на публикациите да ползва кратък текст от 24 думи (Excerpt) с линк с текст Continue reading:

Настройки на архивиране в панела Blog

В панела Responsive оставяме настройките по подразбиране.

В панела Footer въвеждаме годината и домейна, както и дефинираме цветовете на заглавията, текста и линковете:

Настройки в панела Footer

С това завършихме персонализирането на настройките в Theme Settings.

В панела Page Templage Settings има две секции - Search Results и Not Found. И в двете избираме настройките, показани на следващото изображение, и изключваме всички останали опции:

Настройки в панел Page Templage Settings

В панела Site Identity въвеждаме името на сайта, което ще се изписва в таба на браузъра. Също така избираме икона за таба на браузъра в секция Site Icon:

Настройки в панела Site Identity

В панелите Colors и Background Images оставяме настройките по подразбиране.

Менюта и widgets ще редактираме по късно през администрацията на сайта, затова сега пропускаме панелите Menus и Widgets.

Настройката в панела Homepage е активирана автоматично при инсталацията, затова не променяме нищо:

Настройка на Homepage

В панела Additional CSS при създаването на сайта въведохме следния код, който се отнася за дребни настройки на няколко отделни елемента, които ще споменем при персонализиране на съответната страница.

#pgc-16-3-0 h2 a,
#pgc-16-3-1 h2 a,
#pgc-16-3-2 h2 a {text-decoration: none}

#colophon .widgets .widget-title {border-bottom: 1px solid #444444; width:20%; padding-bottom: 9px;}

ul#menu-ftr-services, ul#menu-footer-menu {list-style-type: square; color: #fcd33d}

.nav-next,.nav-previous a {font-size:18px}

.north-icon-previous::before,
.north-icon-next::before
{font-size:24px}

.site-content .widget-area {padding-top: 40px;}

Завършихме персонализирането на бизнес сайта през WordPress Customizer, в следващата статия продължаваме с изграждане на страници и секции в SiteOrigin.