Фриланс и веб с OlegTix | WordPress – Telegram
Фриланс и веб с OlegTix | WordPress
399 subscribers
254 photos
10 videos
3 files
290 links
Блог про веб-разработку и wordpress от Senior разработчика.

Youtube канал:
https://www.youtube.com/@olegtix

Тематика: wordpress, сервисы, личные мысли

Заказать сайт/предложить рекламу/админ: @oleg_tix

Позвать друзей: https://news.1rj.ru/str/web_panda
Download Telegram
⬜️ Last-Modified and If-Modified-Since Headers ⬜️

Заголовки Last-Modified and If-Modified-Since Headers передают поисковым роботам и сообщает им о том, редактировалась ли страница. Они позволяют улучшить SEO, сообщая им о том, редактировалась ли страница и нужно ли её повторно индексировалась.

Кроме этого они увеличивают скорость загрузки, потому как если они не изменялись, то браузер не загружает заново страницу, а открывает её из кеша.

Итог:
— Увеличенная скорость загрузки.
— Сниженная нагрузка на сервер, так как не придется подгружать разделы сайта в лишний раз.
— Увеличится скорость индексации.
— Улучшится поисковой сниппет (появится дата публикации и изменения).

Проверить наличие заголовков вы можете тут.

Многие seo плагины поддерживают их, но если вы столкнулись с тем, что у вас на сайте их нет, то рекомендую установить данный плагин.

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

WEB PANDA | #seo #wordpress #плагины
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥4
⬜️ Стили для обычных ссылок | CSS Хак ⬜️

Почти всегда в дизайне нужно применить какие-то стили по-умолчанию в ссылке в контенте.

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

Благодаря коду ниже, мы стилизуем ссылку, которая не имеет класса.

a:not([class]) { text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.15em;
}


👩‍💻 Нужны ли еще посты про css хаки?

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

WEB PANDA#cssхак #верстка
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥3👌2
⬜️ TranslatePress — перевод сайта ⬜️

TranslatePress
— плагин для добавления нескольких языков сайту на wordpress. Аналог популярных плагинов, таких как wpml и polylang.

Преимущества данного плагина — перевод сайта прямо из customizer (внешний вид » настроить). Переводит абсолютно все слова. Но в этом кроится и недостаток. В отличие от wpml или polylang, translatepress не позволяет создавать свою страницу под другой язык.

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

🔗 Посмотреть 🔗

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

WEB PANDA#плагины #wordpress
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍2🤝2
⬜️ Промпты для CHATGPT ⬜️

Сайт
, где хранится множество готовых запросов для chatGPT. Удобно разбито по категориям.

🔗 Посмотреть 🔗

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

WEB PANDA#сервисы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6👌21
⬜️ Расширения для браузера для wordpress ⬜️

WordPress
Dashboard Shortcut — позволяет в 1 клик попасть на страницу админ-панели wp. Расширение супер простое. Оно берет url адрес открытой вкладки и создает новую вкладку с приставкой "/wp-admin". Это экономит значительно времени в долгосрочной перспективе.

Рекомендую установить и попробовать.

🔗 Посмотреть 🔗

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

WEB PANDA#wordpress
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4👌3
⬜️ Бесплатная нейросеть для генерации изображений ⬜️

Fusion
Brain — бесплатный ИИ, который генерирует изображения на основе текстового описания. Можно выбрать стиль, размер, сгенерировать несколько вариантов.

🔗 Посмотреть 🔗

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

WEB PANDA#сервисы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🤩32
⬜️ Сниппет для сортировки woocommerce по алфавиту ⬜️

Добавляет сортировку от А-Я и от Я-А.

add_filter( 'woocommerce_get_catalog_ordering_args', 'woocommerce_get_catalog_ordering_name_args' );

function woocommerce_get_catalog_ordering_name_args( $args ) {
if (isset($_GET['orderby'])) {
switch ($_GET['orderby']) :
case 'name_list_asc' :
$args['orderby'] = 'noscript';
$args['order'] = 'ASC';
$args['meta_key'] = '';
break;
case 'name_list_desc' :
$args['orderby'] = 'noscript';
$args['order'] = 'DESC';
$args['meta_key'] = '';
break;
endswitch;
}

return $args;
}
// Добавляем условия в стандартный вывод сортировки WP (выпадающий список)
function woocommerce_catalog_name_orderby( $sortby ) {
$sortby['name_list_asc'] = 'По алфавиту A-Z';
$sortby['name_list_desc'] = 'По алфавиту Z-A';
return $sortby;
}
add_filter( 'woocommerce_catalog_orderby', 'woocommerce_catalog_name_orderby', 1 );

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

