Подключаем стили, скрипты и картинки WordPress — урок 13
Если в прошлом уроке вы все сделали правильно, то у вас скорее всего на экране отобразились данные из файла index.php, но не небыли подгружены стили. У мня сейчас после активации шаблона получилась вот такая картинка:
Проблема в том, что наш шаблон имеет не правильные адреса стилей и картинок, давайте это исправим и расставим соответствующие функции в нужные участки кода в файле index.php в корне нашей темы.
Работа с шаблоном после подключения и активации
Не знаю как у вас, но у меня был лишний участок кода и я его удалил, вам тоже это правильно будет сделать, чтобы этот участок не мешал нам.
|
1 2 3 4 5 |
<!-- Halcyonic by HTML5 UP html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> |
Начинаем расставлять функции
Добавляем функцию указания языка страницы в тег <html>
<html <?php language_attributes(); ?>>
Между тегами <title></title> вставьте функцию как показано ниже.
|
1 |
<title><?php bloginfo('name'); ?><?php wp_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’); ?>» />
Строки с ключевыми словами и описанием можно смело удалять, так как на сайте мы будем использовать специальные плагины. Удаляем строки:
|
1 2 |
<meta name="description" content="" /> <meta name="keywords" content="" /> |
Далее нам нужно указать правильный путь к файлам скриптов, добавляем в адрес каждого скрипта специальную функцию, которая возвращает адрес папки шаблона. Это нужно если вы вдруг будете изменять название папки шаблона, а нам это будет необходимо в дальнейшем.
Изменяем часть кода шаблона:
|
1 2 3 4 |
<script src="js/jquery.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-layers.min.js"></script> <script src="js/init.js"></script> |
На код следующего вида:
|
1 2 3 4 |
<script src="<?php echo bloginfo('template_url'); ?>/js/jquery.min.js"></script> <script src="<?php echo bloginfo('template_url'); ?>/js/skel.min.js"></script> <script src="<?php echo bloginfo('template_url'); ?>/js/skel-layers.min.js"></script> <script src="<?php echo bloginfo('template_url'); ?>/js/init.js"></script> |
Точно также нужно подключить и стили:
|
1 2 3 4 5 |
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/skel.css" /> <link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/style.css" /> <link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/style-desktop.css" /> <!--[if lte IE 9]><link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/ie9.css" /><![endif]--> <!--[if lte IE 8]><script src="<?php echo bloginfo('template_url'); ?>/js/html5shiv.js"></script><![endif]--> |
После настройки стилей и скриптов ваш сайт должен начать приобретать человеческий вид.
Осталось правильно подключить картинки в шаблоне, чтобы они хорошо отображались и не портили нам внешний вид.
Для настройки картинок временно можно использовать ту же функцию, которую мы использовали для подключения стилей и скриптов.
|
1 |
<?php echo bloginfo('template_url'); ?> |
Для быстрой замены я воспользовался программой notepad++, а также инструментом поиск/замена.
Искал:
img src=»images
Заменял на:
img src=»<?php echo bloginfo(‘template_url’); ?>/images
Если все сделали правильно, у вас после сохранения появятся картинки.
У меня после этих действий шаблон стал выглядеть вот так:
Добавим в код перед закрывающим тегом </head> функцию <?php wp_head(); ?>, эта функция служит как метка, она при необходимости добавляет в шаблон яваскрипты и стили, которые нужны для CMS WordPress и плагинов которые вы будите устанавливать.
Также движку WordPress нужно в код шаблона добавлять классы, которые в дальнейшем можно использовать для стилизации отдельных разделов. Для добавления этих классов используйте следующий код в вашем шаблоне:
<body <?php body_class( ); ?>>
Переменная $class может содержать дополнительные классы которые вы сами хотите добавить. Подробнее о функции можно почитать тут.
Пример использования функции с дополнительными классами.
<body <?php body_class( ‘class-name’ ); ?>>
Этот урок закончился, дальше будет еще интереснее.
/*
- Базовый курс по веб-дизайну;
- Верстка сайтов;
- Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
- Разработка сайтов на PHP.
