• Начало
  •  > 
  • Десктоп, десктоп
  •  > 
  • WordPress увеличава ширината на шаблона или разтяга страничното меню и секцията със статии. Как да създадете страница с пълна ширина в WordPress Как да разширите тема в WordPress

WordPress увеличава ширината на шаблона или разтяга страничното меню и секцията със статии. Как да създадете страница с пълна ширина в WordPress Как да разширите тема в WordPress

Често се случва темата, която харесвате, да има тясна област за въвеждане и настройките й да не позволяват промяна на ширината. В този случай може да се увеличи с минимални познания HTMLИ CSS. Например, използваме популярната безплатна тема Patagonia. Можете да разширите темата си с помощта на страхотен плъгин Firefox— Firebug. Първо трябва да го инсталирате, като го изтеглите от тук. След това го включете плъгин, както е показано на снимката - Раздел Инструменти — Уеб разработка — Firebug — отворете Firebug:

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

. От дясната страна ще се покаже фрагмент от файла style.css. И тук можете да видите, че ширината на основната област е 580 пиксела. И това не е достатъчно за нашите нужди.

например, увеличете ширинатаосновната област от 550 пиксела до 620. За да направите това, трябва да направите промени в линията ширина: 550pxфайл style.css. Ако темата вече е инсталирана, можете да редактирате този файл директно от административния панел; ако не, тогава трябва да разопаковате архива с темата и да направите промени във файла с помощта на редактора. В нашия случай темата е инсталирана, така че отидете на админ панел— Външен вид — редактор— отворете файла style.css, потърсете ширината на линията: 550px и променете стойността на ширината от 550px на 620px. Кликнете Актуализирайте файла.

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

>. Във файл style.css, виждаме, че ширината на страничната лента не е зададена изрично чрез свойството ширина, и с помощта поле: 0 0 0 580px;

Следваме същата процедура с редактиране на style.css, както в предишния случай с основната област, само че сега редактираме реда поле: 0 0 0 580px;Променяме стойността на отстъпа в него от 580px на 630px. Сега всичко е наред. Зоната на запис е станала по-широка и не припокрива зоната странична лента. Също така се случва, че стиловете са написани не само във файла style.css, но и във файла screen.css.

Проблем, който често възниква при избора на WordPress шаблон е недостатъчната ширина на блоковете. Много хора веднага искат да променят ширината на шаблона. За тези, които са добре запознати с html или php, това няма да създаде никакви специални проблеми. Но за да напишете подробно как да направите промени в размерите на WordPress шаблон за неподготвен човек, ще ви трябва цяла брошура.

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

Има невероятно разнообразие от WordPress шаблони, всички те са различни и всеки се променя по свой начин. Но такива основни блокове като: ширината на главната страница, горния колонтитул, лявата и дясната колона и долния колонтитул са там. За работа ще ни трябва:

  • Уеб браузър Mozilla Firefox.
  • Плъгинът Firebug е инсталиран на Firefox.

Когато всичко необходимо е изтеглено, инсталирано и готово за работа, отворете избрания шаблон в Mozilla Firefox и стартирайте Firebug, като щракнете върху иконата на бръмбар.

Плъгин панел

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

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

Чувствайте се свободни да експериментирате с всякакви елементи и стойности. Текущите промени не могат по никакъв начин да повлияят на вашата страница на сървъра; те са активни само в прозореца на приставката (текущият кеш на Mozilla). При актуализиране всички настройки се нулират.

Редактиране на style.css

Сега всичко, което остава, е да запазите тези промени за шаблона на WordPress. Обикновено ширината на шаблона се определя в style.css. Влизаме в административния панел на уебсайта → външен вид → редактор → style.css → ред 79, променяме стойността на ширината. Запазване.

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

Без странична лента сайтът изглежда безполезен. Ако искате по някакъв начин да разредите визуално съдържанието на страницата, трябва да промените шаблона на WordPress, като добавите странична лента с определен размер. Обикновено страничните ленти вече са инсталирани по подразбиране. Но ширината на страничната лента не винаги е оптимална за конкретен проект. Нека да разгледаме методите за промяна на ширината и височината на страничната част на WordPress сайт.

