Тема Дня »

Обновил тему WordPress на этом блоге. Старый вариант Arthemii меня устраивал во всем, кроме моральной древности. Функциональность тем значительно увеличилась с 2008 года.
Проблема замены состояла в том, что старая тема на моём блоке постоянно допиливалась в ручную, и перенести все созданное в новую тему было практически невозможно. Но пришлось чем-то жертвовать.
Новая Arthemia была скачена, максимально отстроена и установлена.

Читать полностью »
Партнерский интернет-магазин

Создание, оптимизация и продвижение интернет-магазина.

Создать форум

Как создать “с нуля” и сделать популярным форум. Полезно, интересно и подробно о phpbb3.

WordPress

Рекомендации по настройке и оптимизации WordPress. Плагины, темы, шаблоны.

Дайджест блогосферы

Каждую неделю публикую подборку из пяти наиболее интересных статей.

Конкурсы

Статьи, написанные для участия в различных блоггерских конкурсах.

Главная » Партнерский интернет-магазин

Дни 9 и 10. Оптимизируем страницу товара магазина WordPress.

Добавлено на 26.10.2012 – 10:58 пп34 Комментарии

страница товара WordPress

Настройку внешнего вида интернет магазина начнем со страницы товара. В установленном нами магазине WordPress этой страницей является страница записи.

Цель страницы товара: обеспечить добавление товара в Корзину, максимально большим количеством пользователей.

На ненастроенной странице находятся следующие блоки:

  1. Название товара (название записи WordPress);
  2. Сведения о дате публикации записи и её авторе;
  3. Форма заказа (цена, количество, кнопка купить);
  4. Изображение товара;
  5. Описание товара.

структура страницы товара

Для оптимизации я предлагаю сделать следующее:

  1. Удалить информацию о дате записи и авторе;
  2. Расположить форму заказа рядом (справа, на одном уровне) с изображением;
  3. Отредактировать описание товара;
  4. Добавить рейтинг товара;
  5. Возможность рассказать о товаре в социальных сетях;
  6. Добавление отзывов.

1. Удаляем информацию о дате публикации и авторе записи.

Так как мы создаем не блог, а интернет-магазин, данные о дате и авторе абсолютно лишние. Удалить их можно отредактировав файл темы.

Для темы “Twenty Ten” редактируемый файл — loop-single.php. Нужно обращать внимание на код, идущий после функции название записи the_title() и перед контентом the_content().

дата и автор записи

Просто удалить выделенный код.

2. Сдвигаем форму заказа.

Положение формы заказа определяется в файле goodbody_shop/css/site-style.css плагина Goodbody. Меню “Плагины — Редактор”.

плагин Goodbody

Запомните этот файл. В нем прописано множество настроек и мы еще будем его редактировать.

Форма заказа описана стилем div.buy_button.

форма заказа WordPress

Сместить div вправо поможет свойство float: right. Точное положение формы заказа на странице отрегулируем значениями свойства margin. А выравнивание кнопки “Купить” свойством text-align.

Окончательный вариант div.buy_button:

готовый стиль формы заказа

3. Редактирование описания товара.

При редактировании описания товара (отредактировать, а иногда и переписать заново нужно описания всех товаров) учитываем три важнейших момента:

  1. Создание положительного образа товара и желания его приобрести;
  2. Ответы на возможные вопросы покупателя;
  3. SEO-оптимизацию страницы.

Перед редактированием описания желательно установить плагин All in One SEO Pack, что бы сразу задать мета-теги.

Вот мой вариант редактирования описания.

описание товара

4. Рейтинг товара интернет-магазина.

Для организации рейтинга товаров подойдет плагин рейтинга записей WordPress — GD Star Rating. Я настроил звездочки.

рейтинг товаров интернет-магазин

5. Возможность рассказать о товаре в социальных сетях.

Подойдет любой плагин или сервис добавления кнопок социальных сетей. Лучшие, по моему мнению, варианты:

Желательно вместе с кнопками социальных сетей использовать какой-нибудь тематический текст: “обсудить с друзьями”, “посоветоваться перед покупкой”.

социальные кнопки для магазина

6. Отзывы о товаре.

Все-таки мы делаем из WordPress блога – магазин, поэтому будет правильно переименовать “комментарии” в “отзывы”. Сделать это можно редактируя файлы локализации ru_RU.po как самого WordPress, так и конкретной темы.

Подробнее о редактировании .po-файлов здесь >>

Если есть вопросы – пишите, помогу.

У меня получилась вот такая форма добавления отзыва:

добавить отзыв к товару

Пример страницы товара WordPress интернет-магазина, получившийся в результате описанный выше преобразований:

Согревающий наколенник из 85% верблюжьей шерсти >>

Осталось сделать более заметной кнопку “Купить”, оптимизировать главную страницу, каталог товаров, боковую колонку и корзину.

Видео: страница продукта (товара).

Советую посмотреть интересный вебинар, о том, какой должна быть страница товара в интернет-магазине.

Домашнее задание.

Отредактировать страницы товаров в вашем интернет-магазине. Особое внимание – составлению описания товара. Сделав это можно разрешать поисковикам индексировать магазин.

Продолжение: Дни 11 и 12. Настройка интернет-магазина.

GD Star Rating
loading...
Дни 9 и 10. Оптимизируем страницу товара магазина WordPress., 4.8 out of 5 based on 13 ratings

Буду благодарен, если поделитесь этой статьей в социальных сетях:

Метки: , ,

34 Комментарии »

  • Dominanta:

    Вместо звёздочек мне плагин навязывает пальчики и настроить не смогла:(
    Код «Социальных кнопок PLUSO» куда именно вставлять — не знаю:(
    До п.6 поста не дошла пока.

    [Ответить]

    Делитант:

    Понял. Нужно написать подробно о настройках плагина и о том, как добавлять кнопки социальных сетей. Будет сделано 🙂

    [Ответить]

    Dominanta:

    Ахха, надо, а то даже я, не новичок далеко, и то не справилась 🙂

    [Ответить]

  • Dominanta:

    Дмитрий, я часа 3 «изучала» loop-single.php файл своей темы, но так и не смогла удалить информацию о дате публикации и авторе записи..
    Прошу у тебя помощи!!!

    [Ответить]

    Делитант:

    Посмотрел твой магазин. Вижу и кнопки установлены и дата удалена. Разобралась?

    [Ответить]

    Dominanta:

    Местами удалилось, а местами нет, взгляни сейчас на сайт, пожалуйста! 🙂

    [Ответить]

    Делитант:

    У тебя дата и автор выводятся на главной, значит её шаблон (index.php) и нужно редактировать.

  • Dominanta:

    Отредактировала файл ru_RU.po в теме и ничего не изменилось, так и осталось — Добавить комментарий. Помогай, пожалуйста! 🙂

    [Ответить]

    Делитант:

    Есть ещё такой же файл в wp-content/languages/ Иногда файлы темы его заменяют, иногда нет.

    [Ответить]

    Dominanta:

    Ок, пасибки! 🙂

    [Ответить]

    Dominanta:

    А я именно этот файл и редактировала. А какой тогда ты имел ввиду в публикации поста?

    P.S.: Дату и автора с главной убрала, но толька редактируя файл loop.php 🙂

    [Ответить]

  • Dominanta:

    Большое спасибо за указание на нужный шаблон! 🙂

    [Ответить]

  • Dominanta:

    Токо шо увидела у тебя: «Оставте комментарий! Ваше мнение очень важно!» и «Будте вежливы…»
    НужОн мягкий знак: «ОставЬте комментарий! Ваше мнение очень важно!» и «БудЬте вежливы…»
    Исправляй, Димочка! 🙂 А комент мой удали))

    [Ответить]

    Делитант:

    Это не я 🙂 «Трудности перевода». Спасибо, за указание на ошибку.

    [Ответить]

    Dominanta:

    Как ты быстро всё исправил! )))))

    [Ответить]

  • Делитант:

    Dominanta, пока доведешь тему своего интернет-магазина до идеала, переделывая шаблоны страниц раз по 10 — 15, освоишь профессию верстальщика заодно. И можно другим “помогать”, за деньги.

    [Ответить]

    Dominanta:

    Если учесть, что каждая новая тема для сайта прям таки уникальна в своей вёрстке, то никаких денег не надо за такую помощь кому-то ))

    [Ответить]

    Делитант:

    Да. И поэтому практически каждую тему нужно приводить в порядок (оптимизировать).

    [Ответить]

  • Делитант:

    Dominanta: «А я именно этот файл и редактировала. А какой тогда ты имел ввиду в публикации поста?»
    Есть еще в теме wp-content/themes/название темы/languages/

    [Ответить]

  • У меня так и не получилось переименовать “комментарии” в “отзывы”. Вроде везде отредактировала файл ru_RU.po, но не выходит «каменная чаша» никак))
    Зато шапку немного улучшила (временно наверное), зацени, плиз 🙂

    ЗЫ: В Новосибирске моём 24.00 и я спать. До завтра, Учитель 🙂

    [Ответить]

    Делитант:

    Два варианта: или ты мне скидываешь свои файлы в личку на ЛиРу, или я тебе свои. Но только 2. Выбирай как тебе удобнее. Шапка классная. Уже смотрел.

    [Ответить]

    Dominanta:

    Мне удобнее, конечно, чтобы ты свои мне скинул — лучше на ящик (тот, что в подписи) 🙂

    [Ответить]

  • Здравствуйте!

    Прошу прощения, не могу никак сместить кнопку buy_button вниз вправо — хочу чтобы она была под текстом описания в правом нижнем углу. Посоветуйте, пожалуйста, как это сделать?

    С Уважением, Павел!

    [Ответить]

    Делитант:

    Почему не можете? Что делали что-бы сместить? Что не получается?

    [Ответить]

    Павел:

    Добавлял float: right, менял свойства margin — вводил самые разные значения: 750px 10px 10px 25 px; 50px 10px 10px 25 px; 50px 10px 0 25 px и проч, но кнопка упорно не смещалась ниже описания товара, а всегда зависала где-то на уровне картинки (параллельно ей). В тех. поддержке сказали, что по статистике она вверху лучше покупателям видна :).

    [Ответить]

    Делитант:

    Понятно. Откройте для редактирования страницу товара, найдите код, отвечающий за отображение блока с ценой и кнопкой купить ([goodbody_show_buy_button]), и разместите там, где Вам удобно. У меня между изображением товара и описанием.

  • у меня текст кривой получается, либо лезет между картинкой и кнопкой «купить», либо обтекает их по-разному снизу.

    [Ответить]

    Делитант:

    Для этого и нужны стили, div’ы и их свойства. Именно они позволяют настроить расположение блоков на странице по твоему желанию. Каждый шаблон имеет свои особенности, поэтому готовое решение я сразу не могу тебе дать. Нужно поэксперементировать, особенно со свойством float.

    [Ответить]

  • 1) файл loop-single.php отредактировал, код ненужный удалил. Все равно дата файла внизу появляется. Почему?

    2) Страница товаров: расположение текста, кнопки «купить» мне не нравится. Редактировать не умею 🙁

    [Ответить]

  • Здравствуйте!
    Я всё сделала по вашему уроку, всё получилось, спасибо. Не подскажите как теперь текст ниже опустить? http://medtovaryonline.ru/mehovoy-jenskiy-jaket-iz-ovechey-kantri-svetlyiy/

    [Ответить]

  • Дима, а можно в WordPress в трёхколоночной теме среднюю колонку сделать шире? Вообще у меня главная страница смотрится нормально, а где товар, очень узко. Не знаете можно это корректировать?

    [Ответить]

  • Делитант:

    Ирина, если Вы не сильно разбираетесь в том, как устроены темы для WordPress, считаю, Вам проще будет найти другую, более подходящуу по дизайну тему, чем исправлять существующую.

    [Ответить]

Оставить комментарий!

Добавить свой комментарий ниже, или Архив с вашего собственного сайта. Вы также можете Comments Feed через RSS.

Будьте вежливы. Держите его в чистоте. Оставайтесь на тему. Не спам.

Вы можете использовать эти теги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Это Gravatar поддержкой сайта. Чтобы получить свой собственный глобально признанных-аватара, пожалуйста, зарегистрируйтесь на Gravatar.