Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

У наших уроках ми часто наводимо приклади щодо покращення та розширення вбудованих можливостей WordPress. Часто це просто опис настроювання цікавого плагіна або віджету, а часто ми наводимо в тексті фрагменти коду, який потрібно вставити в той чи інший файл теми, щоб досягти бажаного результату.

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Отже, поїхали!

Як редагувати код?

Не особливо розпинатимуся. Скажу коротко, у вас 2 варіанти:

1. Вбудований редактор WordPress

Куди вставляти цей код у WordPress? Загальна структура файлів теми
Знаходиться в Консолі у меню Зовнішній вигляд → Редактор.

  • Плюси: завжди під рукою, можна оперативно внести невеликі редагування в код за умови, що ви точно знаєте, куди лізете.
  • Мінуси: для редагування доступні не всі файли теми і синтаксис не підсвічується, роблячи цей редактор абсолютно непридатним для серйозної роботи з кодом.

2. Сторонні програми для редагування коду

Для Windows я користуюсь Notepad + + и Adobe Dreamweaver. Для MacOS можу порадити Коду, а для Linux нічого радити не буду, ці хлопці і так добре знають, чим краще правити код. :-)

Куди вставляти цей код у WordPress? Загальна структура файлів теми

  • Плюси: очевидна, зручна розмітка та підсвічування синтаксису. Наприклад, в Notepad + +, натискаючи на будь-який тег, підсвічується і його тег-побратим, що закривається. Це дуже зручно.
  • Мінуси: це все ж таки окремі програми, з якими вам доведеться самому розібратися Деякі програми безкоштовні, а деякі платні.

Узагальнена структура WordPress теми

Файли теми оформлення

Будь WordPress сайт (а правильніше говорити тема, тому що сайт буде працювати при активації однієї зі встановлених тем) насправді є набором файлів. Десь там на стороні вашого хостинг-провайдера ці файли обробляються серверами, і вам на монітор повертається готовий результат – власне сайт. Те, що ви бачите, коли ви заходите за адресою через веб-браузер.

У випадку з WordPress, цей набір файлів буде відрізнятися в кожній темі по-своєму. Але є одна загальна риса: цей набір складається з файлів з розширенням . Php, . CSS и . Js (сам WordPress повністю написаний мовою PHP, так що . Php файли – основна частина будь-якої теми оформлення).

У кожній темі оформлення має бути присутнім мінімальний набір файлів для коректної роботи у середовищі двигуна WordPress. Ви можете відкрити папку зі своєю активною темою (корінь_сайтуwp-contentthemesваша_тема) і, швидше за все, ви знайдете там всі ці файли:

Куди вставляти цей код у WordPress? Загальна структура файлів теми

Далі ми поговоримо про ці файли докладніше.

Зовнішній вигляд сайту

Тепер поговоримо про структурі зовнішнього вигляду WordPress сайту. Для того, щоб не було плутанини типу "Я хочу додати цю штучку ось сюди" або "Мені потрібно вставити цю кнопку туди", певні області WordPress теми прийнято називати своїми іменами. Випадковий відвідувач, який потрапив на будь-який сайт, бачить те, що бачить: кнопочки, панельки, заголовки, посилання і так далі. найбільш структурно.

Давайте для прикладу візьмемо наш блог Hostenko.com/wpcafe. Ось як виглядає його головна сторінка:

Куди вставляти цей код у WordPress? Загальна структура файлів теми
Я спеціально скомпонував зображення так, щоб було видно всі основні сфери.

Як бачите, головна сторінка нашого блогу складається з 4-х частин: шапки, підвалу, основної частини и бічній панелі. Справедливо відзначити, що така структура є найпоширенішою у більшості тем оформлення WordPress.

Тепер, коли ви знаєте назву областей зовнішнього представлення WordPress сайту, ви можете говорити: "Мені потрібно додати ще один банер у підвалі", або "Я хочу вставити віджет у бічну панель", або "Потрібно змінити порядок меню у шапці”.

Детальніше про файли та код

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

header.php - Шапка

Шапка - Це верхня область сайту, в якій міститься логотип, Назва сайту, верхнє навігаційне меню, додатково можуть вставлятися рекламні банери, закріплені сторінки. Це верхня (перша) область, відповідно і оброблятиметься цей файл насамперед. Це означає, що файл header.php також прописуються всі, що підключаються JavaScript файли, CSS файли і таке інше.

Фрагмент файлу:

Куди вставляти цей код у WordPress? Загальна структура файлів теми

footer.php - Підвал

Аналогічно шапці, це нижня область сайту, яка може містити копірайти, контактну інформацію, додаткове меню, лічильники метрики і так далі. Якщо провести аналогію з Microsoft Word, то шапка і підвал - це верхній та нижній колонтитули. Це ті частини сайту, які завжди будуть відображатися зверху та знизу, куди б ви не перейшли в рамках сайту.

Фрагмент файлу:

Куди вставляти цей код у WordPress? Загальна структура файлів теми

index.php - Основна частина

