Тема WP Residence для сайта недвижимости: заметки по настройке
#wpresidence #Вебмастеринг #сайтостроение #javascript #html #Wodpress
✅ Премиум тема WP Residence подойдет для сайтов по недвижимости на WordPress и агентств по недвижимости. Здесь будут некоторые заметки, которые могут пригодиться при редактировании темы.
💾 https://qfurs.ru/?p=2044

Как разом удалить все темы на Однаклассниках
#Вебмастеринг #сайтостроение #Одноклассники #JavaScript #автоматизация #Оптимизацияработы
❓Задача. Необходимо массово удалить разом все посты (темы, записи, заметки) в группе на Одноклассниках.

✅ В самой социальной сети функции удалить все посты сразу нет. Можно удалять только вручную. Чтобы автоматизировать данный процесс предлагаю использовать js-скрипт («костыль», конечно, но у меня получилось». Скрипт будет удалять только видимые на экране посты. Поэтому заранее необходимо страницу максимально прокрутить вниз, чтобы подгрузились все посты (это тоже автоматизируем).
См. полную статью
💾 https://qfurs.ru/?p=2145

ЯНДЕКС-КАРТЫ: ПЕРЕХОД К МЕТКЕ ПО КЛИКУ НА АДРЕС
#Яндекс #Вебмастеринг #сайтостроение #ЯндексКарты #Javascript
❓Необходимо вставить на сайт Яндекс-карту с несколькими метками, а рядом с картой список адресов что на карте. При клике на какой-то адрес на карте должен произойти переход к соответствующей метке.
✅ Алгоритм такой:
1 - Создать Яндекс-карту (НЕ через конструктор карт);
2 - Добавить скрипт обработки событий которые будут происходить по клику на метке и адресу;
3 - Добавить адресам атрибуты со значениями.
💾 https://qfurs.ru/?p=2249

Всплывающее окно HTML и CSS при нажатии на кнопку + Примеры
#CSS #Вебмастеринг #сайтостроение #HTML #программирование #Javascript #popup #Всплывающееокно
✅ Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).

Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript. + В статье есть подборка разных примеров.
💾 https://qfurs.ru/?p=2320

Справочник JavaScript Кратко быстро под рукой (Никольский А., Дубовик Е.)
#Книги #JavaScript #КнигиJavaScript

Сортировка HTML-таблицы на JavaScript
#CSS #Вебмастеринг #сайтостроение #HTML #Таблицы #Frontend #javascript #HTMLТаблицы
❓Задача. Необходимо сделать возможным сортировку HTML-таблицы по столбцам

✅ Решение. Для сортировки таблицы можно использовать библиотеку tablesort.js. Она не сложная и без jQuery. Там же, на официальном сайте можно и посмотреть как настраивать.
(см. статью)
💾 https://wpcraft.top/?p=2628

Как сделать оглавление (содержание) для статей автоматически
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #javascript #Wordpress
❓Задача. Необходимо сделать вывод оглавлений (содержания) статей в постах автоматически. Сложность заключается в том что на странице часть контента выводится не через функцию the_content(), а выше нее по шаблону.

✅ Решение. Для WordPress есть хорошие плагины для вывода содержания статьи, но они работают с функцией the_content() и выведут только те заголовки, которые попали в неё. Поэтому в данной ситуации лучше будет использовать JavaScript.

1 Автоматическое создание и вывод содержания статьи с помощью JavaScript и jQuery
2 Автоматический вывод оглавлений статьи в WordPress
3 Подборка решений оглавлений статей в HTML
(см. статью)
💾 https://wpcraft.top/?p=2654

Как проверить ввод данных адреса Email и номера телефона
#Вебмастеринг #сайтостроение #HTML #javascript #email #phone #РегулярныеВыражения
❓Задача. Необходимо решение для проверки поля ввода на соответствие формату email-адреса почты и номера телефона при отправке формы.

