Як редагувати шаблон WordPress

39

Від автора: вітаю вас. Всі, хто має сайти на wordpress, рано чи пізно замислюються над питанням, як редагувати wordpress шаблон. Це досить важливе вміння для будь-якого веб-майстра. Давайте ж розберемося.

Найважливіше – не бійтеся. Редагувати що-небудь зазвичай завжди простіше, ніж створювати з нуля. Це справедливо і для wordpress шаблонів. Щоб розібратися, як його змінювати, необхідно для початку визначити його структуру. Отже, шаблон або тема складається, по суті, з двох речей:

Безпосередньо php-файли, які і формують вміст сайту + css-файл style.css, в якому описані всі стилі

Додаткові папки і файли. Це можуть бути додаткові css-файли, шрифти, скрипти і т. д. Все це додається за бажанням залежно від складності шаблону

PHP-файлів та їх редагування

Щоб повноцінно редагувати php-файли wordpress-темах, ви повинні володіти хоча б основами цієї мови. Тобто хоча б розуміти базовий синтаксис мови, найпростіші поняття. Ну або, як мінімум, ви повинні вміти користуватися довідником. Наприклад, по функціях wordpress є хороший довідник – wp-kama.ru.

Власне, давайте почнемо з простішого – самої структури шаблону. Його формують різні php-файли. Взагалі зараз сядьте і подумайте, що є на будь-якому сайті (ну або майже будь -)? По-перше, це шапка. Тобто верхня частина, де зазвичай розташовується логотип, заголовок, опис проекту та інша інформація. По-друге, це основна частина для виведення вмісту. В-третіх – бічна колонка. Або навіть кілька колонок. По-четверте, підвал сайту.

Так от, якщо все це розуміти, вже стає легше, тому що в wordpress шаблон всі php-файли теж розбиті по частинам сайту або визначеним. Тобто:

header.php – тут лежить шаблон шапки;

footer.php – підвал;

sidebar.php – бічна колонка;

Це саме структурні частини. Ну а що ж з контентної? Ну тут потрібно розуміти, що в основній області може розташовуватися запис, сторінка, список записів, результати пошуку тощо Відповідно, для кожного є свій шаблон:

single.php – шаблон для одиночної запису;

page.php – одиночна сторінка;

archive.php – висновок архівних записів;

index.php – висновок головної сторінки сайту.

search.php – вивід результатів пошуку.

Ну ще можна сказати про таке необязательном шаблоні, як category.php. Він, як можна здогадатися, відповідає за висновок постів в рубриках. Але зазвичай його не створюють, так як з цим завданням справляється і archive.php. Ось скріншот php-файлів у простому шаблоні:

Тут можна виділити ще 2 файлу:

404.php – відповідає за висновок сторінки з помилкою 404.

functions.php цей файл містить різні функції для шаблону. Наприклад, з його допомогою створюються довільні віджети, додаються різні можливості в шаблон. Якщо ви не розбираєтеся в php і wordpress-функції, то цей файл краще взагалі не чіпати. Та й зазвичай він ніяк не впливає на зовнішній вигляд сайту, а тільки на працездатність різних можливостей.

Важливе доповнення

Все, що ми розглянули, це лише основні php-файли, які створюються при розробці будь-якого wordpress-шаблону. Але ніхто не заважає розробнику додати свої шаблони, і ось вони вже можуть називатися як завгодно. Хоча зазвичай тлумачний розробник називає ці файли так, що за назвою приблизно зрозуміла завдання файлу. Наприклад, content-meta.php. По назві можна здогадатися, що у файлі міститься мета-інформація про контент. Тобто це може бути ім’я автора, публікації, кількість переглядів і коментарів і т. д.

Щось вам стало зрозуміліше? Ну хоча б те, що якщо вам потрібно змінити щось в шапці, то потрібно лізти в header.php а якщо додати яку-небудь форму підписки після кожної статті, то в single.php. Ну і звичайно, будь-які зміни зовнішнього вигляду вже існуючих і нових елементів виробляються через таблицю стилів – style.css. Але для цього потрібно хоча б трохи розбиратися в css.

