WordPress: Как открывать изображение в лайтбоксе по клику?

По умолчанию (сразу после установки чистой версии) в WordPress, в его редакторе блоков Gutenberg мы можем наблюдать давно желанную функцию увеличения изображения по клику без перенаправления, то есть оставаясь на той-же странице.

Добиться этого можно путём выделения нужного изображения и клика по ссылке. Учтите, что выбрав блок Медиа и Текст вы не обнаружите эту возможность (проверял на версии: 6.5.3), вам будет доступно только прикрепления оригинала изображения.

Медиа и Текст

Ниже вы можете наблюдать последовательность прикрепления файла изображения к его миниатюре:

ScreenShot00082 jpg - WordPress: Как открывать изображение в лайтбоксе по клику?

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

Как открывать изображения в лайтбоксе (всплывающее окно)?

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

вставляю в контент страницы картинку-миниатюру

И вот тут-то мы можем наблюдать нужную нам функцию! Она называется Развернуть при нажатии

ScreenShot00084 jpg - WordPress: Как открывать изображение в лайтбоксе по клику?

Выбрав её, наше изображение будет открываться во всплывающем окне, тем самым не перескакивая со страницы на отдельный URL, об этом свидетельствует «крестик» при помощи которого мы можем свернуть обратно наше изображение

крестик закрытия лайтбокса

Но как же быть, если нам необходимо чтобы текст обтекал изображение справа? Для этого мы можем воспользоваться другим блоком, который называется Колонки

блок Колонки

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

ScreenShot00089 jpg - WordPress: Как открывать изображение в лайтбоксе по клику?

Как открывать фото из галереи в лайтбоксе?

Теперь рассмотрим ещё один пример на основе галереи. Вначале добавим блок Галереи на нашу страницу:

добавим блок Галереи

После этого загрузим (или выберем из библиотеки файлов) нужные нам изображения и выделив всю галерею справа в её настройках укажем в качестве ссылки Медиафайл.

ScreenShot00091 - WordPress: Как открывать изображение в лайтбоксе по клику?

Что получится? Да то же самое что и в самом первом случае — изображения будут открываться в новых URL . Чтобы задействовать наш лайтбокс нужно присвоить эту функцию каждому изображению в галереи:

делаем ссылку на лайтбокс

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

Какие права должны быть на файлы и папки в WordPress?

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

ошибка 403

Для того чтобы это исправить или не допустить нужно выставить правильные права.

Все каталоги (директории) должны быть 755 или 750

Все файлы должны иметь права 644 или 640. Исключение: wp-config.php должен иметь номер 440 или 400, чтобы другие пользователи сервера не могли его прочитать.

Подробнее

Как из консоли изменить разрешения на файлы и папки?

sudo find . -type f -exec chmod 644 {} +
sudo find . -type d -exec chmod 755 {} +
sudo chmod 440 wp-config.php

Как изменить владельца у файлов и папок?

sudo chown -R www-data:www-data /var/www/mysite

Пример с wp-cli

Рассмотрим простой пример, когда из корня сайта мы при помощи WP CLI совершаем установку плагина и сразу, второй командой, меняем владельца всех файлов этого плагина

sudo wp plugin install woocommerce --allow-root
sudo chown -R www-data:www-data ./wp-content/plugins/woocommerce

Это можно было бы сделать немного эстетичней, например, запустив команду сразу под нужным пользователем:

sudo -u www-data wp plugin install woocommerce

Как скрыть блоки на странице Консоль в WordPress?

Добро пожаловать в консоль WordPress!

Консоль — это первое место, куда вы попадаете каждый раз, когда входите на свой сайт.

По умолчанию (сразу после установки WordPress) на экране «Консоль» доступны следующие блоки:

на экране «Консоль» доступны следующие блоки:

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

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

На виду — отображает краткий отчёт о содержимом вашего сайта, включая тему оформления и версию WordPress.

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

Быстрый черновик — позволяет создать новую запись и сохранить её как черновик. Также выводит 3 последних черновика, созданных вами.

Новости и мероприятия WordPress — Предстоящие мероприятия рядом с вами, а также свежие новости официального проекта WordPress и WordPress Planet.

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

ScreenShot00049 jpg - Как скрыть блоки на странице Консоль в WordPress?

Теперь нужно отметить те виджеты (блоки) которые вы предпочитаете скрыть

скрываем виджеты

Готово! Теперь наш экран стал чистым!

ScreenShot00051 jpg - Как скрыть блоки на странице Консоль в WordPress?

Как подключить Турбо-страницы Яндекса для сайта на WordPress?

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

Официальный сайт

Подробно о турбо-страницах можно почитать по ссылке выше,а мы сразу перейдем к делу 🙂

Подключение Турбо-страниц в Вебмастере

Ваш сайт должен уже быть подключен к Яндекс Вебмастер. Далее, переходим по этой ссылке. Подключение Турбо-страниц в Вебмастере.

 Подключение Турбо-страниц в Вебмастере.

В WordPress уже существует генерация rss-фида, но как мы видим он не соответствует требованиям разметки от Яндекс. Самым простым и быстрым методом будет подключение и создание специального фида через плагин.

Официальный сайт (ссылка в начале поста) предлагает ряд бесплатных решений:

плагины для вордпресс для создания турбо-страниц

Не вижу причин для отсутствия в этом списке ещё одного решения — плагина Яндекс.Турбо (Автор: Flector), но мы его установим через стандартный интерфейс установки плагинов в CMS WordPress:

плагин  Яндекс.Турбо

Краткая Инструкция по установке

  1. Установите плагин через меню «Плагины\Добавить новый» (искать «RSS for Yandex Turbo» или «Яндекс.Турбо»).
  2. Активируйте плагин в меню «Плагины».
  3. Зайдите в настройки плагина «Настройки\Яндекс.Турбо» и сохраните их.
Настройки плагина «Яндекс.Турбо»

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

https://codeispoetry.ru/feed/turbo

ссылки

Всё зависит от общего количество записей на вашем сайте и их разбивке. По умолчанию это значение равно 50. Следовательно, если у вас 500 записей, то в итоге вы получите 10 ссылок по 50 записей в каждой.

ссылки фида

Теперь осталось добавить их в разделе Яндекс Вебмастер, который мы рассматривали ранее.

ScreenShot00024 - Как подключить Турбо-страницы Яндекса для сайта на WordPress?

После добавления вполне возможно вы можете увидеть предупреждения или ошибки валидации, но это не расстраивайтесь — это поправимо.

Исправление ошибок

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

отладка

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

ScreenShot00039 jpg - Как подключить Турбо-страницы Яндекса для сайта на WordPress?

В моём случае валидатор ругался на тег <header>. Я просто исключил этот тег в разделе фильтров:

исключаем тег

Это можно было исправить и другим способом. Ошибка была связана с содержимом тега [CDATA[]] найдены закодированные символы

ошибка найдены закодированные символы

Можно исправить сам тег, например взять его в специальный тег code — это будет правильным решением.

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

валидный фид

Готово!

Учтите, что в режиме ВКЛ (фид включен) валидация пройдёт не сразу.

Проверка фида может занимать продолжительное время. Наберитесь терпения. Сам Яндекс оповещает о том, что обычно проверка занимает около 2 часов.

Во включенном состоянии переобход источника и перестроение примеров Турбо-страниц в поиске происходит раз в час.

Яндекс Вебмастер

Часто встречающиеся ошибки RSS-канала

А пока что, если у вас сайт подключен к Яндекс Метрики, то рекомендуется указать ваш счётчик чтобы не утратить аналитику за счет подключения технологии турбо-страниц.

подключаем счётчик

Где найти идентификатор (номер) счетчика?

Рекомендую посетить эту страничку.

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

ScreenShot00028 - Как подключить Турбо-страницы Яндекса для сайта на WordPress?

Раздел доступен в разделе Настройки:

Настройки

Как установить фавикон (favicon) на сайт в WordPress?

Заходим в раздел Настройки -> Общие

Как добавить favicon

Рекомендуется добавлять квадратное изображение разрешением 512 на 512 пикселей, так как его нарезка будет использоваться на разных устройствах.

Значок сайта который Вы видите во вкладках браузера, строке закладок, и внутри мобильных приложений WordPress. Он должен быть квадратной формы с разрешением не менее 512 × 512 пикселей.

официальная рекомендация из панели управления WordPress
favicons

Как копировать файлы между Linux-серверами при помощи утилиты rsync?

rsync — быстрая и гибкая программа, позволяющая копировать файлы на/с удалённых машин.

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

