ساخت صفحه 404 سفارشی در وردپرس

تمامی وب سایت هایی که به شکل اصولی طراحی می شوند دارای صفحه 404 هستند . صفحه 404 برای زمانی است که کاربر سایت شما ، وارد یک آدرس خاص از سایت شما سده است اما آن صفحه به هر دلیلی حذف شده است و اکنون دیگر آن محتوا وجود ندارد . در اینصورت باید یک صفحه مختص این شرایط برای کاربر نمایش داده شود تا متوجه شود که این آدرس دیگر در دسترس نیست و او در صفحه 404 است .

این صفحه در قالب ها و سایت های وردپرسی نیز وجود دارد . اگر کمی با کدنویسی قالب های وردپرس آشنایی داشته باشید ، حتما اطلاع دارید که قالب های وردپرس از چندین فایل مختلف تشکیل شده است که تمامی آنها فایل هایی با فرمت php هستند و یکی از این فایل ها به شکل زیر است :

404.php

شما می‌توانید با مراجعه به داخل قسمت ویرایشگر پرونده پوسته از پیشخوان وردپرس ، وارد قسمت ویرایش پوسته فعال سایت خودتان شوید اما دقت داشته باشید که در این قسمت نباید چیزی را تعییر دهید چرا که کوچکترین تغییر در این قسمت می‌تواند مسبب ایجاد مشکلات بسیاری ازجمله بازنشدن هیچ یک از صفحات وب سایت شود .

در این بخش در ستون سمت چپ ، نام تمامی فایل هایی که در قالب شما به کاررفته است وجود دارد . باید توجه داشته باشید که آیا فایلی با نام بالا (404) وجود دارد یا خیر !

در تمامی قالب های استاندارد این فایل وجود دارد و اگر آن را باز کنید معمولا کدهای کمی درون آن قرار گرفته است برای مثال اگر در قالب 2023 وردپرس فایل 404 را باز کنید ، کدهای داخل قالب به شکل زیر است :

<?php
/**
 * The template for displaying 404 pages (Not Found)
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" 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 ندارید پس کار شما نادرست خواهد بود . در صورت نبود این فایل در داخل قالب می‌توانید آن را ایجاد کنید . ( این کار باید از طریق بخش مدیریت هاستینگ و از بخش Public html انجام شود )

اگر شما در داخل فایل های قالب ، فایلی به نام 404 با فرمت php ایجاد کنید ، و وارد آدرسی شوید که اکنون داخل سایت شما نیست ، یک صفحه کاملا خالی و سفید مشاهده خواهید کرد که هیچ محتوایی داخل آن نیست !

نمایش صفحه خالی به این دلیل است که اکنون قالب شما فایل مورد نظر برای صفحه 404 را دارد و طبق برنامه نویسی داخل هسته اصلی وردپرس ، زمانی که آدرسی در پایگاه داده پروژه شما ثبت نشده باشد ( به این معنی است که این آدرس وجود ندارد و سیستم پردازش سایت ، به سراغ فایلی خواهد رفت که نام آن 404 است ) اما چون داخل آن هیچ کدی قرار نگرفته و شما یک فایل خالی با نام 404 دارید ، پس هیچ چیزی بجز یک صفحه خالی به شما نمایش داده نخواهد شد .

برای اینکه این صفحه محتوایی را به کاربر نمایش دهد که بتواند متوجه شود داخل صفحه 404 است ، لازم است تا کمی داخل آن کدنویسی شود ! کدنویسی این قسمت میتواند بسیار ساده باشد .

ساخت صفحه 404 سفارشی در وردپرس با کمی کدنویسی

اگر شما در داخل قالب خودتان فایل 404 را داشته باشید میتوانید آن را به دلخواه ویرایش کنید ، در تمامی قالب های وردپرسی ، در بالای صفحه یک بخش بنام header وجود دارد که محتوای آن از داخل فایل زیر :

header.php

در وردپرس خوانده می‌شود و شما برای اینکه کدهای داخل این فایل را در هر بخشی از قالب های وردپرسی خود فراخوانی کنید باید از قطعه کد زیر استفاده کنید :

<?php get_header(); ?>

این قطعه کد ، تمامی کدهایی که داخل فایل header در قالب وجود دارد را به صفحه مدنظر شما منتقل خواهد کرد ، اگر منوی اصلی سایت شما داخل هدر سایت باشد ، با قرار دادن این کد در ابتدای فایل 404 می‌توانید هدر سایت را در داخل صفحه 404 مشاهده کنید .

تمامی فایل های قالب وردپرس ، یک بخش پاورقی هم دارند ، در اصطلاح برنامه نویسی به آن فوتر ( footer ) گفته می‌شود . در قالب های وردپرسی ، فایلی داریم به شکل زیر :

footer.php

که تمامی کدهای مربوط به بخش انتهایی سایت که در تمامی صفحات تکرار می‌شود داخل آن قرار دارد . برای اینکه این قسمت نیز در صفحه دلخواه شما قرار گرفته و کدهای داخل آن برای شما در خروجی به نمایش گذاشته شود باید توسط تابع زیر :

<?php get_footer(): ?>

آن را در محل دلخواه فراخوانی کنید . پس تاکنون فایل 404 که خودمان قصد طراحی آن را داریم به شکل زیر کدنویسی شده است :

<?php get_header(); ?>

<?php get_footer(); ?>

پس از این مرحله شما باید محتوای وسط صفحه را بسازید . برای این کار هم می‌توانید خودتان دست به کار شوید ( اگر با فرانت‌اند آشنایی دارید و خودتان می‌توانید دیزاین صفحات وب را انجام دهید که چه بهتر ) و کدی که مدنظر دارید را داخل این صفحه قرار دهید .

صفحات 404 می‌توانند در ظاهرهای مختلف و جذاب به کاربران نمایش داده شوند که این مورد تماما بسگی به سلیقه شما دارد اما اصل موضوع که قسمت وسط صفحه است را باید طبق کد زیر بین header  و footer قرار دهید .

به این دلیل که فریمورک های طراحی هر وب سایتی در بخش فرانت‌اند ممکن است با دیگری تفاوت داشته باشد لذا نمیتوان یک کد شاخص را به شما ارائه کرد تا از آن در طراحی صفحه 404 استفاده کنید اما اگر سایت شما با بوت استرپ نسخه 5 طراحی شده باشد ، می‌توانید از قطعه کد زیر استفاده کنید :

<?php get_header(); ?>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="">
					<h2>404</h2>
				</div>
			</div>
		</div>
	</div>
<?php get_footer(); ?>

توجه داشته باشید که این یک دیزاین بسیار بسیار ساده است و شما می‌توانید از تصویر ، گیف ، فرم جستجو و … در صفحه 404 استفاده کنید .پس از انجام این کار می‌توانید یک آدرس غیرموجود را داخل نوار آدرس در ادامه آدرس سایت خودتان وارد کنید مثلا در سایت سئو نود به شکل زیر :

https://seo90.ir/fg4r3e

و مشاهده کنید که صفحه 404 اکنون با قالبی که شما تغییر دادید نمایش داده می‌شود . اما توجه به یک نکته بسیار مهم است .

توجه به header و footer در طراحی قالب وردپرس

در قالب های وردپرسی برای اینکه یک فایل به درستی نمایش داده شود حتما باید قسمت header و footer در داخل آن صفحه فراخوانی شود ، اما فایل header به این معنی نیست که تمامی قسمت بالای سایت که در تمامی صفحات تکرار می‌شود داخل فایل header قرار گرفته است .

ممکن است قسمت منو اصلی سایت در داخل فایل دیگری باشد و این فایل توسط برخی توابع دیگر در داخل فایل‌های وردپرسی فراخوانی شود . پس اگر شما فایل header را طبق روش گفته شده در داخل فایل 404 فراخوانی کردید اما منوی بالای سایت نمایش داده نشد ، این اشکال از شما و کدشما نیست !

برای قسمت footer نیز به همین ترتیب ، اگر علی‌رغم فراخوانی بخش footer با تابع گفته شده ، قسمت پایین وب سایت کامل نمایش داده نشد ، بازهم ممکن است سایر بخش های فوتر در داخل فایل های دیگری قرار گرفته باشد و اشکال از کدنویسی شما نخواهد بود و جای نگرانی نیست !

ساخت فایل 404 اختصاصی با المنتور

اگر از صفحه ساز المنتور و همچنین االمنتور پرو استفاده کنید ، ساخت اختصاصی این صفحه بسیار ساده است . اگر از افرونه المنتور پرو استفاده نکنید ، امکان ویرایش قالب 404 در پوسته را ندارید و حتما باید نسخه ” پرو ” المنتور نیز نصب باشد تا صفحات بیشتری امکان ویرایش داشته باشد .

نحوه کار با المنتور در دوره های داخل سایت آموزش داده شده است اما در همین حد بدانید که کافیست به قسمت المنتور و سپس قالب های ذخیره شده بروید ، در قسمت قالب های ذخیره شده ، با کلیک بروی گزینه ” همه ” می‌توانید تمامی قالب های قابل ساخت در داخل پوسته خود را مشاهده کنید که یکی از این موارد 404 است و می‌توانید بسادگی به کمک ابزارهای المنتور ، صفحه 404 دلخواه خود را طراحی کنید .

ساخت فایل 404 اختصاصی با افزونه

در داخل مخزن وردپرس یک افزونه بنام ” Smart Custom 404 error page ” وجود دارد . این افزونه می‌تواند به شما کمک کند تا صفحات 404 اختصاصی تری طراحی کنید .

این افزونه چندین امکان مختلف در اختیار شما قرار خواهد داد که توسط آنها می‌توانید صفحه خود را بیشتر شخصی سازی کنید . البته کار با این افزونه نیاز به یک محتوای آموزشی مجزا دارد اما این افزونه داخل مخزن وردپرس رایگان است و می‌توانید از امکانات آن که در حد قابل قبول است استفاده کنید .

البته افزونه های دیگری همچون Custom 404 Pro نیز وجود دارد که می‌تواند در این مورد به شما کمک کند . درهر حال اگر شما با طراحی قالب وردپرس آشنایی دارید پس حرفی نیست و توانایی دیزاین هرنوع صفحه 404 را دارید ، اگر از المنتور استفاده کنید می‌توانید این کار را بازهم به شکلی ساده‌تر انجام دهید .

اما درصورتی که وب مستر هستید و با روش‌های کدنویسی آشنایی ندارید و سایت شما نیز با المنتور طراحی نشده است ، کمی به زحمت خواهید افتاد .