Создание простой темы для WordPress. Полное руководство по темам фреймворкам WordPress

Запилили мне шаблон под wordpress. Да не простой, а с лендингом на главной. Да ещё и адаптивно всё.

Старый лендинг

До этого стоял у меня простой статический лендос, который я спиздил с какого-то сайта c предложением услуг копирайтинга. Конечно, не совсем спиздил, я его переделал. Цвета, блоки, меню, и т. д. Но всё это делалось на коленке. Ибо дизайнер из меня никакой. Так, html код в трех местах поправить могу конечно.

Вот так это выглядело:

Форма заказа это уже новая, через wp, вставленная. Была красивая, но она как-то перестала работать. Причем, обнаружилось, что она не пашет, только через пару месяцев. Это летом было. Я пиздец негодовал тогда — два месяца люди не могли написать мне и заказать услуги потому что я нормально не протестировал форму заказа! Были заказы через скайп, напрямую в почту, в личках на форумах. А вот с лендинга внезапно перестали приходить заявки.

А по первой-то, когда только слабал этот сайтик — заявки поступали регулярно. Потом голову ломал почему вдруг перестали. Оказалось что форма не работала. Ну как, не работала, она работала — со второй попытки уходила заявка. Поэтому я и проебал в тестах этот момент — потому что она кое-как всё таки работала. Но кто будет писать второй раз админу, у которого не пашет форма обратной связи? Вот так всё и продолжалось, пока какой-то добрый человек не сообщил мне в скайпе, что форма нихуя не пашет. Тотчас же убрал форму, и воткнул чат живосайт. Дело потихоньку наладилось.

А в сентябре я решил запустить таки этот бложек. Конечно же на wordpress. А на главную прилепил свой лендинг .

Ну и недавно уже вернул форму заявок через плагин встроил в этот лендос.

Но это всё как-то несерьёзно.

Где взял бабки на новый дизайн?

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

По цене было адекватное предложение в 4000 рублей, и 4 дня работы. На что я немедля согласился. Как оказалось, вёрстка действительно дело непростое. Было пару десятков замечаний и правок, которые в течение двух суток терпеливо допиливались.

В результате получилось то что получилось, и что вы можете видеть теперь на этом сайте. Итого, обошлось всё дизайн+верстка шаблона в сумме в 8000 рублей. Как вам шаб? Да и вообще, это нормальные цены? Может быть я не прав, и такая верстка реально 10к рублей стоит, а я просто жмот?)

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

Что должен знать современный верстальщик?

Времена, когда верстальщику достаточно было знать только HTML и CSS уже давно прошли. Это раньше для того, чтобы устроиться работать верстальщиком, требовалось лишь умение работать с готовым макетом PSD и сверстать страницу по предоставленному макету. А были даже времена, когда достаточно было лишь знаний HTML… но это, конечно, было уже очень давно, в те времена, когда все верстали таблицами

Сейчас же, если вы откроете сайты вакансий и наберете соответствующий поисковый запрос, то увидите, что зачастую современная должность верстальщика предполагает наличие дополнительных знаний и обязанностей, которые ранее целиком и полностью возлагались на программиста. Например, это знание JavaScript и jQuery, знание основ PHP или даже MySQL, умение сделать верстку под популярные CMS. Просто знания HTML и CSS сегодня уже мало кому интересны.

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

Верстка WordPress

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

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

Например, перед нами стоит банальная задача — вывести на страницу записи. Согласитесь, совсем несложно загуглить простейший запрос wordpress вывод постов и прочесть в документации о цикле WordPress и использовать пример цикла из той же документации в своей верстке сайта.

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

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

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

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

Прежде, чем вы начнете изучать этот урок, хочу вас предупредить об одной… хм… хитрости автора урока. Когда я начала переводить этот цикл уроков, то была уверена, что на выходе мы будем иметь готовый собственноручно сделанный шаблон. Но все немного сложнее. В последнем уроке автор дал вордпресс коды не в виде текста, как в предыдущих уроках, а в виде картинок с пояснениями. А весь готовый шаблон предлагается скачать в виде готового архива за символическую плату. Я бы могла купить этот архив и выложить здесь, но я не уверена, что это легально. В общем такая ситуация. Так что c этим уроком скорее придется познакомиться исключительно в ознакомительно-обучающих целях.

Сверстанный макет сайта
Итак, в первых двух уроках мы сначала , а потом с помощью инструментов HTML и CSS . Щелкните по картинке ниже, чтобы посмотреть как выглядит сверстанный макет сайта.

