Телевизор 

Как создать тему для WordPress самому: уроки с видео. Верстка шаблона Wordpress из HTML макета

Допустим, мы открыли новую и пока пустую презентацию в Powerpoint. И что мы видим?

А у вас есть корпоративные цвета и шрифты, которые придется каждый раз настраивать заново. Шаблон позволит вам сделать это 1 раз и на всю жизнь.

И 1-й слайд в вашей презентации автоматически будет выглядеть, например, так ВСЕГДА без дальнейших усилий.


Шаблон включает в себя:

  • Цвета
  • Шрифты
  • Заполнители (разделы, где мы вставляем текст, изображение, диаграмму и т.п.)

Ниже вы найдете пошаговую инструкцию для создания собственного шаблона в Powerpoint.

1. Создайте новый файл в Powerpoint.

2. Выберите в верхнем меню во вкладке Вид «Образец слайдов».


Слева появится стандартный образец слайдов.

Вот с ним мы и будем работать. И сделаем из стандартного нестандартный.

3. Выбираем нужную шрифтовую тему или создаем новую.

Шрифтовая тема - это те шрифты, которые вы используете в презентации. Поверьте, помимо Calibri есть масса других хороших шрифтов. Укажите их всего 1 раз, и они автоматом заменятся во всей презентации или шаблоне.


4. Выберите нужный вам фон (цвет или рисунок). Вы можете выбрать фон сразу для всех слайдов одинаковый или для одного особенный.

5. Как мы видим, слева много вариантов расположения текста, заголовка и т.д. Но что делать, если нам нужен, такой, которого нет? Например, чтобы было 3 картинки с подписями.


Тогда нам поможет функция Вставить макет + Вставить заполнитель.

После того, как нажимаем «Вставить макет» создается пустой слайд. И его мы можем заполнить как хотим.


7. Теперь, если мы собираемся создать новый слайд, то мы видим варианты из нашего шаблона.

8. Создаете новую презентацию и «потеряли» ваш шаблон? Заходите во вкладку Дизайн и ищите его там.

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

Как сделать шаблон для WordPress самому

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

  • Site name. В этом разделе можно выбрать цвет заголовка сайта, задать сам заголовок, а также указать URL к логотипу. Логотип можно оставить пустым.
  • Body Size. Выбираем размер сайта в ширину. Для корректного отображения лучше оставить по умолчанию – 100%.
  • Sidebar Location. В этой опции можно выбрать размер и расположение боковой колонки. Есть три варианта размера для левого и правого сайдбара, а также возможность сделать тему без боковых колонок.
  • Third Column. Эта опция подключает третью колонку. Есть разные варианты.
  • Menu Layout. Здесь выбирается макет меню – есть 4 разных варианта.
  • Scheme Overall. Настраивается цветовая схема – фоны разных элементов, границы.
  • Text Scheme. Схема оформления текста: настраиваются цвета, начертания и шрифты всех частей сайта – заголовков, меню, основного текста и других.
  • Tag Cloud. Можно включить и выключить облако тегов в сайдбаре.
  • Archives & Search. Настраивается отображение архивов и поиска – показывать полные версии теста или только анонсы.
  • Выбираем копирайт.

Итак, теперь вы знаете, как сделать шаблон для WordPress. Осталось его получить. Для этого нажимаем внизу кнопку «Save», а затем там, где был предпросмотр, жмём на ссылку «Files packed: download theme ZIP file», чтобы скачать архив темы себе на компьютер. После этого можно установить её на свой сайт.

Здравствуйте, дорогие друзья и читатели – сайт!

Сегодня я покажу, как с ноля создать шаблон для WordPress.

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

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

Подготовка к созданию шаблона для WordPress.

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

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

С точки зрения редактирования и правки кода, настоятельно рекомендую использовать — Notepad++ . Благодаря подсветке кода и простому интерфейсу, этой программе отдаёт предпочтение наибольшее количество Веб-мастеров.

Зайдите в корневую директорию, содержащую установки WordPress, перейдите в wp-content => themes и создайте там папку с именем — «New Theme 3.0» . Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PN G):

Шаг-1 style.css

Файл , будет содержать в себе все элементы стиля шаблона для WordPress. Именно его мы будем использовать первым, чтобы объявить имя шаблона, имя автора, ссылку на сайт с описанием и номером версии:

Эта информация, может быть изменена в любое время. Главное, чтобы всё было закомментировано ().

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