WEB PANDA#сниппет #woocommerce
Please open Telegram to view this post
VIEW IN TELEGRAM
👍93🔥2
⬜️ Тег цитаты <cite> ⬜️

Тег <cite> используется для указания источников цитат, названий художественных произведений или объектов искусства.

✔️ <cite> необходимо использовать для:
• ссылок на источник цитаты;
• названий книг, статей, поэм и т. д.;
• названий скульптур, картин, арт-объектов;
• сносок на другие материалы.

❗️ <cite> не стоит использовать для оформления самих цитат, для этого подойдут теги <q> или <blockquote>.

➡️ Пример использования:
<p>
— Только что дочитал цикл <cite>Тёмная башня</cite>.
Я впечатлён! Где можно узнать о выходе новых книг?
</p>

✖️ Автор не должен указываться как источник, нужно приводить ссылку на конкретный материал:
<p>
<!-- Так не нужно делать! -->
— Только что дочитал цикл «Тёмная башня»
за авторством <cite>Стивена Кинга</cite>.
</p>

📎 Источник

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

WEB PANDA#верстка
Please open Telegram to view this post
VIEW IN TELEGRAM
👍82🔥1🤔1
⬜️ Сайты, которые сделаны с помощью Bricks Builder ⬜️

У
Bricks Builder есть форум, где вы можете писать об ошибках, просить советы, задавать вопросы по реализации определенного функционала и писать про баги.

💬 Кстати, на все темы с багами разработчик отвечает в тот же день и вносит в список багов. Далее на следующем обновлении баг устраняется. Я считаю, что это огромное преимущество по сравнению с другими конструкторами, где баги могут висеть годами (например, у elementor).

🌐 На форуме есть раздел — Showcase. Там пользователи делятся сайтами, которые они создали на Bricks. Конечно, многие из них не имеют впечатляющий дизайн, так как там может опубликовать свою работу любой человек, но все равно в этих сайтах вы можете увидеть чистоту кода и скорость загрузки.

Этот раздел будет полезным для тех людей, которые хотят посмотреть примеры сайтов, сделанных на Bricks.

ℹ️ Лично я уже давно использую Bricks и сделал на нем уже не один десяток сайтов. Считаю, что если использовать конструктор, то Bricks будет лучшим вариантом.


🔗 Видео-инструкция по конструктору Bricks

🔗 О конструкторе Bricks

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

WEB PANDA#верстка #wordpress
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3💯1
⬜️ Конвертор шрифтов с подключением в CSS ⬜️

Transfonter — сайт, который позволяет сделать конвертацию одного шрифта в множество форматов. Помимо этого он делает css файл с их подключением, а также генерирует html файл с демо контентом.

✔️ Для работы нужен 1 любой формат, который он превращает в ttf, woff, noscript, woff2, eot. Поддерживает русский язык и имеет очень много настроек. Позволяет сразу указать папку шрифтов или добавить свойства для локальной поддержки шрифта.

🔗 Посмотреть

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

WEB PANDA#сервисы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥4👌2
⬜️ Сниппеты кода для WordPress ⬜️

CodeSnippets — сайт с коллекцией сниппетов для Wordrpess. Имеется более 600 сниппетов на любой вид. Удобные категории по разделам.

🔗 Посмотреть

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

WEB PANDA#wordpress #сниппеты
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍3🤩3
⬜️ Сортировка комментариев WordPress ⬜️

ℹ️ Стояла задача сделать на сайте отображения комментариев по дате, где новые сверху, а старые снизу. По умолчанию в wordpress в начале сайта отображаются старые комментарии.

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

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

⁉️ А вы знали о такой возможности?

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

WEB PANDA#wordpress
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3👌21
⬜️ Генератор жидких форм ⬜️

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

🔗 Посмотреть

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

WEB PANDA#сервисы #дизайн
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥3🤝2
⬜️ Плагин для локальных аватаров пользователей ⬜️

По умолчанию в WordPress аватары пользователей берутся из сервиса Gravatar, который в свою очередь получает аватар из почты пользователя.

Чтобы можно было в админке редактировать аватары, то нужно установить специальный плагин Simple Local Avatar.

📊 Скачиваний: 100 000+

👍 Рейтинг: 4.5

🔗 Посмотреть

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

