Вадим Фоминов | Создаю сайты на Wordpress

Как вы занимаетесь оптимизацией картинок для сайта?

Лично я делал так:
1) если это .png и нет прозрачного фона, то переводил картинку в .jpeg
2) потом сжимал её
3) далее переводил картинку в .webp
4) загружал .webp на сайт

На каждую картинку уходило минуты 3. Все, у кого я спрашивал, делают так-же для своих сайтов. Только не переводят в .jpeg.

Неделю назад наткнулся на плагин «WP eLDeR Addon». Я думал, это очередной хлам, но решил проверить оптимизацию медиа.
Закинул 10 фото (от 0.5 до 13 Мб, JPG и PNG). Результат меня удивил: вес упал даже меньше, чем при ручном методе, но самое главное — не видно разницы.

Дополнительные плюшки этого плагина, которыми точно буду пользоваться:
— Удаление WP мусора из HTML кода сайта.
— Преобразует кириллические слаги в латиницу. Знаю, что для этого можно использовать бесплатный плагин, но теперь можно его удалить.
— Настройка отправки писем с сайта через SMTP. Для это тоже есть бесплатный плагин, но в нём много лишнего функционала, который я не использую, теперь можно его удалить.
— «Ленивая» загрузка всех картинок на сайте. Для этого я использовал свой плагин, но теперь можно использовать этот.
— Настройки безопасности: ограничение попыток входа, блокировка IP и защита логина администратора.
— Перенос настроек плагина между сайтами.

В плагине есть СЕО настройки, но нужно дать посмотреть их СЕОшнику. Возможно получится удалить другие СЕО плагины.

Сайт стал легче, а админка — чище. Если у вас стоит 5+ плагинов для оптимизации, посмотрите на этот — он может заменить половину из них.

Стоимость плагина:
1) Для заказчиков подойдёт за 2 тысячи рублей для 1 домена — навсегда или 1 тысяча рублей на 1 домен и на 1 год.
2) Для разрабов подойдёт за 7 тысяч рублей — безлимит на домены и время использования.

Если интересно, вот моя рефка: https://eldertime.ru/?ref=123A3614

Сюда огоньки 👇

Есть отличная новость, я сдал на права.

Новость отличная, но лично для меня 😁

С апреля по июль проходило обучение и в конце июля пошёл на экзамен в ГАИ. Всё получилось с первого раза 👍

Судя по дате получения прав, то вышел отличный подарок на ДР.

Набросайте огня 👇

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

Есть такие, кто проходил?

Как поживаете?

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

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

В январе записался в автошколу, но занятия начались только в начале апреля. Перенесли без проблем. Единственная в городе автошкола с онлайн занятиями, кайф.

Когда появлялся интернет, то читал новости. Две сильно запомнились: про блокировку ТГ в РФ и прилёт ракет по Дубаю.

Как поживаете?

Пост для тех, кто до сих пор не съехал с nic.ru на beget

В копилку к долгому ответу от ТП, дороговизне и впаривание ненужных услуг добавляется проблема с активацией домена.

Если нужна помощь с переездом на beget, пишите 👉 @vadimfominov

Временный пост 👇

Ищу дизайнера для создания логотипа.

Ниша — приложение для ветеринарных диетологов (рационы для мелких домашних животных).

Нужно разработать:
- логотип приложения;
- цветовые варианты и гайд по использованию.

Напишите в лс: @vika_ignatova16 🙏

Про навигацию в каналах по подписке.

В своём окружении я встречал 10 - 15 каналов по подписке. Как выглядит навигация в таких каналах? Обычно это закреплённый пост со списком ссылок на полезные статьи. Удобно. Но не то чтобы вау.

В одном таком канале я увидел модель навигации — через мини приложения. Мне она понравилась: всё всегда под рукой, а материалы удобно распределены по категориям.

Именно такую навигацию я сделал для закрытого канала Даниила Клинчука — специалиста по созданию смысловых сайтов. Вот бот-навигация для его подписчиков: @tknpdt_bot.

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

Что скажете?

Топ посты в этом канале за последние 2 года.

Вчера собрал.

Вот собственно весь список:

