اگر طراح باشید قطعا به این موضوع برخورد کرده اید که چگونه می توانید یک صفحه خطای 404 اختصاصی در جوملا بسازید؛ جوملا به شما این قابلیت را می دهد که برای هر قالب تان در بخش کاربری یک صفحه خطای اختصاصی طراحی کنید. البته افزونه های سئو دیگری هم این کار را برای شما انجام می دهند اما موضوع اصلی این مقاله نحوه ایجاد صفحه خطای 404 بدون نیاز به افزونه های جانبی می باشد فلذا از استفاده این افزونه ها امتناع می کنیم.
هر قالبی در جوملا می تواند یک فایل error.php داشته باشد؛ در واقع جوملا هنگام برخورد با یک خطا (به عنوان مثال پیدا نکردن یک مطلب یا صفحه که همان خطای 404 می باشد) به دنبال فایل error.php در قالب پیشفرض میگردد و اگر آن را پیدا کند، آن را اجرا خواهد کرد. اگر درون قالب تان این فایل را ندارید می توانید آن را اجرا کنید. توجه داشته باشید این فایل دقیقا می تواند یک فایل همانند index.php قالب تان باشد. خب حتما از خود سوال می کنید معنی این جمله چیست ..!؟
صفحه index.php شامل تمامی عناصر HTML سایت شماست یعنی اگر یک صفحه از سایت تان را باز کنید و با کلیک راست روی صفحه » View Page Source را بزنید ، تمامی عناصر از <html doctype> تا انتها درون فایل index.php قرار دارد؛ همین عناصر می تواند درون فایل error.php هم وجود داشته باشد. به زبان فنی تر شما حتی می توانید در این صفحه ماژول فراخوانی کنید یا حتی می توانید یک دیزاین کاملا متفاوت از دیزاین سایت تان طراحی کنید. ما در این آموزش به شما نحوه فراخوانی ماژول در این فایل را یاد خواهیم داد تا با فراخوانی ماژول های متعدد ، یک صفحه خطای کاملا متفاوت داشته باشید.
قدم اول: ایجاد کدهای ساده HTML
به دلیل اینکه موقع خطا فقط همین فایل error.php فراخوانی می شود ما باید کدهای ضروری HTML را قرار دهیم. در بین کدهای HTML چند خط کد PHP هم قرار داده شده که برای هر کدام یک توضیح مختصری در ادامه خواهیم داشت.
<!DOCTYPE html>
<html class="error-page" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta charset="utf-8" />
<title><?php echo $this->error->getCode(); ?> - <?php echo htmlspecialchars($this->error->getMessage(), ENT_QUOTES, 'UTF-8'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
</body>
</html>
بعد از در خصوصیت تگ <html> شما گزینه lang را مشاهده می کنید که با مقدار
<?php echo $this->language; ?>مقدار دهی شده است. متغیر $this->language وقتی در error.php یا index.php فراخوانی شود ، تگ زبان پیشفرض را نمایش می دهد. (به عنوان مثال برای زبان فارسی fa-IR می باشد)
خصوصیت بعدی در همین تگ ، dir می باشد که با مقدار
<?php echo $this->direction; ?>مقدار دهی شده است. متغیر $this->direction اگر در فایل error.php یا index.php قالب فراخوانی شود ، جهت زبان پیشفرض سایت را نمایش می دهد.(به عنوان مثال جهت پیشفرض زبان فایل rtl یا راست به چپ می باشد)
ما می خواهیم در صفحات دارای خطا در عنوان مرورگر، کد خطا مربوطه به علاوه پیغامی که خود جوملا به ما نمایش می دهد را نشان دهیم فلذا در بین تگ <title> کدهای
<?php echo $this->error->getCode(); ?> - <?php echo htmlspecialchars($this->error->getMessage(), ENT_QUOTES, 'UTF-8'); ?>قرار داده ایم. متغیر $this->error->getCode() جهت نمایش کد خطا (به عنوان مثال 404 یا ...) بکار می رود و متغیر $this->error->getMessage() جهت نمایش متن خطای مربوطه که توسط خود جوملا ایجاد می شود بکار می رود.
در ادامه شما می توانید بعد از تگ بسته شده ی </title> شروع به لود کردن فایل های CSS و JavaScript خود کنید. برای مثال می توانید از کدهای زیر الگو بگیرید:
<link href="/<?php echo $this->baseurl; ?>/templates/system/css/system.css" rel="stylesheet" media="screen" />
<link href="/<?php echo $this->baseurl; ?>/templates/system/css/error.css" rel="stylesheet" media="screen" />در 2 خط بالا ما 2 فایل از قالب system که یک قالب پایه در جوملا است و وجود آن ضروری می باشد ، فراخوانی کرده ایم. در مورد توضیح قالب system همان طور که از اسم آن پیداست یک قالب برای پایه سیستم می باشد و درون آن شما نمی توانید قالب طراحی کنید بلکه یک سری از فایل ها درون آن وجود دارند که شما می توانید برای شروع کار از آنها استفاده کنید. البته فراخوانی نکردن 2 فایل بالا مشکلی هم ایجاد نمی کند. دقت کنید که برای فراخوانی فایل های قالب اصلی خودتان ، باید نام قالب تان را با system تغییر دهید. به مسیر بعد از نام قالب هم باید دقت داشته باشید تا در صورت عوض شدن آدرس ، آنها را هم اصلاح کنید. اگر دقت کنید در ابتدای خصوصیت href متغیر <?php echo $this->baseurl; ?> وجود دارد که این متغیر آدرس نسبی رسیدن از ریشه دایرکتوری به پوشه قالب را نشان می دهد. بدین گونه که اگر به عنوان مثال جوملای شما در مسیر
public_html/joomla/themeiran/نصب شده باشد ، این متغیر مقدار joomla/themeiran را بر میگرداند که مسیر شما در مثال بالا می شود :
joomla/themeiran/templates/system/css/system.cssدر واقع جوملای شما در پوشه themeiran نصب شده و از پوشه themeiran به بعد را پوشه های هسته ی اصلی جوملا تشکیل می دهند.
یک مثال دیگر از فراخوانی فایل استایل در error.php یا index.php می توانیم به تیکه کد زیر اشاره کنیم :
<link href="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/layout.css" rel="stylesheet" media="screen" />تنها تفاوت کد بالا با مثال قبلی را می توان تیکه کد <?php echo $this->template; ?> دانست. این متغیر اگر در فایل index.php یا error.php قالب فراخوانی شود ، نام قالب فعلی تان را نمایش می دهد. اینگونه دیگر نیازی نیست نام قالب را در کدها تغییر دهید؛
حال فرض کنید بخواهید یک صفحه خطای 404 برای 2 زبان فارسی و لاتین طراحی کنید برای این مورد باید با توجه به زبان پیشفرض سایت که توسط کاربر انتخاب می شود ، صفحه خطای متناسب با همان زبان نمایش داده شود. برای انجام این کار ما با توجه به جهت زبان پیشفرض که در بالا هم آن را توضیح داده ایم یک شرط برای فراخوانی فایل استایل (CSS) مربوطه می نویسیم. به کد زیر دقت کنید:
<?php if ($this->direction === 'rtl') : ?>
<link href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template_rtl.css" rel="stylesheet" media="screen" />
<?php elseif ($this->direction === 'ltr') : ?>
<link href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template_ltr.css" rel="stylesheet" media="screen" />
<?php endif; ?>در کد بالا با کمک متغیر $this->direction چک می کنیم آیا جهت زبان فعلی سایت از راست به چپ (rtl) می باشد یا از چپ به راست (ltr) می باشد، با توجه به شرط فایل مربوطه را طبق قوانین طراحی قالب جوملا فراخوانی کردیم. اینگونه ما می توانیم CSS های مربوط به جهت ها را در فایل مربوط به خودشان بنویسیم تا در زمان مناسب خودشان فراخوانی شوند.
برای راحت تر کردن کار شما ، ما کتاب خانه های بوت استرپ و جی کوئری و Font Awesome را از سرور CDN هر یک بصورت مستقیم به فایل ها لینک داده و درون فایل error.php اضافه کرده ایم. لطفا توجه داشته باشید که شما می توانید در صورت تمایل این فایل ها را درون قالب خود ذخیره کرده و طبق اصول گفته شده آنها را به قالب خود اضافه کنید.
<!-- Bootstrap library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Font Awesome library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">کار ما در اینجا با تگ <head> به اتمام رسید و وارد تگ <body> می شویم که طرح اصلی ما در همین تگ می باشد در این تگ ما می خواهیم یک عکس متناسب با خطای 404 ، یک ماژول جستجو و لینک صفحه اصلی را قرار دهیم. در اولین مرحله یک تگ ساده <img> برای نمایش تصویر 404 قرار می دهیم؛ البته درون تگ <a> قرار می دهیم و لینک می کنیم به صفحه اصلی سایت :
<a href="/<?php echo $this->baseurl; ?>/index.php">
<img class="error-logo" src="/<?php echo URI::base(true).'/images/404/404-logo.png'; ?>" alt="<?php echo htmlspecialchars($this->title); ?>">
</a>در تیکه کد بالا ، متغیر URI::base(true) یک متغیر از کتاب خانه های جوملا که لینک ریشه اصلی سایت را نمایش می دهد.
نمایش متن خطا
در ادامه می خواهیم متن خطای مربوطه را نمایش دهیم که کاربر بتواند دلیل خطای بوجود آمده را بداند.
لطفا توجه کنید این خطا توسط خود جوملا نشان داده می شود و شما نمی توانید دخالتی در چگونگی و ویرایش متن داشته باشید.
<h2 class="error-message"><?php echo htmlspecialchars($this->error->getMessage(), ENT_QUOTES, 'UTF-8'); ?></h2>مشخص نمودن فایل و خط مربوط به خطا
به عنوان برنامه نویس یا پشتیبان سایت گاها نیاز دارید بدانید خطای ایجاد شده که مربوط به PHP می باشد، در کدام فایل و چه خطی ایجاد شده است؛ البته توجه کنید که تمامی خطاها مربوط به PHP نبوده و نیازی نیست کاربر محل باعث خطا را ببیند؛ برای همین می توانیم یک شرط قرار دهیم و بگوییم در صورتی که گزینه " عیب یابی سیستم " فعال بود ، کدهای مربوطه اجرا شود؛ این گزینه واقع در مسیر "تنظیمات اصلی جوملا » تب سیستم" می باشد؛ از کدهای زیر برای مشخص نمودن محل خطا استفاده می شود :
<?php
$app = JFactory::getApplication();
if($app->get('debug', '0') == '1') {
echo htmlspecialchars($this->error->getFile(), ENT_QUOTES, 'UTF-8');
echo " : ";
echo $this->error->getLine();
}
?>تابع getFile در خط 4 محل فایل را نمایش می دهد و تابع getLine در خط 6 ، خطی که درون این فایل باعث خطا می شود را نمایش می دهد؛ با کمک این 2 خط شما به راحتی می توانید محل دقیق خطا را شناسایی و برای رفع آن اقدام کنید.
فراخوانی ماژول در فایل error.php قالب
هم اکنون می خواهیم به شما یاد بدیم چگونه می توانید در صفحه خطای قالب تان یک ماژول فراخوانی کنید؛ فرض کنید در یک پروژه نیاز دارید که ماژول منوی سایت یا ماژول ورود به سایت یا حتی ماژول جستجو را در صفحه خطا نمایش دهید، در این صفحه مانند طراحی موقعیت خود جوملا که در index.php انجام میدادید نمی توانید یک ماژول قرار بدید و باید از کتاب خانه جوملا جهت فراخوانی ماژول استفاده کنید. به عنوان مثال ما در فایل error.php یک ماژول از نوع جستجو را فراخوانی کرده ایم :
<?php
jimport('joomla.application.module.helper');
// 'error-search' is a position that your module set on
$modules = JModuleHelper::getModules('error-search');
foreach($modules as $module) {
echo JModuleHelper::renderModule($module);
}
?>لطفا دقت کنید که ما در تیکه کد بالا داریم یک ماژول را بر اساس نام موقعیت آن فراخوانی می کنیم پس باید دقت داشته باشید که هر تعداد ماژولی که در موقعیت مربوطه فعال باشند را نمایش خواهد داد برای همین ما از حلقه foreach استفاده می کنیم تا شما محدود به تعداد نباشید. نام موقعیت مورد نظر ما در این مثال "error-search" می باشد.
فایل error.php طراحی شده توسط ما بدین شکل می باشد :
لطفا توجه داشته باشید که طرح نمایش داده شده صرفا یک مثال بوده و ممکن است برای قالب شما دارای تفاوت های ظاهری باشد. برای کارکرد صحیح ماژول جستجو بهتر است ابتدا ماژول را در موقعیت درست منتشر کنید و یک منو هم از نوع جستجو برای تصحیح لینک ها بسازید.
