Создание адаптивного шаблона для wordpress. Часть 2

Опубликовано: 01.09.2018

видео Создание адаптивного шаблона для wordpress. Часть 2

Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way)

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


Адаптивный дизайн сайта – как адаптировать шаблон WordPress

1. Основные файлы шаблона для WordPress (Структура шаблона)

Страница шаблона будет разбита на четыре файла:

header.php отвечает за шапку нашего сайта, включает в себя тег <hrad></head>


Натяжка шаблона на WordPress | #1

index.php выводит основной контент сайта

sidebar.php Тут все понятно, файл отвечает за сайдбар (боковая панель) сайта.

footer.php Ну и в заключение подвал сайта

В структура шаблона также используются обязательные файлы системные и стандартные

style.css Файл стилей, который в обязательном порядке находится в корне шаблона

functions.php Мозг вашего WordPress, системный файл настройки CMS

–  404.php  Файл шаблона который в будущем будет выводить  страницу ошибки 404 .

page.php файл который отвечает за вывод страниц, например “О сайте”

single.php Вывод полной новости

–  search.php  Вывод результатов поиска

–  searchform.php  Все манипуляции с формой поиска проделываются в этом файле

archive.php Выводи архив блога

comments.php Данный файл отвечает за вид комментариев

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

2. Переносим наш шаблон в папку шаблонов WordPress

Переходим в wp-contentthemes Копируем туда наш шаблон, у себя я его назвал web

Советую для тех кто не знает как установить wordpress прочитать стать. как установить wordpress на хостинг, или посмотреть видео в конце статьи.

3. Идентифицируем шаблон

Откроем файл style.css и в самом начале вставит код

/* Theme Name: Rose Theme URI: домашняя-страница-темы Description: краткое-описание-темы Author: ваше-имя Author URI: ваш-URI Version: номер-версии--необязательное-поле */

Заполним все поля

Theme Name имя вашего шаблона Theme URI ссылка на шаблон где вы его продаете или распространяете, если вы делаете шаблон для себя, укажите домен вашего сайта Description краткое описание шаблона Author ваше имя или никнейм Author URI ссылка на страницу где с вами можно связаться Version версия вашего шаблона

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

4. Активация шаблона

Откроем админ панель нашего wordpress для этого перейдем по адресу http://ваш-адрес/wp-admin Переходим в Внешний видТемы Находим наш шаблон и активируем (на данный момент он пока без миниатюры)

5. Прописываем путь к папке с шаблоном

Как вы заметили после активации шаблона, наш набросок перестал корректно отображаться. Это все потому что в строках где подключаются css и js файлы нужно прописать корректный путь к шаблону. Разработчики WordPress для этого предлагают нам использовать функцию <?php echo get_template_directory_uri(); ?>, но я вам советую прописывать полный путь так как каждый раз когда вы используете функцию определения пути к шаблону, отправляется лишний запрос, от чего производительность сайта ухудшается. Напомню что поисковики плохо относятся к сайтам которые медленно загружаются. Поэтому оптимизируйте ваш шаблон на ранних этапах.

Вот как должна выглядеть строчка подключения с использованием функции от wordpress

<link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">

Вот как я рекомендую , web заменяем названием папки вашего шаблона

<link href="http://ваш-сайт/wp-content/themes/web/style.css" rel="stylesheet">

И так заменяем 5 строчек , 3 строчки подключения стилей в начале шаблона, одна  html5shiv подключение скрипта для IE и одна строчка подключения скрипта в конце.

6. Разделяем index.php на файлы header, sidebar, footer

Работа с файлом header.php

Открываем наш index.php файл Выделяем кусок кода от начала файла до закрывающего html5 тега </header> Вырезаем выделенный фрагмент кода, и копируем в файл header.php На место вырезанного фрагмента из файла index.php ставим код вызова файла header.php  <?php get_header(); ?> В файле header.php перед закрывающим тегом </head> вставьте код  <?php wp_head(); ?>  он отвечает за вызов стилей и скриптов плагинов.

Работа с файлом sidebar.php

В файла index.php вырезаем все тег <aside> и все что внутри Вставляем вырезанный фрагмент в файл sidebar.php На место вырезанного кода прописываем <?php get_sidebar(); ?>

Работа с файлом footer.php

В файле index.php вырезаем кусок кода от начал тега <footer> до конца файла Вставляем вырезанный фрагмент в файл footer.php Вместо вырезанного кода из первого пункта ставим код вызова <?php get_footer(); ?> Перед закрытием тега </body> вставляем  <?php wp_footer(); ?>

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

Похожие записи

Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?

Свяжитесь со мной
rss