Підключаємо стилі, скрипти та картинки 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.
