Как да си направим дизайн за WordPress блог

ivo stankov blogЩом четете това, значи вече сте чували за блог системата WordPress и няма да ви занимавам с уводни думи за нея, а директно ще ви покажа един от начините за изработване на собствен дизайн за WordPress. Това е начина, който използвах, за да направя дизайна на моя личен блог – www.ivostankov.net.

1. Изготвяне на дизайн
Първото, което трябва да направите е изготвянето на самият дизайн с помощта на графична програма, например Photoshop. Какво ще представлява дизайна е изцяло ваш избор, но все пак е хубаво да помислите за това как ще се „нареже” след това, особено, ако вие ще вършите това. След като дизайна е готов е добре да го запазите в работен формат PSD, за по-лесна работа по него след това.

2. Варианти за интеграция на дизайн
Сега, имате два варианта за вграждане на самия дизайн в WordPress структурата. Единият е да “нарежете” дизайна в html формат и след това да вкарвате WordPress функциите в него. Аз лично не съм използвал този начин, защото е по-бавен и много повече неща могат да се объркат. Препоръчвам ви вторият вариант – намерете си подходяща готова WordPress тема с подобна структура до тази на вашият дизайн, след което само да промените файловете на темата, за да се получи вашият дизайн. Този вариант е сравнително бърз и изисква по-малко работа от първия.

3. Интеграция на дизайн
Моят избор е темата Blix, която до скоро беше официална. Когато си свалите темата, която сте избрали, разгледайте нейните файлове. Обикновено не са много, а тези, които ще редактирате са само няколко: header.php, index.php, comments.php, sidebar.php, footer.php и style.css. Това са основните файлове, в които се състои дизайна и структурата на цялата WordPress тема и всички теми ги имат. Сега ще ви запозная по-отблизо с тях:
header.php – съдържа структурата на горната част от темата. Това са doctype, таговете html, head, отварящ body таг, meta, stylesheet връзки и всички други, които се поставят в head областта.
index.php – структура на съдържанието на блога – постове, връзка към коментари, странициране, дори и текстът за грешна страница (404).
comments.php – изглед и писане на коментари.
sidebar.php – повечето теми за WordPress имат дизайн с две основни колони и този файл е с структурата на по-малката колона. Буквално sidebar – странична част.
footer.php – долна част на дизайна, текст за copyright, връзки и/или нещо друго.
style.css – най-използваният файл за нас. Той съдържа всички CSS стилове използвани в сайта. Това са големина, шрифт, цвят, подравняване на всички елементи на дизайна – колони, текст, изображения.
За работа с тези файлове са ви нужни знания по HTML, CSS и основни знания по PHP, колкото да не объркате структурата на WordPress системата. Ако имате тези знания, всичко е във вашите ръце – отваряте горепосочените файлове и ги редактирате по свой вкус и дизайн. Резултатът можете да преглеждате на уеб сървър с поддръжка на PHP и MySQL, където е инсталиран WordPress. Как се използва собственият WordPress дизайн ще разберете в следващата точка.

4. Употреба на дизайн
След като сте готови с темата, можете да я персонализирате. Детайлите за темата се съдържат в style.css файлът – theme name, theme uri, description, version, author, author uri. Можете да сложите и screenshot на новият дизайн като замените screenshot.png от папката на темата с вашият дизайн (препоръчителен размер 300x225px).
За да използвате вашата нова тема, трябва да сложите файловете и в отделна папка в директорията на WordPress – wp-content/themes/, например wp-content/themes/mytheme. Когато сте готови с това, влизате в администраторският панел на вашият WordPress, раздел Presentation и избирате вашата чисто нова тема. Когато се върнете на индекса на вашият блог, новата тема трябва да е пред вас. Поздравления!

Краен резултат:
ivo stankov blog

Други дизайни за WordPress блог, които съм правил:
Designer Source, Feel Firefox

