Դուք պետք է կարողանաք չափափոխել ձևանմուշը, եթե ցանկանում եք լավ կայք ստեղծել: Լռելյայնորեն, շատ թեմաներ առաջարկում են կաղապարի շրջանակի անհարմար չափսեր: Նեղ թեմաները նույնքան վատ են, որքան շատ լայն լինելը: Դուք պետք է ունենաք «ոսկե միջին», որը ճիշտ է կայքի գործառույթների համար: Միայն այս կերպ ձեր ռեսուրսի բովանդակությունը ճիշտ կցուցադրվի, և բոլոր վիդջեթները կտեղավորվեն կողագոտում: Այս հոդվածում դուք կսովորեք, թե որոնք են կողային սյուների չափերը հարմարեցնելու ուղիները:
Առանց կողագոտի, կայքը անօգուտ է թվում: Եթե ցանկանում եք ինչ-որ կերպ տեսողականորեն նոսրացնել էջի բովանդակությունը, դուք պետք է փոխեք WordPress ձևանմուշը՝ ավելացնելով որոշակի չափի կողագոտ: Սովորաբար դրա մեջ լռելյայն արդեն տեղադրված են կողային սյունակները։ Բայց միշտ չէ, որ կողագոտու լայնությունը օպտիմալ է որոշակի նախագծի համար: Եկեք նայենք այն մեթոդներին, թե ինչպես փոխել WordPress կայքի կողքի լայնությունը և բարձրությունը:
Հնարավոր է, որ կարիք չունենաք որևէ բան փոխելու։ Փոխեք կողագոտին միայն այն դեպքում, եթե այն «ծուռ» և անբնական տեսք ունի: Նախ, համոզվեք, որ կողագոտին ավելի փոքր լայնություն ունի, քան բովանդակությունը պարունակող էջի հիմնական մասը: Կողային գոտին կայքի առանցքային մաս չէ, ուստի դրան պետք չէ մեծ ուշադրություն դարձնել. առավելագույնը այն կարող է զբաղեցնել էջի տեսանելի մասի 40%-ը: Խնդրում ենք նկատի ունենալ, որ եթե ունեք երկու կողային տող (կամ մի քանի), դրանց լայնությունը չպետք է գերազանցի ամբողջ էջի լայնության 50%-ը: Ավելի լավ է օգտագործել միայն մեկ կողմի սյունը, այս կերպ այն ավելի արդյունավետ է:
Կա դիզայներների «ոսկե կանոն» այն կայքերի համար, որոնք օգտագործում են միայն մեկ կողագոտ: Այս կանոնը նշում է, որ եթե էջի վրա կա միայն մեկ կողագոտ, ապա այն չպետք է զբաղեցնի կայքի լայնության 38%-ից ավելին։ Շատ ականավոր վեբ դիզայներներ խոսում են նման առեղծվածային կերպարի մասին (օրինակ՝ Ջարել Ռեմիկը):
Ինչ վերաբերում է բարձրությանը, ապա կարևոր է, որ կողագոտին դուրս չմնա կայքի վերևում: Դրա բարձրության չափը վերին սահմանում պետք է նման լինի էջի հիմնական մասին: Բայց ստորին սահմանը կարող է փոխվել այնպես, որ կայքի հիմնական մասը ավելի երկար լինի: Կարիք չկա փորձել կայքի ամեն ինչ խցկել կողագոտու մեջ՝ միայն գլխավորը: Եվ եթե իսկապես շատ տեղեկատվություն կա, ապա պատրաստեք երկու կողագոտ, բայց ձեզ հարկավոր չէ կողագոտին ձգել դեպի կայքի ստորագիր:
Հիմա եկեք խոսենք այն մասին, թե ինչպես կարելի է ինքնուրույն փոխել կողային սյունակների չափը և կաղապարի շրջանակն ինքնին, առանց որևէ հավելում օգտագործելու: Այս մեթոդը ներառում է էջի սկզբնական կոդը փոխելը: Հենց html թեգերում է կաղապարի չափի պարամետրը կցված։ Խնդրում ենք նկատի ունենալ, որ չափափոխումը կարող է բացասական հետևանքներ ունենալ, եթե դուք վերբեռնեք հատուկ չափի պատկեր որպես ֆոն: Հետեւաբար, ավելի լավ է փոխել շրջանակի պարամետրերը կայքի դասավորության փուլում:
Կոդի կողագոտու պարամետրերը բլոկի տեսքով են։ Ամբողջ շրջանակի չափը փոխելու համար, ներառյալ կողային սյունակները, ձեզ հարկավոր է մուտքագրել կոդը և հերթափոխով կարգավորել յուրաքանչյուր տարրի լայնությունը և բարձրությունը թվային պարամետրերը: Այսինքն:
Որոշակի բլոկի չափերը պարզելու համար հարկավոր է սեղմել «Էջի կոդի դիտման» փաթաթված տարրի վրա: Բրաուզերի CSS բաժնի կողքին դուք կտեսնեք տարրի լայնության թվային արժեքները պիքսելներով: Ամբողջ լարային շրջանակի չափը փոխելու համար դուք պետք է խմբագրեք հիմնական տարրը, այնուհետև փոփոխություններ կատարեք նաև այլ տարրերում: Խորհուրդ է տրվում դա անել տեղական սերվերի վրա, որպեսզի ձեր կայքը «չցատկի» օգտատերերի առջև։ Եվ, ընդհանուր առմամբ, ավելի լավ է դա անել նույնիսկ ինտերնետ նախագծի մեկնարկից առաջ։
Այս տողը պատասխանատու է էջի միջին մասի պարամետրերի համար, այսինքն՝ բովանդակության բլոկի և կողային սյունակների համար։ Մի դիպչեք «հիմնական» տողին, սա կայքի հիմնական մասն է: Դուք պետք է գտնեք «mainnav» պիտակը, սա կողագոտն է: Ձեզ անհրաժեշտ է ընդամենը փոխել լայնության տարրը CSS-ում, որը պատասխանատու է լայնության համար՝ մուտքագրել այլ չափի արժեք: Դուք կարող եք կողագոտին փոքրացնել կամ մեծացնել, բայց հիշեք, որ հետևեք վերը նշված չափերի խորհուրդներին, որպեսզի ձեր կայքը ճիշտ ցուցադրվի:
Որպեսզի փոփոխությունները պահպանվեն, դրանք պետք է կատարվեն սերվերում։ Այսինքն՝ սկզբում կարող եք ստուգել ճշգրտումները տեղական հոսթինգի վրա, բայց հետո անպայման պատճենեք խմբագրված style.css ֆայլը և այն ավելացրեք հիմնական սերվերի տվյալների բազաներում։ Միայն դրանից հետո փոփոխությունները ուժի մեջ կմտնեն։
կողագոտու չափափոխման պլագին
Եթե դուք չեք ցանկանում անցնել կասկադային ոճերի թերթիկների միջով և փնտրել տարրեր, որոնք պետք է խմբագրվեն, ապա կարող եք օգտագործել Visual Sidebar Editor for WordPress հավելվածը: Սա հատուկ մոդուլ է, որը հատուկ նախագծված է կողային վահանակներ ստեղծելու համար: Այն ավելի մեծ Visual Composer գործիքի մի մասն է:
Visual Composer plugin-ը WordPress-ի համար բնական էջի ստեղծող է: Դրանով դուք կարող եք զրոյից պատրաստել պատրաստի կաղապար: Մոդուլն աշխատում է կարճ կոդերով և շատ հեշտ է տեղադրվում: Եթե կողագոտի չափափոխումը միակ բանը չէ, որ դուք պետք է անեք, ներբեռնեք Visual Composer հավելվածը և որպես հավելում ավելացրեք Visual Sidebar Editor-ը: Եթե խնդիրը միայն էջի կողագոտու չափի մեջ է, ապա Visual Sidebar Editor մոդուլը բավական կլինի։
Կողային գոտին փոխելու համար հավելվածի օգտագործման առավելությունն այն է, որ այն ամեն ինչ անում է ավտոմատ կերպով: Այսինքն՝ դուք ցույց եք տալիս, թե ինչ եք ուզում փոխել՝ օգտագործելով Drag & Drop համակարգը, և մոդուլն ինքնուրույն ուղղում է տարրի կոդը՝ հիմնվելով ձեր հարցումների վրա։ Եթե ցանկանում եք փորձել ձեր ուժերը html թեգերի խմբագրման գործում, ապա plugin-ը ձեզ նման հնարավորություն կտա։ Բացի այդ, այն ունի հատուկ կարճ կոդեր՝ կայքին լրացուցիչ գործառույթներ ավելացնելու համար՝ ավելի քան 40 ընդլայնում։
Էջերի խմբագրման համար նման փլագին օգտագործելու ևս մեկ առավելությունն այն է, որ փոփոխությունները պահպանվում են՝ անկախ շարժիչի տարբերակից: Նույնիսկ եթե դուք թարմացնեք WordPress-ը, կաղապարը չի փոխվի՝ այն կառավարվում է մոդուլի կողմից: Հետևաբար, կարող եք անցնել ավելի հին տարբերակների կամ թարմացնել WordPress-ը. սա այլևս չի վնասի կողագոտու չափը: Բացի այդ, plugin-ն աշխատում է հարմար ներմուծման և արտահանման հետ, այսինքն՝ դուք կարող եք պատճենել կողային տողերը մի կայքից և դրանք փոխանցել մյուսին: Եվ, ամենակարևորը, մոդուլն աշխատում է չափազանց հստակ սկզբունքով` նույնիսկ սկսնակն արագ կյուրացնի այն:
Եթե Ձեզ դուր է գալիս Visual Sidebar Editor-ի աշխատանքը, մտածեք տեղադրել հավելումների ամբողջական փաթեթը՝ Visual Composer մոդուլը: Այնուհետև ձեզ համար հեշտ կլինի խմբագրել պորտալի էջերի ցանկացած տարր:
Ցանկանու՞մ եք ստեղծել WordPress-ի լրիվ չափի էջ:
Հետո վերադառնանք, թե ինչու ենք մենք այստեղ:
![](https://i1.wp.com/blogpascher.com/wp-content/uploads/2017/05/Comment-cr%C3%A9er-page-pleine-largeur-WordPress.png)
Մեթոդ 1. Օգտագործելով ներկառուցված լայնության ձևանմուշը WordPress թեմայի մեջ
Այս մեթոդը խորհուրդ է տրվում, եթե ձեր WordPress թեման արդեն գալիս է ամբողջական էջի ձևանմուշով: Եթե չունեք այն, դիմեք հաջորդ ընտրությանը և ստացեք այն:
Նախ, դուք պետք է խմբագրեք էջը կամ ստեղծեք նորը` այցելելով « Էջեր > ԱվելացնելՆոր էջ
Էջի խմբագրման պատուհանում ընտրեք Ամբողջական լայնությունորպես ձևանմուշ էջի հատկանիշների վանդակի տակ:
Մոդել ընտրելուց հետո Ամբողջական լայնությունԴուք պետք է գրանցեք ձեր էջը։ Դուք կարող եք շարունակել հարմարեցնել էջը՝ ավելի շատ բովանդակություն ավելացնելու համար, կամ սեղմեք նախադիտման կոճակը՝ այն գործողության մեջ տեսնելու համար:
Եթե ձեր էջի խմբագրման էկրանում չունեք «Full Width» - «template full width» տարբերակը, դա նշանակում է, որ ձեր WordPress թեման այդ էջը չունի։
Բայց մի անհանգստացեք, մենք ձեզ ցույց կտանք, թե որքան հեշտ է ստեղծել ամբողջական էջ՝ առանց ձեր WordPress թեման փոխելու:
Մեթոդ 2. Ինչպես ստեղծել ամբողջական լայնությամբ էջի ձևանմուշ
Այս մեթոդը պահանջում է, որ դուք խմբագրեք WordPress թեմայի ֆայլերը, որոնք օգտագործում եք և PHP-ի, CSS-ի և HTML-ի հիմնական պատկերացում ունենաք:
Ի դեպ, հրավիրում ենք նաև խորհրդակցելու
Նախ անհրաժեշտ է բացել տեքստային խմբագիր, ինչպիսին է Notepad-ը և տեղադրել հետևյալ կոդը դատարկ ֆայլի մեջ.
Php / * Имя шаблона: * Полная ширина / get_header (); ?>
Այս կոդը պարզապես որոշում է ֆայլի ձևանմուշի անունը և խնդրում է WordPress-ին հանել վերնագրի ձևանմուշը։
Այնուհետև ձեզ անհրաժեշտ է կոդի բովանդակային մասը: Միացեք ձեր կայքին՝ օգտագործելով FTP հաճախորդ ( կամ ֆայլերի կառավարիչ cPanel-ում) հետո գնացեք /wp-content/themes/your-theme-directory/ .
Այնուհետև դուք պետք է գտնեք ֆայլ, որը կոչվում է « page.php«. Սա ձեր թեմայի լռելյայն էջի ձևանմուշ ֆայլն է:
Պատճենեք ամեն ինչ հետո « get_header ()Եվ տեղադրեք այն ֆայլի մեջ Ամբողջ լայնությունը.phpՍա այն է, ինչ դուք ստեղծել եք ձեր համակարգչում:
Այժմ դուք պետք է նայեք «full-width.php» ֆայլի բովանդակությանը և հեռացնեք կոդի այս տողը.
Php get_sidebar (); ?>
Այս տողը պարզապես վերականգնում է կողագոտին և ցուցադրում այն ձեր WordPress թեմայում: Սա հեռացնելով, ձեր թեման չի ցուցադրի կողագոտին կաղապարն օգտագործելիս Ամբողջական լայնություն.
Դուք կարող եք տեսնել այս տողը մի քանի անգամ հայտնվելով ձեր WordPress թեմայում: Եթե ձեր WordPress թեման մի քանի անգամ է, դուք կտեսնեք, որ յուրաքանչյուր կողագոտին մեկ անգամ նշված է կոդի մեջ: Դուք պետք է որոշեք, թե որ կողագոտն եք ուզում պահել:
Ձեր կայքը դանդաղ է բեռնվում, հայտնաբերեք
Եթե ձեր թեման չի ցուցադրում կողագոտիներ ձեր էջի վրա, դուք կարող եք չգտնել այս կոդը ձեր ֆայլում:
Ահա թե ինչպես է մեր full-width.php կոդը հոգում փոփոխություններ կատարելու համար: Ձեր կոդը կարող է մի փոքր տարբեր լինել՝ կախված ձեր թեմայից:
php / * * Имя шаблона: полная ширина * / get_header (); ?> php // Запустить цикл. while (have_posts ()): the_post (); // Включить шаблон содержимого страницы. get_template_part ("template-parts / content", "page"); // Если комментарии открыты, как нам это сделать? if (comments_open () || get_comments_number ()) {comments_template (); } // Конец цикла. ENDWHILE; ?> main> div> php get_footer (); ?>
Ապա դուք պետք է ներբեռնեք ֆայլը Ամբողջ լայնությունը.phpՁեր WordPress թեմայի թղթապանակում .
Դուք հաջողությամբ ստեղծեցիք և վերբեռնեցիք ձեր թեմայի համար հատուկ ամբողջ լայնությամբ էջի ձևանմուշ: Հաջորդ քայլը այս ձևանմուշի օգտագործումն է՝ լրիվ չափի էջ ստեղծելու համար:
Գնացեք վահանակ և խմբագրեք կամ ստեղծեք նոր էջ:
Էջի խմբագրման էկրանին տեղադրեք էջի հատկանիշների վանդակը և կտտացրեք «Մոդել» ընտրանքի տակ գտնվող բացվող ընտրացանկը:
Դուք կկարողանաք տեսնել ձեր մոդելը: Շարունակեք, ընտրեք այն և պահպանեք կամ թարմացրեք էջը:
Այժմ դուք կարող եք այցելել ձեր կայք և կտեսնեք, որ կողային տողերը վերացել են, և ձեր էջը ցուցադրվում է որպես մեկ սյունակ էջ: Գուցե այն դեռ չի լցվել, բայց հիմա դուք պատրաստ եք այն այլ կերպ տարածել։
Դարձրեք ձեր կայքը հանրաճանաչ՝ բացահայտելով
Դուք պետք է օգտագործեք Inspect գործիքը՝ բացահայտելու CSS դասերը, որոնք ձեր թեման օգտագործում է բովանդակության տարածքը սահմանելու համար:
Այնուհետև կարող եք կարգավորել դրա լայնությունը մինչև 100%՝ օգտագործելով CSS: Մենք օգտագործել ենք հետևյալ CSS կոդը.
.page-template full-width zone.content(լայնություն՝ 100%; լուսանցք՝ 0px; եզրագիծ՝ 0px; padding՝ 0px; ) .page-template fullwidth.Output(լուսանցք՝ 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-ը թույլ է տալիս ստեղծել դասավորություններ ճակատային մասում կամ հետնամասում:Մեկ այլ լավ բան այն է, որ այս plugin-ը թույլ է տալիս հարմարեցնել ձեր արձագանքող բեկման կետերը (բայց միայն կայքի ամբողջ մակարդակով):
Բացահայտեք, ստեղծեք առցանց խանութ և հեշտությամբ վաճառեք ձեր ապրանքները առցանց
Themify Builder-ի հետաքրքիր առանձնահատկությունն այն է, որ այն դեռ թույլ է տալիս օգտագործել WordPress-ի ստանդարտ խմբագրիչը, մինչդեռ մյուս էջ ստեղծողները ստիպում են ձեզ ամեն ինչի համար օգտագործել Page Builder ինտերֆեյսը:
3. Ֆաքիր
Ի սկզբանե գործարկվել է 2016 թվականին, WordPress Elementor plugin-ն այս ցուցակի ամենաերիտասարդ մշակողներից մեկն է: Չնայած իր ուշ մեկնարկին, Elementor-ը արագորեն հավաքել է ավելի քան 1,000,000 ակտիվ տեղադրումներ WordPress.org-ում՝ դարձնելով այն WordPress-ի ամենահայտնի ստեղծողներից մեկը:
Եթե ունեք առաջարկներ կամ դիտողություններ, խնդրում ենք թողնել դրանք մեր բաժնում
WordPress-ի որոշ կաղապարներ բավականին նեղ են կողային մենյուում, այսպես կոչված, կողային տողում կամ հակառակը նեղ հոդվածների բաժնում, և բնականաբար որոշ վեբ վարպետներ պետք է ընդլայնեն որոշակի սահմաններ, օրինակ՝ բաններներ տեղադրելու համար: Այս հոդվածում ես ձեզ ցույց կտամ, թե ինչպես փոխել վերնագրի, ձևանմուշի, հոդվածների բաժնի կամ կողային ընտրացանկի չափը:
Ինչի համար կարող է անհրաժեշտ լինել փոխել կաղապարի չափը:
Դուք կարող եք փոխել կաղապարի չափը թե՛ սկզբում, թե՛ այն տեղադրելուն պես, թե՛ մի շարք հոդվածներ գրելուց և ձեր առաջին տասնյակ այցելուների հայտնվելուց հետո: Օրինակ, ես պետք է ընդլայնեի ձևանմուշը այն բանից հետո, երբ ցանկացա փորձել վաստակել առաջին երկու ցենտները գովազդի վրա իմ բլոգից: Այդ նպատակների համար ընտրվել է Google-AdSense-ի բաններային գովազդային համակարգ։ Բայց գոնե երկու դժբախտ ցենտ վաստակելու համար պետք է հաշվի առնել երկու պարամետր.
- Որպեսզի ինչ-որ մեկը սեղմի գովազդի վրա, պետք է որոշակի տեղերում լինեն ազդագրերը, որոնք համակարգը կթողարկի։ Համացանցում գրում են, որ սա ձախ սահիկ է, այնտեղ տեղադրում ենք քառակուսի պաստառ, իսկ հոդվածի ներսում երեք անգամ։ Հենց վերևում, կենտրոնում, որոշ ուղղությունից հետո և ամենավերջում։ Այս դասավորությունը իդեալական կլինի մարդկանց համար, ովքեր սեղմում են դրոշի վրա: Իհարկե, կան այլ տարբերակներ, օրինակ, նկարներում, բայց մենք դրանք չենք դիտարկում այս հոդվածի շրջանակներում։
- Google-ը թողարկում է որոշակի չափերի պաստառներ:
դրանք. մենք պետք է համատեղենք առաջին և երկրորդ կետերը, այն է՝ համոզվել, որ Google-ի կամ Yandex-ի պաստառները տեղադրված են դրա համար հատկացված վայրերում, ձախ կողագոտում և հոդվածներում։ Քանի որ իմ ձևանմուշը չափազանց նեղ էր այս նպատակների համար, և անիմաստ է կախել փոքր պաստառներ, քանի որ ոչ ոք չի սեղմի դրանց վրա, մնում է միայն կողային ընտրացանկը և հոդվածների բաժինը երկարացնել:
Ինչպես բարձրացնել կաղապարը հորիզոնական մաս 1, հասկանալ թվերը
Հասկանալու համար, թե որքան պետք է մեծացնենք այս կամ այն տարրի լայնությունը, պետք է ոչ թե մի հայացքով գնահատել «այնտեղ սանտիմետրը բավական է, իսկ այնտեղ՝ կես սանտիմետրը», այլ պարզել այս թվերը ճշգրիտ՝ պիքսելներով։ Գրեթե ցանկացած զննարկիչ կօգնի մեզ այս հարցում, օրինակ.
- սաֆարի
- firefox
- Google Chrome
Անձամբ ես ցույց կտամ Safari-ի օրինակով, իսկ ձեզ՝ ձեզ հարմար ցանկացած բրաուզերում: Տարբերությունները պետք է լինեն միայն մեկ կոճակով:
Այսպիսով, հիմքը՝ մեր կայքի չափը բաղկացած է 4 տարրից՝ բուն կաղապարի չափը, էջի չափը, հոդվածի բլոկի չափը և ձախ ցանկի բլոկը։ Ամեն ինչ հերթով կավելացնենք, մի անհանգստացեք, սարսափելի չէ։
Ձախ ընտրացանկի լայնությունը փոխելու համար:
Այս դեպքում կարող եք փոխել ինչպես պիքսելները, ինչպես մենք արեցինք 3-5-րդ քայլում, այնպես էլ էջի տոկոսը: Դա անելու համար բավական է փոխել պարամետրը պիքսելների փոխարեն
Այս արժեքները նշանակում են, թե լայնության քանի տոկոսը կարող է զբաղեցնել այս կամ այն տարրը: Գլխավորն այն է, որ կողագոտի և հոդվածի գումարը պետք է լինի 100%, և ոչ ավելին, հակառակ դեպքում ամեն ինչ կբողոքարկի էջում։
Այսքանը: Այժմ մենք գիտենք, թե ինչ արժեքներ պետք է փոխենք, որպեսզի ամեն ինչ համապատասխանի: Մնում է միայն անհրաժեշտ տվյալները մուտքագրել ոճի ֆայլ:
Ինչպես բարձրացնել կաղապարը հորիզոնական մաս 2, փոխել լայնությունը
Այն բանից հետո, երբ մենք հասկացանք թվերը և դրանք ինչ-որ տեղ գրեցինք թղթի վրա, եկեք դրանք փոխենք բոլորի համար, և ոչ միայն մեզ համար: Սրա համար:
- Մուտք գործեք կայք FTP-ի միջոցով
- Գտեք և պատճենեք /wp-content/themes/Your theme/style.css ֆայլը ձեր համակարգչում
- Ստեղծեք այս ֆայլի կրկնօրինակ պատճենը, այսինքն. պատճենեք այն ձեր փաստաթղթերի թղթապանակում: Որպեսզի համակարգչի վրա լինի ֆայլի երկու օրինակ, որոնց վրա մենք կաշխատենք, երկրորդը, որին չենք դիպչի։ Երկրորդը ծառայում է այն դեպքում, երբ մենք ինչ-որ բան սխալ ենք փոխում և ինչն ենք մոռանում։
- Բացեք ֆայլը հարմար խմբագրիչում: Այժմ մենք կանգնած ենք հին արժեքները նորերի փոխելու բավականին պարզ խնդրի առաջ։ Երկու ճանապարհ կա՝ առաջինը հեշտ է, իսկ երկրորդը՝ ծանր։ Նախ, որոնելով մենք գտնում ենք հին արժեքը և փոխարենը գրում ենք նորը: Երկրորդ ճանապարհը ոճերի անվանումը փնտրելն է, ոճերի ներսում մենք փնտրում ենք լայնությունը և փոխում արժեքը։
Անձամբ ես ինձ համար ընտրեցի առաջին, հեշտ ճանապարհը, քանի որ այն թույլ է տալիս փոփոխություններ կատարել ընդամենը մի քանի վայրկյանում։ Այսպիսով, մենք փնտրում ենք 980 արժեքը: Ֆայլի որոնումը տվել է ընդամենը երկու պարամետր, որոնք ես պետք է փոխեմ:
Առաջինը պատասխանատու է ամբողջ կայքի լայնության համար.
1
2
3
4
5
6
7
8
| #էջ ( min- բարձրությունը՝ 100px; պարզ՝ երկուսն էլ; լայնությունը՝ 96%, լիցքավորումը՝ 0 ; padding- վերև՝ 24px; առավելագույնը՝ լայնությունը՝ 980px; հորդառատ՝ թաքնված; |
#էջ ( min-բարձրություն՝ 100px; պարզ՝ երկուսն էլ; լայնություն՝ 96%, ներդիր՝ 0; padding-top՝ 24px; max-width՝ 980px; overflow՝ թաքնված;
Երկրորդը երկու տարրերի լայնության, հոդվածների ցանկի և ձախ ընտրացանկի համար է.
1
2
3
4
5
6
7
8
9
10
11
| . հիմնական կոնտեյներ (լայնությունը՝ 980px; լուսանցք՝ 0 ավտոմատ; վարարում՝ թաքնված; լիցք՝ 0; ֆոն՝ #fff; դիրքը՝ հարաբերական; - webkit- box- ստվեր՝ 0px 0px 10px rgba(50, 50, 50, 0.17) ;-moz- տուփ-ստվեր․ |
Հիմնական կոնտեյներ (լայնություն՝ 980 px; լուսանցք՝ 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 կաղապարում
Եվ սա ընդամենը խնդիրների մի փոքր ցուցակ է, որոնց կարող եք հանդիպել կամ որոնք կարող եք օգնել ուրիշներին լուծել, այդ թվում՝ վճարովի, եթե պատվերով կայքեր եք մշակում:
Վերոնշյալ ցանկի բոլոր հարցերը կարող են լուծվել երկու եղանակով՝ կախված կայքի համար օգտագործվող թեմայից: Սկսենք ամենապարզ տարբերակից, որը չի պահանջում դասավորության գիտելիքներ։ Այս տարբերակը հարմար է, եթե ձևանմուշն աջակցում է կարգավորումներից խմբագրմանը:
Եկեք գնանք Արտաքին տեսք - Անհատականացնել բաժինը և տեսնենք կայքի հիմնական էջը և կայքի հասանելի կարգավորումները էջի ձախ կողմում: Նրանց թվում կարող են լինել դիզայնի պարամետրեր:
![](https://i0.wp.com/webformyself.com/wp-content/uploads/2016/73/1.jpg)
Օրինակ, փորձենք փոխել կայքի գունային սխեման։ Եկեք գնանք Colors մենյու և փոխենք կայքի կողային և կենտրոնական մասերի ֆոնը։
![](https://i1.wp.com/webformyself.com/wp-content/uploads/2016/73/2.jpg)
Ինչպես տեսնում եք, սա բավականին հարմար է, և WordPress-ի կաղապարի գույնը փոխելը բավականին պարզ է. մենք անմիջապես տեսնում ենք արդյունքը և կարող ենք գնահատել այն:
Այնուամենայնիվ, ոչ բոլոր թեման է առաջարկում WordPress կաղապարի մեզ անհրաժեշտ բոլոր հարմարեցումները: Օրինակ, դժվար թե լինեն կարգավորումներ, որոնք թույլ են տալիս փոխել կաղապարի լայնությունը WordPress-ում, օրինակ, նույնիսկ ընթացիկ թեմայում չկան այնպիսի պարամետրեր, որոնք թույլ են տալիս փոխել տառատեսակը կաղապարում և այլն։ Ինչպե՞ս լինել այս դեպքում: Այստեղ մենք ստիպված կլինենք դիմել երկրորդ տարբերակին, և այստեղ արդեն անհրաժեշտ են դասավորության որոշ հմտություններ։
Այսպիսով, մենք պետք է ամենից հաճախ խմբագրենք միայն մեկ ֆայլ՝ սա style.css ոճի ֆայլն է: Այն գտնվում է ձեր թեմայի թղթապանակում: Փոխենք տառատեսակի գույնը որպես օրինակ։ Ի դեպ, դա կարող եք անել անմիջապես WordPress-ի ադմինիստրատորի վահանակից: Պարզապես զգույշ եղեք և զգույշ եղեք, որպեսզի պատահաբար «չկոտրեք» կայքը։ Ավելի լավ է ձեր թեման կրկնօրինակեք՝ նախքան դրա մեջ որևէ փոփոխություն կատարելը: Այսպիսով, անցեք մենյու Արտաքին տեսք - խմբագիր և ըստ լռելյայն պետք է բացեք թեմայի ոճի ֆայլը խմբագրման համար:
![](https://i2.wp.com/webformyself.com/wp-content/uploads/2016/73/3.jpg)
Եթե դա այդպես չէ, ապա ընտրեք այս ֆայլը աջ կողմի ցանկից, այն կոչվում է Stylesheet (style.css): Ամենից հաճախ տառատեսակի գույնը դրվում է մարմնի մեջ, ուստի եկեք գտնենք այս տարրի ոճերը և որպես տառատեսակի գույն սահմանենք կարմիր գույնը:
![](https://i2.wp.com/webformyself.com/wp-content/uploads/2016/73/4.jpg)
Ֆայլը պահելուց հետո մենք կարող ենք թարմացնել կայքը և տեսնել կայքի հիմնական տառատեսակի կարմիր գույնը:
![](https://i2.wp.com/webformyself.com/wp-content/uploads/2016/73/5.jpg)
Ինչպես տեսնում եք, WordPress-ի ձևանմուշը ձեզ համար հարմարեցնելը բավականին պարզ խնդիր է: CSS-ի մի փոքր իմացությամբ դուք կկարողանաք փոփոխել WordPress-ի ձևանմուշը և անհրաժեշտության դեպքում հարմարեցնել ձևանմուշը: Նույն սխեմայով մենք կարող ենք լուծել նմանատիպ այլ խնդիրներ։ Այս մասին ես հրաժեշտ եմ տալիս ձեզ: Հաջողություն և շուտով կտեսնվենք:
Հաճախ wordpress-ի կաղապար ընտրելիս խնդիր է առաջանում՝ սա բլոկների անբավարար լայնությունն է։ Շատերի մոտ անմիջապես ցանկություն է առաջանում փոխել կաղապարի լայնությունը։ Նրանց համար, ովքեր լավ տիրապետում են html-ին կամ php-ին, սա հատուկ խնդիրներ չի ստեղծի։ Բայց որպեսզի մանրամասն գրեք, թե ինչպես կարելի է փոփոխություններ կատարել wordpress-ի կաղապարի չափի մեջ անպատրաստ մարդու համար, ձեզ անհրաժեշտ է մի ամբողջ գրքույկ։
Ամենապարզը պատվիրելն է, բայց նրանք, ովքեր փորձում են դա անել, իրենք գիտելիք են ստանում։ Ապագայում նա ստիպված չի լինի ամեն մանրուքով դիմել մասնագետների։ Դա անելու «հիմքը» իմանալը միանգամայն հնարավոր է: Նախքան որևէ փոփոխություն սկսելը, համոզվեք, որ ձեր ռեսուրսի բոլոր էջերի կրկնօրինակ պատճենեք: Ոչ ճշգրիտ աշխատանքի դեպքում հեշտությամբ կարող եք վերականգնել կայքի սկզբնական տեսքը։
Wordpress-ի կաղապարների անհավանական քանակություն կա, դրանք բոլորը տարբեր են, և յուրաքանչյուրն իր ձևով փոխվում է: Բայց այնպիսի հիմնական բլոկները, ինչպիսիք են՝ հիմնական էջի լայնությունը, վերնագիրը, ձախ և աջ սյունակները, ստորագիրն ամեն ինչ ունեն: Աշխատանքի համար մեզ անհրաժեշտ է.
-
Վեբ զննարկիչ Mozilla Firefox:
-
Firefox-ում տեղադրված Firebug պլագին:
Երբ ձեզ անհրաժեշտ ամեն ինչ ներբեռնվի, տեղադրվի և պատրաստ լինի, բացեք ընտրված ձևանմուշը Mozilla Firefox-ում և գործարկեք Firebug-ը՝ սեղմելով սխալի պատկերակը:
![](https://i1.wp.com/wptheme.us/wp-content/uploads/2013/04/1.png)
Plugin Panel
Ներքևում բացվում է plugin վահանակը, որում մենք աշխատելու ենք: Ձեր կատարած բոլոր փոփոխությունները անմիջապես կցուցադրվեն մոնիտորի վերևում: Աջ կողմի ներդիրում տեսնում ենք ընտրված տարրի CSS ոճը, ձախում՝ էջի html կոդը։ Կաղապարի լայնությունը մեծացնելու կամ նվազեցնելու համար առաջին բանը, որ մենք պետք է իմանանք, հիմքի ներկայիս չափն է: Կտտացրեք մեր հավելվածի կուրսորի պատկերակին:
Էջի տարրերը կնշվեն տարբեր գույներով, և դուք կկարողանաք ընդգծել էջի յուրաքանչյուր տարր՝ ձեր կայքի կառուցվածքին մանրամասն ծանոթանալու համար։ Անունը ստանալով՝ դուք կիմանաք ճշգրիտ չափերը։ Ընթացիկ լայնությունը սահմանելուց հետո ձախ սեղմեք այս արժեքի վրա: Փորձնական մեթոդով մենք ստեղծում ենք ամենահարմար լայնությունը և փորձարկում դրա ցուցադրումը:
Ազատորեն փորձեք ցանկացած տարրերի և արժեքների հետ: Ընթացիկ փոփոխությունները չեն կարող որևէ կերպ ազդել սերվերի ձեր էջի վրա, դրանք ակտիվ են միայն plugin-ի պատուհանում (Mozilla-ի ներկայիս քեշը): Երբ դուք թարմացնում եք, բոլոր կարգավորումները վերականգնվում են:
Խմբագրել style.css
Այժմ մնում է պահպանել այս փոփոխությունները wordpress կաղապարի համար։ Սովորաբար կաղապարի լայնությունը գրվում է style.css-ով։ Մտնում ենք կայքի ադմինիստրատիվ վահանակ → տեսք → խմբագրիչ → style.css → տող 79, փոխում ենք լայնության արժեքը։ Մենք խնայում ենք.
Թարմացվել է՝ 21/08/2023
103583
Եթե սխալ եք նկատում, ընտրեք տեքստի մի հատված և սեղմեք Ctrl + Enter