Кращі сніппети (snippets) для WordPress

14. 01. 2021

Вибачте цей текст доступний тільки в “RU і “Англійська”.

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

Відносно CMS WordPress – використання фрагментів значно прискорить створення веб-сайту і допоможе wordpress-розробнику «не вигадувати колесо» при вирішенні своїх завдань.

У даній статті ми розглянемо кращі, на наш погляд, сніпети для CMS WordPress, які використовують розробники нашої компанії.

к содержанию ↑

Вивід get_template_part() через Shortcode

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

Як же вставити в готовий код створений слайдер щоб нічого не поламати? Звичайно – використавши shortcode. У WordPress репозиторії представлена ​​велика кількість різних слайдерів, які можна вбудувати в код, використовуючи конструкцію типу [slick-slider]. Але що, якщо ми хочемо використовувати саме свій кастомний слайдер, який ми так довго писали? Все дуже просто.

Реєструємо в functions.php новий шорт код, який буде повертати нам шаблон з нашим слайдером або ж будь-яким іншим, необхідним для вас фрагментом коду. Для цього ми використовуємо функцію – get_template_part (), потім отримуємо вміст поточного буфера і чистимо його функцією – ob_get_clean. Тепер в редакторі можемо викликати шорт код – [slider], який в свою чергу буде нам підтягувати шаблон slider-part.php. Не забуваємо що get_header() і get_footer() ми в цьому файлі не використовуємо!
пример слайдера oktenweb

к содержанию ↑

Стандартний цикл WordPress

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

пример цикла wordpress

к содержанию ↑

Цикл, який виводить записи з custom post type

Ви створили свій тип записів, тепер потрібно ці самі записи якось вивести. У цьому випадку на допомогу приходить wp_query {}. Це PHP клас, який отримує з бази даних записи, за тими параметрами, які ми йому дамо. Параметри ми вказуємо в масиві $ args.

к содержанию ↑

Вивід постів використовуючи Bootstrap 3 або 4

вывод постов при помощи bootstrap
Напевно, найбільш часто питання, яке задають на stackoverflow. Всі ми знаємо що в bootstrap 3-4 – колонки потрібно розбивати рядами – <div class=”row”></div>.

Проблема в тому, що стандартний цикл WordPress виведе нас всі пости, які є в базі та на цьому все. Нам же треба цей цикл якось розбити для того, щоб кожні 3 посади (уявімо що у нас сітка з 3-х колонок) розбивалися поруч (row). Для цього використовуємо wp_query. А тепер саме магічне і просте – ми просто обертаємо кожні 4 елементи циклу в <div class=”row”></div> використовуючи банальну конструкцію:

Тепер же нам треба закрити div. Закриваємо подібною конструкцією:

Для вірності – додаємо <div class=”clearfix”></div> для того щоб Bootstrap 3, який все ще на float, розбивав колонки рядами.

Готовий код:

к содержанию ↑

Підключення стилів і скриптів у WordPress

Є декілька варіантів підключення скриптів і стилів в темі. Розглянемо найпопулярніші:

к содержанию ↑

Підключення безпосередньо в <head>сторінки

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

Даний варіант буде працювати, але так робити неправильно, т. К. Деякі плагіни кешування типу WP Total Cache не зможуть побачити та обробити підключення таким чином стилі. 

к содержанию ↑

Підключення в functions.php

Розглянемо правильний варіант, який ми рекомендуємо використовувати в розробці. Ми будемо використовувати функцію, яка підключається в файлі functions.php :

wp_enqueue_style – функція, яка реєструє файл стилів

wp_enqueue_script – функція, яка реєструє js файли

Більш докладно про ці функції можна почитати в офіційної документації.

Після реєстрації стилів нам потрібно викликати нашу функцію. Для цього користуємося – add_action – wp_enqueue_scripts.

к содержанию ↑

Реєстрація та вивід меню в темі

Один з найбільш частих питань в пошуку Google від wordpress-розробників. Як вивести «меню»? Як його зареєструвати? Все дуже просто. Для початку додаємо функцію, яка створить потрібний нам меню і показати його в адмінці WordPress. У функції ми передаємо масив з тією кількістю «меню», які нам потрібні. У прикладі ми створимо одне меню – topmenu

Ми зареєстрували «меню», додали в адмін панель кілька пунктів цього «меню». Далі потрібно його десь вивести.

Висновок меню в адмін панель wordpress

