Жақында веб-сайтымды «Веб 2.0 дәуірі» үшін қайта жасау уақыты келеді. Мен мұны орындауға болатын екі платформаны, Drupal және Joomla-ны мұқият қарастырдым.
Drupal және Joomla, Drupal жағдайында блог пен форумды негізгі модульдер ретінде қамтитын жан-жақты пакеттерді ұсынады. Бұл платформаларға тақырып қоюды CSS (Cascading Style Sheets) және PHP (Personal Home Page немесе PHP: Hypertext Preprocessor) код модификациялары арқылы да орындауға болады. Дегенмен, бұл платформалар күрделі және осы платформаларды орнату, басқару және теңшеу үшін жеткілікті үйрену қиын міндет болуы мүмкін.
Екі платформаны зерттегеннен кейін, соның ішінде оларды өзімнің сынақ алаңымдағы платформамда да, Интернетте де пайдалану арқылы мен болашақ веб-қажеттіліктеріме ықтимал шешім ретінде WordPress-ті қарастыруды шештім. Мен WordPress-тің соңғы нұсқасын орнату оңай, пайдалану оңай және тақырыпқа оңай екенін білгенде таң қалдым.
Бұл мақалада мен WordPress 2.5 нұсқасын қалай теңшеуге болатынын сипаттаймын.
WORDPRESS СТИЛДЕРІ
Әдепкі WordPress блогының көрінісін құрайтын алты негізгі компонент бар:
1. Тақырып графигі
2. Блог тақырыбы
3. Таглайн
4. Бет
5. Фон
6. Колонтитул.
Блогты жылдам жүктеу үшін мен үстіңгі немесе төменгі колонтитул сызбасын қолданбауды шештім; және дизайн жаңа пальтомен әдепкі WordPress тақырыбы болғандықтан, графикалық дизайн бойынша аз ғана жұмыс істеу керек. Шын мәнінде, екі баған әсері бар блог бетін жасау үшін маған тек бір графика жасау керек болды. Блог беті бетті жақтауға қызмет ететін қою-көк *дене* фонының ортасында «қалқылады».
Графиканы құру
Әдепкі WordPress тақырыбына арналған кескіндер каталогын қарау Kubrick көрінісі үшін пайдаланылатын әдепкі кескіндерді көрсетеді. Әзірге ерекше қызығушылық тудыратын бір ғана файл бар: kubrickbgwide.jpg. Дизайн үшін басқа Кубрик кескіндері қажет емес, бірақ күрделірек дизайн үшін қажет болады.
Блог беті жаңа дизайнның ортасынан өтетін «кесіндіден» құрылады. Бөлім - блог бетінің еніндегі тар сурет.
Мен дизайнды Adobe Illustrator бағдарламасында негізгі бетті (760px X 600px) орналастырудан бастадым. Маған осы түрдегі өнер туындылары үшін Illustrator пайдалану ұнайды, бірақ басқа бағдарламаларды да қолдануға болады.
Мен негізгі бетті беттің өң түсімен толтырдым (қою көк *дене* фонымен шатастырмау үшін). Ашық фон түсі блогтың тақырыбы мен слогы сияқты түсті мәтінді «көрсетеді».
Мен бетті екі тіктөртбұрышпен немесе «бағандармен» қабаттастырдым. Сол жақтағы ені 510 пиксель болатын баған пастелді сары түспен толтырылған; ені 230 пиксель болатын оң жақ баған пастелді көк түспен толтырылған. Екі баған айналасындағы бет фонының 10 пиксель жиегі бар негізгі бетке сәйкес келеді.
Illustrator бағдарламасында мен бетке 760px X 40px тіктөртбұрышты орналастырдым және оны кесінді жасау үшін пайдаландым. Бөлім - бұл үлкенірек кескіннің, бұл жағдайда блог дизайнының өкілдік бөлігі. Мен кесінді kubrickbgwide.jpg ретінде сақтадым. Kubrickbgwide.jpg блог бетінің фонын жасау үшін пайдаланылады. Блог бетіне жаңа мазмұн қосылғанда, екі бағанды фонды «өсіру» үшін кесіндінің көшірмелері тігінен жинақталады. Бұл блогтың басты бетін жасау үшін браузерге қажет жалғыз сурет. Сондықтан блог өте жылдам жүктеледі.
Әзірге өте оңай, солай ма? Қалған дизайн тақырыптың CSS файлы және/немесе WordPress әкімшілік интерфейсі арқылы орындалады.
CSS өзгерістер
Әдепкі CSS файлы wp-content_themes_default каталогында. Төмендегі CSS мәтіні style.css кодының өзгерістерін көрсетеді. Әдепкі CSS файлына қандай да бір өзгертулер енгізбес бұрын, мен әрқашан түпнұсқаның көшірмесін жасап, сақтаймын. CSS файлын кез келген мәтіндік редактормен ашуға және өзгертуге болады. Жойылатын мәтін төртбұрышты жақшада көрсетіледі. Жаңа немесе өзгертілген мәтін жақшасыз көрсетіледі.
/* Типография мен түстерді бастау */
дене { [фон: #d5d6d7 url('суреттер/kubrickbgcolor.jpg');]
фон: #636f89; /* Негізгі фон түсін көк етіп орнатыңыз */
}
#бет {
[фон түсі: ақ;] [шектік: 1px тұтас #959596;]шекара: жоқ;
} [#тақырып {
фон: #73a0c5 url('images/kubrickheader.jpg') қайталанбайтын төменгі орталық;
}
#headerimg {
жиегі: 7px 9px 0;
биіктігі: 192px;
ені: 740px;
}]
#төменгі деректеме { [фон: #eee url('суреттер/kubrickfooter.jpg') қайталанбайтын жоғарғы;]
фон: #fffef2; /* Өте ашық сары */
}
h1, h1 a, h1 a: меңзерді апару, h1 a:барған, #headerimg [.description] {
мәтінді безендіру: жоқ; [түсі: ақ;]
түсі: қызыл; /* Тақырыпты қызыл етіңіз */
төсеу-төменгі: .5em; /* Тақырып пен слог арасына сәл бос орын қалдырыңыз */
}
.сипаттама {
мәтіндік безендіру: жоқ;
түсі: көк; /* Слогты көк етіп жасаңыз */
мәтінді туралау: орталық;
}
/* Соңғы типография және түстер */
/* Құрылымды бастау */
#бет { [фон түсі: ақ;]
фон түсі: fffef2; /* Өте ашық сары */ [шекара: 1px тұтас #959596;]
шекара: жоқ;
}
#тақырып { [фон түсі: #73a0c5;]
фон түсі: #fffef2; /* Өте ашық сары */
}
/* Соңғы құрылым */
Бұл өзгертулерді style.css файлына жасап, сақтағаннан кейін жаңадан жасалған блог беті аяқталады.
WORDPRESS СТИЛИНГІ — сәнді көйлек ДИЗАЙНЫ
Маған Джейкоб блогының дизайнының қарапайымдылығы ұнағанымен, ол бәріне ұнамайды. Көптеген адамдар «жарқырауды» жақсы көреді. Сәнді WordPress көйлегінің бағасы көбінесе блогты баяу жүктеп, қолдану мүмкіндігін арттырмайды. Дегенмен, өз блогының сыртқы түрін «киімдеуді» қалайтындар үшін мұны орындаудың қосымша жолдары бар.
Ең алдымен, әдепкі WordPress бетінің фоны тақырып (kubrickheader.jpg) және төменгі деректеме (kubrickfooter.jpg) графикасын қолданатынын атап өткен жөн. Бұл графика Якоб дизайнындағыдай тұтас түспен емес, градиенттермен толтырылған. Сондай-ақ беттің астында өте кішкентай көлеңке бар сияқты.
Әдепкі беттің күрделілігіне байланысты қосымша сызбалар қажет және осылайша көбірек кесінділер қажет болады. Бұған қоса, бетті «қалқыту» үшін күрделірек негізгі фоны қажет болғанда, бұл үшін «тұқым» кескіні де қажет болуы мүмкін (бұл kubrickbgcolor.jpg кескіні үшін).
Бұрынғыдай мен Illustrator бағдарламасында блог бетінің сызбасын жасадым. Бұрыштары дөңгеленген бет әдепкі WordPress фонында қалқып тұрады, сары градиенті және шағын көлеңкесі бар.
Мен алдымен Illustrator жұмыс тақтасында 760px X 600px тіктөртбұрышын жасадым. Мен бұл тіктөртбұрышты фон түсімен толтырдым (C:8, M:6, Y:6, K:0).
Содан кейін, дөңгелектенген төртбұрыш құралын пайдаланып, мен 736px X 584px тіктөртбұрышты сызып, оны сары градиентпен толтырдым. Негізінде, мен көлеңкеге жеткілікті орын қалдыра отырып, бетті фондық режимде мүмкіндігінше үлкен етіп жасадым.
Соңында мен дөңгелектелген тіктөртбұрышқа кішкентай көлеңке бердім.
Кесектер *дене* фонына тамаша біріктірілетінін қамтамасыз ету үшін мен бірдей фондық түсті (C:60, M:60, Y:8, K:6) 6px X 0px квадратын жасап, оны келесідей сақтадым. kubrickbgcolor.jpg. Кішкентай сурет дененің фонын «бояу» үшін пайдаланылады. Бұл маңызды қадам, себебі дене үшін пайдаланылатын фон және бет үшін пайдаланылған фон Fancy дизайнына тамаша сәйкес келуі керек.
Бөлшектерді құру
Тіктөртбұрыш құралын пайдаланып, жоғарыда сипатталған орналасудың үстіне 760px X 200px тіктөртбұрышты орналастырдым. Мен бұл тіктөртбұрышты орналасудың жоғарғы жағына орналастырдым және оны тақырып сызбасына кесінді жасау үшін пайдаландым. Мұны жасамас бұрын, мен инсульт пен толтыруды өшірдім.
Мен кесінді kubrickheader.jpg ретінде сақтадым.
Мен төменгі деректеме мен бет кесектерін ұқсас түрде жасадым және оларды тиісінше kubrickfooter.jpg және kubrickbgwide.jpg деп өзгерттім. Kubrickfooter.jpg 760px X 63px және kubrickbgwide 760px X 40px.
Суреттер каталогында тағы екі Kubrick кескіні бар: kubrickbg-ltr.jpg және kubrickbg-rtl.jpg (солдан оңға және оңнан солға). Бұл кескіндер kubrickbgwide.jpg кескінімен бірдей. Сонымен, kubrickbgwide.jpg файлының екі көшірмесін жасап, олардың атын тиісінше өзгерттім.
CSS өзгерістері
Әдепкі CSS файлы wp-content_themes_default каталогында. Төмендегі CSS мәтіні style.css кодының өзгерістерін көрсетеді. Шаршы жақшалар қандай кодты жою керектігін көрсетеді және жаңа код жақшасыз көрсетіледі. Өзгеріс жасамас бұрын, мен түпнұсқа файлды көшіріп, сақтадым. Fancy дизайны үшін CSS өзгерістері аз.
/* Типография мен түстерді бастау */
дене { [фон: #d5d6d7 url('суреттер/kubrickbgcolor.jpg');]
фон: #e7e7e7 url('images/kubrickbgcolor.jpg');
}
#бет { [фон түсі: ақ;] [шектік: 1px тұтас #959596;]
}
#header { [фон: #73a0c5 url('images/kubrickheader.jpg') қайталанбайтын төменгі орта;]
фон: #e7e7e7 url('images/kubrickheader.jpg') қайталанбайтын төменгі орталық;
}
#төменгі деректеме { [фон: #eee url('суреттер/kubrickfooter.jpg') қайталанбайтын жоғарғы;]
фон: #e7e7e7 url('images/kubrickfooter.jpg') қайталанбайтын жоғарғы;
}
h1, h1 a, h1 a: меңзерді апару, h1 a:барған, #headerimg [сипаттама]{ [түсі: ақ;]
түсі: қызыл; /* Блог тақырыбын қызыл етіңіз */
төсеу-төменгі: .5em; /* Тақырып пен слог арасына сәл бос орын қалдырыңыз */
}
.сипаттама {
мәтіндік безендіру: жоқ;
түсі: көк; /* Блог тақырыбын көк түске айналдырыңыз */
мәтінді туралау: орталық;
}
/* Соңғы типография және түстер */
/* Құрылымды бастау */
#бет { [фон түсі: ақ;]
фон түсі: #e7e7e7; [шекара: 1px тұтас #959596;]
шекара: жоқ; }
#тақырып { [фон түсі: #73a0c5;]
фон түсі: #e7e7e7;
}
/* Соңғы құрылым */
Дизайн және CSS жұмысынан кейін WordPress өзінің жаңа киімдерін бүкіл Интернетке көрсетеді.
WORDPRESS СТИЛИНГІ — ГРАФИКАСЫ ЖОҚ ДИЗАЙН
Браузер Интернеттен бетті жүктегенде ештеңе дұрыс болмайды, солай ма? Тіпті егер бұл шын мәнінде солай болса да, графика табылмаған жағдайда беттің қалай көрсетілетінін қарастырған жөн.
Jakob дизайны жағдайында kubrickbgwide.jpg жүктеп алынбаса, қандай да бір себептермен бет дұрыс көрсетілмейді. Үстіңгі және астыңғы деректемелер үшін ашық фон пайдаланылғандықтан, олар қалыпты түрде денеге тағайындалған қою-көк фонда көрсетіледі. Дегенмен, бет мазмұнын оқу қиынға соғады: ол қара-көк фонда жоғалып кете жаздады. Денеге арналған жеңіл фон әлдеқайда дана таңдау болуы мүмкін.
Кубрик дизайнын жасаушы бұл мәселені графика қол жетімді болмаған жағдайда қолданылатын балама фондық түстерді тағайындау арқылы шешті. Тапсырмалар style.css файлында жасалады:
дене {фон: #d5d6d7 url('суреттер/kubrickbgcolor.jpg'); }
#header {фон: #73a0c5 url('images/kubrickheader.jpg') қайталанбайтын төменгі орталық; }
#footer { фон: #eee url('images/kubrickfooter.jpg') қайталанбайтын жоғарғы; }
Суреттер қол жетімді болмаса, балама RGB түс мәні пайдаланылады.
Егер графика қол жетімді болмаса, әдепкі WordPress блогы әлі де көрінетін және қолдануға жарамды. Бастапқы бетті қайта жасау үшін, негізгі Kubrick дизайнынан бастап, графикасыз, бастау үшін жақсы орын болуы мүмкін. Бұған жоғарыдағы мәлімдемелерді жеңілдету арқылы қол жеткізуге болады:
дене {фон: #d5d6d7; }
#тақырып {фон: #73a0c5; }
#төменгі деректеме { фон: #eee; }
Әртүрлі блог түс схемаларын сынап көру үшін түстерді өзгертуге болады. RGB түс кодтарын өзгертіп, CSS файлын сақтаңыз және өзгерістерді бірден көру үшін шолғышты жаңартыңыз. Бұл пайдалы және оқуға оңай болды деп үміттенемін.
Жазған Ройс Тивел
