Сразу скажу, автор данного модуля ocext.com, полное название модуля YML import — OCext OpenCart Data Management PRO, версия 2.6.0.0 для OpenCart 2.3.x. Разработчик распространяет его платно. Но я нашел в интернетах бесплатный зануленый вариант, перекопал код в каждом файле, удалил вредоносный код и проверил на работоспособность в ocStore 2.3.0.2.3. Поэтому скачивая данный модуль, можете быть уверены в его работоспособности и безопасности!
Подключать будем библиотеку отсюда. Там же можно посмотреть demo. Называется Lightbox2 от разработчика Lokesh Dhakar. Достаточно простое решение, не перегруженное, изображения в лайтбоксе будут адаптироваться под любые размеры мониторов на любых мобильных устройствах.
Так же отмечу, что из всех js плагинов лайтбоксов, которые уже протестировал, у этого варианта, по моему мнению, достаточно высокое быстродействие. По сути на скорость загрузки страницы не влияет, а это является не маловажным фактором.
Итак, делаем всё по инструкции для подключения Lightbox изображений в Вашей теме WordPress:
Скачиваем и распаковываем архив с файлами Лайтбокса.
Ищем папку «src», в ней есть три папки, которые нужно скопировать в корень папки Вашего шаблона WordPress.
Затем в файле header.php между нужно подключить файлы Лайтбокса вот так: <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/lightbox.css"> <script src="<?php bloginfo('template_url'); ?>/js/lightbox.js"></script>
После этого в файл functions.php нужно вставить этот код: <?php add_filter('the_content', 'addrellightbox'); function addrellightbox($content) { global $post; $pattern ="/<a(.*?)href=('|")(.*?).(bmp|gif|jpeg|jpg|png)('|")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 data-lightbox="image"$1 title="'.$post->post_title.'"$6>'; $content = preg_replace($pattern, $replacement, $content); return $content; } ?>
Изображения в посты нужно вставлять как медиафайл:
Теперь у Вас есть красивый, простой, адаптивный Lightbox для изображений 😉 Пишите комменты, делитесь статьёй в соц. сетях.
В интернетах по этому поводу написано огромное количество статей. Но все эти варианты реализации кнопок соц. сетей для WordPress сложные или на основе тяжелых плагинов. Поэтому я сделал сам простые рабочие кнопки. А именно кнопки поделиться для Facebook, Telegram, Viber, Twitter, Google+, VK, OK и Whatsapp. Кода мало, нагрузки минимум, универсальное использование. Выглядят они вот так:
Для установки кнопок соц. сетей для WordPress нужно выполнить простые шаги:
В файле header.php между <head></head> подключаем шрифты FontAwesome для красивого отображения иконок: Смотреть полностью
В некоторых статьях блога Gravitsapa.info присутствую видео с Youtube, которые вставлены самым обычным способом: Видео вставленное на сайт просто с таким кодом не является адаптивным. На мобильных устройствах будет выходить за рамки экрана. В интернетах находил решение, где данный iframe помещают в div контейнер с любым классом и задают css стили для адаптивности. Но мне такое решение не понравилось, так как если на сайте уже присутствует множество встроенных видео с Ютуба, то слишком трудоёмко будет каждое оборачивать в div блок. Поэтому был написан простенький скрипт, который находит на странице такое видео и задаёт ему ширину 100% вместо фиксированной ширины.
Для моего сайта скрипт выглядит следующим образом: <script> $(document).ready(function() { var vidos = $('article iframe'); //article текущий блок в котором iframe vidos.attr('width','100%'); }); </script> Вставить его можно между <head>…</head>
Этот скрипт подходит для любого другого сайта. Нужно лишь «article» заменить на класс или ид того блока, где находится iframe. Например, если код будет выглядеть так: <div class="post"><iframe width="560" height="315" src="https://www.youtube.com/embed/2Vo0lhfE8Jo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> …то в скрипте вместо article iframe нужно написать .post iframe Таким образом редактировать ничего не нужно, никакими дополнительными div блоками оборачивать видео ненужно и писать дополнительные CSS стили тоже не нужно. Решение простое и универсально, за это спасибо программисту от бога @only_darkangel (Телеграм).
Данное задание размещено на одном из крупнейших ресурсов СНГ в качестве теста на фронтендщика…
Итак! Имеем блок с текстом: <div class="example">Дважды <span>два</span> - пять</div>
Задание изложено следующим образом: Дан фрагмент HTML. Используя только нативный JavaScript исправьте текст, следующий после тега <span> так, чтобы элемент <span> остался незатронутым.
Решение данной задачи следующее: <script> document.getElementsByClassName('example')["0"].childNodes[2].textContent = " - шесть"; </script>
И короткое разъяснение кода для понимания того, что происходит:
document — наша страничка
.getElementsByClassName('example') — выбираем содержимое контейнера с классом example
["0"] — имеем массив содержимого контейнера, и нам нужен его первый элемент
.childNodes — в этом объекте находятся дочерние элементы, их трое: текст до спана, спан, текст после спана.
[2] — выбираем текст после спана
.textContent = " — шесть" — присваиваем этому элементу свой текст
Автор решения @only_darkangel (Telegram). Спасибо за внимание 😉
Итак, имеем менюху с выпадающими списками. В стилях это реализовано как display: none по умолчанию для подменю. И display: block для подменю при hover на основное меню.
Хотим сделать анимацию и задержку появления меню. Используем стиль transition с параметрами или просто стиль паузы transition-delay. Но из-за того, что подменю изначально назначено display: none, то transition работать не будет.
Для этого вместо display: none и display: block будем использовать opacity: 0; visibility: hidden; и opacity: 1; visibility: visible;.
В Moguta CMS, что бы организовать более функциональные отзывы в товарах обычно используют плагин «Древовидные комментарии». Работает он отлично и есть в нём дополнительно функция для вывода количества комментариев, вот такой шорткод [mg-treelike-count-comments item="" type=""].
А вот таким шорткодом мы выводим сами комментарии в табе комментариев страницы товара [mg-treelike-comments type=""]. Вставлять его нужно в файле mg-templates/default/views/product.php в div с id="tab2".
Итак, а что бы заработал первый шорткод и начал выводить количество отзывов к определённому товару, нужно в параметре item указать относительную ссылку на сам товар. Т.е. выглядеть это должно например так [mg-treelike-count-comments item="/ssilka-na-tovar" type=""]. Поэтому нужно, что бы в шорткоде автоматически определялась относительная ссылка на товар. Я захотел количество вывести в названии самого таба: Для этого снова заходим в файл mg-templates/default/views/product.php и там где ссылка с параметром href="#tab2" должен получится такой код: <li><a href="#tab2">Отзывы ([mg-treelike-count-comments item="/<?= URL::parsePageUrl(); ?>" type="product"])</a></li>
Надеюсь вам удалось разобраться где что вставлять и заменять в коде 🙂 Если возникли вопросы, пишите в комментариях 😉
Для эффективного продвижения интернет-магазина на Moguta CMS следует правильно настроить индексацию страниц. Делать мы это будем при помощи мета тега <meta name="robots" content="noindex, nofollow" /> — в случае полного закрытия от поисковиков (страницы корзины, регистрации, личного кабинета и подобные), и <meta name="robots" content="noindex, follow" /> — в случае, если хотим что бы поисковики сканировали внутренние ссылки на странице, но не брали её саму в выдачу (общая страница каталога и страницы пагинации).
Для этого открываем файл в папке mg-core/lib/mg.php и примерно на 800 строке ищем public static function meta(). Там найдём следующее: $meta = ' <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>'.$title.'</title> <meta name="keywords" content="'.$metaKeywords.'" /> <meta name="description" content="'.$metaDescription.'" /> ';
Создаем файл progress.js, помещаем его в удобную папку на сайте и подключаем на всех страницах между <head></head> вот так <script src="полный_адрес_к_файлу/progress.js"></script>
Итак, коротко и ясно… Ниже способ реализации простого выезжающего меню. Код сразу с комментами, что бы было понятно. Тут DEMO. Смысл в том, что нажимаем на значок ☰, и слева выезжает менюшка. Значек бургера превращается в крестик, как в Телеграме 🙂 Затем нажимаем на крестик и менюшка заезжает влево. Всё очень простенько… При желании код и стили легко модернизировать, изменить цвета и размеры. Так же если хотите переместить меню в правую часть, то в стилях просто все left замените на right. Опять же в DEMO песочнице можно экспериментировать. Преимущество такого меню в том, что его можно внедрить в большинство шаблонов.
Вот сама вёрстка: <!-- input нужен для того, что бы в дальнейшем задать стили иконке ☰ по событию checked, то есть когда меню будем открыать и закрыать --> <input type="checkbox" id="hmt" class="hidden-menu-ticker"> <!-- Далее вёрстка самой иконки. Разделена на спаны, что бы красиво превращать в крестик при открытии (почти как в Телеграме :) --> <label class="btn-menu" for="hmt"> <span class="first"></span> <span class="second"></span> <span class="third"></span> </label> <!-- Менюшка раскрывающаяся и скрывающаяся --> <ul class="hidden-menu"> <li><a href="">HOME</a></li> <li><a href="">ABOUT</a></li> <li><a href="">CONTACTS</a></li> </ul> <!-- А затем уже контент странички. В примере просто зашголовок, что бы было видно, как менюшка нахлёстом выдвигается --> <header> <h1>ПРОСТОЕ ВЫЕЗЖАЮЩЕЕ БОКОВОЕ МЕНЮ</h1> </header>
