G|Translate: English EN Deutsch DE Italiano IT Русский RU Español ES Українська UK

Делаем модальное окно iFrame с помощью jQuery для WordPress

Красивое модальное окно вот такого плана для открытия в нем ссылки

Делаем модальное окно iFrame с помощью jQuery для WordPress

Посмотреть в живую можно вот тут

Несмотря на то, что это достаточно популярный запрос “как сделать открыть ссылку в модальном окне” – на первых пяти страницах выдачи (как Яндекс, так и Гугль) сплошной мусор… С вариантами ответов “использовать target=_blank”.

Базовый код не мой – но он немного модифицирован, что бы всё работало правильно.

Какие тут проблемы:

  • можно использовать совсем готовую библиотеку типа fancybox3 – только там кода (в приложенных библиотеках ) объемом почти на 100Кб
  • можно использовать чистый JS – но тут другие проблемы
    • для открытия ссылки нам нужен iFrame
    • при написании только на JS этот фрейм нужно заранее где-то создать – а именно в коде html (те просто у ссылки указать класс для обработки будет не достаточно)
    • jQuery умеет создавать код для вывода для браузера (совсем как php, только на локальной машине)
  • код на jQuery не всегда работает  в WordPress (есть такая загадка)

Итого готовый код модального окна IFrame (jQuery) для WordPress

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!----------------------------->
<style>
* {margin: 0; padding: 0}
.shadow {width: 100%; height: 100%; position: fixed; background-color: #444; top: 0; left:0; z-index: 400}
#modal {z-index: 500; position: fixed; background: #fff; top: 50px;}
#modal iframe {width: 100%; height: 100%}
#closeModal {position: absolute; top: -15px; right: -20px; font-size: 0.8em; }
#closeModal img {width: 30px; height: 30px;}
</style>
<!-- вот здесь должен быть вызов библиотеки jQuery при использовании в файле html вне WP-->
<!----------------------------->
<script type="text/javascript">
var shadow, modalX, modalY, modalWidth, modalHeight;
function modal(url) {
return '<div id="modal"><a id="closeModal" title="close" href="javascript:;"><img width="30" height="30" alt="close" src="data:image/png;base64,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"></a><iframe src="' + url + '"></iframe></div>';
}
shadow = "<div class='shadow'></div>";
jQuery(document).ready(function($) {
$(".myModal").on("click", function(e) {
e.preventDefault();
// get size and position
modalWidth = $(this).data("width");
modalHeight = $(this).data("height");
modalX = (($(window).innerWidth()) - modalWidth) / 2;
modalY = (($(window).innerHeight()) - modalHeight) / 2;
// append shadow layer
$(shadow).prependTo("body").css({
"opacity": 0.2
});
// append modal
$(modal(this.href)).appendTo("body").css({
"top": modalY,
"left": modalX,
"width": modalWidth,
"height": modalHeight
});
// close and remove
$("#closeModal").on("click", function() {
$("#modal, .shadow").remove();
});
$(document).keyup(function(event) {
if (event.keyCode === 27) {
$("#modal, .shadow").remove();
}
}); //keyup
}); // on
}); // ready
</script>
</head>
<!----------------------------->
<body>
<a href="https://wpavonis.ru/" class="myModal" data-width="800" data-height="600">open url</a>
</body>
<!----------------------------->
</html>

линия горизонтальной прокрутки появляется из-за вот этой длинной строки

<img width="30" height="30" alt="close" src="data:image/png;base64,iVBORw0KGgoAAAANSU...

пугаться не надо – это просто крестик в base64 для закрытия окна iFrame (что бы не грузить картинку с другого ресурса).

Что бы код заработал в виде отдельного файла html  – надо в начало <head> добавить вызов библиотеки jQuery

<script type="text/javascript" src="https://yastatic.net/jquery/2.1.3/jquery.min.js"></script>

например, вот так – с Яндекса.

Переходим к сути:

  •  в тэгах <style>…</style> находятся стили, которые отвечают за затемнение (паранджа) и внешний вид окна
  • в тэгах <script>…</script> находится наш код jQuery, который отвечает за вывод окна
  • и в html наша ссылка, в которой указан класс и размеры модального окна -> class=”myModal” data-width=”800″ data-height=”600″

 

Оригинальный код здесь https://jsfiddle.net/8b3Zj/

ВАЖНО – оригинальный код не будет работать в WP!

Основные различия

 Оригинальный кодКод для WordPress
крестик закрытия окнассылка на картинку PNG, квадратный крестикссылка на картинку в base64, круглый крестик
окно на экранедвигается при прокруткезафиксировано на экране
работа в WPне работаетработает

 

Почему код jQuery не работает в WordPress?

Что именно модифицированно в коде? 

В базовом коде в начале блока идет 

$(document).ready(function()

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

Поэтому в WordPress файл jquery.js, который располагается по адресу /wp-includes/js/jquery/jquery.js, отличается от стандартных версий библиотеки jQuery тем, что в конце файла прописана строчка:

jQuery.noConflict();

Эта строчка и отключает работу с элементами страницы через $.

Существует несколько вариантов решения:

  • использовать конструкцию вида jQuery(document).ready(function($) – как и сделано в измененном коде
  • заменить везде вызовы функций $ на jQuery – неудобно, когда код большой
  • использовать в начале скрипта var $ = jQuery;

Добавляем модальное окно iFrame (jQuery) в WordPress

Посмотрим, как всю эту красоту добавить в WordPress. По умолчанию – в WordPress библиотека jQuery подключена изначально. Да, есть  отдельные темы, которые её отключают при старте – что бы получить красивые показатели скорости загрузки. Но таких тем меньшинство.

Вариант 1 – работать будет, но не всегда.

Добавляем два блока

<style>...</style>
<script>...</script>

в head, например с помощью плагина Head & Footer Code

Делаем модальное окно iFrame с помощью jQuery для WordPress

Работать будет в 99%.

Для 100%  гарантии работы используем

Вариант 2 – добавляем скрипты средствами WordPress

Суть проблемы.

Что бы Ваш скрипт jQuery сработал – до его вызова гарантирована должна загрузиться сама библиотека jQuery. 

Нужно сделать два отдельных файла:

  • CSS (для стилей из содержимого <style>…</style> )
  • и JS (для кода jQuery из содержимого <script>…</script>) 

и подключить их с помощью функции wp_enqueue_style

Тогда WordPress корректно и правильно подключит стили CSS и код jQuery.


Новый виджет WP для вывода в сайдбаре списка авторов блога с аватарами

Да, еще один виджет списка авторов :)

Новый виджет WP для вывода в сайдбаре списка авторов блога с аватарами

Получилось симпатично. Сам плагин можно скачать в статье

Плагин вывода списка авторов блога (виджет)

В плагине tsl-plugin-list-author в настройках можно указать заголовок  и число авторов для вывода.

Новый виджет WP для вывода в сайдбаре списка авторов блога с аватарами

Под авторами подразумеваются все пользователи, у которых есть статьи (посты).

В качестве аватара автора используется картинка, установленная пользователем в сервисе Gravatar. Но с применением плагина Simple Local Avatars можно использовать картинку из медиатеки WordPress.

Плагин по умолчанию:

  • выводит список трех (по умолчанию – настраивается) авторов
  • сортировка авторов по числу публикаций
  • показ аватара автора
  • показ числа статей автора
  • ссылка с картинки на страницу автора
  • показ e-mail автора

 

В планах – показ общего числа просмотров статей каждого автора (в сумме) в виде:

  • 23 post (115 views)
  • 4 post (31 views)

Т.е. будет видно не только число статей автора, но и насколько этого автора читают :)

UPDATE:

Вышла новая версия плагина (widget) вывода списка авторов


Управление уведомлениями email WordPress

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

Управление уведомлениями email WordPress

Всё, что у нас есть в базовой установке WordPress – только одна “галочка” при регистрации пользователя. Вот это.

Управление уведомлениями email WordPress

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

Используем плагин Manage Notification E-mails

Заходим в его настройки и видим, что наши возможности сильно расширились.

Управление уведомлениями email WordPress

Плагин не переведен на русский, смотрим перевод основных пунктов ниже.

Уведомление о новом пользователе для админаОтправка письма администратору сайта после регистрации нового пользователя.
Уведомление о новом пользователе для самого пользователяОтправка письма с учетными данными недавно зарегистрированному пользователю.
Уведомить автора постаОтправка письма автору поста после комментария / обратной связи
Уведомить модератораОтправка письма модератору блога о новом комментарии, ожидающем утверждения.
Уведомление об изменении пароля для администратораОтправка письма администратору сайта после смены пароля пользователя.
Уведомление об изменении пароля для пользователяОтправка письма пользователю после смены его пароля.
Уведомление об изменении адреса электронной почты пользователюОтправка письма пользователю после смены его электронной почты.
Отправка забытого пароля пользователюОтправить забытый пароль по электронной почте зарегистрированному пользователю.
(Чтобы предотвратить блокировку, отправка администратору электронного письма с забытым паролем по-прежнему будет работать)
Отправка забытого пароля админуОтправьте администраторам письмо с забытым паролем. Ладно, это ОПАСНЫЙ ВАРИАНТ!
Так что будьте осторожны, потому что отключение этой опции предотвращает отправку забытого пароля по электронной почте всем администраторам. Так что держите свой пароль и меняйте его на свой страх и риск ;-)
Уведомление об автоматическом обновлении ядра WPОтправляет администраторам электронное письмо после успешного автоматического обновления ядра WordPress. Электронные письма о неудачных обновлениях всегда будут отправляться администраторам и не могут быть отключены.

