💎 Чистка wordpress 💎
Данный сниппет кода позволяет вам удалить ненужные ссылки из тега <head></head> в вашем сайте. Рекомендую использовать его на всех сайтах.
Код сниппета в комментариях.
❓ Интересны ли вам сниппеты? Публиковать ли ещё или лучше сосредоточиться на других темах? Пишите в комментариях.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #сниппет #wordpress #оптимизация
Данный сниппет кода позволяет вам удалить ненужные ссылки из тега <head></head> в вашем сайте. Рекомендую использовать его на всех сайтах.
Код сниппета в комментариях.
❓ Интересны ли вам сниппеты? Публиковать ли ещё или лучше сосредоточиться на других темах? Пишите в комментариях.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #сниппет #wordpress #оптимизация
👍13🔥1
💎 А вы знали это? 6 правил для написания качественного кода 💎
HTML теги нужно не просто использовать, чтобы красиво выглядело и работало, но и закладывать смысл.
Интересные особенности:
1) Есть теги для выделения текста в жирный. Теги
2) Такая же ситуация с
3) Если выделенный текст не имеет семантической важности, лучше использовать для него обычный
4)
5) Отдельные блоки должны быть обернуты в
Если у элемента нет видимой части для текста (например иконка соц. сети), то добавьте атрибут
Чтобы программа для чтения не пыталась читать декоративные элементы, то нам поможет атрибут
Ставьте лайки, если хотите вторую часть, а далее может и третью 😁.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #верстка #оптимизация
HTML теги нужно не просто использовать, чтобы красиво выглядело и работало, но и закладывать смысл.
Интересные особенности:
1) Есть теги для выделения текста в жирный. Теги
<b></b> и <strong></strong>. Они делают одно и то же, но в тег <strong> надо заворачивать текст, который важен. А тег <b> не несет никакого смысла в плане важности.2) Такая же ситуация с
i и em. И там, и там курсив, но em (emphasis) делает логический акцент на тексте, а i – нет.3) Если выделенный текст не имеет семантической важности, лучше использовать для него обычный
span. Например, так можно выделять иконки.4)
main в документе должен быть только один – в него помещается уникальная информация, отличающаяся от страницы к странице. В нем не должен быть сайдбар или шапка с подвалом.5) Отдельные блоки должны быть обернуты в
<section class="block"></section>. То есть надо делать так: <section>тут какой-то контент и html разметка</section>
А не так: <div class="block">тут какой-то контент и html разметка</div>
6) Атрибуты для улучшения доступности. Для всплывающих окон добавляйте атрибут role="dialog" главному элементу. Если у элемента нет видимой части для текста (например иконка соц. сети), то добавьте атрибут
aria-label="telegram".Чтобы программа для чтения не пыталась читать декоративные элементы, то нам поможет атрибут
aria-hidden="true"
🥇Помните, что надо всегда стремиться делать сайт не только красиво, но и качественно.Ставьте лайки, если хотите вторую часть, а далее может и третью 😁.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #верстка #оптимизация
👍15🔥2
💎 Создание своей переменной Rank Math 💎
Часто случается, когда дефолтных переменных для генерации мета тегов страницы не хватает.
Например, нужно выводить значение из произвольного acf поля или даже из произвольного поля в категории, где находится пост.
В этом случае мы можем легко создать новую переменную через небольшой сниппет кода.
💥 Сниппет кода в комментариях.
Пост про вставку кода.
Нужно ли такой же сниппет кода, но уже для Yoast seo?
⚠️ Не забудьте заменить в коде значения полей под свои нужны.
WEB PANDA | #wordpress #seo #сниппет
Часто случается, когда дефолтных переменных для генерации мета тегов страницы не хватает.
Например, нужно выводить значение из произвольного acf поля или даже из произвольного поля в категории, где находится пост.
В этом случае мы можем легко создать новую переменную через небольшой сниппет кода.
💥 Сниппет кода в комментариях.
Пост про вставку кода.
Нужно ли такой же сниппет кода, но уже для Yoast seo?
⚠️ Не забудьте заменить в коде значения полей под свои нужны.
WEB PANDA | #wordpress #seo #сниппет
👍5🔥3
💎 Лучший оптимизатор картинок 💎
TinyPNG - уменьшает размер изображений без потери качества. Пожалуй лучший из всех, которые существуют.
Обязательно прокидывайте все свои картинки через него перед загрузкой. Даже для самой маленькой картинки сэкономит пару кб, а для больших экономия огромная.
Перейти на сайт
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #сервисы #оптимизация
TinyPNG - уменьшает размер изображений без потери качества. Пожалуй лучший из всех, которые существуют.
Обязательно прокидывайте все свои картинки через него перед загрузкой. Даже для самой маленькой картинки сэкономит пару кб, а для больших экономия огромная.
Перейти на сайт
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #сервисы #оптимизация
👍5🔥1
💎 Новая тема от разработчиков WordPress💎
Незаметно подкралась тема Twenty Twenty-Three от wordpress.
Каждый год WordPress выпускает новую тему, которую называют именем года. Например в прошлом году была Twenty Twenty Two.
👀 Особенности темы:
1) Сделана полностью на Gutenberg с использованием Site editor.
2) Есть возможность менять цветовые палитры и шрифты одним нажатием кнопки.
Дизайн у неё конечно слишком минималистичный и большой. Я заметил такую закономерность, что с каждым годом дизайн становится всё проще и проще.
На канале появился новый хештег #новости. Буду время от времени их публиковать.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #wordpress #новости
Незаметно подкралась тема Twenty Twenty-Three от wordpress.
Каждый год WordPress выпускает новую тему, которую называют именем года. Например в прошлом году была Twenty Twenty Two.
👀 Особенности темы:
1) Сделана полностью на Gutenberg с использованием Site editor.
2) Есть возможность менять цветовые палитры и шрифты одним нажатием кнопки.
Дизайн у неё конечно слишком минималистичный и большой. Я заметил такую закономерность, что с каждым годом дизайн становится всё проще и проще.
На канале появился новый хештег #новости. Буду время от времени их публиковать.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #wordpress #новости
👍6🔥1
💎 Плавная прокрутка наверх на чистом css 💎
Сегодня наткнулся на очень крутое свойство
Благодаря ему вы будете получать плавную прокрутку наверх без использования js.
Полезно для создания кнопки прокрутки наверх.
Создать кнопку прокрутки вы также можете через плагин Scroll To Top.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #верстка #плагины #wordpress
Сегодня наткнулся на очень крутое свойство
scroll-behavior: smooth;
Его надо прописывать на тег <html>.Благодаря ему вы будете получать плавную прокрутку наверх без использования js.
Полезно для создания кнопки прокрутки наверх.
Создать кнопку прокрутки вы также можете через плагин Scroll To Top.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #верстка #плагины #wordpress
👍5🔥3
Какой тег используют для навигации/меню?
Anonymous Quiz
4%
<div>
9%
<navigation>
83%
<nav>
4%
<navigate>
👍2🔥1
Какого html тега не существует?
Anonymous Quiz
53%
<optgroup>
6%
<date>
14%
<time>
27%
Все существуют
👍3🔥1
👍3🔥2
💎 Плагин для ajax фильтрации чего угодно с огромным функционалом 💎
Плагин Filter Everything позволяет вам фильтровать любой контент через произвольные поля, атрибуты, таксономии.
Плюсы:
👍 Поддерживает ajax фильтрацию.
👍 Генерирует свои url и позволяет настроить мета теги, что хорошо для seo.
👍 Огромный функционал. Можно фильтровать записи, страницы, товары и произвольные типы записей.
👍 Хорошая документация для разработчиков. Есть фильтры и хуки для кастомизации.
Минусы:
👎 Часть функционала только в платной версии.
👎 Тех. поддержка только платная.
Лично я использую этот плагин на всех проектах, когда нужно сделать фильтрацию.
✨У плагина нет русской локализации, но есть украинская.
Если вам нужна русская локализация, то за 200р вы можете приобрести её у админа.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #wordpress #плагины
Плагин Filter Everything позволяет вам фильтровать любой контент через произвольные поля, атрибуты, таксономии.
Плюсы:
👍 Поддерживает ajax фильтрацию.
👍 Генерирует свои url и позволяет настроить мета теги, что хорошо для seo.
👍 Огромный функционал. Можно фильтровать записи, страницы, товары и произвольные типы записей.
👍 Хорошая документация для разработчиков. Есть фильтры и хуки для кастомизации.
Минусы:
👎 Часть функционала только в платной версии.
👎 Тех. поддержка только платная.
Лично я использую этот плагин на всех проектах, когда нужно сделать фильтрацию.
✨У плагина нет русской локализации, но есть украинская.
Если вам нужна русская локализация, то за 200р вы можете приобрести её у админа.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #wordpress #плагины
👍7👎1🔥1
В каком году появился официальный стандарт html?
Anonymous Quiz
7%
2001
25%
1980
36%
1995
8%
1896
24%
1997
👍7
💎 Бегущая строка элементов на чистом css 💎
Часто в дизайне требуется реализовать бегущие повторяющиеся элементы. Для этого совсем не нужно использовать js.
В примере сделано через @keyframes на чистом css.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #codepen #верстка
Часто в дизайне требуется реализовать бегущие повторяющиеся элементы. Для этого совсем не нужно использовать js.
В примере сделано через @keyframes на чистом css.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #codepen #верстка
👍5🔥3
💎 Сайт каталог с лучшими сайтами и продуктами в IT 💎
Сайт Product Hunt - это место, где разработчики могут поделиться новинками мобильных приложений, веб-сайтов и прочих сервисов.
На сайте есть много разделов с продуктами разных категорий. Лично я уже много раз на нем находил качественные сайты.
Рекомендую изучить данный ресурс и время от времени заглядывать на него.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #сервисы
Сайт Product Hunt - это место, где разработчики могут поделиться новинками мобильных приложений, веб-сайтов и прочих сервисов.
На сайте есть много разделов с продуктами разных категорий. Лично я уже много раз на нем находил качественные сайты.
Рекомендую изучить данный ресурс и время от времени заглядывать на него.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #сервисы
🔥3
Какую категорию на канале вы хотите видеть чаще всего?
Anonymous Poll
30%
Сервисы / инструменты
46%
Сниппеты кода для wp
15%
Codepen
61%
Wordpress
10%
Новости
25%
Seo
31%
Оптимизация
24%
Дизайн
43%
WooCommerce
3%
Прочее (в комментариях)
💎 Сниппет кода для смены текста "Нет в наличии" woocommerce 💎
Данный сниппет позволяет изменить текст "Нет в наличии" на свой произвольный.
👀 Логика работы: Навешиваем на фильтр woocommerce функцию, которая принимает массив с информацией о наличии.
В этом массиве хранится два значения: класс и текст. Если класс равен "out-of-stock", то меняем второй элемент массива, а именно - текст.
Далее возвращаем измененный массив.
По желанию этот сниппет можно дополнить и изменить текст для других типов статуса заказа.
Код сниппета в комментариях.
Не знаете, как вставлять код?
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #woocommerce #сниппет #wordpress
Данный сниппет позволяет изменить текст "Нет в наличии" на свой произвольный.
👀 Логика работы: Навешиваем на фильтр woocommerce функцию, которая принимает массив с информацией о наличии.
В этом массиве хранится два значения: класс и текст. Если класс равен "out-of-stock", то меняем второй элемент массива, а именно - текст.
Далее возвращаем измененный массив.
По желанию этот сниппет можно дополнить и изменить текст для других типов статуса заказа.
Код сниппета в комментариях.
Не знаете, как вставлять код?
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #woocommerce #сниппет #wordpress
👍9🔥1
💎 Чат для помощи с wordpress 💎
Если у вас есть вопрос, который вы хотите задать, желаете быть в курсе событий wordpress или просто пообщаться, то предлагаю присоединиться к сообществу.
WEB PANDA | #wordpress
Если у вас есть вопрос, который вы хотите задать, желаете быть в курсе событий wordpress или просто пообщаться, то предлагаю присоединиться к сообществу.
WEB PANDA | #wordpress
👍6
💎 Плагин woocommerce "Купить в 1 клик" 💎
Плагин добавляет к товарам кнопку "Купить в 1 клик", где при нажатии появляется всплывающее окно с заполнением формы.
Далее вы можете увидеть заявку в админке или же в письме на почте.
Плюсы:
👍 Большая кастомизация
👍 Есть локализация
👍 Заявки хранятся в админке
👍 Хороший рейтинг
👍 В меру часто обновляется
Минусы:
👎 Простоватый дизайн. Но с помощью css можно всё отредактировать.
Альтернативы:
👀 Art WooCommerce Order One Click. Делает форму на основе contact form 7. Но есть большой минус - последнее обновление 2 года назад.
WEB PANDA | #wordpress #плагины #woocommerce
Плагин добавляет к товарам кнопку "Купить в 1 клик", где при нажатии появляется всплывающее окно с заполнением формы.
Далее вы можете увидеть заявку в админке или же в письме на почте.
Плюсы:
👍 Большая кастомизация
👍 Есть локализация
👍 Заявки хранятся в админке
👍 Хороший рейтинг
👍 В меру часто обновляется
Минусы:
👎 Простоватый дизайн. Но с помощью css можно всё отредактировать.
Альтернативы:
👀 Art WooCommerce Order One Click. Делает форму на основе contact form 7. Но есть большой минус - последнее обновление 2 года назад.
WEB PANDA | #wordpress #плагины #woocommerce
👍5🔥5
Что такое mu-plugins в wordpress?
Anonymous Quiz
20%
Таких нет
19%
Серия каких-то плагинов
7%
Альтернативное название плагинам
54%
Всегда активные плагины, которые нельзя отключить
👍7
💎 Самый простой способ выучить flex 💎
Без свойства display:flex уже ничего не сделаешь. Он используется на абсолютно всех сайтах для стилизации элементов.
Если вы делаете сайты на elementor или другом конструкторе, то вам все равно надо знать flex. Потому что в elementor уже давно он есть в экспериментах и скорее всего через год уже станет по умолчанию активным.
В более продвинутых конструкторах, например Oxygen или Bricks, он используется без какого-либо выбора. То есть там только flex и нет никаких колонок, как в elementor или wpbareky.
Сайт FlexBoxFroggy позволит вам выучить flex легко в игровой форме. Лично я когда очень давно начал его изучать прочитал кучу статей, но никак не мог нормально применять на практике, хоть и знал все свойства.
FlexBoxFroggy же помог мне упорядочить все знания по полочкам и успешно начать применять его при верстке без каких-либо раздумий.
WEB PANDA | #верстка #сервисы
Без свойства display:flex уже ничего не сделаешь. Он используется на абсолютно всех сайтах для стилизации элементов.
Если вы делаете сайты на elementor или другом конструкторе, то вам все равно надо знать flex. Потому что в elementor уже давно он есть в экспериментах и скорее всего через год уже станет по умолчанию активным.
В более продвинутых конструкторах, например Oxygen или Bricks, он используется без какого-либо выбора. То есть там только flex и нет никаких колонок, как в elementor или wpbareky.
Сайт FlexBoxFroggy позволит вам выучить flex легко в игровой форме. Лично я когда очень давно начал его изучать прочитал кучу статей, но никак не мог нормально применять на практике, хоть и знал все свойства.
FlexBoxFroggy же помог мне упорядочить все знания по полочкам и успешно начать применять его при верстке без каких-либо раздумий.
WEB PANDA | #верстка #сервисы
🔥4👍3
This media is not supported in your browser
VIEW IN TELEGRAM
💎 Иконки социальных сетей с эффектом наведения 💎
Написано на чистом css и html, что позволяет их легко кастомизировать и внедрить проект.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #codepen #верстка
Написано на чистом css и html, что позволяет их легко кастомизировать и внедрить проект.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #codepen #верстка
👍6
На канале уже вышло много постов, поэтому решил сделать подборку для новых участников:
1) 🚀 Ускорение сайта на WordPress
2) 🛡 Защита сайта на WordPress
3) 🖌 Сервисы для дизайна
4) 🛒 Стилизация woocommerce select на странице оформления заказа
5) 😎 Вставка любого кода в wordpress
6) 😶 Скрытый пользователь в wordpress
7) 🔥 Создание своей wordpress темы
🤝 Буду рад, если поделитесь каналом со своими знакомыми, это очень поможет в развитии канала.
WEB PANDA
1) 🚀 Ускорение сайта на WordPress
2) 🛡 Защита сайта на WordPress
3) 🖌 Сервисы для дизайна
4) 🛒 Стилизация woocommerce select на странице оформления заказа
5) 😎 Вставка любого кода в wordpress
6) 😶 Скрытый пользователь в wordpress
7) 🔥 Создание своей wordpress темы
🤝 Буду рад, если поделитесь каналом со своими знакомыми, это очень поможет в развитии канала.
WEB PANDA
🔥10👍3