Як створити галерею фотоальбому в WordPress без плагінів

  1. Те, що ми намагаємося зробити:
  2. Як ми збираємося зробити це?
  3. Створити фотоальбом галерея

У минулому, ми показали вам, як додати галерею в WordPress з ефектом лайтбокс. Ця стаття охоплює тільки поверхнево функціональності WordPress. Останнім часом у нас був клієнт, який хотів створити фотогалерею, організовану в щомісячний альбом. Вони хотіли, щоб користувач міг натиснути на альбомі фотографію, і побачити всі пости, перераховані в альбомі цього місяця. Кожна фотографія повинна мати свою власну окрему сторінку з інформацією про фотографа і їх URL. Зазвичай люди будуть вдаватися до плагінів, таким як NextGen Gallery або інший, щоб зробити що - щось на зразок цього. Ми хотіли уникнути використання стороннього плагіна, тому ми вирішили використовувати ядро-функціональні можливості, які WordPress пропонує. У цій статті ми покажемо вам, як створити щомісячний фотоальбом галерею в WordPress без плагінів.

Примітка: Це відносно просунутий підручник, який приносить багато концепцій WordPress. Ви повинні мати чітке знання WordPress і HTML / CSS, щоб зрозуміти це.

Оновлення: Ми написали новий підручник, який використовує плагін, Envira Gallery, так що це супер швидкий і простий у використанні. Якщо ви новачок або просто не хочете мати справу з кодом, то краще вам прочитати цей підручник.

Те, що ми намагаємося зробити:

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

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

Ідея полягала в тому, щоб мати один альбом на місяць

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

Якщо користувач натискає на фотографію, то вони будуть переадресовані до одній сторінці фотографії, де вони будуть бачити назву фото. Ім'я фотографа і URL свого сайту.

Як ми збираємося зробити це?

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

Створити фотоальбом галерея

Перше, що ви повинні зробити, це створити сайт-специфічний php-файл (або навіть конкретний php-файл проекту).

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

Наступне, що вам потрібно зробити, це зареєструвати додаткові розміри зображень в WordPress для відображення сітки.

Приблизно, буде виглядати так:

add_image_size ( 'album-grid', 225, 150, true);

Після додаткових розмірів зображень, необхідно додати додаткові поля в медіа-завантажувач. Це дозволить вам додати ім'я фотографа і їх URL при завантаженні кожного зображення.

Як додати додаткові поля в WordPress Медіа Uploader.

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

Припустимо, що ваш тип поста був названий альбоми. Таким чином, ви створите файл шаблону з ім'ям archive -albums.php. Вставити коди заголовків, коди колонтитула бічній панелі і інші елементи дизайну, які ви хочете. Створити цикл поста. Усередині цього циклу, ми збираємося, щоб відобразити всі додатки, за винятком ескізу, яким буде посилання на одній сторінці зображення. Ми також додамо ознаки поста мініатюру обкладинки альбому (фото) окремо і зв'язати цю сторінку з постом (сторінки альбому).

Ми вирішили зробити стиль зображення сітки за допомогою елемента списку. Код виглядає наступним чином:

<Li class = "album-grid"> <a href="<?php the_permalink(); ?&gt; "title =" <? Php the_title ();?&gt; "> <? Php the_post_thumbnail ( 'album-grid') ; ?&gt; </a> </ li> <? Php if ($ post-> post_type == 'albums' && $ post-> post_status == 'publish') {$ attachments = get_posts (array ( 'post_type' => 'attachment', 'posts_per_page' => -1, 'post_parent' => $ post-> ID, 'exclude' => get_post_thumbnail_id ())); if ($ attachments) {foreach ($ attachments as $ attachment) {$ class = "post-attachment mime-". sanitize_title ($ attachment-> post_mime_type); $ Title = wp_get_attachment_link ($ attachment-> ID, 'album-grid', true); echo '<li class = "'. $ class. 'album-grid">'. $ Title. '&lt;/ Li>'; }}}?>

Джерело: Як отримати всі вкладення за винятком рекомендованого зображення.

Основний стиль CSS, що вам дійсно потрібно турбуватися про те, це є клас .album-grid.

.album-grid {width: 225px; height: 150px; float: left; list-style: none; list-style-type: none; margin: 0 18px 30px 0px;}

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

Наступне, що вам потрібно зробити, це створити шаблон одного вкладення. Це буде сторінка, на якій користувач буде переглядати кожне окреме зображення. Вони будуть бачити назву зображення, ім'я фотографа і URL тут. Ви можете прочитати наш підручник про те, як створити єдиний прикріплений шаблон в WordPress.

Тепер єдине, що залишилося в списку, є створення окремої сторінки альбому. Знову ж таки за умови, що ваш тип поста називається альбоми, вам потрібно буде створити файл single -albums.php. Скопіюйте всі верхні колонтитули, бічну панель, або будь-які інші елементи дизайну, які ви хочете.

В елементі контуру в основному, роблять те ж саме, що ми робили з шаблоном архів-альбомів. Перед тим, як додати зображення і ознаки в сітку вкладень, вам потрібно додати назву альбому та опис. Що можна зробити, просто додавши код на зразок цього:

<H1> <? Php the_title (); ?&gt; </ H1> <div class = "entry-content"> <? Php the_content (); ?> </ Div> // Insert grid code below this line

Ми зробили. Ми тільки що створили щомісячний фотоальбом галерею в WordPress без використання плагіна. Дайте нам знати, якщо у вас є які-небудь питання.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

Як ми збираємося зробити це?
Php the_permalink(); ?
Gt; "title =" <?
Php the_title ();?
Gt; "> <?
Php the_post_thumbnail ( 'album-grid') ; ?
Gt; </a> </ li> <?
Lt;/ Li>'; }}}?
Php the_title (); ?
Gt; </ H1> <div class = "entry-content"> <?