— Что делать если сайт "прыгает" при обновлении страницы
— Для чего вообще нужен сайт?
— Про 21 день на формирование привычки
— Платное и бесплатное обучение
— Мой опыт работы с React + headless Wordpress
— Плагин, который автоматически переносит висячие предлоги на новую строку
— Про AJAX и REST API в Wordpress
— Про SVG иконки на сайте
— Про поиск работы и скам
— Манипуляции в общении с заказчиком и исполнителем
— Таймменеджмент и постановка задач
— Про jQuery на сайтах
— Про отложенную загрузку картинок на сайте
— Про работу с Network (Сеть) в браузере
— Приложение для людей, которые следят за своим питанием

Набросайте огня ниже 👇

Всем привет! Делюсь тем, что получилось 👇

@trackernutrition_bot — приложение для людей, которые следят за своим питанием.

Идея.
Когда озвучил идею этого приложения своей сестре, получил такой ответ: так это уже есть, я пользовалась.
«Отлично, зачем изобретать велосипед» — подумал я и полез скачивать себе на телефон.
Первый опыт с выбранным приложением был таким:
1) заполнил квиз на 10 вопросов,
2) потом меня отправили на страницу регистрации и предложили 5 вариантов зарегистрироваться
3) я как-то пропустил этот шаг и меня отправили на страницу оплаты

Итог: это ужас какой-то. Я хотел просто ставить галочки возле продукта, который буду есть на завтрак, а получил целый квест. До основного функционала приложения я так и не добрался.

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

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

Продолжил работу в DeepSeek. Начал делать постепенно, описывал каждый функционал и проверял как работает. К обеду была готова первая рабочая версия приложения. Добавил регистрацию и авторизацию, БД и бэк использовал от Wordpress, фронт на js и HTML. Отправил сестре, оценить что получилось.
Ответ: «Блин, регистрация... Сейчас нет времени».

Понял, что регистрация — лишний шаг. Нужно придумать, как автоматически регистрировать пользователя используя данные от Телеграмма.

Именно с таким запросом пошел в DeepSeek и он подсказал решение. В Телеграм mini app есть свои хуки, которые срабатывают при открытии или закрытии приложения.

Итог.
Открыл приложение → уже авторизован → сразу работаешь: добавляешь продукты, отмечаешь их на приёмах пищи и смотришь статистику. Без регистрации и СМС. Скриншоты визуала в комментариях.

Я прям кайфанул от того, что получилось пропустить этапы регистрации и авторизации и дать сразу пользоваться функционалом.

❌ Приложение не будет нормально работать с темной темой Телеграмма. Как нибудь обновлю, но это не точно)))

Кто посмотрел, что посоветуете добавить в него и для чего?

И да, если хотите, чтоб ваш сайт открывался в телеграмме, как и моё приложение, то пишите в личку @vadimfominov
Вы получите тг бота, к которому я подключу ваш сайт. Актуально для экосистемы Телеграм

Английский за год: что изменилось

В школе и универе у меня были уроки английского, но я их успешно прослушал. В итоге получил классическое "London is the capital of Great Britain" и пара фраз из школьной программы. В августе 2024 года решил начать изучать. Не для работы, не для переезда — просто захотелось. Нашел YouTube-канал «Английский язык по плейлистам», у него есть один плейлист из 300 видео.

Каждое утро по 30-40 минут: грамматика, слова, простые диалоги.

И вот спустя год я поймал себя на мысли: "Так ведь мой сын точно так же учился говорить!"

Сначала Миша знал только "мама", "папа", "баба" — это как мои школьные "hello", "my name is", "goodbye". Потом он начал лепить фразы из двух слов: "дай сок", "хочу гулять" — а я тем временем научился выдавать что-то вроде "I want coffee" или "How much is it?" (и гордился собой, как будто сдал TOEFL).

Сейчас:
— Понимаю 60-70% письменного английского (комменты в YouTube)
— Пишу фразы из 3 - 7 слов (иногда с ошибками, но ИИ меня понимает и показывает где ошибся).
— Говорю предложениями, но… сначала придумываю их на русском, перевожу в голове и только потом могу сказать.

