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

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

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

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

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

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

Крок 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 — плагін для роботи із зображеннями у темах WordPress Давайте подивимося, як додати підписи та заголовки, які буде використовувати prettyPhoto. Подивіться на картинку, ви побачите зв'язок між альтернативним текстом зображення в пості та назвою посилання, яке ми можемо встановити при додаванні зображення до нашого посту або сторінки.

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

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

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

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

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

Ірина:

Олександре! Так і хочеться напроситися до вас учні. А як ви такі гарні фото робите? Класний ефект і поки мало хто має, ніби плівка зверху — навчіть, будь ласка

Artemiusfolio:

Ось на цьому кроці - "Замініть entry-content ім'ям класу або ID, який ви використовували для вмісту вашого поста і у вас буде доданий клас для всіх посилань, які оточують ваші зображення постів." — якщо у мене тема TwentyEleven — не підкажіть, що саме треба прописати, замість — entry-content?

колямба:

Подивися вихідний код своїх посилань у пості та скопіюй звідти клас. Це може бути клас postcontent або щось схоже, на кшталт блаблабла-postcontent. Після цього підстав клас замість
entry-content у файл customprettyPhoto.js

Andrei Gutu:

У вас там клас entry-content, у всіх дефолтних темах WP прийнято однакове ім'я класів, і подібна структура основних елементів.

Жанна:

Наведено приклад підключення jQuery для плагіна prettyPhoto. Як підключити jQuery для інших плагінів для створення галереї. Мене цікавить плагін NextGEN Gallery, мабуть через те, що jQuery не підключений цей плагін працює не коректно

WordPresso:

Всі скрипти підключаються аналогічно через php виклик wp_enqueue_script. За аналогією з тим, як зазначено в цьому уроці. Цей виклик можна помістити як у файлі header.php так і у functions.php.

Andrei Gutu:

Раджу використати конструкцію jQuery(document).ready(function($){ //ваш_код}); замість використовує $(document).ready() etc. Тому що jquery тепер йде у стандартній поставці WP, але за кодексом підключати його можна тільки в режимі no conflict. Можна використовувати і варіант з Google CDN, але кодекс краще не порушувати, раптом ви встановите плагін, який використовує іншу версію jquery або mootools. У вас тоді виникнуть деякі труднощі, а послухавшись порад із кодексу — ви їх уникнете.

Andrei Gutu:

Велике спасибі, завдяки вам вибрав для своєї теми теж prettyPhoto, адже планував встановити старий lightbox. Ви дуже просто і зрозуміло пояснили, як підключати prettyPhoto, за що величезне спасибі. При додаванні js я додав масив залежностей для обох скриптів, це дуже зручна фіча WP.

Діна:

Олександре, дякую за статтю! Дуже сподобався ваш блог, тепер він у мене в закладках. З вашою допомогою, у мене все вийшло, АЛЕ немає переходу між зображеннями. Як ви вважаєте, у чому може бути проблема? Допоможіть, будь ласка, а то другу добу б'юся, а результату нуль (((((

WordPresso:

Якщо не вдається розібратися з цим плагіном, спробуйте FancyBox for WordPress - там набагато простіше все налаштовується і працює прямо "з коробки".

Діна:

Все одно не виходить ((( Чи то тема кострубата, чи то руки… Різні лайтбокси поперепробувала — нічого не оре… Плюнула, набридло на одному місці тупцювати, може якось потім повернуся до цього, але за пораду все одно дякую).

Prevedovich:

у мене після встановлення jetpack (я зробив такий висновок) перестали взагалі працювати будь-які галереї та каруселі. а після виправлення файлу каруселі злетіли форматування та кодування ТІЛЬКИ 404.php. Jetpack це ще той глюк!
Це я до того, що якщо вже був цей «пак», то він може бути причиною

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