Что бы не забивать почту своих пользователей – два уведомления можно отключить:

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

Плагин вывода анонсов постов в конце контента

Увеличим просмотры других статей автора, покажем дочерние страницы

Смотрим и устанавливаем плагин

Плагин вывода анонсов постов в конце контента

Вывод для записей (в конце контента)

Плагин вывода анонсов постов в конце контента

Вывод для страниц (в конце контента)

Плагин вывода анонсов постов в конце контента

Вывод последних публикаций:

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

 

Вывод списка последних 7 записей в конце каждого поста. 

Последние публикации –  в тегах H3

Названия постов в списке –  в тегах H4

    • Ник автора и ссылка на его посты
  • Название рубрики и ссылка на неё
    • миниатюра (ссылка на пост)
    • название поста (ссылка на пост)
    • дата публикации (с указанием прошедшего периода)
    • первые 700 символов текста поста

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

Вывод сообщения “Статьи от: Автор” :

  • если ник по умолчанию совпадает с логином
  • если отображаемое имя совпадает с логином
  • если в качестве ника или отображаемого имени используется
    • Admin (без учета регистра)
    • Administrator (без учета регистра)
    • Администратор

 

Вывод списка дочерних страниц:

Почитать в разделе –  в тегах H3

Названия страниц в списке –  в тегах H4

  • сортировка по названию
  • вывод миниатюры
  • вывод названия
  • первые 700 символов страницы

