Wordpress шаблон ошибки 404 - Ремонт и установка крупной бытовой техники

WordPress 404 страница - как настроить

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

Что такое ошибка 404 и почему важно правильно настроить страницу?

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

Интернет-адрес, ведущий на страницу с ошибкой 404, может оказаться просто неправильно набранным URL либо возникнуть со временем, если вы удалили проиндексированную страницу и забыли об этом. При выдаче кода 404 WordPress настроен на автоматический поиск файла 404.php. Базовый шаблон с этой ошибкой включен в некоторые темы WordPress. Если же этого файла нет, то будет показано системное сообщение, которое не несет полезной для пользователя информации.

Как создать страницу 404 ошибки, если ее нет в шаблоне — настройка

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

шаблон 404 вордпресс

Первое, что нужно сделать, это сформировать настраиваемый шаблон, например, редактируя файл 404.php, скопированный из другой темы. Если вы редактируете свою тему напрямую, настоятельно рекомендуется сделать резервную копию темы WordPress.
Файл ошибки 404 расположен по адресу: /wp-content/themes/имя-темы/404.php
Страница ошибки примет стиль активной темы, поскольку она вызывает шапку
И подвал текущей темы.
Понадобится только отредактировать заголовок и сообщение на странице в соответствии с вашими конкретными потребностями.
Для этого откройте файл шаблона ошибки 404 в редакторе кода и измените текст сообщения на свое усмотрение.
Добавьте в шаблон строку поиска, если ее там нет. Затем сохраните файл и загрузите его в каталог темы установки WordPress.

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

ErrorDocument 404/index.php?error=404

Файл index.php расположен в корневой папке вашего сайта. Если WordPress находится в подкаталоге с именем «wordpress», код, добавляемый в файл .htaccess, должен быть:

ErrorDocument 404/wordpress/index.php?error=404

Что разместить на wordpress странице 404

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

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

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

Чтобы сделать страницу уникальной, вы можете снабдить ее фоновым изображением в стиле оформления сайта. Допустимо также использовать html-теги и css-стили, чтобы придать шаблону индивидуальность.

Как создать в вордпресс 404 страницу при помощи плагина

Создать собственную страницу 404, как и любую другую страницу в WordPress можно при помощи плагина 404page (https://wordpress.org/plugins/404page/). Важной особенностью этого плагина является то, что он не создает перенаправление, а формирует правильный ответ сервера с кодом 404. Он сообщает поисковым системам, что страница не существует и должна быть удалена из индексирования, тогда как перенаправление приведет к HTTP-коду 301 или 302 и URL-адрес останется в индексе поиска.

Установите плагин 404page из меню админки «Плагин -> Добавить новый» и активируйте его.

плагин 404 вордпресс

Создайте страницу 404 как обычную страницу WordPress из меню «Страницы -> Добавить новую». Внесите в нее всю необходимую информацию, которую вы хотите показать посетителю, и нажмите кнопку «Опубликовать». Плагин 404page также добавляет CSS-класс error404 в тег <body>, который можно использовать для задания дополнительных стилей на странице.

страница 404 вордпресс

После активирования плагина в меню «Внешний вид» (1) появился раздел «404 Error Page» (2), в котором можно настроить отображение страницы ошибки.

Выберите созданную страницу 404 из списка страниц сайта (3). Убедитесь, что отмечен флажок (4), чтобы сервер отдавал код 404 при доступе к этой странице. Если вы используете кэширование, плагин выдаст предупреждение – страница из кэша будет отдавать код 200, поэтому ее нужно исключить из кэширования.

При возникновении проблем или конфликта с другими плагинами 404page может быть запущен в режиме совместимости. Нажмите кнопку «Сохранить изменения» (5).

настройка 404 вордпресс

Чтобы включить обработку ошибок 404 в WordPress, нужно установить структуру ссылок в меню «Настройки -> Постоянные ссылки» на любой пункт, кроме «По умолчанию». В противном случае ошибка 404 обрабатывается сервером, а не движком WordPress.

iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.

Мы предлагаем:

Виртуальные серверы с NVMe SSD дисками от 299 руб/мес
Безлимитный хостинг на SSD дисках от 142 руб/мес
Выделенные серверы в наличии и под заказ
Регистрацию доменов в более 350 зонах

Источник

An error 404 is when a visitor tries to access a page that does not exist. Sometimes people tend to overlook this feature, and never think about designing for it. Taking the time to make a user-friendly 404 page could mean the difference in a user staying on your website, or leaving.

Chances are you have created your website and checked multiple times to be sure that every link leads to somewhere. Eventually over time you may forget about a link that leads to a post you removed, or possibly changed the name to. Even if a visitor is searching for a page directly and they don’t get it right, then they will be taken to the error 404 page.

These can be made very user-friendly utilizing the WordPress template tags, and little bit of know-how.

Understanding The Error 404

The error 404 is a message that the visitor will receive when a page or post is not located. This is by default included within WordPress, but not with all themes. If you have created a custom theme, then you can increase the chances of a user sticking around even though they didn’t find what they were looking for with a properly designed 404 page.

The Basic Error 404 Template

The basic error 404 template is included with some WordPress themes but not all. WordPress is set to automatically look for the file 404.php when an error 404 is reached. If this file is not present, then it will give a basic error message which is not user-friendly.

If you do not already have this file you can create it. Make a new blank file and name it 404.php

Here is the basic code we will start with:

The 404.php File

<?php get_header(); ?>


<h2>Error 404 - Page Not Found.</h2>


<?php get_sidebar(); ?>

<?php get_footer(); ?>

The above code within the 404.php file would give a simple output wrapped in H2 tags that would read “Error 404 – Page Not Found.” – It would also get the WordPress Header, Sidebar, and Footer. These are all optional and should be modified to fit your WordPress theme.

We want to take this a few steps further to achieve our goal. Make a note that I am using the get_header() along with get_sidebar and footer to call our theme template files. Your’s may vary slightly and you will have to adjust your 404.php file accordingly.

Starting To Work On It

First, We will add the search form to our basic 404 page to make it a bit more helpful. This way even if a visitor lands on your 404, they then have the option of searching your site. This is the first method to help users stick around instead of leaving.

404.php File – Added Search Form

<?php get_header(); ?>

<h2>Error 404 - Page Not Found.</h2>

Search:

<?php include(TEMPLATEPATH . "/searchform.php"); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Making It More Dynamic

To create a more dynamic error 404 page you can use redirects so that the user only sees the error briefly, then gets redirected to your home page. This page can be made to be somewhat SEO friendly as well.

For this next example we can start by editing the header.php file of your template. Within the meta tags at the top of your header.php file you can add the following:

The header.php File

<?php if (is_404()) { $redirectHome = get_option('home'); ?>
<?php echo $redirectHome; ?>

After this is added we will then edit our 404.php file to look like this:

404.php File

<?php get_header(); ?>

<h1>Error 404 - File Not Found.</h1>

<h3>Please <a href="<?php bloginfo('home'); ?>" Click here</a> to return to our home page, or you can wait to be redirected in 15 seconds.</h3>

<?php get_footer(); ?>

The above example will allow the user to land on the 404 error page but then automatically take them back to the home page. This will also help users stick around instead of them being left confused and leaving your website.

This example may not always be the best solution for everyone but can be helpful to someone looking for something specific on your site.

Making sure it works

You can test your 404 error page by typing your URL and following it with a page that you know does not exist.

Example: http://www.yourwebsitedomain.com/test404page.php

That should bring you to your 404 page for viewing and testing.

If it doesn’t work

If by chance your server is not automatically bringing you to your 404.php file we can modify our .htaccess file to make it work. Locate your .htaccess file within your WordPress install and add the following line to it:

ErrorDocument 404 /index.php?error=404

If your WordPress install is not in the root directory you will need to make sure the above code reflects that. If you have installed WordPress into a subfolder then modify your .htaccess like this:

ErrorDocument 404 /YOURSUBFOLDERNAME/index.php?error=404

This will force the use of your 404.php file.

A full example

The code below is a full demonstration that will show you some ways you can use the 404.php file to help users that have found something that doesn’t exist. Take a look at it and notice the options we are giving them to keep them around, and to help them find content.

<?php get_header(); ?>

<h1>404 Error</h1>

We cannot seem to find what you were looking for.

Maybe we can still help you.

<ul>

<li>You can search our site using the form provided below.</li>

<li>You can visit <a href="<?php bloginfo?>"</a></li>

<a href="<?php ('url'); ?>" the homepage.</a>

<li>Or you can view some of our recent posts.</li>

</ul>

Search:

TEMPLATEPATH . "/searchform.php"); ?>

<h3>Recent Posts</h3>

<ul>
	<?php query_posts('posts_per_page=5'); if (have_posts()) : while (have_posts()) : the_post(); ?>

<li><a href="<?php the_permalink() ?>" title="Permalink for : <?php the_title(); ?>"><?php the_title(); ?></a>
	endwhile; endif; ?>
	</ul>

<?php get_footer(); ?>

Anything above can be changed and styled to fit your needs. In the above example we are displaying that there was an error, and then following it with a list of options for the user. We are also still giving them the option to search our site, and have now added the ability for them to view our recent posts.

The combination of all of these gives the user that reached the page options. These options can be used to ensure a user doesn’t leave right away if they didn’t find exactly what they wanted.

Make it More User Friendly

To make it more user friendly and unique you could consider using the above examples with a different background image of your choice. You can also use html within the 404.php file to make a page all in itself for your error page. Here are some examples of unique error 404 pages for inspiration:

1. Mundofox.com

2. CSSRemix.com

3. CSSRemix.com

4. ChrisJennings.com

5. ook.co.uk

6. Youcastr.com

7. Mixx.com

8. JustCreativeDesign.com

9. Agens.no

10. Mushroomdigital.co.uk

Using it Wisely

It is always good practice for both WordPress and static HTML sites to make use of the 404 page. Either using ads on it to monetize, or using it to better help your visitors navigate your website.

There are many ways to create your own custom 404 error page, and just as many ways to allow it to help website visitors. Use the examples above freely, and experiment with what works best for you.

This post may contain affiliate links. See our disclosure about affiliate links here.

Источник

Chances are high that you’ve landed on a 404 page and immediately left the website because it was less than helpful. A 404 page is what WordPress displays when someone enters or clicks on a URL that doesn’t exist on your website. This page is a generic error that just informs the visitor the page wasn’t found. In this article, we’ll explore how to create a custom 404 page for WordPress. Along the way, we’ll see both good and bad designs.

1
Why Create a Custom 404 Page for WordPress?
- 1.1
  Generic 404 Page
2
Custom 404 Page Examples
- 2.1
  1. Google
- 2.2
  2. WordPress.org
- 2.3
  3. WordPress.com
- 2.4
  4. Elegant Themes
- 2.5
  5. Twenty Twenty-One
- 2.6
  6. Twenty Twenty
- 2.7
  7. Slack
- 2.8
  8. Amazon
3
404 Page Content
4
How to Create a Custom 404 Page in WordPress with the Divi Theme Builder
- 4.1
  Importing a Custom 404 Page into the Divi Theme Builder
- 4.2
  Creating a Custom 404 Page with the Divi Theme Builder
5
Ending Thoughts on Creating a Custom 404 Page for WordPress

Why Create a Custom 404 Page for WordPress?

It’s tempting to skip designing the 404 page because you hope no one will see it. However, it needs to be helpful to your visitors. It can be just as important as any other page. A general message is a bad user experience. It doesn’t look good and it gives them no reason to stay on your website.

First, let’s look at the generic page we’re trying to avoid.

Generic 404 Page

The standard 404 page that WordPress displays is just an error message. It’s placed within the body content area and shows your header, footer, and sidebars if you have them.

Unfortunately, it isn’t helpful. It’s kind of like asking a store worker if something you’re looking for is on the aisle you’re in and they just say no. You want them to point you to the correct aisle. You want more information.

A 404 page should give you more information. It should be helpful. It should provide tools, links, advice, or some form of help. You don’t want to be left alone in the aisle not knowing where to go next.

Custom 404 Page Examples

There are thousands of amazing 404 pages across the web. Some are funny, some are serious. Some are more helpful than others. A few are plain, while others are gorgeous. Here’s a look at a few 404 pages to get an idea of how they’re designed. Some are simple and boring while others are helpful and look great.

1. Google

google

Google’s (not WordPress) 404 page is simple. It’s a small area of content in the center of the screen. The message just tells you there’s an error and provides a graphic of a robot in pieces. It doesn’t provide other information, but it’s Google, so all you have to do is type something else in the search bar.

2. WordPress.org

WordPress.org

WordPress.org’s 404 page displays their standard header and footer. The body includes a title to show the page wasn’t found, a short explanation with a touch of humor, and then a list of links to help guide you. The links focus on being helpful.

3. WordPress.com

WordPress.com

WordPress.com’s 404 page removes the header and footer. It shows a graphic, a title, a description with clickable links, a search box, and the WordPress.com logo. The links are helpful.

4. Elegant Themes

Elegant Themes

Elegant Themes’ 404 page (because I know you’re going to look anyway) shows the ET header, a large title with a small explanation, and a button as a CTA. You have access to almost everything from here.

5. Twenty Twenty-One

Twenty Twenty-One

WordPress’s Twenty Twenty-One theme has a 404 page that uses your primary and footer menus. It has a large title. The body has a short description and a search box. Lines are used for styling. The background matches the site.

6. Twenty Twenty

Twenty Twenty

WordPress’s Twenty Twenty theme displays the header and footer. The body shows a large title in the center, an explanation, and a search box. All use the theme’s colors.

7. Slack

Slack

Slack’s (non WordPress) 404 page shows a box in the center with information about the error with a link to the help center. All the menus are here, too. The interesting part is the background. It’s a cartoon background that scrolls right or left to follow your mouse. Animated animals move across the screen.

8. Amazon

Amazon

Amazon’s (also not WordPress) 404 page includes the Amazon logo with a search box, a large message, a smaller message with a link to the home page, and a photo of an animal with a link to learn more. It includes lots of different photos that can be displayed. They’re chosen at random.

404 Page Content

So, what does a 404 page need? We see a few common elements in the examples above.

First, it needs to be helpful. It shouldn’t just tell the visitor there is an error. It should tell what the error means. Imagine an error light coming on in your car. Your first question would be “what does that mean?” Not providing useful information about the error is frustrating.

Visitors need to know if they did something wrong or if the content doesn’t exist. If they don’t know, they’ll keep looking for the content until they furiously leave the website, vowing to never return. This is best done with a simple message and possibly an image that catches the eye. Something that stands out from your normal content that would appeal to your audience.

Next, it needs to provide some direction of what to do next. This could be a list of articles, a search box, a list of categories, most popular posts, most recent posts, a way to contact you, etc.

It’s that simple. 404 pages don’t need a lot of content. Just enough to be helpful.

The example above includes:

Background colors and patterns that would match the website/
A title with a short message about the error.
Large text showing that it’s a 404 page.
A few buttons providing the visitor with some directions.

It’s simple but stylish and helpful. That’s all you need.

Let’s look at how to create a custom 404 page for WordPress using the content ideas we just discussed.

How to Create a Custom 404 Page in WordPress with the Divi Theme Builder

404 Page Content

The Divi Theme Builder makes it easy to create and assign a 404 page. Elegant Themes has several premade 404 pages that you can download for free. You can customize them any way you want. They’re a great way to get a head start on a 404 page design. If you prefer, you can build one from scratch.

The example above is from the Fourth Theme Builder layout pack. There are lots of 404 pages available in the ET blog. To find them, search for “theme builder layout pack” or check them out here:

Download The First FREE Theme Builder Pack For Divi
Download The Second FREE Theme Builder Pack For Divi
Download The Third FREE Theme Builder Pack For Divi
Download the Fourth FREE Theme Builder Pack for Divi
Download the Fifth FREE Theme Builder Pack for Divi
Download the Sixth FREE Theme Builder Pack for Divi

Importing a Custom 404 Page into the Divi Theme Builder

You’ll find the Divi Theme Builder in the WordPress dashboard by going to Divi > Theme Builder. This opens the page where you can create or import templates and assign them. In the upper right corner, you’ll see the import icon. Click this icon to import your 404 page template.

Note – for tutorials on using the Divi Theme Builder, search for “theme builder” here in the Elegant Themes blog.