Շուտով ժամանակն է վերանախագծելու իմ վեբ կայքը «Վեբ 2.0 դարաշրջանի համար»: Ես լրջորեն նայեցի երկու հարթակներին՝ Drupal-ին և Joomla-ին, որոնց միջոցով դա կարող եմ իրականացնել:
Drupal-ը և Joomla-ն առաջարկում են համապարփակ փաթեթներ, որոնք Drupal-ի դեպքում ներառում են բլոգ և ֆորում որպես հիմնական մոդուլներ: Այս հարթակների թեմատիկավորումը կարող է իրականացվել ինչպես CSS (Cascading Style Sheets), այնպես էլ PHP (Personal Home Page կամ PHP: Hypertext Preprocessor) կոդի փոփոխությունների միջոցով: Այնուամենայնիվ, այս հարթակները բարդ են, և այդ հարթակները տեղադրելու, կառավարելու և հարմարեցնելու համար բավականաչափ սովորելը կարող է սարսափելի խնդիր լինել:
Երկու հարթակներն ուսումնասիրելուց հետո, ներառյալ դրանք օգտագործելը թե՛ իմ թեստային մահճակալի հարթակում, թե՛ ինտերնետում, ես որոշեցի նայել WordPress-ին՝ որպես իմ ապագա վեբ կարիքների հնարավոր լուծում: Ես զարմացա, երբ հայտնաբերեցի, որ WordPress-ի վերջին տարբերակը հեշտ է տեղադրել, հեշտ է օգտագործել և հեշտ է թեմայի համար:
Այս հոդվածում ես նկարագրելու եմ, թե ինչպես հարմարեցնել WordPress 2.5-ը:
STYLING WORDPRESS
Կան վեց հիմնական բաղադրիչներ, որոնք կազմում են լռելյայն WordPress բլոգի տեսքը.
1. Վերնագրի գրաֆիկա
2. Բլոգի անվանումը
3. Տագլինգ
4. Էջ
5. Նախապատմությունը
6. Ստորագիր.
Որպեսզի բլոգը արագ բեռնվի, ես որոշեցի չօգտագործել վերնագիր կամ ստորագիր գրաֆիկա; և քանի որ դիզայնը, ըստ էության, լինելու է WordPress-ի լռելյայն թեման նոր վերարկուով, պետք է միայն մի փոքր գրաֆիկական դիզայնի աշխատանք կատարել: Իրականում, ինձ անհրաժեշտ էր ստեղծել միայն մեկ գրաֆիկ՝ բլոգի էջը երկու սյունակի էֆեկտով ստեղծելու համար: Բլոգի էջը «լողանալու է»՝ կենտրոնացած մուգ կապույտ *մարմին* ֆոնի վրա, որը կծառայի էջը շրջանակելու համար:
Գրաֆիկի ստեղծում
WordPress-ի լռելյայն թեմայի համար պատկերների գրացուցակի հայացքը ցույց է տալիս Կուբրիկի տեսքի համար օգտագործվող լռելյայն պատկերները: Առայժմ կա միայն մեկ հատուկ հետաքրքրություն ներկայացնող ֆայլ՝ kubrickbgwide.jpg: Դիզայնի համար Կուբրիկի մյուս պատկերները պետք չեն, այլ անհրաժեշտ կլինեն «Fancy»՝ ավելի բարդ դիզայնի համար:
Բլոգի էջը կստեղծվի նոր դիզայնի կենտրոնի «հատվածից»: Կտորը բլոգի էջի լայնությամբ նեղ պատկեր է:
Ես սկսեցի իմ դիզայնը՝ տեղադրելով հիմնական էջ (760px X 600px) Adobe Illustrator-ում: Ինձ դուր է գալիս Illustrator-ն օգտագործել այս տեսակի արվեստի գործերի համար, թեև կարող են օգտագործվել նաև այլ ծրագրեր:
Ես լրացրեցի հիմնական էջը էջի ֆոնի գույնով (չշփոթել մուգ կապույտ *body* ֆոնի հետ): Բաց ֆոնի գույնը «ցույց կտա» գունավոր տեքստը, օրինակ՝ բլոգի վերնագիրը և նշանաբանը:
Ես էջը ծածկեցի երկու ուղղանկյուններով կամ «սյունակներով»: Ձախակողմյան, 510px լայնությամբ սյունակը լցված է պաստելի դեղին գույնով; աջակողմյան սյունը՝ 230px լայնությամբ, լցված է պաստելի կապույտ գույնով։ Երկու սյունակները տեղավորվում են հիմնական էջի մեջ՝ դրանց շուրջ 10px էջի ֆոնի սահմանով:
Illustrator-ում ես այնուհետև տեղադրեցի էջի վրա 760px X 40px ուղղանկյուն և օգտագործեցի այն՝ կտոր պատրաստելու համար: Կտորը ոչ այլ ինչ է, քան բլոգի դիզայնի ավելի մեծ պատկերի ներկայացուցչական կտոր: Ես պահպանեցի հատվածը որպես kubrickbgwide.jpg: Kubrickbgwide.jpg-ը կօգտագործվի բլոգի էջի ֆոն ստեղծելու համար: Քանի որ բլոգի էջին նոր բովանդակություն է ավելացվում, հատվածի պատճենները կդասավորվեն ուղղահայաց՝ երկսյունանի ֆոնը «աճելու» համար: Սա միակ պատկերն է, որն անհրաժեշտ է դիտարկիչին՝ բլոգի գլխավոր էջ ստեղծելու համար: Բլոգը, հետևաբար, շատ արագ կբեռնվի:
Առայժմ բավականին հեշտ է, չէ՞: Դիզայնի մնացած մասը կատարվում է թեմայի CSS ֆայլի և/կամ WordPress ադմինիստրատիվ ինտերֆեյսի միջոցով:
CSS Էջեր
Նախնական CSS ֆայլը գտնվում է wp-content_themes_default գրացուցակում: Ստորև բերված CSS տեքստը ցույց է տալիս, որ կոդը փոխվում է style.css-ի: Նախքան լռելյայն CSS ֆայլում որևէ փոփոխություն կատարելը, ես միշտ պատրաստում և պահում եմ բնօրինակի պատճենը: CSS ֆայլը կարող է բացվել և փոփոխվել ցանկացած տեքստային խմբագրիչով: Ջնջվող տեքստը կցուցադրվի քառակուսի փակագծերում: Նոր կամ փոփոխված տեքստը կցուցադրվի առանց փակագծերի:
/* Սկիզբ տպագրություն և գույներ */
body { [ֆոն՝ #d5d6d7 url('images/kubrickbgcolor.jpg');]
ֆոն՝ #636f89; /* Սահմանեք մարմնի ֆոնի գույնը կապույտ */
}
#էջ {
[ֆոնի գույնը՝ սպիտակ;] [սահմանը՝ 1px կոշտ #959596;]սահման: ոչ մի;
} [#header {
ֆոն՝ #73a0c5 url ('images/kubrickheader.jpg') առանց կրկնելու ներքևի կենտրոն;
}
#headerimg {
լուսանցք՝ 7px 9px 0;
բարձրությունը `192px;
լայնությունը `740px;
}]
#footer { [ֆոն՝ #eee url('images/kubrickfooter.jpg') առանց կրկնելու վերև;]
ֆոն՝ #ffffef2; /* Շատ բաց դեղին */
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [.description] {
տեքստ-դեկորացիա՝ ոչ մի; [գույնը՝ սպիտակ;]
գույնը՝ կարմիր; /* Վերնագիրը կարմիր դարձրեք */
լիցք-ներքև՝ .5մ; /* Վերնագրի և նշանաբանի միջև մի փոքր տարածություն դրեք */
}
.նկարագրություն {
տեքստի ձևավորում. ոչ մեկը;
գույնը `կապույտ; /* Նշագիրը դարձրեք կապույտ */
տեքստային դասավորված. կենտրոն;
}
/* Վերջնական տպագրություն և գույներ */
/* Սկիզբ կառուցվածքը */
#էջ { [ֆոնի գույնը՝ սպիտակ;]
ֆոնի գույնը՝ fffef2; /* Շատ բաց դեղին */ [սահման՝ 1px կոշտ #959596;]
սահման՝ ոչ մի;
}
#header { [ֆոնի գույնը՝ #73a0c5;]
ֆոնի գույնը՝ #ffffef2; /* Շատ բաց դեղին */
}
/* Վերջի կառուցվածքը */
Այս փոփոխությունները style.css ֆայլում կատարելուց և պահպանելուց հետո ավարտվում է նոր ձևավորված բլոգի էջը:
STYLING WORDPRESS — Շքեղ Զգեստի Դիզայն
Թեև ինձ դուր է գալիս Jakob բլոգի դիզայնի պարզությունը, այն չի գրավի բոլորին: Շատ մարդիկ պարզապես սիրում են «գլիցը»: WordPress-ի շքեղ զգեստի գինը հաճախ ավելի դանդաղ բեռնվող բլոգ է՝ առանց օգտագործելիության բարձրացման: Այնուամենայնիվ, նրանց համար, ովքեր ցանկանում են «հագցնել» իրենց բլոգի տեսքը, այստեղ կան լրացուցիչ ուղիներ, որոնք կարող են դա իրագործվել:
Նախևառաջ պետք է նշել, որ WordPress-ի լռելյայն էջի ֆոնն օգտագործում է վերնագիր (kubrickheader.jpg) և ստորագիր (kubrickfooter.jpg) գրաֆիկա։ Այս գրաֆիկաները լցված են ոչ թե կոշտ գույնով, ինչպես Jakob դիզայնում, այլ գրադիենտներով: Կարծես թե էջի տակ կա նաև շատ փոքր ստվեր:
Լռելյայն էջի բարդության պատճառով լրացուցիչ գրաֆիկա է պահանջվում, և, հետևաբար, ավելի շատ հատվածներ կպահանջվեն: Բացի այդ, երբ ցանկալի է մարմնի ավելի բարդ ֆոն, որտեղ «լողում» է էջը, դրա համար կարող է պահանջվել նաև «սերմ» պատկեր (սա է kubrickbgcolor.jpg պատկերը):
Ինչպես նախկինում, ես Illustrator-ում ստեղծեցի բլոգի էջի նկարը: Կլորացված անկյուններով էջը լողում է WordPress-ի լռելյայն ֆոնի վրա, ունի դեղին գրադիենտ և ունի փոքր ստվեր:
Ես առաջին անգամ ստեղծեցի 760px X 600px ուղղանկյուն Illustrator գեղարվեստական տախտակի վրա: Ես այս ուղղանկյունը լրացրեցի ֆոնի գույնով (C:8, M:6, Y:6, K:0):
Հաջորդը, օգտագործելով Rounded Rectangle Tool-ը, ես նկարեցի 736px X 584px չափի ուղղանկյուն և այն լրացրեցի դեղին գրադիենտով: Ըստ էության, ես էջը հնարավորինս մեծ դարձրեցի ֆոնի վրա՝ միաժամանակ թողնելով բավարար տեղ ստվերի համար:
Ի վերջո, ես կլորացված ուղղանկյունին մի փոքր ստվեր տվեցի:
Որպեսզի համոզվեմ, որ կտորները հիանալի կերպով կմիավորվեն *body* ֆոնին, ես ստեղծեցի նույն ֆոնի գույնի 60px X 60px քառակուսի (C:8, M:6, Y:6, K:0) և այն պահեցի որպես kubrickbgcolor.jpg. Փոքր պատկերը կօգտագործվի մարմնի ֆոնը «նկարելու» համար: Սա կարևոր քայլ է, քանի որ մարմնի համար օգտագործվող ֆոնը և էջի համար օգտագործվող ֆոնը պետք է կատարելապես համապատասխանեն Fancy դիզայնին:
Շերտերի ստեղծում
Օգտագործելով Rectangle Tool-ը, ես վերը նկարագրված դասավորության վերևում տեղադրեցի 760px X 200px ուղղանկյուն: Ես տեղադրեցի այս ուղղանկյունը դասավորության վերևում և օգտագործեցի այն վերնագրի գրաֆիկի համար հատված պատրաստելու համար: Նախքան դա անելը, ես անջատեցի կաթվածը և լրացումը:
Ես պահպանեցի հատվածը որպես kubrickheader.jpg:
Ես ստեղծել եմ ստորագիր և էջի հատվածները նույն ձևով և դրանք վերանվանել եմ համապատասխանաբար kubrickfooter.jpg և kubrickbgwide.jpg: Kubrickfooter.jpg-ը 760px X 63px է, իսկ kubrickbgwide-ը՝ 760px X 40px:
Պատկերների գրացուցակում կա Կուբրիկի ևս երկու պատկեր՝ kubrickbg-ltr.jpg և kubrickbg-rtl.jpg (ձախից աջ և աջից ձախ): Այս պատկերները նույնն են, ինչ kubrickbgwide.jpg: Այսպիսով, ես պատրաստեցի kubrickbgwide.jpg-ի երկու օրինակ և համապատասխանաբար վերանվանեցի դրանք:
CSS-ի փոփոխություններ
Նախնական CSS ֆայլը գտնվում է wp-content_themes_default գրացուցակում: Ստորև բերված CSS տեքստը ցույց է տալիս, որ կոդը փոխվում է style.css-ի: Քառակուսի փակագծերը ցույց են տալիս, թե որ կոդը ջնջել, իսկ նոր կոդը ցուցադրվում է առանց փակագծերի: Նախքան փոփոխությունը կատարելը, ես պատճենեցի և պահպանեցի բնօրինակ ֆայլը: Fancy դիզայնի համար CSS-ի փոփոխությունները նվազագույն են:
/* Սկիզբ տպագրություն և գույներ */
body { [ֆոն՝ #d5d6d7 url('images/kubrickbgcolor.jpg');]
ֆոն՝ #e7e7e7 url ('images/kubrickbgcolor.jpg');
}
#էջ { [ֆոնի գույնը՝ սպիտակ;] [սահմանը՝ 1px կոշտ #959596;]
}
#header { [ֆոն՝ #73a0c5 url('images/kubrickheader.jpg') առանց կրկնության ներքևի կենտրոն;]
ֆոն՝ #e7e7e7 url('images/kubrickheader.jpg') առանց կրկնելու ներքևի կենտրոն;
}
#footer { [ֆոն՝ #eee url('images/kubrickfooter.jpg') առանց կրկնելու վերև;]
ֆոն՝ #e7e7e7 url('images/kubrickfooter.jpg') առանց կրկնելու վերև;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [նկարագրություն]{ [գույնը՝ սպիտակ;]
գույնը՝ կարմիր; /* Բլոգի վերնագիրը կարմիր դարձրեք */
լիցք-ներքև՝ .5մ; /* Վերնագրի և նշանաբանի միջև մի փոքր տարածություն դրեք */
}
.նկարագրություն {
տեքստի ձևավորում. ոչ մեկը;
գույնը `կապույտ; /* Բլոգի նշանաբանը դարձրեք կապույտ */
տեքստային դասավորված. կենտրոն;
}
/* Վերջնական տպագրություն և գույներ */
/* Սկիզբ կառուցվածքը */
#էջ { [ֆոնի գույնը՝ սպիտակ;]
ֆոնի գույնը՝ #e7e7e7; [սահման՝ 1px կոշտ #959596;]
եզրագիծը՝ ոչ մի; }
#header { [ֆոնի գույնը՝ #73a0c5;]
ֆոնի գույնը՝ #e7e7e7;
}
/* Վերջի կառուցվածքը */
Դիզայնի և CSS-ի աշխատանքից հետո WordPress-ը ցույց է տալիս իր նոր հագուստը ողջ համացանցին:
WORDPRESS STYLING — ՈՉ ԳՐԱՖԻԿԱԿԱՆ ԴԻԶԱՅՆ
Ոչինչ չի ստացվում, երբ զննարկիչը էջ է բեռնում ինտերնետից, այնպես չէ՞: Նույնիսկ եթե դա իրականում այդպես լիներ, դեռևս խելամիտ է մտածել, թե ինչպես կցուցադրվի էջը, եթե գրաֆիկան չգտնվի:
Jakob դիզայնի դեպքում, եթե kubrickbgwide.jpg-ը չներբեռնվի, ինչ-որ պատճառով, էջը ընդունելի կերպով չէր ցուցադրվի: Վերնագրի և ստորագրի համար օգտագործվող բաց ֆոնի պատճառով դրանք սովորաբար ցուցադրվում են մարմնին հատկացված մուգ-կապույտ ֆոնի վրա: Այնուամենայնիվ, էջի բովանդակությունը դառնում է դժվար ընթեռնելի. այն գրեթե կորչում է մուգ-կապույտ ֆոնի վրա: Մարմնի համար ավելի թեթև ֆոնը կարող էր շատ ավելի իմաստուն ընտրություն լինել:
Կուբրիկի դիզայնի ստեղծողը լուծեց այս խնդիրը՝ նշանակելով այլընտրանքային ֆոնային գույներ, որոնք կօգտագործվեն, եթե գրաֆիկան հասանելի չլիներ: Առաջադրանքները կատարվում են style.css ֆայլում.
body {ֆոն՝ #d5d6d7 url('images/kubrickbgcolor.jpg'); }
#header {ֆոն՝ #73a0c5 url('images/kubrickheader.jpg') առանց կրկնության ներքևի կենտրոն; }
#footer {ֆոն՝ #eee url('images/kubrickfooter.jpg') առանց կրկնելու վերև; }
Եթե պատկերները հասանելի չեն, կօգտագործվի այլընտրանքային RGB գույնի արժեքը:
Եթե գրաֆիկան հասանելի չէ, WordPress-ի լռելյայն բլոգը դեռ հասանելի է և օգտագործելի: Էջի սկզբնական վերափոխման համար, սկսած Կուբրիկի հիմնական դիզայնից, առանց գրաֆիկայի, կարող է լավ տեղ լինել սկսելու համար: Դա կարելի է անել՝ պարզեցնելով վերը նշված պնդումները.
մարմին {ֆոն՝ #d5d6d7; }
#header {ֆոն՝ #73a0c5; }
#footer {ֆոն՝ #eee; }
Այնուհետև գույները կարող են փոխվել՝ փորձելով բլոգի տարբեր գունային սխեմաներ: Պարզապես փոխեք RGB գունային կոդերը, պահպանեք CSS ֆայլը և թարմացրեք զննարկիչը՝ փոփոխություններն անմիջապես տեսնելու համար: Հուսով եմ, որ սա օգտակար էր և հեշտ ընթերցվող:
Գրառումը գրել է Ռոյս Թիվել
