Вивчаємо WordPress

1787
  • Яку роль відіграє сторінка 404 помилки для сайту?
  • 10 порад по створенню ідеальної error page «404 not found»
  • Як її створити і налаштувати для блогу на WordPress
  • Створення сторінки 404 з допомогою htaccess файл
  • Здрастуйте, шановні читачі блогу . Сьогодні ми продовжимо розглядати налаштування блогу на WordPress, які потрібно зробити відразу після його встановлення. Ознайомитися з іншими статтями аналогічної тематики ви можете у рубриці Вордпресс для чайників і рубриці Плагіни. Сьогодні мова піде про те, як повинна виглядати правильна сторінка 404 помилки. Добре продумана і грамотно зверстана вона потрібна всім сайтам без винятку.

    Вивчаємо WordPress

    Про те, як створити і налаштувати сторінку 404 в Джумла, я вже писав. Тепер прийшла черга блогового безкоштовного движка (cms) під назвою Вордпресс. В принципі, можна скористатися послугами вашого хостингу по створенню та налагодженню її зовнішнього вигляду, але, на жаль, не всі хостинги надають таку зручну можливість.

    Тому в цій статті ми розглянемо варіант створення вебсторінок з написом «404 not found» (не знайдено) силами самого движка. Ну, і ще дізнаємося, як її можна створити за допомогою файл htaccess, який дозволяє здійснювати дистанційну налаштування веб-сервера, де живе і процвітає ваш блог або сайт.

    Яку роль відіграє сторінка 404 помилки для сайту?

    Відповідь сервера «404 not found» означає, що запитувана сторінка (або файл) не була знайдена. Тобто до сайту (сервера) підключитися вдалося, але ось документа такого там не знайшлося. Найчастіше це виникає із-за проблем з навігацією по сайту, битих зовнішніх посилань або з інших причин, за якими «псуються посилання». В цьому випадку користувачеві як раз і показується сторінка помилки з цієї самої горезвісної написом.

    Как выглядит страница ошибки с надписью 404 not foundВивчаємо WordPress

    За замовчуванням вона виглядає досить страшно, бо не зрозуміло що сталося і що тепер робити далі, адже ніякої навігації на такій сторінці немає. Добре, якщо користувач виявиться «ушлим» і видалить в адресному рядку закінчення Url адреси, залишивши тільки доменне ім’я, а потім скористається пошуком по сайту, щоб відшукати те, навіщо він сюди прийшов. Але такий варіант розвитку подій дуже малоймовірний — швидше за все, з такою сторінкою 404 помилки ви користувача втратите.

    Вже краще, якщо вона буде мати хоча б посилання для переходу на головну сторінку, а також креативу (що це?) додати не завадило б:

    Креативная страница 404 ошибкиВивчаємо WordPress

    Однак, ви можете сказати, що таке взагалі вам не загрожує, бо ви дуже серйозно ставитеся до свого проекту і не допускаєте помилки в навігації і внутрішній перелінковці сайту. Ну, по-перше, всі ми не ідеальні і від ляпів ніхто не застрахований. А по-друге, якщо навіть ви не залишите на своєму сайті в живих жодної битою посилання, то це зовсім не означає, що інші користувачі, які захочуть проставити посилання на ваш сайт, теж будуть ідеальні в цьому відношенні.

    Варіантів, коли посилання, по якій прийшов на ваш проект відвідувач, виявиться битою, може бути безліч. Що ж побачить відвідувач вашого блогу? Та, власне, нічого такого, що може спонукати його там затриматися і спробувати потрапити на інші веб-сторінки вашого проекту. А гумор, використовуваний в оформленні такої сторінки, допоможе вам підвищити лояльність клієнтів і звичайних відвідувачів:

    Пример лучшей страницы 404 not foundВивчаємо WordPress

    Хоча, звичайно ж, сам по собі факт того, що ваш сервер віддає правильний код 404 помилки, є хорошим сигналом. Набагато гірше, коли биті посилання отримують у відповідь від сервера код 200. Але це вже тема для окремої статті, яку ви можете прочитати тут — коди відповіді сервера.

    В нашому випадку будемо вважати, що код віддається вірний (404, а не 200), а працювати ми саме над тим, що побачить користувач, що прийшов чи перейшов по битому посиланню. Адже звичайна веб-сторінка помилки «not found» буде виводитися поза дизайну (шаблону) вашого сайту, і, отже, ні про яку навігації на ній і мови бути не може (див. скріншот вище).Сто відсотків, що відвідувача побачив настільки не презентабельний документ ви втратите і, можливо, назавжди.

    Так давайте ж дбайливо ставитися до нашим відвідувачам, піклуватися про їх зручність і збуджувати в них бажання продовжити працювати з вашим блогом, навіть у разі його переходу з битою посиланням. А проста заміна стандартної «білої сторінки», з нікому не зрозумілою написом «404 not found» на більш людську і зрозумілу, дозволяє істотно поліпшити користувача (поведінкові) чинники, які враховують пошукові системи при визначенні ранжирування. Можна ж і так її оформити — хто заважає?

    Супер 404 страничкаВивчаємо WordPress

    Давайте подивимося на коректну роботу сервера в плані формування правильних відповідей на прикладі мого блогу. Якщо Урл (універсальний ідентифікатор ресурсу) головної сторінки блогу виглядає як:

    https:///

    то будь-який текст, написаний після цього URL, має привести вас на веб-сторінку з чотириста четвертою помилкою мого блогу, у разі, якщо результуючий УРЛ адреса не збігається з реально існуючим документом. Наприклад, набравши в адресному рядку браузера:

    https:///fdfdf

    ви потрапите на ту ж саму «error page», як якщо б ви перейшли по битому посиланню, наприклад:

    https:///wordpress/wordpress_osnovi/stranitsa-oshibok-404-v-wordpress.htm

    В останньому прикладі я забув вказати в Урлі всього лише одну останню літеру (htm[l]). В принципі, вже того, що сторінка з помилкою 404 відкривається всередині дизайну (шаблону) сайту, буде достатньо, щоб відвідувач міг би скористатися навігацією по блогу і самому спробувати знайти потрібну йому інформацію.

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

    Вариант правильной страницы 404Вивчаємо WordPress

    Або, як я зробив зараз — додав на цю сторінок путівник по блогу. Тут, звичайно ж, потрібно дивитися на поведінку користувачів і вибирати найбільш привабливий для них варіант.

    10 порад по створенню ідеальної error page «404 not found»

    До речі, однією з причин масового появи сторінок видають помилку може бути не зовсім правильна робота з ЧПУ в Вордпрес (або будь-якому іншому двигуні), якщо ви налаштували «красиві посилання» вже після тривалої роботи сайту без них. У цьому випадку «старі», але вже проіндексовані пошуковими і потрапили в індекс посилання, стануть неробочими і будуть видавати Помилку 404».

    У будь-якому випадку для підстраховки слід відразу зайнятися оформленням цієї «тупикової гілки» (сторінки), куди ведуть всі биті посилання. Якщо написи на сторінці помилок за замовчуванням виводяться англійською, то, напевно, буде правильним їх перевести, наприклад, за допомогою однієї з безкоштовних онлайн перекладачів. Моя сторінка «Error 404 not found» виглядає так — https:///wordpress/dgdgdg.html. Не шедевр, звичайно, але вже щось.

    Давайте я сформулюю 10 порад по створенню ідеальної 404, а ви вже виберете якими з них скористатися, а на які забити:

  • Не озаглавливайте її лише з використанням цифр (і вже тим більше не «404 not found») і приберіть з неї слова «error» і «помилка», щоб не спантеличувати відвідувача. Адже вони можуть не мати поняття, що це означає. Тільки мало хто знає, що це означає і чому така ситуація виникає. А ви знаєте? Ну, тоді просто напишіть, що «сторінка не знайдена», а 404 можна, наприклад, фонове підкласти або ще як стилізувати, щоб дотримати традиції, так сказати.
  • Ніщо не дається нам так дешево і не цінується так дорого, як ввічливість. Не забувайте про це і відвідувачі вас винагородять свій лояльністю.
  • Особисто я вважаю, що 404 сторінка не повинна вириватися із загального ряду інших сторінок сайту в плані оформлення. Напевно не дуже добре буде, якщо користувач потрапивши на неї подумає, що він випадково перейшов на інший сайт.

    404 на Вивчаємо WordPress

    Насправді, користувач, коли подорожує по мережі, приймає рішення про те, залишитися тут чи йти далі, буквально за пару секунд. Витрачаючи час на «орієнтування», частина відвідувачів може бути для вас втрачена. На жаль і ах.

  • З іншого боку, є думка (хоч я його і не повністю поділяю), що не варто перевантажувати сторінку помилок інформацією і контентом, бо все ж повинен розуміти, що посилання була бита і потрібно спробувати пошукати відповідь вже вручну безпосередньо на сайті.
  • Трохи гумору і креативу ще нікому не заважали. Як я вже говорив, рішення про відхід користувач приймає за секунди, а що-то «кльове» або несподіване може змусити його затриматися. За цей час він встигне зрозуміти, де опинився і що робити далі (якщо крім креативу ви ще й трохи навігації на 404-шу додали).
    404-я с юморомВивчаємо WordPress
  • Якщо додати багато креативу, то може вийде щось, на що навіть будуть посилатися, як на «прикол». Прикладом може служити ця анімована «error page».

    Джага 404Вивчаємо WordPress

    Правда, креатив не повинен превалювати над здоровим глуздом. Наприклад, у першому прикладі немає якоїсь виразної навігації і навіть рядка пошуку по сайту, яка є у другому прикладі. Але зате можна отримати додаткову посилальну масу.

  • До речі, про пташок… Зробіть можливим, щоб відвідувачі могли знайти те, що вони шукали. Це дуже просто. Вони знають, чого шукають, а ви ні. Дайте їм шанс спробувати знову. Додайте на 404 веб-сторінку форму пошуку або підкажіть як її побачити на своєму блозі (раджу замінити стандартний пошук по сайту WordPress на скрипт від Яндекса або скрипт пошук від Google).

    Пример удачной error pageВивчаємо WordPress

    Іншими словами, якщо у вас є пошук по сайту, то непогано було б його інтегрувати в сторінку помилки.

  • Посилання на головну (якщо 404-а виводиться не у «дизайні сайту») обов’язкова, але цілком доречно буде щось ще запропонувати користувачеві. Що наприклад? Ну, якщо ви точно знаєте, що в інеті розміщено багато однотипних битих посилань на ваш ресурс, то можна навести список назв цих сторінок і користувач може пізнає «свою».

    Оформление страницы ошибки в интернет-магазинеВивчаємо WordPress

    Можна замість цього списку популярних сторінок запропонувати для огляду або список нових і актуальних матеріалів (або товарів). На скріншоті показано як, наприклад, реагує на помилки в Урлах один з популярних в буржунете інтернет-магазинів.

  • Для комерційних проектів також буде непоганим рішенням для утримання таких «помилкових» клієнтів запропонувати якусь знижку або іншу «радість»:
    Вариант удержания посетителя на 404-ой страничкеВивчаємо WordPress
  • Максимально серйозно поставтеся до того, щоб як можна менше посилань, ведучих з вашого сайту видавали 404 помилки. Це буде добре і в плані SEO, бо підвищить якість вашого ресурсу в очах пошуковиків. Зовнішні биті посилання (ведучі з інших сайтів на ваш) теж можна побороти (при їх відносно невеликій кількості). Для цього достатньо буде прописати 301 редирект з «поганою» посилання на «хорошу» у вашому файлику .htaccess. Наприклад, так:

    Вивчаємо WordPress

    Тобто пишеться «Redirect 301», а за ним через пробіл «неправильний урл», і ще раз через пробіл вже правильний (Урли пишуться без доменного імені, тобто в моєму випадку без https://). Знайти биті зовнішні посилання, які призводять до появи 404 помилки на вашому сайті, простіше всього через панелі для вебмайстрів — Google Search Console і консоль для веб-майстрів від Яндекса.

  • Як створити та налаштувати error 404 page для блогу на WordPress

    Однією з дуже зручних можливостей, що надаються движком Вордпресс, є те, що ви можете дуже просто налаштувати багато речей. В нашому випадку, потрібно просто змінити вміст файлика 404.php з використовуваного вами шаблона (теми), який знаходиться в папці wp-content/themes/название_темы. Теми самі по собі влаштовані дуже цікаво.

    В залежності від того, чи є той або інший файл у папці з використовуваної вами темою оформлення, буде залежати дизайн виведених вебсторінок. На перший погляд звучить складно і не зрозуміло, але подивіться по наведеній трохи вище посиланням на список з порядком звернення до файлів (шаблонами) теми оформлення WordPress і вам все стане зрозуміло. Правда, чесне слово.

    Отже, наша поточна завдання полягає в зміні вмісту файлика 404.php з папки з вашою темою для завдання зовнішнього вигляду сторінки Error 404 not found» вашої мрії. Зробити це можна двома способами:

  • Зайти в адмінку Вордпреса і вибрати налаштування редактора тем оформлення (Дизайн -> Редактор тем). Вибрати 404.php для редагування і змінити його вміст на свій розсуд.
  • Або ж зайти на свій сайт по FTP з допомогою Ftp-клієнта FileZilla і відкрити для редагування все той же файлик 404.php, який можна знайти пройшовши по цьому шляху:
    wp-content/themes/название_папки_с_используемой_темой_оформления/404.php
  • В результаті, в обох випадках ми отримаємо можливість редагувати код веб-сторінки, яка буде показуватися при переході по битому посиланню. Незважаючи на видиму простоту першого варіанту отримання доступу до потрібного коду з адмінки WordPress, він, на мій погляд, має ряд істотних недоліків:

  • Немає підсвічування синтаксису (це коли, наприклад, різні елементи коду пофарбовані в різні кольори, а при клацанні на початковому HTML тегу вам тут же підсвітять парний йому закриваючий тег)
  • Немає можливості відкотитися назад (по аналогії з Word), тобто якщо ви не зберегли шматок коду, віддалений вами ж, припустимо, на початку маніпуляцій з файлом, то в разі необхідності відновлення цього шматка коду вам доведеться відновлювати його по пам’яті або шукати десь ще його копію. Загалом, повна опа.
  • Тому я раджу для редагування файлів вашого сайту використати зв’язку FileZilla і блокнота Нотепад плюс плюс. Подивіться, як виглядає файлик 404.php, відкритий в редакторі тим з адмінки WordPress, і він же, відкритий у програмі Notepad++:

    Вивчаємо WordPressВивчаємо WordPress

    Вивчаємо WordPressВивчаємо WordPress

    Зверніть увагу на зелені загнуті стрілочки в панелі інструментів Notepad++, які дозволять вам переміщатися між етапами редагування. Навіть у разі повного краху Вордпресс з-за невдалих маніпуляцій з кодом, завжди можна відмотати потрібну кількість кроків назад до відновлення його працездатності.

    По-моєму, блокнот просунутий Notepad++ найкраще, що можна було придумати для простого редагування. Більш докладно про використання зв’язки безкоштовного менеджера FileZilla FTP, блокнота (Notepad++ і програми менеджера файлів Тотал Командер читайте за наведеними трохи вище посиланнями.

    Для того, щоб отримати такий же результат при переході по битому посиланню як у мене, вам потрібно привести свій файлик 404.php приблизно до такого виду:

    На жаль результатів, що відповідають даним критеріям, немає.

    Будь ласка, спробуйте ще раз …

    Ви так само можете пошукати відповідь на своє запитання на сторінці FAQ, де наведено відповіді на питання, які коли-небудь піднімалися на блозі

    Або подивіться в архівах і рубриках

    За основу можна взяти вміст файлика page.php з тієї ж папки з темою оформлення. Якщо не хочете ліпити безпосередньо на «живому сайті», то выкачайте його разом з базою на комп’ютер і завантажте в ОпенСервер, де можете все налаштувати, а вже потім просто залити в папку з темою оформлення вже готовий 404.php. При складних роботах я саме так і роблю.

    До речі, мало не забув, в деяких шаблони WordPress може не бути 404.php. Тим не менше ця сторінка необхідна, оскільки при включеному ЧПУ і виникненні ситуації з Error 404 вордпресс виводить вміст файлу 404.php, а якщо його немає, то просто головну сторінку. Ось це, на мій погляд, і може заплутати відвідувачів, якщо у відповідь на будь-кривий URL завжди буде показуватися головна сторінка блогу.

    В такому випадку слід створити такий файлик на основі файлу page.php (wp-content/themes/название_вашего_шаблона/page.php у тій же самій папці з шаблоном (темою оформлення), тобто скопіювати код page.php і замінити зайве на своє повідомлення. Порівняйте його з вмістом 404.php, показаним вище, і зробіть висновки: що і куди вам потрібно буде вставити?!

    Найпростіша 404 сторінка з допомогою htaccess файл

    Якщо сервер вашого хостингу (Що таке домен та хостинг) працює під управлінням Apache, то ви можете скористатися можливістю децентралізованого керування цим сервером через файл htaccess. В Apache передбачена спеціальна директива «ErrorDocument» в htaccess для 404 коду відповіді сервера, яка дозволить:

  • або написати текст, який буде відображатися
    ErrorDocument 404 «Oops… Sorry, a small technical problem.»
  • або вказати шлях до файлу з Html кодом (цей файл може лежати як на вашому ресурсі, так і на будь-якому іншому)
    ErrorDocument 404 https:///404.html
  • Власне, все. Природно, що файлик 404.html з кодом сторінки помилки вам доведеться створити заздалегідь.

    До речі, 404 помилка сервера хоч і є найвідомішою, але тим не менш це не єдиний варіант повідомлення, які він може формувати в разі неможливості відправити браузеру запитуваний URL документ. Причому, повідомлення сервера можуть нести інформацію про виниклі помилки, так і про успішності виконання якої-небудь дії (наприклад, найкращий з можливих відповідей сервера — це 200 OK).

    Повідомлення помилки сервера пронумеровані тризначними цифрами, які можна розділити на п’ять груп:

  • Відповіді сервера починаються з одиниці (1—) є інформаційними і означають, що запит браузера був прийнятий і обробляється.
  • Відповіді сервера починаються з двійки (2—) означають позитивну відповідь, яка говорить про те, що запит до нього був виконаний успішно і сервер надіслав браузеру запитуваний документ (найпопулярніший відповідь — це код «200 ok»)
  • Відповіді сервера починаються з трійки (3—) означають, що запит до сервера було успішно надіслано. В принципі, це не повідомлення про виниклу проблему. До цього типу помилок відноситься і горезвісний 301 редирект, який дуже багато використовують для склеювання дзеркал або склеювання вебсторінок зі старими і новими URL, які могли, наприклад, помінятися при налаштуванні на сайті ЧПУ.
  • Відповіді сервера починаються з четвірки (4—) повідомляють про проблему, через яку запитуваний документ (веб-сторінка) не був відправлений браузеру. Сама по собі помилка сервера 404 означає, що документи за вказаною у запиті адресою (урлу) не було знайдено на сервері. Причини призводять до цієї помилки ми розглянули трохи вище.
  • Відповіді сервера починаються з п’ятірки (5—) означають критичну помилку, що виникла на стороні WEB-сервера, наприклад, із-за неможливості виконати на ньому якийсь скрипт.
  • Сподіваюся, що ця інформація стане вам у пригоді. Ну і, звичайно ж, ваші коментарі будуть безцінним доповненням до всього вищесказаного.

    Удачі вам! До зустрічей на сторінках блогу