Подключаем стили, скрипты и картинки WordPress — урок 13

Если в прошлом уроке вы все сделали правильно, то у вас скорее всего на экране отобразились данные из файла index.php, но не небыли подгружены стили. У мня сейчас после активации шаблона получилась вот такая картинка:

wordpress themplfte create курс по разработке шаблонов wordpress

Проблема в том, что наш шаблон имеет не правильные адреса стилей и картинок, давайте это исправим и расставим соответствующие функции в нужные участки кода в файле index.php в корне нашей темы.

Работа с шаблоном после подключения и активации

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

Начинаем расставлять функции

Добавляем функцию указания языка страницы в тег <html>

<html <?php language_attributes(); ?>>

Между тегами <title></title> вставьте функцию как показано ниже.

Этот код стоит вставить, даже если вы в дальнейшем будете использовать плагины для заполнения title и description.

Далее чтобы сделать общую кодировку для блога лучше использовать вот такую запись:

<meta charset=»<?php bloginfo( ‘charset’ ); ?>»>

Заменяем нашу стандартную кодировку из шаблона:

<meta http-equiv=»content-type» content=»text/html; charset=utf-8″ />

Если вид кодировки вас не устроит ее можно немного расширить следующей записью. Я бы вот так и оставил, так как в нашем шаблоне был похожий вид.

<meta http-equiv=»Content-Type» content=»<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>» />

Строки с ключевыми словами и описанием можно смело удалять, так как на сайте мы будем использовать специальные плагины. Удаляем строки:

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

Изменяем часть кода шаблона:

На код следующего вида:

Точно также нужно подключить и стили:

После настройки стилей и скриптов ваш сайт должен начать приобретать человеческий вид.

wordpress themplate with include style - курс по wordpress, разработка шаблонов

Осталось правильно подключить картинки в шаблоне, чтобы они хорошо отображались и не портили нам внешний вид.

Для настройки картинок временно можно использовать ту же функцию, которую мы использовали для подключения стилей и скриптов.

Для быстрой замены я воспользовался программой notepad++, а также инструментом поиск/замена.

Искал:

img src=»images

Заменял на:

img src=»<?php echo bloginfo(‘template_url’); ?>/images

Если все сделали правильно, у вас после сохранения появятся картинки.

У меня после этих действий шаблон стал выглядеть вот так:

wordpress create themplate - практика создания шаблона

Добавим в код перед закрывающим тегом </head> функцию <?php wp_head(); ?>, эта функция служит как метка, она при необходимости добавляет в шаблон яваскрипты и стили, которые нужны для CMS WordPress и плагинов которые вы будите устанавливать.

Также движку WordPress нужно в код шаблона добавлять классы, которые в дальнейшем можно использовать для стилизации отдельных разделов. Для добавления этих  классов используйте следующий код в вашем шаблоне:

<body <?php body_class(  ); ?>>

Переменная $class может содержать дополнительные классы которые вы сами хотите добавить. Подробнее о функции можно почитать тут.

Пример использования функции с дополнительными классами.

<body <?php body_class( ‘class-name’ ); ?>>

Этот урок закончился, дальше будет еще интереснее.

Купить хостинг WordPress

Читайте также:

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

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

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal