Прежде всего этот сайт — моя записная книжка, в которой собрана информация, часто используемая при создании сайтов. Здесь я оставляю заметки с кодом для себя.Может быть что-то, будет полезно и другим разработчикам.
Иногда необходимо посмотреть как на сайте сделан hover эффект. Это бывает нужно, чтобы увидеть css правила, с помощью которых реализуется определенное поведение элемента при наведении на него стрелки мыши.
Но зачастую при просмотре инспектором браузера не удается увидеть эти свойства. Показываются только css правила не связанные с псевдоклассом hover. Сам долго времени тратил на нахождение, пока мне не подсказали, что во всех браузерах при просмотре кода инспектором есть специальная кнопка
Существуют разные пути редактирования содержимого областей шаблона вордпресс. Самыми популярными из них является редактирование областей с помощью виджетов, плагинов (например плагины конструкторы контента, плагины вставки произвольных шорткодов ) и настройки темы.
Для того, чтобы добавить четыре простые настройки в Настроить» в административном разделе сайта необходимо в functions.php вставить следующий код: Читать далее «Как добавить свои настройки в тему вордпресс»
Для анализа юзабилити сайта и эффективности отдельных элементов страниц используют цели. В приведенном ниже коде для отслеживания события клика по кнопке используется jquery:
$("#sendMessage_OneClick").click(function(e) {
gtag('event', 'click', {
'event_category': 'quick_shop',
'event_label': 'quick-button'
});
yaCounter19340647.reachGoal('quick_shop');return true;
});
Очень часто цели метрики вешают прямо на элемент. То есть прямо на кнопку добавляют событие onsubmit с кодом от ЯМ или ГА. Но такой подход очень тяжел, не всегда быстро и легко найти место в шаблоне, где можно привязать метрику к необходимому элементу.
Чтобы убрать на странице циклические ссылки
<script>
"use strict";
document.querySelectorAll("li a").forEach((item) => {
if(item.href === document.location.href) item.href = "#";
});
</script>
Если у интернет-магазина, созданного с помощью плагина вукомерц на карточке товара и в общем виде категорий товаров нет кнопок для отправки товара в корзну, то это можно легко исправить. В php файлах плагина при построении страницы идет проверка цен товаров, и в случае если цены не заданы, то считается, что товара нет и купить его нельзя. Именно поэтому плагин и не выводит данные кнопки.
То есть для того, чтобы эти кнопки появились нужно просто задать цены товаров. Кнопки «Купить» появятся, даже если поставить 0 вместо цены. Цена должна быть задана.
Очень часто в интернет магазинах существует необходимость в замене местами табов «Описание», «Характеристики», «Отзывы» и т.д. Например в магазине, который специализируется на продаже техники, либо продукции имеющей много технических параметров правильнее первым табом ставить «Характеристики». В таком случае у пользователя перед глазами сразу будут необходиме технические характеристики.
Система управления сайтом джумла является самым большим генератором дублей страниц. Например, была ситуация, года дописывая «/любое число» к адресу сайта страницы открывалась с содержимым главной страницы. То есть фактически главная страница имела бесконечное число дублей. Читать далее «Дубли страниц joomla»
Лендинг представляет собой одностраничный сайт. У него вся информация расположена на одной странице в виде секций. Если одна либо несколько секций содержит большое количество изображений, то для увеличения скорости загрузки сайта целесообразно использовать ленивую загрузку изображений (lazy load). Эта техника заключается в том, что при загрузке страницы помеченные изображения не прогружаются, вместо них показывается заглушка. Когда же пользователь прокручивает страницу до картинки, то вместо заглушки с сервера загружается изображение. Таким приемом можно существенно сэкономить вес загружаемой страницы. Читать далее «Lazy Load на лендинг»
Если необходимо при открытии определенных страниц на мобильных устройствах делать прокрутку до контента(например, что исключить просмотр большой шапки), то сделать это можно с помощью следующего кода:
<script>
$(document).ready(function(){
if(document.body.clientWidth < 769) {
$('html,body').stop().animate({ scrollTop: $('#page1').offset().top }, 1000);
e.preventDefault();} else{}
});
</script>
В данном случае при ширине экрана устройств менее 769 пикселей будет происходить плавная прокрутка до якоря page1.
Оптимизация изображений сайта позволяет значительно уменьшить их вес и соответственно повысить скорость работы сайта. Если картинок на сайте немного или они добавляются постепенно с течением времени, то это можно сделать с помощью сторонних сервисов, например такого как optimizilla. Только вот там есть ограничение — загрузить для оптимизации за раз более чем 20 картинок не удастся. А если есть сайт, с тысячами картинок, которые нужно оптимизировать?
Поиск в интернете толком ничего не дал. Да есть какие то 4 расширения Imgen,Image Recycle,EIR,Prizm Image. Из них eir и imgen не оптимизируют изображения, а просто обрезают их до определенного размера. Prizm Image вообще уже удален из каталога расширений для джумла. Остается только Image Recycle — делает именно то что нужно, но он платный. Бесплатно можно оптимизировать не более 100Мб картинок либо в меньшем объеме пользоваться им две недели. Далее по тарифам, цена которых начинается от 10 долларов, именно за эту сумму можно оптимизировать 1Гб картинок.
Работает расширение хорошо, оптимизированные картинки визуально в качестве не теряют. Если ручками их потом подсунуть сервису оптимизилла, то показывает что обжать можно еще на 1-2 процента.