Как известно внешний вид сайта на движке 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. Таким же образом вы сможете самостоятельно редактировать и остальные файлы шаблона, например шаблон отвечающий за отображение страницы товара.
Загрузка...
Не выходит сделал все как написано, перепроверил 3 раза. Исправил кавычки.
Даже не знаю что и делать =(
Основная цель урока: понять каким образом можно редактировать шаблон магазина.
Дополнительная цель: научиться делать меню-аккордеон.
Разбейте задачу на 2 части. Сначала научитесь делать небольшие изменения в файлах шаблона WP e-Commerce: например измените цвет шрифта.
Затем освойте отдельно меню-аккордеон: создайте простой HTML файл, а в нем сделайте меню.
После того как вы научитесь выполнять эти операции по отдельности, попробуйте сделать меню-аккордеон для темы WP e-Commerce.
А зачем вставлять код стиля в тэг head не проще вставить стили в стандарный файл css? и просто озглавить типо: /*–accordion–*/
Для упрощения урока.
Если делать какую либо реальную работу, то нужно делать так как вы говорите.
Здравия!
Подскажите пожалуйста, как сделать выпадающие меню с категориями товаров.
В WordPress 3 появилась такая очень удобная вешь, как редактор меню. Открывается так: Внеший вид / Меню. Вам нужно:
Всем привет!
Сделал все так как описано, но всегда открывается только первая категория товаров, при переходе в другую, её подкатегории открываются, но на секунду, а потом опять открываются подкатегории первой категории.
Вот мой код:
Файл: 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
Здравствуйте. Скажите, можно ли вам заказать настройку wp e-commerce и его отладку под нужды нашего сайта?
Здравствуйте. Мы не занимаемся установкой и настройкой скриптов под заказ.
Здравствуйте, не могу найти инструкцию чтоб переименовать кнопку «Покупка» например в кнопку «забронировать» и не могу сделать так чтоб он отображался не справа (не влезает в страницу, над нажать кнопку Tab в поле телефон.), а например внизу.
kinomax.16mb.com/?page_id=16 вот здесь над поменять.
не смейтесь, делаю для курсовой:) и только начал осваивать вордпресс и екомерц
Интересует, какой файл нужно отредактировать.
Как отредактировать разобрался вроде через инспектора в хроме, а вот где этот файл(скрипт) на серве (интересует название) ненайду:(
wpsc-shopping_cart_page.php
потратил 4 часа, но нашел 😀
Нашел:)