Далі, відповідно, відкриваємо потрібний файл і дивимося, що в ньому є. Взагалі танцювати потрібно безпосередньо від вашої задачі. Тобто що вам конкретно потрібно змінити в шаблоні. Розглянемо, що можна зробити.

Зміна зовнішнього вигляду вже наявних елементів

Наприклад, в шапці у вас заголовок, і ви хочете зробити його синім, а не зеленим, припустимо. Що робити? Відкриваєте сайт в браузері Yandex Browser або Google Chrome, далі тиснете F12. Перед вами з’явиться відладчик. Розкриваєте там структуру сайту. Відладчик підсвічує вам блок на сайті, до якого належить той чи інший тег.

Наведу приклад з головної сторінки нашого сайту. Припустимо, нам захочеться змінити 4-й блок навігації – наші курси. Як це зробити?

Заходимо на головну, тиснемо F12, з’являється відладчик. Починаємо розкривати потрібний тег. Для цього натисніть на трикутник. Базові знання html тут вам, звичайно, теж знадобляться. Наприклад, ви повинні розуміти, що весь вміст сайту лежить в тегу body. Коротше, ви повинні знайти шуканий елемент.

Ось, у нашому випадку елемент знайдений. Це посилання з класом nav4. Нас з вами в першу чергу цікавить саме клас або ідентифікатор, так як його ми будемо шукати в таблиці стилів.

Все, коли ця інформація знайдена, вам залишається відкрити style.css, натиснути Ctrl + F для пошуку і ввести там назву класу. У нашому випадку nav4. Звичайно, з webformyself це зробити не вийде, тому що у вас просто немає доступу до сайту, але от зі своїм шаблоном без проблем.

Відповідно, знаходимо в таблиці стилів наш селектор і дивимося, які стилі для нього прописані. До речі, це можна зробити навіть в налагоджувач, він показує цю інформацію збоку або нижче, в залежності від розташування панелі.

Ви можете відключати потрібні стилі або переписувати їх, щоб бачити, як це впливає на сайт. Відладчик буде показувати всі зміни. Звичайно, вони будуть видні тільки вам, тому що для зміни реального сайту потрібно мати доступ до нього.

Якщо говорити коротко, то це те, як виглядає зміна елементів. Тепер давайте розглянемо іншу сторону редагування шаблону.

Редагування php-файлів, додавання або видалення елементів

В принципі, щось видалити зазвичай простіше, ніж щось додати. До видалення можна додуматися чисто інтуїтивно. Наприклад, виводитися у вас перед статтею дата публікації, а ви хочете її перенести під статтю. Ви навіть чисто інтуїтивно можете відкрити single.php і знайти там блок, в якому будуть слова типу date, time і т. д. Виділити його, вирізати і вставити після виведення статті.

А от щоб щось додати, вам потрібно трохи краще знати html і php. Або хоча б вміти користуватися довідником по wordpress-функцій і загальним довідником по html-тегами.

Наприклад, вам потрібно вивести ім’я автора в кожній статті. Як ви розумієте, для цього потрібно відредагувати файл single.php. У ньому потрібно десь перед статтею або в її кінці вивести приблизно такий код:

<p>Автор посту: <?php the_author(); ?></p>

Приклад я взяв з довідника. Вам необов’язково знати заздалегідь назва функції, ви можете просто ввести в поле пошуку в довіднику щось на кшталт «виводить ім’я» і ось вже довідник сам підказує нам відповідні функції:

Але це варіант, при якому ви напевно зможете виконати лише незначні зміни. Друзі, якщо ж ви хочете яким завгодно чином змінювати шаблони під себе і навіть створювати їх з нуля, вкрай рекомендую вам пройти наш чудовий курс по створенню тем для wordpress, де ви з нуля створите 3 теми. Повірте, якщо ви навчитеся їх створювати, то тим більше просто вам буде потім змінювати їх. Що ж, на цьому я буду прощатися з вами. Сподіваюся, базові принципи зміни ви зрозуміли. Наостанок скажу, що вкрай рекомендую вам проводити всі експерименти тільки на локальному сервері, а якщо і змінювати щось на реальному, то тільки після резервного копіювання шаблонів.