В этом коде используется тег — body , только для спецификации (определения) шрифтов используемых на сайте и цвета фона (всё меняется на любой вкус). Затем, мы объявляем атрибуты стиля для связи, а также некоторые из заголовков, которые мы будем использовать на протяжении всей нашей темы.

#wrapper — будет отвечать за полный размер веб-страницы. С #header , всё очевидно, это заголовок, а #blog , это последние сообщения на главной странице.

Остальные стили колонтитулов # (заголовков) footer и sidebar , будут применяться к соответствующим их названию файлам, которые мы рассмотрим чуть позже.

Шаг-2 header.php.

Теперь, мы создадим файл — , который будет содержать логотип и обычную навигацию:

На самом деле, подробно этот код объяснять нет смысла. Просто нужно запомнить, что он должен присутствовать в , во всех темах WordPress. Но, если Вам интересно, то расскажу.

В самом начале, мы объявляем тип документа и стандартный код, который будет использоваться для отображения названия сайта, вводимое в настройках администратора WordPress. Далее, идёт и PHP код, позволяющий работать с древовидными комментариями.

Шаг-3 Добавление пользовательской навигации.

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

Как видите, я прокомментировал участки кода. Первая часть add_action , используется для добавления поддержки пользовательского меню, а вторая, регистрирует саму область первичного меню. Далее, переходим к самой реализации в шаблоне WordPress.

Чтобы создать меню, нужно, ниже ранее прописанного кода в файле добавить строчку:

Давайте, немного её разберём. Основной функцией, которая здесь используется, является wp_nav_menu . Переменные sort_column , container_class , и theme_location , применяются в качестве аргументов. Sort_column — гарантирует порядок отображения, который задаётся в админке. Container_class — позволяет выбрать Вашего меню. Ну, а theme_location , просто присваивает primary-menu те значения, которыми мы манипулируем в реальном времени.

Шаг-4 Стиль навигации шаблона для WordPress.

Благодаря произведённым ранее действиям, наша WordPress тема, обрела пользовательскую навигацию. Но, обычное меню выглядит просто и не привлекательно. Чтобы это исправить, мы создадим класс nav в файле .

Как видите в .nav , мы сделали основные заявления, такие, как цвет фона, ширина навигации, выравнивание и положение элемента на мониторе. Далее, мы задали порядок размещения основных элементов и всплывающих окон.

Завершающим действием, будет добавление стилей для ссылок из выпадающего меню:

В .nav ul ul , мы устанавливаем абсолютную позицию и первую выпадающую ссылку делаем 100% , чтобы она появлялась под основной. Так же, мы изменили фон выпадающего окна, чтобы он отличался от существующего. К общим значениям, был добавлен атрибут z-index:99999 , который заставляет раскрываться выпадающие ссылки, над другими объектами.

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

Шаг-5 index.php.

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

Следующие строки кода, используются для вывода всей информации в , sidebar.php и footer.php там, где Вы их разместите в WordPress шаблоне:

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

.

Здесь, присутствует кусок кода, который выводит миниатюры в постах на главной странице блога. Пока, он неактивен, но следующим шагом используя functions.php , мы заставим его заработать.

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

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

Шаг-7 sidebar.php.

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

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

С помощью div , мы вызываем стили из файла , а код ниже, даёт нам возможность размещать виджеты из админки WordPress, в желаемой последовательности.

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

Этот код, просто говорит WordPress, что нужно зарегистрировать боковую панель, о которой мы заявили в sidebar.php . Для общего ознакомления могу сказать, что WordPress может легко работать в одной теме с несколькими боковыми панелями.

single.php — это то, что будет использоваться для одной страницы поста. Представленный ниже код, будет очень похож на тот, который мы поместили в index.php . Отличие лишь в том, что мы добавили шаблон комментариев с div и код, который должен включить comments.php :

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

Код ниже, нужно положить в Ваш файл comments.php :

Это добавит вашим сообщениям стандартную форму комментариев.

В файл page.php , мы поместим код, который будет отвечать за статические страницы нашего сайта. Он будет практически идентичен тому, который был размещён в single.php . Единственное изменение, это отсутствие шаблона комментариев и добавление кода, который обрабатывает страницы, а не должности. Всё остальное будет одинаковым:

Файл category.php , служит для вывода сообщений из определённой рубрики или архива, к которым обращается читатель. Здесь, основная часть кода будет похожа на page.php и single.php , которые мы закодировали выше, за исключением куска в самом начале:

Фрагмент кода ниже, это единственное, что мы добавили после основного цикла:

Здесь мы используем кучу заявлений if/elseif в PHP , которые показывают то, что Вы просматриваете на блоге. К примеру, если мы смотрим категорию под названием — «», то она будет показана в h2 Архив из категории: «» перед всеми записями, разбивая их по датам или авторам.

Шаг-12 Настройка заднего фона сайта.

С появлением WordPress 3.0 была создана функция, которая даёт возможность изменять фон сайта из панели администратора, используя изображение или обычный цвет. Для этого, в файл functions.php , нужно вставить следующий код:

Итак, пользовательские фоны включены. Бонусом, мы добавим ниже код, который делает доступными ссылки архивов, комментариев и тегов из RSS ленты:

В завершении создания вордпресс шаблона, мы добавим кусок кода в footer.php , использующий #footer , который был объявлен в . Наш подвал будет содержать, только основную информацию об авторском праве, а так же RSS ленту новостей и комментариев:

На этом, создание самого простого шаблона (темы) для WordPress окончено.

Чтобы проверить его работоспособность, Вы можете скачать архив с созданной темой и активировать на своём ресурсе:

А у Вас, получилось создать свой первый шаблон для WordPress?

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

На сегодня это всё.

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

До новых статей…

С уважением, Денис Черников!

Интересное по теме:

Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:

96 комментариевА что думаете Вы?

    Спасибо огромное за статью! Очень полезная информация для юных верстальщиков! Читал статью по рэпчик... =)

    Денис Черников ответил:
    Ноябрь 3rd, 2012 at 14:38

    Пожалуйста, Александр! Трое суток над ней пыхтел, хотелось, чтобы все всё поняли! Надеюсь, что у меня получилось! Рэпчик рулит!

    Александр Красильный ответил:
    Ноябрь 3rd, 2012 at 15:13

    Да я заметил, что статья не маленькая и куча мелких нюансом. Если их не учесть, то все пойдет наперекосяк! У меня друг занимается чисто версткой, сидит в офисе и зарплата приличная, в районе 4000—5000 грн. При этом он самоучка! Вот и мну есть желание, но не хватает времени...=(

    Архив не удалось установить. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

    Вот что пишется, после того, как я хотел протестить эту тему. В чём тут дело?

    С уважением и благодарностью, Евгений!

    Спасибо за полезную статью. По мне, лучше переделать готовую тему под себя.

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

    Юлия ответил:
    Ноябрь 4th, 2012 at 6:47

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

    И ещё кое-что. На скринах виден не весь код.

    Но всё равно, спасибо за статью! Вы — молодец! Успехов в дальнейшем!

    С уважением, Евгений!

    Спасибо за информацию. Обязательно попробую.

    Денис, я убрал свою старую тему, а установил какую- то сложную и новую. Многих файлов,которые ты описываешь нет, например, single.php,page.php и category.php. Поэтому трудно сооринтироваться, как поступать в такой ситуации. Но вот картинки с миниатюрами меня заинтересовали. Когда нахожусь на главной странице, картинок не видно. Но стоит в поиске ввести пробел и запустить поиск, то все миниатюры сразу появляются. Как ты считаешь, в чем может быть причина?

    Привет, Денис! Ну это уже высший пилотаж! Верстать самому темы WordPress, а не тупо скачивать шаблон! Но самому пробовать такую тему, пока нет времени. Еще много надо реализовать то, что есть у тебя интересного в дизайне сайта (стрелочка"вверх",отгибающийся уголок и т.п.).

    Денис, и тема полезная, и глаза боятся...

    Пока забил в закладки...

    Попала к Вам случайно, но очень рада!!! Спасибо большое за информацию.

    Статья очень актуальна, ну по крайней мере для меня. Сам вот недавно задался вопросом, как создать свою собственную тему для ВордПресс (шаблон), и нашел вот такую программку — Artisteer. Правда эта прога платная, НО, не для русского человека если Вы понимаете о чем я.

    Денис а вы не пробовали менять цвет сайдбаров? или как это сделать по подробней,в css

    Большое спасибо за статью. Искал подходящую информацию для настройки шаблона WP. В большинстве случаев просто общие фразы и без конкретики, а у Вас — другое дело!

    Денис, у Вас в некоторых местах код обрывается из-за размеров картинки... А счастье было так близко!

    Отлично, спасибо большое! Я так и думала, что чего-то недопоняла.

    Денис, здравствуйте!

    Большое спасибо за урок. Удалось внедрить свой дизайн) Но вот почему-то возникла проблема со вставкой фото в посты — почему-то не функционирует обтекание текстом фотографий. Это прописывается где-то в шаблоне? Никак не пойму в чем дело... подобных проблем раньше не было.

    Заранее спасибо!

    Денис Черников ответил:
    Март 19th, 2013 at 15:45

    Здравствуйте, Людмила!

    Специально для этого я написал отличный пост. В нём показано, как сделать обтекание картинкам и видео в постах. Посмотрите через поиск или в списке статей поищите.

    Людмила ответил:
    Март 19th, 2013 at 15:57

    Ок, спасибо!

    С точки зрения редактирования и правки кода, настоятельно рекомендую использовать - Notepad++.

    Я пользуюсь Sublime Text 2 — что-то среднее между NotePad++ и небезызвестным TextMate (Mac OS). В окно перетаскиваю проект и он появляется в виде дерева. Очень удобно! Плюс еще куча фишек которые упрощают жизнь получше NotePad++! Очень рекомендую))

    Денис, я ничего не поняла уже на первом этапе. Где брать все эти коды? переписывать с Ваших принт-скринов? Может можно где-то взять шаблон и отредактировать?

    Большое спасибо! Попытаюсь всё сделать как написано! Индивидуальный вид намного лучше))

    Добрый вечер.Я новичек,и мне не совсем понятно как в ""Создание необходимых папок и файлов "" мне «„ Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG)“» я напечатала их через Notepad++ а как перенести???

    Еще раз здраствуйте...как мне зделать это????:

    Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG):

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

    я не могу понять как разместить Файлы В ПАПКЕ.При их копировании из блокнота полцчается ерунда.Поясните пож. ивенно как перенести с Notepade++ в папку фаилы.

    Почему у меня злобный аватар?Я вообще добрая .Как мне его сменить???

    Здравствуйте Денис! Я новичок, подскажите пожалуйста как мне запилить тему в ворд пресс, во Внешнем виде/Темы моя тема не отображается...((((

    Спасибо, статья очень помогла!

    только добавьте в footer.php , а то без этого админ панель не видна.

    Денис, доброго времени суток!

    Если честно, я ничего не поняла из написанного...Заслуга в этом не Ваша — у меня знаний ноль абсолютно в этой области и для меня Ваши записи оказались китайской грамотой...Напрашиваюсь либо на некоторые разъяснения (если позволите), либо просто на удаление своего коммента:)

    Как изменить название шаблона, которое для некоторых тем отображается в левом боковом меню админки?

    Попробовала скачать Ваш шаблон — там ни фон, ни шапка не меняется — данные вводятся, цвет выбирается — только на сайте никаких изменений не происходит:)))))

    Здравствуйте! А могли бы мне свертать тему за умеренную плату? Еть представление как хочу видеть вой сайт, есть фото для темы, но нет умений работать с фотошопом и HTML

    Сергей ответил:
    Март 23rd, 2014 at 1:50

    Денис, Я прошу прощения зря вы не промышляете версткой вам всего за 3 вечера получилось нарисовать такой шедевр, года 2 назад я такую информацию по крупинкам собирал а тут такой клад ссылку на вас в контакт и низкий поклон вам за проделанную работу, есть правда кое какие недочёты. Но все ровно даже при условии всех мелочей эту статейку мне бы года 2 ох как бы мне это помогло с моим первым проектом. А что нибудь по яваскрипту в вашем арсенале имеется, просто у людей вашего уровня образованности всегда интереснее инфу читать изучать.

    Денис Черников ответил:
    Март 23rd, 2014 at 12:12

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

    Сергей ответил:
    Март 23rd, 2014 at 23:59

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

    Помогите, у меня не редактируется styles.css из админки. захожу «внешний вид — редактор», выбираю стилевой файл, но он открывается пустым. по фтп все редактируется, но это не удобно для меня.

    помогите залить самописный сайт на WP (заплачу)

    Денис, спасибо огромное за статью! Очень ценная и полезная информация. Обязательно ей воспользуюсь, когда буду создавать свой шаблон с нуля.

    Но пока для сайта выбрана готовая тема, а я совсем «чайник»... Была бы Вам очень признательна за помощь!Итак, мне нужно было на страницу «А» вывести новости только из категории «А». Я скопировала страницу index.php, добавила на нее строку кода и выбрала в качестве шаблона для страницы «А». Теперь на ней отображаются только нужные записи, но все оформление слетело...) чтобы оформление этой страницы не отличалось от оформления сайта, нужно что-то добавить в таблицу стилей? или я изначально все сделала не так? Спасибо)

    Денис Черников ответил:
    Март 30th, 2014 at 21:35

    Елена, я такие консультации не даю! Я понятия не имею что Вы там делаете, а по описанию не всегда понятно!

    Елена ответил:
    Апрель 1st, 2014 at 16:51

    Денис, изменю вопрос: возможно ли выводить на страницу с названием «А» статьи только из рубрики «А», а на страницу с названием «В» статьи только из рубрики «В»? Спасибо.

    Сергей ответил:
    Март 30th, 2014 at 22:37

    Елена Я не уверен что вам это подойдёт но вашу задачу я бы решил при помощи 2х плагинов Display Widgets это плагин который определяет отображение виджетов на любой вам нужной странице а этот Recent Posts Widget Extended делает красивый вывод новостей, но Я повторюсь что так сделал бы Я

    Сергей ответил:
    Март 30th, 2014 at 22:41

    Все таки прочитав и переосмыслив ещё раз понял что этот вариант не очень для вашего Елена вопроса.

    Елена ответил:
    Апрель 1st, 2014 at 17:16

    Сергей, спасибо за Ваш ответ! Попробовала плагин Recent Posts Widget Extended. Полезная вещь) Мне бы вот точно такой же вывод статей, но не в виджетах, а на основной странице) Спасибо!!

    Денис, помогите разобраться с темой.

    За основу была взята Ваша тема из поста. Переделал все под себя, все устраивает, но не видно комментариев. Форма комментов есть, они проходят на модерацию, но после апрува показывает только количество комментов к посту и саму форму, а комменты не видно.

    Думал во время работы с файлами что то потер, но нет...

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

    ЗЫ. Думаю может дело в том что движок обновлен и после обновы что то не так стало. Есть еще вариант попробовать сменить версию php у хостера.

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

    Добрый день, Денис, прочитал статью сделал Всё как Вы написали, НО используя свои записи и цвета,ВСЁ ЗАРАБОТАЛО. Это хорошо))

    ВОпрос: Как перенести сайдбар так чтоб он стал слева, и второй вопрос: а нет у вас статьи как в свой шаблон сунуть свои же картинки (то есть есть дизайн в PSD уже нарезанный, хочу его слить с шаблоном).

    Заранее спасибо за ответ.

