У наших уроках ми часто наводимо приклади щодо покращення та розширення вбудованих можливостей WordPress. Часто це просто опис настроювання цікавого плагіна або віджету, а часто ми наводимо в тексті фрагменти коду, який потрібно вставити в той чи інший файл теми, щоб досягти бажаного результату.
Як виявилося, для багатьох фраза Вставте цей код у functions.php — нічого не каже, тому в цьому уроці я намагатимусь показати максимально спрощено, що це за код, і як саме його потрібно додавати до файлів вашої теми. Ця нотатка швидше для новачків, так що якщо ви профі в WordPress - нічого нового ви тут не побачите.
Отже, поїхали!
Як редагувати код?
Не особливо розпинатимуся. Скажу коротко, у вас 2 варіанти:
1. Вбудований редактор WordPress
Знаходиться в Консолі у меню Зовнішній вигляд → Редактор.
- Плюси: завжди під рукою, можна оперативно внести невеликі редагування в код за умови, що ви точно знаєте, куди лізете.
- Мінуси: для редагування доступні не всі файли теми і синтаксис не підсвічується, роблячи цей редактор абсолютно непридатним для серйозної роботи з кодом.
2. Сторонні програми для редагування коду
Для Windows я користуюсь Notepad + + и Adobe Dreamweaver. Для MacOS можу порадити Коду, а для Linux нічого радити не буду, ці хлопці і так добре знають, чим краще правити код. :-)
- Плюси: очевидна, зручна розмітка та підсвічування синтаксису. Наприклад, в Notepad + +, натискаючи на будь-який тег, підсвічується і його тег-побратим, що закривається. Це дуже зручно.
- Мінуси: це все ж таки окремі програми, з якими вам доведеться самому розібратися Деякі програми безкоштовні, а деякі платні.
Узагальнена структура WordPress теми
Файли теми оформлення
Будь WordPress сайт (а правильніше говорити тема, тому що сайт буде працювати при активації однієї зі встановлених тем) насправді є набором файлів. Десь там на стороні вашого хостинг-провайдера ці файли обробляються серверами, і вам на монітор повертається готовий результат – власне сайт. Те, що ви бачите, коли ви заходите за адресою через веб-браузер.
У випадку з WordPress, цей набір файлів буде відрізнятися в кожній темі по-своєму. Але є одна загальна риса: цей набір складається з файлів з розширенням . Php, . CSS и . Js (сам WordPress повністю написаний мовою PHP, так що . Php файли – основна частина будь-якої теми оформлення).
У кожній темі оформлення має бути присутнім мінімальний набір файлів для коректної роботи у середовищі двигуна WordPress. Ви можете відкрити папку зі своєю активною темою (корінь_сайтуwp-contentthemesваша_тема) і, швидше за все, ви знайдете там всі ці файли:
Далі ми поговоримо про ці файли докладніше.
Зовнішній вигляд сайту
Тепер поговоримо про структурі зовнішнього вигляду WordPress сайту. Для того, щоб не було плутанини типу "Я хочу додати цю штучку ось сюди" або "Мені потрібно вставити цю кнопку туди", певні області WordPress теми прийнято називати своїми іменами. Випадковий відвідувач, який потрапив на будь-який сайт, бачить те, що бачить: кнопочки, панельки, заголовки, посилання і так далі. найбільш структурно.
Давайте для прикладу візьмемо наш блог Hostenko.com/wpcafe. Ось як виглядає його головна сторінка:
Я спеціально скомпонував зображення так, щоб було видно всі основні сфери.
Як бачите, головна сторінка нашого блогу складається з 4-х частин: шапки, підвалу, основної частини и бічній панелі. Справедливо відзначити, що така структура є найпоширенішою у більшості тем оформлення WordPress.
Тепер, коли ви знаєте назву областей зовнішнього представлення WordPress сайту, ви можете говорити: "Мені потрібно додати ще один банер у підвалі", або "Я хочу вставити віджет у бічну панель", або "Потрібно змінити порядок меню у шапці”.
Детальніше про файли та код
На зображенні вище ви бачите, що за кожну область сайту відповідає певний файл у папці теми оформлення. Ви бачите 4 області, яким відповідають 4 файлиале насправді файлів більше. Я опишу лише найважливіші файли теми.
header.php - Шапка
Шапка - Це верхня область сайту, в якій міститься логотип, Назва сайту, верхнє навігаційне меню, додатково можуть вставлятися рекламні банери, закріплені сторінки. Це верхня (перша) область, відповідно і оброблятиметься цей файл насамперед. Це означає, що файл header.php також прописуються всі, що підключаються JavaScript файли, CSS файли і таке інше.
Фрагмент файлу:
footer.php - Підвал
Аналогічно шапці, це нижня область сайту, яка може містити копірайти, контактну інформацію, додаткове меню, лічильники метрики і так далі. Якщо провести аналогію з Microsoft Word, то шапка і підвал - це верхній та нижній колонтитули. Це ті частини сайту, які завжди будуть відображатися зверху та знизу, куди б ви не перейшли в рамках сайту.
Фрагмент файлу:
index.php - Основна частина
Основна частина (Вона ж контентна) відповідає за виведення стрічки ваших постів (Записів, публікацій, це все синоніми). Цей файл містить код для виводу заголовка запису, мініатюри, автора, дати публікації, міток, анонсу запису, кнопки для продовження читання запису далі.
Фрагмент файлу:
sidebar.php - Бічна панель
Бічна панель - Це блок супроводжуючої інформації, де виводяться віджети, форма пошуку, соціальні кнопки, хмара міток, реклама, банери та інша інформація. Бічна панель може бути праворуч від основної частини або зліва. Можливо дві бічні панелі відразу, а може бути взагалі.
Фрагмент файлу:
Код цього файлу говорить про те, що сайдбар у цій темі повністю налаштовується через Консоль. І тільки панель пошуку жорстко закріплена у верхній позиції. Отже, щоб додати або змінити будь-який елемент у бічній панелі, потрібно зайти в меню Зовнішній вигляд → Віджети, і там перетягнути в область сайдбару потрібні елементи:
Наприклад, багато наших читачів запитують, яким плагіном реалізовано наш блок соціальних кнопок на головній сторінці. Відповідь приблизно така: це не плагін, а наша власна розробка. У сайдбарі додано віджет "Текст"який містить код опису кожної кнопки. Виглядає це приблизно так:
functions.php - Файл конфігурації теми
Це файл, якого не видно на сайті, але який відіграє дуже важливу роль у правильній роботі теми оформлення. Фактично тут містяться інструкції по роботі адміністративної частини теми оформлення, тут реєструються всі додаткові функції, які може задіяти тема, сюди включаються для завантаження інші компоненти та модулі теми, які були винесені розробником у межах окремих файлів, щоб потім можна було замінити одну складову замість всього файлу functions.php цілком.
Іншими словами, цей файл відповідає за основну функціональну складову теми оформлення. І саме в functions.php вставляється більшість прикладів коду з наших уроків.
Фрагмент файлу:
У цей файл доводиться найчастіше вставляти код з прикладів у наших уроках. Робиться це дуже просто: скопіюйте код з уроку, натиснувши на цю кнопку:
(це картинка, а не фрагмент коду)
Потім відкрийте файл functions.php (або інший потрібний файл) за допомогою вбудованого редактора або сторонньої програми (як було описано вище), опустіться в кінець файлу та вставте кодперед закриттямPHP тега ?>
Це основне і єдине правило — не порушити цілісність і структуру коду, що вже існує.
Якщо код, який ви вставляєте, починається відкриттям php тега<?phpвідповідно, і вставляти його потрібно післязакриття попереднього. Нічого складного.
style.css - Таблиця стилів оформлення
Ще один дуже важливий файл, без якого не працюватиме жодна тема оформлення WordPress. Цей файл найкраще "видно" на головній сторінці будь-якого WordPress сайту.
Усі оформлення, фон, шрифти, кольори, інтервали відступу, заливка, тіні, градієнти - за все це відповідає єдиний файл style.cssтому його важливість складно переоцінити.
Фрагмент файлу:
Цей файл відрізняється від усіх, описаних вище, оскільки він повністю написаний, використовуючи розмітку веб-стилів CSS. Тому весь код, що стосується налаштування оформлення наших уроків, додається в цей файл. Просто відкрийте цей файл, прокрутіть до кінця і додайте свій css код починаючи з нового порожнього рядка.
Які ще файли ми забули?
Я просто коротко перерахую з описом:
- 404.php - файл, що відповідає за сторінку помилки. Якщо ви перейшли за посиланням, яке посилається на неіснуючий запис або сторінку на вашому сайті, ви потрапите на 404.php, де буде написано Вибачте, але такої сторінки не існує, або щось таке.
- archive.php — цей файл відповідає за виведення та відбір записів за вибраними критеріями: по рубриці, за автором, за день, місяць, рік або за міткою.
- comments.php - Все просто, файл відповідає за коментування ваших записів та сторінок. Містить налаштування форми коментування.
- page.php — файл, який відповідає за публікацію та висновок сторінок. Наприклад, у верху нашого блогу в Шапці є менюкожен елемент якого відкриває свою Сторінку.
- search.php - файл, який відповідає за Пошук по сайту та виведення результатів пошуку.
- single.php — файл, який відповідає за публікацію та виведення записів. Урок, який ви читаєте зараз, відображається завдяки файлу single.php.
От і все! Сподіваюся, цей урок пояснив деякі моменти, і тепер вам буде простіше орієнтуватися, в який саме файл потрібно вставляти додатковий код.
Коментарі до запису: 40
Дякую! Корисний матеріал.
Дякую. Підкажіть, а чи є можливість такого рішення: Сайт хоститься на локальному сервері після того, як зробив певні зміни на локалці, заливати на продакшн натисканням однієї кнопки, а не додаванням «шматка коду» у файл.
Для цього є пакет Adobe Dreamweaver, в якому можна налаштувати синхронізацію між вашими папками із файлами та сервером для сайту. Зміни, зроблені однією зі сторін, миттєво відобразяться і другий теж.
А ось якщо на прикладі саме цієї сторінки, то куди конкретно додавався б код блоку «оцініть матеріал» потім код соціальних кнопок, потім підписка, схожі посади і коментування.
Файл single.php одразу після функції
Підкажіть, яка роль файлу loop.php (і його похідні index-loop.php і.т.д.)? Наскільки я розумію, з цим файлом структура виглядає дещо інакше. Можлива тема для окремого посту.
У цей файл розробники часто виносять код циклу для повторюваного матеріалу, наприклад стрічку постів на головній сторінці. Іноді цей код включається до index.php теж.
Спасибо.
Ось-ось вийде нова версія WP. Якщо буде можливість, висвітлить у найближчих постах що там буде нового для користувачів.
Для WP є кілька плагінів, які вирішують проблему з підсвічуванням коду. Один з них -
Solid Code Theme Editor
Ух ти! Знайшов! Дякую! У сайтів аналогів такого немає
вніс код від баннера одного з рекламодавців навіть не пам'ятаю вже в який розділ редактора сайту, натиснув кнопку оновити,,,,,, і все! Білий екран відновити сайт не знаю як. Стільки інформації на ньому, півроку робив…
Підкажіть, будь ласка, як бути, коли лічильник Метрики не відображається в блозі для звичайних відвідувачів? Тема Twenty Twelve, лічильник Метрики додав у footer.php, але відображається він тільки для адміністратора у вихідному коді сторінки.
Підкажіть, будь ласка, чому буває у «дизайні» — у «редакторі» відсутні файли та напис: «Вибачте, файли з «..» на ім'я не можуть бути змінені. Якщо ви намагаєтеся змінити файл у вашій домашній директорії WordPress, то можна просто ввести ім'я файлу?
Вибачте, але нічого не зрозумів. У якому дизайні, у якому редакторі, про які файли йдеться?
Дуже дякую за супер-корисний матеріал! Так доступно та зрозуміло! :)
Будь ласка, підкажіть, а який файл повинен відповідати за функціональність окремих сторінок портфоліо? У мене на сайті два розділи з портфоліо, хочу на кожну окрему сторінку встановити кнопки соціальних мереж, але не знаю, який файл для цього використовувати.
заздалегідь велике спасибі!
Це залежить від теми і того, як організована функціональність портфоліо. Якщо використовуються окремі записи – то single.php, якщо окремі сторінки – то page.php
В адмінці Wordpress я створюю новий запис або сторінку. І запис і сторінка мають назву і текстовий зміст. Зберігаю зміни. Тепер я їх бачу на своєму блозі, а також можу легко знайти через адмінку wordpress у розділах «Записи» та «Сторінки» та відредагувати їх.
Запитання 1: Де, в якому файлі знайти тексти створеного мною запису та сторінки у файлах блогу в папці wordpress та відредагувати їх за допомогою редактора Notepad++?
Запитання 2: Де, в якому файлі мені знайти тексти створеного мною запису та сторінки у файлах блогу та відредагувати їх через адмінку через меню «Зовнішній вигляд > редактор?»
1. Весь вміст записів і сторінок зберігається у базі даних MySQL на сервері, а чи не у файлах теми чи файлах wordpress.
2. Виходячи з пункту 1 – ніде.
Все гаразд, знайшов! Дякую!
Огромное спасибо!
Я хочу поставити акордіон зображень за допомогою JQuery
Питання: вказано покроково, що куди вписувати. Не зрозумілий 1-й та 3-й пункти. Особливо третій. Куди треба вставляти код із 3-го пункту? Заздалегідь дякую за повну відповідь.
1. Вставляється саме у місце, де буде відображатися цей слайдер. Тобто. якщо на головній - то у файлі index.php перед анонсами записів.
3. Цей шматок коду можна винести в рамках окремого .js файлу і заінклудити його в functions.php, це буде найраціональніший хід. Як інклудити .js файли - море інформації, в тому числі і на нашому блозі.
Дітей підкажіть, будь ласка, стоїть тема Parabola і у неї є сторінка на головній нібито презентації. У цій презентації у мене відображаються фото, але щоб оптимізувати розмір тобто поставити розмір по ширині і довжині в редакторі коді, не можу знайти рядок куди вписувати ці параметри. Всі файли облазив в header.php і взагалі ні чого нема, в інших файлах згадуються теги $parabola навіть там, де має бути зображення. Може, у мене все закодовано? Можете, що-небудь порадити?
Дякую, за зрозумілий виклад матеріалу.
Дякуємо за чітко викладену інформацію! Допомогло у роботі над сайтом
Достатньо повна інформація і здається нічого не забули, крім того, куди ж таки «вставити цей код». Цей код має на увазі код зв'язування сторінки WordPress зі сторінкою Google+.
Доброго дня! Всі зміни в файлах видаляться під час оновлення теми. Краще використовувати дочірню тему та не боятися оновлень.
Абсолютно вірно!
Та й куди таки вставляти код для лічильника відвідувачів???
Почніть зі слів, код вставити на сторінці…..(шлях)….після слова….. .
На жаль, не дуже розумію, як вставити код на головну сторінку, сайт rubtcova .com
Додати Сайт
Для того щоб додати новий сайт, вам необхідно розмістити мета-тег на головній сторінці вашого сайту.
1. Додайте до коду головної сторінки вашого сайту (у розділі head) мета-тег
2. Зайдіть на головну сторінку сайту та переконайтеся, що мета-тег з'явився у html-коді сторінки. У більшості браузерів це можна зробити, вибравши пункт «Вихідний код сторінки» в контекстному меню. На деяких сайтах оновлення мета-тегів може тривати кілька хвилин!
3. Натисніть кнопку «Додати»
Добрий день!
Не вдається вставити код на сторінку сайту, або взагалі не видно пошуку турів, або наполовину. Напишіть покроково, будь ласка. Мені потрібно, щоб після форми онлайн заявки був пошук турів. Як мені правильно прописати в редакторі header.php?
Поганий абсолютно марний матеріал жодної тямущої відповіді
Добрий день. Додаю лічильник від yandex і mail коди кладу в файл підвалу, перед тегом footer, що закривається, але чому то yandex і mail лічильники не з'являються на сайті, теж саме проробляю з rambler, від нього лічильник з'являється, в чому може бути справа? Дякую.
Доброго дня! Будь ласка, підкажіть, куди потрібно вставити код для словника, щоб на кожній сторінці виводився не сам словник, а посилання на нього? Чи може сам словник якось окремо розмістити, а перед кожною статтею вставляти посилання? Чи можна розумніше і простіше зробити? Це код: http://prntscr.com/czxn02. Архів скачала, плагін для коду встановила, що далі з ним робити - не зрозумію(((((((((((
Заранее спасибо!
Здрастуйте, дякую за статтю. Використовую тему SAHIFA Хочу до верхнього слайдера додати заголовок, як на цьому сайті magazine.anyoption. я так зрозуміла що це редагування, в одному з php але на жаль не можу зрозуміти у якому, та який шматок вставити, може хто стикався?
привіт! я хочу натягнути багатосторінковий html сайт на вордпрес.
але як переходити з однієї сторінки на іншу.
Зазвичай статичні сайти пишеться index.html, contact.html, about.html тощо.
але я припускаю на їх місця писати php код.можна сказати який php код я повинен писати.приклад :
чи можливо виповзувати фінкції з ACF?
Коли пишеш новий пост або редагуєш, то можна поставити H1 прямо в редакторі, вибравши Heading 1, а на головній сторінці? У ваших скріншотах h1 є тільки в index.php, але це середина. Як із
Tagline (слоган), що під назвою сайту, зробити h1?
Tagline (слоган) краще вставляти у файл header.php