Загрузка jQuery с Google CDN

Многие шаблоны, плагины и компоненты сайта используют для своей работы библиотеку скриптов jQuery. По умолчанию в WordPress скрипты загружаются из папки wp-includes. Первоначальный размер библиотеки jQuery составляет порядка 300KB, после минимизации его можно уменьшить до 90KB. Дополнительно количество передаваемых данных можно снизить за счет использования сжатия GZIP.

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

Ситуация кардинально меняется если посетители запросят миллион страниц с пустым кэшем браузера, в этом случае используя CDN вы экономите до 76GB трафика. А при использовании популярного Google CDN, есть большая вероятность, что необходимая библиотека jQuery уже лежит внутри кэша браузера. В добавок, если сравнить скорости загрузки с CDN и обычного хостинга, то разница во времени может отличаться в несколько раз в пользу CDN.

Таким образом, используя CDN для загрузки jQuery, мы без труда убираем один лишний запрос к серверу и немного уменьшаем время загрузки страниц сайта. Так зачем игнорировать такую возможность?

Вместо того чтобы использовать платные CDN-сервисы, мы можем свободно загружать jQuery с серверов крупных компаний. Для jQuery есть несколько популярных общедоступных CDN:

  • jQuery CDN
  • Google CDN
  • Microsoft CDN
  • CDNJS CDN
  • Яндекс CDN

Подробней о использовании указанных CDN-сервисов вы можете прочитать на официальном сайте jQuery. Что касается меня, для своих нужд я предпочитаю использовать Google CDN — наиболее популярный среди всех бесплатных CDN-сервисов, 89% от загрузок которого приходится на библиотеку jQuery. Поэтому, далее речь пойдет о использовании именного этого сервиса.

Особенности использования Google CDN

При использовании Google CDN, вы можете прямо указать версию (1.11.1) загружаемой библиотеки или с помощью модификации фрагмента ссылки, указать необходимые параметры для загрузки jQuery.

Пример подключения jQuery с использованием точной версии библиотеки:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Для загрузки последней актуальной версии jQuery используем код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Следует отметить, что время жизни файла в кэше браузера, напрямую зависит от ссылки, которую мы будем использовать для подключения библиотеки. При использовании ссылки содержащей точную версию библиотеки, время хранение файла в кэше будет ограничено сроком равным одному году max-age=31536000. Если вы используете ссылку для последней актуальной версии jQuery, файл будет храниться в кэше в течении часа max-age=3600.

Используем Google CDN для загрузки jQuery в WordPress

Для загрузки jQuery с Google CDN на сайте использующем WordPress, для начала необходимо выяснить необходимую версию библиотеки. Для этого достаточно заглянуть в содержимое HTML-документа вашего сайта. Для правильного подключения jQuery в WordPress необходимо добавить код функции ниже в содержимое файла functions.php вашей темы:

function wpdocs_dequeue_script() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"), false, '1.11.1');
    wp_enqueue_script('jquery');
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );

Данная функция удалит из очереди на подключение библиотеку из каталога wp-includes и заменяет ее на jQuery с сайта Google CDN.

Убрать версию CSS/JS файлов в WordPress

По умолчанию, WordPress добавляет параметр ?ver=[версия] в конец адреса всех подключаемых CSS и JavaScript файлов. Использование версионности, добавляет удобный механизм для контроля состояния кэша браузера посетителей. После изменения файлов, для того чтобы браузер автоматически загрузил актуальные версии CSS или JavaScript, веб-мастеру достаточно просто изменить числовой индекс ver для подключенного файла.

Несмотря на очевидные преимущества, у данного метода есть и свои недостатки. Одна из основных причин по которой разработчики отказываются от использования версий — не все прокси-серверы и CDN поддерживают кэширование файлов, в конце адреса которых указан параметр ver.

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

function vc_remove_wp_ver_css_js( $src ) {
    if ( strpos( $src, 'ver=' ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );

Отключить Emoji в WordPress

Начиная с выпуска WordPress 4.2 разработчики отказались от стандартных смайлов и перешли на известный набор Emoji — язык идеограмм и смайликов, используемый в электронных сообщениях и веб-страницах.

О популярности этих иконок можно судить хотя бы по тому, что даже поисковый гигант Google некоторое время отображал Emoji в десктопной выдаче. После того как сайты стали использовать Emoji для привлечения SEO-трафика, от этой идеи вскоре отказались.

Что касается WordPress, то поддержка Emoji в нем реализована на уровне ядра. Для работы данной функции WordPress использует внешнюю библиотеку Twemoji от Twitter, а иконки загружаются с сайта WordPress.org. Изначально настроек для отключения Emoji в WordPress не предусмотрено.

Не знаю, что побудило разработчиков добавить данную функцию по умолчанию, но я надеюсь, что в ближайшем будущем это недоразумение выпилят из WordPress. А пока, для того что бы отключить Emoji необходимо добавить в файл functions.php следующую функцию:

function disable_emojis() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );	
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );	
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

Как вариант, можно отключить Emoji в WordPress при помощи специально плагина Disable Emojis.

Распаковка архивов в Linux

Дата: 28.09.2015Метки:

В процессе работы в Linux часто сталкивавшийся с необходимости распаковки различного рода архивов. До того момента, пока не запомнишь на память формат команды, приходится каждый раз искать в поисковике параметры распаковки того, или иного архива. Для того чтобы немного облегчит себе жизнь, можно использовать специальный скрипт для распаковки архивов в Linux.

Скрипт содержит команды для распаковки большинства популярных форматов архивов, для его работы важно чтобы требуемый архиватор был установлен в системе. Для работы скрипта в Debian/Ubuntu, необходимо добавить функцию unpack в содержимое системного файла /etc/bash.bashrc конфигурации bash.

nano /etc/bash.bashrc

Скрипт для распаковки архивов в Linux:

function unpack {
if [ -z "$1" ]; then
    echo "Usage: extract "
 else
    if [ -f "$1" ] ; then
        NAME=${1%.*}
        case "$1" in
          *.tar.bz2)   tar xvjf ./"$1"    ;;
          *.tar.gz)    tar xvzf ./"$1"    ;;
          *.tar.xz)    tar xvJf ./"$1"    ;;
          *.lzma)      unlzma ./"$1"      ;;
          *.bz2)       bunzip2 ./"$1"     ;;
          *.rar)       unrar x -ad ./"$1" ;;
          *.gz)        gunzip ./"$1"      ;;
          *.tar)       tar xvf ./"$1"     ;;
          *.tbz2)      tar xvjf ./"$1"    ;;
          *.tgz)       tar xvzf ./"$1"    ;;
          *.zip)       unzip ./"$1"       ;;
          *.Z)         uncompress ./"$1"  ;;
          *.7z)        7z x ./"$1"        ;;
          *.xz)        unxz ./"$1"        ;;
          *.exe)       cabextract ./"$1"  ;;
          *)           
        esac
    else
        echo "'$1' - file does not exist"
    fi
fi
}

Применяем изменения командой:

source /etc/bash.bashrc ~/bashrc

Вне зависимости от формата запакованного файла, теперь для распаковки архивов в Linux достаточно использовать всего одну команду unpack:

$ extract file.gz
$ extract file.tar.gz
$ extract file.tar.bz2

Grep: исключить строки

Дата: 27.09.2015Метки:

Часто внутри конфигурационных файлов я оставляю для себя небольшие заметки в виде комментариев. Это позволяет быстро вспомнить важные моменты и значительно помогает в процессе настройки. Со временем количество комментариев может настолько много, что они напротив затрудняют чтение файла. Кроме того, бывают ситуации когда необходимо исключить из файлов комментарии, которые не должны увидеть посторонние.

Чтобы избавить себя от рутины, я предпочитаю через команду grep исключить из файла сразу все имеющиеся в нем комментарии. Чтобы с помощью grep исключить только строки по заданному условию, необходимо выполнить команду с опцией -v в качестве параметра.

Команда ниже выведет на экран из содержимого файла example.conf только активные настройки, удалив при этом все имеющиеся в нем комментарии и пустые строки.

grep -v '^#|^$' example.conf

В результате выполнения команды, будут исключены строки начинающиеся с символа решетки ^#, а фильтр ^$ удалит из файла пустые строки.

Для удобства можно перенаправить вывод в текстовый файл:

grep -v '^#|^$' example.conf > new.conf

Чтобы с помощью grep исключить комментарии из множества файлов, можно воспользоваться скриптом ниже:

#!/bin/sh
files="/home/me/data/*.txt"
for i in $files
do
  grep -v '^#|^$' $i > $i.out
  mv  $i.out $i
done

Удалить OneDrive в Windiws 10

Начиная с Windows 8, каждая редакция Windows идет с предварительно установленным приложением OneDrive — бесплатным сервисом облачного хранения файлов от Microsoft. В данном плане Windows 10 ничем не отличается от предыдущей системы. Если вы уже используете другой облачный сервис, скорее всего, на компьютере уже установлено соответствующее приложение для синхронизации файлов и папок с облаком, в этом случае вы можете удалить OneDrive из системы Windows 10.

Как и для большинства предустановленных программ, чтобы удалить OndeDrive в Windows нет специально предназначенного для этого механизма. Поэтому, чтобы полностью удалить OndeDrive в Windows 10 необходимо использовать метод описанный в этой статье.

Удаляем OneDrive в Windiws 10

Поскольку не существует простого способа удалить OndeDrive из Windows 10, чтобы удалить приложение из системы мы будем использовать командную строку. Перед тем как начать, необходимо завершить работу приложения OneDrive на вашем компьютере. Для этого нажмите правой кнопкой мыши на значок OneDrive в панели задач, выберите пункт «Выход» и нажмите «Закрыть OneDrive» для подтверждения. После чего работа приложения OneDrive будет остановлена. В качестве альтернативного варианта, вы всегда можете завершить процесс OneDrive из вкладки «Процессы» в Диспетчере задач Windows.

После выхода из OneDrive, щелкните правой кнопкой мыши на меню Пуск, в открывшемся меню выберите пункт «Командная строка (Администратор)». Как вариант для данного действия можно использовать горячие клавиши: нажмите «Win + X», а затем «А» на клавиатуре.

Для того что бы полностью удалить OneDrive, в зависимости от архитектуры системы, выполните в командной строке одну из команд ниже.

Если вы используете 32-разрядную систему Windows 10:

%systemroot%SysWOW64OneDriveSetup.exe /uninstall

Если вы используете 64-разрядную систему Windows 10:

%systemroot%SysWOW64OneDriveSetup.exe /uninstall

После выполнения команды, Windows полностью удалить OneDrive с вашего компьютера. Удаление пройдет в тихом режиме и без вывода сообщений в командной строке. Команда также удалит папку OneDrive из Проводника Windows. Если вы откроете Windows Explorer или меню Пуск, то можете убедиться, что ярлыки папки OneDrive больше не отображается.

Для полного удаления OneDrive, осталось удалить файлы программы и все синхронизированные данные. Для этого откройте Проводник Windows, выберите вкладку «Вид» и поставьте флажок «Скрытые элементы». Затем откройте каталог C:ProgramData и удалите в ней папку Microsoft OneDrive, дополнительно необходимо удалить папку OneDrive из каталога профиля пользователя Windows C:UsersИмя и C:UsersИмяAppDataLocalMicrosoft.

Как альтернативный вариант выполните в командной строке от имени администратора команды ниже:

rd /s /q "%systemdrive%ProgramDataMicrosoft OneDrive"
rd /s /q %userprofile%OneDrive
rd /s /q %userprofile%AppDataLocalMicrosoftOneDrive

Если в процессе возникнет какая либо ошибка, попробуйте повторить после перезапуска системы. На этом удаление OneDrive из Windows закончено.

В будущем, если вы решите использовать OneDrive снова, для установки приложения выполните в командной строке команду ниже.

Если вы используете 32-разрядную систему Windows 10:

%systemroot%System32OneDriveSetup.exe

Если вы используете 64-разрядную систему Windows 10:

%systemroot%SysWOW64OneDriveSet.exe

В процессе установки можно изменить настройки приложения OneDrive по своему усмотрению.

Отключить CSS/JS в теме WordPress

В процессе доработки или оптимизации темы оформления WordPress, может возникнуть необходимость отключить загрузку неиспользуемых CSS или JS-файлов внутри HTML-документа. Как правило, в данной ситуации ограничиваются самым простым вариантом решения данного вопроса — удалением из шаблона функций wp_enqueue_style или wp_enqueue_skript, отвечающих за регистрацию стилей и скриптов в WordPress.

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

В WordPress можно удалять из очереди и отменять регистрацию стилей и скриптов при помощи функций:

  • wp_deregister_script()
  • wp_deregister_style()
  • wp_dequeue_script()
  • wp_dequeue_style()

Они отличаются тем, что wp_dequeue удаляет фалы из очереди на вывод, а wp_deregister отменяет регистрацию файла, после чего можно повторно зарегистрировать файл с ранее используемым  идентификатором.

В большинстве случаев, чтобы отключить CSS и JS файлы рекомендуется использовать wp_dequeue_style и wp_dequeue_script. Для этого необходимо добавить код в файл functions.php вашего WordPress шаблона.

Рассмотрим использование функции на примере отключения загрузки шрифтов Google Web Fonts:

function wp_dequeue_google_fonts() {
	wp_dequeue_style( 'twentyfifteen-fonts' );
}
add_action( 'wp_enqueue_scripts', 'wp_dequeue_google_fonts', 20 );

В примере выше: в качестве параметра для работы функции wp_dequeue_style() мы указали идентификатор twentyfifteen-fonts ранее зарегистрированного CSS.

Имя идентификатора можно найти в коде функции подключения скрипта wp_enqueue_script().

Следует отметить, для отключения CSS или JS файлов в теме WordPress, вызов функции wp_dequeue_google_fonts должен происходить после вызова функции wp_enqueue. Поэтому для отключения CSS или JS файлов в теме WordPress, лучше всего использовать код функции в конце файла functions.php.

Отображаем похожие записи в WordPress

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

Есть два алгоритма для вывода похожих записей в WordPress: на основе рубрик или же на основе меток. На мой взгляд, вариант с использованием меток более удобен и практичен. Некоторые блоги на WordPress вообще не используют категории, кроме того использование меток дает большую гибкость для объединения похожих записей в одну смысловую группу.

Выводить список похожих записей мы будем исключительно в виде текстовых ссылок без изображений. Для этого необходимо добавить код из этой записи в файл functions.php вашего шаблона WordPress.

В зависимости от ваших потребностей, скрипт можно изменить под свои нужды: изменить количество отображаемых ссылок (строка 1), задать параметры сортировки (строка 18). По умолчанию похожие записи отображаются в случайном порядке, вы можете изменить параметры сортировки на одно из значений ниже:
rand — случайно;
title — по названию;
date — по дате публикации;
modified — по дате последнего изменения.

Для отображения похожих записей, необходимо добавить в файл content.php код вызова нашей функции.

<?php do_related_posts(); ?>

Теперь осталось подстроить отображение блока похожих записей под общий дизайн шаблона WordPress. Для этого необходимо добавить свои свойства в следующие селекторы:

.related-posts {
   /* ... */
}
.related-posts h4 {
   /* ... */
}
.related-posts ul li {
   /* ... */
}
.related-posts a {
   /* ... */
}

Изменить SSH-приветствие в Debian

Дата: 23.09.2015Метки:

Каждый раз при SSH подключении к серверу на экране отображается стандартное сообщение, которое содержит информацию о последнем входе в систему и информацию про отказ от ответственности. Вместо того что бы при каждой авторизации созерцать на бесполезную с точки зрения администрирования информацию, предлагаю ее заменить на что-нибудь более информативное. Не знаю как вы, а я первым делом при входе на сервер выполняю команду top. Связи с чем, мне было бы удобно видеть интересующую меня информацию сразу при входе на сервер.

Команда для быстрой очистки файла, содержащего текст про отказ от ответственности:

cat /dev/null > /etc/motd

Для отображения интересующей меня информации мы будем использовать скрипт, который будет запускаться при каждом входе в систему. В примере ниже скрипт выводит информацию о нагрузке на процессор, использование оперативной памяти и файловой системы, аптайм сервера. В зависимости от ваших потребностей, вы можете добавить или удалить необходимую для вас информацию.

Для того что бы скрипт автоматически запускался при успешной авторизации пользователя, его необходимо добавить в директорию /etc/profile.d и дать право на запуск:

nano /etc/profile.d/sshinfo.sh
chmod +x /etc/profile.d/sshinfo.sh

Включить HTTP/2 в Nginx

Дата: 22.09.2015Метки:

Начиная с версии Nginx 1.9.5 добавлена встроенная поддержка протокола HTTP/2. На данный момент протокол работает в экспериментальном режиме, но уже к концу года разработчики обещают реализовать его полную поддержку. Что бы подготовится к переходу и предварительно протестировать работу своих проектов под HTTP/2, необходимо обновить Nginx до последней mainline-версии. Для этого я рекомендую всегда использовать официальный репозиторий Nginx.

Добавим в /etc/apt/sources.list официальный репозиторий для mainline-ветки Nginx:

deb http://nginx.org/packages/mainline/debian/ codename nginx
deb-src http://nginx.org/packages/mainline/debian/ codename nginx

Установим PGP-ключ и обновляем индекс пакетов:

cd /tmp/ && wget http://nginx.org/keys/nginx_signing.key && apt-key add nginx_signing.key
apt-get update && apt-get install nginx

После установки необходимо проверить, что Nginx собран с поддержкой модуля HTTP/2, для этого используем команду ниже:

# nginx -V
nginx version: nginx/1.9.5
built by gcc 4.9.2 (Debian 4.9.2-10)
built with OpenSSL 1.0.1k 8 Jan 2015
TLS SNI support enabled
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-http_ssl_module --with-threads --with-file-aio --with-http_v2_module --with-cc-opt='-g -O2 -fstack-protector-strong -Wformat -Werror=format-security' --with-ld-opt=-Wl,-z,relro

Команда выведет информацию о параметрах сборки Nginx. Нас интересует опция --with-http_v2_module, которая указывает на поддержку протокола. Что бы включить поддержку HTTP/2 в Nginx, необходимо изменить параметр listen как указано в примере ниже:

listen 443 ssl http2;

Применяем настройки в Nginx:

nginx -t && service nginx reload

В заключении хочу написать о своих впечатлениях. Если в первом патче добавляющем поддержку HTTP/2 в Nginx на WordPress сайте не работала авторизация, то сейчас данной проблемы не наблюдается. Страницы открываются быстро, а Nginx стабильно работает под нагрузкой ApacheBench. Связи с этим было принято решение включить HTTP/2 для своего блога на постоянной основе.