Как отредактировать страницу 404 в WordPress (Руководство по настройке) | WP Баффы

Опубликовано: 2022-01-07

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

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

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

Что такое страница 404

Вы нажимаете на ссылку или вводите URL-адрес на вкладке браузера. Затем браузер начинает запрашивать данные с сервера, на котором размещен веб-сайт, который вы хотите посетить. Это основное объяснение работы в Интернете. Обмен информацией между браузером и сервером подразумевает, среди прочего, несколько кодов состояния. Кроме того, существуют статусы для описания перенаправления веб-страницы, ошибок клиента или сервера или в информационных целях.

Все коды состояния с формой 4XX относятся к ошибкам клиента. Например, 403 Forbidden — это когда сервер понимает запрос браузера, но отказывается предоставить данные. На сегодняшний день страница 404 — самый известный код состояния. Вы получаете страницу 404, когда нажимаете на неработающую ссылку, вводите неправильный URL-адрес, ведущий на несуществующую веб-страницу, или если запрашиваемый вами ресурс никогда не существовал.

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

Анатомия хорошей страницы 404

Изображение дизайна страницы 404 на tiktok.com в качестве примера того, как редактировать страницу 404 в WordPress.
Дизайн страницы 404 на tiktok.com

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

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

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

Извинения . Сообщите людям, что вы сожалеете о причиненных им неудобствах. Если возможно, используйте юмор — это лучший способ побудить их дать вашему сайту второй шанс.

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

Как редактировать страницу 404 в WordPress

К счастью, у нас есть различные варианты редактирования страницы 404 в WordPress. Самые опытные пользователи могут пойти на редактирование файла 404.php. Это файл, отвечающий за отображение страницы с ошибкой 404. Веб-администраторы, которые предпочитают использовать конструктор страниц, такой как Elementor, могут создать страницу 404. Наконец, для тех, у кого нет навыков программирования, доступно несколько плагинов для создания страниц 404. Давайте разберем все способы создания и редактирования страницы 404 в WordPress.

Редактировать страницу 404 через FTP-клиент

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

Предположим, вы выполнили полное резервное копирование сайта и готовы углубиться в дело. Используйте FTP-клиент по вашему выбору и подключитесь к сайту localhost. Найдите файл с именем 404.php file — это файл, отвечающий за отображение веб-страницы с ошибкой 404. Обычно темы WordPress имеют специальный файл 404.php, но некоторые могут пропустить этот файл. Дважды проверьте, содержит ли код вашей темы файл 404.php. Если в вашей теме нет файла 404.php, вам придется его создать. Создайте новый файл и скопируйте следующие строки кода:

