Создание wordpress темы из psd шаблона. Создание простой темы для WordPress

Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.

1. Frontend блога

До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.).

Стандартный Frontpage (index.php )

Стандартный Single (single.php )

2. Photoshop-макеты

Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip , чтобы увидеть готовый файл Photoshop.

3. HTML и CSS

Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip . Распаковав архив, вы увидите index.html, single.html и page.html . Далее я буду использовать их для превращения в шаблон.

Зачем сперва создавать статический HTML? Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.

4. Как работает тема WordPress

Если вы перейдёте к папке стандартной темы (wp-content/themes/default ), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css . Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php ).

Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .

5. Дублирование файлов шаблонов

Скопируйте папку HTML из GlossyBlue в папку wp-content/themes . После этого перейдите в директорию темы default , скопируйте comments.php и searchform.php в папку glossyblue .

6. Style.css

Перейдите в папку темы default , откройте файл style.css . Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue . Если хотите, можете изменить название и данные об авторе.

7. Разделение файлов

Теперь нам нужно понять где разделить HTML-файлы на части: header.php , sidebar.php , и footer.php . На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.

8. Header.php

Откройте index.html . Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php .
Перейдите в папку темы default , откройте новый header.php . Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div class=description.

Меню навигации (wp_list_pages ) Замените тэги li в ul id=nav на ;

9. Sidebar.php

Вернитесь к index.html , вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar , поместите его в новый php-файл и сохраните как sidebar.php .

  • Замените form id=searchform со всем содержимым на .
  • Замените теги li категорий на
  • Замените теги li архивов на

10. Footer.php

Вернитесь к index.html . Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php .

Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.

«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы)

11. Index.php

Теперь в вашем index.html должен остаться только div id=content . Сохраните файл как index.php . Впишите строки: get_header , get_sidebar , и get_footer в том порядке, как они встречаются в шаблоне.

12. Разбор цикла

Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found» .

13. Копирование цикла

Перейдите к директории темы default , откройте index.php . Скопируйте цикл из стандартного index.php в свой — между div id=content../div . После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.

14. Предпросмотр темы

Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design , вы должны увидеть тему GlossyBlue . Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.

15. Single.php

Пришло время создать шаблон single.php . Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php , сохранив его как single.php . Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template . На следующем скриншоте отображены внесенные мною изменения:

16. Page.php

Теперь новый single.php сохраните с названием page.php . Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов .

17. Удаление файлов HTML

Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.

18. Шаблон страницы WordPress

А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:

Если вы читаете эту статью, есть вероятность, что у вас есть очень красивый дизайн сайта сделаны, вероятно, в Adobe Photoshop и сохранить в PSD, JPG, PDF, формат AI или PNG. Теперь вы хотите, чтобы преобразовать этот файл изображения в тему WordPress, так что вы можете применить его на вновь созданный веб-сайт или блог. Вы могли бы также быть желая для СДП в WordPress конвертер -Но что, если вы могли бы сделать это преобразование все сами, и это тоже бесплатно!

Многие люди, которые хорошо в графическом проектировании прийти к этой точке преобразования PSD для WordPress темы. И они чувствуют себя застряли! Но это не их вина. Создание веб-сайта требует не только способность производить большое выглядящий дизайн, но и он нуждается в некоторых навыков программирования. Вы должны быть экспертом по крайней мере, HTML, CSS, JavaScript, JQuery и PHP программирование, чтобы превратить ваш файл PSD в веб-страницу. Беда в том, что большинство людей либо хороший дизайнер или хороший программист!

Тем не менее, вы не волнуйтесь. Это не все, что трудно преобразовать PSD в тему WordPress. Все, что вам нужно знать правильные шаги предпринять. В этой статье я расскажу вам то же самое! Давайте начнем учиться.

Что такое PSD-файл?

Те, кто не знает, PSD означает Photoshop Document. Это формат файла, в котором Adobe Photoshop сохраняет выполнимые файлы. Вы можете открыть PSD файлы в Photoshop и внести дополнительные изменения в дизайне, как вы хотите. PSD - файлы таким образом, иногда называемые открытые файлы (ссылаясь на то, что эти файлы могут быть отредактированы).

Если вы хотите, чтобы сделать дизайн сайта вашей мечты, то, вероятно, вы будете выбирать Photoshop для материализации его. Photoshop, несомненно, является лучшим и самым популярным инструментом графического дизайна.

Что такое WordPress?

WordPress является по существу свободной блоггинг платформы. Это с открытым исходным кодом программа позволила даже не-программистам легко создавать свои веб-сайты или блоги. WordPress является надежным и масштабируемым и она написана на PHP языке.

Дизайн веб - сайта на основе WordPress называется тема (а иногда, шаблон).

