Всем привет, сегодня мы продолжим создавать wordpress адаптивный шаблон на bootstrap. В прошлой статье мы начали верстать wordpress шаблон с нуля и создали основной каркас шаблона, в этой мы создадим основные файлы шаблона, разделим index.php на файлы куски, установим и активируем начальный каркас шаблона. Я помню обещал что мы займемся немного другим, но я посчитал что будет корректнее начать именно из этих шагов. Приступим.
Страница шаблона будет разбита на четыре файла:
— 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 Данный файл отвечает за вид комментариев
Создайте все вышеперечисленные пустые файлы. Вот как должна выглядеть структура вашего шаблона.
Советую для тех кто не знает как установить wordpress прочитать стать. как установить wordpress на хостинг, или посмотреть видео в конце статьи.
Откроем файл style.css и в самом начале вставит код
/* Theme Name: Rose Theme URI: домашняя-страница-темы Description: краткое-описание-темы Author: ваше-имя Author URI: ваш-URI Version: номер-версии--необязательное-поле */
Заполним все поля
Эти поля конечно же формальность, и не являются обязательными. Но если вы планируете заниматься созданием шаблонов для wordpress и продавать их, то советую заполнять эти поля. В будущем когда шаблон будет готов, мы добавим скриншот шаблона в описание.
Как вы заметили после активации шаблона, наш набросок перестал корректно отображаться. Это все потому что в строках где подключаются 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 и одна строчка подключения скрипта в конце.
Работа с файлом header.php
Работа с файлом sidebar.php
Работа с файлом footer.php
Ну вот сейчас каркас нашего будущего шаблона полностью готов к работе с ним. В следующем уроке мы займемся созданием меню, выводом контента, оформлением сайдбара и футера.
[…] привет, в прошлом уроке по созданию шаблона для 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