Дата и автор – не выводятся.

 

ВАЖНО: Выводится только миниатюра. При отсутствии миниатюры НЕ ИСПОЛЬЗУЕТСЯ первое изображение для показа.

Почему это важно? Если Вы используете в выводе первую картинку как заменитель миниатюры – у Вас на странице может оказаться 20 картинок * 100 Кб = 2 Мб лишних изображений. И Вы этого даже не заметите – т.к. вывод каждой картинки будет в рамках 100*100 pix. 

Миниатюра должна быть миниатюрой – т.е. маленькой.

Читаем статью

Миниатюры (thumbnails) записей и страниц WordPress

Используем плагин

Плагин добавления колонки featured image (миниатюра) в административной панели


Не пускаем ботов в админку WP (wp-login.php и xmlrpc.php)

Смотрим на логи сервера

Не пускаем ботов в админку WP (wp-login.php и xmlrpc.php)

 

Вот так выглядит счастье для сисадминов – если кто не знал:)

[Fri May 22 11:01:17.963061 2020] [client 18.197.84.84:56894] AH01630: client denied  : /wp-login.php
[Fri May 22 11:01:18.106043 2020] [client 18.197.84.84:56910] AH01630: client denied  : /wp-login.php
[Fri May 22 11:01:18.259101 2020] [client 18.197.84.84:56914] AH01630: client denied  : /xmlrpc.php
[Fri May 22 11:04:39.421585 2020] [client 2001:41d0:2:b55c:::46826] AH01630: client denied  : /wp-login.php
[Fri May 22 11:04:39.609779 2020] [client 2001:41d0:2:b55c:::46862] AH01630: client denied  : /wp-login.php
[Fri May 22 11:04:39.797490 2020] [client 2001:41d0:2:b55c:::46888] AH01630: client denied  : /wp-login.php
[Fri May 22 11:04:39.987180 2020] [client 2001:41d0:2:b55c:::46924] AH01630: client denied  : /wp-login.php
[Fri May 22 11:04:40.174743 2020] [client 2001:41d0:2:b55c:::46942] AH01630: client denied  : /wp-login.php
[Fri May 22 11:04:40.450029 2020] [client 2001:41d0:2:b55c:::46976] AH01630: client denied  : /wp-login.php
[Fri May 22 11:04:40.640164 2020] [client 2001:41d0:2:b55c:::47002] AH01630: client denied  : /xmlrpc.php
[Fri May 22 11:10:30.298825 2020] [client 206.196.116.67:52872] AH01630: client denied  : /wp-login.php
[Fri May 22 11:10:30.926579 2020] [client 206.196.116.67:52940] AH01630: client denied  : /wp-login.php
[Fri May 22 11:10:31.554545 2020] [client 206.196.116.67:53014] AH01630: client denied  : /xmlrpc.php
[Fri May 22 11:18:38.969303 2020] [client 35.185.199.45:45612] AH01630: client denied  : /wp-login.php
[Fri May 22 11:18:40.054804 2020] [client 35.185.199.45:45682] AH01630: client denied  : /wp-login.php
[Fri May 22 11:18:41.272080 2020] [client 35.185.199.45:45776] AH01630: client denied  : /xmlrpc.php
[Fri May 22 11:20:40.950042 2020] [client 148.66.135.69:55340] AH01630: client denied  : /wp-login.php
[Fri May 22 11:20:41.871050 2020] [client 148.66.135.69:55432] AH01630: client denied  : /wp-login.php
[Fri May 22 11:20:42.830788 2020] [client 148.66.135.69:55542] AH01630: client denied  : /wp-login.php
[Fri May 22 11:20:43.598987 2020] [client 148.66.135.69:55604] AH01630: client denied  : /wp-login.php
[Fri May 22 11:20:44.388140 2020] [client 148.66.135.69:55686] AH01630: client denied  : /wp-login.php
[Fri May 22 11:20:45.165568 2020] [client 148.66.135.69:55726] AH01630: client denied  : /wp-login.php
[Fri May 22 11:20:45.998620 2020] [client 148.66.135.69:55776] AH01630: client denied  : /xmlrpc.php
[Fri May 22 11:26:52.959616 2020] [client 2a03:b0c0:2:d0::563:6001:58866] AH01630: client denied  : /wp-login.php
[Fri May 22 11:26:58.127265 2020] [client 2a03:b0c0:2:d0::563:6001:59268] AH01630: client denied  : /wp-login.php
[Fri May 22 11:27:03.261629 2020] [client 2a03:b0c0:2:d0::563:6001:60032] AH01630: client denied  : /xmlrpc.php
[Fri May 22 11:34:04.001339 2020] [client 208.109.8.138:41174] AH01630: client denied  : /wp-login.php
[Fri May 22 11:34:05.053820 2020] [client 208.109.8.138:41252] AH01630: client denied  : /wp-login.php
[Fri May 22 11:34:06.107059 2020] [client 208.109.8.138:41322] AH01630: client denied  : /wp-login.php
[Fri May 22 11:34:07.168429 2020] [client 208.109.8.138:41380] AH01630: client denied  : /wp-login.php
[Fri May 22 11:34:08.235558 2020] [client 208.109.8.138:41436] AH01630: client denied  : /wp-login.php
[Fri May 22 11:34:09.310973 2020] [client 208.109.8.138:41492] AH01630: client denied  : /wp-login.php
[Fri May 22 11:34:10.373247 2020] [client 208.109.8.138:41558] AH01630: client denied  : /xmlrpc.php
[Fri May 22 11:34:40.989390 2020] [client 47.52.24.59:43850] AH01630: client denied  : /wp-login.php
[Fri May 22 11:34:42.660901 2020] [client 47.52.24.59:43966] AH01630: client denied  : /wp-login.php
[Fri May 22 11:34:44.105989 2020] [client 47.52.24.59:44054] AH01630: client denied  : /xmlrpc.php
[Fri May 22 11:42:28.978192 2020] [client 83.69.119.98:57360] AH01630: client denied  : /wp-login.php
[Fri May 22 11:42:29.185023 2020] [client 83.69.119.98:57378] AH01630: client denied  : /wp-login.php
[Fri May 22 11:42:29.376756 2020] [client 83.69.119.98:57394] AH01630: client denied  : /xmlrpc.php
[Fri May 22 11:50:14.127647 2020] [client 47.100.112.214:39108] AH01630: client denied  : /wp-login.php
[Fri May 22 11:50:16.307674 2020] [client 47.100.112.214:39274] AH01630: client denied  : /wp-login.php
[Fri May 22 11:50:17.584971 2020] [client 47.100.112.214:39356] AH01630: client denied  : /wp-login.php
[Fri May 22 11:50:19.088346 2020] [client 47.100.112.214:39464] AH01630: client denied  : /wp-login.php
[Fri May 22 11:50:19.997543 2020] [client 47.100.112.214:39536] AH01630: client denied  : /wp-login.php
[Fri May 22 11:50:20.954260 2020] [client 47.100.112.214:39632] AH01630: client denied  : /wp-login.php
[Fri May 22 11:50:22.080398 2020] [client 47.100.112.214:39702] AH01630: client denied  : /xmlrpc.php

