Підручник з WordPress: Як створити тему WordPress з HTML (частина 2)

  1. 1. Підручник WordPress: Як створити тему WordPress з HTML (частина 1)
  2. 2. На даний момент читаємо: Підручник з WordPress: Як створити тему WordPress з HTML (частина 2)
  3. 3. Вступ до анатомії теми WordPress

У першій частині цього підручника ми висвітлювали основи перетворення шаблону HTML у тему WordPress. Якщо ви є найменшим цікавим, ми дізналися кілька речей про розбиття шаблонів HTML на файли PHP, їх складання разом, стилізацію та іменування тем WordPress. Дійсно, ми багато чого навчились, і ви захочете ознайомитись із поняттями, про які ми розповідали в нашому першому підручнику, щоб насолодитися цією другою порцією. У сьогоднішньому дописі ми піднімемо речі набагато вище. Ми охопимо ще кілька областей, щоб ви могли створити повністю функціональну тему WordPress. Отож, без зайвих прихильників, тут ми йдемо.


Налаштування зображень та файлів JavaScript

Якщо у вас є зображення в оригінальному шаблоні HTML (index.html), ви, мабуть, помітили, що вони перестали показуватися після подрібнення шаблону у файли PHP. Не хвилюйтеся взагалі, це просто так, як PHP. Наприклад, якщо у вас був такий логотип у розділі заголовка, як це…

your_logo_alt_text

… Вам потрібно буде трохи пограти з кодом. Код, який я розкрию за мить, допоможе браузерам знайти ваш логотип (або будь-яке інше зображення) у вашому образи папку, яка є (або повинна бути) підпапок головного каталогу вашої теми. Отже, щоб відобразити ваш логотип у розділі заголовка, відкрийте файл header.php та замініть вищевказаний код наступним:

your_logo_alt_text

Функція get_template_directory_uri () повертає URL-адресу для вашого каталогу тем. Так, якщо ви додасте ваш логотип у папку із зображеннями, тоді код захопить цей логотип.

Помічаєте якусь різницю? Очевидно, цей фрагмент коду виправить лише ваш логотип. Щоб виправити інші зображення, вам потрібно буде переписати їх коди аналогічно. Легкий горошок.

Перейдемо до JavaScript. Якщо ваш веб-сайт HTML використовував JavaScript, створіть папку з назвою js і розмістіть там свої сценарії. Ви можете викликати їх у файлі header.php, використовуючи наступний код:

Вищевказаний код використовує example.js як ілюстрація. Не забудьте замінити цю частину на ім’я вашого файлу JavaScript.

Звичайно, якщо ви створюєте тему для когось іншого, тоді ви дійсно повинні завантажувати ваші js-файли wp_enqueue_scripts. Ознайомтеся з публікаціями AJ щодо додавання JavaScript до тем WordPress, щоб отримати докладнішу інформацію та поради.

Файли шаблонів

У першій частині цього підручника ми згадували саме чотири основні файли шаблонів index.php, header.php, sidebar.php і footer.php. Файли шаблонів контролюють, як ваш веб-сайт відображатиметься в Інтернеті. Шаблони отримують інформацію з вашої бази даних MySQL WordPress і перекладають її в HTML-код, який відображається у веб-браузерах. Іншими словами, файли шаблонів є складовими тем WordPress. Щоб краще зрозуміти шаблони, давайте поглибимося в концепцію, відому як ієрархія шаблонів.

Ми будемо використовувати аналогію. Якщо відвідувач натискає посилання на категорію (тобто посилання на категорію), наприклад http://www.yoursite.com/blog/category/your-category/, WordPress використовує ієрархію шаблонів для створення потрібного файлу (та вмісту) як пояснено нижче:

  • По-перше, WordPress шукатиме файл шаблону, який відповідає ідентифікатору категорії
  • Якщо ідентифікатор категорії, наприклад, 2, WordPress шукатиме файл шаблону з назвою категорія-2.php
  • Якщо категорія-2.php недоступна, WordPress перейде до файлу шаблону загальної категорії, наприклад kategorije.php
  • Якщо цей файл шаблону також недоступний, WordPress шукатиме загальний шаблон архіву, такий як archive.php
  • Якщо загального шаблону архіву не існує, WordPress повернеться до основного файлу шаблону, index.php

Ось так працюють шаблони WordPress, і ви можете використовувати ці файли, щоб налаштувати свою тему WordPress відповідно до ваших потреб. Інші файли шаблонів включають:

home.php або index.phpВикористовується для візуалізації індексу публікацій блогу
передня сторінка.phpВикористовується для візуалізації статичних сторінок або останніх публікацій, встановлених на дисплеях на головній сторінці
Single.phpВикористовується для візуалізації однієї сторінки публікацій
одно- {пост-тип} .phpВикористовується для візуалізації спеціальних типів публікацій, наприклад якщо пост-тип був продуктом, WordPress використовував бы single-product.php
page.phpВикористовується для візуалізації статичних сторінок
category.php або archive.phpВикористовується для візуалізації індексу архіву категорій
author.phpВикористовується для візуалізації автора
date.phpВикористовується для відображення дати
search.phpВикористовується для візуалізації результатів пошуку
404.phpВикористовується для візуалізації сторінки помилок 404 сервера

Це лише короткий список, є багато інших Шаблони WordPress. Тема шаблонів велика, і найкращий спосіб навчитися грати з файлами шаблонів – читаючи обширний Розробка теми бібліотека в WordPress. Крім того, ви можете прочитати коротший Розділ шаблонів у WordPress Codex.

Теги шаблонів

Побачивши, що ми щойно представили файли шаблонів, справедливо згадати щось або дві про теги шаблонів та роль, яку вони відіграють у тематиці WordPress. За інформацією WordPress.org, “… теги шаблонів використовуються в шаблоні вашого блогу, щоб динамічно відображати інформацію або іншим чином налаштовувати ваш блог, надаючи інструменти, щоб зробити його таким же індивідуальним та цікавим”.

У нашому попередньому підручнику ви зустріли кілька тегів шаблонів, таких як get_header, get_sidebar, get_footer і bloginfo. У наступному розділі ми додамо кілька тегів шаблонів до нашої щойно створеної теми WordPress. Я припускаю, що ви вже включили декларацію DOCTYPE у файл header.php. Якщо ви цього не зробили, ось код:

Декларація DOCTYPE надає значення вашому HTML-коду. Не виходячи з цього, давайте змінимо вступний тег HTML. Ми будемо включати атрибут lang за допомогою language_attributes тег так:

Вищевказаний код генерує наступне:

Завдяки декларації DOCTYPE та тегу language_attribute структура вашої теми є законною, і браузери зрозуміють ваш код. Якщо ви створюєте тему для блогу, важливо розмістити в голові посилання на вашу URL-адресу pingback та RSS-канал. У свій header.php додайте такий код:

Ви помітили, як ми працювали тег bloginfo включити RSS-канал (‘rss2_url’) та pingback (‘pingback_url’)? Перш ніж зберегти файл header.php, додайте також такий код:

Наведений вище тег wp_head буде містити таблиці стилів та файли JavaScript, необхідні вашим плагінам. Якщо ви не залишите цей крихітний фрагмент коду, ваші плагіни можуть не працювати як слід. Не виходячи з цього, давайте додамо заголовки сторінок до нашої теми WordPress, використовуючи – ще раз – тег bloginfo. У файл header.php додайте такий код:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

Перший тег wp_title додасть назву вашої сторінки чи публікації та другий тег bloginfo (“ім’я”) додасть назву вашого блогу. Тепер, коли у вашої теми WordPress є заголовки сторінок, як щодо того, як ми створимо скріншот на нашу тему, перепакуйте тему та відпочинь?

Створення знімка екрана для вашої теми

Коли ви завантажили тестову тему вперше, ви, мабуть, помітили, що на панелі тем WordPress на екрані WordPress відсутній знімок екрана. Це виглядало некрасиво, особливо якщо у вас були інші теми з різнокольоровими скріншотами. Але хвилюйтесь, що створити скріншот для вашої теми дуже просто. Просто створіть зображення за допомогою улюбленого редактора зображень (наприклад, Adobe Photoshop) або зробіть захоплення теми на екрані. Переконайтесь, що ваше зображення має ширину 600 пікселів та висоту 450 пікселів. Збережіть зображення як screenshot.png у папці тем. Збережіть усі зміни, стисніть папку тем у архіві ZIP. Завантажте тему та активуйте її, щоб побачити ваші нові зміни ��

Висновок

Хочу вірити, що цей другий підручник запропонував вам більш глибоке розуміння створення теми WordPress зі статичного HTML. Найближчим часом я познайомлю вас з іншими аспектами тематизації WordPress, але тим часом я підготував такі ресурси лише для вас:

Щасливе створення!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map