Создаем сайт с фотографиями. Личный опыт
На неделе был заказ создать фотосайт на WordPress. Поделюсь некоторыми особенностями, которые могут понадобиться и вам при создании/заказе подобного. Есть одна фишка, которая вам понравится.
На данный момент не могу, к сожалению, дать ссылку на него, т.к. еще не проиндексировался. Чуть позже выложу в портфолио на сайте.
Сайт создавался "под ключ", т.е. не только создать шаблон, но и настроить все плагины, написать начальные тексты и наполнить. Дальше клиент сам по ситуации.
Сейчас же коснемся вещей, которые могут вам понадобиться.
Дизайн
Сразу был предоставлен psd-макет (формат Photoshop). Все разложено по слоям и верстать проще.
Макет вы можете найти бесплатно в сети (гуглим "free psd themplate"), либо заказываем у дизайнера.
Исходя из личного опыта и мнения - фон сайта должен быть темным (но не черным), а фон "тела" контента - светлым. Это чтобы фотографии выделялись и концентрировали внимание на себе.
В данном случае был свободный в доступе макет.
В принципе, подобная цветовая гамма подойдет для сайтов про Майнкрафт на Андроид, или любых других сайтах, где будет много фото.
Техническая составляющая
Теперь пройдемся по функционалу.
Адаптивная верстка - чтобы нормально смотрелось на мобилах и планшетах. В нынешних реалиях - это стандарт. Был вариант сделать отдельный мобильный шаблон, чтобы он подгружался при заходе с мобильной ОС, но решили отказаться от этого варианта.
Миниатюра рубрики. Как такое сделать я ранее не писал, но в сети найдете без проблем решение. Эта штука нужна была в шаблоне для Главной страницы (скрин выше макета видим, чтобы упростить навигацию по рубрикам фото). Кроме того, вторая миниатюра рубрики и второе название рубрики выводится здесь:
Это уже нюансы конкретно данного сайта и его юзабельности.
Ввиду того, что обычных записей на сайте нет (это одна из фишек, о которой ниже), то оптимизируются рубрики по Этой статье. Т.е. трафик собирается именно благодаря рубрикам и их оптимизации. Отдельные статьи появятся потом.
Т.к. сайт с фото, то логично привлекать социальный трафик! Для побуждения расшаривания записей была сделана такая штука. Только форма подписки не ставилась, а были выставлены эти кнопки социалок. Соответственно, в своем дизайне.
Плагины:
- Image Watermark - ставим на каждое фото опознавательный знак, откуда фото "стибрено". Настроек не много и все очень просто. Достаточно добавить своей фото с названием сайта.
- Responsive Lightbox - всплывающее фото с затемненным фоном. Вначале хотел поставить этот скрипт, но потребовались более гибкие настройки из админки. Тут настройки по дефолту. Дальше уже каждый сам для себя может выбрать эффект из представленных.
- WP Smush - для оптимизации загружаемых фото. О плагине и его настройках писал Петр.
- WP-PostRatings - для рейтинга каждого фото. На первом скрине вы могли видеть звездочки. Аккурат они выводятся этим плагином под WordPress. Главное не забудьте поставить галочку на Enable Google Rich Snippets?
Остальные плагины стандартные:
- Akismet - антиспам для комментариев.
- RusToLat - автоматический транслит ссылок.
- Yoast SEO - оптимизация страниц сайта, в том числе рубрик, о чем могли читать выше.
Фишка сайта
Ввиду особенностей сайта (много фото), то создавать под каждую фотографию запись не логично, а вывод галереей не позволяет дать каждой записи рейтинг, который потом можно сортировать фильтрами (или я еще не умею такого делать), то сделано так!
Для каждой рубрики собирается N-количество фоток (в данном случае 100+) и загружается пачкой через Медиафайлы:
А чтобы эта "пачка фоток" попадала автоматически в нужную рубрику - был написан код, который позволял выбирать в какую рубрику загружать очередную "пачку":
Под стрелкой выпадающий список с наименованием рубрик. Выбираем в которую "заливать" и автоматически создаются записи под этой рубрикой. При этом на странице рубрики фото представлены в миниатюрах, а по клику всплывают в лайтбоксе, т.е. нет перехода на запись. Их можно оценивать "звездочками".
Т.е. не нужно придумывать каждой фото текст, оптимизировать. Достаточно залить под нужную рубрику и все.
Индексация поисковиками записей
Тут на самом деле все просто.
Понятное дело, нам не нужно, чтобы записи с фото индексились поисковиками, т.к. там нет текста и meta seo полей. Поэтому просто прикроем их на индекс.
Это можно сделать Так (раскоментить нужно is_single()) или Так (признаком будет название рубрики в ЧПУ).
Прочее
Ввиду того, что это не сайт с художественным фото, где качество имеет важное значение, то не использовался Этот хак.
И по поводу наполнения сайта фото
Мне впервые пришлось таким заниматься - наполнять фото. Найти сами фотки не проблема - гугл в помощь. Парсер дольше настраивать в данном случае, да и одноразовая работа.
Пригодилась бесплатная программа AntiDupl.NET. При помощи нее легко найти дубли картинок/фото. Настроек минимум - пользы максимум!
Поделитесь своим опытом создания фотосайта. Буду рад узнать что я упустил из виду.
