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

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

Что происходит с вашими изображениями, когда вы меняете URL-адрес сайта или перемещаете серверы?
Что делать, если на вашем сайте несколько авторов, и некоторые из них ссылаются на внешние изображения? Как сделать так, чтобы эти изображения размещались на вашем сервере?
Что происходит, когда кто-то ссылается на ваши изображения? Кстати, что такое хотлинкинг?

Это некоторые из вопросов, на которые мы ответим в сегодняшнем посте. Как всегда в нашей серии постов, мы начинаем с вопроса «почему», а затем переходим к тому, как. Давайте начнем!.

Совет №1: Управление изображениями с обновлением URL-адресов сайта

Это одна из самых распространенных ошибок, с которыми мы сталкиваемся с пользователями WordPress.

Когда меняется URL-адрес сайта WordPress?

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

1 Переход на новое доменное имя

URL-адрес сайта обновляется при изменении имени домена. Например, Moz ранее назывался SEOMoz. Благодаря новому брендингу им пришлось обновить все существующие URL-адреса изображений, PDF-файлов, партнерских ссылок и т.д. С seomoz.com на moz.com.

2 Изменение каталога установки WordPress

URL-адрес сайта также изменяется, когда вы меняете место установки WordPress. Фактически, это один из самых распространенных случаев.

WordPress устанавливается в новый каталог по умолчанию под названием blog. Многие новички в WordPress по незнанию устанавливают WordPress на example.com/blog.

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

После перемещения WordPress в корневой каталог URL-адрес сайта изменяется с example.com/blog на example.com. Любое изображение, PDF (или любой медиафайл в этом отношении) будет выглядеть примерно так:

СТАРЫЙ: example.com/blog/ebook.pdf
НОВИНКА: example.com/ebook.pdf

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

Это распространено в блогах с высокой посещаемостью или на веб-сайтах электронной коммерции, где любая ошибка приводит к падению конверсии. Переход на промежуточный сервер и с него может быть очень простым, если вы используете управляемый хост, такой как WPEngine или Flywheel. (Между прочим, мы в WPExplorer используем WPEngine три года подряд и ни разу не столкнулись с простоями!)

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

На аналогичной ноте некоторые из вас могут спросить: а какой вред от использования ссылок с промежуточного сервера? Не сэкономит ли это пропускная способность текущего / действующего сайта?

Вы не ошиблись, если так думаете. Однако в действительности это случается редко. Вот почему:

Промежуточный сервер обычно работает с меньшими ресурсами. Вы снизите скорость сайта, что негативно скажется на опыте пользователей.
Во многих случаях корневая ссылка промежуточного / тестового сервера постоянно меняется, что может привести к множеству неработающих ссылок. Представьте себе учебник из 3000 слов с разбитыми скриншотами повсюду. Что бы вы при этом почувствовали?
Это также негативно повлияет на SEO вашего изображения. Помните, что поиск изображений в Google по- прежнему является источником органического трафика. Если изображение не принадлежит вашему домену – вы потеряете бесплатный органический трафик и очки SEO!

Что мы пытаемся решить?

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

Все мы используем изображения в наших сообщениях и на страницах. Типичный пример ссылки на изображение:


http://mywpsite.tld/wp-content/uploads/year/month/image-name.png

Когда URL-адрес вашего сайта WordPress изменяется, ссылки на источники всех изображений также должны измениться на:


http://newwordpressdomain.tld/wp-content/year/month/image-name.png

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

Хорошо, похоже, мы подробно обсудили проблему. Теперь давайте посмотрим, как решить проблему раз и навсегда. Как всегда, нам на помощь приходит плагин WordPress!

URL-адреса обновлений Velvet Blues

Прежде всего, загрузите и установите URL-адреса обновлений Velvet Blues
После активации перейдите на страницу Инструменты панели управления WordPress> Обновить URL-адреса, чтобы настроить параметры плагина.

Замена URL в WordPress – Предоставлено плагином Velvet Blues Update URLs

Помните, как мы использовали функцию «Найти и заменить» Microsoft Word? Что ж, это, по сути, то, что делает плагин! Он находит старые URL-адреса на странице или в содержимом публикации и заменяет их новыми URL-адресами. Таким образом, ссылки на изображения обновляются во всех ваших сообщениях.

Более того, вы можете расширить функциональность плагина для поиска / замены URL-адресов в ссылках на сайты, выдержках, вложениях, настраиваемых полях и мета-блоках.

Ниже приведены несколько примеров старых URL-адресов на вашем сайте:

Если бы вы переходили с промежуточного сервера, старый URL-адрес выглядел бы примерно так: hostname.com
Если вы меняли / обновляли доменное имя, просто используйте новое имя сайта.
Если вы использовали https в качестве протокола, замените http на https.

В нашем примере мы заменили старый URL с http://seomoz.com на https://moz.com. После того, как вы ввели старый и новый URL-адреса, просто нажмите «Обновить URL-адреса». Плагин просканирует все ваши сообщения и страницы и применит магию поиска и замены. Все ваши URL-адреса будут обновлены до значения New URL.

Предупреждение: сканирование и замена нескольких сообщений и страниц может потребовать значительных ресурсов, особенно если в вашем блоге WordPress есть сотни сообщений. Если вы выбрали все параметры сканирования (ссылки на сайты, выдержки и т.д. ), Использование ресурсов значительно увеличится. Обновление многих URL-адресов на уровне сайта может привести к временной приостановке вашей учетной записи хостинга из-за чрезмерного использования ресурсов. Эта проблема чаще всего встречается у поставщиков общего хостинга. Поэтому я бы рекомендовал соблюдать осторожность при запуске плагина.

Совет № 2: Импорт внешних изображений в WordPress

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

Для ясности предположим, что мы используем изображения с соответствующими лицензиями (иначе мы могли бы оказаться в совершенно другом споре!).

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

Они потребляют пропускную способность других людей, что не совсем справедливо.
Ущерб нашим изображениям в SEO.

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

Визуальный редактор WordPress

Если, конечно, мы не перейдем в текстовое представление редактора WordPress.

Текстовое представление редактора WordPress, показывающее исходный HTML-код содержимого сообщения.

Мы видим, что это изображение фактически размещено на imgur.com – популярном веб-сайте для размещения изображений. Чтобы это исправить, нам необходимо:

Скачать образ
Загрузите его в WordPress
Обновите ссылку в сообщении

Можете ли вы представить себе повторение всех этих шагов для каждого изображения во всех сообщениях? Только поиск всех внешних изображений займет несколько дней! Значит, должно быть решение, правда? Или я говорю об этом, чтобы вас разочаровать?

Конечно, нет! Выход есть. И, как всегда, это отличный бесплатный плагин для WordPress.

Как импортировать внешние изображения в WordPress

Одно из первых, что мне нравится в этом плагине, – это само его название. Он ясный, четкий и точный. Для начала скачайте и установите плагин Import External Images. Активируйте плагин и перейдите в Панель управления WordPress> Медиа> Импорт изображений.

Вы должны увидеть такую панель параметров:

Параметры плагина WordPress для импорта внешних изображений

Если вы заметили в правом нижнем углу, вы увидите, что плагин уже определил сообщения, содержащие внешние изображения.

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

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

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

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

Изображения автоматически импортируются и сохраняются в медиатеке WordPress.

Итак, изображения импортируются в галерею мультимедиа WordPress. А как насчет содержания поста? Они по-прежнему указывают на старый URL-адрес изображения? Точно нет!

Плагин также заменяет ссылку на файл изображения новым URL-адресом, то есть ссылкой вашего домена!

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

Влияние на производительность: аналогично проблемам потребления ресурсов, которые мы обсуждали в плагине обновления URL-адресов, импорт внешних изображений в WordPress также потребляет справедливую долю ресурсов сервера. К счастью, разработчик принял меры по контролю за использованием сервера. Плагин сканирует до 50 сообщений за один звонок (т.е. когда вы посещаете или обновляете страницу настроек плагина). Он также ограничивает максимальное количество изображений до 20 на вызов импорта.

Совет № 3: Как предотвратить хотлинкинг изображений в WordPress

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

Что ж, хотлинкинг изображений в чем- то похож. Люди берут ваши изображения и используют их на своих сайтах. Они получают известность, а вы в конечном итоге оплачиваете их счета. И с этим ничего не поделать.

Оставайтесь на линии! Последняя строчка неверна. Вы можете что-нибудь с этим поделать. В конце концов, это WordPress! Вы, вероятно, думаете: «Ah Sourav собирается представить еще один плагин». Баззинга! Я не.

1 Настройте свой веб-сервер для предотвращения горячих ссылок (Apache или NGINX).

Ваш веб-сервер достаточен, чтобы другие люди не смотрели ваши изображения. Два самых распространенных веб-сервера – это Apache и NIGNX. Если вы используете Apache в качестве веб-сервера, вы можете предотвратить использование горячих ссылок на изображения в WordPress, добавив несколько строк кода в свой файл .htaccess. Еще в 2013 году я написал короткое руководство по этому поводу – оно применимо и сегодня.

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