Основна частина (Вона ж контентна) відповідає за виведення стрічки ваших постів (Записів, публікацій, це все синоніми). Цей файл містить код для виводу заголовка запису, мініатюри, автора, дати публікації, міток, анонсу запису, кнопки для продовження читання запису далі.
Фрагмент файлу:

Куди вставляти цей код у WordPress? Загальна структура файлів теми

sidebar.php - Бічна панель

Бічна панель - Це блок супроводжуючої інформації, де виводяться віджети, форма пошуку, соціальні кнопки, хмара міток, реклама, банери та інша інформація. Бічна панель може бути праворуч від основної частини або зліва. Можливо дві бічні панелі відразу, а може бути взагалі.
Фрагмент файлу:

Куди вставляти цей код у WordPress? Загальна структура файлів теми
Код цього файлу говорить про те, що сайдбар у цій темі повністю налаштовується через Консоль. І тільки панель пошуку жорстко закріплена у верхній позиції. Отже, щоб додати або змінити будь-який елемент у бічній панелі, потрібно зайти в меню Зовнішній вигляд → Віджети, і там перетягнути в область сайдбару потрібні елементи:
Куди вставляти цей код у WordPress? Загальна структура файлів теми
Наприклад, багато наших читачів запитують, яким плагіном реалізовано наш блок соціальних кнопок на головній сторінці. Відповідь приблизно така: це не плагін, а наша власна розробка. У сайдбарі додано віджет "Текст"який містить код опису кожної кнопки. Виглядає це приблизно так:

Куди вставляти цей код у WordPress? Загальна структура файлів теми

functions.php - Файл конфігурації теми

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

Куди вставляти цей код у WordPress? Загальна структура файлів теми
У цей файл доводиться найчастіше вставляти код з прикладів у наших уроках. Робиться це дуже просто: скопіюйте код з уроку, натиснувши на цю кнопку:
Куди вставляти цей код у WordPress? Загальна структура файлів теми

(це картинка, а не фрагмент коду)
Потім відкрийте файл functions.php (або інший потрібний файл) за допомогою вбудованого редактора або сторонньої програми (як було описано вище), опустіться в кінець файлу та вставте кодперед закриттямPHP тега ?>

Це основне і єдине правило — не порушити цілісність і структуру коду, що вже існує.

Якщо код, який ви вставляєте, починається відкриттям php тега<?phpвідповідно, і вставляти його потрібно післязакриття попереднього. Нічого складного.

style.css - Таблиця стилів оформлення

Ще один дуже важливий файл, без якого не працюватиме жодна тема оформлення WordPress. Цей файл найкраще "видно" на головній сторінці будь-якого WordPress сайту.
Усі оформлення, фон, шрифти, кольори, інтервали відступу, заливка, тіні, градієнти - за все це відповідає єдиний файл style.cssтому його важливість складно переоцінити.
Фрагмент файлу:

Куди вставляти цей код у WordPress? Загальна структура файлів теми
Цей файл відрізняється від усіх, описаних вище, оскільки він повністю написаний, використовуючи розмітку веб-стилів CSS. Тому весь код, що стосується налаштування оформлення наших уроків, додається в цей файл. Просто відкрийте цей файл, прокрутіть до кінця і додайте свій css код починаючи з нового порожнього рядка.

Які ще файли ми забули?

Я просто коротко перерахую з описом:

  • 404.php - файл, що відповідає за сторінку помилки. Якщо ви перейшли за посиланням, яке посилається на неіснуючий запис або сторінку на вашому сайті, ви потрапите на 404.php, де буде написано Вибачте, але такої сторінки не існує, або щось таке.
  • archive.php — цей файл відповідає за виведення та відбір записів за вибраними критеріями: по рубриці, за автором, за день, місяць, рік або за міткою.
  • comments.php - Все просто, файл відповідає за коментування ваших записів та сторінок. Містить налаштування форми коментування.
  • page.php — файл, який відповідає за публікацію та висновок сторінок. Наприклад, у верху нашого блогу в Шапці є менюкожен елемент якого відкриває свою Сторінку.
  • search.php - файл, який відповідає за Пошук по сайту та виведення результатів пошуку.
  • single.php — файл, який відповідає за публікацію та виведення записів. Урок, який ви читаєте зараз, відображається завдяки файлу single.php.

От і все! Сподіваюся, цей урок пояснив деякі моменти, і тепер вам буде простіше орієнтуватися, в який саме файл потрібно вставляти додатковий код.

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 40

KeePass:

Дякую! Корисний матеріал.

skills_web:

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

WordPresso:

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

Vitaliy Rozhkov:

А ось якщо на прикладі саме цієї сторінки, то куди конкретно додавався б код блоку «оцініть матеріал» потім код соціальних кнопок, потім підписка, схожі посади і коментування.

WordPresso:

Файл single.php одразу після функції

Keks Editor:

Підкажіть, яка роль файлу loop.php (і його похідні index-loop.php і.т.д.)? Наскільки я розумію, з цим файлом структура виглядає дещо інакше. Можлива тема для окремого посту.

