Искате ли да създадете страница на WordPress в пълен размер?
Тогава да се върнем към защо сме тук.
Метод 1: използване на вградения шаблон за ширина в тема на WordPress
Този метод се препоръчва, ако вашата тема на WordPress вече се предлага с шаблон за страница в пълен размер. Ако го нямате, отидете на следващия избор и го вземете.
Първо, трябва да редактирате страницата или да създадете нова, като посетите " Страници> ДобавянеНова страница
В прозореца за редактиране на страницата изберете Пълна ширинакато шаблон под квадратчето за отметка атрибути на страницата.
След избор на модел Пълна ширинаТрябва да регистрирате страницата си. Можете да продължите да персонализирате страницата, за да добавите още съдържание, или да щракнете върху бутона за визуализация, за да я видите в действие.
Ако нямате опцията Full Width - Full Width Template на екрана за редактиране на вашата страница, това означава, че вашата WordPress тема няма тази страница.
Но не се притеснявайте, ние ще ви покажем колко лесно е да създадете страница с цяла страница, без да променяте темата на WordPress.
Метод 2: как да създадете шаблон за страница с пълна ширина
Този метод изисква от вас да редактирате файловете с теми на WordPress, които използвате, и основно разбиране на PHP, CSS и HTML.
Между другото, ние също ви каним да се консултирате с
Първо, трябва да отворите текстов редактор като Notepad и да поставите следния код в празен файл:
Този код просто открива името на файла на шаблона и моли WordPress да извлече шаблона на заглавката.
След това се нуждаете от частта със съдържанието на кода. Свържете се с вашия сайт с помощта на FTP клиент ( или файлов мениджър в CPanel) след това отидете на / Wp-съдържание / теми / вашата тематична директория / .
След това трябва да намерите файл с име " page.php". Това е файлът с шаблон за страница по подразбиране за вашата тема.
Копирайте всичко след функцията " get_header ()И го поставете във файла Пълна ширина.phpВие сте създали това на вашия компютър.
Сега трябва да погледнете съдържанието на файла "full-width.php" и да премахнете този ред код:
Този ред просто ще възстанови страничната лента и ще я покаже във вашата тема на WordPress. Като премахнете това, вашата тема няма да показва страничната лента, когато използвате шаблона Пълна ширина.
Можете да видите, че този ред се появява няколко пъти във вашата WordPress тема. Ако вашата тема на WordPress има няколко, ще видите всяка странична лента, посочена веднъж в кода. Трябва да решите кои странични ленти искате да запазите.
Вашият уебсайт се зарежда бавно, открийте
Ако вашата тема не показва странични ленти на страницата ви, може да не намерите този код във вашия файл.
Ето как нашият full-width.php код се грижи за промените. Вашият код може да се различава леко в зависимост от вашата тема.
След това трябва да изтеглите файла Пълна ширина.phpВъв вашата папка с тема на WordPress с.
Успешно създадохте и заредихте персонализиран шаблон на страница с пълна ширина за вашата тема. Следващата стъпка е да използвате този шаблон за създаване на страница в пълен размер.
Отидете на таблото си за управление и редактирайте или създайте нова страница.
На екрана за редактиране на страницата намерете квадратчето за отметка Атрибути на страницата и щракнете върху падащото меню под опцията Модел.
Ще можете да видите своя модел. Продължете, изберете го и запазете или опреснете страницата.
Вече можете да посетите уебсайта си и ще видите, че страничните ленти са изчезнали и страницата ви се показва като страница с една колона. Може още да не е завършен, но вече сте готови да го разпространявате по различен начин.
Направете сайта си популярен, като откриете
Ще трябва да използвате инструмента за проверка, за да откриете CSS класовете, които вашата тема използва, за да определи обхвата на вашето съдържание.
След това можете да регулирате ширината му до 100% с помощта на CSS. Използвахме следния CSS код:
.p-template зона с пълна ширина.content (ширина: 100%; поле: 0px; граница: 0px; допълване: 0px;) .page-template пълна ширина.Изход (полега: 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 stylesheet. Той се намира във вашата папка с теми. Нека променим цвета на шрифта като пример. Между другото, можете да направите това директно от администраторската област на WordPress. Просто бъдете внимателни и внимателни, за да не „счупите“ случайно сайта. Най-добре е да направите резервно копие на вашата тема, преди да промените нещо в нея. Така че, отидете в менюто Външен вид - Редактор и по подразбиране трябва да имате отворена тема със стилове за редактиране.
Ако не е, тогава изберете този файл от списъка вдясно, той се нарича Style Sheet (style.css). Най-често цветът на шрифта се задава в тялото, така че ще намерим стиловете за този елемент и ще напишем червено за цвета на шрифта.
След като запазим файла, можем да обновим сайта и да видим червения цвят за основния шрифт на сайта.
Както можете да видите, персонализирането на шаблон на WordPress за себе си е доста проста задача. Достатъчно е малко познаване на CSS и можете да модифицирате шаблона на WordPress и да направите необходимото персонализиране на шаблона. По същия начин можем да решим и други подобни проблеми. На това се сбогувам с вас. Успех и до скоро!
Някои шаблони на WordPress са доста тесни в страничното меню, така наречената странична лента, или обратното, тесни в секцията със статии и естествено някои уеб администратори трябва да разширят определени граници, например, за да пасват банерите. В тази статия ще обясня как преоразмерете заглавката, шаблона, секцията със статия или страничната лента.
Защо може да се наложи да промените размера на шаблона.
Може да искате да промените размера на шаблона както в самото начало, веднага след като го инсталирате, така и след като сте написали редица статии и първите десетки посетители започнаха да се появяват. Например, трябваше да разширя шаблона, след като исках да се опитам да спечеля първите няколко цента от реклама от моята работа - блог. За тази цел е избрана банерната рекламна система от Google-Adsense. Но за да спечелите поне злополучни два цента, трябва да се вземат предвид два параметъра:
- За да може някой да щракне върху реклама, е необходимо банерите, които системата ще издаде, да са на определени места. В интернет пишат, че това е левият плъзгач, поставяме квадратен банер там и три пъти вътре в статията. На самия връх, в центъра, след някакво заглавие и в самия край. Тази подредба би била идеална за хората да щракнат върху банера. Разбира се, има и други опции, например на снимките, но ние не ги разглеждаме в рамките на тази статия.
- Google издава банери с определени размери.
тези. трябва да комбинираме първата и втората точка, а именно да се уверим, че банерите от Google или Yandex са поставени на определените места, лявата странична лента и в статиите. Тъй като шаблонът ми беше твърде тесен за тези цели и няма смисъл да окачвам малки банери, защото никой няма да щракне върху тях, остава само едно - да разтегнете страничното меню и секцията със статии.
Как да увеличим шаблона хоризонтално, част 1, разбираме числата
За да разберем колко трябва да увеличим ширината на този или онзи елемент, не трябва да преценяваме с един поглед „там е достатъчен сантиметър и там половин сантиметър“, а да разберем тези числа точно, в пиксели. Почти всеки браузър ще ни помогне с това, например:
- сафари
- Firefox
- Google Chrome
Лично аз ще покажа на примера на Safari, а вие във всеки удобен за вас браузър. Разликата трябва да е само в един бутон.
И така, основата - размерът на нашия сайт се състои от 4 елемента, размера на самия шаблон, размера на страницата, размера на блока на статията и левия блок на менюто. Ще увеличим всичко на свой ред, не се притеснявайте, не е страшно.
За промяна на ширината на лявото меню.
В този случай можете да промените както пикселите, както направихме в параграф 3-5, така и процента на страницата. За да направите това, достатъчно е да промените параметъра вместо пиксели
| 1 | ширина: 31,8%; |
Тези стойности означават колко процента от ширината може да бъде заета от този или онзи елемент. Основното е, че като цяло страничната лента и статията трябва да заемат 100%, а не повече, в противен случай всичко ще плува в страницата.
Това е всичко. Сега знаем какви ценности трябва да променим, за да може всичко да пасне. Единственото, което остава да направите, е да въведете необходимите данни в файла за стил.
Как да увеличите шаблона хоризонтално част 2, променете ширината
След като разбрахме числата и ги запишехме някъде на лист хартия, нека сега да ги променим за всички, а не само за себе си. За това:
- Отидете на сайта чрез FTP
- Намерете и копирайте на вашия компютър файла / wp-content / themes / Your theme / style.css
- Направете резервно копие на този файл, т.е. копирайте го във вашата папка с документи. Така че да има две копия на файла на компютъра, едното, върху което ще работим, второто, което няма да докосваме. Вторият служи в случай, че променим нещо нередно и забравим какво.
- Отворете файла в удобен редактор. Сега сме изправени пред доста проста задача да променим старите стойности за новите. Има два начина, първият е лесен, а вторият е труден. Първо, намираме старата стойност, като търсим и вместо това пишем нова. Вторият начин - търсим името на стиловете, вътре в стиловете търсим ширината и променяме стойността.
Лично аз избрах първия, лесен начин за себе си, тъй като ви позволява да правите промени само за няколко секунди. И така, търсим стойността 980. Търсенето във файла върна само два параметъра, които трябва да променя.
Първият е отговорен за ширината на целия сайт:
| 1 2 3 4 5 6 7 8 | #страница (мин. височина: 100px; ясно: и двете; ширина: 96%; padding: 0; padding- top: 24px; max- ширина: 980px; препълване: скрито; |
#page (min-height: 100px; clear: и двете; ширина: 96%; padding: 0; padding-top: 24px; max-width: 980px; overflow: hidden;
Вторият е за ширината на два елемента, списъка с статии и лявото меню:
| 1 2 3 4 5 6 7 8 9 10 11 | ... главен контейнер (ширина: 980px; поле: 0 автоматично; преливане: скрито; запълване: 0; фон: #fff; позиция: относителна; - webkit-box- shadow: 0px 0px 10px rgba (50, 50, 50, 0.17) ; - moz- box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17); box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17);) |
Основен контейнер (ширина: 980px; поле: 0 автоматично; преливане: скрито; запълване: 0; фон: #fff; позиция: относителна; -webkit-box-shadow: 0px 0px 10px rgba (50, 50, 50, 0,17) ; -moz-box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17); box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17);)
Всичко, което трябва да направим, е да променим стойностите от 980 до 1080 и да заредим обратно.
Това е всичко, но ако все още имате въпроси, пишете в коментарите или на мен, ще се радвам да ви помогна.
Често при избора на шаблон за wordpress възниква проблем - това е недостатъчната ширина на блоковете. Много хора веднага искат да променят ширината на шаблона. За тези, които са добре запознати с html или php, това няма да създаде особени проблеми. Но за да напишете подробно как да направите промени в размерите на шаблон за wordpress за неподготвен човек, ще ви трябва цяла брошура.
Най-простото нещо е да поръчате, но тези, които се опитват да го направят сами, получават знания. В бъдеще няма да му се налага да се обръща към специалисти за всяко малко нещо. Познаването на "основата" за това е напълно възможно. Преди да започнете каквито и да било промени, не забравяйте да направите резервно копие на всички страници на вашия ресурс. В случай на неточна работа, можете да възстановите оригиналния вид на сайта без никакви проблеми.
Има безброй шаблони за WordPress, всички те са различни и всеки се променя по свой собствен начин. Но такива основни блокове като: ширина на главната страница, горен колонтитул, лява и дясна колона, долен колонтитул имат всичко. За работа ни трябва:
- Уеб браузър Mozilla Firefox.
- Firebug плъгин, инсталиран на Firefox.
Когато всичко необходимо е изтеглено, инсталирано и готово за работа, отворете избрания шаблон в Mozilla Firefox и стартирайте Firebug, като щракнете върху иконата на бръмбар.
Панел за приставки
В долната част се отваря панелът за плъгини, в който ще работим. Всички направени промени ще бъдат незабавно показани в горната част на монитора. В раздела вдясно виждаме CSS стила на избрания елемент, отляво html кода на страницата. За да увеличим или намалим ширината на шаблона, първото нещо, което трябва да направим, е да разберем текущия размер на платното. Кликнете върху иконата на курсора на нашия плъгин.
Елементите на страницата ще бъдат подчертани в различни цветове и като подчертаете всеки елемент от страницата, можете да се запознаете подробно със структурата на вашия сайт. След като получите името, ще разберете точните размери. След като текущата ширина е зададена, щракнете с левия бутон върху тази стойност. Пробно създаваме най-подходящата ширина и тестваме нейното показване.
Чувствайте се свободни да експериментирате с всякакви елементи и стойности. Текущите промени не могат да повлияят на вашата страница на сървъра по никакъв начин, те са активни само в прозореца на плъгина (текущият кеш на Mozila). При надграждане всички настройки се нулират.
Редактиране на style.css
Сега остава да запазите тези промени за шаблона на WordPress. Обикновено ширината на шаблона се записва в style.css. Отидете в административния панел на уебсайта -> външен вид -> редактор -> style.css -> ред 79, променете стойността на ширината. ние спестяваме.
Често се случва тема, която харесвате, да има тясна област за записи и нейните настройки не предвиждат промяна на ширината. В този случай може да се увеличи с минимални познания HTMLи CSS... Например, нека използваме популярната, безплатна тема Patagonia. Можете да разширите темата с помощта на прекрасен плъгин Firefox— Firebug... Първо трябва да го инсталирате, като го изтеглите от тук. След това включете плъгин, както е показано на снимката - Раздел „Инструменти“. — Уеб разработка — Firebug — отворете Firebug:
След това в долната част на екрана е необходимо да изберете различни елементи, като задържите курсора и щракнете с мишката. В този случай от дясната страна ще се покаже CSS стилове, а в областта на страницата ще бъде подчертана тази или онази област - основната, странична лента, заглавка... Сега се интересуваме от основната област, до която ще стигнем, когато „въведем“ тага Например, увеличете ширинатаосновна област от 550 пиксела до 620 пиксела. За да направите това, трябва да направите промени в линията ширина: 550pxфайл style.css... Ако темата вече е инсталирана, можете да редактирате този файл директно от административния панел, ако не, тогава трябва да разопаковате архива с темата и да направите промени във файла с помощта на редактора. В нашия случай темата е инсталирана, така че отидете на админ панел— Външен вид — Редактор- отворете файла style.css, намерете ширината на линията: 550px и променете стойността на ширината 550px на 620px. Натискаме Актуализирайте файла. Отиваме на сайта и виждаме, че областта на публикациите се е разширила, но на някои места "пребяга" в дясната колона. В този случай трябва пропорционално да стесним тази област. За това също използваме Плъгин Firebugкакто в предишния случай. Намерете етикета Правим същата процедура с редактиране на style.css, както в предишния случай с основната област, само че сега редактираме реда поле: 0 0 0 580px;Променете стойността на допълване в него от 580px на 630px. Сега всичко е наред. Зоната за запис е по-широка и не се припокрива странична лента... Също така се случва стиловете да се записват не само във файла style.css, но и във файла screen.css.
