Retina.js

Данный скрипт используется для того, чтобы на экранах с большим разрешением (стандартное разрешение ретина 2880 x 1800) заменять картинки на их копии с лучшим качеством.  Например:

В данном случае на обычных экранах будет подключаться картинка  images/boi.jpg, а на ретина экранах boi_retina.jpg. Естественно последнее изображение имеет лучшее качество(соответственно и больший вес). Скрипт анализирует наличие у тегов атрибута

И в случае необходимости использует его. Подключен скрипт должен быть перед закрывающимся тегом body

 

Как подключить файл стилей вордпресс

Подключение дополнительных файлов стилей замедляет работу сайта и будет негативно расценено тестом скорости от гугл. Проще всего свои дополнительные стили добавлять в style.css, лежащий в корневой директории темы. Однако, если стоит задача все-таки подключить еще один файл, то делать это надо так:

Данный код необходимо добавить в файл functions.php вашей темы.

 

Выпадающее меню на вордпресс

Для меня настало время разобраться как интегрировать верстку многоуровневого выпадающего меню в вордпресс. Сначала, конечно, было разобрано как это сделать для одноуровневого меню. Алгоритм следующий:

  1. В файле functions.php надо добавить тип меню:
  2. В то место верстки, где раньше была конструкция ul>li>a добавляем код:

    Тут важно понимать, что с помощью данной функции можно задать класс только для тега ul,  для тегов li и a этого сделать данным механизмом нельзя. Отсюда сразу следует, что если вы оформляли в css используя классы для элементов списка и ссылок, то нужно будет эти селекторы переписывать. Вордпресс сам вставит свои системные имена классов для этих элементов.

    Теперь как быть с многоуровневым меню? Как правило его верстают с использованием bootstrap и приведенное ниже решение подходит только для сайтов, сверстанных с использованием данного фрэймворка. Тут алгоритм будет следующий:  в functions.php прописываем код:


    wp_bootstrap_navwalker.php есть на github. Именно он и реализует вывод вложенного меню, для этого, в то место верстки, где располагалось меню необходимо внести:

    После этого, возможно придется немного подкорректировать стили, но самое главное — появится меню. Само меню еще нужно корректно настроить в админке сайта

Хлебные крошки на вордпресс без плагина

Стояла задача на сайты выводить цепочку навигации, так называемые хлебные крошки. Очень многие решаю данную проблему установкой различных плагинов, но я стараюсь там, где это возможно обходиться без их использования. Вроде бы перед установкой хлебных крошек должны быть установлены cyr-to-lat и настроены чпу ссылок.

Затем в файле functions.php прописывается функция хлебных крошек: Читать далее «Хлебные крошки на вордпресс без плагина»

Bootstrap меню, выпадающее при наведении

Bootstrap имеет компонент меню, благодаря которому можно быстро реализовать навигацию по сайту. Но шаблонное меню имеет недостаток: на десктопной версии меню раскрывается только при клике по родительскому пункту. На мобильной версии так и должно быть — нажал на родительский пункт — меню раскрылось. Однако, как сделать, чтобы меню раскрывалось при наведении? В этом поможет замечательный скрипт, реализован он на jQuery:

Теперь при просмотре сайта на компьютере, меню будет выпадать при наведении на родительский пункт. А на мобильной версии, меню сохранит свое прежнее поведение.

Однако, корневой пункт меню все еще остается некликабелен. Что весьма некрасиво и это надо исправить, чтобы на десктопных версиях при клике по корневому пункту bootstrap меню происходил переход по ссылке. Для  этого необходимо удалить атрибут у ссылки корневого пункта меню:

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

И теперь, наконец таки, получается нормальное меню.

Скрипт таймера на сайт

Возникла необходимость установить на сайт таймер обратного отсчета. Была распродажа, и нужно было сделать таймер, который отсчитывает время до определенной даты. Раньше много раз видел такие счетчики на других сайтах, но сам не ставил. Была некоторая опаска, что это сложно. Однако с megatimer.ru код был вставлен буквально в течении минуты. Решение неплохое, со следующими плюсами:

  • Несколько вариантов режима работы: к определенной дате, на определенный период, цикличный
  • Много вариантов дизайна

Из минусов отметил бы следующее:

  • Нет адаптивности.Пришлось руками подстраивать верстку по вставку таймера

Но, как быстрое решение, когда в течение пары минут нужно такое поставить на сайт — вполне подходит.

Не отправляется почта с виртуального сервера

Когда самый первый раз настраивал форму обратной связи на сайте, то столкнулся с проблемой, что не отправляются письма. Хостинга у меня тогда еще не было, поэтому сайт работал на виртуальном сервере (openserver).  Попробовал один вариант формы, второй, третий. Затем посетила мысль, что наверное дело не в скриптах формы, а в самом openserver. Так и оказалось. Несмотря на то, что виртуальный сервер имитирует работу php и скрипты отрабатывают, но письма складываются в локальную папку c:\OpenServer\userdata\temp\email\

Кнопка вверх для сайта

Кнопка вверх актуальна для одностраничных сайтов, так как они имеют длинное тело. А также при просмотре сайтов, с большим количеством материала с мобильных устройств. Для добавления кнопки на сайт необходимо в верстку добавить элемент с id=»scrollup».  При наведении на этот элемент он будет осветляться. Показываться кнопка будет только при прокрутке страницы, заданной в теле скрипта(сейчас стоит смещение 550 пикселей). Читать далее «Кнопка вверх для сайта»

Выбрать хороший хостинг

До моего знакомства с hostland.ru сталкивался с несколькими разными хостингами.  Вроде бы все в них устраивало. Но по совету знакомых решил попробовать данный сервис и данную статью пишу именно про него.

Плюсы

    • Низкие цены как на сам хостинг, так и на покупку домена. Для данного сайта я купил доменное имя всего лишь за 169рублей, в то время как у конкурентов ценник начинался с 400 рублей.

Читать далее «Выбрать хороший хостинг»

Отзыв о kwork

Если вы читаете данную статью, значит вы хотите получить информацию о фрилас бирже kwork.ru.  Работая там как исполнитель уже более трех месяцев могу оставить свое мнение о данном проекте. Каждый человек индивидуален и мнение его субъективно, но я буду писать вещи, которые одинаковы для всех на данной бирже. Надеюсь, данная информация будет полезна читающим ее людям.
Читать далее «Отзыв о kwork»