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

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

Іноді хочеться щось змінити WordPress. Це може бути елемент дизайну, наприклад, розміщення соціальних посилань на мобільних пристроях, або основна функція, наприклад коментарі, або функція монетизації типу розміщення реклами. Часто рішенням є використання плагіна, але якщо все, що потрібно, це зробити одне редагування, навіщо морочитися з усіма цими проблемами? Натомість доцільніше використовувати фрагмент (сніппет) коду.

Як додати фрагмент коду на сайт WordPress

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

Що таке фрагмент коду?

Для WordPress фрагмент коду це просто код PHP, JS, CSS або HTML. Він використовується для редагування функцій WordPress за умовчанням, коли замість додавання нового файлу або установки плагіна можна додати кілька рядків коду.

Що робить фрагмент коду

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

Приклади, що можна зробити за допомогою сніпетів:

  • Відображення поточного року за допомогою короткого коду, щоб не оновлювати щорічно вказаний у ваших авторських правах рік.
  • Відредагувати кількість повідомлень, які відображаються в результатах пошуку, щоб підтримувати порядок на сайті.
  • Налаштувати рядок меню адміністратора у серверній частині WordPress для відображення певних пунктів меню, швидких посилань або іншого вітального повідомлення.
  • Вимкнути функції WordPress за промовчанням, такі як вбудовування або відкладене завантаження зображень.
  • Керувати своїм RSS-каналом, за винятком певних категорій, додаючи зображення, відкладаючи публікації та багато іншого.

Як вручну додати фрагменти коду WordPress

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

Створіть резервну копію сайту

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

Створити дочірню тему

Слід уникати додавання власного коду у вихідні файли теми WordPress. Це пов'язано з тим, що неминуче потрібно оновити тему WordPress, після чого нові оновлені файли перевизначать старі файли, включаючи власний код.

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

Додати файли

Щоб створити дочірню тему, знадобиться редактор коду, а також FTP доступ до вашого сайту WordPress. Спочатку створіть нову папку теми у розділі wp-content/themes. Для цього завантажте файл style.css, який є таблицею стилів дочірньої теми (для редагування дизайну). А потім завантажте файл function.php, який повинен включати код для виклику таблиці стилів з батьківської теми.

Як тільки дочірня тема буде готова, можете її активувати на своєму сайті WordPress у розділі «Зовнішній вигляд» > «Теми».

Редагувати файли

Приклад ручного додавання фрагмента коду WordPress

Тепер відкрийте файл function.php дочірньої теми в редакторі коду або в розділі «Зовнішній вигляд WordPress» > «Редактор файлів теми» та додати свої фрагменти. Більшість сніпетів додаються до файлу function.php (хоча є й винятки).

Просто дотримуйтесь інструкцій із джерела, яке використовуєте, щоб переконатися, що ви правильно копіюєте, вставляєте та редагуєте код фрагмента. Єдине, що ми пропонуємо - дотримуватися авторитетних джерел (WPCode, WPMUdev, WPBeginner, Elegant Themes, Tuts+, Elementor та інших). Таким чином, використовувані сніпети з більшою ймовірністю будуть правильними та безпечними.

Звичайно, це дуже поверхове керівництво – оскільки ми не можемо пояснити, як вручну додавати, редагувати та керувати всіма можливими фрагментами для WordPress.

Але ми можемо запропонувати найкращий і більш простий метод додавання коду WordPress.

Як легко додавати фрагменти коду WordPress за допомогою WPCode

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

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

Дивіться також:

Як краще - додати свій код у functions.php на сайті WordPress.

Встановіть безкоштовний плагін WPCode

Для початку необхідно встановити плагін. Це дуже просто, оскільки WPCode пропонує безкоштовну версію на панелі керування WordPress. Просто перейдіть до «Плагіни» > «Додати новий» і знайдіть «WPCode».

Знайдіть та встановіть WPCode

Далі натисніть кнопку Встановити, а потім Активувати плагін.

Додати код

Додати новий фрагмент

Щоб додати власний код, натисніть на посилання порожній фрагмент на екрані + Додати фрагмент. Відкриється редактор, до якого потрібно додати рядки коду. Оскільки ви починаєте з порожнього сніпета, жодна з налаштувань не буде встановлена/вибрана.

Щоб використовувати існуючий фрагмент з бібліотеки коду, скористайтесь полем пошуку. У безкоштовній версії плагіна доступно 59 безкоштовних сніпетів, а в Pro їх понад 100+. Для існуючого фрагмента вибрано параметри за замовчуванням, які можна змінити перед збереженням та активацією.

Повідомлення WordPress «Привіт» за замовчуванням

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

WPCode Зміна фрагменту тексту Howdy

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

Змінити налаштування сніпету

Код попереднього перегляду WPCode

Відкриється редактор та налаштуваннями за промовчанням. У цьому випадку фрагмент вже має опис заголовкатип коду попередньо встановлений на PHP, а сам попередній перегляд коду створено для зміни "Привіт" на "Ласкаво просимо". Якщо ви хочете, щоб «Привіт» сказав ще щось, просто відредагуйте код у рядку 4.

Налаштування вставки фрагмента WPCode

Під попереднім переглядом коду показано правила вставки. Оскільки ми вибрали готовий для використання варіант, він уже вибраний. Цей фрагмент встановлений на «Автоматична вставка», але є опція для короткого коду, якщо потрібно вставити код на певні сторінки або в публікацію. А для розташування встановлено значення «Тільки адміністратор», оскільки наш сніпет призначений для редагування слова «Привіт» у бекенді (або адміністраторі) сайту WordPress.

Інші варіанти розташування в безкоштовній версії включають:

  • Глобально: запуск скрізь, тільки інтерфейс, тільки адміністратор, умовна логіка інтерфейсу, заголовок всього сайту, тіло всього сайту, нижній колонтитул всього сайту.
  • Конкретно для сторінки: до/після публікації, до/після контенту, до/після абзацу, до/після уривка між публікаціями.

А версія Pro додає набагато більше місць для фрагментів PHP, Anywhere (CSS Selector), WooCommerce, Easy Digital Downloads та MemberPress.

Налаштування типу пристрою фрагмента WPCode
далі йде тип пристрою. Для багатьох фрагментів, включаючи наведений у прикладі, найкраще підійде варіант «Будь-який тип пристрою». Але якщо ви додаєте власний сніпет для відключення форми коментарів на невеликих пристроях, можливо, вам захочеться налаштувати його так, щоб він завантажувався тільки на мобільних пристроях.

Налаштування логіки фрагмента WPCode

WPCode також пропонує можливість розумної умовної логіки, щоб додавати конкретніші кваліфікатори для завантаження коду. Наприклад, можливо, ви хочете, щоб "Привіт" вимовляв різні мережеві повідомлення залежно від ролі користувача. Тоді можна додати умовну логіку, щоб версія "Ласкаво просимо" відображалася тільки для ваших адміністраторів, а потім додати інші варіанти для інших відповідних ролей користувачів.

Налаштування базової інформації фрагмента WPCode

Трохи нижче ви побачите розділ для редагування коду, який доступний лише в Pro, а потім основну інформацію для редагованого сніпета. Сюди входять теги, які можна використовувати для впорядкування сніпетів, пріоритет (він визначає порядок завантаження сніпетів) та примітку про призначення коду.

Після завершення роботи натисніть синю кнопку у верхньому правому кутку екрана, щоб зберегти/оновити результат.

Активуйте код

Фрагмент активації WPCode

Перейдіть до головного пункту меню «Фрагменти коду» — тут усі сніпети знаходяться у зручному вигляді списку.

Щоб активувати його, натисніть перемикач в останній колонці. Тепер оновіть або перегляньте сторінку, код має набути чинності. Оскільки в нашому прикладі редагується повідомлення адміністратора, ми оновили сторінку та побачили, що «Ласкаво просимо» правильно відображається у правому верхньому кутку.

Інші можливості плагіна

Коротко розглянемо кілька інших функцій плагіна, які можуть стати в нагоді.

Глобальний верхній та нижній колонтитули WPCode

Глобальний верхній та нижній колонтитули дозволяють швидко додати скрипт на веб-сайт. Це надзвичайно корисно при включенні сторонніх служб або додаванні налаштувань на сайт. Наприклад, якщо хочете включити Google Analytics на базі WordPress, потрібно буде додати код відстеження файл header.php. Замість редагування файлу можна просто вставити сюди код відстеження.

Генератори фрагментів користувача WPCode

Подібно до бібліотеки фрагментів коду, WPCode Generator надає заздалегідь написаний код, який можна редагувати відповідно до потреб сайту. Різниця в тому, що сніпети генератора вимагають трохи більшого налаштування, оскільки вони трохи складніші (наприклад, реєстрація нових таблиць стилів, додавання типів повідомлень та таксономій або навіть планування завдань cron для конкретних завдань).

Інструменти WPCode для імпорту та експорту

На сторінці «Інструменти» представлені параметри для імпорту фрагментів з іншого джерела (або іншого плагіна), а також експорту поточних фрагментів сайту.

А в розділі «Налаштування» знаходяться загальні параметри підключення до бібліотеки WPCode (для доступу до всіх 59 безкоштовних варіантів), включення журналів помилок та додавання ліцензійного ключа, якщо ви вирішите перейти на Pro в майбутньому.

Сподіваємося, цей посібник був корисним, і тепер зможете почуватися впевнено при додаванні фрагментів коду на сайт WordPress. Ми твердо переконані, що новачкам краще використовувати спеціалізований плагін. Це значно спрощує додавання коду та управління ним, особливо завдяки тому, що під рукою є готова до використання бібліотека готових варіантів.

Джерело: wpexplorer.com

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

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

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