✅ Решение. На Javascript можно реализовать проверку вводимой информации с помощью регулярных выражений. Используем Код №1 из Примера №1. Телефон проверяем так, чтобы первая была «+» или цифра, остальные — цифры, скобки и пробелы.

Суть в том, что на кнопку вешаем событие и при клике вызываем функции, которые получают содержимое полей и проверяют соответствие содержимого (в примере это функции ValidPhone и ValidEmail). В каждой функции мы содаем регулярные выражения (шаблоны), согласно котором будут проверяться вводимые данные.
Метод для регулярного выражения — .test(str) ищет совпадение и возвращает true/false, в зависимости от того, нашел ли он его или нет.
💾 https://wpcraft.top/?p=2872

JavaScript: Делаем 3D-карусель с Cloud 9 Carousel
#Вебмастеринг #сайтостроение #HTML #javascript #3d #Карусели #Слайдеры #frontend
❓Задача. Необходимо сделать 3D-карусель изображений с помощью JavaScript плагина «Cloud 9 Сarousel».

✅ Решение. Плагин «Cloud 9 Сarousel» работает с библиотеками jQuery и Zepto, поддерживает прокрутку колесом мыши (нужно установить плагин mousewheel).

Подключаем jQuery 1.3.0 и выше или Zepto 1.1.1 и выше
Скачиваем и подключаем jquery.cloud9carousel.js или подключаем как внешний файл из источника.
Назначаем контейнеру карусели и его элементам индетификатор и классы для привязки к плагину.
Инициализируем карусель $(elem).Cloud9Carousel(opt). Подробнее в Код №1 (См. статью)
💾 https://wpcraft.top/?p=2936

Вкладки на JavaScript
#Вебмастеринг #сайтостроение #HTML #javascript #jquery #Вкладки #Табы #frontend #tabs
❓Задача. Нужно сделать вкладки и настроить переключение между ними с помощью JavaScript.

✅ Решение. Этот вариант подойдет если вкладки верстаются с нуля или есть возможность добавить свои классы и индетификаторы в код Примеру №1 и Коду №1. (См. статью)

+ Подборка примеров
💾 https://wpcraft.top/?p=2996

  WOOCOMMERCE: ДРОБНОЕ КОЛИЧЕСТВО ТОВАРА + КОЛИЧЕСТВО УПАКОВОК
#wordpress #woocommerce #вебмастеринг #WpCraft #Интернетмагазин #WoocommerceСкрипты #WordpressСкрипты #WordpressМеню #javascript
❓Задача. Часть товаров продаются по цене за м², но в упаковках. Необходимо на таких страницах товара добавить поле ввода числа упаковок при изменении которого будет изменяться стандартное поле количества товаров. Также нужно настроить поле количества товаров так, чтобы можно было вводить дробные числа, т.к. в упаковке, в большинстве случаев, будет не дробное число.

✅ Решение: Алгоритм вывода кастомного поля товара и настройки дробного количества товара:

1. Сделать пользовательское поле в настройках товара (Код №1.1) в котором будем задавать шаг количества товара (оно же количество товара в одной упаковке).
2. Вывести на странице товара поле количества упаковок и цену за упаковки .
3. Сделать поле количества товара дробным в том случае, если в товаре задано значение поля шага из п.1.
4. Через код JavaScript настроить изменения полей количества товара и упаковок при изменении каждого. Также нужно чтобы был подсчет общей суммы за упаковки.
================

💾 См. статью https://wpcraft.top/?p=3355

https://vk.com/video-156714483_456239025

Копирование и сохранение текста в файл .txt на JavaScript
#Программирование #JavaScript #вебмастеринг #WpCraft #JS #HTML
❓Задача. Реализовать скачивание текста в текстовом файле .txt из определенного элемента на странице.

✅ Решение: На JavaScript можно сделать скачивание контента в виде текстового файла так:

 /* Сохраняемый контент */
let btnDownloadText = document.querySelector("#btn-dwnld-txt");
 
/* Вешаем на событие клика кнопки функцию */ 
btnDownloadText.addEventListener("click", downloadText);
 
