Натяжка на WooCommerce. HTML2WC. Часть #3. Подключаем стили и скрипты. Настраиваем глобальные опции

Артем Абрамович

Меня зовут Артем Абрамович и я являюсь фрилансером-вордпресером. Занимаюсь настройкой и редактированием сайтов созданных на CMS WordPress. Это основная моя специализация, есть еще несколько работ, которыми я занимаюсь, но обо этом вы можете более подробно узнать из моего портфолио.

76 комментариев к “Натяжка на WooCommerce. HTML2WC. Часть #3. Подключаем стили и скрипты. Настраиваем глобальные опции”

  1. Артем добрый день. Была ли у вас проблема с гугл тестом на скорость на тему картинок? Картинки я оптимизировал и сжал по максимуму , а гугл тест продолжает мне говорить ,что её надо сжать и если скачать предлагаемый файл сжатый гуглом, он по размеру ровно такой-же как у меня в корневой папке…

    Ответить
    • Добрый, бывает, только не сильно на эту тему заморачиваюсь

      Ответить
    • трабла может быть не из за веса картинки а из за неподходящего размера изображения. например вы используете на сайте контейнер 400х400 а изображение у вас 600х600 поэтому пейджспид ругается типо зачем ты грузиш лишний вес. темболее браузеру нужно будет картинку сжимать самому что тоже является негативным побочным эффектом.

      Ответить
  2. По поводу размещения настроек темы. Наверное лучше чтоб все настройки были вместе, в одном меню.

    Ответить
    • Они и так в одном меню, просто могут быть на разных страницах или на одной

      Ответить
  3. Артём, а сколько ещё частей планируется по натяжке вёрстки на WooCommerce? Вы очень круто объясняете эту тему. Спасибо вам большое за такие труды! К тому же, настолько подробного гайда конкретно по “Натяжке вёрстки на WooCommerce” я не нашёл больше в интернете.
    У вас должно быть в 5-10 раз больше подписчиков, но, видимо, большинство разработчиков (если таких можно назвать “разработчиками”) не любят “копать глубоко” – им нужно всё быстрее и попроще. Поэтому смотрят по большей части быстрые гайды других блогеров по WP с 5-минутными роликами (где всё делается быстро и “лишь бы работало”, а не так как положено по официальной документации)

    Всегда все уроки по WP смотрю только у вас (по натяжке вёрстки на WP я посмотрел все ваши уроки – не вру! У меня был приличный опыт по front-end(y) поэтому разобрался более-менее быстро). В отличие от других блогеров вы делаете всё так, как принято, а не “лишь бы работало”. Это реально лучшие уроки по WP. Я даже скачал и сохранил их себе на комп на случай ядерной войны, природных катаклизмов и потери спутниковой связи 🙂 Наверное я чокнутый 🙂
    Может быть вы подскажете где ещё можно прочитать подробнее о “Натяжке вёрстки на Woocommerce” кроме официального сайта woocommerce? Либо достаточно его? (желательно англоязычные источники) т к мне очень срочно нужно изучить это (хотя бы в общем), а у вас ещё не все части вышли…жалко..
    Заранее спасибо вам огромное!

    Ответить
    • Спасибо на добром слове! Очень приятно!
      В планах штук 20-25 серий, пока все не доделаем) Конкретно по натяжке я не встречал ни у кого, даже у буржуинов все кусками. Разбирался сам под документации Вукомерса, если понять принцип, то все не сложно. Могу вот этого чувака по рекомендовать https://businessbloomer.com/ у него много готовых сниппетов и решений, есть еще забавные визуализации хуков (хочу у себя на сайте так сделать)

      Быстро изучить не получиться, проще решать проблемы по мере их появления. Так что, если есть конкретные вопросы – спрашивайте

      Ответить
    • WPRUSe · Финты WordPress
      Абсолютно верю вам – насчёт “быстро изучить” я даже не надеюсь…)
      Ничего себе! Аж 20-25 серий…Класс!
      Всё понял! Спасибо большое еще раз за информацию и за то что поддерживаете связь с подписчиками!

      Ответить
    • Ну может больше, может меньше. Как пойдет, пока все не сделаем)

      Ответить
  4. Добрый день. Спасибо за уроки, очень познавательно. Появилась проблемка в процессе. Пишет в админки Wp вот такую штуку: “Container IDs can only contain lowercase alphanumeric characters, dashes and underscores (“carbon_fields_container_���������_����” passed).”
    При этом не постоянно, а один раз из 5ти… Не подскажете, с чем это может быть связано?

    Ответить
    • Доброго! Явно же название контейнера задано не верно: или на кириллице, или не та кодировка. или еще что. Вот что пишет
      Идентификаторы контейнера могут содержать только строчные буквенно-цифровые символы, тире и символы подчеркивания

      Ответить
    • Спасибо за ответ! Не знаю, что это было, но рестарт Denwer’a помог решить проблему.

      Ответить
  5. Здравствуйте, у меня не работают стили, даже с вашего исходника
    Меняю в фале style тот же размер шрифта, но это не отражается даже в консоли google
    Хотя таблица стилей подключена и её можно даже внутри WordPress редактировать
    В чём может быть причина? При необходимости могу отправить скрины

    Ответить
  6. нет-ли проблем с кириллицей у Carbon Fields 2.1.0? при сосздании дочерних страничек он генерит урлы, на латинице норм, на кириллице ничего не выходит и отображается каша из плей в итоге… думал .po файлик создам и транслейтом исправлю ситуацию, но нет, все равно к этому же приводит…

    Ответить
  7. Здравствуйте, подскажите как в php storm включить подсказку аргументов, как у вас?

    Ответить
    • Доброго! В функциях? У меня как-то автоматом все это работает, даже не включал нигде ничего

      Ответить
    • Да, в функциях, у меня почему-то такого нет. Сейчас обновлюсь…

      Ответить
  8. Категорически не согласен с подключением 100500 файлов стилей, почему не собрать все в один файл стилей с помощью какого-нибудь гальпа и подключить только его, так же поступив и с js ?

    Ответить
    • Можно и так. Но тут возникает другая проблема, у нас сайт не статика, а динамика. Если все файлы подключать раздельно, то можно их подключать только на нужных страницах. Например, на главной у нас есть слайдер, зачем подрубать файл с общим js на всех страницах сайта, если данный слайдер будет работать только на главной странице? Удобнее, лучше и быстрее подключать данный слайдер только на главной. Тоже самой и с css.
      И что будет грузиться быстрее 10 файлов по 100Кб или один на 1Мб? Даже если считать 10 запросов все равно будет быстрее 10 маленьких файлов грузить
      Хотя сами файлы можно и нужно сжимать

      Ответить
    • это не решение. решение нормально верстать изначально с учетом данной траблы через автоматизацию сборки.
      хотя тот же Autoptimizer может помочь если верстка чужая.

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

      Ответить
  9. Мне карбон возвращал код 403. Оказывается, что вот эта функция не любит русский ключи __( ‘Настройки темы’, ‘crb’ ). Оставил просто ‘Настройки темы’ и заработало. Может кому сэкономит время.

    Ответить
  10. Хороший котент, на ПОЖАЛУЙСТА(!!!) поработайте над правильным произношением английских слов. Уши вянут :(((((

    Ответить
  11. Ты просто сам подумай, какую ересь снимаешь )) отмечаешь, что не для новичков и в видео такие банальные вещи объясняешь – о приоритете фалов стилей..бррр…что за безобразие)) значит, по твоему, человек знает, как через Php инклудить файлы, прописывать хуки на cms, а вот в css он совсем болван не понимает, что чем ниже файл подключен, тем он приоритетнее )) после этого окончательно закрываю видео, оооочень сумбурно и бессмысленно. еще бы important посоветовал прописать!

    Ответить
    • Сними не ересь и никаких проблем. С удовольствием посмотрю твой вариант

      Ответить
    • все довольные, а ты фыркаешь как старуха недовольная))Дай себе пощечину, Максим, и сними видео по лучше

      Ответить
  12. Артем спасибо вам, после 2 часов просмотра первых двух серий, я понял больше чем до этого 2 недели тщетно читая тонны мусора. Буду смотреть курс дальше, вам надо телешоу свое открывать. Больше всего бесят запокойные голоса в нос, которые по 3 часа рассказывают и так понятную херню. А тут все прям по теме, четко, быстро и максимально понятно.
    Вам надо открыть свою школу по этому делу, будете очень хорошо зарабатывать думаю.

    Ответить
  13. Интересно.
    Вот такую конструкцию в первый раз вижу в PHP

    load_template( get_template_directory() . ‘/include/carbon-fields/vendor/autoload.php’ );
    *Carbon_FieldsCarbon_Fields::boot();*

    Это обращение к классу Carbon_Fields через имя файла, как я понял. А сам файл в папке Vendor. Как PHP определил, что файл в папке Vendor?

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

      Ответить
  14. Доброго времени суток, Артём!
    Я скачал Carbon-Fields версии 3.1.8, а папку vendor взял с вашей версии 2.1. Можно ли так делать?
    Вот ещё хотел бы узнать: может мне по-другому установить через composer require htmlburger/carbon-fields? В версии 2.1 так же написано, тогда почему мы этого не делали?
    Чего-то подключение Carbon-Fields совсем не по документации проходит (сравнил 2.1. и 3.1)! Как так-то?
    14:22 У меня не проходит подключение woocommerce-general программно через ключ [‘deps’].
    Может это из-за того, что мы подключаем его в wc-functions-remove.php по пути wp-content/themes/theme-name/woocommerce/includes/wc-functions-remove.php ?
    Мы, вроде бы, для подключения стилей woocommerce создали файл wc-functions.php по пути wp-content/themes/theme-name/woocommerce/includes/wc-functions.php ?
    Или это не имеет значения?
    17:17 почему navigation.js и skip-link-focus-fix.js подключаются раньше jQuery в самом начале и как понять, что тот или иной скрипт должен быть в начала, ведь в директории они выставлены по алфавиту?
    17:50 ребятки, не забываем сбросить в хромом хэш, иначе замучаетесь!
    Заходим в панель разработчика Ctrl+Shift+К и, кликнув и зажав на кнопке обновляшке рядом с адресной строкой, выбирете ‘Очистка кэша и жёсткая перезагрузка’
    И возрадуйтесь полученному опыту от решения задачки – типа как в rpg повышение вашего уровня =)

    Ответить
    • Доброго! Нет, так делать нельзя, может что-то не работать. Можно как удобно Карбон установить, тут уж что больше нравиться

      Ответить
    • @Финты WordPress получается, что новую версию не подключить как библиотеку, а только через интерфейс админки как плагин?
      Вот инструкция где подключение как библиотеки происходит через файл ‘carbon-fields-plugin.php’, но проблема в том, что его нет, как и файла ‘autoload.php’, который так же упоминается и на WP-Kama и у народа недопонимание, как там её подключить – видимо все на старой, один я на новой со старыми костылями =).
      Так то вроде всё работает. Ошибок пока нет. Если будут, то отпишусь ради опыта.
      Артём, а вы сами на старой версии или на новой?
      Гляньте, пожалуйста, как она у вас подключена.

      Ответить
    • @Braun Почем не подключить? Там же в документации написано, что подключайте или через композер или плагином. autoload.php есть в папке vendor так работает композер, специально проверил, все спокойно композером ставится

      Ответить
    • @Финты WordPress видимо, про композер нужно мне копнуть, как-то не очень понятно пока…

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

    без обид, автор

    Ответить
    • Ну нос действительно заложен, а поставить речь не откажусь, осталось только найти преподавателя

      Ответить
  16. чуть переписал код подключения css и js, чтобы было меньше ручной работы:
    ‘/assets/js/jquery-3.2.1.min.js’],
    [‘path’ => ‘/assets/js/bootstrap.min.js’],

    [‘path’ => ‘/assets/js/jquery.fancybox.min.js’],
    ];
    $debug = true;

    foreach ($files as $file) {
    $path = $file[‘path’];
    $handle = pathinfo($path, PATHINFO_FILENAME);
    // $deps = $file[‘deps’] ?? [‘jquery’];
    $deps = $file[‘deps’] ?? [];
    $ver = $debug ? time() : null;
    wp_enqueue_script($handle, get_template_directory_uri().$path, $deps, $ver, true);
    }

    }

    add_action(‘wp_enqueue_scripts’, ‘estore_styles’);
    function estore_styles()
    {
    $files = [
    [‘path’ => ‘/assets/css/jquery.formstyler.css’, ‘deps’ => [‘woocommerce-general’,’woocommerce-layout’,’woocommerce-smallscreen’]]
    , [‘path’ => ‘/assets/css/jquery.formstyler.theme.css’]
    , [‘path’ => ‘/assets/css/jquery.fancybox.min.css’]
    , [‘path’ => ‘/assets/css/twentytwenty.css’, ‘media’ => ‘screen’]
    ];
    foreach ($files as $file) {
    $path = $file[‘path’];
    $handle = pathinfo($path, PATHINFO_FILENAME);
    $media = $file[‘media’] ?? ‘all’;
    $deps = $file[‘deps’] ?? [];
    wp_enqueue_style($handle, get_template_directory_uri() . $path, $deps, null, $media);
    }
    wp_enqueue_style(‘estore-style’, get_stylesheet_uri());
    }

    Ответить
    • Интересный способ, спасибо. Подобное логично тогда в класс оформлять и выносить в отдельные методы

      Ответить
  17. *Помогите пожалуйста, я подключил SCSS как css, и появились предупреждение: Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://…assets/scss/style.scss”. С чем это связано и как исправить?*

    Ответить
    • Зачем подключать SCSS ? Что у вас как основы хромают, подключаете css, который из scss сгенерирован

      Ответить
  18. Добрый день! Спасибо за урок
    Небольшой вопрос,
    В админке>Настройки темы>вкладка “Шапка”>поле “Логотип”, текст кнопки “Выбрать Изображение” выходит за границы поля. У вас в записи слово “Изображение” переносится под слово “Выбрать”, а у меня такое не происходит. Слова идут одной строкой в связи с чем и выходят по ширине за пределы поля.
    Подскажите, пожалуйста, так и должно быть или нет? Если нет, то как это можно поправить?
    Я понимаю, что это мелочь, но все же интересно, как можно поправить.

    Ответить
    • Добрый! Карбон филд вроде позволяет настроить ширину поля, надо доки смотреть, так сложно сказать что-то конкретное

      Ответить
  19. Я кроме дробления кода ничего не вижу, где пояснения нормальные?
    Одна вода и дробление кода, еще и ужасный английский хтмл😐

    Ответить
  20. Подрубить стили — это новый взгляд на дизайн?.Изложение материала.. какое-то… подрубленное,

    Ответить
    • Эм, а курс вообще не про дизайн, дизайн там даже рядом не стояло)

      Ответить

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

%d такие блоггеры, как: