prettyPhoto — плагін для роботи із зображеннями у темах WordPress

prettyPhoto - це плагін для лайтбоксів, створений Stéphane Caron. Сьогодні ми навчимося встановлювати плагін у ваші теми WordPress.

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

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

Крок 1. Завантажуємо prettyPhoto та встановлюємо структуру директорій

Зайдіть на margins for-errors.com та скачайте плагін. Як тільки ви зробите це, ми створимо нову структуру директорій для плагіна, щоб полегшити собі життя. Для початку давайте видалимо деякі речі, які нам не потрібні. У папці зображень видаліть усе, крім папки prettyPhoto та її вмісту. У кореневій папці, видаліть xhr_response.html и index.html.

Тепер перенесіть файл jquery.prettyPhoto.js з папки js у кореневу папку плагіна та видаліть папку js. Нарешті, перейменуйте папку в prettyPhoto та завантажте її в директорію вашої теми. Найімовірніше, у вас вже є папка js або scripts, так що завантажте папку плагіна до неї. У цьому посібнику припустимо, що ви завантажили її в папку ваша-тема/js.

Крок 2. Додавання скриптів на вашу тему

Перш ніж ми завантажимо файли плагіна у вашу тему, нам потрібно завантажити jQuery. Ми будемо використовувати Google версію jQuery, використовуючи метод, представлений на "Digging into WordPress", так що давайте додамо фрагмент коду до нашої функції functions.php:

if (!is_admin()) {
	add_action("wp_enqueue_scripts", "register_scripts", 11);
}
function register_scripts() {
	wp_deregister_script('jquery');
	wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
	wp_enqueue_script('jquery');

	wp_register_script('prettyPhoto_script', (get_bloginfo('stylesheet_directory')."/js/prettyPhoto/jquery.prettyPhoto.js"));
	wp_enqueue_script('prettyPhoto_script');
	wp_register_script('customprettyPhoto_script', (get_bloginfo('stylesheet_directory')."/js/prettyPhoto/customprettyPhoto.js"));
	wp_enqueue_script('customprettyPhoto_script');
}

Можливо, ви хочете розглянути переваги та недоліки використання CDN для jQuery. WordPress дійсно поставляється з копією jQuery, але використання версії, розміщеної Google, може покращити продуктивність вашого сайту. Якщо ви автор тем, я рекомендував би використовувати варіант з фрагментом коду. Можете ознайомитись з обговоренням іншого керівництва, щоб ухвалити своє рішення.

Ви побачите, що ми додали ще один файл, який називається customprettyPhoto.js. З його допомогою ми будемо змушувати плагін добре працювати з нашими зображеннями у постах та ініціалізуємо його. Тож давайте створимо цей файл і помістимо його в нашу директорію prettyPhoto. Ок, давайте ініціалізуємо prettyPhoto:

<script>
  $(document).ready(function(){
    $("a[class^='prettyPhoto']").prettyPhoto();
  });
</script>

Нам буде потрібний рядок jQuery, щоб додати необхідний prettyPhoto клас prettyPhoto у теги-якорі, які оточують зображення наших постів. Оскільки ми говоримо про jQuery, давайте використовуємо його, щоб зробити те, що нам потрібно. Додайте поданий нижче код відразу після $ (документ) .ready (function () {, де ми переконуємось, що сторінка завантажена.

$('.entry-content a').has('img').addClass('prettyPhoto');

Замініть entry-content ім'ям класу або ID, який ви використовували для вмісту вашого поста і у вас буде додано клас для всіх посилань, які оточують ваші зображення постів. Якщо ви подивіться документацію по prettyPhoto, ви побачите, що в ній говориться використовувати атрибут отнале замість цього ми використовуємо клас. Це допомагає уникати помилок при валідації нашого HTML, оскільки атрибути отн, згідно з специфікацією HTML5, можуть мати лише певні значення.

Далі ми хочемо увімкнути можливість prettyPhoto – додавання описів. Нам потрібно подолати одну невелику перешкоду: prettyPhoto хоче, щоб ми додали атрибути назву у наші теги-якорі, які будуть використовуватися для опису; але WordPress додає заголовки до тегів зображень. Для того, щоб вирішити це питання, ми напишемо кілька рядків jQuery, які візьмуть назву з тега зображення та встановлять таку ж назву для тега-якоря, який оточує зображення.

$('.entry-content a img').click(function () {
	var desc = $(this).attr('title');
	$('.entry-content a').has('img').attr('title', desc);
});

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

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

Крок 3. Додавання CSS prettyPhoto на вашу тему

Нам потрібно додати CSS для prettyPhoto в тему. Повернемося до файлу functions.phpі додамо вгорі наступний рядок:

wp_enqueue_style('prettyPhoto', get_bloginfo('stylesheet_directory').'/js/prettyPhoto/css/prettyPhoto.css');

Оскільки ми зберегли зображення та CSSв їх початкових папках і в тому ж взаємозв'язку нам не потрібно переживати про те, що якісь зображення загубляться.

Крок 4. Підписи та заголовки

Давайте подивимося, як додати підписи та заголовки, які буде використовувати prettyPhoto. Подивіться на картинку, ви побачите зв'язок між альтернативним текстом зображення в пості та назвою посилання, яке ми можемо встановити при додаванні зображення до нашого посту або сторінки.

На завершення

Все, ми успішно додали prettyPhoto на нашу тему. Прочитайте документацію по плагіну, щоб дізнатися більше про його можливості та налаштування. PrettyPhoto може працювати не тільки із зображеннями, він також працює з відео, Аяксата іншим.

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

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/