11

Редактирование темы интернет магазина WP e-Commerce

Как известно внешний вид сайта на движке WordPress определяется темой или по другому шаблоном. В интернете можно найти огромное количество бесплатных шаблонов для WordPress.

Если же мы хотим сделать интернет магазин на данном движке с помощью плагина WP e-Commerce нам придется повозиться с поиском бесплатных тем. Но мы можем самостоятельно отредактировать тему магазина по умолчанию, которая идет в составе плагина. О том как можно самостоятельно редактировать тему WP e-Commerce и пойдёт речь в данной статье.

Говоря про тему для интернет магазина мы имеем ввиду тему для следующих объектов: страница списка товаров, страница товара, виджет карзины, виджет категории и т.д. По умолчанию, после установки плагина, все эти объекты будут отображены с использованием тех шаблонов страниц, которые идету в составе плагина WP e-Commerce. При этом общий вид сайта определяется вашей текущей темой для WordPress.

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

  • в админке сайта открыть страницу настроек плагина WP e-commerce (Параметры / Магазин / Презентация).
  • в открывшемся окне справа будет блок «Дополнительные параметры темы». В нём мы увидим файлы шаблонов страниц нашего плагина. Отмечаем необходимые файлы (лучше все) галочками и жмём кнопочку «Move Template Files».
  • После того как вы перенос будет выполнен, ваша текущая тема превратится из простой темы для WordPress в тему интернет магазина на WordPress + WP e-Commerce. Останется только отредактировать перенесённые файлы по своему усмотрению.

В качестве примера редактирования файлов тем плагина WP e-Commerce ответим на вопрос нашего читателя по имени Kerk: «Есть ли возможность отображать «дерево» категорий так, чтобы подкатегории в нем были «скрытыми», т.е. отображались бы только после нажатия на категорию? Иначе, получается не очень хорошо – если в категории много подкатегорий, в виджете отображается здоровенная «портянка»»

Итак, практическая часть. Сейчас мы изменим файл шаблона, отвечающий за отображение виджета категорий интернет магазина: wpsc-category_widget.php. Мы изменим внешний вид категории с помощью CSS и сделаем динамический список категорий (дочерние категории будут раскрываться при нажатии на родительскую), с помощью библиотеки Java скриптов jquery.

Предупреждение: CSS и java использованы очень упрощенно и схематично, что бы не раздувать размеры этой статьи. Цель данной статьи: на простом примере продемонстрировать возможность редактирования внешнего вида интернет магазина на WP e-Commerce.

Подсказка. Все изменения вносимые в файлы шаблона можно проделывать через встроенный в WordPress редактор: Внешний вид / Редактор.

Шаг 1. Перенесем файл wpsc-category_widget.php в папку с нашей текущей темой. (Заходим сюда: Параметры / Магазин / Презентация; ставим галочку напротив нужного файла, жмём кнопку «Move Template Files»).

Шаг 2. Подключим бесплатную библиотеку Java скриптов jquery. Для этого нужно в файл header.php вашей темы WordPress добавить сразу после тэга <head> следующий текст: <script type=»text/javascript» src=»http://code.jquery.com/jquery-latest.js»></script>.

Шаг 3. Внутрь тогоже тэга <head> добавить описание нового стиля:

<STYLE>
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion div {
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
</STYLE>

Шаг 4. В файл footer.php сразу после закрывающегося тэга </body> добавим java скрипт:

<SCRIPT>
$(«#accordion > li > div»).click(function(){
if(false == $(this).next().is(‘:visible’)) {
$(‘#accordion ul’).slideUp(300);
}
$(this).next().slideToggle(300);
});
$(‘#accordion ul:eq(0)’).show();
</SCRIPT>

Шаг 5. Внесем небольшие изменения в файл wpsc-category_widget.php, который вы добавили к нашей активной теме на первом шаге.

Найдите тэг отвечающий за вывод первого уровня группировок:

<ul class=»wpsc_categories wpsc_top_level_categories»>

замените его на следующий тэг:

<ul id=»accordion»>.

Следующей строчкой будет тэг <li>. Нам нужно весь текст идущий после него и до следующего тэга <ul> обернуть в <div>. Из рисунка вам все станет понятно:

На этом урок окончен. Если вы все сделаете по инструкции все получится: вы получите раздвижное меню-аккордеон для интернет магазина на WP e-Commerce. Таким же образом вы сможете самостоятельно редактировать и остальные файлы шаблона, например шаблон отвечающий за отображение страницы товара.

admin

11 Comments

  1. Не выходит сделал все как написано, перепроверил 3 раза. Исправил кавычки.
    Даже не знаю что и делать =(

    • Основная цель урока: понять каким образом можно редактировать шаблон магазина.
      Дополнительная цель: научиться делать меню-аккордеон.
      Разбейте задачу на 2 части. Сначала научитесь делать небольшие изменения в файлах шаблона WP e-Commerce: например измените цвет шрифта.
      Затем освойте отдельно меню-аккордеон: создайте простой HTML файл, а в нем сделайте меню.
      После того как вы научитесь выполнять эти операции по отдельности, попробуйте сделать меню-аккордеон для темы WP e-Commerce.

  2. А зачем вставлять код стиля в тэг head не проще вставить стили в стандарный файл css? и просто озглавить типо: /*–accordion–*/

    • Для упрощения урока.
      Если делать какую либо реальную работу, то нужно делать так как вы говорите.

  3. Здравия!
    Подскажите пожалуйста, как сделать выпадающие меню с категориями товаров.

    • В WordPress 3 появилась такая очень удобная вешь, как редактор меню. Открывается так: Внеший вид / Меню. Вам нужно:

      • Создать новое меню
      • В качестве элемента меню добавить «Произвольную ссылку» на родительскую категорию
      • В качестве подменю добавить ссылку на дочернюю категорию
      • Назначить новое меню в качестве основной горизонтальной навигации (там же — в редакторе меню)
  4. Всем привет!
    Сделал все так как описано, но всегда открывается только первая категория товаров, при переходе в другую, её подкатегории открываются, но на секунду, а потом опять открываются подкатегории первой категории.
    Вот мой код:
    Файл: header.php

    <html xmlns="w3.org/1999/xhtml" >

    #accordion {
    list-style: none;
    padding: 0 0 0 0;
    width: 170px;
    }
    #accordion div {
    display: block;
    background-color: #FFffff;
    font-weight: bold;
    margin: 1px;
    cursor: pointer;
    padding: 5 5 5 7px;
    list-style: circle;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
    #accordion ul {
    list-style: none;
    padding: 0 0 0 0;
    }
    #accordion ul{
    display: none;
    }
    #accordion ul li {
    font-weight: normal;
    cursor: auto;
    background-color: #fff;
    padding: 0 0 0 7px;
    }
    #accordion a {
    text-decoration: none;
    }
    #accordion a:hover {
    text-decoration: underline;
    }

    и т.д…

    Файл footer.php
    ……

    $(‘#accordion>li>div’).click(function(){
    if(false == $(this).next().is(‘:visible’)) {
    $(‘#accordion ul’).slideUp(300);
    }
    $(this).next().slideToggle(300);
    });
    $(‘#accordion ul:eq(0)’).show();

    Файл wpsc-category_widget.php
    ……

    <li class="wpsc_category_»>

    <a href="» class=»wpsc_category_image_link»>

    <a href="»>

    …….

    Подскажите что не так, пожалуйста!
    Можно попробовать на aztec-climber.ru/new

  5. Здравствуйте. Скажите, можно ли вам заказать настройку wp e-commerce и его отладку под нужды нашего сайта?

    • Здравствуйте. Мы не занимаемся установкой и настройкой скриптов под заказ.

  6. Здравствуйте, не могу найти инструкцию чтоб переименовать кнопку «Покупка» например в кнопку «забронировать» и не могу сделать так чтоб он отображался не справа (не влезает в страницу, над нажать кнопку Tab в поле телефон.), а например внизу.
    kinomax.16mb.com/?page_id=16 вот здесь над поменять.
    не смейтесь, делаю для курсовой:) и только начал осваивать вордпресс и екомерц
    Интересует, какой файл нужно отредактировать.
    Как отредактировать разобрался вроде через инспектора в хроме, а вот где этот файл(скрипт) на серве (интересует название) ненайду:(

Добавить комментарий

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