Відкрити меню

Стандартна фото-галерея на WordPress – заміна NextGEN Gallery by Photocrati та подібних плагінів

Вирішив я добити питання про зменшення кількості плагінів на WordPress-блозі і сьогодні ми розглянемо наступну “жертву” – це плагін NextGEN Gallery by Photocrati, який вже давно стоїть у мене на ресурсі та забирає левову частку від швидкості завантаження. Для чого цей плагін призначений – зрозуміло з самої назви, NextGEN Gallery допомагає організувати вивід фотогалерей на блозі, але, окрім краси та функціональності, додаток суттєво навантажує ресурс, тому я вирішив від нього позбавитись.

Галерея

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

Для початку я вирішив переглянути роботу NextGEN Gallery by Photocrati і подивитись, яке навантаження на блог дає цей плагін. Встановив P3 (Plugin Performance Profiler), проаналізував блог і побачив ось такий результат:

NextGEN Gallery by Photocrati

Може я помилився? Зробив аналіз ще раз, але ситуація не змінилась. Діаграма чітко показувала, що NextGEN Gallery забирає суттєвий відсоток від швидкості завантаження блогу.

NextGEN Gallery

Ну що ж … будемо від цього плагіна позбавлятися і використовуватимемо стандартні можливості WordPress для організації фотогалерей.

Зробити це надзвичайно легко і давайте я покажу все на прикладі статті про своє кошеня (чи то пак – все зовсім не кошеня), яку я переробив, використовуючи стандартну галерею двигунця. Отже, якщо ми хочемо додати в якусь статтю галерею, робимо наступне: ставимо курсор в те місце публікації, де наші фото повинні виводитись та натискаємо “Додати медіафайл”.

Вставити галерею

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

Вставка зображення

Але нам потрібно інше – обираємо “Створити галерею”, а потім тиснемо “Завантаження файлів”. Тепер ми перейшли в режим вставки не просто окремих зображень, а цілих фотогалерей і завантажуємо необхідні фото.

Вставка галереї

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

Вставили зображення

Все готово – тепер тиснемо кнопку “Створити нову галерею”.

Вставити галерею

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

Редагуємо галерею

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

Налаштування галереї

Коли все налаштовано – вставляємо галерею в статтю і отримуємо ось такий вид вставки. Не лякайтесь, все нормально, так і повинно виглядати.

Галерея

Публікуємо пост і давайте подивимось, що у нас вийшло. Тут я чітко бачу, що дві колонки мені не підходять, тому що відстань між фото надто велика.

Готова галерея

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

Редагуємо галерею

Обираю не дві, а чотири колонки, зберігаю зміни і дивлюсь на результат. Ось так набагато краще.

4 колонки в галереї

Все, здавалося б, чудово – але є одне але. Фотогалерея не реагувала на скрипт Lightbox, який ми підключали в попередній статті. Тут я хочу подякувати Ярославу (www.figli.pp.ua), який допоміг та надав функцію, котра цілком нормально дозволила нашій фотогалереї виводити зображення за допомогою Lightbox.

Цей код потрібно вставити в файл footer.php (або header.php), залежно від побудови Вашого шаблону.

Код

Оскільки ми тут ще раз вказали скрипту Lightbox, які зображення ми бажаємо збільшувати, то код, який ми вставляли в файл functions.php в попередній статті, а саме:

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

Після того, як я використав код від Ярослава – фото з галереї почали збільшуватись з ефектом Lightbox.

Піксель

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

Чудово. Тепер, якщо мені буде необхідно показати якісь зображення, я можу зробити це ефектно і без різних плагінів. Повторюсь, це не панацея, а просто варіант вирішення питання фотогалереї. Якщо у Вас фото-блог чи блог-портфоліо – можливо і доцільно використовувати окремий плагін галерей, але для мене, оскільки вебдайджест звичайний ресурс, такий стандартний варіант підходить ідеально.

В наступному пості я опублікую перелік плагінів в порівнянні з 08.11.2013, коли була остання стаття такого плану, тому що деякі я замінив кодом, деякі взагалі видалив і наразі назріла необхідність поділитись з Вами цими напрацюваннями.

Шануйтеся!

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 2, середній: 5,00 з 5)
Loading...
Обговорення: 12 коментарів
  1. Pavlofox сказав:

    Також не використовував це інструмент WordPress, тепер буду знати.
    Єдине, коли видаляти непотрібні плагіни, то часто залишаються їхні шорткоди в статтях. Потрібно вручну видаляти.
    В мене колись цитати в тексті були виділені різними кольорами, то потім довго чистив 🙂

    Відповіcти
    1. Олег Волощук сказав:

      Ну то вже таке, побічні ефекти 🙂

      Відповіcти
  2. Я якось завжди використовував стандартну фотогалерею. Вона цілком нормальна, а після маленьких «танців з бубном» взагалі гарною буде ❗

    Відповіcти
  3. Мирослав сказав:

    Завжди бачив в панелі, що є “створити галерею”, але шукав якісь плагіни… Дійсно класна функція.

    Відповіcти
    1. Олег Волощук сказав:

      Сам донедавна цією можливістю не користувався 🙂

      Відповіcти
  4. Андрій сказав:

    а як додати кнопку “скачати” під фото?

    Відповіcти
    1. Олег Волощук сказав:

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

      Відповіcти
  5. Игорь сказав:

    Жаль, что статья не попалась мне раньше. Я уже сделал как описано тут:
    isif-life.ru/blogovedenie/skript-yvelicheniya-izobrageniya-wordpress-bez-plaginov.html
    К сожалению не такой эффект как у вас.

    Відповіcти
    1. Олег Волощук сказав:

      Якщо не лінуєтесь – можете переробити, ніхто ж не змушує тільки якийсь один метод використовувати.

      Відповіcти
      1. Игорь сказав:

        Как время будет переделаю

        Відповіcти
  6. Игорь сказав:

    http://porjem.ru/astrakhanskij-zapovednik.html

    У меня почему то не работает (((

    Відповіcти
    1. Олег Волощук сказав:

      Зверніть увагу на URL до кожної картинки, він у Вас незрозуміло куди веде, думаю там зарита проблема.

      Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google