18 thoughts on “Как да си направим дизайн за WordPress блог

  1. Webplay

    Здравей, Иво,

    Поздравления за добрата статия. Аз постигнах подобен резултат на уникален дизайн в Креативен и темата Simpla.

    Модифицирането на вече съществуващи теми е по-удобно и спестява време от създаването на теми от нулата.

  2. ivan

    Здравеи Иво мисля че това е подходящата тема за която искам да те попитам от каде какво трябва да сваля за да си направя саит с wordpress аз имам закупен хостинг и домейн самоче нз как стават нещата плс помогни ми…

  3. Иво Станков Post author

    ivan, можеш да провериш в контролния панел на хостинга ти дали има Fantastico пакет, който включва и WordPress. През него можеш да го инсталираш много бързо без да теглиш допълнителни неща. Ако го нямаш, тогава трябва да дръпнеш последната версия на WordPress ot wordpress.org и да си го инсталираш.

  4. ivan

    нямам проверих видях в саита на колегата ти янев там как става но като направя всичко необходимо и вече трябва да го инсталирам така и не разбрах какво трябва да напиша за да го инсталирам ако можеш да ми помогнеш малко повече ще сам ти благодарен

  5. Иво Станков Post author

    Просто отваряш (с браузър) папката, където си сложил файловете. Инсталацията започва сама.

  6. ivan

    ами как да ти обясня аз сам ги качвал с FlashXP такаме научи един приятел и повече нз ако не сам го направил правилно моля да ми обясниш малко по точно защото започнах да се занимавам от няма има 2 седмици и не сам много в крак с това

  7. Иво Станков Post author

    Ако нямаш елементарни знания за работа с браузър и уеб сървър, което очевидно е така, по-добре не се занимавай. Не е трудно, но не става само с “така ме научи един приятел”.

  8. ivan

    Ами братле един приятел ми показа как се правят с мкпортал и аз си направих товзи саит http://www.nsmbg.info показами кои фаилове каде се вкарват и т.н. и после как се инсталирват затова питам и тебе

  9. ivan

    искам само да те попитам ти с къв плудинг го направи този саит

  10. nevata7

    hell o,hora!evala za gotiniq urok.waprosa mi 6te se stori adski tap na wsi4ki wi,100%,no sam o6te neopitna sas saitowete i se u4a.nqkoi 6te mi kaje li kade adjeba sa teq failove na TEMATA?
    thanks! :)

  11. nevata7

    Здравейте, хора!Пак съм аз…:) Проблема ми е, че не ми се отваря мястото с фаиловете на темата, пиша си в лентата сайта, прибавям /wp-content/themes/името_на_темата и ми пише че има грешка… Това пък защо? Още един път извинете, че досаждам! :)

  12. Иво Станков Post author

    nevata7, тази папка не се отваря през браузър. За да редактираш файловете там – на твоя компютър теглиш файловете и ги отваряш. А за да я актириваш – опцията е в администраторския панел.

  13. nevata7

    Иво Станков президент!Намерих фаиловете, сега ще го попроменя!Благодарско! :):):)

  14. Nikolay

    Страхотна статия :D Благодаря много са инфото беше ми от голяма полза ;)

  15. Вероника

    Здравейте,
    Наскоро закупих тема с фиксирани цветове и се прнудих да купа после PSD homepage template към темата, за да мога да ги модифицирам. Проблемът е обаче че не знам как да инсталирам тази темплате, за да е функционална. Ако може само ми кажете къде да я кача или какво да направя с нея. Папките са в зип файл PNG; PREVIEW; PSD & font_information.
    Благодаря предварително за отговора !

  16. стоян

    Според моите наблюдения и според различните сектори в момента посещенията от мобилни устройства е от 10 до 35% и расте. Така че не е лоша практика сайта ви да е оптимизиран и за тях. Има много хора които могат да помогнат със стар или нов сайт. В Пловдив съм работил със Qusro.com , те правят и доста добри wordpress сайтове

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload the CAPTCHA.