Все файлы вордпресс шаблона
Теперь осталось создать вордпресс шаблон на основании сверстанного макета сайта. На картинке ниже представлен стандартный набор файлов вордпресс шаблона. В предыдущем уроке мы создали папку images и файл style.css . Также у нас есть файл index.htm , из которого будут браться фрагменты кода и копироваться в соответствующие файлы php . И уже потом в php файлы вставляются команды вордпресса и тем самым формируются php файлы вордпресс шаблона.

Редактируем файл style.css
Сначала следует вставить в начало файла style.css информацию о шаблоне. Это стандартный код, который редактируется под свои данные (название шаблона, урл, описание, информация об авторе).

Header.php
Этот файл отвечает за вывод шапки сайта. Суть такая, берется кусок кода из файла index.htm (сверху и включая

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

Index.php
Этот файл отвечает за вывод того, что пользователь видит на главной странице сайта. Аналогичным образом формируется файл index.php . Копируется кусок кода из index.htm и наполняется командами вордпресса. Щелкаем по картинке, чтобы посмотреть в большом размере.

Sidebar.php
Этот файл отвечает за вывод элементов в сайдбаре. Также вырезаем код из index.htm (весь div id=»side» ) и вставляем в файл sidebar.php . Далее, как и раньше, вставляем команды вордпресса. Щелкаем по картинке, чтобы посмотреть в большом размере.

Archive.php
Отвечает за выдачу архивных записей сайта. Чтобы создать этот файл, полностью копируем содержимое файла index.php и вставляем в archive.php , а потом вставляем кусок кода (7 строк) между строками и

Search.php
Этот файл отвечает за результаты поиска. Чтобы создать этот файл, полностью копируем содержимое файла index.php и вставляем в search.php , а потом вставляем кусок кода (1 строка) между строками и . Смотрим как это сделано на картинке ниже. Щелкаем по картинке, чтобы посмотреть в большом размере.

Single.php
Этот файл выводит одиночный пост. Щелкаем по картинке, чтобы посмотреть в большом размере.

На этой стадии тема может быть установлена и протестирована. Можно создать несколько постов, чтобы проверить работу навигации, кнопок и ссылок.

Live Demo шаблона
Если нажать на картинку, то можно посмотреть готовый вордпресс шаблон онлайн.

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

Интернет всё больше становиться мобильным. Уже сейчас на некоторых моих сайтах доля мобильного трафика превышает 40%. К тому же Гугл и даже Яндекс заявляли, что в мобильной выдаче предпочтение отдают тем сайтам, которые правильно отображаются на мобильных устройствах. Так что если кто этого ещё не сделал самое время задуматься над удобством пользования вашим сайтом для данной аудитории. Именно поэтому я решил сделать адаптивный шаблон для данного блога — сайт, но при этом не менять его совсем, а просто максимально быстро и просто переделать уже существующий. Заодно и проверим даст ли это рост трафика. Как оказалось это сделать совсем не сложно, достаточно внести мелкие изменения в код и всё доступно прямо из админки WordPress.

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

Приступим…

Секреты адаптивной вёрстки

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

1

Это прописываем в шапке сайта, в нашем случае это файл header.php, найти который мы можем в админке, пункты меню Внешний вид => Редактор.


Дальше практически все основные элементы сайта с конкретно заданной шириной делаем резиновыми, то есть ширину лучше задавать процентах. Хотя, конечно, можно прописывать конкретную ширину блока для конкретной ширины экрана. В этом нам поможет правило @media . Оно позволяет прописывать в css-файле отдельные стили одному и тому же элементу при разной ширине экрана. Я решил совместить: полностью десктопную версию не менять, а для конкретных экранов задать ширину блоков в процентах.
Например, ширина сайта у меня по умолчанию 1180 пикселей. И я в конце css-файла стилей (редактировать который можно также через админку, как и предыдущий) я дописал правило:

1 2 3 4 5 6

@media only screen and (max-width : 1200px ) { #page { margin : 10px auto ; width : 98% ; } }

@media only screen and (max-width: 1200px){ #page { margin: 10px auto; width: 98%; } }

Которое делает, при ширине экрана меньше 1200 пикселей, ширину блога 98%.

Дальше у меня есть две колонки: слева с основным текстом ширина которой 660 пикселей и правая – сайтбар, ширина которого 300 пикселей. Поэтому я тоже добавил правило, которое также делает их резиновыми, но только при ширине монитора меньше 1030 пикселей.

1 2 3 4 5 6 7 8 9

@media only screen and (max-width : 1030px ) { #primary { width : 65% ; } #secondary { width : 32% ; } }

@media only screen and (max-width: 1030px){ #primary { width: 65%; }#secondary { width: 32%; } }

1 2 3 4 5 6 7

@media only screen and (max-width : 760px ) { #primary , #secondary { width : 95% ; float : none ; margin : 10px auto ; } }

@media only screen and (max-width: 760px){ #primary, #secondary { width: 95%; float: none; margin: 10px auto; } }

А для ширины 480 пикселей и меньше пришлось картинки в лентах новостей сместить в центр и также задать их ширину в процентах.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@media only screen and (max-width : 480px ) { .blog .entry-image , .search .entry-image , .archive .entry-image { float : none ; margin : 0px auto ; width : 90% ; } .entry-image img { height : auto ; width : 100% ; } }

@media only screen and (max-width: 480px){.blog .entry-image, .search .entry-image, .archive .entry-image { float: none; margin: 0px auto; width: 90%; }.entry-image img { height: auto; width: 100%; }}

Вот уже практически и всё – мы имеем адаптивный шаблон WordPress, который корректно отображается на всех устройствах, можно, конечно, ещё поиграться со шрифтами и отступами – где-то увеличить, где-то уменьшить. Также у вас могут быть и другие блоки сайта, ширину которых вам нужно изменить. Проверить всё можно просто сидя у себя за компьютером сделав меньше ширину вашего браузера. Также мне в подобной работе очень помогает дополнение к Firefox – Firebug , рекомендую обязательно его освоить, если планируете работать с кодом сайта.

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

Адаптивное меню сайта

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

• Часть скрывать, а часть показывать;
• Делать выпадающий список;
• Ничего не делать.

Скрыть – это не проблема, просто при данной ширине, для данного блока пишем display: none и всё, но вот чтобы потом показать придётся дописать небольшой скрипт. Таких скриптов в Интернете можно найти море и на javascript и на jquery, я покажу тот, который поставил себе. И вставил так же в header.php:

1 2 3 4 5 6 7 8

< script language= "JavaScript" type= "text/JavaScript" > function showmobmenu() { if (document.getElementById ("mobmenu2" ) .style .display == "block" ) { document.getElementById ("mobmenu2" ) .style .display = "none" } else { document.getElementById ("mobmenu2" ) .style .display = "block" } }

function showmobmenu() { if (document.getElementById("mobmenu2").style.display == "block") {document.getElementById("mobmenu2").style.display = "none"} else {document.getElementById("mobmenu2").style.display = "block"} }

То есть мне пришлось в код сайта, перед меню, ещё вставить ссылку с картинкой, которая по умолчанию скрыта, а при ширине 480 и меньше показывается, ну и при клике по ней раскрывается всё меню.

Png" alt="Мобильное меню">

А также изменить свойство float для пунктов меню:

1 2 3 4 5 6 7 8 9 10

@media only screen and (max-width : 480px ) { #mobmenu2 { display : none ; } #mobmenu { display : block ; } .main-navigation li { float : none ; } }

@media only screen and (max-width: 480px){ #mobmenu2{ display: none; } #mobmenu { display: block; } .main-navigation li { float: none; } }

Здесь есть ещё один нюанс, который я заметил уже в процессе: если меню скрывается скриптом, то есть с помощью кнопки в мобильной версии, то при увеличении ширины (например, если вы повернули смартфон с вертикального положения в горизонтальное) главное меню уже не отображается. Именно поэтому пришлось добавить ещё одно правило для мониторов 481 пиксель и больше.

1 2 3 4

@media only screen and (min-width : 481px ) { #mobmenu2 { display : block !important; } }

@media only screen and (min-width: 481px){ #mobmenu2{ display: block !important; } }

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

Ну, вот и всё, теперь уже точно имеем удобный адаптивный дизайн WordPress. Конечно же, эти же правила подойдут для адаптации практически любого сайта на любом движке. Гугл теперь говорит, что данный блог имеет 99 из 100 по удобству пользования для мобильных устройств.


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

Если у вас уже был подобный опыт, то делитесь им в комментариях. Ну, и все вопросы также можно задать там…

Эта статья поведает вам о том, как создать самую простую тему для 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 из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого: