Редактирование главной страницы Storefront Woocomerce

nikonlay
На сайте с 11.12.2006
Offline
186
12400

Доброго дня!

Уже 2 недели как установил вордпресс с воокомерс и сторфронт, но никак не пойму, как редактировать нормально верстку и внешний вид.

В других шаблонах, например если есть header.php или home.php, то туда можно зайти и все поменять, заменить логотип, например, добавить свой блок, изменить класс или id, вставить текст, поменять местами.

А тут только что-то вроде do_action( 'storefront_header' ); и непонятно, как что менять.

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

И что конкретно сейчас хотел сделать

На главной есть блоки Категории товаров, Новинки и Бестселлеры друг под другом. Заголовкок блока и под ним 4 товара.

За заголовок отвечает код <h2 class="section-title">Новинки</h2>. И я бы хотел туда приписать свой id, например <h2 class="section-title" id="novinki">Новинки</h2>

Чтобы потом ссылаться на этот id через якорь-ссылку.

Но тоже непонятно - где описывается код этого шаблона, чтобы это сделать?

Мощные бинокли и монокуляры: https://market.yandex.ru/store--volny-i-veter?businessId=79203856
KC
На сайте с 09.08.2012
Offline
82
#1
nikonlay:
Например, я хотел перенести отображение корзины в другое место, но непонятно, где найти код вывода корзины, чтобы его вырезать оттуда и вставить в другое место.

С Woocomerce не все так просто, сама мучаюсь. Это больше похоже на отдельный фрэймворк. Необходимо использовать или плагины расширяющие кастомизацию или править код (не верстку). Вывести корзину в меню можно плагином WooCommerce Menu Cart, так же можно попробовать вывести корзину через виджет корзины, в нужное место шаблона поставить код:

<?php the_widget('Название_виджета_корзины',$instance,$args);?>
nikonlay:
За заголовок отвечает код <h2 class="section-title">Новинки</h2>. И я бы хотел туда приписать свой id, например <h2 class="section-title" id="novinki">Новинки</h2>
Чтобы потом ссылаться на этот id через якорь-ссылку.

Через код <h2 class="section-title"> выводятся все заголовки, думаю вам стоит не на h2 вешать id, а на секцию в которой выводятся новинки. Если у вас стандартный шаблон и под новинками у вас блок "Recent Products", то id можете попробовать прописать в файле шаблона с названием "storefront-template-functions.php" строчка 622

echo '<section class="storefront-product-section storefront-recent-products" aria-label="' . esc_attr__( 'Recent Products', 'storefront' ) . '">';
Synergy-Web
На сайте с 09.08.2017
Offline
39
#2
nikonlay:
Доброго дня!

Уже 2 недели как установил вордпресс с воокомерс и сторфронт, но никак не пойму, как редактировать нормально верстку и внешний вид.
В других шаблонах, например если есть header.php или home.php, то туда можно зайти и все поменять, заменить логотип, например, добавить свой блок, изменить класс или id, вставить текст, поменять местами.
А тут только что-то вроде do_action( 'storefront_header' ); и непонятно, как что менять.

С помощью "экшенов" как раз и выводятся блоки. Например хиты продаж на главной, контент на главной и тд.

Например в файле template-homepage.php этой темы они описаны для главной:

<?php

/**
* Functions hooked in to homepage action
*
* @hooked storefront_homepage_content - 10
* @hooked storefront_product_categories - 20
* @hooked storefront_recent_products - 30
* @hooked storefront_featured_products - 40
* @hooked storefront_popular_products - 50
* @hooked storefront_on_sale_products - 60
* @hooked storefront_best_selling_products - 70
*/
do_action( 'homepage' ); ?>

10,20 и тд - это приоритеты

Удалять, менять местами можно через файл functions.php

SeVlad
На сайте с 03.11.2008
Offline
1609
#3
nikonlay:
но никак не пойму, как редактировать нормально верстку и внешний вид.

https://docs.woocommerce.com/documentation/themes/storefront/

И обязательно через механизм дочерних тем.

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
nikonlay
На сайте с 11.12.2006
Offline
186
#4

Всем спасибо за ответы!

Хочу сейчас попробовать сделать, как KatrinCa посоветовала - через файл storefront-template-functions.php

И все хочу сделать как раз через механизм дочерних тем, не раз уже слышал, что так правильнее. И пока у меня в папке дочерней темы пока только 2 файла - style.css И functions.php.

А чтобы что-то прописать в файле storefront-template-functions.php нужно, как я понял, в папке дочерней темы создать подпапку inc и в ней создать файл storefront-template-functions.php? Но при этом, как я понял, чтобы все работало, нужно скопировать все содержимое этого файла из родительской темы? Или только строку 622 скопировать, которую редактировать, а остальное подключить через @import url по аналогии со style.css? Или как там в пхп, не import, а require_once?

Подскажите, пожалуйста, а то раньше с дочерними темами не работал.

NothingMatters
На сайте с 12.06.2017
Offline
45
#5

Я правильно понял? В вордпресс уже делают плагины для плагинов для плагинов?

nikonlay
На сайте с 11.12.2006
Offline
186
#6

NothingMatters, да, и порядочно причем. И не только для woocommerce )

А на счет моего крайнего вопроса - решил - чем спрашивать, лучше попробовать.

Создал в папке дочерней темы папку inc и в нее скопировал файл storefront-template-functions.php из папки inc родительской темы storefront. И уже в этом файле внес изменение в строчку 622, добавил свой id:

echo '<section class="storefront-product-section storefront-recent-products" id="toniz" aria-label="' . esc_attr__( 'Recent Products', 'storefront' ) . '">';

Обновил страницу, но пока что-то ничего не получилось - в html-коде сайта в этой section такого id не появилось, код остался без изменений. Я на всякий случай пробовал активировать другую тему и потом снова эту, чтобы файлы точно обновились, но так ничего и не поменялось. Хотя странно. Может, еще в каком-то файле переопределяется код этого места?

Synergy-Web
На сайте с 09.08.2017
Offline
39
#7
nikonlay:
NothingMatters, да, и порядочно причем. И не только для woocommerce )

А на счет моего крайнего вопроса - решил - чем спрашивать, лучше попробовать.

Создал в папке дочерней темы папку inc и в нее скопировал файл storefront-template-functions.php из папки inc родительской темы storefront. И уже в этом файле внес изменение в строчку 622, добавил свой id:
echo '<section class="storefront-product-section storefront-recent-products" id="toniz" aria-label="' . esc_attr__( 'Recent Products', 'storefront' ) . '">';


Обновил страницу, но пока что-то ничего не получилось - в html-коде сайта в этой section такого id не появилось, код остался без изменений. Я на всякий случай пробовал активировать другую тему и потом снова эту, чтобы файлы точно обновились, но так ничего и не поменялось. Хотя странно. Может, еще в каком-то файле переопределяется код этого места?

Я бы советовал вам создать одну хотя бы тему для ВП самостоятельно. Самую простую, пусть там дизайна никакого, главное чтобы вы поняли основные функции, как что работает, иерархию шаблонов и тд - базу.

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

Ну как-то так)

nikonlay
На сайте с 11.12.2006
Offline
186
#8

Synergy-Web, да я вроде не первый день и не первый год работаю с wordpress, больше 10 сайтов различной направленности на нем сделал. Просто конкретно с woocomerce и storefront до этого особо не работал.

А на счет основ - я же дочернюю тему создаю, и про них статью прочитал:

https://codex.wordpress.org/%D0%94%D0%BE%D1%87%D0%B5%D1%80%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BC%D1%8B

Там вроде какие-то основы создания шаблонов и иерархии тоже описаны. Сказано, что functions.php загружается в дополнение к родительскому файлу, а файлы шаблона заменяют соответствующие файлы родительской темы.

Поэтому, по идее, создав файл inc/storefront-template-functions.php в папке дочерней темы, я заменил им основной.

Но ваш намек понял, видимо вы намекаете, что я не понял, как заменить файл и подгружается до сих пор родительский. И действительно - попробовал вставить свой id в файл storefront-template-functions.php родительской темы, и в дочерней сразу появился нужный мне id. Но это ведь неправильный путь, нужно как-то именно в файлах дочерней темы все менять.

Почему же он не меняется? Можете подсказать?

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

https://codex.wordpress.org/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BC

Попробую создать создать свою простую тему. И может тогда действительно сам пойму ответ на этот вопрос

SeVlad
На сайте с 03.11.2008
Offline
1609
#9
nikonlay:
А чтобы что-то прописать в файле storefront-template-functions.php нужно, как я понял, в папке дочерней темы создать подпапку inc и в ней создать файл storefront-template-functions.php?

Нет.

В дочке только шаблоны и файл функций. Ну и css само-собой. Могут быть и др. СВОИ файлы, но не файлы от родителя.

Вот тут прочитай про дочерние темы http://codex.wordpress.org/%D0%94%D0%BE%D1%87%D0%B5%D1%80%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BC%D1%8B но только помни, что описанный там метод через @import устарел. См https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet

В общем случае, чтобы что-то изменить из того что внутри родителя (в inc/ в твоём примере) нужно в своём файле функций: либо прописать изменённую функцию (если она в родителе проверяется на наличие), либо воспользоваться хуками/фильтрами (если в родителе или самом ВП они имеются).

И да ещё вот почитай обязательно http://codex.wordpress.org/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BC

NothingMatters:
Я правильно понял? В вордпресс уже делают плагины для плагинов для плагинов?

А тебя не удивляет, что и сам ВП и плагины для него - это всё пхп? Про функции и фильтры тоже не слышал? Рекомендую ознакомиться.

А почему не удивляет (или таки удивляет?), что в автомобиль можно не только поставить свои кресла/колонки/кондиционер/колёса/етс, но и заменить им обшивку/покрышки/фонари, снабдить подголовниками/зеркалами/освежителем с любимым цветом и формой всевозможных ручек и тд?

nikonlay
На сайте с 11.12.2006
Offline
186
#10

SeVlad, спасибо еще раз!

Удалил из папки дочерней темы папки дочерней темы папку inc с содержимым, и из файла storefront-template-functions.php родительской темы убрал все изменения. Потом перенес функцию function storefront_recent_products( $args ) из этого файла в в файл functions.php дочерней темы и уже в нем внес изменения.

И все сработало, у нужной section появился желаемый id

Теперь буду дальше разбираться )

Информацию по ссылкам, которые вы дали, начал вчера читать, сегодня продолжу. Разом такой объем не осилишь, да еще часть на английском. Но постепенно прочту, надеюсь потом понятнее все станет

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий