Створення wordpress теми з psd файлу

Відвідувачі ресурсу часто запитують мене: яким програмним забезпеченням я користуюся при створенні тем для WordPress? Моя відповідь зазвичай збігається з тим, що я даю на більш масштабний питання: що взагалі я використовую для дизайну? Макет я створюю в Photoshop, і потім вже уявляю його в HTML за допомогою Dreamweaver. Єдина різниця між створенням тем для WordPress і простим дизайном (особисто для мене) полягає в тому, що я займаюся кодом в останню чергу. Я скидаю весь код в один .html-файл, після чого вже розбиваю його на численні файли (header.php, sidebar.php, footer.php і index.php).

Для того щоб ви могли проникнути в суть моїх дизайнерських рішень (і, зокрема, в суть процесу створення окремої WordPress теми), я хочу розглянути повноцінну проектування нової теми з нуля. Як проекту я буду працювати з Pray With Africa - реально існуючої компанією, що володіє таким логотипом:

Створення wordpress теми з psd файлу

Коротенько хочу розповісти вам про те, чим займається ця компанія. Pray With Africa - це місіонерська організація, яка посилає своїх учасників в різні міста Африки. Компанії потрібен був сайт, який можна було б легко оновлювати, в якому мав бути присутнім свій блог і були окремі галереї під різні зображення і фотографії.

Природно, для реалізації задумів клієнта я вибрав WordPress (не тільки через свою близькість до движку, а й з інших причин). Ця CMS володіє всім необхідним для ведення блогу, дозволяє додавати галереї, створені у Flickr, а також прекрасно інтегрується з Windows Live Writer, в якому можна набирати записи оффлайн, щоб потім, як тільки з'явиться доступ до інтернету, швидко розмістити їх на своєму сайті. Це дуже зручно, враховуючи, що місіонери часто знаходяться в значній віддалі від цивілізації.

Для початку я приступив до роботи з дизайном. Ось, що у мене вийшло:

Створення wordpress теми з psd файлу

Досить простий макет, ніяких витребеньок і примочок, тільки лише невеликі гранжеві вкраплення, щоб якось урізноманітнити зовнішній вигляд теми. Тепер мені знадобиться перетворити цей макет в повнофункціональну тему WordPress. Всі наступні частини керівництва будуть присвячені втіленню в життя різних елементів теми, як то хедер, сайдбар і т.д.

Схожі статті