Мишка в свои 5 лет уже болтает без остановки — без страха, без мыслей о грамматике. Моя цель — догнать его через два года (хотя он, конечно, не в курсе этого соревнования).

Что ещё интересное заметил. Например, слово understand — я больше не перевожу его на русский. Услышал в фильме — сразу понимаю о чём речь. Таких слов и фраз мало, но они есть.

Планы:
— Продолжаю заниматься по видео из плэйлиста
— Читать и разбирать комменты в YouTube
— Смотреть марвеловские фильмы на английском.
— Найти варианты тренировать речь

Кто прокачал иностранный язык после школы? Что можете посоветовать?

Про работу с Network (Сеть) в браузере

Этот пост для тех, кто открывает вкладку Network и не понимает, что и где смотреть.

Проблемы, которые он помогает решить:
1) Отслеживать что отправляется на сервер и что приходит в ответ.
2) Ненужные CSS и JS файлы, которые добавляет WordPress и влияют на скорость загрузки страниц.
3) Неоптимальная загрузка изображений. Все картинки грузятся сразу, даже те, которые не видны сразу.
4) Низкая скорость загрузки страниц сайта.

Fetch/XHR — для отладки API, форм и AJAX-запросов.
Можно отслеживать что отправляю на сервер и что получаю в ответ.

CSS/JS — показывает, какие CSS/JS файлы загрузились на странице.
Если сайт на Wordpress, то по умолчанию он подключает 5-10 лишних файлов. Про другие CMS не знаю, сказать нечего. К примеру — это файл стилей Гутенберг блоков. Вы можете не использовать эти блоки, но стили к ним он загрузит.
❗️ДЛЯ ТИЛЬДЫ. Можно увидеть, когда вы подключаете два раза jQuery к сайту.

Img — показывает какие картинки загрузились на странице.
Она показывает все загруженные картинки на странице. Зная это, можно настроить отложенные картинки.
Ещё здесь видно, какая картинка очень много весит и её стоит оптимизировать.
❗️ДЛЯ ТИЛЬДЫ. Можно увидеть, какие картинки с отложенной загрузкой, а какие нет.

Font — показывает какие шрифты загрузились на странице.
Полезно для тех, кто использует 10+ шрифтов на сайте. Все они загружаются здесь и влияют на скорость загрузки страницы.
❗️ДЛЯ ДИЗАЙНЕРОВ. Здесь можно посмотреть какие шрифты используются на сайте и скачать их себе. Просто кликните 2 раза по нему и потом ctrl (cmd) + s — сохранить.

Набросайте огня, если всё понятно 👇

Первый сплав на байдарках: как мы едва не перевернулись, но всё равно получили кайф

Мы никогда раньше не сплавлялись всей семьёй — ни опыта, ни особой подготовки, ни 10 часов просмотра видосов на ютубе на эту тему. Решили попробовать: река спокойная, ширина 3-6 метров, глубина 40-150 см, течение спокойное — вроде бы ничего сложного. Но, как оказалось, даже на такой воде можно получить порцию адреналина.

Сплав длился три часа — это большой плюс и не сравнимо с аттракционами в парках по 5-10 минут. Атмосфера шикарная: солнце, вода блестит, птицы поют, бабочки и стрекозы летают, иногда рыбу обгоняли. Но даже при такой атмосфере, случались адреналиновые моменты.

Разок мы боком заплыли на берег, я уже мысленно представил, как мы все переворачиваемся в воду вместе с вещами. Чудом удержались. Потом трижды застревали — байдарка упиралась в какие-то коряги, и приходилось толкать её, сидя в ней же. Через 2 часа сыну надоело сидеть и он ехал стоя, где это возможно.

Еды взяли очень мало — думали, три часа, чего уж там. Но через 40 минут печеньки закончились и хотелось чего-то ещё. Хорошо, другие сплавщики подкармливали ребёнка: кто-то дал яблоко, кто-то печеньку. Люди на воде — самые добрые, кажется.

После финиша ещё полтора часа ждали остальных — наша группа растянулась по всей реке. Кто-то обгонял, кто-то не спешил — каждый плыл в своём темпе. А мы с сыном всё это время бросали камни с дороги в деревья, смеялись и вспоминали, как прошёл сплав.

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

