Посадка сайта на wordpress

Посадка сайта на wordpress

Всем привет! Сегодня рассмотрим такую сложную и интересную тему, как создание WordPress шаблонов (тем) и грамотную посадку готовой HTML Bootstrap-совместимой верстки на WordPress. В качестве Theming фреймворка будем использоваьть Unyson Framework. Особое внимание в уроке уделяется правильной работе с WordPress при посадке верстки шаблона на эту CMS. Ключевые моменты — генерация стартовой Underscores темы, создание кастомных шорткодов для билдера Unyson, работа с адаптивной сеткой, создание Theme Options (опции шаблона) различных типов, создание метабоксов в статьях, на страницах и в категориях, раширение функционала фреймворка, автоматическое подключение используемых плагинов в WordPress клиента посредством TGM.

Генератор Стартового WordPress шаблона: http://underscores.me

WordPress фреймворк для создания тем: http://unyson.io

Премиум уроки от WebDesign Master

Создание современного интернет-магазина от А до Я

Создание контентного сайта на Jekyll от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Имеются сверстанные 8 страниц с Bootstrap, версталось изначально не под WP , то есть просто CSS , JPG , JS и HTML файлики для каждой страницы. Мне нужно интегрировать все это на вордпресс с возможностью редактирования хотя бы текстового контента из админки.

Я посмотрел несколько статей и видеотуториалов, везде из готовой верстки делается новый шаблон для WP , вопрос чисто для понимания происходящего, можно ли взять тему-пустышку из underscore и грубо говоря распихать код из имеющихся HTML файлов по PHP файлам пустого шаблона ( header.php , footer.php , index.php , functions.php ), и если да, то нужно ли для каждой страницы создавать новый page.php ?

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

2 ответа 2

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

Читайте также:  Светлые волосы черная борода

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

В самом общем случае, если код шапки вы разместите в файле header.php , код подвала — в файле footer.php , код page.php будет выглядеть примерно следующим образом:

Страницы, созданные в админке WP на вкладке "Страницы" (не "Записи"), будут выводиться с использованием этого шаблона.

Цель эксперимента — конвертировать HTML шаблон в шаблон WordPress

Для этого, мы возьмем простой шаблон HTML и постараемся перенести его на WordPress.

Зачем это делать? Есть несколько причин.

  1. понять, как работает механизм тем в WordPress
  2. научиться создавать собственные темы с нуля
  3. научиться конвертировать HTML шаблоны, и даже переносить целый HTML сайт на WordPress

Подготовительная стадия

До того как начнем натягивать HTML шаблон на WordPress, нужно подготовить рабочую среду.

Я буду использовать свой любимый и незаменимый Bitnami stack в качестве локального сервера.

Шаблон HTML после быстрого поиска я выбрал вот этот — Simple Factorial. Дизайн конечно простоват, но в целях эксперимента подойдет. Есть заголовок, меню, футер, сайдбар.

Подготавливаем файлы исходного шаблона для переноса на WordPress

Создаем новую папку в каталоге с темами WordPress. Распаковываем и копируем туда шаблон Simple Factorial.

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

Подключаем тему в админку

Чтобы тема заработала и появилась в админке WordPress, надо в самом верху файла Style.css записать следующие строки:

Создаем файл header.php

Копируем в него из index.html следующий код:

Читайте также:  Экранная мышь для компьютера

Обратите внимание, я не скопировал меню, идущее за тегом head, хотя оно будет также находиться в заголовке, и мы туда добавим полноценное динамическое меню WordPress.

Теперь будем адаптировать файл header.php. Вот готовый код, и я объясню как он работает.

В нем я вывел динамически тег title, и ссылку на файл стилей.

  • выводит ссылку файла стилей
  • динамически формирует title из названия сайта
  • возвращает URL файла xmlrpc.php
  • очень важная функция wp_head(), которая обеспечивает работу плагинов, подключает стили и скрипты на страницы сайта.

Создаем файл footer.php

Копируем в него следующий участок кода:

  • вывожу название сайта с ссылкой на него
  • хук wordpess, аналогичный wp_head(), только для подвала.

Создаем файл index.php , основной шаблон для страниц сайта

Подключаем в него заголовок и подвал

Копируем оставшееся содержание из файла index.html и вставляем в index.php между хэдером и футером.

Теперь сделаем еще один шаг, перенесем код меню в header.php . Файл с изменениями выглядит вот так.

В принципе, можно активировать тему, и смотреть что получилось.

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

Выводим записи в содержании динамически

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

  • если записи найдены, и пока они есть, извлечь их из базы данных
  • Вывести название записи с ссылкой ЧПУ в теге h2
  • вывести саму запись
  • завершение цикла, иначе
  • если записи не найдены, вывести информативное сообщение

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

Добавим sidebar/боковую колонку с виджетами

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

Читайте также:  Сканировать текст с фотографии в ворд

Вместо него вставляем php функцию:

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

Зарегистрируем sidebar в functions.php

Файл functions.php позволяет дополнять WordPress новой функциональностью и возможностями, так же как и плагины. Он лежит в корне темы.

Создаем functions.php , и вписываем в него следующий код.

Если функция существует, зарегистрировать sidebar, мы передаем ей название сайдбара, его ID, описание, html теги, которыми окружены его элементы. Обратите внимание на класс оборачивающего блока subHeader, он взят из шаблона Simple Factorial, чтобы стили наложились правильно.

Смотрим, что получилось, предварительно добавив несколько виджетов в появившейся области Primary Sidebar.

Отлично. Теперь давайте разберемся с меню.

Регистрируем динамическое меню в functions.php

В файл functions.php добавляем поддержку меню с помощью стандартных функций WordPress:

Открываем файл header.php , заменяем блок статического меню строкой:

В итоге должно получиться вот так:

Можно уже создавать страницы в WordPress, и через админку добавлять их в меню.

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

  • single.php — шаблон для вывода записи
  • page.php — шаблон для обычной страницы
  • 404.php — шаблон для страницы 404
  • searchform.php — шаблон для формы поиска

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

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

Ссылка на основную публикацию
Adblock detector