Приветствую вас, друзья.

Сегодня мы затронем очень интересную, для многих, тему. Возможно, вы заметили, что совсем недавно я обновил дизайн своего блога, не знаю как вам, а мне очень нравится. Этот шаблон я создал буквально за несколько десятков минут, причем мне не потребовалось ни знание HTML, CSS и PHP ни информации на тему создания шаблонов.

Итак, как сделать шаблон для wordpress самому, без каких либо знаний?

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

Способ №1 – вы изучаете HTML, изучаете структуру шаблонов. Конечно, при таком подходе есть свои плюсы, если у вас есть время и желание начните с него. Знание HTML еще ни кому не помешало.

Способ №2 – заказать шаблон у фрилансера. Если есть свободные деньги, то, обязательно, выбирайте именно этот способ. Стоимость создания качественного шаблона от 15 000 до 70 000 рублей.

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

Как вы, наверно, уже поняли речь, в этой статье, пойдет о способе №3.

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

Скачиваем программу, запускаем ее.

1. В заглавном окне программы выбираем “WordPress”.


2. В окне предпросмотра появляется заготовка шаблона, конечно, вся кривая, но в процессе работы от нее и следа не останется.

3. Переходим на вкладку “Цвета и шрифты”, выбираем цветовую схему (в последующем мы ее немного подкорректируем), я люблю светло серую гамму цветов. Жмем на кнопку “Наборы шрифтов”, выбираем шрифты (я использую везде вердану).



4. Переходим на вкладку “Макет”, здесь нам предлагается выбрать количество и расположение колонок, а также расположение верхнего колонтитула (по простому хедера). Я всегда выбираю “Две колонки->Правая средняя сторона”.


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