/* Сохранить строку без html-тегов и скачать в файле */ 
function downloadText() { 
 let copytext = document.querySelector('#example-text').textContent; // id элемента с контентом #example-text 
 let el = document.createElement('a'); 
 el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(copytext)); 
 el.setAttribute('download', 'my-text.txt'); 
 el.style.display = 'none'; 
 document.body.appendChild(el); 
 el.click(); 
 document.body.removeChild(el); 
 }

💾 Подробнее см. статью https://wpcraft.top/?p=3445

Показать-скрыть элемент, развернуть-свернуть под кат на jQuery
#Программирование #JavaScript #вебмастеринг #jQuery #WpCraft #JS #HTML
❓Задача. Есть блок с плиткой тегов, который имеет на разных страницах разное количество элементов. Когда этих элементов много и они не помещаются в одну строку. Нужно под блоком добавить кнопу «Развернуть-Свернуть»

✅ Решение: Подробнее в статье.

<script> 
 // Скрипт свернуть развернуть элемент 
 $(document).ready(function() { 
  var closeHeight = '80px';  // Высота блока в свернутом виде 
  var moreText  = 'Развернуть'; 
  var lessText = 'Свернуть'; 
  var duration = '1500';  // Продолжительность анимации 
  var easing = 'linear'; 
  var collapsElement = '#tags-tiles'; // Идентификатор или класс элемента, который будет сворачиваться 
   
  var current = $(collapsElement); // Получаем элемент, который будет сворачиваться 
   
  // Если элемент больше нужной высоты, то добавляем Развернуть/Свернуть 
  if (current.height() > parseInt(closeHeight)){ 
   current.data('fullHeight', current.height()).css('height', closeHeight); 
   current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>'); 
  
   var openSlider = function() { 
    link = $(this); 
    var openHeight = link.prev(collapsElement).data('fullHeight') + 'px'; 
    link.prev(collapsElement).animate({'height': openHeight}, {duration: duration }, easing); 
    link.text(lessText).addClass('open').removeClass('closed'); 
    link.unbind('click', openSlider); 
    link.bind('click', closeSlider); 
   } 
 
   var closeSlider = function() { 
    link = $(this); 
    link.prev(collapsElement).animate({'height': closeHeight}, {duration: duration }, easing); 
    link.text(moreText).addClass('closed').removeClass('open'); 
    link.unbind('click'); 
    link.bind('click', openSlider); 
   } 
   
   $('.more-link').bind('click', openSlider); 
  } 
 }); 
</script>

💾 Подробнее см. статью https://wpcraft.top/?p=3669

Как обернуть HTML-элемент в тег noindex
#Программирование #JavaScript #вебмастеринг #WpCraft #JS #HTML
❓Задача. Нужно с помощью JavaScript добавить тег комментарий в код HTML, обернуть конкретный элемент в тег <!--noindex-->.

✅ Решение: Скрипт:

<script>
/* Обернуть элемент по id в тег noindex */

let elem = document.querySelector('#my-elem');
elem.insertAdjacentHTML('beforebegin', '<!--noindex-->');
elem.insertAdjacentHTML('afterend', '<!--/noindex-->');
</script>

💾 Подробнее см. статью https://wpcraft.top/?p=3848

КАК СДЕЛАТЬ МАСКУ ВВОДА ТЕЛЕФОНА В HTML НА JAVASCRIPT
#wordpress #Javascript #JS #ContactForm7 #CF7 #HTML #WpCraftTop

❓Задача: На всех формах где есть поле ввода для телефона добавить ввод номера по маске.

✅ Решение. Используем плагин для jQuery «Masked Input Plugin for jQuery». Соответственно, должен быть jQuery подключен.
Алгоритм настройки маски телефоная для формы:
1 - Скачать библиотеку и загрузить файл плагина 'jquery.maskedinput.min.js' на сервер.
2 - Подключить библиотеку.
3- Добавить скрипт с настройками для каких форм применять.