Задача: скопировать всю директорию (включая все файлы) размером более 50ГБ с удаленного сервера под управлением Debian/Ubuntu.

Решение: Воспользуемся утилитой rsync. Подробная информация.

Общий синтаксис команд достаточно простой.

rsync [ОПЦИИ...] ОТКУДА... [КУДА]
    Pull (получение):
        rsync [ОПЦИИ...] [USER@]HOST:ОТКУДА... [КУДА]
    Push (отправка):
        rsync [ОПЦИИ...] ОТКУДА... [USER@]HOST:КУДА

Следуя этим схемам давайте выполним нашу поставленную задачу.

  rsync --archive --verbose --progress -e "ssh -p 22888" root@00.000.00.000:/var/www/site/ ~/newsite/public_html

Данная команда скопирует всё содержимое директории /var/www/site/ удалённой машины в домашнюю директорию пользователя /newsite/public_html текущей машины (с которой осуществлялось подключение).

Данный пример рассматривает подключение по нестандартному ssh порту 22888 (по умолчанию 22-ой).

Опции:

  • —archive (можно сокращённо -a) команда для удобства объединяет в себе ряд других команда (равносильно -rlptgoD). То есть, утилита пройдёт рекурсивно по всем вложенным каталогам, перенесёт символические ссылки как символические ссылки ( -l ), сохранит изначальные права доступа к файлам ( -p ), сохранит время модификации ( -t ) и т.д.
  • —verbose вывод подробной информации о процессе синхронизации.
  • —progress показывать строку прогресса для синхронизации.
  • -e указывает удаленную оболочку для подключения (использования)

Рекомендация

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

В таком случае наша консольная команда может выглядеть вот так:

sudo rsync --dry-run -azvv -e ssh /home/path/folder1/ ЮЗЕР@ХОСТ:/home/path/folder2

На что обратить внимание?

  1. Это закрывающие слэши. Закрывающий слэш означает «внутреннее содержимое». То есть, если в случае /var/www/site/ убрать закрывающий слэш /var/www/site то в итоге будет создана эта директория и мы получим немного неожиданный результат. Наши копируемые файлы окажутся вот тут /newsite/public_html/site
    • При этом, наличие или отсутствие закрывающего слэша в имени директории, в которую будет происходить копирование, значения не имеет. Важно обращать внимание на слэш источника.
  2. Это символы двоеточия при подключении к удалённым машинам.

Как добавить заголовок «Last Modified» на сайте WordPress + Nginx?

Подробнее о заголовке Last-Modified можно почитать тут. Пожалуй, для SEO добавлю описание:

HTTP заголовок Last-Modified сообщает клиенту (браузеру, поисковому боту) время последнего изменения страницы (объекта). Если клиент получил заголовок Last-Modified, то при следующем обращении к адресу, при условии, что страница (объект) есть в локальном кэше, он добавит заголовок-вопрос If-Modified-Since (не изменилась ли страница после даты, полученной в Last-Modified).

В свою очередь сервер, получив запрос If-Modified-Since должен сверить полученную временную метку с временем последнего изменения страницы и, если страница не изменялась ответить 304 Not Modified.

Как добавить HTTP заголовок Last-Modified на PHP в WordPress?

В целом на официальном сайте уже существует реализация на PHP, которую остаётся немного адаптировать для WP.

Отправка Last-Modified и обработка HTTP_IF_MODIFIED_SINCE на PHP

// время последнего изменения страницы в формате unix time
$lastModified = strtotime('2022-06-18 19:01:58');

// дата последней загрузки, отправляемая клиентом
$ifModified = strtotime(substr($_SERVER['HTTP_IF_MODIFIED_SINCE'] ?? '', 5));

if ($ifModified && $ifModified >= $lastModified) {
    // страница не изменилась, отдача http статуса 304
    header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified');
    exit;
}

header('Last-Modified: ' . gmdate("D, d M Y H:i:s \G\M\T", $lastModified));
// дальнейшая загрузка страницы

Получаем время последнего изменения страницы, проверяем наличие If-Modified-Since, если есть — отдаем 304 Not Modified и останавливаем работу скрипта, иначе генерируем заголовок Last-Modified и отдаем страницу.

Версия для WordPress

Этот готовый код необходимо добавить в functions.php или через плагин. Я рекомендую добавлять этим методом.

/**
 * Last-Modified and If-Modified-Since Headers
*/