За один час (22 мая 2020 с 11:00 до 12:00)

  • это не самый популярный сайт всего с 20 посетителями в день
  • 46 попыток войти в административную панель WordPress за один час
  • для попыток были использованы оба варианта wp-login.php и xmlrpc.php
  • в атаке принимали участие 10 компьютеров с разными IP

client denied (анг.) – клиенту отказано

В сутки 46*24 = порядка 1000 попыток заходов ботов в админку. Плюс еще столько же желающих задать вариант скрипта php в строке браузера + еще 1000 какой-либо код в форму обратной связи вставить.

Итого 3000 ботов в сутки против визитов 20 живых людей на сайт. 

Их всех на входе отбил Apache. Если бы запрос дошел до сервера PHP с WordPress – то нагрузка процессора была бы на уровне 90%-100%. Пароль  бы они не подобрали – но сервер заняли бессмысленной работой и обычный посетитель сайт  в выдаче скорее всего не получил (с ошибкой 503 Service Unavailable).

Как настроить защиту WordPress – читаем в статье

Защита WP


Обработка Error 404 в WordPress

Очень полезная вещь! Что это? Какие-то таинственные заклинания?

Обработка Error 404 в WordPress

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

Суть проблемы ошибки 404 в WordPress.

Все ошибки 404 (нет запрошенной страницы) WordPress обрабатывает самостоятельно. Это здорово придумано, можно делать свою красивую страницу 404 – и будет счастье.

Но в интернете развелось очень много желающих сломать Ваш сайт и постоянно роботы (сетевые боты) делают проверки вида:

  • domen,ru/pass.php
  • domen,ru/login.php
  • domen,ru/administrator.php

и прочая ахинея

Обработка Error 404 в WordPress

Обратите на временной интервал подборщиков:

  • 6:44
  • 6:46
  • 6:48
  • 6:49
  • 6:50
  • 6:51

и на каждое такое обращение WP генерирует страницу 404…

Можно поискать плагин, который пишет ошибки не в базу, а в файл на сервере (пока не нашел, напишу сам). При наличии файла на сервере – можно подключить fail2ban (и скормить ему этот файл) и блочить тупых ботов по IP после трех-пяти ошибок 404.

Плюс часть “умных” утащили с Вашего сервера картинки себе на сайт методом “copypaste” – т.е. картинки на чужом сайта по-прежнему загружаются с Вашего сервера (и дополнительно его используют).

И  после того, как Вы переделали свою исходную статью и картинки к ней (часть удалили, например) – Ваш WordPress начнет генерировать ошибку 404 на каждую отсутствующую картинку! Причем по одной странице 404 на каждую картинку!

Жесть какая, да? Нам нужно оставить генерацию 404 средствами WordPress только для отсутствующих страниц.

Возвращаем управление Error 404 серверу Apache

В WopdPress принудительно сделана передача себе обработки 404. Нужно изменить файл .htaccess, что бы движок обрабатывал только отсутствующие страницы (а не файлы).

Вот собственно код для модуля  mod_rewrite.c (поделились добрые люди)

# BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On 
RewriteBase / 
RewriteRule ^index\.php$ - [L] 
 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_URI} \.(php|s?html?|css|js|jpe?g|png|gif|ico|txt|pdf)(/?\?.*)?$ 
RewriteRule . - [R=404,L] 

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.php [L] 
</IfModule>

# END WordPress

Синим цветом – от WordPress, красным – в центре добавлены изменения:

  • запрос файла
  • проверка расширения
  • действие -> 404

 

Этот код полностью переключит всю обработку 404 на Apache для соответствующих расширений файлов.

Обратите внимание на регулярное выражение s?html? – это означает целый набор расширений файлов:

  • shtml
  • shtm
  • html
  • htm

Знак вопрос в регулярном выражении разрешает повторение предыдущего символа 0 или 1 раз. Конструкция jpe?g работает аналогично – это или jpg или jpeg

Если Вам надо оставить обработку файлов .html на WordPress, а все остальные варианты htm отдать Apache – можно сделать так

s?htm|shtml – т.е. отдаем Apache три варианта (вертикальная черта означает “или”)

  • shtm
  • htm
  • shtml

Можно еще добавить расширений файлов, которые любят роботы-подборщики

  • yml – Yandex Market Language – для загрузки прайс-листов в Маркет
  • swp – файл обмена виртуальной памяти
  • bak – архивные файлы чего-либо
  • xml – разметка xml
  • env – настройка переменных среды Unix
  • sql – дамп базы данных MySql
  • dat – файл хранения необработанных данных
  • new – не знаю почему, но роботы пробуют
  • zip, gzip,rar – файлы архивов
  • log – файлы логов
  • suspected – расширение, которое присваивает антивирус хостера для зараженных файлов (index.php -> index.php.suspected)
  • 7z – файл архива
  • gz – файл архива
  • tar – файл архива

И еще для особо продвинутых (любопытных) ботов надо запретить:

  • тильду на конце расширения файла – т.е. вот такой вариант domen.ru/abcd.php~ (тильда в некоторых ОС используется как временно сохраненная версия)
  • и слеш в конце – т.е. вот такой вариант тоже не должен обрабатываться 404  в WP – domen.ru/abcd.php/

Добавляем после скобки с расширениями файлов еще скобку (\/?~?) – принцип тот же (символ на конце может быть а может и не быть) – это и /? и ~?

Лишний бэкслеш нужен для экранирования обычного слеша – т.к. он является системным символом.

Исключаем robots.txt из обработки Apahce

ВАЖНО: использование txt в списке расширений отключит генерацию виртуального файла robots.txt средствами WordPress (при отсутствии физического файла robots.txt на сервере). Просто запрос domen.ru/robots.txt не дойдет до сервера PHP.

Для исключение файла /robots.txt из обработки ошибки 404 средствами Apache – его надо добавить в условие (исключить ТОЛЬКО robots.txt)

RewriteCond %{REQUEST_URI} !^/robots\.txt$

  • символ ! означает отрицание
  • символ ^ означает, что проверяется совпадение с начала строки
  • символ \ означает, что следующий символ является просто символом, а не управляющим символом (наша точка перед txt) – в данном случае не критично (в regex точка означает одиночное совпадение с любым символом, в т.ч. и с точкой)
  • символ $ означает (без доллара никуда…), что мы не только слева проверяем наличие robots.txt, но и справа. Символы txt справа – они последние в проверке. Без $ мы заодно исключим варианты для обработки Apache (а оно нам надо?)
    • robots.txt~
    • robots.txt/ 
    • и так далее

 