Преобразование PSD в WordPress Theme

Шаг 1: Нарежьте PSD файл

После того, как ваш PSD файл готов, в первую очередь, вам нужно разбить его на куски. Зачем? Ну, потому что одно изображение будет большим по размеру и займет больше времени загрузки. Кроме того, вам придется связать различные модели поведения с различными сегментами изображения. Итак, вам нужно нарезать его.

Но это не значит, что вы можете просто вырезать изображение в случайном порядке. Вы должны сделать штуки в логической форме. Например, заголовок может стать один куском, колонтитул должен быть отдельным... то вы можете резать фон, кнопка и меню и т.д.

Adobe Photoshop позволяет использовать слои. Он имеет встроенный объект нарезать PSD и сохранить полученные сегменты в виде отдельных файлов изображений. Вы можете сохранить эти изображения в JPG или PNG форматах. Если вам необходима прозрачность для работы в любом из этих сегментов, то вы должны сохранить его в формате PNG, потому что JPG не поддерживает прозрачность.

Сокращая изображение, вы должны быть точными. Ошибка даже один единственного пикселя может сделать две части непригодных для реплики.

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

После YouTube видео показывает, как именно ломтик вверх файл PSD и сохранить его в различных изображениях:

Хорошо, теперь, когда у вас есть различные изобразительные элементы вашего дизайна сайта, пришло время перейти к следующему этапу.

Шаг 2: Создание HTML и CSS файлы

Теперь начинается основной кодирования часть процесса преобразования PSD в веб-сайт. Вы в основном нужно создать веб-страницу и собрать все нарезанные изображения таким образом, так что он выглядит точно так же, как ваш PSD.

Сначала необходимо создать файл HTML. Вы можете назвать это что угодно, но согласно конвенции давайте назовем его index.htm. В этом файле, вам нужно будет написать HTML или XHTML код, чтобы показать различные части изображения с вашего PSD. Для создания макета фундамента, вы можете использовать элементы DIV. DIV элементы очень универсальны. Вы можете поместить DIV элементы бок о бок, перекрытия, поверх друг друга. Вы можете выровнять центр элемента DIV влево и вправо, а также вы можете расположить их очень конкретно в определенных координатах на веб-странице.

В этих DIV элементов вы можете вызвать сохраненные изображения и показать их как таковые или в качестве фона в DIV.

После завершения этой основной макет вашего веб - страницы, вы должны стилизовать его , чтобы сделать это так же, как ваш PSD. Для укладки, вы должны использовать каскадные таблицы стилей (CSS) правила. С помощью этих правил вы можете использовать различные стили шрифтов, размеры, цвет, текстовую тень, grayscaling изображений, границы и т.д.

Для написания правил стилей CSS, вы должны создать еще один файл с именем styles.css , а затем вызвать этот CSS - файл в файл index.htm. Стили, присутствующие в styles.css будет применяться к различным элементам в вашей HTML - файлах.

Хорошо, подождите! Если вы что-нибудь о HTML или CSS кодирования не знаю, не волнуйтесь! Это очень простые языки сценариев, и вы можете легко узнать их в Интернете. Ниже приведены некоторые из интернет-ресурсов, где вы можете узнать CSS и HTML:

Учебники для HTML

  1. W3Schools Учебник HTML
  2. TutorialsPoint Учебник HTML
  3. HTML.net
  4. HTML Dog

Учебники для CSS

  1. учебник CSS
  2. W3Schools Учебник CSS
  3. TutsPlus
  4. Основы CSS

Шаг 3: Разрыв HTML файла в WordPress Theme Files

На данный момент в процессе преобразования PSD для WordPress темы, вы бы один HTML - файл (index.htm) и один CSS - файл (styles.css). На третьем этапе, вам нужно будет разбить файл HTML в соответствии с темой структуры WordPress. Сбит с толку? Ну, WordPress имеет предопределенный набор файлов, которые называются вместе для создания веб-страницы. Например, показывая пост, WordPress требует содержания заголовка файла, почтовый файл, файл на боковой панели и нижнего колонтитула среди прочих. Но у вас есть весь код в только один файл - index.htm. Таким образом, вам нужно будет распространять код index.htm в различные WP файлов. Это в основном вырезать-вставить работу! Вот список некоторых из важных файлов темы для WordPress:

  • archive.php
  • category.php
  • comments.php
  • footer.php
  • header.php
  • index.php
  • page.php
  • search.php
  • sidebar.php
  • single.php
  • style.css
  • 404.php

Для того, чтобы создать основную тему WordPress, вы хотели бы создать, по крайней мере, header.php, footer.php, sidebar.php, single.php и index.php.

Просто создать эти PHP - файлы в любом редакторе текста блокнота и скопировать соответствующий код из index.htm в эти файлы. Код, создать заголовок часть войдет в header.php, сноска код будет идти в footer.php ... так далее и так далее.

Если вы не очень хорошо знакомы с PHP, вы можете столкнуться с трудностями при правильно создавать эти файлы. Есть некоторые действительно хорошие и бесплатные онлайн уроки для изучения PHP. W3Schools и PHP.net обеспечивает легко понять PHP помощь. Вы можете пройти через эти учебники, чтобы получить представление о PHP.

Следующее видео YouTube поможет вам понять, как настроить «голую WordPress тему» ​​(это в основном означает -A пустой тему WodPress.

Шаг 4: Добавление функций WordPress и теги

Теперь пришло время, чтобы преобразовать простой PHP-файлы в файлы тема WordPress. Для этого вам нужно будет добавить WordPress тегов в файлах. Но вы можете спросить, что именно WordPress теги?

Как я уже говорил, WordPress является отличной и надежной платформой. Это дает вам огромное количество встроенных функций, которые вы можете легко позвонить и получить вещи сделано.

Давайте рассмотрим пример, чтобы лучше понять его. На главной странице (index.php) , вы можете показать список последних сообщений. Этот список должен автоматически изменить, как и когда вы делаете новый пост. Вы можете написать свои собственные функции PHP для извлечения почтовых данных из базы данных и показать его на главной странице. Но создатели WordPress сделали вашу жизнь проще! Вам не нужно будет писать свои собственные подробные функции. Просто используйте wp_get_recent_posts ($ арг, $ выход) из WordPress и увидеть список последних сообщений отображается!

WordPress имеет комплексную онлайновую документацию, которая дает вам информацию о всех функциях и других объектах, доступных в WordPress. Документация также содержит множество примеров и поэтому очень легко понять. Перейдите по ссылкам ниже, чтобы получить доступ к этой документации:

  • WordPress Теги шаблона
  • Функции WordPress Ссылка

После того, как эти файлы темы будут готовы, вы должны поместить их в папке, которая должна быть им так же, как имя вашей новой темы. Эта папка может также иметь другие папки, чтобы сохранить CSS файлы, файлы JavaScript и файлы изображений.

Вы можете также включить в файл изображения с именем screenshot.jpg или screenshot.png. Этот файл будет показан в виде уменьшенного изображения вашей темы. Это легко узнать, как сделать скриншот.

Список файлов в типичной теме WordPress может выглядеть, как показано ниже:

Вы должны загрузить папку темы в папке / WP-содержание / темы установки WordPress. Например, если вы называете тему Minerva -Тогда тематические файлы должны быть в / WP-контентом / темы / Минервы

После загрузки папки темы, перейдите на панель управления на WordPress , а затем перейти к Внешний вид> Темы. Здесь, вы будете рады видеть ваши собственной разработки новой темы, в числе тем, доступных для активации. Просто выберите тему и активировать его.

Взгляните на следующее видео, чтобы увидеть дальнейший процесс:

Шаг 5: Добавить больше функциональных возможностей, как поиск и пользовательские функции

Ваша тема WordPress уже сделана, и работают. Путешествие из PSD в WordPress тему было закончено. Но вы все равно можете добавить больше функциональные возможности к вашей теме.

Например, вы можете создать search.php файл с кодом, который показывает результаты поиска с вашего сайта.

Кроме того, можно создавать собственные функции PHP и использовать их в различных других PHP файлов. Вы должны создать файл functions.php , чтобы сохранить пользовательские функции в одном месте.

Для того, чтобы справиться с 404 (страница не найдена) ошибки, вы можете создать файл 404.php. WordPress покажет содержимое этого файла всякий раз, когда кто-то попытается получить доступ к URL вашего сайта, который не существует.

Вы также можете добавить некоторые функции JavaScript. JavaScript является наиболее широко используемым на стороне клиента язык сценариев. Вы можете написать функции JavaScript в файлах .js и вызывать эти функции в вашем PHP - файлах. Например, форма проверки является то, что обычно делается с помощью JavaScript. Если пользователь пытается найти что-то на своем сайте без ввода ключевых слов в поле поиска, то JavaScript, который сообщает пользователю, что она должна ввести критерии поиска.

После этих шагов, вы можете легко создать собственное WordPress тему самостоятельно. Эти шаги будут конвертировать файл PSD в функциональной теме WordPress. Тем не менее, некоторые люди ищут бесплатно PSD для WordPress конвертеров. Есть много компаний, которые там утверждают, что взять файл PSD и превратить его в точную тему. Если вы не хотите, чтобы попасть в хлопоты обучения программирования, вы можете просто дать свой PSD этих компаниям. Но, конечно, они берут за это!

Бесплатные PSD для WordPress конвертеров

Я наткнулся на программное обеспечение Elemente по DivineProjects. Вы можете скачать эту программу бесплатно, и она будет конвертировать PSD в готовый к использованию полнофункциональной темы WordPress. Это программное обеспечение работает как плагин Photoshop.

Я надеюсь, что эта статья была полезна для вас. Если у Вас возникли вопросы по этой теме, пожалуйста, не стесняйтесь спрашивать. Я буду стараться изо всех сил, чтобы помочь вам. Благодарим Вас за использование TechWelkin.

Чтобы сделать свой сайт на WordPress, вам обязательно нужно будет добавить тему. Их еще называют шаблонами. Это основа любого веб-ресурса.

В данной статье будут рассмотрены этапы создания шаблона, описана верстка файлов psd.

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

Учтите, что данное руководство не включает описания добавления уже готовой темы – это мануал по генерации собственного шаблона. Если вы скачали тему и не знаете как ее установить, тогда зайдите в админку WordPress, в раздел “Внешний вид” и добавьте там одно из доступных оформлений. А теперь разберем подробнее что такое тема, для чего она нужна и как ее создать самостоятельно.

Для каких целей создается тема вручную

Тема (шаблон) – это совокупность функциональных и стилевых файлов, которые в сумме определяют дизайн ресурса. От темы зависит то, как будет выглядеть сайт, потому очень важно правильно подойти к процессу создания шаблона. Многие сейчас задаются вопросом: “А зачем создавать свою тему, если можно скачать уже готовую в Интернете, причем бесплатно?”. Это логичный вопрос и на него есть вполне исчерпывающий ответ: “Чтобы сделать идеальный шаблон, который полностью отвечает вашим требованиям”.

Когда вы покупаете оформление или скачиваете его из каталога бесплатных шаблонов WordPress, вы обычно жертвуете качеством. Как правило, у таких шаблонов не все подходит для вас. Но вы смиряетесь, думаю, что один-два нюанса – это еще не целая картина, и что позже вы отредактируете тему. Но на деле оказывается, что сайт так и остается с недоделанной темой, которая вам не нравится. Потому лучше сразу делать свое. И хоть верстка сначала может показаться сложной, зато потом, когда научитесь, сможете даже создавать шаблоны под заказ.

Кроме того, после создания шаблона вы ощутите себя “медиком” WordPress – будете знать, что у сайта находится внутри. Поймете, какие элементы за что отвечают. Тогда сайт и вы будете разговаривать на Ты. Ознакомитесь с тегами, структурой и циклами WordPress. А быть может, вам захочется заняться этим профессионально, и вы начнете зарабатывать на жизнь созданием шаблонов.

Итак, вот основные причины, почему вам стоит самостоятельно сделать шаблон для сайта:

  • узнаете все о HTML, CSS и кое-что о PHP;
  • сможете творить, ведь веб-дизайн – это тоже искусство;
  • можно будет зарабатывать на продаже тем;
  • откроете для себя новый навык;
  • создадите оформление, которое 100 % будет подходить под ваш будущий сайт.

Каким стандартам отвечает тема

При написании шаблона очень важно следовать официальным правилам. Нарушение кода, вставка тега в неположенном месте и пропуск его – это может навредить оформлению и полностью испортить его вид. Вам следует хорошо ознакомиться с правилами написания PHP-код, а также HTML, если вы еще не знакомы с этими языками. Кроме того, вам предстоит иметь дело с каскадными таблицами стилей CSS, так что вспомните и их основы – в Интернете много информации по этому поводу. Ну, и самое последнее наименее важное требование – создавайте сайт, как дизайнер, а не как школьник, чтобы у вас получился серьезный проект. Иначе нет смысла браться за это дело.

Все темы WordPress содержатся на хостинге в папке wp-content/themes/. Внутри этой папки есть другие папки с отдельными темами, файл с дополнительными функциями (functions.php), стилевые файлы и изображения. Чтобы найти данные по отдельной теме, вам необходимо зайти в соответственную директорию. Так тема “Vestern” будет размещена в папке wp-content/themes/vestern/.

Прежде чем начать, вам следует хотя бы несколько раз взглянуть на структуру уже готовых тем. Сайт WordPress по умолчанию содержит два стандартных шаблона, которые вы можете просмотреть. Это шаблон Default и Classic. Откройте их файлы в нужной директории на сервере и сравняйте их отличия.

Вы заметите, что шаблон, как правило, состоит из файлов трех форматов:

  1. Style.css – стилевой файл, ответственный за внешнее оформление сайта.
  2. Functions.php – функциональный файл, добавляющий на страницы различные возможности.
  3. Другие php-файлы, которые отвечают за особенности вывода шаблона на сайте, интеграцию темы с WordPress. Именно эти файлы позволяют перевести psd макет в полноценный шаблон.

Разберем каждый их этих файлов детальнее, чтобы понять как проходит верстка темы WordPress.

Правила создания файла style.css

Во-первых, он должен отвечать всем особенностям разметки CSS. От этого файла зависит то, как будет выглядеть ваш сайт. Но он не заработает, если вы не добавите в него описание созданного шаблона. Эта первая особенность WordPress, которую необходимо учитывать при переносе макета psd на движок Вордпресс. Вам предстоит указать следующие параметры:

  1. Имя шаблона.
  2. URL, который ведет к теме.
  3. Описание с указанием основных особенностей шаблона. Кратко.
  4. Имя автора. В данном случае укажите свое имя.
  5. Ссылка на автора, то есть на вас. Можете указать ссылку на профиль в социальных сетях.
  6. Название родительской темы – это указывать необязательно.
  7. Версия темы. Если только создали, тогда v. 1.0.
  8. Полное описание шаблона. Можно писать развернуто.

Чтобы создать самую простую тему WordPress, достаточно добавить редактированную версию с одним файлом style.css. В этом файле возле строки “template” укажите имя родительской темы. К примеру, Classic, если вы редактируете стандартный шаблон. Теперь созданная тема будет полностью соответствовать шаблону Classic. Потому файлы вам нужно будет загружать именно в директорию wp-content/themes/classic.

Таким образом, вы сможете создать свою первую, самую простую тему, которая будет являться “потомком” уже готового шаблона. Но это не будет полноценным оформлением сайта, а лишь попыткой сверстать его, потому вам стоит продолжить исследования.

Особенности файла дополнительного функционала functions.php

Шаблоны не всегда используют файл functions.php, но в большинстве случае он необходим. Его необходимо размещать в директории с соответственной темой. Учтите, что если этот файл имеется в папке с шаблоном, то он будет учитываться при инициализации темы. Он работает как плагин. И будет выполнять такие функции, какими вы его наделите.

Основное предназначение файла functions.php – это определение доступных функций настройки в админке для данной темы. То есть все функции, которые вы впишите в functions.php будут отображаться в админпанели, либо на странице для пользователя. Обычно, это смена цветового решения для сайта WordPress, изменение шрифта и многое другое. Но есть множество вариантов использования этого файла. Однако, это уже совсем другая история…

Особенности php файлов шаблона

Файлы формата php будут отвечать за отдельные части сайта. Они определяют как составляющие страницы, так и рубрики, категории и другие разделы, которые будут выводиться перед пользователем. Поскольку сейчас вы создатель темы, то только вы будете определять какие и сколько файлов шаблонов выбрать. После их выбора в вашей админки появятся новые функции. Чем меньше файлов вы выберете, тем быстрее будет работать сайт, но тем меньше будет у него функционала. Хорошенько подумайте какие файлы вам необходимы, а без каких можно и обойтись.

Если хотите добавить на сайт минимальную тему, или испытать свой psd макет, тогда вам понадобится только два файла в директории шаблона:

  1. Style.css.
  2. Index.php.

Опытные вебмастера умудряются так изменять файл index.php, что только его достаточно для того, чтобы внести настройки футера, сайдбара, поиска, архива, рубрик, страниц и т. д. Но вам лучше попробовать сделать такой шаблон WordPress, в котором каждый файл будет выполнять соответственную функцию.

Даже если вы случайно не укажите какой-либо файл шаблона, WordPress автоматически внесет на сайт собственные стандартные параметры настроек. Например, если не добавить файл, ответственный за комментарии, то движок отыщет в директориях свои варианты этой функции – к примеру, wp-comments.php. Тогда в структуру вашего сайта врежется “чужеродные” комментарии, которые не будут отвечать требованиям шаблона. Чтобы такого не случилось, вам необходимо добавить все основные файлы для отображения разных составляющих страницы:

  • header.php – отвечает за шапку сайта;
  • sidebar.php – боковые колонки;
  • footer.php – подвал ресурса (его нижняя часть);
  • comments.php и comments-popup.php – комментарии.

После генерации каждого из этих файлов, чтобы сайт начал их отображать, вам необходимо внести данные по ним в главный файл шаблона index.php. Для этого укажите в index.php теги, которые ведут к названным файлам. Например:

  • чтобы добавить файл шапки сайта (header.php) пропишите тег

    get_header () tamplate tag;

  • для футера аналогично, только вместо header укажите footer и т. д.

Пример включения одного из файлов шаблона в index.php будет выглядеть следующим образом: . Вам придется искать по каждому из указанных ключевых файлов шаблона отдельную информацию. Найдите мануалы по каждому из файлов, а также образцы, чтобы вы понимали все функции, прописанные в шаблонах.

Выбор функционала шаблона

Со временем вы столкнетесь с дилеммой – какой тип шаблона выбрать. Движок предоставляет выбор. Либо вы сможете выбрать шаблон с подключенной иерархией Template Hierarchy, либо макет с тегами Conditional Tags.

Первый вариант уже был рассмотрен. Все файлы php шаблона – это и есть иерархия Template Hierarchy. То есть следуя правилам этой иерархии, вы постепенно генерируете отдельные файлы макета. Таким образом, у вас создастся полноценный шаблон из ряда функциональных php-составляющих. Иерархия в этом случае работает по принципу загрузки по запросу. К примеру, если у вас есть файл категорий (category.php) и пользователь запросил его, то в браузере загрузится именно эта составляющая сайта. Если же его нет, тогда будет загружен ключевой файл шаблона index.php.

Таким образом, вы сможете изменять внешний вид для отдельных частей сайта при помощи принципа Template Hierarchy. У каждой страницы есть свой определенный ID. Добавьте в директорию с темой файл category-6.php и при запросе рубрики с ID, равным 6, откроется именно это оформление. Если же его не будет, то настройки останутся стандартными – развернется index.php.

Порой принципа Template Hierarchy оказывается недостаточно, чтобы обеспечить максимально комфортное отображение шаблона. В таком случае программисты прибегают к использованию второго принципа – они вводят условные теги Conditional Tags. Эти теги проверяют сайта на соблюдение определенных условий, и если таковые не соблюдаются, они изменяют его внешний вид. То есть эти теги работают по принципу if/else (если/тогда). Так вам не придется добавлять море файлов php с номером каждой категории, а сможете единожды прописать условия для каждого ID.

Как происходит верстка psd макета в Вордпрессе

Некоторые любят прежде создать макет будущего дизайна при помощи различных программ, и только потом его переносить на определенный движок. Это и правда удобно, ведь некоторые приложения позволяют без каких-либо умений сгенерировать отличный дизайн. Если у вас уже есть файл формата psd, и вы хотите его сверстать под движок Вордпресс без использования кода, тогда можете воспользоваться помощью одного из популярных сервисов.

Учтите, что это платная услуга, потому шаблон будет ваш только наполовину. Заказывайте такую услугу только в крайнем случае, если макет кажется вам хорошим, а сил верстать его уже нет. Есть множество программистов, готовых по низкой цене и буквально за одну ночь перенести psd в Вордпресс.

PSD – это файл из приложения Photoshop. Это как бы графическое изображение вашего дизайна. Чтобы его сверстать, необходимо в текстовом редакторе добавить html-разметку. Постепенно вы будете изменять каждый из пунктов этой разметки, добиваясь конечного результата, который изображен на макете. Сразу укажите центрирование вашего шаблона, а также размеры разных его частей.

Следующий шаг – это добавление фоновых изображений. Вы также их можете сделать самостоятельно при помощи того самого приложения Photoshop. Самый простой вариант – это создание градиентных фоновых изображений. Далее займитесь создание логотипа. Постепенно решайте все возникшие запросы – регулируйте шапку сайта, подвал, сайдбар и все его части, согласно сделанному макету. Не забудьте добавить важные файлы шаблона в его директорию, чтобы сайт загружался согласно вашим требованиям.

Только так, постепенно познавая основы разных языков программирования, вы сможете самостоятельно научиться верстать сайт. Никто не говорит, что это получится у вас уже сегодня или завтра. Возможно, на понимание всех особенностей процесса верстки у вас уйдут месяцы. Но не переживайте – у некоторых на это уходят годы. Теперь вы знаете примерную процедуру создания шаблона с нуля, а также перенесения макета psd в готовую тему для интернет-ресурса на движке Вордпресс.

Категория: . 4 комментариев. Опубликовано: 24.11.2012.

Здравствуйте, сегодня я решил опубликовать статью о создании макета сайта, и который мы, потом сверстаем и натянем на движок wordpress . Поэтому если вы не хотите пропустить выход этих статей, то непременно подпишитесь на обновления блога и после выхода статьи вы сразу же узнаете о ней. Создание psd макета сайта, да и создание шаблона wordpress, на самом деле очень простой процесс и я уверен, что вы сможете выполнить все по моей инструкции и получить себе полностью уникальный шаблон.

Для создания шаблона нам понадобится не очень много знаний, знания по HTML и CSS , хватит просто прочитать статьи в темах на этом блоге. Особенно нужно обратить внимание на использование тегов DIV и тегов SPAN .

Теперь давайте разберемся что нам понадобится для того чтобы создать макет PSD и в дальнейшем сверстать этот шаблон для сайта. На самом деле много для этого не нужно, программу фотошоп, которую можно скачать в интернете, надеюсь, что это не будет для вас проблемой и скачать исходные материалы для этого.

Также в скором времени я буду публиковать статьи, в которых буду рассказывать о том, как создавать текстуры и фоны для сайта, поэтому подпишитесь на обновления блога.

Создание документа.

Теперь начнем создание макета и создадим новый документ. Выбираем файл — создать. Размеры для документа выбираем 960 на 1600 пикселей.

Выводим две направляющие, слева и справа. Для этого просто нажимаем на линейки и выводим линии.

Теперь нам нужно изменить размер холста. Для этого выбираем Изображение-Размер холста и выбираем размер для холста 1200 на 1600 пикселей. После этого заливаем эту область белым цветом, применив инструмент «Заливка».

Группы для шаблона.

Теперь давайте создадим группы для сайта. Создадим стандартные группы как на всех шаблонах и это: шапка, меню, контент, боковая колонка и подвал сайта. Сделать это очень просто, в меню слои нажимаем на изображение папки, чтобы переименовать созданную группу просто нужно щелкнуть по названию двойным щелчком и ввести нужное название.

Шапка сайта.

Теперь давайте начнем с создания шапки для сайта. Первое что нужно сделать, это открыть текстуру с названием «Текстура 1» . И теперь нам нужно обрезать черный фон, выполнить это очень просто, выбираем инструмент «волшебная палочка» и нажимаем на черный фон, теперь на светлой области нажимаем правой кнопкой и выбираем пункт «Инверсия выделенной области».

Следующим шагом мы наведем точность наших границ, выбираем правую кнопку мыши, и пункт уточнить край. И выставить все настройки, как показано на картинке.

Теперь выбираем «слои – новый — скопировать на новый слой ». Теперь берем слой мышкой и перетаскиваем его на наш рисунок.

Следующим шагом нам нужно перевернуть рисунок. Для этого выбираем Редактирование-трансформирование-поворот на 90 градусов против часовой стрелки. После этого нажав левую кнопку мыши, нужно будет переместить ваш слой, так как показано на рисунке ниже.

Теперь нам нужно увеличить насыщенность нашего изображения и для этого переходим в вкладку Изображения – Коррекция — Цветовой тон/насыщенность . Теперь нам нужно уменьшить яркость картинки до -100. И вот что у нас должно получиться:

Теперь давайте напишем наш логотип сайта. Для этого нам нужно установить новый шрифт. Я думаю, что вы уже скачали файл с исходными материалами и также в архиве есть файл шрифта. Первым делом вам нужно разархивировать шрифт. Теперь нам нужно зайти в папку (чаще всего это Диск C:/windows — Fonts).
И копируете туда все файлы шрифта. Теперь перезапускаете программу, и вам будет доступен этот шрифт.
Теперь выбираем инструмент Текст и выбираем наш шрифт, цвет белый и возле левой направляющей создаем логотип. Вот что у меня получилось.

Теперь давайте с правой стороны создадим меню. Оно будет состоять с трех основных пунктов и это Главная, Контакты и про автора. Снова выбираем инструмент Текст и нажимаем ими в нужном месте. Цвет белый и шрифт Wide Latin и размер 18 пикселей.

Создаем новый слой. Теперь берем инструмент «прямолинейное лассо» и выделяем кнопку вокруг одной из надписей.

И заливаем выделенную область цветом 2A2A2A. Теперь меняем порядок слоев, переносим слой с надписью выше слоя с заливкой.

Основной контент сайта.

И теперь у нас есть кнопка меню после того как по ней перешли. Теперь нам нужно перейти в папку Контент и создать в ней новый слой.

Открываем рисунок 3 и помещаем его ниже всех слоев. При помощи трансформирования увеличиваем размер картинки пока она не заполнит все пространство.

Теперь настраиваем яркость и контрастность текстуры. Для этого нажимаем кнопки Ctrl + Shift + U . Выбираем Изображение – коррекция — Кривые.

Выставляем настройки как на рисунке.

Создаем новый слой, и теперь мы выделим с вами область контента. Область контента у нас будет белого цвета и с размерами 660 на 1200 пикселей. Для этого выбираем инструмент «прямоугольная область и стиль – заданные пропорции", где мы должны ввести размеры поля. И после чего нужно залить поле инструментом «Заливка».

Теперь нужно задать обводку для нашего поля. Выбираем слой, на котором есть наша картинка и нажимаем на кнопку «Добавить стиль слоя», в выпавшем меню выбираем Обводка.

И установить следующие настройки — толщина 1 пиксель и цвет c8c7c7.

Теперь открываете картинку 4 , при помощи масштабирования уменьшаем размер, он должен быть где-то на десять пикселов больше от белого поля справа и слева. Сверху и снизу нужно сделать отступы на 50-60 пикселей.

Теперь нажимаем комбинации кнопок Ctrl + Shift + U для обесцвечивания текстуры, и отрегулировать яркость при помощи кривых. Настройки как на картинке.

Выбираем слой с нашим белым полотном, нажимаем правой кнопкой и выбираем пункт «Выделить пикселы ».

Теперь выбираем слой с серым и нажимаем выделение – модификация — сжать , и ставим сжать на три пикселя. После чего нужно инвертировать наше выделение, это мы уже делали, и сделать это просто, выбираем Выделение-инверсия , нажимаем кнопку Del . Вот что у нас должно получиться:

Теперь создаем маску для того же серого слоя.

Выбираем черно-белый градиент и нажав левой кнопкой проводим с середины до нижней границы страницы и тем самым мы сгладим переход.

Теперь давайте создадим кнопки навигации по страницам. Для этого нам нужно просто нарисовать прямоугольник черного цвета, размер можете подобрать на свое усмотрение. Также в каждую кнопку нужно прописать название страниц. Для надписей используем шрифт Times New Roman и размер 18 пикселей.

Теперь давайте откроем картинку с иконками и добавляем их на противоположную сторону от основного меню. Теперь нам нужно для контента сделать отступ с двух сторон по двадцать пикселей. Теперь нам нужно добавить заголовок к нашей первой статье, цвет текста – черный. Для даты и количества комментариев я использовал цвет cb8154.

Теперь чтобы отделить заголовок от основного содержимого сайта нужно нарисовать линию. Для того чтобы провести прямую линию нужно выбрать инструмент карандаш и удерживая клавишу Shift проводим линию нажав в начале и проведя до самого окончания линии.

Теперь нам нужно создать место для превью. Для этого создаем для прямоугольник с нужными нам размерами, я решил делать 165 на 165 пикселей, и заполним его черным цветом. Применим к нему настройки: обводку и тень.

Обводка.

Тень.

Теперь добавим произвольный текст. Вот что у нас должно получиться:

Теперь после окончания статей нужно отделить 30 пикселей и серого цвета (СССССС). Потом рисуем четыре квадрата размерами 32 на 32 пикселя и заполнить их красным цветом 8E0A13.

Рисуем поисковую форму.

Для этого нам нужно просто нарисовать прямоугольную область белого цвета, к ней применяем внутреннюю тень.

Теперь рисуем красную кнопку все того же размера 32 на 32 и красного цвета и вписываем белым цветом слово «Поиск ».

Боковое меню.

На новом слое рисуем прямоугольник 270 пикселей в ширину и заполняем его цветом 1F1F1F. Также добавляем заголовок все той же ширины 270 пикселей и высотой 25 пикселей, заполненный черным цветом.

Теперь нам нужно написать категории для блога. Текст шрифтом Times New Roman и размером в 16 пикселей. К каждому пункту меню нужно добавить по картинке. Выбираем «Произвольная фигура » и выбираем форму растровой точки «Орнамент 4 » и заливаем цветом 818181.

Подвал сайта.

С подвалом сильно заморачиваться не будем, просто зальем все поле черным цветом и добавим меню, шрифтом Times New Roman и размером 18 пикселей и цветом E6E6E6.

Если вы хотите скачать шаблон, который получился, то нажмите на кнопку и вам будет доступна ссылка для скачивание. На этом статья закончена и я думаю что вы теперь знаете, что первый шаг для создание шаблона wordpress это создание PSD макета сайта.

Далеко не секрет, что в Сети существует великое множество готовых шаблонов для WordPress. Начиная от бесплатных и заканчивая дорогими премиум-шаблонами с собственными фреймворками.

В чем же разница? Какой выбрать дизайн для своего сайта?

Эта статья предназначена для тех, кто планирует свой сайт на базе WordPress и стоит перед выбором шаблона.

Начнем с бесплатных. Преимущество очевидно - это цена, точнее ее отсутствие. Главный же недостаток публичных шаблонов в том, что если шаблон относительно приличный, на нем обязательно уже существует огромное количество сайтов. И вероятность того, что вы или ваши клиенты нарвутся на полностью идентичный в плане дизайна сайт очень и очень высока. Поэтому, останавливать свой выбор на публичных шаблонах стоит только в том случае, если ваш бюджет реально ограничен, и вас не особо заботят имиджевые функции сайта. Да, конечно, при вложении небольшого количества сил или средств, вы можете до неузнаваемости уникализировать (адаптировать) и публичный шаблон. И все равно это будет одним из самых дешевых решений.

Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.