Как сверстать тему под ВордПресс (WordPress)

В случае переноса статичного сайта на ВордПресс с другого «движка» может понадобиться адаптация его дизайна. Для выполнения этой задачи вебмастер должен хорошо разбираться в тонкостях верстки темы под данную 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.

Из этого файла нужно удалить весь код и вставить следующий фрагмент:

Данный код позволяет выводить посты до тех пор, пока они не закончатся.

Этот фрагмент отвечает за отображение заголовка поста.

Данный фрагмент кода указывает дату в формате день, месяц, год.

Этот участок кода отвечает за вывод поста.

А этот код сообщает о конце цикла в том случае, если была хотя бы одна запись.

Если же записей не было, выводится соответствующая надпись и закрывается цикл.

Этот код отвечает за вывод постраничной навигации в том случае, если они не помещаются на одной странице.

Указанный выше довольно-таки простой код полностью изменил внешний вид страницы. Сайт, наконец-то, стал динамическим.

Последующее оформление зависит исключительно от фантазии вебмастера и его навыков верстки. Однако работа с шаблоном пока еще не закончена.



Теги:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *