#1 Посадка верстки на Wordpress | Установка WP, базовая настройка
Делаем свою тему на Wordpress. В уроке установим wordpress, сделаем первоначальную настройку темы и отключим ненужные функции.
/* Материалы урока */
Код урока: github.com/DmitryBerdnikov/pi...
Макет: drive.google.com/file/d/1x2G6...
Верстка: drive.google.com/file/d/1RuGc...
База данных и папка wordpress c темой из урока: drive.google.com/open?id=1WOS...
/* Команды урока */
Запуск browser-sync: browser-sync start --proxy "localhost/pizzatime" --files "**/*" --no-notify
/* Ссылки урока */
Xampp: www.apachefriends.org/ru/inde...
Wordpress: wordpress.org/
BrowserSync: browsersync.io/
Как работают хуки в WordPress: wp-kama.ru/id_6680/kak-rabota...
wp_enqueue_script: wp-kama.ru/function/wp_enqueu...
wp_head: wp-kama.ru/function/wp_head
WP Translitera: wordpress.org/support/plugin/...
Иерархия файлов темы: wp-kama.ru/id_7654/ierarhiya-...
Меня зовут Дмитрий Бердников, я веб-разработчик. На этом канале буду делиться знаниями по веб-разработке.
/* Соц. сети */
Мой ВК - vk.com/berdnikovdmitry
♫Music By♫
Song: Jarico - Island (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
Video Link: • Video
#wordpress
Таймкоды: 0:00 Обзор проекта 3:16 Установка Xampp 3:44 Установка Wordpress 6:48 Создаем чистую тему 8:18 Настраиваем BrowserSync для localhost 9:39 Начинаем посадку верстки 10:22 Разбираемся с путями в wordpress 15:21 Создаем header и footer 17:22 Правильно подключаем css и js 20:05 Чистим тему от wordpress стилей и скриптов 30:50 Настраиваем админ панель 33:22 Создаем шаблон для главной страницы
Все по делу, быстро, подробно, компетентно. Очень классно!
Здравия тебе, добрый человек! Все четко, понятно и информативно!
Лучшие уроки которые я видел на Ютуб по этой теме, искренне огромное спасибо.
Огромное Спасибо !!! Как раз то что я искал.
Хочу выразить вам огромную благодарность, за данный курс, он очень хорош.
Именно то, что я искал! 👌
Мужик, давно пытался найти что-то или кого-то, где рассказывал всё с нули и с мелочами, зачем и почему... Где-то да утаивали какие-то мелочи из-за которых не получалось всё сделать на 100%. Ты же всё рассказываешь и раскладываешь по полочкам ! Респект !!!
Спасибо
@Aziz Yuldashev Привет! В описании drive.google.com/file/d/1RuGcr1HIOUKNqsqCwJaoeVCubDzD25VZ/edit Уроки по верстке на канале
Сегодня хотел написать "проект всё?" и тут видео выходит)
Спасибо за полезный урок! Очень помогло
Классные видео. Очень информативно и качественно. Приятно смотреть и обучаться.
Спасибо
Нече-се, спасибо, что не забросил).
шикарные уроки
отличный урок, так держать!
Спасибо, бро, что ты существуешь ; )
Очень здорово объясняете всякие мелочи, которые по факту далеко не мелочи, но почему-то практически все это пропускают. Потом сидишь и тупишь- что, зачем и почему. И самостоятельно не повторить, потому что ты не понял нюансы. С вами прямо вот глаза открылись на некоторые вещи, непонимание которых меня дико раздражало. Огромное спасибо! Плохо, что вы прекратили тему по вордпресс. Вангую, что с вами канал по ВП был бы просто огнище!
Спасибо тебе!
add_filter('rest_enabled', '__return_false'); Скрипт для отключения Rest API, думаю тоже стоит добавить в начальный набор в functions.php
Та ладно, видео с утра)
Спасибо
люблю тебя
да ты крут
Дзякуй за інфу.
оч крутая фича(то что ты показывешь как гуглить)
Братан отдуши, я посмотрел твой прошлый плейлист про верстку и научился много к чему оставь что нибудь для доната
Плагин "WP Translitera", больше не доступен для скачивания.
Привет, спасибо за видео. А если в качестве значений $ver поставить null, то есть не указывать версию файла, то тогда решится проблема с кэшем? или все равно всегда придется указывать версию при изменении файлов, чтобы браузер подгружал нужную версию скрипта?
Привет! Ты можешь протестировать, посмотреть какой адрес будет у подключаемого файла, если указать null. Если он не меняется, то браузер может загрузить файл из кэша. А если изменить урл, добавив параметр, например, site.ru/css/main.css?version=1, то браузер подумает, что это новый файл и его загрузит. Но вроде даже с измененным урлом некоторые браузера все равно загрузят из кэша. И нужно прям полностью урл менять, не только параметры, чтобы браузер загрузил новый файл.
Скажите пожалуйста в чём отличие от указания путей в вашем случае и вот в этом примере допустим путь до картинки
Привет! Что лучше использовать bloginfo('template_directory') или get_template_directory_uri()? Между ними нету разницы. Мне нравится использовать get_template_directory_uri() так как эта функция возвращает url родительской темы, а bloginfo может возвращать разные значения и ей нужно передать аргумент. Подробнее тут написано wp-kama.ru/function/get_template_directory_uri
Спасибо! Это божественно! Всё чётко, ясно. Почему пользуешься "Carbon fields", а не "ACF"?
Привет! Я пользовался бесплатным acf примерно 2 года назад, мне не хватало функционала. Поэтому я перешел на carbon fields. Сейчас не знаю как обстоят дела с бесплатной версией acf. Если брать платную версию acf, то думаю она будет лучше. А бесплатная проигрывала carbon fields, по крайне мере раньше
Можно ли новичку начать с Carbon fields или лучше к ACF привыкнуть сразу?
@@h3ckphy246 Без разницы с чего начинать. Главный нюанс - в бесплатном ACF вам может не хватить функции. Тогда купить или спиратить.
@@evilinarm Спасибо)
У меня вопрос. Если посмотреть код проекта, а именно page-home, на 11 строчке в data-src-replace-webp путь должен быть так прописан или с /assets ?
Привет! Да, так правильно, я не заметил
@@user-up6es3nr6s на 313 тоже самое
@@user-ic5vg6ki4i Хорошо, что ты это видишь, значит понимаешь. Везде нужно думать, а не просто копировать.
Спасибо за урок, хорошо все объяснили) Только в процессе возникла проблема, в wp_enqueue_style('main-style', get_stylesheet_uri(), [], $version); Стили не подгружаются на сайт, как только убираю $version то сразу все в порядке. Если не сложно опишите пожалуйста поподробнее зачем вообще версию ставить и можно ли жить без неё нормально?) P.S Кстати заметил, что если версию не ставить, то она сама подставляется, у меня style.css?ver=5.6 на выходе получается
Привет! Может быть быть не объявлена переменная $version? Такой код должен работать $version = '0.0.1.7'; wp_enqueue_style( 'main-style', get_stylesheet_uri(), [], $version ); Можно вначале не ставить версию. На практике становится понятна зачем ее ставить. CSS кэшируется, и если его поменять, то новые стили не применятся, они будут брать из кэша. А параметр, например, ver=5.6 (style.css?ver=5.6), который добавляется к ссылке говорит браузеру, что файл изменился и нужно загрузить новый файл. Хотя я все равно встречал что браузер из кэша грузит, но в большинстве случаев это помогает
@@user-up6es3nr6s Спасибо за ответ, смотрел ваш урок для ознакомления, чтобы посмотреть что еще не знаю в начальной настройке WP. На тот момент уже подключил пустую тему от underscores и к ней дописал ваш скрипт чтобы попробовать, но там уже указана версия на сколько я понимаю, в этом и была ошибка. В заключение, хочу сказать что вы очень грамотно и понятно подаете материал, спасибо еще раз. Хотел бы узнать, возможен ли от вас похожий курс уроков только уже с WooCommerce?
@@grigodoes Спасибо за обратную связь. Возможно, но пока не планировал по woocommerce
Дмитрий, не подскажешь как убрать волнистую красную линию под php-кодом? Ошибок в консоли нету, просто она меня раздражает. Тоже использую VS Code. Видимо какой то плагин нужно.
Привет! 1) Может быть это ошибка? Если ошибка, то прочитай как ее исправить, скопируй содержимое и вставь в гугл. 2) Если не ошибка, зайди в расширения vs code и поищи плагины для php
@@user-up6es3nr6s Привет. Я решил эту проблему. Я полностью удалил VS Code c компьютера и переустановил заново. Мало того, что под php-кодом появлялась волнистая красная линия, так еще после установки Carbon Fields, WordPress выдавал ошибку и вылетал. Хотя я пошагово за тобой повторял и все делал в точь в точь. После переустановки редактора кода, Carbon Fields нормально установился. Короче, мораль такова. Не нужно лазить где попало и ставить галочки где не надо.
How many videos will this course contain?
About 4-6
order.querySelector('.order__img').setAttribute('src', productImgSrc); Разве тут не надо менять на data-src? У меня ругается на setAttribute! Или только у меня? ведь у img поменяли когда google page speed меняли на picture
Можешь на гитхабе код показать, либо время в видео указать? Так трудно вспомнить
Здравствуйте. Скажите, пожалуйста, можно ли так же подключить Browser Sync к Open Server?
Здравствуй! Да, надо настройку proxy у browsersync использовать
@@user-up6es3nr6s Спасибо! Разобрался. В ваших видео открыл для себя много чего нового. Подписался
@@faluna2957 расскажите как подключить, а то не получается.
function.php не срабатывает как на видео, в чем может быть проблема. Не стили не видит , не скрипты. Частая проблема на иннете. Т.е в ново созданном фанкшене не работают хуки и скрипты. Но если вернуть обратно адрес в хедер например стилей работает.. Не могу понять, что не так с фанкшеном . Версия правда вордпресса английская (au).
Привет! Не знаю ответа, нужно код смотреть, пытаться дебажить
Подскажите пожалуйста, как я могу сменить яндекс карту на гугл карту?
Привет! Простого ответа нет. Советую поискать информацию на тему "Как вставить google maps на сайт"
подскажите плз. выполнил верстку сайта на wp, теперь не работают плагины, вообще все, будто изменения в коренные файлы не могут внестись, в чём может быть дело??
Привет! А что за верстка? Верстка никак не должна влиять на работу wp. Только, если какой-то код на php неправильно написан и, возможно, там ошибка. Я бы удалил все файлы темы и посмотрел работают ли плагины. После этого добавлял постепенно файлы и смотрел, какой файл вызывает ошибку.
Какой аналог есть у WP Translitera? Плагин автор забросил, так понимаю, установить не могу
Привет! Я буквально месяц назад ставил, все работало, вообще не получается установить или его нету в плагинах wp?
@@user-up6es3nr6s Привет. Нажимаю активировать плагин, пишет - Плагин не был активирован, потому что он вызвал фатальную ошибку. Fatal error: Array and string offset access syntax with curly braces is no longer supported in C:\xampp\htdocs\test\wp-content\plugins\wp-translitera\wp-translitera.php on line 124
@@ag3707 Попробуй этот ru.wordpress.org/plugins/cyr2lat Может что-то другое найдешь, по этому плагину точно не подскажу, надо тестировать
36:27 в атрибутах страницы отсутствует выбор шаблона, есть родительская страница но и в ней отсутствует выбор шаблона, получается wp не видит page-home.php а так же прогружает index.php что я сделал не так?
Привет! Может быть ошибка в синтаксисе, попробуй с гитхаба примера вставить страницу
@@user-up6es3nr6s вообщем, с первым сайтом решил не заморачиваться так как он одностраничник был, а сейчас сажу магазин, дошел до того же момента и думаю щас опять потрачу пол дня чтобы найти ошибку, но создаю я в структуре папок файл page-catalog.php иду в wp создаю страницу catalog нажимаю опубликовать нажимаю перейти на страницу и каким то чудом меня кидает сразу на страницу каталога) я не знаю как это получилось)
@@evgenylezhepekov8556 Бывает такое)
Спасибо за урок! А чего не используешь пустую базовую тему. Например которую можно сгенерировать на underscores? Там сразу вся структура файлов есть.
Давно пробовал, не зашло, надо будет прошарить в этой теме, посмотреть генераторы базовых тем. А так в проектах использую свои наработки, плюсы пока не знаю от underscores, так как кажется, что я буду тратить много времени на удаление ненужного кода. Как-нибудь сделаю урок по базовой настройке шаблона, который я использую
@@user-up6es3nr6s спасибо, понятно :)
@@user-up6es3nr6s я сталкнулся с той же самой проблемой. Поэтому тоже не использую underscores
а для чего index.php заменяется на page-home.php? в этом есть смысл какойто?
Привет! index.php будет открываться для всех страниц, у которых нет шаблонов. Например, если мы главную сделаем на index.php, то при открытии главной страницей все будет работать. Но если мы откроем пост, и у него не будет своего шаблона, например, single.php, то откроется index.php и будет дизайн главной страницы. Поэтому шаблоны лучше разделять и в index.php оставлять только базовую разметку, которая сможет подойти для любой страницы в случае, если нет шаблона
@@user-up6es3nr6s спасибо за разъяснение.
Автор почему ты не используешь open server
Когда-то установил xampp, меня полностью устраивает и пользуюсь им
Привет, я не понял зачем ты создал объект в js со свойством siteUrl?
Привет! Можешь ссылку на код дать в репозитории гитхаба, таймкод, а то долго искать, так как уже не помню
@@user-up6es3nr6s это в первом уроке приблизительно с 30 минуты ты создаешь в function wp_localize_script я не понимаю что это за ссылка зачем она и как она относиться к main_js
@@denystelehin8083 С помощью wp_localize_script можно создать js объект, который получит данные из php. К main-js относится так, что объект WPJS будет создан перед подключением скрипта main-js siteUrl в данном случае указывает на главную страницу Насчет wp_localize_script можно тут почитать. wp-kama.ru/function/wp_localize_script
@@user-up6es3nr6s Благодарочка
Как по мне нужно добавлять продукты в корзину потом все одновременно оплачиваться так было бы удобней
В данной ситуации это точно удобнее, но надо бы найти золотую середину, а то проект превратится в монстра. Может в конце так и сделаю через js localstorage
Вас понял сэр!
Почему не используешь phpstorm?
Привет! Просто привык к vs code. На phpstorm не работал, поэтому не могу сказать, возможно, стоит попробовать
@@user-up6es3nr6s у phpstorm интеграция с WordPress. Там есть подсказки по всем функциям и аргументам
kak ustanoviti browsersync v sublime text
Browsersync ставится как пакет из npm, для запуска нужен терминал. Нужно найти как открыть терминал в sublime text, либо запустить другой терминал где работает node js
А будут другие проекты от вас (от 0 до 100 Как с эти сайтом)
Да, я буду выкладывать еще курсы
@@user-up6es3nr6s Вопрос ???? Смогу ли я делать проекты на фрилансе изучая только ваши уроки
@@Hello_world_2020A Если больше другого ничего не смотреть, то нет. В любом случае придется много гуглить и искать решение под частный случай
@@user-up6es3nr6s Ясно
а почему не используешь относительные пути, абсолютные?
Привет! Можешь напомнить где? Ссылку на код на гитхабе или таймкод
@@user-up6es3nr6s 10:55. Сначала менять пути подключаемых файлов, потом удалять их? Зачем вызывать wp_head а потом, удалять лишние строки из индекса? Это что ли чтобы показать какой типа тру программист? Доказать, что ли кому-то что-то? Почему нельзя остановиться на 17:29? Я не критикую, мне это важно понять для себя
@@fidstladst2429 Не совсем понял, если речь идет зачем использовать get_template_directory_uri, то можно попробовать не использовать и посмотреть что будет С wp_head тоже не понял, какие лишние строки из индекса? Если вопрос стоит зачем разбивать шапку и подвал, то для того чтобы переиспользовать на разных шаблонах
Мой мозг.... Его больше нету
page php ни к чему не закреплен же как он выводит не понимаю
Привет! wp-kama.ru/id_7654/ierarhiya-fajlov-temy-shablona.html
это считается многостраничным ?сайтом
Привет! Для меня, если у сайта больше 1 страницы, то он уже многостраничный
У меня у одного команда browser-sync start --proxy "localhost/project" --files "**/*" --no-notify выдает ошибку?
Привет! Сам сайт открывается по пути localhost/project?
@@user-up6es3nr6s Да
@@user-xo2bp5mq3z странно, не знаю как помочь, потому что слишком много может быть причин
уверен, что кто-то еще столкнется с этой проблемой. все просто: для начала нужно установить этот browsersync. то есть выполнить команду из 2. Install Browsersync
Так это тема, целый шаблон. Показываешь как настроить шаблон ради рекламы, 8)
Привет! Не совсем понял, твой коммент, что ты имеешь ввиду?
Не могу понять, почему не удаляются теги, wp_head поставил куда нужно, все сделал как на видео, а они так и не удаляется
Привет! Подскажи, какой код ты вставляешь и какие теги хочешь удалить? Пробовал с github моего репозитория код вставить?
@@user-up6es3nr6s начиная с того как ты удалял мета"generator", не хотело, твой код вставлял но тож не хочет, проверил через echo "text", функция норм работает, а удалять не хочет
@@user-up6es3nr6s
Ну твой код работает у меня норм(если весь проект целиком), а у меня брыкается)
@@user-ny3fg6vl6h Пробуй постепенно, сначала сделай тему, чтобы просто запустился файл index, functions.php сначала не заполняй. Затем постепенно начинай заполнять functions.php, например, вставить remove_action('wp_head', 'wp_generator'); смотришь, если работает идешь дальше, если нет то поставь другую функцию. Если и она не работает, а с моим кодом работает, то проверь синтаксис, название файла,
bash: browser-sync:: command not found
Привет! node установлен? Проверка node -v npm установлен? Проверка npm -v browser-sync установлен? npm install -g browser-sync browsersync.io/ Может компьютер нужно перезагрузить
@@user-up6es3nr6s Спасибо тебе большое , очень помог
здраствуйте сможете дать верстку сайта?Архив не открываетсья
Здравствуйте! Я проверил все открывается и скачивается. Архив не скачивается или сам архив не открывается? kzhead.info?event=video_description&redir_token=QUFFLUhqbVZRYmdxTkNFU2thOWR3SEZUd1R3eFRzZV9UQXxBQ3Jtc0tsZ2FYdk1aenNJakY0UTlRR3dJbmlydlMtblNrVEVDQm44cnZSNkVoeWZiZEFrOGpvamozdmp5emp4SU5HMGp4XzV2dk9DaXBrcGtSVVZrYVJ0aWNjd0xHU1BTUkhldzl4a0xEd2FTMDN3NVQwQ3hOQQ&q=https%3A%2F%2Fdrive.google.com%2Ffile%2Fd%2F1RuGcr1HIOUKNqsqCwJaoeVCubDzD25VZ
@@user-up6es3nr6s АРХИВ НЕ открывается
@@mherbalayan9937 странно, у меня все работает, проверил несколько раз Попробуйте с уроков по верстке взять взять github.com/DmitryBerdnikov/pizzatime
а в чем смысл вызывать скрипты динамически?
Ты про телефоны и повторяющуюся контент? Если да, то чтобы не делать доп запросов в базу данных. Или ты про какие скрипты?
блин, привычки не умирают... костыли костыли костыли.... и в шапке столько тегов, хотя они все должны быть в фанкшен..... главное просмотры ))))
Привет! 1) А где именно костыли? 2) Почему теги из шапки должны быть в functions.php? Это где прописано?
Иерархия шаблонов абсолютно не работает.
Привет! То есть получилось сделать один в один как в уроке. Также для тестирования скачать исходники, все запустить и эти два варианта не работают?
Спасибо за хорошее видео. Только не совсем понял, зачем в index.php оставлять get footer и get header, а так же на главной странице вызывать get header и get footer
Привет! get_footer и get_header работают как импорты, чтобы вместо get_footer подставилось содержимое из файла footer.php, а вместо get_header - header.php
не читал комменты, но у кого если не заработает WP Translitera, то 124 строка файла wp-translitera.php поменяйте на " $tr_rules[strtoupper($key)] = strtoupper($value[0]).substr($value, 1);"
Привет! Это в самом плагине? Лучше в плагинах не править напрямую что-то новое поставить, он давно не обновлялся, а если обновится, то может слететь.
@@user-up6es3nr6s там пару знаков. Если это не поменять, то работать не будет... Ничего страшного в этом нет. Вы же код показываете. Вроде не для тупых тут это всё )
Привет. Ты все файлы создавал вручную. А вот как ты если использовать сервис underscores.me что бы скажешь ? на сколько это будет правильно?
Привет! Давно пользовался underscores, но мне не зашло, сейчас не подскажу. Вообще для кого-то может быть удобно. Мне не зашло, потому что много удалял и мне легче с нуля написать. Вообще пользуюсь своими наработками, создаю каркас базовый и, если чего-то не хватает, то дополняю его. Скорее всего тут нету правильно, тут есть оптимальное.
Это будет правильно. Неправильно создавать с нуля все файлы.