...
💾 Код: https://wpcraft.top/?p=3873

 КАРУСЕЛЬ С РАЗНЫМ ВИДОМ КОНТЕНТА: видео, текст, Youtube

#wordpress #Javascript #JS #OwlCarousel #jQuery #frontend #Carousel #WpCraftTop

❓Задача: Нужно сделать на странице сайта карусель (слайдер) с разным типом контента — видео, текст, вставка видео из Youtube. Такое можно увидеть, например, при отображении блока с отзывами, где один элемент — текстовый, другой — видео

✅ Решение. Для создания карусели можно взять js-библиотеку Owl Carousel 2 (также нужен jQuery).

Алгоритм создания карусли из разного типа контента:

Создаем HTML-макет карусели и перед самой каруселью подключаем библиотеку Owl-Carousel и jQuery. Если на WordPress, то загружаем файлы Owl-Carousel на сервер и подключаем в functions.php.
Инициализируем карусель. Тут нужно обернуть блоки в классы owl-carousel owl-theme, чтобы стили применялись, а класс carousel_box может быть любым (можно через id).
Добавляем стили для кастомной кнопки. <button class="v_play"></button> может задаваться разными тегами, но должен идти сразу за видео.
Добавляем JS-скрипт, который будет обрабатывать кнопку воспроизведения видео.

...
💾 Код: https://wpcraft.top/?p=4123

Отложенная загрузка скриптов, Youtube, iframe, video
#javascript #js #html #pagespeed #lazyload #оптимизациясайт #WpCraftTop
❓Задача. На сайте могут добавляться скрипты (часто внешние), iframe и другие элементы, которые добавляют на страницу различные элементы или функциональности, например: электронные читалки, аудиоплееры, виджет чата, видео-плеер и прочее. Как правило это влияет на скорость загрузки сайта и оценку в Pagespeed.web.dev, т.к. внешние скрипты подгружают свои элементы, шрифты и скрипты. В большинстве случаев нет необходимости загружать такие скрипты сразу при загрузке страницы.
✅ Достаточно отложить их загрузку и инициализировать только при каком-то событии. Например при клике на кнопку или движении мыши.
А также можно использовать Intersection Observer API.

Смотреть: https://wpcraft.top/otlozhennaya-zagruzka-skriptov-youtube-iframe-video-html/

Подборка слайдеров сравнения "До и После" с использованием CSS, JavaScript или jQuery [Before After Slider]
#CSS #JavaScript #jQuery #Slider
🚀 Смотреть https://wpcraft.top/slajder-sravneniya-do-i-posle-podborka-na-css-i-js/

Установка Node.js на Windows 7
#Node #Windows #nodejs #Javascript #Программирование

❓Задача. На Windows 7 нужно установить Node.js, но на оффициальном сайте предлагается версия, которая расчитана на Windows 8.1 и выше.

✅ Алгоритм установки:
1 - Скачать архив node-v16.14.0-win-x64.zip.
2- Создать папку C:\Program Files\Nodejs и распаковать в нее содержимое архива.
3 - Изменить Системные переменные:
3.1 - найти переменную Path и изменить ее, добавив путь к созданной ранее папке ;C:\Program Files\Nodejs\.
3.2 создать переменную NODE_SKIP_PLATFORM_CHECK со значением 1.
3.3 - создать ещё одну переменную NODE_PATH со значением пути к папке C:\Program Files\Nodejs\ (уже без точки с запятой).
4 - Перезагрузить компьютер.
5 - Проверить (Win+R) cmd вводитм команду node -v — в результате должно вывести версию платформы.

💾 Подробнее https://wpcraft.top/kak-ustanovit-node-js-na-windows-7/

#JavaScript #PHP #Разработка_под_Gutenberg #Gutenberg #JavaScript #metaboxes #php #React #WordPress #видео_урок

Как добавить метабоксы и произвольные поля к постам в Гутенберге

Поля произвольных данных (метабоксы) служат для добавления ...