WordPressте толук кеңдиктеги баракты кантип түзүү керек (Баштоочу үчүн колдонмо)

Сиз WordPressте толук кеңдиктеги баракты түзгүңүз келеби, андыктан мазмунуңузду экранда кеңейте аласызбы? Көпчүлүк WordPress темалары мурунтан эле сиз колдоно ала турган камтылган толук кеңдиктеги бет шаблоны менен келет. Бирок, эгер сиздин темаңызда бирөө жок болсо, аны кошуу оңой. Бул макалада биз WordPressте толук кеңдиктеги баракты кантип оңой түзүүнү жана ал тургай эч кандай кодсуз толугу менен ыңгайлаштырылган макеттерди түзүүнү көрсөтөбүз.

Метод 1. Темаңыздын толук кеңдик шаблонун колдонуңуз

Эгер сиздин темаңыз толук кеңдиктеги бет шаблоны менен келсе, аны колдонгонуңуз жакшы. Дээрлик бардык жакшы WordPress темалары муну жасайт. Атүгүл эң мыкты бекер WordPress темалары көбүнчө толук кең шаблон менен келет, андыктан сизде мурунтан эле бар болгон жакшы мүмкүнчүлүк бар. Биринчиден, сиз баракты түзөтүп же жаңысын түзүшүңүз керек Барактар ​​»Жаңы кошуу сиздин WordPress панелиңизде. Мазмун редакторунун оң жагындагы "Документ" панелинде, анын жанындагы ылдый жебени чыкылдатуу менен "Барак атрибуттары" бөлүмүн кеңейтишиңиз керек. Андан кийин сиз "Модель" ылдый түшүүчү тизмени көрүшүңүз керек.

Эгер сиздин темаңыз үчүн толук кеңдик шаблонуңуз болсо, ал бул жерде көрүнөт. Аны "Толук туурасы модели" деп атоого болот:

Бул жерде сиз көргөн параметрлер темаңызга жараша өзгөрүп турат. Эгер темаңызда толук кеңдиктеги бет шаблоны жок болсо, кабатыр болбоңуз. Сиз төмөндөгү ыкмаларды колдонуу менен оңой эле кошо аласыз.

Метод 2. Плагин менен толук кеңдиктеги баракчанын шаблонун түзүңүз

Бул ыкма эң оңой жана бардык WordPress темалары жана баракча куруучу плагиндер менен иштейт. Биринчиден, сиз Full Width Templates плагинин орнотуп, иштетишиңиз керек. Эгер муну кантип кылууну билбесеңиз, WordPress плагинин орнотуу боюнча биздин башталгыч колдонмобузду караңыз. Fullwidth Templates плагини сиздин баракчаңыздын калыптарына үч жаңы опцияны кошот:

Бул параметрлер:

• FW Каптал тилкеси жок – Бетиңизден каптал тилкесин алып салыңыз, бирок калганынын бардыгын калтырыңыз
• FW Full Width – каптал тилкесин, аталышты жана комментарийлерди алып салыңыз жана макеттин кеңдигине чейин кеңейтиңиз
• FW Fullwidth No Header Footer: жогорку жана төмөнкү колонтитулдан тышкары, FW Fullwidth жасаган нерселердин баарын жок кылат

Эгер сиз орнотулган WordPress редакторун гана колдонгуңуз келсе, "FW No Sidebar" эң жакшы вариант. Бул плагин толук кеңдиктеги баракчанын шаблонун түзүүгө мүмкүндүк бергени менен, сиздин жекелештирүү параметрлериңиз чектелген. Эгер сиз толук кеңдик шаблонуңузду кодсуз ыңгайлаштырууну кааласаңыз, анда баракча куруучуну колдонушуңуз керек.

Метод 3 – Барак куруучу плагининин жардамы менен WordPressте толук кеңдиктеги баракты долбоорлоо

Эгерде сиздин темаңызда толук кеңдик шаблон жок болсо, бул толук кеңдиктеги шаблонду түзүүнүн жана ыңгайлаштыруунун эң оңой жолу. Бул сүйрөп түшүрүү интерфейси менен толук кең бетиңизди оңой оңдоого жана веб-сайтыңыз үчүн түрдүү макеттерди түзүүгө мүмкүндүк берет. Бул ыкма үчүн сизге WordPress баракча куруучу плагин керек болот. Бул окуу куралында биз Beaver Builder колдонобуз. Бул эң жакшы сүйрөп барып түшүрүүчү баракча куруучу плагиндердин бири жана ал сизге эч кандай код жазбастан макеттерди оңой түзүүгө мүмкүндүк берет. Биринчиден, Beaver Builder плагинин орнотуп, иштетиңиз. Көбүрөөк маалымат алуу үчүн, WordPress плагинин кантип орнотуу боюнча биздин кадам-кадам жолду караңыз. Аны иштеткенден кийин, учурдагы баракты түзөтүңүз же жаңысын түзүңүз. Экрандын оң тарабындагы "Документ" панелинен "Барактын атрибуттарына" өтүңүз жана ачылуучу тизмеден толук кеңдиктеги шаблонду тандаңыз. Андан кийин экраныңыздын ортосунда "Beaver Builderди ишке киргизүү" баскычын чыкылдатыңыз.

Эми баракчаңызды түзүү үчүн Beaver Builder'тин сүйрөө жана түшүрүү интерфейсин колдонуңуз.

Баштоо үчүн жакшы жолу - жогору жактагы Калыптар өтмөгүн чыкылдатуу. Толук кең бетиңиз үчүн негиз катары колдонуу үчүн алдын ала аныкталган калыптардын бирин тандаңыз.

Аны тандоо үчүн шаблонду чыкылдатыңыз жана баракты куруучу аны жүктөйт. Андан кийин сиз түзөткүңүз келген нерселерди, мисалы, сүрөттөрдү түзөтө аласыз. Beaver Builder макеттери сызыктар жана модулдар менен курулган. Ар бир сапта бир нече тилке болушу мүмкүн жана ар бир саптын ичинде сиз мазмун модулдарын жана виджеттерди кошо аласыз. Макеттеги сызыкты же модулду түзөтүү үчүн жөн гана аны басыңыз. Бул учурда, биз Header модулун түзөтөбүз:

Beaver Builder элементтин чоо-жайын калкыма терезеде ачат, анда сиз анын орнотууларын өзгөртө аласыз. Сиз текстти түзөтө аласыз, шрифттерди жана түстөрдү өзгөртө аласыз, фон сүрөттөрүн кошуп же өзгөртө аласыз жана башкалар.

Каалаган убакта макетиңизге модулдарды жана виджеттерди кошо аласыз. Beaver Builder көптөгөн негизги жана өркүндөтүлгөн мазмун модулдары менен келет, аларды сиз өз бетиңизге сүйрөп барып таштай аласыз.

Өзгөртүүлөр аяктагандан кийин, барактын жогору жагындагы "Бүттү" баскычын чыкылдатыңыз. Сиз андан кийин долбооруңузду сактап же жарыяласаңыз болот.

Эми сиз толугу менен баракчаңызды көрүү үчүн баракчаңызга баш багсаңыз болот.

Метод 4. SeedProd менен толук ыңгайлаштырылган Full Width Landing Pages түзүңүз

Beaver Builder сонун чечим болсо да, ал веб-сайтыңызды жайлатышы мүмкүн. Эгер сиз толук ыңгайлаштырылган десант баракчасын түзгүңүз келсе, анда сиз беттин үстүн, колонтитулун жана бардык аймактарын ыңгайлаштыргыңыз келсе, SeedProdду колдонууну сунуштайбыз. Бул WordPress үчүн эң мыкты десанттык баракча плагини жана ал сүйрөп барып түшүрүүчү баракча куруучу интерфейси менен келет.

Биринчиден, сиз SeedProd плагинин орнотуп, иштетишиңиз керек. Жандыруудан кийин, жөн гана өтүңүз SeedProd »Бет жаңы конуу баракты кошуу үчүн. Сиз жөн гана алардын алдын ала түзүлгөн көптөгөн шаблондорунун бирин тандап же нөлдөн баштап жеке десанттык бет түзө аласыз. SeedProd'тун эң жакшы жери - ал тез күйүп турат жана жазылуучуларды башкаруу, электрондук маркетинг кызматын интеграциялоо жана башкалар үчүн камтылган конверсия функциялары менен келет.

Метод 5 – Кол менен толук кеңдиктеги WordPress баракчасынын шаблонун түзүңүз

Жогорудагы ыкмалардын бири да сизге жардам бербесе, бул ыкма акыркы чара болуп саналат. Бул сиздин WordPress тема файлдарыңызды түзөтүүнү талап кылат. Сизге PHP, CSS жана HTML боюнча негизги билим керек болот. Эгер сиз буга чейин андай кылбасаңыз, WordPressте кодду кантип көчүрүү/коюу боюнча колдонмобузду карап көрүңүз. Улантуудан мурун, WordPress камдык көчүрмөсүн же жок дегенде учурдагы темаңыздын камдык көчүрмөсүн түзүүнү сунуштайбыз. Бул бир нерсе туура эмес болуп калса, сайтыңызды оңой калыбына келтирүүгө жардам берет. Андан кийин Notepad сыяктуу жөнөкөй текст редакторун ачып, төмөнкү кодду бош файлга чаптаңыз:

Бул файлды компьютериңизде full-width.php катары сактаңыз. Аны .txt файлы катары сактабоо үчүн "Башкача сактоо" түрүн "Бардык файлдарга" өзгөртүү керек болушу мүмкүн:

Бул код жөн гана шаблон файлынын атын коёт жана WordPressке баш калыбын издөөнү айтат. Андан кийин сизге коддун мазмуну керек болот. FTP кардары аркылуу веб-сайтыңызга кириңиз (же cPanelдеги WordPress хостинг файл менеджери), андан кийин /wp-content/themes/your-theme-papka/ дегенге өтүңүз. Эми сиз page.php файлын табышыңыз керек. Бул сиздин темаңыз үчүн демейки бет шаблон файлы. Бул файлды ачып, get_header() сызыгынан кийин баарын көчүрүп, аны компьютериңиздеги full-width.php файлына чаптаңыз. full-width.php файлында коддун бул сабын таап, жок кылыңыз:

Бул сап каптал тилкесин алып, аны темаңызда көрсөтөт. Аны алып салуу толук кеңдик шаблонду колдонууда темаңыздын каптал тилкесин көрсөтүүсүнө жол бербейт. Бул сызыкты диаграммаңызда бир нече жолу көрүшүңүз мүмкүн. Эгер сиздин темаңызда бир нече каптал тилкелер болсо (колонтитул виджетинин аймактары каптал тилкелери деп да аталат), ар бир каптал тилкеси коддо бир жолу шилтемеленгенди көрөсүз. Кайсы каптал тилкелерин сактагыңыз келгенин чечиңиз. Эгер темаңыз беттерде каптал тилкелерди көрсөтпөсө, бул кодду файлыңыздан таппай калышыңыз мүмкүн. Өзгөртүүлөрдү киргизгенден кийин биздин толук кеңдиктеги .php кодубуз ушундай көрүнөт. Кодуңуз темаңызга жараша бир аз башкача болушу мүмкүн.

Андан кийин FTP кардарыңыздын жардамы менен full-width.php файлын тема папкаңызга жүктөңүз. Сиз азыр темаңызга толук кеңдиктеги ыңгайлаштырылган баракчанын шаблонун ийгиликтүү түзүп, жүктөп бердиңиз. Кийинки кадам - ​​бул шаблонду толук туурасы баракты түзүү үчүн колдонуу. WordPress администратор аймагыңызга барып, WordPress блок редакторунда түзөтүңүз же жаңы баракты түзүңүз. Оң жактагы "Документ" панелинен "Барак атрибуттарын" таап, керек болсо бул бөлүмдү кеңейтүү үчүн ылдый жебени басыңыз. Сиз жаңы «Толук туурасы» шаблонуңузду тандай турган «Шаблон» ылдый түшүүчүсүн көрүшүңүз керек:

Бул шаблонду тандагандан кийин, баракчаны жарыялаңыз же жаңыртыңыз. Баракты көргөндө, каптал тилкелери жок болуп, баракчаңыз бир тилке катары пайда болгонун көрөсүз. Ал азырынча толук кенен эмес болушу мүмкүн, бирок эми сиз аны башкача стилдештирүү үчүн даярсыз. Темаңыз мазмун аймагын аныктоо үчүн колдонгон CSS класстарын табуу үчүн Текшерүү куралын колдонушуңуз керек. Андан кийин сиз CSS аркылуу анын туурасын 100% тууралай аласыз. Сиз CSS кодун кошууга болот Көрүнүш » Ыңгайлаштыруу жана экрандын ылдый жагындагы "Кошумча CSS" чыкылдатуу.

Сыноо сайтыбызда төмөнкү CSS кодун колдонобуз: .page-template-full-width .content-area {туурасы: 100%; маржа: 0px; чек: 0px; толтуруу: 0px; } .page-template-full-width .site {маржа: 0px; } Twenty Sixteen темасын колдонуу менен биздин демо сайтыбызда ушундай көрүндү.

Кол менен ыкманы колдонгуңуз келсе...

Башында жарыяланган 2021-02-23 19:06:55.