Итоговая конструкция (которая в середине файла .htaccess) будет иметь вид

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_URI} !^/robots\.txt$
RewriteCond %{REQUEST_URI} \.(php|asp|suspected|log|xml|s?htm|shtml|css|js|yml|swp|bak|env|new|sql|dat|zip|gzip|rar|7z|tar|gz|jpe?g|svg|png|gif|ico|txt|pdf)(\/?~?)$
RewriteRule . - [R=404,L]

Решение этого вопроса на WordPress (вариант и для Nginx)

How do I skip wordpress’s 404 handling and redirect all 404 errors for static files to 404.html?

https://wordpress.stackexchange.com/questions/24587/how-do-i-skip-wordpresss-404-handling-and-redirect-all-404-errors-for-static-fi

Вносим корректировки в .htaccess 

ВАЖНО:  ручная корректировка файла .htaccess не поможет, WordPress контролирует его содержимое и периодически возвращает свои исходные настройки в блоке, выделенному тэгами 

# BEGIN WordPress

# Директивы (строки) между `BEGIN WordPress` и `END WordPress`
# созданы автоматически и подлежат изменению только через фильтры WordPress.
# Сделанные вручную изменения между этими маркерами будут перезаписаны.

# END WordPress

Используйте плагин, которые умеет его редактировать и перехватывает управление WP, например

Плагин All in One SEO Pack

Вот его раздела “Редактор файлов”

Обработка Error 404 в WordPress

Или через использование хуков и функций WordPress

Вот в этой статье подробно написано, как это сделать

Вред от страницы 404 в WordPress или не загружаем страницу 404, если это файл

ВАЖНО: разработчики WordPress периодически что-то изменяют – обратите внимание на появление в WoprdPress 5.6 новой  инструкции

RewriteRule .* – [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

Поэтому можно вообще сделать отдельным блоком до модуля Вордпресса

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/robots\.txt$
RewriteCond %{REQUEST_URI} \.(php|asp|suspected|log|xml|s?htm|shtml|css|js|yml|swp|bak|env|new|sql|dat|zip|gzip|rar|7z|tar|gz|jpe?g|svg|png|gif|ico|txt|pdf)(\/?~?)$
RewriteRule . - [R=404]
</IfModule>
# BEGIN WordPress
# Директивы (строки) между `BEGIN WordPress` и `END WordPress`
# созданы автоматически и подлежат изменению только через фильтры WordPress.
# Сделанные вручную изменения между этими маркерами будут перезаписаны.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

 

Обязательно в нашем правиле RewriteRule убираем флаг L (который Last – т.е. последнее перенаправление). Иначе часть инструкций ниже от WP работать не будет.

И конструкцию <IfModule mod_rewrite.c></IfModule> тоже крайне желательно использовать – она дает серверу исполнять инструкции внутри, если уставлен mod_rewrite.c для Apache.  У 99% хостеров он установлен по умолчанию – но на всякий случай пусть будет.

Результат обработки 404 со стороны Apache

ВАЖНО: весь этот список файлов (по их расширениям) не блокируется Apache – мы просто ему возвращаем управление ошибкой 404 при отсутствии какого-либо файла с этим расширением. Если  файл есть или расширение не запрещенное (в данном случае html разрешено) – Apache пропускает url в обработку WordPress.

Раз

Обработка Error 404 в WordPress

Два

Обработка Error 404 в WordPress

Три

Обработка Error 404 в WordPress

Красота же :)

Нагрузка на сервер PHP падает на 50% – теперь ему не нужно обрабатывать 404 в ответ на тупые подборы…

Оставим только медиа для APACHE

Вроде всё хорошо, и Апач быстрый – но b “мамкиных” хакеров много.

Вот такое безобразие может быть

https://site.ru/site.php71
https://site.ru/site.php72
https://site.ru/site.php73
https://site.ru/site.php74
https://site.ru/site.php75

Причем скрипт подборщика делает это 60 раз в минуту (и в user agent = python) – т.е. APACHE занят полностью и никто к Вам на сайт из живых людей не зайдет.

Имеет смысл оставить 404 ошибку через APACHE только для медиафайлов – а всё остальное пропускать в WordPress. Делать лог и баннить :)

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/robots\.txt$
RewriteCond %{REQUEST_URI} \.(jpe?g|svg|png|gif|ico)(\/?~?)$
#media only
RewriteRule . - [R=404]
</IfModule>
# BEGIN WordPress
# Директивы (строки) между `BEGIN WordPress` и `END WordPress`
# созданы автоматически и подлежат изменению только через фильтры WordPress.
# Сделанные вручную изменения между этими маркерами будут перезаписаны.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Далее php-скриптом формируем лог ошибок 404 на сервере и отдаем в блокировку fail2ban.

В результате IP такого вредителя блокируется на уровне сервера (NetFilter)  на 1 неделю – 1 месяц.

