Создаем сайт с фотографиями. Личный опыт

На неделе был заказ создать фотосайт на WordPress. Поделюсь некоторыми особенностями, которые могут понадобиться и вам при создании/заказе подобного. Есть одна фишка, которая вам понравится.

На данный момент не могу, к сожалению, дать ссылку на него, т.к. еще не проиндексировался. Чуть позже выложу в портфолио на сайте.

Сайт создавался "под ключ", т.е. не только создать шаблон, но и настроить все плагины, написать начальные тексты и наполнить. Дальше клиент сам по ситуации.

Сейчас же коснемся вещей, которые могут вам понадобиться.

Дизайн

Сразу был предоставлен psd-макет (формат Photoshop). Все разложено по слоям и верстать проще.

Макет вы можете найти бесплатно в сети (гуглим "free psd themplate"), либо заказываем у дизайнера.

Исходя из личного опыта и мнения - фон сайта должен быть темным (но не черным), а фон "тела" контента - светлым. Это чтобы фотографии выделялись и концентрировали внимание на себе.

как создать фотосайт

Клик для увеличения

В данном случае был свободный в доступе макет.

В принципе, подобная цветовая гамма подойдет для сайтов про Майнкрафт на Андроид, или любых других сайтах, где будет много фото.

Техническая составляющая

Теперь пройдемся по функционалу.

Адаптивная верстка - чтобы нормально смотрелось на мобилах и планшетах. В нынешних реалиях - это стандарт. Был вариант сделать отдельный мобильный шаблон, чтобы он подгружался при заходе с мобильной ОС, но решили отказаться от этого варианта.

Миниатюра рубрики. Как такое сделать я ранее не писал, но в сети найдете без проблем решение. Эта штука нужна была в шаблоне для Главной страницы (скрин выше макета видим, чтобы упростить навигацию по рубрикам фото). Кроме того, вторая миниатюра рубрики и второе название рубрики выводится здесь:

Screenshot_1

Это уже нюансы конкретно данного сайта и его юзабельности.

Ввиду того, что обычных записей на сайте нет (это одна из фишек, о которой ниже), то оптимизируются рубрики по Этой статье. Т.е. трафик собирается именно благодаря рубрикам и их оптимизации. Отдельные статьи появятся потом.

Т.к. сайт с фото, то логично привлекать социальный трафик! Для побуждения расшаривания записей была сделана такая штука. Только форма подписки не ставилась, а были выставлены эти кнопки социалок. Соответственно, в своем дизайне.

Плагины:

  • Image Watermark - ставим на каждое фото опознавательный знак, откуда фото "стибрено". Настроек не много и все очень просто. Достаточно добавить своей фото с названием сайта.
Клик для увеличения

Клик для увеличения

  • Responsive Lightbox - всплывающее фото с затемненным фоном. Вначале хотел поставить этот скрипт, но потребовались более гибкие настройки из админки. Тут настройки по дефолту. Дальше уже каждый сам для себя может выбрать эффект из представленных.
  • WP Smush - для оптимизации загружаемых фото. О плагине и его настройках писал Петр.
  • WP-PostRatings - для рейтинга каждого фото. На первом скрине вы могли видеть звездочки. Аккурат они выводятся этим плагином под WordPress. Главное не забудьте поставить галочку на Enable Google Rich Snippets?

Screenshot_3

Остальные плагины стандартные:

  • Akismet - антиспам для комментариев.
  • RusToLat - автоматический транслит ссылок.
  • Yoast SEO - оптимизация страниц сайта, в том числе рубрик, о чем могли читать выше.

Фишка сайта

Ввиду особенностей сайта (много фото), то создавать под каждую фотографию запись не логично, а вывод галереей не позволяет дать каждой записи рейтинг, который потом можно сортировать фильтрами (или я еще не умею такого делать), то сделано так!

Для каждой рубрики собирается N-количество фоток (в данном случае 100+) и загружается пачкой через Медиафайлы:

Screenshot_4

А чтобы эта "пачка фоток" попадала автоматически в нужную рубрику - был написан код, который позволял выбирать в какую рубрику загружать очередную "пачку":

Клик для увеличения

Клик для увеличения

Под стрелкой выпадающий список с наименованием рубрик. Выбираем в которую "заливать" и автоматически создаются записи под этой рубрикой. При этом на странице рубрики фото представлены в миниатюрах, а по клику всплывают в лайтбоксе, т.е. нет перехода на запись. Их можно оценивать "звездочками".

Т.е. не нужно придумывать каждой фото текст, оптимизировать. Достаточно залить под нужную рубрику и все.

Индексация поисковиками записей

Тут на самом деле все просто.

Понятное дело, нам не нужно, чтобы записи с фото индексились поисковиками, т.к. там нет текста и meta seo полей. Поэтому просто прикроем их на индекс.

Это можно сделать Так (раскоментить нужно is_single()) или Так (признаком будет название рубрики в ЧПУ).

Прочее

Ввиду того, что это не сайт с художественным фото, где качество имеет важное значение, то не использовался Этот хак.

И по поводу наполнения сайта фото

Мне впервые пришлось таким заниматься - наполнять фото. Найти сами фотки не проблема - гугл в помощь. Парсер дольше настраивать в данном случае, да и одноразовая работа.

Пригодилась бесплатная программа AntiDupl.NET. При помощи нее легко найти дубли картинок/фото. Настроек минимум - пользы максимум!

Поделитесь своим опытом создания фотосайта. Буду рад узнать что я упустил из виду.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 9 комментариев
  1. seoonly.ru (28 комм.) says:
    http://seoonly.ru/

    Вопрос в том пойдет ли траф с я и гугл картинок)

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Насколько я понимаю, суть не в трафике на конкретную картинку, т.к. они из выдачи, а оптимизация рубрик и соц. трафик.

  2. Олег (1 комм.) says:

    Насколько я понимаю, не стоит отвечать сеоонли, это у него просто спорт

  3. setter (1 комм.) says:
    http://set-seo.ru

    Привет, Виталик. Я Никифор и я алкоголик. А пост интересный. Взял на заметку. Спасибо.

  4. Надежда (18 комм.) says:
    http://vkpluss.ru/

    подскажите пжста где AntiDupl.NET скачать, чтобы без вирусов, может у вас на яндекс-диске есть?

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      На softodrom.ru качал. Там всегда норм софт, без вирусов

  5. Надежда (18 комм.) says:
    http://vkpluss.ru/

    Надеюсь вирусов нет, спасибо

  6. Андрей (129 комм.) says:
    http://zarobitok.ru/

    Нечто идентичное делал, использовал плагин nextgen gallery - вывод галереи фото через шорткод, в плагине уже прописано (накладка водяного знака, всплывающее фото и пагинация).
    За плагин WP-PostRatings благодарю Виталий.

  7. Павлуха (2 комм.) says:
    http://pavluha.net/

    Интересный вариант работать с рубриками, как со страницами фотографий. Уже довольно давно хочу сделать картиночный сайт, но со структурой определиться не могу. Скорее всего, я всё же оставлю привычные роли рубрик и постов: WP достаточно гибкий движок, чтобы обойтись без подмены сущностей. Например, можно также заливать фотки пачкой для созданного поста, и не обязательно их даже в пост вставлять - можно сделать скрипт вывода приаттаченных изображений со звёздочками и прочими свистелками.

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 14.57MB | MySQL:75 | 0,399sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html