Блог про WordPress, Yii, jQuery, JavaScript та CSS — Поради й приклади коду

Як в Yoast SEO програмно змінити назву та опис сайту

Плагін Yoast SEO для WordPress має досить хороший функціонал у плані доступних хуків, що дозволяє гнучко керувати даними для побудови власних мета-тегів.

У цій статті розглянемо приклад, коли нам потрібно для певної сторінки змінити title і meta-description сайту. Приклад простий і лише демонструє роботу самих хуків. Логіку ж ви можете реалізувати будь-яку. Наприклад, в одному зі своїх проєктів я будував динамічні заголовки та описи в залежності від вибраного регіону та доступних послуг. Це був каталог послуг, розбитий за країнами, областями, містами та списком категорій.

2019-01-27 Pavel WordPress КоментаріНемає Коментарів

Як у Yoast SEO відключити пагінацію в канонічних посиланнях категорій та тегів

Існує чудовий плагін Yoast SEO від Yoast у репозиторії WordPress. У ньому є досить багато функцій, які задовольняють більшість потреб не лише початківців, але й досвідчених SEO-фахівців.

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

2019-01-20 Pavel WordPress КоментаріНемає Коментарів

Як створити WordPress шорткод, що відображає дату

У сьогоднішньому уроці трохи повернемося до WordPress і розглянемо приклад розробки шорткода, який відображає дату у довільному форматі. Формат задається шаблоном функції PHP date().

2019-01-12 Pavel WordPress КоментаріНемає Коментарів

Як зробити кнопку «наверх» / to-top з плавним прокручуванням

Вітаю! У сьогоднішньому уроці розглянемо реалізацію простого коду кнопки «вгору» на HTML, jQuery та CSS.

Як завжди, починаємо з HTML-коду. Сьогодні він буде досить примітивним:

<div class="to-top" data-btn="toTop">
	&#10145;
</div>

де:
to-top — клас, за допомогою якого ми стилізуватимемо кнопку
data-btn="toTop" — дата-атрибут, за яким будемо відслідковувати події скролу та кліку по кнопці
(так, ми могли б це зробити і через клас, але тут вирішено використати data-атрибут)

2019-01-05 Pavel Web КоментаріНемає Коментарів

Як написати найпростіший скрипт степера

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

Особисто мені кілька разів доводилось реалізовувати подібний скрипт у своїх проектах. І я подумав: чому б не зробити зручну заготовку для майбутніх задач і не поділитися нею у блозі.

Підключаємо бібліотеки

Нам знадобляться:

Bootstrap — для зручного підключення шрифтів та стилізації кнопок
Font Awesome — для використання трьох іконок (стрілка назад, вгору та вперед)
Animate.css — для простої анімації (нічого не заважає використовувати чистий CSS)
jQuery — так, вже час відмовлятись і ловити події на чистому JS, але поки що так зручніше 🙂

А виглядає це так:

<link rel="stylesheet" href="../library/bootstrap-4/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../library/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../library/animate.css/animate.min.css">
<script src="../library/jquery/dist/jquery.min.js"></script>

2018-12-29 Pavel Web КоментаріНемає Коментарів