В принципе обработку 404 ошибки в логе можно оставить и в APACHE, но не удобно:

  • это не ошибка вебсервера – это отсутствие URL
  • все ответы сервера 200…400…500 пишутся в лог доступа, а в не лог ошибок
  • если сайтов несколько – будут отдельные логи для каждого сайта

Плюс достаточно сложная логика обработки статуса 404:

  • это могут быть боты поисковых систем – их не надо блокировать
  • это могут быть ошибки реальных пользователей
  • вообще кто угодно и что угодно может набрать в строке браузера

Проще всю логику сделать на PHP, чем на регулярных выражениях при настройке fail2ban.

 


Как узнать в WordPress URL сайта

Вроде простой вопрос для программиста PHP.

Как узнать в WordPress URL сайта

Получаем URL блога с правильным протоколом

Используй функцию WordPress home_url() и будет тебе счастье.

Что может пойти не так?

Это “грабельки” № 1 – иногда функция home_url() возвращает URL сайта с неправильными протоколом, обычно http вместо https. Как такое может быть?

Это обычно бывает при переводе сайта на https.

В двух словах – недостаточно просто сделать сертификат и включить протокол https. Необходимо еще поменять настройки WordPress.

Функция home_url() определяет протокол на основе двух критериев:

  • функции is_ssl(), которая в свою очередь берет информацию от сервера Apache
  • и настроек WordPress – от URL адреса WordPress (переменная WP_HOME)

 

Если после перехода на https Вы не использовали дополнительно никаких плагинов и не меняли настройки WP – функции WP будут Вам возвращать только http.

Можно заранее предварительно определить протокол и принудительно заставить использовать именно его в функция home_url()

echo home_url('/', 'https'); // https://domen.ru/

Проблема определения протокола http/https

Мы можем узнать протокол http/https из разных источников данных. В результате определение протокола становится вероятностной задачей.

  • хорошо, когда есть Apache c его глобальным массивом переменных $_SERVER
    • $_SERVER[‘HTTP_HOST’] – домен сайта
    • $_SERVER[‘HTTPS’] – “on”, “1”  для https
    • $_SERVER[‘HTTP_X_FORWARDED_FOR’] – включена переадресация с http на https
    • $_SERVER[‘REQUEST_SCHEME’] – https или http
    • $_SERVER[‘SERVER_PORT’] – 443 для https и 80 для http
  • но могут быть разные версии Apache, в том числе и старые – части переменных может не быть
  • сервер вообще может быть не Apache (например, Windows Server)
  • на сервере может не быть включена переадресация на HTTPS (при наличии SSL)
  • на сервере может быть просрочен сертификат SSL (т.е. протокол htttps будет, а шифрования не будет)
  • смешанное содержимое – т.е. шифрование и протокол включили – но картинки с сайта по прежнему отдаются в http
  • в настройках сайта WordPres в разделе “Адрес WordPress” указан протокол http/https – смотри ниже

И как тут корректно определить https?

Придется использовать несколько критериев:

  • ответ сервера
  • настройки WordPress
  • попытку получить ответ сервера “код 200” для двух вариантов URL (с http и https)

В чём разница между URL сайта и URL WordPress?

Это “грабельки” № 2

Зачем-то в настройках два пункта

Как узнать в WordPress URL сайта

Фокус в том, что Вы можете переместить всё файлы ядра WordPress в отдельную папку на сервере – и все будет работать. Например в папку domen.ru/wordpress

Размещаем WordPress в отдельном каталоге

В WordPress даже есть специальная функция site_url()

Да, как Вы уже видите, разработчики WordPress много чего тут намешали…. Попробуем в виде таблицы

Название в “настройках”Глобальная переменнаяПример URLФункция WPОпределение протокола http/https
Адрес WordPressWP_SITEURLhhtp://domen.ru/wordpresssite_url()Только по данным сервера и по переменной WP_SITEURL
Адрес сайтаWP_HOMEhhtp://domen.ruhome_url()По данным сервера и по переменной WP_HOME

Зачем так интересно сделано?

  • сервер бывает не только Apache (где есть переменная $_SERVER), но какой-нибудь другой сервер (где такой переменной нет)
  • Apache может быть настроен “кривыми” руками и отдать некорректные значения в массиве $_SERVER 

Тогда протокол будет определяться ручными настройками WordPress.


Плагин WP вывода файла robots.txt в консоль

Плагин выводит содержимое файла robots.txt в консоль.

Плагин WP вывода файла robots.txt в консоль

Функционал:

  • проверка корректности переменных WordPress – WP-SITEURL и WP-HOME (Настройки -> Общие) = данные переменные участвуют в определении протокола http / https, если сервер дает некорректные ответы.
  • при совпадении протоколов https – зеленый цвет, при несовпадении – красный. При наведении курсора на знак “?” – появляется всплывающая подсказка
  • при совпадении протоколов https – зеленый цвет, при несовпадении – красный.
  • вывод ответов сервера по http и https,  плагин проверяет ответ сервера на файл robots.txt по обоим протоколам 

 

Пример ошибочных настроек WordPress при переходе на https

Плагин WP вывода файла robots.txt в консоль

Сам плагин можно скачать по ссылке ниже

Плагин метабокса консоли – вывод файла robots.txt

При отсутствии файла – выводится предупреждение.

Плагин WP вывода файла robots.txt в консоль

Комментарий:

под “файлом robots.txt” подразумевается ответ сервера “200” по адресу domen.ru/robots.txt. Самого файла при этом может и не быть на сервере – вполне допускается генерация виртуального файла как самими движком WordPress, так и некоторыми плагинами.


Плагин WP для получения информации об изображениях поста

Мы хотим оптимизировать картинки для более быстрой загрузки страницы. Что тут можно сделать?

Плагин WP для получения информации об изображениях поста

Казалось бы тут один путь – делаем их размер меньше. Но на этом пути есть несколько важных “грабелек”:

  • картинки должны быть адаптивными, т.е. в качестве ширины должны стоять %, например “width” = 80%, а не абсолютный размер в пикселях
  • WordPress “умеет” из одной исходной картинки “нарезать” картинки меньших размеров и показывать их на экранах планшетов и смартафонов – но должен работать тэг srcset

 

Читаем статью – Не надо «оптимизировать» scrset

Но есть проблема – srcset будет работать только для изображений:

  • загруженных через WordPress в медиатеку (т.е. должна быть создана нарезка из картинок)
  • и данная картинка должна быть привязана к данному посту
  • если одно и тоже изображение используется в нескольких статьях, то scrset будет работать только там, где эта картинка зарегистрирована.  Нужно делать дубль картинки, регистрировать её в медиатеке WordPress и прикреплять к текущему посту (такая волшебная кнопка пока в разработке).

 

И еще одна проблема – в медиатеке WordPress можно выбрать все картинки, которые никуда не прикреплены (через фильтр) –  и удалить их.

Плагин WP для получения информации об изображениях поста

Так делать не надо – это только WP считает, что картинка не прикреплена (берет данные из своей базы) – а она очень даже может быть на странице без всякой регистрации.

Сначала надо по всем постам и страницам проверить такое прикрепление (такая волшебная кнопка тоже пока в разработке) – и только потом удалять.

Когда мы всё это делаем через админку блога – всё происходит автоматически.

А если нет? У нас в части статей картинки были просто указаны по их URL-адресу? Как быстро получить сводную информацию по всем изображениям в посте?

Встречайте плагин Плагин tsl-ampel-seo

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

Плагин WP для получения информации об изображениях поста

  • колонка Image — сама картинка, при наведении курсора показ её полного url
  • колонка Type — вывод информации о типе изображения
  • колонка Size — размер изображения
  • колонка Dimm — размер изображения в пикселях по ширине и высоте
  • колонка Attrib — параметры ширины и высоты, указанные в коде html
  • колонка ID image — ID картинки в базе WP
  • колонка Post — проверка на прикрепление к посту
  • колонка Thumb — проверка использования данного изображения в качестве миниатюры поста
  • колонка Kit size — набор обнаруженных разных разрешений данного изображения

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

Плагин WP для получения информации об изображениях поста


Почему WordPress создает целый набор файлов при загрузке изображения?

Если посмотреть на сайт через FTP – мы в папке с изображениями увидим следующее:

Почему WordPress создает целый набор файлов при загрузке изображения?

Откуда вся эта красота?

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

Хм, а как собственно узнать, какие изображения будут созданы? В стандартном варианте в админке эта информация нигде не показывается.

Но теперь есть решение – плагин tsl-plugin-console-list-size добавляет метабокс с информацией о зарегистрированных размерах изображений.

Почему WordPress создает целый набор файлов при загрузке изображения?

Кто есть кто:

  • базовое загруженное изображение – full
  • изображения, которые зарегистрированы WordPress
    • thumbnail – миниатюра
    • medium
    • medium_large
    • large
  • изображения, на которые зарегистрированы темой  и другими плагинами (вот тут может быть длинный список, всё зависит от фантазии разработчиков темы и плагинов)
    • graphene_slider
    • post-thumbnail (это нарезка для баннера вверху сайта, нарезка происходит при каждой загрузке!)

Наличие данной информации позволяет контролировать генерацию набора картинок. Как видно – есть исходная картинка full и 4 определенных размера от WordPress. Все остальные дополнительные размеры генерирует тема и плагины (регистрация в базе WordPress). Например, популярный плагин TOP-10 делает свою картинку для миниатюру (если оставить настройки по умолчанию).

Почему WordPress создает целый набор файлов при загрузке изображения?

И тут же мы видим этот зарегистрированный размер в консоли – теперь при каждой загрузке будет дополнительно нарезаться картинка 250*250 pix.

Почему WordPress создает целый набор файлов при загрузке изображения?

Очевидно – нам такое “счастье” не нужно, теперь мы можем это оперативно контролировать.