location ~ .(gif|png|jpe?g)$ {
      valid_referers none blocked .yourwebsite.com;
      if ($invalid_referer) {
         return   403;
     }
 }

Замените yourwebsite.com своим фактическим доменным именем.

Вкратце, этот фрагмент кода предотвращает горячие ссылки на файлы GIF, PNG и JPG / JPEG. Эти файлы будут доступны только вашему домену и никому другому. Если кто-то попытается установить горячую ссылку на эти 3 формата файлов, он получит ошибку 403.

Вот краткое построчное объяснение вырезанного кода.

Строка 1 определяет форматы изображений. Вы также можете добавить сюда видео форматы, такие как mp4.
Строка 2 сообщает NGINX, что запросы из вашего домена должны быть разрешены. Если какой-либо другой домен запрашивает его, заблокируйте запрос.
Строка 3 сообщает NGINX, что делать, если запрос поступил из запрещенного домена.
Строка 4 сообщает NGINX о выдаче ошибки HTTP 403 Forbidden, если выполняется условие в строке # 3.
Строки 5 и 6 закрывают код должным образом, чтобы он выполнялся!

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


location /uploads/ {
      valid_referers none blocked .yourwebsite.com;
      if ($invalid_referer) {
         return   403;
     }
 }

Замените / uploads / директорией, которую вы хотите предотвратить от горячей ссылки. В нашем примере мы выбрали каталог загрузок WordPress по умолчанию. Если вы похожи на большинство из нас, вы должны загрузить все свои изображения, PDF-файлы и другие мультимедийные файлы, используя загрузчик WordPress по умолчанию, который, в свою очередь, поместит файлы в папку / uploads /. Таким образом, защищая основную папку, мы предотвращаем горячую ссылку для любых загрузок.

2 Используйте CDN для предотвращения ссылок на изображения в WordPress.

Удивлен? Так было и со мной, когда я впервые прочитал об этом. Все мы слышали о CloudFlare как об одном из лучших бесплатных CDN. Знаете ли вы, что они также предлагают бесплатную защиту от хотлинков?

Чтобы включить защиту от горячих ссылок, просто перейдите на панель управления своей учетной записи CloudFlare, а затем нажмите Scrape Shield. Переведите кнопку в положение ON, и все готово.

Если вы используете Cloudflare, вы можете легко включить защиту от хотлинков в разделе Scrape Shield в своей учетной записи. Поскольку Cloudflare является полностью прокси-службой, вам не нужно беспокоиться о включении защиты от хотлинков на исходном сервере.

Если вы используете премиум-службу CDN, такую как StackPath CDN или KeyCDN, все, что вам нужно, – это создать соответствующие правила для источников перехода зон и обеспечить их соблюдение. У KeyCDN есть прекрасный учебник по этому поводу, стоит его прочитать.

3 Используйте плагин: All In One WP Security & Firewall Plugin.

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

Ознакомьтесь с плагином All In One WP Security & Firewall. Этот плагин имеет более полумиллиона активных установок и обладает множеством важных функций безопасности WordPress.

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

Как предотвратить хотлинкинг изображений в WordPress с помощью плагина безопасности All in One WordPress

Скачайте и установите плагин.
Активируйте его, перейдите в Панель управления WordPress> Безопасность WP> Брандмауэр и нажмите Предотвратить горячие ссылки.
Установите небольшой флажок внизу и нажмите «Сохранить настройки».

Вот и все. Отныне хотлинкинг изображений запрещен.

Заключение

Чтобы завершить этот пост, давайте быстро пройдемся по тому, что мы узнали.

Как обновить, а лучше заменить старые URL на новые. Решением является отличный плагин под названием Velvet Blues Update URLs.
Затем мы узнали, как импортировать внешние изображения в WordPress. Многие друзья-блогеры делали это хотя бы раз в жизни! Опять же, решение было в плагине под названием Import External Images.
Оба плагина, упомянутые в двух вышеупомянутых сценариях, влияют на производительность, связанные с ними. Нам нужно будет запускать этот плагин с осторожностью.
Наконец, мы рассмотрели, что такое хотлинкинг изображений, и увидели два способа предотвратить его. Первый заключался в добавлении нескольких строк кода в плагин .htaccess, а второй – в использовании плагина безопасности.

Вопрос – что вы думаете об этих советах? Нашли что-нибудь полезное? Есть что предложить лучше? Кроме того, как тебе сериал на данный момент? Дайте нам знать в комментариях ниже и следите за обновлениями в следующей части серии.

Источник записи: https://www.wpexplorer.com