В случае переноса статичного сайта на ВордПресс с другого «движка» может понадобиться адаптация его дизайна. Для выполнения этой задачи вебмастер должен хорошо разбираться в тонкостях верстки темы под данную CMS.
Распределение кода
Адаптация дизайна всегда начинается с распределения кода по файлам. Сначала необходимо скачать интересующий шаблон. Далее выполняется его распаковка в папке с темами ВордПресс. Она обычно называется «Themes». Но при желании вебмастер может назвать ее как угодно (например, MyTheme).
Следующее действие – переименование CSS-файла styles в style.
После этого необходимо открыть переименованный файл в любом текстовом редакторе. Это может быть даже банальный «Блокнот». В начало этого файла необходимо вставить такой фрагмент:
Данный фрагмент содержит исключительно служебные сведения о конкретной теме. Вебмастер может указать любое название темы, URL-адрес, имя автора, дескрипшен, версию и тип лицензии.
На следующем этапе необходимо создать 4 PHP-файла:
- header;
- index;
- sidebar;
- footer.
Код из index.html должен быть распределен по перечисленным файлам:
- В «хедер» необходимо вставить первончальный код до строки .
- В «индекс» следует добавить код основного блока.
- В «сайдбар» нужно добавить фрагмент с кодом бокового меню.
- В «футер» копируются все оставшиеся строки.
Затем выполняется удаление HTML-файла index. Теперь остается только лишь проверить появление созданного шаблона в разделе «Темы».
Адаптация «хедера»
На следующем этапе адаптации дизайна необходимо сделать имеющийся шаблон динамичным. Стоит заметить, что преобразованный шаблон будет содержать PHP-вставки, вызывающие различные функции «движка».
На первом этапе адаптации «хедера» необходимо открыть соответствующий файл и вставить следующий код:
Этот код позволяет сделать блок динамическим. Некоторые фрагменты данного кода следует разобрать отдельно.
Этот код отвечает за вызов функции, которая будет возвращать языковые атрибуты в контейнер.
Эта функция берет значение из настроек «движка» и автоматически подставляет его в код. Таким образом, вебмастер сможет изменить кодировку не прибегая к правке файла темы.
Данная функция предназначена для обеспечения работы скриптов, плагинов и стилей.
На следующем этапе вебмастеру необходимо отредактировать PHP-файл index. В первой строчке нужно указать следующий текст:
В концовке файла следует прописать такие строки:
Они необходимы для вызова шапки, боковой панели и нижней части сайта.
После завершения редактирования index.php вебмастер может активировать свой шаблон. Но в браузере по-прежнему будет отображаться старая статичная тема. Для того чтобы она все-таки стала динамичной, необходимо выполнить еще ряд обязательных действий.
Динамическое верхнее меню
Чтобы сделать верхнее меню динамическим, не нужно мудрствовать лукаво. Достаточно вставить следующий код вместо таблицы горизонтального меню:
В итоге код этого меню будет выглядеть следующим образом:
Для отображения меню следует перейти в панель управления сайтом и открыть раздел «Внешний вид». Оттуда нужно перейти по маршруту «Настроить» — «Меню». Альтернативный вариант – переименование созданного меню в menu или создание и настройка собственного меню с присвоением ему имени menu.
Смысл этих действий заключается в том, что в «хедере» есть функция wp_nav_menu(‘menu=menu’). Она выполняет открытие меню, которое называется menu. Название этого меню можно поменять на любое другое слово. Главное требование – оно должно быть одинаковым и в коде, и в настройках интернет-ресурса.
Теперь остается только лишь выполнить обновление страницы и посмотреть, что в итоге получилось.
В этом примере заметно, что навигация куда-то уехала. Это привело к возникновению своеобразной лесенки. Такие изменения обусловлены тем, что меню темы реализовано внутри таблицы. Это неправильно. Его желательно оформлять списком. Для частичного исправления ситуации в CSS-файле style необходимо вставить следующий фрагмент:
Учитывая наличие комментариев, какие-либо объяснения к этому фрагменту не нужны. Поэтому далее выполняется обновление страницы. После этого можно будет убедиться в том, что список все-таки стал горизонтальным.
Адаптация «шапки»
В «хедере» статическими остаются только лишь имя и описание сайта. Для того чтобы не брать их из настроек в панели администратора, следует заметить код, отвечающий за вывод текста в «шапке,» на следующий фрагмент:
После обновления страницы можно будет увидеть такой результат:
Резюмируя, стоит отметить, что в окончательном варианте header.php будет выглядеть таким образом:
Вывод постов
Следующий этап адаптации касается основного контента страницы. Он содержится в index.php.
Из этого файла нужно удалить весь код и вставить следующий фрагмент:
Данный код позволяет выводить посты до тех пор, пока они не закончатся.
Этот фрагмент отвечает за отображение заголовка поста.
Данный фрагмент кода указывает дату в формате день, месяц, год.
Этот участок кода отвечает за вывод поста.
А этот код сообщает о конце цикла в том случае, если была хотя бы одна запись.
Если же записей не было, выводится соответствующая надпись и закрывается цикл.
Этот код отвечает за вывод постраничной навигации в том случае, если они не помещаются на одной странице.
Указанный выше довольно-таки простой код полностью изменил внешний вид страницы. Сайт, наконец-то, стал динамическим.
Последующее оформление зависит исключительно от фантазии вебмастера и его навыков верстки. Однако работа с шаблоном пока еще не закончена.