Какъв трябва да бъде размерът на страничната лента?

Може да не е необходимо да променяте нищо. Страничната колона трябва да се променя само ако изглежда „крива“ и неестествена. Първо се уверете, че страничната лента има по-малка ширина от основната част на страницата, съдържаща съдържанието. Страничната лента не е ключова част от сайта, така че не трябва да привлича много внимание – тя може да заема най-много 40% от видимата част на страницата. Моля, обърнете внимание, че ако имате две странични ленти (или няколко), тяхната ширина не трябва да надвишава 50% от ширината на цялата страница. По-добре е да използвате само една странична колона - така е по-ефективно.

Има „златно правило“ на дизайнерите за сайтове, които използват само една странична лента. Това правило гласи, че ако има само една странична лента на страница, тя не трябва да заема повече от 38% от ширината на сайта. Много видни уеб дизайнери (например: Jarel Remick) говорят за тази мистериозна фигура.

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

Как да преоразмерите странична лента ръчно

Сега нека поговорим за това как независимо да промените размера на страничните колони и самата рамка на шаблона, без да използвате никакви добавки. Този метод включва промяна на изходния код на страницата. Именно в html таговете се съдържа параметърът за размер на шаблона. Моля, имайте предвид, че преоразмеряването може да има отрицателни последици, ако сте качили изображение със специален размер като фон. Ето защо е по-добре да промените параметрите на рамката на етапа на оформление на сайта.

Параметрите на страничната лента в кода са под формата на блок. За да промените размера на цялата рамка, включително страничните колони, ще трябва да влезете в кода и последователно да коригирате цифровите параметри на ширината и височината на всеки елемент. а именно:

  • хедър – отговаря за размера на хедъра на сайта;
  • bg е основното съдържание, тоест частта от страницата, в която ще се публикуват статии (именно в тази част се намира страничната лента);
  • footer е долният колонтитул на сайта, тоест неговата долна част.

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

За да промените размера на страничната лента, намерете нещо подобно:

Този ред отговаря за параметрите на средната част на страницата, тоест за блока със съдържание и страничните колони. Не докосвайте „основния“ ред – това е основната част на сайта. Трябва да намерите маркера „mainnav“ - това е страничната колона. Всичко, от което се нуждаете, е да промените елемента за ширина в CSS, който отговаря за ширината - въведете различна стойност на размера. Можете да направите страничната лента по-малка или по-голяма, но не забравяйте да следвате съветите за оразмеряване по-горе, за да сте сигурни, че вашият сайт се показва правилно.

За да бъдат запазени направените промени, те трябва да бъдат направени на сървъра. Това означава, че първоначално можете да тествате корекциите на локален хостинг, но след това не забравяйте да копирате редактирания файл style.css и да го добавите към основните бази данни на сървъра. Едва тогава промените ще влязат в сила.

Плъгин за промяна на размера на страничната лента

Ако не искате да се разхождате из вътрешността на Cascading Style Sheets и да търсите елементи, които трябва да бъдат редактирани, можете да използвате приставката Visual Sidebar Editor за WordPress. Това е специален модул, който е специално проектиран да генерира странични колони. Той е част от по-големия инструмент Visual Composer.

Приставката Visual Composer е естествен конструктор на страници за WordPress. С него можете да създадете готов шаблон от нулата. Модулът работи с кратки кодове и се инсталира много лесно. Ако преоразмеряването на страничната лента не е единственото нещо, което трябва да направите, по-добре е да изтеглите приставката Visual Composer и да добавите Visual Sidebar Editor като добавка. Ако единственият проблем е размерът на страната на страницата, тогава модулът Visual Sidebar Editor ще бъде достатъчен.

Предимството на използването на плъгин за промяна на страничната лента е, че той прави всичко автоматично. Тоест вие показвате какво искате да промените с помощта на системата Drag & Drop, а модулът независимо коригира кода на елемента въз основа на вашите заявки. Ако искате да опитате ръката си в редактирането на html тагове, тогава плъгинът ще ви даде тази възможност. Освен това има специални кратки кодове за добавяне на допълнителни функции към сайта - повече от 40 разширения.

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