add_action('wp', poet_'last_if_modified_headers' );

function poet_last_if_modified_headers() {
    global $post;
        if(isset($post)){
            $LastModified_unix = strtotime($post->post_modified);
            $LastModified = gmdate("D, d M Y H:i:s \G\M\T", $LastModified_unix);
            $IfModifiedSince = false;

            if (isset($_ENV['HTTP_IF_MODIFIED_SINCE'])) {
                $IfModifiedSince = strtotime(substr($_ENV['HTTP_IF_MODIFIED_SINCE'], 5));
            }
            if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
                $IfModifiedSince = strtotime(substr($_SERVER['HTTP_IF_MODIFIED_SINCE'], 5));
            }

            if ($IfModifiedSince && $IfModifiedSince >= $LastModified_unix) {
                header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified');
                exit;
            }

            header('Last-Modified: '. $LastModified);
        }
}

Настройки HTTP-сервера Nginx

Если вы используете в качестве веб-сервера Nginx , то есть вероятность столкнуться с проблемой отдачи заголовка. Всё дело в том, если у вашей конфигурации включена директива ssi

Модуль ngx_http_ssi_module — это фильтр, обрабатывающий команды SSI (Server Side Includes) в проходящих через него ответах.

https://nginx.org/ru/docs/http/ngx_http_ssi_module.html

Пример конфигурации при котором разрешается обработка команд SSI в ответах:

location / {
    ssi on;
    ...
}

Следовательно, прицепом к этой директиве необходимо включить еще одну, которая по умолчанию выключена:

location / {
    ssi on;
    ssi_last_modified on;
}

Позволяет сохранить поле заголовка “Last-Modified” исходного ответа во время обработки SSI для лучшего кэширования ответов.

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

Вот и всё 🙂

Обязательно перезапустите HTTP-сервер Nginx и протестируйте отдачу заголовка.

Вот правильная работа заголовка:

протестируйте отдачу заголовка

Как установить Node.js в ОС Windows?

Шаг 1. Делаем запрос в поисковой системе

Делаем запрос в поисковой системе

Шаг 2. Переходим в раздел загрузки на официальный сайт

Переходим в раздел загрузки на официальный сайт

Шаг 3. Скачиваем установочный файл

Шаг 4. Запускаем процесс установки…

Скачиваем установочный файл

Выполняем последовательно действия при установке. Next

Запускаем процесс установки...

Принимаем условия и нажимаем Next

Принимаем условия и нажимаем Next

Это путь распаковки файлов программы. Ничего не меняем и нажимаем Next

Ничего не меняем и нажимаем Next

Ничего не меняем и нажимаем Next

Ничего не меняем и нажимаем Next

Важно! Нужно поставить галочку для установки дополнительных зависимостей в систему и нажимаем Next

Важно! Нужно поставить галочку для установки дополнительных зависимостей в систему и нажимаем Next

Нажимаем Install

ScreenShot00009 - Как установить Node.js в ОС Windows?

Начинается процесс распаковки (установки) файлов в систему

процесс распаковки (установки) файлов в систему

Шаг 4. Дожидаемся завершения установки дополнительных зависимостей

ScreenShot00011 - Как установить Node.js в ОС Windows?

Чтобы начать установку дополнительных компонентов нужно в консоли нажать любую клавишу

установка

После завершения установки проверьте версию Node.js и ее менеджера пакетов при помощи простых команд в консоли

node -v
npm -v
Результат

Поздравляю! На этом всё!

Как быстро улучшить производительность сайта на WordPress?

Самый простой плагин для оптимизации скорости WordPress, который позволяет ускорить работу сайта в несколько кликов, встречайте! Бесплатный плагин — Jetpack Boost.

После установки плагина и его активации в меню появится специальный раздел. Нас интересует ссылка Boost

Boost

Чтобы начать использовать функции плагина необходимо выбрать тарифный план. Его бесплатной версии более чем достаточно.

бесплатная версия плагина

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

Jetpack Boost — Настройки ‹ Мой сайт — WordPress 2 - Как быстро улучшить производительность сайта на WordPress?

Ну а если нет, то давайте улучшим эти показатели.

Оптимизация загрузки CSS

Первая настройка Оптимизация загрузки CSS создаёт критически важные CSS вашей главной страницы, публикаций и других страниц. Это позволяет значительно ускорить отображение контента на экране, в особенности на мобильных устройствах.Подробнее о создании критически важных CSS см. на web.dev

