mojwp.ru
Назад

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

Опубликовано: 25.10.2015
9
95

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

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

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

Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.

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

Дизайн

Сразу был предоставлен 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. При помощи нее легко найти дубли картинок/фото. Настроек минимум — пользы максимум!

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

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

Давай, оцени статью!

Автор:
Виталий
Поделиться
Комментарии:
  • seoonly.ru
    Опубликовано: 25.10.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 25.10.2015 Ответить на сообщение

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

  • Олег
    Опубликовано: 26.10.2015 Ответить на сообщение

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

  • setter
    Опубликовано: 26.10.2015 Ответить на сообщение

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

  • Надежда
    Опубликовано: 26.10.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 26.10.2015 Ответить на сообщение

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

  • Надежда
    Опубликовано: 26.10.2015 Ответить на сообщение

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

  • Андрей
    Опубликовано: 29.10.2015 Ответить на сообщение

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

  • Павлуха
    Опубликовано: 10.11.2015 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.