Как да промените ширината на страницата на WordPress. Как да създадете страница с пълна ширина в wordpress. Открийте и някои премиум добавки за WordPress
Искате ли да създадете WordPress страница в пълен размер?
Тогава да се върнем към защо сме тук.
Метод 1: Използване на вградения шаблон за ширина в тема на WordPress
Този метод се препоръчва, ако вашата WordPress тема вече идва с шаблон за цяла страница. Ако го нямате, вижте следващия избор и го вземете.
Първо трябва да редактирате страницата или да създадете нова, като посетите " Страници > ДобавянеНова страница
В прозореца за редактиране на страница изберете Пълна ширинакато шаблон под полето за отметка атрибути на страницата.
След избор на модел Пълна ширинаТрябва да регистрирате страницата си. Можете да продължите да персонализирате страницата, за да добавите още съдържание, или да щракнете върху бутона за визуализация, за да я видите в действие.
Ако нямате опцията „Пълна ширина“ – „пълна ширина на шаблон“ – на екрана за редактиране на страницата ви, това означава, че вашата тема на WordPress няма тази страница.
Но не се притеснявайте, ние ще ви покажем колко лесно е да създадете цяла страница, без да променяте темата на WordPress.
Метод 2: Как да създадете шаблон на страница с пълна ширина
Този метод изисква да редактирате файловете с теми на WordPress, които използвате, и да имате основни познания за PHP, CSS и HTML.
Между другото, ние също ви каним да се консултирате с
Първо трябва да отворите текстов редактор като Notepad и да поставите следния код в празен файл:
Този код просто определя името на шаблона на файла и моли WordPress да извлече шаблона на заглавката.
След това се нуждаете от съдържателната част на кода. Свържете се със сайта си с помощта на FTP клиент ( или файлов мениджър в cPanel), след което отидете на /wp-content/themes/вашата-тема-директория/ .
След това трябва да намерите файл с име " страница.php". Това е файлът с шаблон на страница по подразбиране за вашата тема.
Копирайте всичко след " get_header()И го поставете във файл Пълна ширина.phpТова е, което сте създали на вашия компютър.
Сега трябва да погледнете съдържанието на файла "full-width.php" и да премахнете този ред код:
Този ред просто възстановява страничната лента и я показва във вашата WordPress тема. Като премахнете това, вашата тема няма да показва страничната лента, когато използвате шаблона Пълна ширина.
Можете да видите този ред да се появява многократно във вашата WordPress тема. Ако вашата WordPress тема има няколко, ще видите всяка странична лента, спомената веднъж в кода. Трябва да решите кои странични ленти искате да запазите.
Вашият уебсайт се зарежда бавно, открийте
Ако вашата тема не показва странични ленти на вашата страница, може да не намерите този код във вашия файл.
Ето как нашият full-width.php код се грижи за извършването на промени. Вашият код може да е малко по-различен в зависимост от вашата тема.
След това трябва да изтеглите файла Пълна ширина.phpВъв вашата папка с тема на WordPress с .
Успешно създадохте и качихте персонализиран шаблон на страница с пълна ширина за вашата тема. Следващата стъпка е да използвате този шаблон, за да създадете страница в пълен размер.
Отидете на таблото за управление и редактирайте или създайте нова страница.
На екрана за редактиране на страница намерете квадратчето за отметка атрибути на страницата и щракнете върху падащото меню под опцията Модел.
Ще можете да видите вашия модел. Продължете, изберете го и запазете или опреснете страницата.
Сега можете да посетите уебсайта си и ще видите, че страничните ленти са изчезнали и страницата ви се показва като страница с една колона. Може още да не е попълнено, но сега сте готови да го разпределите по различен начин.
Направете сайта си популярен чрез откриване
Ще трябва да използвате инструмента Inspect, за да откриете CSS класовете, които вашата тема използва, за да дефинира областта на съдържанието.
След това можете да регулирате ширината му на 100% с помощта на CSS. Използвахме следния CSS код:
.page-template full-width zone.content(width: 100%; Margin: 0px; border: 0px; padding: 0px; ) .page-template fullwidth.Output(margin: 0px; )Ето как ще изглежда Twenty Seventeen.
Това е всичко за този урок, надявам се, че ще ви позволи да създавате страници в пълен размер.
Горните методи са безплатни за тези, които могат да си го позволят и искат бързо да създадат оформления с пълна или пълна ширина.
Открийте и някои премиум добавки за WordPress
Можете да използвате други добавки за WordPress, за да придадете модерен вид и да рационализирате управлението на вашия блог или уебсайт.
Предлагаме ви няколко премиум плъгина за WordPress, за да ви помогнем да направите точно това.
1. Divi Builder
Divi Builder е висококачествен конструктор на страници, който е високо ценен Елегантни темиВъпреки че обикновено се използва като част от темата Divi WordPress, 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 са доста тесни в страничното меню, така наречената странична лента, или обратното тесни в секцията със статии и естествено някои уеб администратори трябва да разширят определени граници, например, за да поберат банери. В тази статия ще ви покажа как промяна на размера на заглавката, шаблона, секцията със статии или страничното меню.
За какво може да се наложи да промените размера на шаблона.
Може да искате да промените размера на шаблона както в самото начало, веднага след като сте го инсталирали, така и след като сте написали няколко статии и първите ви десетки посетители започнаха да се появяват. Например, трябваше да разширя шаблона, след като исках да опитам да спечеля първите няколко цента от реклама от моя блог. За тези цели беше избрана система за банерна реклама от Google-AdSense. Но за да спечелите поне нещастни два цента, трябва да се вземат предвид два параметъра:
- За да кликне някой върху реклама, банерите, които системата ще издаде, трябва да са на определени места. В интернет пишат, че това е ляв плъзгач, там поставяме квадратен банер и три пъти вътре в статията. На самия връх, в центъра, след известно заглавие и в самия край. Тази подредба ще бъде идеална за хората да кликнат върху банера. Разбира се, има и други опции, например на снимките, но ние не ги разглеждаме в рамките на тази статия.
- Google издава банери с определени размери.
тези. трябва да комбинираме първата и втората точка, а именно да се уверим, че банерите от Google или Yandex са поставени на местата, определени за това, лявата странична лента и в статиите. Тъй като шаблонът ми беше твърде тесен за тези цели и няма смисъл да окачвам малки банери, защото никой няма да кликне върху тях, остава само да разтегна страничното меню и секцията със статии.
Как да увеличите шаблона хоризонтално част 1, разберете числата
За да разберем колко трябва да увеличим ширината на този или онзи елемент, не трябва да преценим с един поглед „един сантиметър е достатъчен там и половин сантиметър там“, а да разберем тези числа точно, в пиксели. Почти всеки браузър ще ни помогне с това, например:
- сафари
- firefox
- Google Chrome
Лично аз ще покажа на примера на Safari, а вие във всеки удобен за вас браузър. Разликите трябва да са само в един бутон.
И така, основата - размерът на нашия сайт се състои от 4 елемента, размерът на самия шаблон, размерът на страницата, размерът на блока на статията и левия блок на менюто. Ще увеличим всичко поред, не се притеснявайте, няма страшно.
За да промените ширината на лявото меню.
В този случай можете да промените както пикселите, както направихме в стъпка 3-5, така и процента на страницата. За да направите това, достатъчно е да промените параметъра вместо пикселите
| 1 | ширина: 31,8%; |
Тези стойности означават колко процента от ширината могат да бъдат заети от този или онзи елемент. Основното е, че сумата от страничната лента и статията трябва да бъде 100%, а не повече, в противен случай всичко ще плува на страницата.
Това е всичко. Сега знаем какви стойности трябва да променим, за да пасне всичко. Остава само да въведете необходимите данни във стиловия файл.
Как да увеличите шаблона хоризонтално част 2, променете ширината
След като разбрахме числата и ги записахме някъде на лист хартия, нека сега ги променим за всички, а не само за себе си. За това:
- Влезте през FTP в сайта
- Намерете и копирайте файла /wp-content/themes/Вашата тема/style.css на вашия компютър
- Направете резервно копие на този файл, т.е. копирайте го в папката с документи. Така че на компютъра има две копия на файла, едното, върху което ще работим, второто, което няма да пипаме. Второто служи в случай, че променим нещо нередно и забравим какво.
- Отворете файла в удобен редактор. Сега сме изправени пред доста проста задача да променим старите стойности на нови. Има два начина, първият е лесен, а вторият е тежък. Първо, чрез търсене намираме старата стойност и вместо нея пишем нова. Вторият начин е да търсим името на стиловете, вътре в стиловете търсим ширината и променяме стойността.
Лично аз избрах първия, лесен начин за себе си, защото ви позволява да правите промени само за няколко секунди. И така, търсим стойността 980. Търсенето на файлове даде само два параметъра, които трябва да променя.
Първият отговаря за ширината на целия сайт:
| 1 2 3 4 5 6 7 8 | #страница ( мин. височина: 100px; изчистване: и двете; ширина: 96%; подложка: 0; подложка отгоре: 24px; максимална ширина: 980px; преливане: скрито; |
#страница ( мин. височина: 100px; ясно: и двете; ширина: 96%; подложка: 0; подложка отгоре: 24px; максимална ширина: 980px; преливане: скрито;
Второто е за ширината на двата елемента, списъка със статии и лявото меню:
| 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 ще разгледаме въпроса как да промените шаблона на WordPress. Ако никога преди не сте се сблъсквали с необходимостта да модифицирате шаблон на WordPress, не забравяйте да прочетете тази статия, защото рано или късно най-вероятно ще трябва да се справите с проблемите на персонализирането и редактирането на шаблон на WordPress.
Като начало, нека дефинираме най-честите въпроси, с които се сблъскват потребителите, когато персонализират WordPress шаблон за себе си. Ето примерен списък с тях:
как да редактирате wordpress шаблон
промяна на ширината на шаблона в wordpress
как да преоразмерите шаблон на wordpress
как да промените цвета на wordpress шаблон
как да промените шрифта в wordpress шаблон
И това е само малък списък от проблеми, които можете да срещнете или които можете да помогнете на други да решат, включително срещу заплащане, ако разработвате уебсайтове по поръчка.
Всички въпроси в списъка по-горе могат да бъдат решени по два начина, в зависимост от темата, която се използва за сайта. Нека започнем с най-простия вариант, който не изисква познания за оформлението. Тази опция е подходяща, ако шаблонът поддържа редактиране от настройките.
Нека да отидем в раздела Външен вид - Персонализиране и да видим главната страница на сайта и наличните настройки на сайта в лявата част на страницата. Сред тях може да има настройки за дизайн.
Например, нека се опитаме да променим цветовата схема на сайта. Нека отидем в менюто Цветове и сменим фона на страничните и централните части на сайта.
Както можете да видите, това е доста удобно и промяната на цвета на WordPress шаблон е доста проста - виждаме резултата веднага и можем да го оценим.
Въпреки това, не всяка тема предлага всички персонализации на WordPress шаблони, от които се нуждаем. Например, малко вероятно е да има настройки, които ви позволяват да променяте ширината на шаблона в WordPress, например дори в текущата тема няма настройки, които ви позволяват да променяте шрифта в шаблона и т.н. Как да бъдем в този случай? Тук ще трябва да прибегнем до втория вариант и тук вече са необходими някои умения за оформление.
И така, трябва да редактираме най-често само един файл - това е стиловият файл style.css. Намира се във вашата папка с теми. Нека променим цвета на шрифта като пример. Между другото, можете да направите това директно от административния панел на WordPress. Само внимавайте и внимавайте случайно да не "счупите" сайта. Най-добре е да направите резервно копие на темата си, преди да правите промени в нея. И така, отидете в менюто Облик - Редактор и по подразбиране трябва да имате отворен файл за стил на темата за редактиране.
Ако не е, тогава изберете този файл от списъка вдясно, той се нарича Stylesheet (style.css). Най-често цветът на шрифта се задава в тялото, така че нека намерим стиловете на този елемент и зададем червения цвят като цвят на шрифта.
След като запазим файла, можем да актуализираме сайта и да видим червения цвят за основния шрифт на сайта.
Както можете да видите, персонализирането на шаблон на WordPress за себе си е доста проста задача. С малко познания по CSS ще можете да модифицирате шаблона на WordPress и да персонализирате шаблона според нуждите. По същата схема можем да решим и други подобни задачи. На това се сбогувам с вас. Успех и до скоро!
Трябва да можете да промените размера на шаблона, ако искате да създадете добър сайт. По подразбиране много теми предлагат неудобни размери на рамката на шаблона. Тесните теми са също толкова лоши, колкото и твърде широките. Трябва да имате средно положение, което е точно за функциите на сайта. Само по този начин съдържанието на вашия ресурс ще се показва правилно и всички джаджи ще се поберат в страничната лента. В тази статия ще научите какви са начините за регулиране на размера на страничните колони.
Без странична лента сайтът изглежда безполезен. Ако искате по някакъв начин да разредите визуално съдържанието на страницата, трябва да промените шаблона на WordPress, като добавите странична лента с определен размер. Обикновено страничните колони вече са инсталирани в него по подразбиране. Но не винаги ширината на страничната лента е оптимална за конкретен проект. Нека да разгледаме методите как да промените ширината и височината на страната на сайта на WordPress.
Какъв трябва да бъде размерът на страничната лента
Може да не е необходимо да променяте нищо. Променете страничната лента само ако изглежда „крива“ и неестествена. Първо се уверете, че страничната лента има по-малка ширина от тялото на страницата, която съдържа съдържанието. Страничната лента не е ключова част от сайта, така че не трябва да й се обръща особено внимание – най-много може да заема 40% от видимата част на страницата. Моля, обърнете внимание, че ако имате две странични ленти (или няколко), тяхната ширина не трябва да надвишава 50% от ширината на цялата страница. По-добре е да използвате само една странична колона - така е по-ефективно.
Има „златно правило“ на дизайнерите за сайтове, които използват само една странична лента. Това правило гласи, че ако има само една странична лента на страница, тя не трябва да заема повече от 38% от ширината на сайта. Много изтъкнати уеб дизайнери говорят за такава мистериозна фигура (например: Jarel Remik).
Що се отнася до височината, важно е страничната лента да не стърчи отгоре на сайта. Височината му в горната граница трябва да е подобна на основната част на страницата. Но долната граница може да бъде променена, така че основната част на сайта да е по-дълга. Няма нужда да се опитвате да натъпчете всичко на сайта в страничната лента - само основното нещо. И ако наистина има много информация, тогава направете две странични ленти, но не е необходимо да разтягате страничната лента до долния колонтитул на сайта.
Как да промените размера на страничната лента ръчно
Сега нека поговорим за това как независимо да промените размера на страничните колони и самата рамка на шаблона, без да използвате никакви добавки. Този метод включва промяна на изходния код на страницата. Параметърът за размер на шаблона е затворен в html таговете. Моля, имайте предвид, че преоразмеряването може да има отрицателни последици, ако качите изображение с персонализиран размер като фон. Ето защо е по-добре да промените параметрите на рамката на етапа на оформление на сайта.
Параметрите на страничната лента в кода са под формата на блок. За да промените размера на цялата рамка, включително страничните колони, ще трябва да влезете в кода и последователно да коригирате числените параметри на ширината и височината на всеки елемент. а именно:
- хедър - отговаря за размера на хедъра на сайта;
- bg - това е основното съдържание, тоест частта от страницата, в която ще бъдат поставени статиите (именно в тази част се намира страничната лента);
- footer е долният колонтитул на сайта, тоест неговата долна част.
За да разберете размерите на конкретен блок, трябва да щракнете върху обвивката в „Изглед на кода на страницата“. Отстрани на секцията CSS на браузъра ще видите числовите стойности за ширината на елемента в пиксели. За да промените размера на цялата телена рамка, трябва да редактирате основния елемент и след това да направите промени и в други елементи. Препоръчително е да направите това на локален сървър, така че вашият сайт да не „скача“ пред потребителите. И като цяло е по-добре да направите това дори преди стартирането на интернет проект.
За да промените размера на страничната лента, намерете нещо като този ред
Този ред отговаря за параметрите на средната част на страницата, т.е. за блока със съдържание и за страничните колони. Не пипайте "главния" ред - това е основната част на сайта. Трябва да намерите етикета "mainnav" - това е страничната лента. Всичко, от което се нуждаете, е да промените елемента ширина в CSS, който отговаря за ширината - да въведете различна стойност на размера. Можете да направите страничната лента по-малка или по-голяма, но не забравяйте да следвате съветите за оразмеряване по-горе, за да сте сигурни, че вашият сайт се показва правилно.
За да бъдат запазени промените, те трябва да бъдат направени на сървъра. Това означава, че първоначално можете да тествате корекциите на локален хостинг, но след това не забравяйте да копирате редактирания файл style.css и да го добавите към базите данни на главния сървър. Едва тогава промените ще влязат в сила.
приставка за преоразмеряване на страничната лента
Ако не искате да се разхождате из каскадните стилови таблици и да търсите елементи, които трябва да бъдат редактирани, тогава можете да използвате 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. Тогава ще ви бъде лесно да редактирате всеки елемент на страниците на портала.
