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

Про AJAX и REST API В последнем своём проекте много работал с Gutenberg блоками, на данные момент в нём 83 блока, и это ещё не конец. Возможно дойду до 100. В такой работе мне проще использовать REST API для фильтра или отправки данных из формы, чем Ajax. И я задался вопросом, что быстрее будет работать REST API или Ajax? Быстренькое создал новую тему, добавил только 2 кнопки, которые делают Ajax или REST API запрос. Нажал 10 раз на AJAX кнопку и получил ответ в среднем за 266ms. Потом нажал 10 раз на REST API кнопку — 250ms. Итого, в идеальных условиях разница всего 6%, хотя в начале года тестировал на реальных сайтах и доходило до 25-30%. В 2022м году было интересно разбираться как работать с Ajax. Контент на сайте добавлялся или обновлялся без перегрузки страницы, здорово же, когда фильтр работает и не перезагружается вся страница. Иногда страница с каталогом товаров сама по себе загружается долго и такая работа с фильтром ужас просто. Сейчас попробовал вариант с REST API и он мне больше подходит, есть куда развиваться. Не знаю, буду ли опять использовать Ajax, посмотрим. Кстати, когда работал с Альфа-банком и платформой бронирования Букза, то ответ приходил на эндпоинт по API. Да и в целом, сейчас практически любая интеграция — это работа с API, если нет готовых решений. Такие мысли.

Всем доброе утро и хороших выходных. Скоро пойду с ребенком по делам, а сейчас есть немного времени написать пост в канал. В конце декабря я прикинул, что нужно сделать по проекту к первому февраля и понял, что я уже опаздываю по срокам. Начал много времени уделять работе, пропускал тренировки, местами забил на питание и занятия по английскому. В итоге, проект запустили вовремя. Ещё одну или две недели я вносил правки, увеличивал скорость загрузки страниц и добавлял что-то новое, что получал от пользователей сайта после его запуска. В середине февраля я выпал из работы, продуктивность снизилась до минимума. В моменте поймал себя на том, что эффективность работы жестко просела. Вспомнил, что меня уже выводило из этого состояния и вернул те занятия, которые уже помогали мне: тренировки, питание, контроль рабочего времени, прогулки в конце рабочего дня по 5-7км. У меня по району можно пройти один такой круг за 60-70 минут. Последние 2 недели работаю, всё в порядке, вернулся к нормальному режиму. Появляются новые идеи, проекты и желание что-то делать. Кстати, открыл для себя сезон езды на велосипеде, хотя с такой зимой, как была в этом году, то можно было и не закрывать. Возможно, в этом году так и сделаю. Пока в январе работал над проектом, то много чего узнал про AJAX, REST API, работу с консолью браузера, что делать с картинками на сайте и картами от Яндекса, чтоб они не тормозили первую загрузку страниц. Обязательно напишу обо всём этом здесь в ближайшее время. А пока я пишу следующие посты, напишите чем занимались последние два месяца? Как вообще дела? Кто поставил себе на сайт плагин из последнего моего поста? Что скажите?

Сделал плагин, который автоматически переносит висячие предлоги на сайте на новую строку, улучшая внешний вид текста и его читаемость. Есть 2 настройки: 1) дополнительно можно добавить/удалить предлоги или слова, которые нужно перенести на новую строку. 2) добавить или удалять HTML теги за которыми следить. @wordpress_by_bot — бот, который пришлёт этот плагин подписчикам моего канала. Запускаете, забираете. Дополнительно ничего вводить и писать не нужно. Всех с наступающим Новым годом 🔥🔥🔥🔥🔥🔥

Про оценку стоимости проекта Хотел написать небольшой пост на эту тему, но как начал писать так и не смог остановиться. Получилось целая статья. Я выделил 4 основных этапа, когда был рост в доходе и я менял принцип оценки стоимости проекта: 1️⃣ Научился верстать. HTML, CSS и немного JQuery. 2️⃣ Сделал первый сайт на Wordpress + ACF. 3️⃣ Прошел обучение, перестал бояться работать с JS и API. 4️⃣ Разобрался как делать сайты под ключ. В статье расписал, какие проекты делал и как считал стоимость работы на каждом этапе. Вот собстна ссылка. В коментах поделитесь как вы считаете стоимость проекта и сколько времени нужно, чтоб назвать стоимость? 100% многим интересно будет почитать, как это устроено у других.