У темі – ми вставляємо ось такий код використовуючи функцію wp_nav_menu. У масив ми передаємо – меню яке треба вивести + обертаємо в потрібні нам класи та теги.

 

esfirum меню сайта

к содержанию ↑

Як обмежити кількість символів в функції the_excerpt()

Функція the_excerpt () виводить весь контент, який ми помістимо в короткий зміст посту. Дуже часто потрібно в самому пості вивести весь його вміст, а наприклад, на сторінці категорії, де у нас сітка з постами – вивести тільки перші 20 символів, решта приховати під точками (…)

Для цього створюємо функцію в functions.php

вывод функции the excerpt

У неї ми передаємо наш – get_the_excerpt () і перевіряємо чи відповідає він вказаної кількості символів, додаємо 3 точки та повертаємо змінну з нашим контентом. Тепер в потрібному нам місці – викликаємо функцію і передаємо в неї то кількість символів які нам необхідні

к содержанию ↑

Додавання панелі з опціями використовуючи Advanced Custom Fields PRO

Дуже часто нам доводиться додавати для клієнта можливість змінювати контент, який використовується на всіх сторінках сайту. Наприклад: логотип, номери телефонів, e-mail в шапці і тд.

Для цього ми можемо використовувати стандартні мета поля WordPress, але я вважаю, що вони вкрай незручні, з непривабливим дизайном. Для цього найкраще використовувати плагін «ACF PRO» (докладніше про цей плагін можна прочитати в нашій статті «Топ 10 плагинів для WordPress»).

Для початку нам потрібно зареєструвати в functions.php нашу options panel.

Вказуємо в масиві заголовок сторінки, заголовок меню, складаючи.

Після цього в панелі плагін ACF додаємо нашу групу полів. Нижче на сторінці, вказуємо що вона ставитися до нашої options panel – theme settings.

приклад додавання в панелі acf custom fields групи полів

В адмінці у нас з’явиться пункт меню, який відповідає за нашу панель з настройками. Заповнюємо всі дані. У нашому випадку це логотип і телефон.

Далі нам потрібно вивести в темі, в потрібному нам місці поля, які ми створили. Робиться це просто:

<?php echo get_field(‘logo’, ‘options’) ?> – поверне нам url на зображення

<?php echo get_field(‘tel-1’, ‘options’) ?> – поверне нам текст, в даному випадку номер телефону, який ми вказали на сторінці з опціями.

вывод полей ACF custom fields в нужном месте

к содержанию ↑

Відключення всіх оновлень WordPress

Бувають випадки, коли потрібно убезпечити клієнта від непотрібних дій в адміністративній панелі. Якщо у клієнта є повний доступ до адмінки і до всіх її розділах, з’являється небезпека, що людина не знаючи специфіку CMS WordPress оновлює всі плагіни і саме ядро. В цьому випадку можуть виникати конфлікти нових версій плагінів і самого ядра WP. Що б уникнути таких проблем потрібно вимикати поновлення. Робиться це досить просто – ми додаємо кілька фільтрів в файл functions.php

отключение wordpress updates

к содержанию ↑

Як зареєструвати Custom post type

Вище ми розглядали як вивести записи з custom post type. Тепер ми розглянемо, як же створити користувальницький тип записів, щоб він відображався в адмін панелі.

Завдання така: в WordPress існують Записи та Сторінки – зазвичай записи використовуються для Новин або Блогу. Сторінки – для статичних сторінок. Припустимо нам потрібно створити окремий тип записів – Товари. Для цього заходимо в файл functions.php і реєструємо нашу запис користувача

Не лякайтеся величезній кількості параметрів. В основному це переклади і заголовки пунктів меню типу “Додати товар”, “Всі товари” і тп.

Опис кожного з параметрів масиву – ви можете знайти в офіційній документації WordPress

https://codex.wordpress.org/Function_Reference/register_post_type

Уважно вивчіть параметри масиву $ args. Після реєстрації користувача типу ви побачите розділ “Товари” в вашому меню.

Будемо вдячні за ваші коментарі та питання, це надихне нас на написання нових цікавих статей!

Поділитися:

Оставить комментарий

100

Послуги веб-студії

Наша веб-студія 5 років спеціалізується на розробці сайтів, мобільних додатків та інтернет-маркетингу. Створимо сайт виходячи з ваших потреб та побажань.
error: Alert: Content is protected !!