WEB PANDA#плагины #wordpress
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2👎1👌1
⬜️ Набор иконок Ionicons ⬜️

Иконки с открытым исходным кодом. Есть 3 вариации.

🔗 Посмотреть

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

WEB PANDA#дизайн #сервисы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥1🤩1
⬜️ Плагин для купонов WooCommerce ⬜️

Smart Coupons For WooCommerce Coupons — добавляет расширенные возможности для купонов woocommerce. Позволяет настроить автоматическое применение купонов, добавлять ограничения применения купона по минимальной/максимальной стоимости, выбору метода доставки и метода оплаты.

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

🔗 Посмотреть

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

WEB PANDA#wordpress #плагины #woocommerce
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🤩4👌2
⬜️ Идеи для использования ChatGPT ⬜️

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

⬜️ Написать шорткод/запрос для wordpress. Даже если вы не знаете php и вам нужно сделать вывод постов на странице,то вы можете попросить chatGPT сделать шорткод и вам останется только вставить его на страницу.

⬜️ Написать css код. Конечно, по макету он вам не сверстает, но может сократить много времени.
Рабочий кейс: нужно было стилизовать форму комментариев wordpress. Я скинул ему html код формы (скопировал из консоли браузера), написал стиль и цвет. В итоге получил симпатичный дизайн, который лишь слегка отредактировал.

👍 Напишите в поиске канала ChatGPT и смотрите другие посты по этой теме.

➡️ Бесплатный ChatGPT:
1 сервис, 2 сервис

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

WEB PANDA#wordpress #сервисы #советы
Please open Telegram to view this post
VIEW IN TELEGRAM
🤩8👍7🔥3
⬜️ Стоит ли переходить с PHP 7.4 на PHP 8? ⬜️

⬜️ 8 версия PHP быстрее. Новая версия PHP оптимизирована для повышения производительности. Тесты показывают до 25% прирост скорости по сравнению с PHP 7.4.

⬜️ Большинство плагинов и тем WordPress уже совместимы с PHP 8. Разработчики WordPress активно работают над совместимостью. К настоящему моменту большинство популярных плагинов и тем уже тестировались и работают нормально под PHP 8.

⬜️ PHP 8 более безопасен, чем предыдущие версии. В PHP 8 были устранены уязвимости безопасности, исправлены ошибки и усилена защита.

⬜️ Всегда можно вернуться на предыдущую версию. Если после перехода на PHP 8 у вас возникнут проблемы совместимости, всегда можно вернуться обратно на PHP 7.4.

Подводя итог, переход на PHP 8 стоит рассмотреть, так как он быстрее, безопаснее и имеет новые функции.

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

WEB PANDA#оптимизация
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👍7👌21
This media is not supported in your browser
VIEW IN TELEGRAM
⬜️ Переключатель день/ночь ⬜️

Написан на html, css и js.

🔗 Посмотреть

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

WEB PANDA#codepen #верстка
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥3👌21
⬜️ Gutenberg: Использовать его для полноценного создания сайта или оставить только для постов? ⬜️

С релизом редактора Gutenberg в WordPress многие веб-разработчики и владельцы сайтов задаются вопросом: можно ли использовать Gutenberg для полноценной разработки сайта или лучше оставить его только для создания постов в блоге? В этой статье мы рассмотрим плюсы и минусы.

Плюсы использования:

⬜️ Гибкость и удобство: Gutenberg предлагает блоки, которые позволяют гибко организовывать и стилизовать контент на странице. Это упрощает создание разнообразных макетов и дизайнов без необходимости в дополнительных плагинах или кодировании.

⬜️ Визуальный редактор: Gutenberg предоставляет визуальный редактор, который позволяет видеть, как будет выглядеть контент уже на сайте. Это упрощает процесс редактирования и форматирования контента.

⬜️Возможность расширять функционал через код: Gutenberg имеет хорошее API, что позволяет создавать собственные блоки и дополнять существующие. Это открывает новые возможности, но требует много времени и доступно только для программистов.

Минусы использования:

Ограниченные возможности: Несмотря на то, что Гутенберг предлагает множество блоков для создания разнообразного контента, у него все еще есть ограниченные возможности по сравнению с классическим редактором или другими редакторами контента. Он не дотягивает до других конструкторов страниц и не покрывает все задачи.

⬜️ Засорение кода: Gutenberg генерирует очень много вложенности и оболочек при создании довольно простых элементов. Особенно ярко эта проблема проявляется в FSE.

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

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

WEB PANDA#wordpress
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥52