Видеоурок:
Привет, друзья!
Многие из нас обновились до 5 версии WordPress и классический редактор резко накрылся и остался только Gutenberg.
Сегодня я расскажу как его вернуть, это займет 5 минут.
Возвращение короля классического редактора
Сначала нужно установить плагин classic editor, для этого:
1.Заходим в плагины и нажимаем «Добавить новый»
2.Находим Classic Editor
3.Устанавливаем и активируем его.
Мне нравится писать статьи в новом интерфейсе, а в старом работать с плагинами, которые еще не перестроились до нового оформления редактора.
Сделаем так, чтобы можно было выбирать в каком редакторе изменять статью.
Идем, а настройки -> написание, выбираем редактор по умолчанию и возможность выбирать редактор.
Спасибо за прочтение статьи!
Если она была полезной для вас — ставьте лайк 🙂
Это важно для меня
Канал о фрилансе
Там я делюсь фишками о фрилансе: деньги, клиенты, автоматизация, фриланс. Раньше это был закрытый материал с платным доступом. Сейчас он открыт. Иногда подписчикам будет открываться платные материалы. Подписаться
12 комментария
Огромное спасибо, все получилось!
Рад стараться. Может быть у вас есть на примете библиотеки, о которых вы бы хотели узнать подробнее?
Прямо таки спасибище)
🙂 Рад стараться!
Tweenmax, PIXI … вот как тут, например, искажение сделано — https://www.kommigraphics.com/en/
https://lincorwatches.com/ — или вот еще пример интересной анимации… было бы интересно посмотреть разбор примера на основе их скрипта
ничего не понял ,много специфики, а очень жаль!
Можете рассказать о трудностях, которые возникли? Могу ответить на ваши вопросы
Может вы подскажете в чем дело?
Правлю чужой код. Вот такой. А мне в консоли выдается, что ошибка Uncaught SyntaxError: missing ) after argument list.
<script>
(document).ready(function(){
var bLazy = new Blazy({
loadInvisible: true, // загрузка скрытых изображений
container: ‘.slick-track, b-lazy’ // загрузка скрытых изображений слайдера
});
bLazy.revalidate();
}
</script>
Нужно закрыть круглую скобку в конце функции ready().
Что то у меня нифига не получается, уже все перепробовал.
Есть код с изображениями:
<a class=»product-image» href=»$ENTRY_URL$»>
<img class=»b-lazy» alt=»$NAME$» src=»/images/blank-1-.gif» data-src-mobile=»<?if($SMALL$)?>$SMALL$<?else?>/img404/big.svg<?endif?>» data-src=»<?if($THUMB$)?>$THUMB$<?else?>/img404/big.svg<?endif?>» class=»gphoto» id=»$BLOCK_PREF$-gphoto-$ID$» title=»$NAME$»>
</a>
И пример вашего кода, который я подставляю:
<script>
var bLazy = new Blazy({
breakpoints: [{
width: 480, // Max width
src: ‘data-src-mobile’ // Name atribut
}]
});
</script>
Как он работает не понимаю, растолкуйте. По идеи должно быть если оригинал фото товара размерами больше 480х480, тогда формируется уменьшенное фото и оператор $SMALL$ выводит ссылку на уменьшенное фото.
Размер превью оператора $SMALL$, 80*80
и при этом еще постоянно ошибка в консоли:
Uncaught ReferenceError: Blazy is not defined
Если не трудно можете посмотреть в консоли:
https://www.aksshop.ru/shop/shtatnye-magnitoly-unison/magnitoly-unison
Здравствуйте. Подскажите, вот мой код, который я подключаю отдельным файлом
/*!
hey, [be]Lazy.js — v1.8.2 — 2016.10.25
A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy)
(c) Bjoern Klinggaard — @bklinggaard — http://dinbror.dk/blazy
*/
(function(q,m){«function»===typeof define&&define.amd?define(m):»object»===typeof exports?module.exports=m():q.Blazy=m()})(this,function(){function q(b){var c=b._util;c.elements=E(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){n(a,»scroll»,c.validateT)}),n(window,»resize»,c.saveViewportOffsetT),n(window,»resize»,c.validateT),n(window,»scroll»,c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=c.left&&b.bottom>=c.top&&b.left<=c.right&&b.top<=c.bottom}function z(b,c,a){if(!t(b,a.successClass)&&(c||a.loadInvisible||0<b.offsetWidth&&0<b.offsetHeight))if(c=b.getAttribute(u)||b.getAttribute(a.src)){c=c.split(a.separator);var d=c[A&&1<c.length?1:0],e=b.getAttribute(a.srcset),g="img"===b.nodeName.toLowerCase(),p=(c=b.parentNode)&&"picture"===c.nodeName.toLowerCase();if(g||void 0===b.src){var h=new Image,w=function(){a.error&&a.error(b,"invalid");v(b,a.errorClass);k(h,"error",w);k(h,"load",f)},f=function(){g?p||B(b,d,e):b.style.backgroundImage='url("'+d+'")';x(b,a);k(h,"load",f);k(h,"error",w)};p&&(h=b,l(c.getElementsByTagName("source"),function(b){var c=a.srcset,e=b.getAttribute(c);e&&(b.setAttribute("srcset",e),b.removeAttribute(c))}));n(h,"error",w);n(h,"load",f);B(h,d,e)}else b.src=d,x(b,a)}else"video"===b.nodeName.toLowerCase()?(l(b.getElementsByTagName("source"),function(b){var c=a.src,e=b.getAttribute(c);e&&(b.setAttribute("src",e),b.removeAttribute(c))}),b.load(),x(b,a)):(a.error&&a.error(b,"missing"),v(b,a.errorClass))}function x(b,c){v(b,c.successClass);c.success&&c.success(b);b.removeAttribute(c.src);b.removeAttribute(c.srcset);l(c.breakpoints,function(a){b.removeAttribute(a.src)})}function B(b,c,a){a&&b.setAttribute("srcset",a);b.src=c}function t(b,c){return-1!==(" "+b.className+" ").indexOf(" "+c+" ")}function v(b,c){t(b,c)||(b.className+=" "+c)}function E(b){var c=[];b=b.root.querySelectorAll(b.selector);for(var a=b.length;a—;c.unshift(b[a]));return c}function C(b){f.bottom=(window.innerHeight||document.documentElement.clientHeight)+b;f.right=(window.innerWidth||document.documentElement.clientWidth)+b}function n(b,c,a){b.attachEvent?b.attachEvent&&b.attachEvent("on"+c,a):b.addEventListener(c,a,{capture:!1,passive:!0})}function k(b,c,a){b.detachEvent?b.detachEvent&&b.detachEvent("on"+c,a):b.removeEventListener(c,a,{capture:!1,passive:!0})}function l(b,c){if(b&&c)for(var a=b.length,d=0;d<a&&!1!==c(b[d],d);d++);}function D(b,c,a){var d=0;return function(){var e=+new Date;e-d<c||(d=e,b.apply(a,arguments))}}var u,f,A,y;return function(b){if(!document.querySelectorAll){var c=document.createStyleSheet();document.querySelectorAll=function(a,b,d,h,f){f=document.all;b=[];a=a.replace(/\[for\b/gi,"[htmlFor").split(",");for(d=a.length;d—;){c.addRule(a[d],"k:v");for(h=f.length;h—;)f[h].currentStyle.k&&b.push(f[h]);c.removeRule(0)}return b}}var a=this,d=a._util={};d.elements=[];d.destroyed=!0;a.options=b||{};a.options.error=a.options.error||!1;a.options.offset=a.options.offset||100;a.options.root=a.options.root||document;a.options.success=a.options.success||!1;a.options.selector=a.options.selector||".b-lazy";a.options.separator=a.options.separator||"|";a.options.containerClass=a.options.container;a.options.container=a.options.containerClass?document.querySelectorAll(a.options.containerClass):!1;a.options.errorClass=a.options.errorClass||"b-error";a.options.breakpoints=a.options.breakpoints||!1;a.options.loadInvisible=a.options.loadInvisible||!1;a.options.successClass=a.options.successClass||"b-loaded";a.options.validateDelay=a.options.validateDelay||25;a.options.saveViewportOffsetDelay=a.options.saveViewportOffsetDelay||50;a.options.srcset=a.options.srcset||"data-srcset";a.options.src=u=a.options.src||"data-src";y=Element.prototype.closest;A=1=window.screen.width)return u=a.src,!1});setTimeout(function(){q(a)})}});
document.addEventListener(«DOMContentLoaded», function(event) {
var bLazy = new Blazy({
offset: 50,
});
});
Вот кусок html, где находится изображение
картинка-прелоадер загружается, а основная — нет.
Ошибок в консоли не выдает. Файл со скриптом загружается. Такое ощущение, что скрипт не отрабатывает. Подскажите, в чем может быть проблема