А у вас были сплавы с детьми? Как прошло?

Про отложенную загрузку картинок на сайте

Есть достаточно плагинов, которые делаю отложенную загрузку картинок, будет ещё один. Моим клиентам и мне не понравилось, что все они с одним минусом — картинки загружаются в момент появления их на экране. К примеру, зашел я на сайт, страница загрузилась на 100%, потом начинаю скроллить чуть ниже и вместо галерее я вижу пустоту на секунду и потом по очереди подгружаются картинки. В принципе, так работает ленивая загрузка картинок. Они начинают загружаться только тогда, когда появляются в зоне видимости. Это бесит. Вроде как сайт полностью загрузился и всё должно работать, но картинки продолжают подгружаться.

Я начал разбираться, как это исправить. Своё решение упаковал в плагин.

WP Lazy Load Images — плагин, для отложенной загрузки изображений на сайте. Он начинает загружать картинки не в моменте появления их в зоне видимости, а заранее, за 1 экран до зоны видимости. Таким образом, при первой загрузки страницы я не загружаю одновременно все картинки на странице, только с первого и второго экрана. При скролле страницы у меня картинки начинают загружаться на шаг вперёд и пользователь визуально не видит загрузку картинок в моменте.

❗️❗️Важное замечание. Плагин работает только с картинками, которые загружаются через the_content и Гутенберг блоки. Если тему писать при помощи HTML + PHP + ACF, то для картинок атрибут src нужно заменить на data-src и всё будет работать.

Плагин доступен только для подписчиков канала, можно забрать в боте: @wordpress_by_bot

Набросайте огня 👇

JQuery всё.

С 2020 года я создаю сайты на Wordpress. Ещё раньше начал изучать, что такое верстка. jQuery нужен был чтоб открыть попап, сделать табы, аккордеон или слайдер через Slick slider.

Про оптимизацию я тогда не думал. Главное, что сайт работает — это уже успех. В какой-то момент просто работающего сайта стало мало и я начал интересоваться, как сделать его не только работающим, но и быстрым. jQuery — одна из проблем, которая всегда появлялась в рекомендациях по улучшению скорости работы. Чтоб её решить, нужно освоить новый язык — Javascript. Но изучать я его не хотел, для меня он был непонятным и сложным. Погружаться в изучение не планировал. Меня пугало обращение к элементу, дальше я уже не лез, считая «раз к элементу так сложно обратиться, то дальше будет ещё хуже». 