Ако харесвате Visual Sidebar Editor, обмислете инсталирането на пълния комплект от добавката, модула Visual Composer. Тогава ще ви бъде лесно да редактирате всеки елемент на страниците на портала.

Искате ли да създадете страница с пълна ширина в WordPress?

Тогава да се върнем към това защо сме тук.


Метод 1: Използване на вградения шаблон за ширина в тема на WordPress

Този метод се препоръчва, ако вашата WordPress тема вече идва с шаблон на страница с пълна ширина. Ако нямате такъв, вижте следващия избор и вземете такъв.

Първо трябва да редактирате страницата или да създадете нова, като посетите " Страници>ДобавянеНова страница

В прозореца за редактиране на страница изберете Пълна ширинакато шаблон под полето за отметка атрибути на страницата.

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

Ако нямате опция „Пълна ширина“ – „шаблон с пълна ширина“ – на екрана за редактиране на вашата страница, това означава, че вашата тема на WordPress няма тази страница.

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

Метод 2: Как да създадете шаблон на страница с пълна ширина

Този метод изисква да редактирате файловете с теми на WordPress, които използвате, и да имате основни познания за PHP, CSS и HTML.

Между другото, ние също ви каним да се консултирате с

Първо, трябва да отворите текстов редактор като Notepad и да поставите следния код в празен файл:

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

След това ще ви трябва съдържателната част на кода. Свържете се със сайта си с помощта на FTP клиент ( или файлов мениджър в CPanel), след което отидете на /wp-contents/themes/вашата-тема-директория/ .

След това трябва да намерите файл, наречен " страница.php" Това е файлът с шаблон на страница по подразбиране за вашата тема.

Копирайте всичко след функцията " get_header()И го поставете във файла Пълна ширина.phpВие създадохте това на вашия компютър.

Сега трябва да погледнете съдържанието на файла "full-width.php" и да премахнете този ред код:

Този ред просто възстановява страничната лента и я показва във вашата WordPress тема. Като премахнете това, вашата тема няма да показва страничната лента, когато използвате шаблона Пълна ширина.

Може да видите този ред да се появява няколко пъти във вашата WordPress тема. Ако вашата WordPress тема има няколко, ще видите всяка странична лента, спомената веднъж в кода. Трябва да решите кои странични ленти искате да запазите.

Вашият уебсайт се зарежда бавно, открийте

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

Ето как нашият full-width.php код се грижи за извършването на промени. Вашият код може леко да варира в зависимост от вашата тема.

След това трябва да изтеглите файла Пълна ширина.phpВъв вашата папка с тема на WordPress, като използвате .

Успешно създадохте и качихте персонализиран шаблон на страница с пълна ширина за вашата тема. Следващата стъпка е да използвате този шаблон, за да създадете страница в пълен размер.

Отидете на таблото си за управление и редактирайте или създайте нова страница.

На екрана за редактиране на страница намерете квадратчето за отметка на атрибутите на страницата и щракнете върху падащото меню под опцията Модел.

Ще можете да видите вашия модел. Продължете, изберете го и запазете или опреснете страницата.

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

Направете сайта си популярен чрез откриване

Ще трябва да използвате инструмента Inspect, за да откриете CSS класовете, които вашата тема използва, за да дефинира областта на съдържанието.

След това можете да регулирате ширината му на 100% с помощта на CSS. Използвахме следния CSS код:

.str-template full-width zone.content (width: 100%; margin: 0px; border: 0px; padding: 0px; ) .str-template full-width.Output (margin: 0px; )

Ето как би изглеждал Twenty Seventeen.

Това е всичко за този урок, надявам се, че ще ви позволи да създавате страници в пълен размер.

Горните методи са безплатни за тези, които могат да си позволят и искат бързо да създават оформления с пълна или пълна ширина.

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

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

Предлагаме ви няколко премиум плъгина за WordPress, които ще ви помогнат да направите това.

1. Divi Builder

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

Divi Builder ви позволява да редактирате съдържанието си, като използвате преден визуален интерфейс, както и интерфейс от страна на сървъра, въпреки че повечето потребители предпочитат предишния интерфейс.

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

Каним ви да отворите

Една от характеристиките на Divi винаги е била контролът върху стиловете, които ви дава. С три различни раздела можете да конфигурирате различни настройки, включително адаптивни контроли, персонализирано разстояние и др.

Можете дори да добавите персонализиран CSS, защото неговият CSS редактор интегрира основно валидиране и автоматично довършване.Една от критиките към Divi Builder винаги е била, че е базиран на . Това означава, че ако го деактивирате веднъж, ще останете с куп кратки кодове във вашето съдържание. Въпреки че е малко разочароващо, сега има по-малко проблеми с добавки като Shortcode Cleaner.

2. Строител

Не е изненада, че Themify Builder е предложение от екипа на Themify. Той го интегрира в много от своите WordPress теми, за да предостави на клиентите лесни опции за персонализиране. Но можете също да го закупите като самостоятелен плъгин и да го използвате с всяка тема на WordPress.

Подобно на Divi Builder и WPBakery Page Builder, Themify Builder ви позволява да създавате оформления във фронтенда или бекенда.Друго хубаво нещо е, че този плъгин ви позволява да персонализирате вашите отзивчиви точки на прекъсване (но само на ниво сайт).

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

Интересна характеристика на Themify Builder е, че той все още ви позволява да използвате стандартния редактор на WordPress, докато други създатели на страници ви принуждават да използвате интерфейса на Page Builder за всичко.

3. Факир

Първоначално стартиран през 2016 г., плъгинът WordPress Elementor е един от най-младите разработчици в този списък. Въпреки късното си стартиране, Elementor бързо натрупа над 1 000 000 активни инсталации на WordPress.org, което го прави един от най-популярните създатели на WordPress.

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

От автора:Поздрави приятели. В следващата статия по темата за WordPress ще разгледаме въпроса как да промените шаблон на WordPress. Ако никога не сте се сблъсквали с необходимостта да променяте шаблон на WordPress, не забравяйте да прочетете тази статия, защото рано или късно най-вероятно ще трябва да се справите с проблемите на персонализирането и редактирането на шаблон на WordPress.

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

как да редактирате шаблон на wordpress

промяна на ширината на шаблона в WordPress

как да преоразмерите wordpress шаблон

как да промените цвета на шаблона на WordPress

как да промените шрифта в wordpress шаблон

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

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

Нека да отидем в раздела Външен вид - Персонализиране и да видим главната страница на сайта и наличните настройки на сайта в лявата част на страницата. Те могат да включват настройки на дизайна.

Като пример, нека опитаме да променим цветовата схема на сайта. Нека отидем в менюто Цветове и сменим фона на страничните и централните части на сайта.

Както можете да видите, това е доста удобно и промяната на цвета на WordPress шаблон е доста проста - виждаме резултата веднага и можем да го оценим.

Въпреки това, не всяка тема предлага всички настройки на шаблона на WordPress, от които се нуждаем. Например, малко вероятно е да има настройки, които ви позволяват да променяте ширината на шаблона в WordPress, например дори в текущата тема няма настройки, които ви позволяват да променяте шрифта в шаблона и т.н. Какво да направите в този случай? Тук ще трябва да прибегнем до втория вариант и тук вече са необходими някои умения за оформление.

И така, най-често трябва да редактираме само един файл - файла style.css. Намира се във вашата папка с теми. Нека променим цвета на шрифта като пример. Между другото, можете да направите това директно от административната област на WordPress. Просто бъдете внимателни и внимателни, за да не "счупите" сайта случайно. Най-добре е да направите резервно копие на вашата тема, преди да промените нещо в нея. И така, отидете в менюто Облик - Редактор и по подразбиране трябва да имате отворен файл за стилове на темата за редактиране.

Ако това не е така, изберете този файл от списъка вдясно, той се нарича Style Sheet (style.css). Най-често цветът на шрифта е зададен в тялото, така че нека намерим стиловете за този елемент и зададем червено като цвят на шрифта.

След като запазим файла, можем да обновим сайта и да видим червения цвят за основния шрифт на сайта.

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