TGViewer
Channel Public Channel
Фриланс и веб с OlegTix | WordPress

Фриланс и веб с OlegTix | WordPress

@web_panda

Блог про веб-разработку и wordpress от Senior разработчика.

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

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

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

Позвать друзей: https://t.me/web_panda
Subscribers
410
Photos
262
Videos
10
Links
298

Showing posts older than #297 · Back to latest

Older Posts 20 shown
Post #296 568
  • 🔥 5
  • 👍 2
Post #295 597
⬜️ Что такое SCSS и SAAS ⬜️

ℹ️ SCSS — это препроцессор для написания CSS кода. SCSS дает дополнительные возможности. В этой статье мы будем говорить о SCSS, а также его различии с Sass.

✏️ SCSS пишется в отдельных файлах с расширением .scss, например main.scss.
Он не подключается в браузер напрямую. Браузеры не умеют с ним работать. SCSS компилируется (собирается) в привычный для браузера CSS код, и уже CSS файл подключается на страницу.

🔄 Для того, чтобы скомпилировать SCSS в CSS, нужно использовать компилятор. Это может быть специальная программа: Koala, Prepros, или другая. Либо плагин для редактора. Или инструмент для сборки проекта: Gulp, Webpack или другой.

🌐 В WordPress же можно использовать специальные плагины для него, например WPCodeBox.

⁉️ Для чего используют SCSS:
1) Вложенные селекторы и медиа запросы
2) Подключение фрагментов, импорт других файлов
3) Миксины. Можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями.
4) Функции

👩‍💻 Отличие scss от sass. У SCSS - синтаксис строгий, а у SASS - свободный. К примеру, в SASS можно не писать фигурные скобки для разметки стилей, а в SCSS - это обязательно. Сейчас практически все используют scss, так как он более привычен.

➡️ Пост в Telegram не позволяет подробно описать данный препроцессор. Это был краткий обзор на инструмент с перечислением его возможностей и особенностей. Если вы хотите более подробно ознакомиться с этим инструментом, то рекомендую изучить документацию.

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

WEB PANDA | #верстка #css
  • 👍 12
  • 🔥 3
  • 👌 2
Post #294 576
⬜️ Как фильтровать посты или custom post type ⬜️

Многие в WordPress чатах и в интернете интересуются созданием фильтра. Если вы используете woocommerce, то для фильтрации товаров есть встроенные фильтры, а также множество плагинов. Но как быть, если нужно фильтровать записи, страницы или custom post type по рубрикам, произвольным полям?

Для этого есть плагин Filter Everything. Данный плагин позволяет сделать AJAX фильтрацию любого типа контента по любым параметрам. Кроме того имеет очень гибкую настройку и супер мощный функционал.

Плюсы:
⬜️ Поддерживает ajax фильтрацию.

⬜️ Генерирует свои url и позволяет настроить мета теги для SEO.

⬜️ Огромный функционал. Можно фильтровать записи, страницы, товары и произвольные типы записей.

⬜️ Хорошая документация для разработчиков. Есть фильтры и хуки для кастомизации.

Минусы:
⬜️ Часть функционала только в платной версии.

⬜️ Нет официальной RU локализации, но можно сделать её самому или купить в интернете.

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

WEB PANDA | #wordpress #плагины
  • 👍 11
  • 🔥 2
  • 👌 2
Post #293 555
⬜️ Gutenberg: Использовать его для полноценного создания сайта или оставить только для постов? ⬜️

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

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

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

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

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

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

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

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

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

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

WEB PANDA |  #wordpress
  • 👍 15
  • 🔥 5
  • ❤ 2
Post #292 542
⬜️ Переключатель день/ночь ⬜️

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

🔗 Посмотреть

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

WEB PANDA |  #codepen #верстка
  • 👍 9
  • 🔥 3
  • 👌 2
  • ❤ 1
Post #290 561
⬜️ Стоит ли переходить с 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 |  #оптимизация
  • 🔥 12
  • 👍 7
  • 👌 2
  • ❤ 1
Post #289 515
⬜️ Идеи для использования ChatGPT ⬜️

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

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

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

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

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

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

WEB PANDA |  #wordpress #сервисы #советы
  • 🤩 8
  • 👍 7
  • 🔥 3
Post #288 473
⬜️ Плагин для купонов WooCommerce ⬜️

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

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

🔗 Посмотреть

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

WEB PANDA |  #wordpress #плагины #woocommerce
  • 👍 9
  • 🤩 4
  • 👌 2
Post #287 500
⬜️ Набор иконок Ionicons ⬜️

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

🔗 Посмотреть

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

WEB PANDA |  #дизайн #сервисы
  • 👍 4
  • 🔥 1
  • 🤩 1
Post #286 466
⬜️ Плагин для локальных аватаров пользователей ⬜️

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

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

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

👍 Рейтинг: 4.5

🔗 Посмотреть

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

WEB PANDA |  #плагины #wordpress
  • 👍 4
  • 🔥 2
  • 👎 1
  • 👌 1
Post #285 455
⬜️ Генератор жидких форм ⬜️

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

🔗 Посмотреть

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

WEB PANDA |  #сервисы #дизайн
  • 👍 4
  • 🔥 3
  • 🤝 2
Post #284 374
⬜️ Сортировка комментариев WordPress ⬜️

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

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

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

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

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

WEB PANDA |  #wordpress
  • 👍 5
  • 🔥 3
  • 👌 2
  • ❤ 1
Post #283 495
⬜️ Сниппеты кода для WordPress ⬜️

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

🔗 Посмотреть

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

WEB PANDA |  #wordpress #сниппеты
  • 🔥 10
  • 👍 3
  • 🤩 3
Post #282 371
⬜️ Конвертор шрифтов с подключением в CSS ⬜️

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

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

🔗 Посмотреть

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

WEB PANDA |  #сервисы
  • 👍 6
  • 🔥 4
  • 👌 2
Post #281 375
  • 🔥 6
  • 👍 1
Post #280 350
⬜️ Сайты, которые сделаны с помощью Bricks Builder ⬜️

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

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

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

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

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


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

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

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

WEB PANDA |  #верстка #wordpress
  • 👍 5
  • 🔥 3
  • 💯 1
Post #279 360
⬜️ Тег цитаты <cite> ⬜️

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

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

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

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

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

📎 Источник

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

WEB PANDA |  #верстка
  • 👍 8
  • ❤ 2
  • 🔥 1
  • 🤔 1
Post #278 349
⬜️ Сниппет для сортировки 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'] = 'title';
$args['order'] = 'ASC';
$args['meta_key'] = '';
break;
case 'name_list_desc' :
$args['orderby'] = 'title';
$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
  • 👍 9
  • ❤ 3
  • 🔥 2
Post #277 375
⬜️ Бесплатная нейросеть для генерации изображений ⬜️

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

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

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

WEB PANDA |  #сервисы
  • 👍 7
  • 🤩 3
  • ⚡ 2
Post #276 339
⬜️ Расширения для браузера для wordpress ⬜️

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

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

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

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

WEB PANDA |  #wordpress
  • 👍 7
  • 🔥 4
  • 👌 3
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →