Оптимизация и перенос с veterdoit.com на dovkola.media

Был разработан и внедрен комплекс мероприятий и оптимизирована тема настолько, что объем, который занимал сайт на хостинге был уменьшен почти в 10 раз. Владелец сайта обратился, когда сайт у него начал занимать более 100 гигабайт места на хостинге.

Вначале были удалены все бекапы ненужные, которые были созданы в процессе создания сайта, его доработок, настройки плагинов и различных «откатов» систем к каким-то из вариантов предыдущих. Таким образом занимаемое место удалось оптимизировать до чуть меньше 25 гигов. Уменьшили в 4 раза занимаемое место…

оптимизация сайта veterdoit.com

В целом неплохо, но все-равно слишком много. По этому далее были выполнены следующие работы:

  • удалены ненужные фотографии для статей, которые были найдены с помощью плагинов по поиску неиспользуемых медиа-файлов
  • настроено корректное количество превью для изображений (thumbnail), которые создаются wordpress-ом и его темой. Вместо 15, которые были до оптимизации — оставили 4 размера.
  • оптимизированы все существующие изображения, которые занимают место больше 1 мб.
  • оптимизированы все существующие изображения, которые по меньшей стороне больше, чем 900 пикселей.
  • оптимизирован код темы, удалены ненужные куски кода.
  • оптимизирована загрузка страниц.

Кстати, для оптимизации изображений, был настроен automator, который на компьютерах MacBook Pro (да и вообще всех Маках) поставляется изначально с системой и имеет очень много различных опций по автоматизации.

Теперь у нас получилось следующее:

оптимизация сайта dovkola.media

В итоге мы получили, что сайт занимает 14 гигабайт. Что, в принципе, для такого медиа-издания с таким количеством статей (более 5,5 тысяч), вполне нормальный результат и ожидаемый.

Также были настроены системы автоматического выполнения резервных копий сайта. И проверена работоспособность всех плагинов, а также проверена функциональная работоспособность функционала сайта.

На этом задачи поставленные были выполнены.

Сайт: https://dovkola.media (старый домен — https://veterdoit.com)

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

Сроки выполнения: 5 дней.

CMS / Framework: WordPress.

Landing-page для благотворительной организации Благодійний фонд «Заспокойся»

Был разработан простой и лаконичный лендинг для благотворительного фонда украинского — Благодійний фонд «Заспокойся»

Сайт: https://zaspokoysia.com.ua

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

Сроки выполнения: 10 дней.

CMS / Framework: WordPress.

Публикация в сети Facebook: https://www.facebook.com/MarketingLaboratoryArtIt/posts/pfbid0U9QM65QiKEcu3XW95vc7JDKFKHNf1WyuWFBn2k9Dr4gAFQDjapqCZ8ohwDPUx9UNl

w3c validator ругается на />

При проверке очередного проекта валидатором w3c, он начал ругаться на закрывающуюся ‘/’.

Self-closing tag syntax in text/html documents is widely discouraged; it’s unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you’re using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool.

Перевод:

Синтаксис самозакрывающихся тегов в документах text/html не рекомендуется; это не нужно и плохо взаимодействует с другими функциями HTML (например, значениями атрибутов без кавычек). Если вы используете инструмент, который внедряет синтаксис самозакрывающегося тега во все пустые элементы без возможности предотвратить это, подумайте о переходе на другой инструмент.

Интересное наблюдение… Кто не знал — берите на вооружение…

Хотя, вроде как, месяца полтора-два назад еще небыло такого…

Ну и, конечно же, warning’и на h2-h6 в <section> и/или <article> они не убрали… Хотя тоже странно. По семантике html5 внутри ставишь <header> и это корректно и валидно… Однако валидатор w3c думает иначе.

Свои размеры изображений в WordPress: добавление и удаление

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

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

Функция add_image_size зарегистрирует новый размер изображения.

Параметры

$name — (строка) (Обязательно) Идентификатор размера изображения.

$width — (int) (Необязательно) Ширина изображения в пикселях. По умолчанию 0.

$height — (int) (Необязательно) Высота изображения в пикселях. По умолчанию 0.

$crop — (bool|array) (Необязательно) Обрезка изображения. Если false, изображение будет масштабировано (по умолчанию). Если true, изображение будет обрезано до указанных размеров с использованием центральных положений. Если это массив, изображение будет обрезано с использованием массива, чтобы указать место обрезки. Значения массива должны быть в формате: array(x_crop_position, y_crop_position), где:

     x_crop_position принимает: «слева», «по центру» или «справа».
     y_crop_position принимает: «сверху», «по центру» или «снизу».

Значение по умолчанию: false

В системе есть зарезервированные имена размеров изображений, распознаваемые WordPress: «thumbnail», «medium», «средний», «medium_large», «large» и «post-thumbnail».

Имена «thumb» и «thumbnail» — это просто псевдонимы — они совершенно одинаковы.

Подробное объяснение и «почему» читайте далее в статье image_downsize().

Однако при необходимости вы всегда можете установить параметры самостоятельно:

update_option( 'thumbnail_size_w', 160 );
update_option( 'thumbnail_size_h', 160 );
update_option( 'thumbnail_crop', 1 );

Пример использования функции. Давайте добавим новый размер свой для изображений 330px на 220px.

add_image_size( ‘custom-size’, 330, 220 ); // 330 пикселей в ширину и 220 пикселей в высоту, режим мягкой пропорциональной обрезки.

Если же требуется удалить пользовательский размер для изображений, то существует обратная функция remove_image_size

remove_image_size( string $name )

remove_image_size — удалить новый размер изображения.

Параметры

$имя — (string) (Обязательно) Размер удаляемого изображения.

Возвращает (bool) True если размер изображения был успешно удален, false в случае ошибки.

WordPress pre_get_posts redirect для мультиязычного контента с помощью wpml

Появилась необходимость реализовать следующий функционал:

есть несколько языков на сайте: английский, испанский и китайский. Новости пишут только на английском языке. Для остальных языковых версий нужно сделать тизер для каждой новости (превью / лид-текст новости) и если пользователь кликает по не ней — то переводить его на английскую версию сайта и открывать интересующую новость на английском языке.

Задача не тривиальная. Решение весьма простое.

Был написал следующий функционал в файле functions.php

add_action('pre_get_posts', function(){
if(in_array( get_post_type(), ['event', 'post']) && is_single())
{
    $wpml_permalink = apply_filters( 'wpml_permalink', get_the_permalink(), 'en' );
    if(ICL_LANGUAGE_CODE != 'en' && !empty($wpml_permalink))
    {
        $wpml_permalink = apply_filters( 'wpml_permalink', get_the_permalink(), 'en' );
        echo '<script type="text/javascript">';
        echo 'window.location = "'.$wpml_permalink.'";';
        echo '</script>';
    }
}
});

Здесь мы проверяем

in_array( get_post_type(), [‘event’, ‘post’])

тип нашего поста event или post? Если да, то проходим к дальнейшей проверке:

is_single()

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

Собственно далее мы проверяем, не английский ли у нас язык (используется WPML плагин для мультиязычности) и если это так, то редиректим страницу на английскую версию сайта.

echo '<script type="text/javascript">';
        echo 'window.location = "'.$wpml_permalink.'";';
        echo '</script>';

где $wpml_permalink это ссылка на текущую новость на английском языке:

$wpml_permalink = apply_filters( 'wpml_permalink', get_the_permalink(), 'en' );

Загрузка дампа БД через консоль терминала

Иногда необходимо выгрузить dump базы данных (в нашем случае MySQL) через консоль. Для такой задачи необходимо зайти на сервер через протокол SSH и выполнить следующую команду (предварительно выгрузив на сервер файл с дампом базы данных MySQL):

mysql -u username -p database_name < file.sql

Где -u — указываем, что далее будет следовать имя пользователя БД

-p — указываем, что необходим ввод пароля для пользователя БД

database_name — имя базы данных, в которую необходимо выгрузить наш дамп

file.sql — полный путь к файлу с дампом базы данных.

ERROR 1153 (08S01) MySQL

Однако иногда, крайне редко, можно столкнуться со следующей ошибкой:

ERROR 1153 (08S01) at line 621: Got a packet bigger than 'max_allowed_packet' bytes

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

--max_allowed_packet=10M

где 10М — это необходимый размер памяти, выделяемый и разрешенный для выполнения операции.

Теперь наша строка запроса будет выглядеть следующим образом:

mysql --max_allowed_packet=10M -u username -p database_name < file.sql

UPDATE:

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

/Applications/MAMP/Library/bin/mysql

Своя ссылка на перевод страницы WPML

Иногда бывает необходимо сделать свое кастомизированное решение для вывода ссылки на переведенную страницу сайта на WordPress.

Мы решаем эту проблему созданием собственной функции, которую назовем, скажем my_languages_list() и разместим ее в файле functions.php

function my_languages_list(){
    $languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0&orderby=code' );
    if( !empty( $languages ) ){
        echo '<ul class="languages-list">';
        foreach( $languages as $l ){
            if(!$l['active'])
            {
	            echo '<li>';
	            echo '<a href="'.$l['url'].'">';
	            echo $l['tag'];
				echo '</a>';
				echo '</li>';
			}
        }
        echo '</ul>';
    }
}

own link to translated page wpml wordpress

Данная функция выводит название языка, которое мы указали в настройках в значении tag. Это сделано потому, что у нас на сайте присутствует китайский и он отображается полностью как 简体中文 (Chinese (Simplified), а нам необходимо, чтобы отображалось, кака ZH.

По этому мы эту задачу и решили через вызов функции:

<?=my_languages_list();?>

в нужном месте в файле header.php

link to translated page wpml

Как видите — все довольно просто. В самой функции my_languages_list можно настраивать вывод уже как угодно и как требуем задача непосредственно.

Изображение как фон для email-подписи

Всем привет.

Сейчас email-подписи стали не то, что очень популярны, а являются неотъемлемой частью практически любого сервиса. И мы говорим не только о триггерных рассылках или спаме… Нет, сюда входит абсолютно любое электронное письмо, которое отправляется в бизнес целях.

Вот и я верстал очередной макет для email-подписи одного из клиентов. И столкнулся с определенной проблемой. Мне необходимо было сделать так, чтобы фоновое изображение тянулось на весь макет. Однако, оказалось, что сделать это не так уж и просто.

CSS для background-image для email-подписи

Задача, которая была поставлена, в том, чтобы добиться отображения макета, как указано выше на изображении. Однако на практике получилось, что стили CSS для background резались фильтром gmail-сервиса.

Получается, что правило:

background: ulr('/path_to_file') no-repeat 100% 100%;

фильтр обрезает до конструкции

background: ulr('/path_to_file') no-repeat

И на выходе мы получаем что-то подобное этому

Вставка фона изображением в email-подпись

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

background-image: url('/path_to_file');

background-repeat: no-repeat;

background-position: 100% 100%;

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

background-image: url('/path_to_file');

background-repeat: no-repeat;

После некоторого «курения манов» и перелопачивания кучи ссылок и справочной информации, было найдено решение.

Правила для размеров и положения фонового изображения необходимо записывать в виде правила через ‘/’.

background: url('/path_to_file') no-repeat top / 100% auto;

Такую конструкцию пропустит фильтр почтового сервиса и на выходе мы получим то, что требуется.

ЗЫ: также хочу отметить еще иные результаты изучения справочной информации. Для верстки подписи не подходит позиционирование абсолютное и отрицательные margin.

Эти конструкции также будут фильтроваться и обрезаться фильтром почтовой системы.

Итого:

position: absolute;

и

margin-top: -100px;

Не пройдут проверку и будут обрезаны в финальном виде и не будут применены. Это также нужно учитывать.

Всем хорошего и валидного кода.

4 способа получить cid (Client ID) пользователя Google Analytics

Для реализации различных задач, например — интеграции CRM и Google Analytics, трекинга открытия писем, отслеживания действий пользователя в офлайне нужен ClientID (cid) клиента.

По сути — это уникальный идентификатор пользователя (не человека, а связки компьютер-браузер), который выступает ключом в записи всех данных о посещениях сайта. И если мы хотим передавать какие-то данные в Google Analytics из вне сайта, и чтобы эти данные были связаны с посещениями пользователя, нам нужно знать этот ключ.
1 способ — на сайте установлен код Universal Analytics
Если на сайте есть только код Universal Analytics, то вызвав следующий код, в javascript переменной clientId окажется нужное нам значение:

ga(function(tracker) { var clientId = tracker.get('clientId'); });

2 способ, берем код на серверной стороне с помощью PHP

function gaParseCookie()
    {
        if (isset($_COOKIE['_ga'])) {
            $data = explode('.', $_COOKIE["_ga"]);
            list($version, $domainDepth, $cid1, $cid2) = $data;
            $contents = array('version' => $version, 'domainDepth' => $domainDepth, 'cid' => $cid1 . '.' . $cid2);
            $cid = $contents['cid'];
        }
        else {
            $cid sprintf( '%04x%04x-%04x-%04x-%04x-%04x%04x%04x',
                // 32 bits for "time_low"
                mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ),
                // 16 bits for "time_mid"
                mt_rand( 0, 0xffff ),
                // 16 bits for "time_hi_and_version",
                // four most significant bits holds version number 4
                mt_rand( 0, 0x0fff ) | 0x4000,
                // 16 bits, 8 bits for "clk_seq_hi_res",
                // 8 bits for "clk_seq_low",
                // two most significant bits holds zero and one for variant DCE1.1
                mt_rand( 0, 0x3fff ) | 0x8000,
                // 48 bits for "node"
                mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff )
            );
        }
        return $cid;
    }

3 способ, когда мы берем cid с помощью JavaScript

function()
{
    var match = document.cookie.match('(?:^|;)\\s*_ga=([^;]*)');
    var raw = (match) ? decodeURIComponent(match[1]) : null;
if (raw)
{
match = raw.match(/(\d+\.\d+)$/);
}
var gacid = (match) ? match[1] : null;
if (gacid)
{
    return gacid;
}
}

4 способ, если мы используем Google Tag Manager
Во-первых, создаем новую переменную — ga cookie:

Во-вторых, создаем переменную типа Custom HTML — cid и пишем в неё:

function() {
  try {
    var cookie = {{ga cookie}}.split(".");
    return cookie[2] + "." + cookie[3];
  } catch(e) {
    console.log("No Universal Analytics cookie found");
    return "n/a";
  }
}

И далее, где нам это необходимо используем её {{cid}}, в ней будет хранится Client ID.

Как убрать браузерную обводку кнопок и ссылок в браузерах Chrome и Safari

У кнопок из Bootstrap — при клике на кнопку появляется браузерная обводка (обводка — в Chrome ; и пунктирная обводка — в Firefox )

* Аналогичная ситуация (если хотим эту браузерную обводку убрать) в случае с ссылками и инпутами решается с помощью css-стиля:

a:active, a:focus { outline: none; }

input, textarea {
outline:none;
}
input:active, textarea:active {
outline:none;
}
:focus {
outline:none;
}
textarea {
resize:none;
}
textarea {
resize:vertical;
}
textarea {
resize:horizontal;
}
button:active, button:focus {
outline: none;
}
button::-moz-focus-inner {
border: 0;
}

Данный код будет работать и для ссылок и для кнопок.