Шаблон страницы 404

 <?php /** * The template for displaying 404 pages (Not Found) * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div class="content-area"> <div class="site-content" role="main"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1> </header> <div class="page-wrapper"> <div class="page-content"> <h2><?php _e( 'This is somewhat embarrassing, isn't it?', 'twentythirteen' ); ?></h2> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p> <?php get_search_form(); ?> </div><!-- .page-content --> </div><!-- .page-wrapper --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>

Источник : Создание страницы с ошибкой 404 в WordPress Codex

Это код темы 404 Page of Twenty Thirteen — это базовая страница, подходящая для редактирования и использования в вашем проекте. Конечно, вы можете взглянуть на другие темы WordPress по умолчанию и проверить их страницы 404. Страница 404 темы Twenty Thirteen вызывает верхний и нижний колонтитулы вашего сайта, поэтому страница соответствует стилю вашего сайта. Независимо от того, как выглядит ваш сайт, страница с ошибкой 404 будет иметь похожий дизайн. Однако вам необходимо адаптировать содержимое, отображаемое на этой странице. На этом этапе в дело вступает талант вашего создателя контента.

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

  • Отобразите заголовки последних семи сообщений. Все, что вам нужно сделать, это вставить этот фрагмент кода в файл 404.php:
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>
  • Отображение заголовков семи случайных сообщений Вставьте следующий код, чтобы отобразить семь случайных сообщений:
 <ul> <?php $rand_posts = get_posts( array( 'posts_per_page' => 5, 'orderby' => 'rand' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; wp_reset_postdata(); } ?> </ul>

Добавьте свой логотип или забавное изображение (кошки и собаки всегда работают), чтобы зрители улыбнулись и дали вам второй шанс. Затем протестируйте страницу 404 после того, как закончите редактирование. Чтобы отобразить страницу 404, введите адрес своего сайта в строке браузера и добавьте после него случайную строку букв. Результат должен выглядеть примерно так:

 https://example.com/dfdfddfd

Если это не работает, это потому, что сервер не может найти ваш пользовательский файл 404.php. В этом случае вы должны перейти к файлу .htaccess сайта и вставить следующую строку кода:

Документ об ошибке 404 /index.php?error=404

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

Редактировать страницу 404 с помощью редактора тем (не рекомендуется)

Изображение того, как редактировать страницу 404 в WordPress с помощью редактора тем.
Редактирование страницы 404 через редактор тем

В значительном количестве статей, посвященных редактированию страницы 404 в WordPress, редактор тем упоминается как жизнеспособное решение. Это не! Хотя редактировать код сайта прямо из административной панели WordPress удобно и просто, это опасно и может закончиться фиаско. Не говоря уже о том, что редактировать сайт, пока он онлайн и доступен для всех, непрофессионально. Кроме того, ваше редактирование исчезает после обновления темы (если вы не используете дочернюю тему).

Редактировать страницу 404 с помощью компоновщика страниц

Этот метод безопасен, прост и эффективен. Вы, вероятно, знакомы с конструкторами страниц, такими как Elementor, Divi Builder, Beaver Builder, SeedProd или Themify Builder. Что вы выберете, не имеет значения, если вы хорошо разбираетесь в этом. Эти конструкторы позволяют создать отличную страницу 404, не написав ни единой строчки кода. Это лучшее решение, если вы беспокоитесь о вставке фрагментов кода в файлы вашего сайта.

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

Плагины WordPress для 404 страниц

У вас не так много альтернатив для создания страницы 404 с помощью специального плагина. Тем не менее, несколько плагинов заслуживают вашего внимания. Их главное преимущество в том, что вам не нужно писать код для создания и редактирования страниц 404. Плагины простые, эффективные и легкие.

404страница  

Плагин 404page в репозитории WP
Плагин 404page в репозитории WP

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

Установите и активируйте плагин. Затем создайте страницу 404 так же, как и остальные страницы вашего сайта. На панели администратора WordPress перейдите в раздел « Внешний вид» > «Страница ошибки 404» и выберите страницу, которую вы только что создали, в качестве пользовательской страницы ошибки 404 вашего сайта.

Этот плагин не позволяет перенаправлять веб-страницы; он просто сообщает поисковым роботам, что веб-страница отсутствует. 404page — это личный проект разработчика, поэтому за этим плагином не стоит агентство. Учтите, что у плагина 100 000 активных установок и почти идеальный рейтинг — 4,9 звезды из 5. В этих условиях разработчик плагина заслуживает нашей признательности!

Все 404 перенаправления на домашнюю страницу и перенаправление битых изображений  

Все плагины 404 Redirect в репозитории WP
Все плагины 404 Redirect в репозитории WP

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

Настройщик Colorlib 404  

Плагин Colorlib 404 Customizer в репозитории WP
Плагин Colorlib 404 Customizer в репозитории WP

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

Используйте конструктор страниц или сделайте это через свою тему .

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

● Свежий

● Элементор

● Строитель бобров

● Диви Строитель

● Происхождение сайта

Если вы используете такую ​​тему, как OceanWP, GeneratePress или Astra, вы можете сделать это с помощью параметров их темы. Вы получите готовую страницу с ошибкой 404, если импортируете демо-контент. Единственным недостатком импорта демо-контента и использования готовых дизайнов является то, что ваш веб-сайт будет более или менее выглядеть точно так же, как демо. Возьмем, к примеру, этот веб-сайт и демо-версию Astra. Каждый, кто просматривал библиотеку стартовых сайтов Astra, быстро поймет, что владельцы сайтов создали ее не сами. Это может повредить тому, насколько пользователи доверяют вашему сайту.

С другой стороны, Astra, OceanWP и другие темы с более чем 500 000 пользователей ежемесячно расширяют свою стартовую библиотеку сайтов.

к вам

Теперь у вас есть четкое представление о том, как редактировать страницу 404 в WordPress. Есть много решений, чтобы сделать это, и вы должны выбрать тот, который подходит для ваших навыков и потребностей. Важно иметь захватывающую страницу с ошибкой 404, которая порадует ваших зрителей. Метод и инструменты, которые вы используете для разработки и реализации страницы 404, не касаются ваших клиентов. У вас нет оправдания тому, что у вас нет отличной страницы с ошибкой 404! Перейдите к чертежной доске и начните создавать пользовательскую страницу ошибки!