По умолчанию эта настройка включена. Единственное нужно дождаться ее завершения и не покидать страницу.

Оптимизация загрузки CSS

Кеш страниц

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

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

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

Кеш страниц

P.S. Рекомендую включить журнал и проверить работу кеширования. Если проблем на сервере нет, то при включенном страничном кешировании вы должны видеть попадание в кеш посещенных страниц.

кеширование

Отложенное выполнение второстепенного кода Javascript

Отложенное выполнение второстепенного кода Javascript переносит выполнение ряда задач на время после загрузки страницы. Таким образом важная визуальная информация отображается раньше, а веб-сайт загружается быстрее. Подробнее об отложенном выполнении javascript см. на web.dev

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

Объединить и минифицировать CSS и JS

Объединить и минифицировать CSS и JS: объединяет и сжимает ресурсы JavaScript и CSS, чтобы снизить количество и объём запросов к серверу, что позволяет быстрее загружать контент.

Опытные пользователи могут найти для себя полезную настройку — исключений JS:

Jetpack Boost — Настройки ‹ Мой сайт — WordPress 4 - Как быстро улучшить производительность сайта на WordPress?

CDN изображений

CDN изображений позволяет вашему сайту загружать изображения автоматически изменённого размера в современных веб-форматах прямо из всемирной сети доставки контента Jetpack.

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

Доставка изображений из сети предоставления содержимого Jetpack. Автоматически изменяет ваши изображения до подходящего размера, конвертирует их в современные эффективные форматы, такие как WebP, и загружает их из глобальной сети серверов.

Ну вот и всё! В несколько кликов мы заложили неплохой фундамент для повышения производительности нашего сайта на WordPress.

Как получить текущий год на JavaScript?

const currentYear = new Date().getFullYear().toString();
  • new Date() — создаём объект который хранит в себе текущий момент времени
  • getFullYear() — выдёргиваем из объекта год указанной даты. Так как мы создавали экземпляр Date() без аргументов, то год будет соответствовать текущему моменту, а следовательно быть актуальным
  • toString() — возвращаем тип данных строку.

Ну вот и всё! Теперь в константе currentYear будет находится текущий год

пример

Как изменить имя учетной записи Майкрософт в Windows 11?

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

Шаг №1

Нажмите правой кнопочкой мышки на фирменной кнопке ПУСК и выберите ссылку Управление компьютером:

Управление компьютером

Шаг №2

Выберите Локальные пользователи и группы

Локальные пользователи и группы

Шаг №3

Выберите раздел Пользователи

Пользователи

Вы увидите всех доступных в системе пользователей.

Шаг №4

Выделите нужного и нажмите правой кнопочкой мышки на нём, выбрав ссылку Переименовать:

2024 04 09 230509 - Как изменить имя учетной записи Майкрософт в Windows 11?

Шаг №5

Переименуйте пользователя

Переименуйте пользователя

Шаг №6

Перезагрузите компьютер. После перезагрузки новое имя пользователя будет отображаться в системе:

Новое имя

Как изменить свой пароль от сайта WordPress с помощью WP-CLI?

Забыли пароль пользователя? Не беда! В этой статье мы его восстановим при помощи командной строки и инструмента WP-CLI (WP Command Line Interface) — это интерфейс командной строки для WordPress.

Откройте терминал, выберите директорию с нужным сайтом и введите первую команду:

wp user list

Эта команда отобразит всех пользователей вашего сайта.

+----+------------+--------------+---------------------------+---------------------+---------------+
| ID | user_login | display_name | user_email                | user_registered     | roles         |
+----+------------+--------------+---------------------------+---------------------+---------------+
| 1  | @admin     | @admin       | admin@gmail.com | 2023-11-29 10:25:31 | administrator |
| 2  | author     | author       | author@gmail.ru          | 2024-02-16 08:11:28 | subscriber    |
| 3  | dasha      | Даша         | dasha@gmail.ru  | 2024-03-14 09:58:12 | shop_manager  |
+----+------------+--------------+---------------------------+---------------------+---------------+

Нас интересует первый столбик. Запомните ID пользователя которому будете менять пароль и введите следующую команду:

wp user update id --user_pass=password

Вместо id — укажите нужное числовое значение, а вместо password — новый пароль. Всё!