! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета

Здравствуйте ! (извините за рекламу...)
написано: — 
отредактировано: 2018-11-05
издатель:  в теме: В теме: WordPress без плагинов 19 комментариев
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

Организуем прилепленный виджет, или — фиксированный у верхнего края окна браузера

В продолжение цикла статей о js расширениях для сайта, сегодня рассмотрим и реализуем фиксированный виджет. В итоге проделанных работ получится так: когда пользователь прокручивает «лист» сайта книзу (скроллит) — все элементы, а в том числе виджеты сайдбара, уходят за верхнюю границу окна браузера, и только один из них останется «прилепленным» к верхней части окна обозревателя (т.е. будет оставаться видимым).

Для реализации фиксированного сайдбара, всего-то потребуется: 1 — создать небольшой js файл в корне своего шаблона и подключить его к функционалу темы (в футере — footer.php), и второе — настроить определённый виджет (а точнее — его информационную часть, заключённую в idентификатор).

Всё это чудо будет работать на чистейшем js, …и без плагинов — подробнее ниже:


 

 

 

как сделать фиксированный виджет

 

 

 

 

И эту инструкцию очень важно прочесть: как сделать плавающий виджет, фиксация которого будет отменена достигнув подвала, например. …либо какой-то заданной ID точки.

 

 

 

 

Преимущества и недостатки виджета построенного по сегодняшней теме:

 

отличие нынешнего варианта прилепленного (фиксированного) виджета от решений с какими-то плагинами, это то, что в нашем случае фиксируется ID-содержимое текстового виджета — точнее, только помещённая в id-блок информация — не сам виджет (не знаю, может кого-то запутал, но, думаю, далее по тексту станет ясно).

 

 

 

Очень возможно, что для правильной отработки прилепленного виджета, вам потребуется подключить вот эту JS библиотеку: jquery-1.12.4.min.js …либо перекачать её в корень шаблона, либо с сервера Google, как-нить так:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> … либо же пройти по ссылке, расположенной чуть ниже, ознакомиться со статьёй… и подключиться к CDN Google.

 

 

 

к оглавлению $

скрипт для фиксированного виджета

 

 

 

 

 

Заходим в ядро (директорию) своего шаблона, отыскиваем папку js и в ней создаём js-файл с именем:

 

 

fixsidy-vidsh.js

 

 

Затем пишем и помещаем в него следующий скрипт js.

 

 

function getTopOffset(e) {
var y = 0;
do { y += e.offsetTop; } while (e = e.offsetParent);
    return y;
}

var block = document.getElementById('sydy-fix'); /* fix блок НА ЧИСТОМ JS - sydy-fix - ниже значения атрибута id блока */
    if ( null != block ) {
    var topPos = getTopOffset( block );
    window.onscroll = function() {
    var newcss = (topPos < window.pageYOffset) ?
    'top:8px; position: fixed;' : 'position:static;';
    block.setAttribute( 'style', newcss );
  }
}

 

 

 

Пояснения:

 

sydy-fix — это идентификатор блока виджета, в который завёрнут, скажем код рекламы.

 

Такая примерно конструкция id блока размещённого в текстовом виджете:

 

<div id="sydy-fix">

Какой-то код...

</div>

 

top:8px — регулятор отступов от верхнего края.

 

 

 

Полдела — готово!

 

 

Далее нужно подключить к id блоку скрипт обработчик, который мы создали чуть выше…

 

 

Открываем файл темы footer.php и перед закрывающим тегом </body> размещаем следующую строку:

 

 

 

<script type='text/javascript' src='/wp-content/themes/ваш_шаблон/js/fixsidy-vidsh.js'></script>

 

 

 

 

рекомендую ознакомиться с этой статьёй, в которой описывается правильный вариант подключения скриптов js в футер — событие wp_footer !!

 

и это верный вариант подключения jQuery библиотеки от CDN Google !!

 

 

 

 

Далее, и это важно обозначить — сказать, что наша работа успешно закончена! ))

 

 

 

 

 

к оглавлению $

как отключить фиксацию виджета на маленьком разрешении экрана

 

 

 

 

 

Для тех, которые более изощрённо относятся к своему сайту, предлагаю немного модернизировать созданный функционал фиксации виджета, ибо также поступает много вопросов от владельцев сайтов, о том, что так называемый фиксированный виджет некорректно смотрится на мелких экранах гаджетов, а именно — закрывает собой какую-то часть содержимого…

 

В самом деле: в наш век мобильного интернета — это серьёзная проблема. А значит целесообразнее настроить регулируемую фиксацию в зависимости от расширения экрана.

 

 

Поступим так:

 

заместо строки, показанной выше, пропишем в футере (или способом, предложенным в статье по ссылке выше) такую:

 

 

 

<script> if (document.body.clientWidth>1023) {document.write("<script type='text/javascript' src='/wp-content/themes/ваш_шаблон/js/fixsidy-vidsh.js'><\/script>");}</script>

 

 

 

…что имеем:

 

document.body.clientWidth>1023 — ширина экрана, при которой фиксированный виджет отрабатывается в обычном режиме: т.е. как и все съезжает за верхние границы браузера — без фиксации.

Ширину, меняя значения строки, настраиваете такой, которая необходима конкретно вам.

 

 

 

…а на этом…

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 


mihalica.ru

 

 

…если возникли вопросы, задавайте — есть же комментарии…

 

 


подписка feedburner Online консультация по работе c сайтом на WordPress

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !
автор блога запросто с Вордпресс - Михаил ATs - в сети нтернет давным давно...

...веб разработчик: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...

Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   Подключение jQuery библиотеки от CDN Google — рационально!..   Как добавить свой новый (второй) сайт в рекламную сеть Яндекса   Как самостоятельно установить в Notepad++ плагин Compare   Как исключить вывод (выборочно) поста с главной страницы сайта — регулировка в админке   14 полезных сниппетов — код для наилучшей работы сайта WordPress — функции   Создаём плагин — добавочный файл функций — my-functions.php   Как к статье добавить блок ссылок на похожие по теме записи сайта   Как перевести сайт на https — сертификат ssl — шифрование   Санкции вебмастера Яндекс (фатальные ошибки) — предупреждения, или что это?..   Выведем последние комментарии в любом месте сайта — несколько вариантов   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   Что такое Яндекс? SEO оптимизация сайта за пределами Google   Продвижение контентом или нужно настраивать сайт — валидный код шаблона..?   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess
↔ перетаскивайте ленту ↔

смотреть ещё статьи в теме В теме: WordPress без плагинов
меточная навигация:


Комментарии © 19 к статье: Организуем прилепленный виджет, или — фиксированный у верхнего края окна браузера

  1. Приветствую!
    А можете подсказать, как сделать, чтобы плавающий блок останавливался на футуре.
    Заранее спасибо.

    Ответить - tstas

    • Здравствуйте!
      То есть чтобы «отлеплялся» доходя до футера?
      Нужен немного другой скрипт (в комментарии показать код — длинно слишком, да и нужны кое-какие пояснения) — сейчас попозже в статью добавлю вариант решения…

      Ответить - Михаил

  2. Будет здорово!
    Заранее спасибо!
    Я в скриптах совсем никак, попробовал через CSS поставить .footer {clear: both;}, но не сработало.

    Ответить - tstas

    • Нет, таким способом css не сработает…
      Вы заглядывайте — я обязательно распишу в этой статье или новую напишу (вот только чуть с делами разберусь).

      Ответить - Михаил

  3. Спасибо! Буду ждать. Как напишите, если не сложно, киньте коммент сюда, увижу на почте. а так буду просматиривать.
    Заранее спасибо.

    Ответить - tstas

    • Да, я вам сообщу… постараюсь сделать быстрее (может, завтра).

      Ответить - Михаил

    • Вечер добрый, tstas!
      Вот статья, которая рассказывает о том, как сделать плавающий блок, который останавливается у футура. — отключение фиксации виджета ? в заданной точкеПрилепленный виджет — отключение фиксации виджета в заданной точке
      Прилепленный виджет — отключение фиксации виджета в заданной точке

      .

      Ответить - Михаил

  4. Здравствуйте Михаил!
    Спасибо за статью! Но скрипт Ваш у меня на сайте не работает, как и многие другие. Нашел похожих 5 или 6 решений, но ни один у меня не работает. На прокрутку срабатывает только этот (представленный в данной статье). Но он не останавливается в нужном месте. Посмотрю, еще что можно сделать и склоняюсь к установке плагина.

    Ответить - tstas

    • И вам здравствуйте!
      Скрипт непременно должен работать! это бесспорный факт!
      Я этот скрипт устанавливаю на многих сайтах: всё ОК.

      Но он не останавливается в нужном месте

      Вероятно, где-то делаете ошибку… здесь важны и скрипт и отладка CSS.
      А возможен (менее вероятно) конфликт установленных на сайте (в шаблоне) скриптов JS…
      Разбирайтесь с функционалом ресурса! иначе со временем накопится множество непоняток… хотя, конечно, возможно банально установить плагин. …но и тот может неправильно отрабатывать: что скажется на скорости загрузки страниц!

      Ответить - Михаил

  5. Да уж плагин совсем не хочется ставить!
    CSS, маловероятно, что конфликтует, а пара тройка плагинов оставшихся возможно конфликтуют. Буду разбираться, как разберусь, отпишусь.
    Еще раз спасибо, что оперативно написали статью.

    Ответить - tstas

    • …да не за что!
      CSS не может конфликтовать, да! (хотя «спорные» селекторы и свойства значений бывают)
      Вам Спасибо за внимание и прочтение..!
      Подключение библиотек Google проверьте… места (очерёдность) подключений… В статье по ссылке в комменте об этом упоминается.

      Ответить - Михаил

  6. Не едет даже на дефолтной теме twentyseventeen, ни одного плагина не подключено. (тестовый вордпресс)
    Уже вордпресс обновил до последней версии и все равно 0 ???
    Правда на сервере настроено кэширование и сжатие, но это явно не причем.

    Ответить - tstas


    • Значит, где-то ошибка…
      Пробую запустить тестовый сайт… и привязать к нему код из статьи.

      Ответить - Михаил

  7. Киньте ссылку на тестовый сайт, как протестируете
    Заранее спасибо.

    Ответить - tstas

    • Вся требуемая отработка предложенного в НОВОЙ статье кода функционирует и у ВЕРХНЕГО края, и у ПОДВАЛА виджет открепляется… тестировал в базовом шаблоне WP twentysixteen.
      Вы ещё раз прочтите эту статью (И НОВУЮ) и всё получится…
      …внимательнее отнеситесь к подключению библиотек от CDN, либо jquery-1.12.4.min.js

      Ответить - Михаил

  8. На базовом шаблоне WP twentysixteen не стал уже пробовать, на twentyseventeen не сработал.
    Пробовал плагин Q2W3 Fixed Widget на премиум тему, тоже криво все выкидывал. Или действительно библиотеки jquery конфликтуют, но тестировал все подключения.
    В результате нашел рабочий код скрипта — как в этой Вашей статье, только более расширенный, чуть подправил под себя, и вроде все ОК, работает, вот код, может кому понадобится:

    другой вариант кода JS — Фиксированного виджета

    <script type="text/javascript">
    function getTopOffset(e) {
    	var y = 0;
    	do { y += e.offsetTop; } while (e = e.offsetParent);
    	return y;
    }
    var block = document.getElementById('fixblock'); /* fixblock - значение атрибута id блока */
    if ( null != block ) {
    	var topPos = getTopOffset( block );
    
    	window.onscroll = window.onresize = function() {
    
    	var w = window.innerWidth
                                || document.documentElement.clientWidth
                                || document.body.clientWidth;
    		var scrollHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight),
    
    		    // высота рекламного блока
    		    blockHeight = 400,
    
    		    // высота подвала
    		    footerHeight =  1500,
    
    		    // считаем позицию, до которой блок будет зафиксирован
    		    stopPos = scrollHeight - blockHeight - footerHeight;
    
    
    
    		var newcss = (topPos < window.pageYOffset  && w >= 779) ?
    			'top:180px; max-width: 240px; position: fixed;' : 'position:static;';
    
    		if ( window.pageYOffset > stopPos )
    			newcss = 'position:static;';
    
    		block.setAttribute( 'style', newcss );
    	}
    }
    </script>
    

    Огромное спасибо за участие и быстрый ответ!
    Написанная статья так же интересна и полезна!!!
    Ваш блог частенько читаю, Вы молодец!

    Ответить - tstas

    • Нет, имя шаблона в нашем случае ни при чём: и на twentyseventeen работает — просто там нужно с выводом сайдбара разобраться… и конечно же, верное подключение библиотек jquery организовать.
      Так что и на twentyseventeen работает код для фиксации виджета, либо произвольного блока.
      Представленный вами код мне вроде знаком… однако, лично его не юзал, чтобы что-то предметно о нём говорить, — но, как вижу — в нём привязанные размеры (в плане адаптивности — это не очень мне симпатично — непрактично!)… Попробую на днях.
      Вам спасибо! за внимание и лестный отзыв…
      И вы молодец! …потому что ищете чистые решения, и не пытаетесь искать единственный ответ в плагинах: не везде и во всём целесообразно использовать плагины!

      Ответить - Михаил

  9. У меня тоже этот код отказывается работать. Хотя код из предыдущей статьи отлично работал. Там минус конечно в том, что ничего не настраивается.

    Ответить - Дмитрий

    • Где-то допускаете ошибку!.. …либо есть несоответствия (!!) в подключенных библиотеках jquery.
      Требуется что-то типа этого:
      <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> либо CDN.
      Добавил в статью ссылки о правилах подключениях библиотек JS…
      …также путаются с CSS блоками.
      JS, предложенный в статье — рабочий 100% !!

      P|S
      а что вы хотите из настроек кода..?

      Ответить - Михаил

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

  отныне доступен плагин: privacy-policy ©

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика
? основная линейка услугSkype консультацияЕсли вы выбрали для своего сайта WordPress и только-только начинаете изучать панель управления контентом, то этот вариант оnline консультаций — практически по любым вопросам — для вас! вопросы сюдаSkype онлайн