Про мой опыт работы с React + headless Wordpress Если коротко, то проект сделал, потом переделал под обычный PHP + HTML 😁 Столкнулся с минусами: ⛔️ Я не делал чисто на React, для SEO нужен Next.js. ⛔️ Пришлось дополнительно писать функции для SEO, а не просто использовать Yoast SEO по умолчанию. ⛔️ Сайт находился на хостинге, где нельзя было размещать react приложения. ТП отправляла регистрироваться и размещаться на их платформе-партнёре. Получается так, что у меня 1 ЛК для админки и БД, 2й ЛК для фронта сайта. Ещё 3й для домена 😆 ⛔️ Сложно каждый раз вносить изменения в проект. Нужно доработать эндпоинт, потом написать фронт часть. Плюсы: ✅ Прокачал навыки работы с API, сейчас почти в каждом проекте встречается какая-нибудь интеграция по API. ✅ Научился делать свои эндпоинты для API в Wordpres. Кстати, когда переделывал проект, то использовал эндпоинты как готовые функции. По сути, я просто переписывал реакт компоненты на понятный PHP + HTML. Менял JS методы и функции, на PHP. К примеру, map JavaScript`a на array_map в PHP. Перестал бояться создавать свои функции в PHP, сейчас 100% в каждом проекте напишу какую-нибудь функцию для оптимизации своей работы. ✅ Сделал проект, который хотел и голова больше не забита отвлекающими мыслями. Ещё один такой проект я начинать не стану — долго, нудно, дорого для заказчика. Нет смысла делать такое приложение и оставлять админку от Wordpress. Последнее время всё чаще ко мне обращаются сделать красивую админку для менеджеров. По сути, это сделать ещё одну страницу для управления контентом, но в стиле их сайта. Один такой проект в работе, с двумя не сошлись в цене 🤷 Напишите в комментах, что хотели сделать, сделали, кайфанули и больше такое повторить не хочется 😁

Про Gutenberg блоки в Wordpress Последние 2 недели погрузился в новую для себя тему. Вернее не так, давно забытую для себя тему — Гутенберг блоки в Вордпресс. 2 года назад, для одной известной онлайн-школы делал сайт, и там, без таких блоков не обойтись. Статьи на сайте со сложным дизайном, а не просто текст и картинки. Пришлось разбираться. Сейчас делаю сайт, полностью на таких блоках. Работа идёт медленно, но результат шикарный. Позже покажу, когда закончу с главной страницей. Пока 10 из 14 блоков готовы. Интересный для меня вопрос, кто-то занимается созданием гутенберг блоков индивидуально под сайт или все нормальные люди ещё с конца 2018 года это делают, один я только проснулся?

Кто-то делает сайт от мобильной версии к ПК? Умные люди называют такой подход «Mobile-first» Какие особенности и что вообще думаете?

Почему ваш сайт слабо конвертит? Разберу 5 ошибок, которые я часто встречаю Конверсия сайта — один из главных показателей его эффективности. Если люди заходят на ваш сайт, но ничего не покупают или не оставляют заявки, значит, что-то пошло не так. За годы работы я часто сталкиваюсь с одними и теми же ошибками, которые буквально убивают конверсию. Ниже разберу 5 самых распространённых ошибок и как их можно решить. 1️⃣Отсутствие призывов к действию (Call to action). Призыв к действию направляет пользователя к следующему шагу. Если не указывать, что делать, он просто уйдёт. Чёткие и заметные CTA помогают пользователям не теряться и совершать целевые действия: покупка товара, регистрация или подписка на рассылку. Хороший CTA выделяется визуально и понятно формулирует, что нужно сделать. Например: "Купить сейчас", "Получить консультацию" или "Зарегистрироваться». 2️⃣Плохой UX/UI. Удобство пользователя — ключ к успеху. Если процесс покупки или оформления заявки сложный, люди не поймут что делать. Например, мне нужно было купить хостинг и домен для белорусского сайта. Нашел подходящий хостинг, начал регистрироваться и у меня ничего не вышло. Куча ошибок и не пропускает регистрацию 🫣 Естественно я пошел искать другой хостинг 🤷 Вот так потеряли одного клиента, а сколько таких как я ещё было и будет. 3️⃣Медленная загрузка. Никто не любит ждать, и если ваш сайт грузится слишком долго, пользователи просто закроют его. 4️⃣Отсутствие адаптации под мобильные устройства. На сайт одного моего клиента, больше 60% пользователей заходят с мобильных устройств. Если бы сайт не был адаптирован для них, мы теряли бы потенциальных клиентов. 5️⃣Неподходящий контент. Контент должен быть понятным и привлекать внимание. Если вы продаёте обувь, не нужно писать о компании на первой странице. Люди хотят купить обувь, а не почитать какие вы молодцы. Можете самостоятельно исправить эти ошибки или закажите разработку сайта у меня 👇

Смотри что нашёл 👆 Вика — фрилансер, дизайнер и хороший человек 🤎. На её канале узнал о таком сервисе, который показывает все версии сайта, которые были на домене 🤯 Одному клиенту как-раз понадобился этот сервис, чтобы сделать слайд до/после для презентации. Она постоянно разыгрывает книги среди своих подписчиков. Я пока не выиграл 🫣 Публикует очень много своих кейсов и будни фрилансера. В общем, сами знаете что делать 👉 @vikaa_ignatova

Дизайнеры, ловите супер полезный контакт 👇 Если вам для проекта нужен специалист, который работает с кодом, то пишите Вадиму: @vadimfominov Очень крутой верстальщик! Всегда выручает меня, когда я не могу разобраться с этими совершенно непонятными буковками и циферками в огромных кодах для сайтов (дизайнеры меня сейчас поймут). Поэтому, если нужен проверенный человек, который разбирается в коде, точно пишите Вадиму: @vadimfominov 👌 #для_дизайнеров

Как-то попалось мне вот такое объявление 🫣 Всё, что я напишу ниже, направлено только на улучшение объявления и увеличение заявок с этого объявления. Я не планирую кого-то оскорбить или занизить чью-то работу. 1️⃣ Картинка с галочкой в самом верху ни о чём не говорит, она стоит для объёма и занимает место. 2️⃣Заходишь с вопроса про компьютер, а берёшь в ремонт: планшеты, телефоны, принтера, МФУ, роутеры и видеорегистраторы. 3️⃣ «Ремонт цифровой техники в ЖК «Евроберег»». Цифровая техника —слишком размазано и не ясно, что конкретно ремонтируешь. 4️⃣Это моё любимое)) Что значит Быстрый ремонт? Что значит Качественный ремонт? Эти слова можно использовать в любом бизнесе, поэтому тебе это не подходит. Ответь для себя на вопросы: на сколько быстро? В чём заключается качество твоей работы? Как вариант, почитай плохие отзывы о твоих конкурентов и сделай их плохие качества своим преимуществом. 5️⃣ Определись, что конкретно ты хочешь ремонтировать и что ты не берёшь в работу. ❗️РЕКОММЕНДАЦИИ ПО УЛУЧШЕНИЮ: С ремонтом компьютеров я не сталкивался, поэтому примеры могут быть не по теме, но суть они должны передать. Ты можешь воспользоваться ими, а можешь ничего не менять. Это рекомендации, а не обязательные к применению правила. 1️⃣ Сделай горизонтальное объявление. Раздели его на 2 части. Слева будет текст. Справа — твоя студийная фотография. Не вырезанная из толпы, не снятая на плохой телефон, не в куртке и шапке на улице, а именно на профессиональный фотоаппарат и в студии. 2️⃣ Нужен оффер или утп. Например: Ремонт ноутбуков и компьютеров в ЖК "Евроберег" от 5 часов, гарантия 6 месяцев 3️⃣ Под оффер добавь краткое описание своих услуг. Можно добавить список. (Посмотри отзывы клиентов на сайтах-отзовиках и найди топ 5 проблем, с чем чаще всего обращаются к мастеру). Запиши их в описание) Например: Ко мне обращаются когда компьютер: - включается дольше 1-й минуты; - сильно шумит при просмотре фильма; - что-то ещё. 4️⃣ Под описанием ставь призыв к действию. Например: Запишись на бесплатную консультацию и получи скидку 10% на переустановку Windows. (может им не нужна переустановка винды сейчас, но в будущем придут к тебе т.к. есть скидка в 10%) Тел: +7(999)-888-77-66 ТГ: @remont_pk ВК: @remont_pk WA: +7(999)-888-77-66 #смыслы Накидайте огня здесь👇

Это вообще нормально? 😆

Подключали рассрочку через Prodamus У них очень интересно формируется ссылка для рассрочки: 1. Нужно в URL строку добавить определённые GET параметры. 2. Перейти по своей же ссылке. 3. Получить короткую ссылку для приёма платежей. Но это сложно для пользователей. Что за GET параметры, куда перейти нужно и где получу свою нужную ссылку — непонятно. Не пойму, почему они до сих пор не сделали обычную форму с кнопкой «сгенерировать ссылку», куда нужно ввести свои данные и сделать ссылку. По моему, для обычных пользователей это будет понятнее 🤷 #отзыв Поделитесь в комментах опытом работы с Prodamus. Интересно именно формирование платёжной ссылки для рассрочек 👇

Почему шаблонные сайты не работают: 3 причины для индивидуальной разработки Многие компании на старте выбирают шаблонные сайты из-за их доступности и простоты. Но в реальности такие решения часто оказываются неэффективными и ограниченными. Вот три ключевые причины, почему шаблонные сайты не работают: 1️⃣Ограниченная функциональность Шаблонные сайты предоставляют базовые инструменты, которые подходят не всем. Когда ваш бизнес начинает расти и требовать новых функций — интеграции с CRM, дополнительные формы, фильтры или калькуляторы, вы столкнётесь с серьёзными ограничениями. Это замедлит ваш рост и потребует дополнительных средств на доработку. 2️⃣Отсутствие уникальности Шаблонный сайт выглядит как десятки других. К примеру: ваш сайт может использовать тот-же шаблон, что и сайт сексшопа, о котором вы пока не знаете 🫣 3️⃣Сложность масштабирования Когда компания масштабируется, шаблонный сайт не справляется с увеличением функциональности. Например, интернет-магазины, стартовавшие с готового решения, позже теряют время и деньги, пытаясь адаптировать шаблон к новым потребностям. Индивидуальная разработка — решение, которое учитывает все особенности вашего бизнеса. Если нужен сайт, то пиши сюда 👉 https://t.me/vadimfominov

Проблема: после обеда падает фокус в работе. Работаю дома с 7 до 12, потом перерыв до 14 и дальше за работу. После 14.00 иногда сложно сосредоточиться и занимаюсь не работой. Сегодня пошел гулять, как обычно, после обеда и нашел кофейню в 100 метрах от дома 😳. Попробую поработать в ней, когда дома прям всё против продуктивной работы. Посмотрю как скажется смена обстановки за окном 🤔 Как вам обстановка? #live

В проектах часто использую такую логику, когда при клике на кнопку к ней добавляю класс active, а у остальных пунктов меню удаляю. Я всегда это делал с помощью проверки if else

$('.item').on('click', function() {
  
  if($(this).hasClass('active')) {
     $(this).removeClass('active')
  } else {
     $(‘.item').removeClass('active')
     $(this).addClass('active')
  }

 })

При нажатии на кнопку я проверяю, если есть класс active, то удаляю его, а если нет, то добавляю к нему active и удаляю его у всех других элементов из списка. Такой подход применяю обычно в аккардионах, к примеру, в блоке «Вопрос-Ответ». GPT-4 подсказал вариант получше 👇

$('.item').on('click', function() {
    $(this).toggleClass('active')
         .siblings()
         .removeClass('active');
});

.toggleClass('active') — добавляет или удаляет класс active в зависимости есть он на элементе или нет. .siblings().removeClass('active') — получаю все элементы на одном уровне вложенности с нажатым и удаляю у них класс active. Использовал один раз, поэтому оставлю пока здесь, чтоб не забыть для следующего раза. #code 👇 Место для огня

За 4 года я опубликовал 1 отзыв о работе со мной Всегда своим клиентам говорю, что на сайте нужны живые отзывы, а сам их не собирал и не выкладывал 😆. «Ладно, я же анонимно работал, поэтому и не выкладывал» — говорил я себе, но я даже их не собирал на будущее, что бы были, когда понадобятся. Сейчас начал исправляться и в канале появится больше отзывов о работе со мной от предпринимателей, дизайнеров, верстальщиков, копирайтеров и SEO специалистов. Весь контент с отзывами оставлю с пометкой #отзыв, так я сам смогу давать заказчикам ссылку на отзывы о работе со мной. Жаль, что пока не работает такая ссылка t.me/wordpress_by/#отзыв Но можно написать пост-навигацию, где выписать все хэштеги в канале 🤔

Крутая фишка, которой я научился с GPT. Использую в PHP и JavaScript. Пример из этого калькулятора С помощью select, пользователь выбирает толщину листа. В зависимости от толщины листа стоимость будет разной. Я написал функцию, которая принимает толщину листа и возвращает нужный коэффициент для расчётов. По порядку: 1️⃣ Создаю функцию и передаю в неё ключ 2️⃣ Внутри функции создал массив ключ=>значение 3️⃣ Возвращаю значение по переданному ключу Пример:

function addCountStreet(key) {
       
  let forStreet = {
            "2.5 мм": 4,
            "2.976 мм": 5,
            "3 мм": 6
        };

 // Возвращает 0, если ключ не найден
        return forStreet[key] !== undefined 
                    ? forStreet[key] 
                    : 0; 
}

Тернарным оператором пользуюсь 3 года, намного удобнее и проще if else. Ещё год назад для такой задачки использовал бы много if else или switch case. #code

Калькулятор из поста выше 👆

Калькулятор из поста выше 👆