Как да разширя или стесня страничната лента (sidebar) в сайта си

Въпрос: Как мога да разширя или стесня страничната лента на моя сайт? Къде мога да видя кода или има приставка (плъгин) за тази цел?

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

Но спокойно, операцията не е толкова сложна.

Коя част на сайта (блога) наричаме странична лента (sidebar)?

Вид на шаблон на сайт

Шаблонът на сайта се състои от набор от блокове, вмъкнати един в друг. Във външния блок – обвивката (контейнер – container) се включват блокове от заглавната част (header), основната част (съдържание – content), странична лента (sidebar) и долната част на сайта (долен колонтитул – footer).

Какво означават различните ширини?

• Ширина на контейнера : ширината на сайта (цялото съдържание). Може да се изрази в пиксели или проценти. Когато темата, която ползваме на сайта си, е флуидна или responsive, заема максимум от около 90% от основния контейнер. Това го прави дори и ако настроим оформлението да бъде 3000px широко. То никога няма да премине 90% от ширината на прозореца. Следователно и да сменим екрана, съдържанието на сайта ни винаги ще бъде видимо.
• Ширина на съдържанието : областта със съдържанието, когато имаме активирана странична лента (лява или дясна).
• Ширина на страничната лента.

Странична лента

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

Този елемент не винаги е активиран. Има различни опции в зависимост от избрания за блога шаблон и в зависимост от настройката на страниците, която сме избрали. Най-често срещаната е тази, която има централна колона за съдържанието и странична лента (обикновено дясна).

Има и други комбинации, например – странична лента от всяка страна или и две отдясно.

Сега да рзгледаме основния въпрос – как можем да променяме ширината й, местоположението й (вляво или вдясно) и ширината на блока на основното съдържание.

(adsbygoogle = window.adsbygoogle || []).push({});
 

Изглед на сайт само с визуални промени

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

Ще използваме инструментите на Developer tools на Chrome браузър.

Отваряме един случайно избран блог, който има странична лента.

Кликваме върху страницата. С десен клавиш на мишката избираме Inspect Element. Появява се панел – отдясно или в долната част на браузъра.(Може да се промени положението, както писах в публикацията по горния линк.) В този панел HTML кодът на страницата и CSS свойствата на елементите са видими. Когато преминем с мишката върху HTML кода на някой от основните блокове, той се маркира в синьо. Бързо можем да се ориентираме кои са блоковете, които в случая на този сайт ни интересуват:

Общият контейнер е „container full pro“, съдържанието е „news-article“, а страничната лента се състои от няколко блока, групирани с HTML таг aside id=“sidebar“.

Размерите на маркирания блок се появяват в ъгъла, а също така можем да видим размерите в CSS в долния десен ъгъл -> ширина: 650px. Ясно ни е, че ширината на блока за съдържание е 650 пиксела. Сега ще я променя, а новата ширина на този блок ще избера да бъде 900 пиксела.

Ако направя веднага това, ще скрия страничната лента, затова избирам първо да я преместя в крайно дясно. Преди това направих опити да намаля размера й от 300px на 250px, но видях, че отделните блокове, от които е съставена, не се виждат добре. Намирам в CSS блока на Inspect Element отговарящото за местоположението на елемента в контейнера свойство float и го променям от left на right – float: right;

Сега вече можем да разширим и частта на съдържанието от 650px на 900px:

И ето какво получавам като резултат – на първия гиф е оригиналната страница:

На втория гиф е временно променената страница:

След промяна на ширината на блоковете, е необходимо да си запишем някъде, какво точно се е променило и в кой ред. Това ни е нужно за по-късни, вече реални промени в stylesheet css. Да не забравяме, че досега работим във визуалния редактор. Промените, които направихме, са само визуални и не са запазени на сървъра.

Така че всичко, което остава, е да направим промени в файла style.css.

Промяна на ширината на страничната лента и на съдържанието в CSS файл

Можем да редактираме темата си директно от панела на администратора на WordPress, като отидем на „Редактиране„. Отворяме файла style.css, в който ще трябва да търсим онези имена на секциите, които сме установили, работейки в Inspect Element.

В моя шаблон те са съответно .main-container, .article и .sidebar.c-4-12. Максималната ширина на главния контейнер е 96%, тъй като темата на сайта е responsive и идеално се намества на всякакви екрани. Увеличавам размера на главния контейнер със 100px, в .article – ширината от 68.4 на 75% и намалявам ширината в .sidebar от 340 px на 300px и от 29.1% на 25% (така че общата им ширина да е по-малка или равна на 100%). Така успявам да увелича ширината на блока за разполагане на текста на публикациите. Промяната в .css файловете може да се направи на едно от тези места:

• редактирайки ги в Редактиране в администраторския панел,
• във Външен вид–>Настройки–>Допълнителен CSS,
• или ако темата има Styling Options –> в css custom.

Ето отговарящия за промените CSS код, в моя случай:

Извършваме промените, като внимаваме за джаджите в страничната лента.

Заключение

Както казах по-горе, всеки шаблон на сайт има различни наименования на отделните блокове. За да открием кои са, трябва да прегледаме HTML и CSS кода му чрез инструментите за разработчици – Developer tools. Отново, чрез тези инструменти, да направим и визуални промени на сайта си, за да видим какъв ще бъде новият му вид. След това да потърсим съответните наименования на блоковете на главния контейнер, на съдържанието и на страничната лента чрез CTRL F в style.css файла на нашата тема. И да извършим промените в кода, както показах, дописвайки нов код, в който променяме само нужните редове.

Източник за първото изображение freepik.com, дизайнер pinnacleanimates.