Создание адаптивного шаблона для wordpress. Часть 2
Всем привет, сегодня мы продолжим создавать wordpress адаптивный шаблон на bootstrap. В прошлой статье мы начали верстать wordpress шаблон с нуля и создали основной каркас шаблона, в этой мы создадим основные файлы шаблона, разделим index.php на файлы куски, установим и активируем начальный каркас шаблона. Я помню обещал что мы займемся немного другим, но я посчитал что будет корректнее начать именно из этих шагов. Приступим.
1. Основные файлы шаблона для WordPress (Структура шаблона)
Страница шаблона будет разбита на четыре файла:
– header.php отвечает за шапку нашего сайта, включает в себя тег <hrad></head>
– 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-content – themes
- Копируем туда наш шаблон, у себя я его назвал 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(); ?>
Ну вот сейчас каркас нашего будущего шаблона полностью готов к работе с ним. В следующем уроке мы займемся созданием меню, выводом контента, оформлением сайдбара и футера.
[…] привет, в прошлом уроке по созданию шаблона для wordpress мы закончили формировать наш каркас для будущего […]
После переноса шаблона в папку шаблонов WordPress в админ панели возле шаблона пишет, The following themes are installed but incomplete. Themes must have a stylesheet and a template. Что делать, подскажите пожайлуста?
Скажите пожалуйста вы создали в корне шаблона файл style.css ?
здравствуйте! Спасибо за Ваш труд, но у меня возникла сложность при создании шаблона. Вы пишите “Это все потому что в строках где подключаются css и js файлы нужно прописать корректный путь к шаблону. “. Куда нужно вставлять эти строки, в какой файл? И последний момент – может быть у Вас готовый архив с данным шаблоном и вы можете им поделиться?
Спасибо.
Скажите пожалуйста что именно у вас не получается? Какую ошибку выдает? Вы застряли на пункте подключения css файлов?
Архив не могу выложить так как нету готового шаблона, я его делаю постепенно с уроками. Сейчас немного приостановил деятельность, в ближайшие дни продолжу писать.
Здравствуйте 1) После активации вашего шаблона вместо сайта отображается белый экран. Сделал всё, как вы говорили.
2) Уточните пожалуйста в каком файле нужно прописывать строчку подключения ccs файлов (Прописываем путь к папке с шаблоном)
Добрый день, до этого урока, вы выполнили первый урок и у вас отобразилось то что у меня в конце?
Прописывать нужно в index.php, а если вы уже разделили файл на куски то в header.php
Если белый экран, то тоже проблема с кодировкой, установите везде кодировку без UTF-8 без DOM чз Notepad++
На счет функции “echo” – на ее выполнение требуется ничтожное время. Так что ее употреблять не так уж и страшно.
Но помимо функции echo, еще вызывается функция get_template_directory_uri();
Разве через link href можно подключать js скрипты?
Скажите пожалуйста, а где я через link href подключал js?
” sidebar.php -Выводит сайдбар нашего сайта ”
этот файл sidebar.php мы уже создали. он есть вначале и выделен синим цветом. последний который зеленым не нужен я думаю
Спасибо, не заметил 🙂
При подключении header и footer, в них сбивается кодировка ������. до создания этих элементов и загрузки из неизмененного index.php все отображалось корректно. подскажите пожалуйста, что не так настроено может быть и как исправить
Вам нужно поменять кодировку файла на utf без bom. Для этого например в редакторе notepad++, откройте файл, нажмите кодировка, выберите нужную кодировку, и сохраните.
http://prntscr.com/b9tlb7 вот эта часть вообще не понятная куда вставлять в каком файле менять
В файл header.php