6. Следующая вкладка предлагает нам настроить лист шаблона.



Задайте ширину листа (желательно не меньше 1000 px), его тень и границу.

7. На следующей вкладке нам предлагается настроить верхний колонтитул (хедер или шапка). Настройте колонтитул с помощью настроек.


1. Настройка ширины и высоты шапки.

2. С помощью этого меню вы можете загрузить в программу ранее заготовленный хедер, а также добавить к нему эффекты.

3. С помощью этого меню вы можете добавить на хедер стороннюю картинку.

4. Название вашего сайта и его слоган.

5. Расположение названия и слогана.

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

9. На следующей вкладке — “Статьи”, нам предлагается настроить внешний вид области расположения контента (текста, видео, картинок, таблиц). Настройте его с помощью приведенных настроек.





1. Изображение статьи (этот параметр ни на что не влияет, может оставить как есть).

2.С помощью этого меню вы сможете задать стиль области контента (с обводкой или без).

3. Настройка отображение текста внутри статьи.

4. Редактирование различных параметров области контента.

5. Настройка верхнего колонтитула.

6. Настройка нижнего колонтитула.

10. С помощью следующей вкладки — “Блоки”, вы можете настроить внешний вид боковых блоков (сайдбара).

НАСТРОЙКИ И ЭКСПОРТ ШАБЛОНА

1. Нажмите на кнопку “Файл” (находится в левом верхнем углу окна программы).


2. Выберите пункт “Экспорт->Настройки экспорта”. Перейдите на вкладку “Свойства” и укажите необходимые данные. Перейдите на вкладку “Footnote” и снимите все галочки.

3. Повторите шаг номер один. Выберите пункт “Экспорт->Тема WordPress”.

4. Экспортируйте шаблон как ZIP папку.



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

Не забываем комментировать статью. Автор лучшего, по моему мнению, комментария (по итогам недели), получит мою платную книгу «Как продавать партнерские товары в интернете и получать 200% прибыли» совершенно бесплатно.

ВИДЕО-УРОК “Как сделать шаблон для WordPress без знаний HTML?

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

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как "Обо мне", "Контакты", "Карта сайта"; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как "запись" в рубрике "Кодекс", а ссылки в меню шапки ведут на страницы: Функции .

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

Создание страниц в WordPress

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

Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)

Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать.php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать пометку, что созданный файл является шаблоном для страниц:

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон":

С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон.

/* Template Name: Мой шаблон страницы Template Post Type: post, page, product */

Преимущества:

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

  • Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).

Недостатки:

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

Как это работает:

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

Template Name: ***

Строка может располагаться где угодно и как угодно в файле.

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы".

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:

Wp_page_template = default
_wp_page_template = tpl_my-page.php

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

Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:


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

Достоинства:

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Недостатки:

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.

Как это работает:

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

  • {любое_название}.php (когда используется шаблон страницы)
  • page-{ярлык_записи}.php
  • page-{ID_записи}.php
  • page.php
  • singular.php
  • index.php

Способ 3: шаблон страницы через фильтр "template_include" (коддинг)

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

// фильтр передает переменную $template - путь до файла шаблона. // Изменяя этот путь мы изменяем файл шаблона. add_filter("template_include", "my_template"); function my_template($template) { # аналог второго способа // если это страница со слагом portfolio, используем файл шаблона page-portfolio.php // используем условный тег is_page() if(is_page("portfolio")){ if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; } # шаблон для группы рубрик // этот пример будет использовать файл из папки темы tpl_special-cats.php, // как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php" if(is_category(array(9, "Без рубрики", "php"))){ return get_stylesheet_directory() . "/tpl_special-cats.php"; } # шаблон для записи по ID // файл шаблона расположен в папке плагина /my-plugin/site-template.php global $post; if($post->ID == 12){ return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php"; } # шаблон для страниц произвольного типа "book" // предполагается, что файл шаблона book-tpl.php лежит в папке темы global $post; if($post->post_type == "book"){ return get_stylesheet_directory() . "/book-tpl.php"; } return $template; }

Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д.

Достоинства:

    Можно установить шаблон для любой страницы или группы страниц. Практически полный карт-бланш в действиях.

  • Можно создать шаблон при написании плагина.

Недостатки:

Необходимость писать код и отдельно его подключать (например, в functions.php темы).