WordPresso:

У цей файл розробники часто виносять код циклу для повторюваного матеріалу, наприклад стрічку постів на головній сторінці. Іноді цей код включається до index.php теж.

Keks Editor:

Спасибо.

Ось-ось вийде нова версія WP. Якщо буде можливість, висвітлить у найближчих постах що там буде нового для користувачів.

Dmitry Korolev:

Для WP є кілька плагінів, які вирішують проблему з підсвічуванням коду. Один з них -
Solid Code Theme Editor

Ніяз:

Ух ти! Знайшов! Дякую! У сайтів аналогів такого немає

Непрограміст:

вніс код від баннера одного з рекламодавців навіть не пам'ятаю вже в який розділ редактора сайту, натиснув кнопку оновити,,,,,, і все! Білий екран відновити сайт не знаю як. Стільки інформації на ньому, півроку робив…

KeePass:

Підкажіть, будь ласка, як бути, коли лічильник Метрики не відображається в блозі для звичайних відвідувачів? Тема Twenty Twelve, лічильник Метрики додав у footer.php, але відображається він тільки для адміністратора у вихідному коді сторінки.

heroizm:

Підкажіть, будь ласка, чому буває у «дизайні» — у «редакторі» відсутні файли та напис: «Вибачте, файли з «..» на ім'я не можуть бути змінені. Якщо ви намагаєтеся змінити файл у вашій домашній директорії WordPress, то можна просто ввести ім'я файлу?

WPcafe.org:

Вибачте, але нічого не зрозумів. У якому дизайні, у якому редакторі, про які файли йдеться?

Тетяна:

Дуже дякую за супер-корисний матеріал! Так доступно та зрозуміло! :)
Будь ласка, підкажіть, а який файл повинен відповідати за функціональність окремих сторінок портфоліо? У мене на сайті два розділи з портфоліо, хочу на кожну окрему сторінку встановити кнопки соціальних мереж, але не знаю, який файл для цього використовувати.
заздалегідь велике спасибі!

WPcafe.org:

Це залежить від теми і того, як організована функціональність портфоліо. Якщо використовуються окремі записи – то single.php, якщо окремі сторінки – то page.php

Євген:

В адмінці Wordpress я створюю новий запис або сторінку. І запис і сторінка мають назву і текстовий зміст. Зберігаю зміни. Тепер я їх бачу на своєму блозі, а також можу легко знайти через адмінку wordpress у розділах «Записи» та «Сторінки» та відредагувати їх.
Запитання 1: Де, в якому файлі знайти тексти створеного мною запису та сторінки у файлах блогу в папці wordpress та відредагувати їх за допомогою редактора Notepad++?
Запитання 2: Де, в якому файлі мені знайти тексти створеного мною запису та сторінки у файлах блогу та відредагувати їх через адмінку через меню «Зовнішній вигляд > редактор?»

WPcafe.org:

1. Весь вміст записів і сторінок зберігається у базі даних MySQL на сервері, а чи не у файлах теми чи файлах wordpress.
2. Виходячи з пункту 1 – ніде.

Євген:

Все гаразд, знайшов! Дякую!

Євген:

Огромное спасибо!

Андрій:

Я хочу поставити акордіон зображень за допомогою JQuery
Питання: вказано покроково, що куди вписувати. Не зрозумілий 1-й та 3-й пункти. Особливо третій. Куди треба вставляти код із 3-го пункту? Заздалегідь дякую за повну відповідь.

WPcafe.org:

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

Denis Pyanov:

Дітей підкажіть, будь ласка, стоїть тема Parabola і у неї є сторінка на головній нібито презентації. У цій презентації у мене відображаються фото, але щоб оптимізувати розмір тобто поставити розмір по ширині і довжині в редакторі коді, не можу знайти рядок куди вписувати ці параметри. Всі файли облазив в header.php і взагалі ні чого нема, в інших файлах згадуються теги $parabola навіть там, де має бути зображення. Може, у мене все закодовано? Можете, що-небудь порадити?

Дмитро Козлов:

Дякую, за зрозумілий виклад матеріалу.

Alex Sy:

Дякуємо за чітко викладену інформацію! Допомогло у роботі над сайтом

Yevgeniy Korobka:

Достатньо повна інформація і здається нічого не забули, крім того, куди ж таки «вставити цей код». Цей код має на увазі код зв'язування сторінки WordPress зі сторінкою Google+.

Андрій:

Доброго дня! Всі зміни в файлах видаляться під час оновлення теми. Краще використовувати дочірню тему та не боятися оновлень.

WPcafe.org:

Абсолютно вірно!

Анна:

Та й куди таки вставляти код для лічильника відвідувачів???
Почніть зі слів, код вставити на сторінці…..(шлях)….після слова….. .

Марія:

На жаль, не дуже розумію, як вставити код на головну сторінку, сайт 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?

WPcafe:

Tagline (слоган) краще вставляти у файл header.php

Додати коментар або відгук