Для примера, вот создание переменной в jQuery и в JS:
const editButton = $(‘#edit-button’);
const editButton = document.getElementById('edit-button');

Всё изменилось, когда в сети запустили истории про ГПТ. Он легко смог переводить мой jQuery в JS. Так началось моё изучение этого языка программирования. По началу я разбирал код, который переводил мне ГПТ. Смотрел как и что написано, сравнивал со своим аналогом на jQuery. Потом что-то писал сам на JS, что-то сложное для меня писал на jQuery и давал ГПТ перевести на JS. Этот период длился не долго, я даже не заметил, как перестал это делать. Начал писать свой код на JS, а если не знал какой метод использовать, то уточнял у ГПТ какой метод сделает то, что мне нужно. К примеру: какой метод найдёт нужного родителя или как проверить, что у элемента уже есть определённый класс.

В общем, так я и перешел от jQuery к Javascript. Теперь это не большой и страшный зверь.

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

🤎 Про работу с Network (Сеть) в браузере
👍 Про отложенную загрузку картинок на сайте

Какого хера functions.php абсолютно пустой??

Я хорошо умею читать код на PHP или JS. Обычно делаю сайты или функционал к ним с нуля, практически без плагинов или готовых решений. С плагином WooCommerce я не работал последние 2 года. Сегодня прилетела простая задача: нужно возле скидочной цены показать сколько процентов скидка. К примеру, цена товара — 1000р, а по скидке будет за 800р, значит возле 800 нужно показать -20%.

На первый взгляд, очень простая задача. DeepSeek сразу показал код-решение, который я добавил в functions.php и пошёл готовить себе кофе, так как задача практически закрыта. Когда пришёл обратно и сел за комп, я был «удивлён» от происходящего.

Сайт прилёг отдохнуть. Моя вина? Не знаю, но решать её точно мне. Открыл бегет — лучший хостинг из тех 14, с которыми я работал. Нашел файл, в который я добавил свой код и «удивился» во второй раз. Он. Сука. Был. Пустой. Какого хера?? Подумал я и полез скачивать вчерашний бэкап. 

Сайт запустил в течении 10 минут. Обновил PHP код и проверил его работу на сайте. 
По-моему, всё работает отлично — подумал я. 
«Хер там» — сказал вариативный товар. 
Нарисовалась следующая проблема, о которой я не знал — при выборе вариаций, новые цены подтягиваются через Ajax и перезаписывают мои проценты. 

В моменте, я даже подумал, смогу ли я это сделать? Может лучше отдать, как есть и рассказать про нюансы в работе и ограничения в вариативных товаров.

Уже прошло полтора часа, а пятиминутная задача не сдвинулась с места. ПЗДЦ

Мне не хотелось погружаться так глубоко с этой «простой» задачей. И тут я придумал банально простое решение: мне не нужно считать процент на бэке, искать все возможные комбинации для товаров, чтоб всё учесть. Мне достаточно посчитать процент на фронте, когда обе цены уже пришли с сервера и доступны. Примерно за 10 минут я написал нужную функцию, дёргаю её при первой загрузки страницы и при выборе вариаций. Всё прекрасно заработало.

Не всегда нужно лезть глубоко под капот плагин, чтоб сделать простую задачу.

Набросайте огня под постом 👇

Запускаю точку по ремонту велосипедов

Мне нравится кататься на велосипеде, особенно по периметру своего города. Получается заезд на 3 часа и 40км. Прошло 2 года с момента покупки и у меня перестали работать тормоза. Так как руки у меня растут из нужного места, то я полез разбираться с ними сам.

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

В общем, развернул мастерскую по ремонту велосипедов у себя перед домом, начал крутить. Сын рядом бегает, даю ему помогать. За 40 минут получилось разобраться с мелкими деталями тормозов. Поставил всё на место, начал тестировать. 

В начале просто на месте понажимал ручку тормоза, изменений нет. Потом немного проехался и нажимал тормоз — результата ноль. Забил хер на задние тормоза, буду аккуратно тормозить передним колесом, пока они работают.

Покопавшись в интернете, нашел вариант: нужно залить что-то типо тормозной жидкости. Только пока не понял куда, сколько и какой именно. Вот такая история с не счастливым концом 😁

У кого был опыт ремонта велосипедов? Только не из детстве, там одна проблема была — цепь слетала.

‼️Ищем WordPress разработчика во фриланс команду.

Базовый набор для работы:
— HTML, CSS (Flexbox и Grid CSS, будет плюсом SCSS)
— JS (в том числе jQuery), PHP
— умение интегрировать вёрстку в WordPress с применением ACF полей, в том числе интернет-магазины на базе WooCommerce.
— опыт работы с мультиязычными, мультирегиональными сайтами, API интеграциями
— знание Ajax, API запросов.

Будет плюсом, если работали с 1С Битрикс.

Не откликайтесь, если хотя бы 1 из 4 пунктов из этого поста про вас: https://t.me/wordpress_by/669

Оплата сдельная по часам, либо по фиксированной сумме за задачу:
- 1000р/час для джунов, по навыкам есть только три первых пункта требований,
- 1500р/час если по навыкам есть всё, что описано выше.

Условия:
- удалённая работа, гибкий график.
- работа в таск-менеджере, видеосозвоны по необходимости, в том числе и с клиентами.
- оплата по договору с самозанятыми/ИП.
- команда с взаимоподдержкой.

Предпочтительно полный фриланс.

Писать в ЛС: @vadimfominov

Отвечу всем после 15.00

«Съесть слона по кусочкам»

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

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

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

Набросайте огня 👇

Сегодня 34

Год был интересным. В предвкушении большого кайфа от следующего...