В этой статье мы рассмотрим как создать с помощью стандартных средств CMS Joomla оформить страницу ошибок в стиле шаблона нашего сайта!

 

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

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JHtml::_( 'jquery.framework', false, null, false ); //подключаем jQuery
JHtml::_( 'stylesheet', 'jui/bootstrap.min.css', null, true ); //подключаем Twitter bootstrap
JHtml::_( 'stylesheet', 'jui/bootstrap-extended.css', null, true );
$this->addStyleSheet( $this->baseurl . '/templates/' . $this->template . '/css/template_css5.css' );
$this->addScript( $this->baseurl . '/templates/' . $this->template . '/scripts/site1.js' );
?>
<!DOCTYPE html>
<html>
<head>
	<jdoc:include type="head" />
</head>
<body>
<div class="page">
	<div class="header">
		<div class="logo"><a href="/<?php echo JUri::base(); ?>">Главная страница</a></div>
		<jdoc:include type="modules" name="header" />
	</div>
	<div class="mainbar">
		<div class="left-block">
			<jdoc:include type="modules" name="auth" style="well" />
			<jdoc:include type="modules" name="left" style="xhtml" />
		</div>
		<div class="content">
			<jdoc:include type="message" />
			<jdoc:include type="component" />
		</div>
		<div class="guarantor"></div>
	</div>
</div>
<div class="footer">
	<jdoc:include type="modules" name="footer" />
</div>
</body>
</html>

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

Вид страницы ошибок после создания файла error.php

Как мы видим отобразилась совсем иная страница ошибок чем у нас была раньше, но и не похожа на наш шаблон, нет стилей, нет модулей!
А все это случилось потому что в файле ошибок cсовершенно не работают директивы jdoc с помощью которых мы и вставляем наши модули, компонент, мета теги и подключаем стили!

Итак разберемся как все это перенести в нашу страницу ошибок!

Для начала удаляем все подключения стилей, скриптов и директиву
<jdoc:include type="head" />

Начало нашего сайта будет выглядеть теперь очень просто:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
$baseUrl = JUri::base();
?>

В <head>&lt/head> мы перенесем нужные для работы сайта стили и скрипты!

Посмотреть какие у вас стили и скрипты подключены в сайте можно в режиме просмотра HTML кода вашего сайта в браузере, в Google Chrome этот режим вызывается с помощью нажатия комбинации клавиш CTRL+U.

В моем случае мне из всех скриптов понадобилось перенести только следующие:

<link rel="stylesheet" href="/<?php echo $baseUrl; ?>media/jui/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $baseUrl; ?>media/jui/css/bootstrap-extended.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $baseUrl; ?>templates/wss/css/template_css5.css" type="text/css" />

Их нужно разместить в теге <head>&lt/head>, также в этот тег мы разместим ещё заголовок страницы, в котором у нас отобразится код ошибки и причина появления данной ошибки, а также кодировку страницы на всякий случай:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo $this->error->getCode(); ?>
	- <?php echo htmlspecialchars( $this->error->getMessage() ); ?></title>

Теперь вызвав страницу ошибок мы увидим следующее

Вид страницы ошибок после подключения стилей

То есть мы видим что начали подгружаться стили нашего шаблона! Теперь нам нужно вывести все наши модули, для этого мы напишем небольшую функцию которая будет грузить в нужном месте наши модули:

function renderModule( $position, $style = '' ){
	$modules = JModuleHelper::getModules( $position );
	foreach ( $modules as $module ) {
		echo JModuleHelper::renderModule( $module, array( 'style' => $style ) );
	}
}

И теперь вместо <jdoc:include type="modules" name="position name" style="style name" /> мы ставим в нашем шаблоне: <?php renderModule( 'position name', 'style name' ); ?>
После замены всех директив вставки модулей на наш вызов, наш шаблон примет такой вид:

Вид страницы ошибок после подключения модулей

Теперь в нашем шаблоне остается пустое место в котором должен выводится компонент! Так как директории jdoc не работают то директивы <jdoc:include type="message" /> и <jdoc:include type="component" /> мы смело удаляем из нашего шаблон! Вместо них мы выведем сообщение об ошибке и форму поиска и для это на место удаленных директив поставим такой код:

<p style="font-size: 80px; margin-top: 50px;"><?php echo $this->error->getCode(); ?></p>
<p style="font-size: 16px; margin: 20px 0 30px 0;"><?php echo $this->error->getMessage(); ?></p>
<p>Вы можете воспользоваться поиском:</p>
<form id="searchForm" action="<?php echo $baseUrl; ?>component/search/" method="post">
	<div class="form-search-cmp">
		<div class="input-append">
			<input type="text" autocomplete="off" name="searchword" placeholder="Поиск:" id="search-searchword" value="" class="inputbox">
			<button class="button-search btn" type="submit"><span class="icon-search"></span></button>
		</div>
	</div>
	<input type="hidden" name="task" value="search">
</form>
<p>Либо <a href="/<?php echo $baseUrl; ?>" class="hover-u pink">перейти на главную</a></p>

Теперь наша страница будет выглядеть следующим образом:

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

Полный код нашей страницы ошибок будет выглядеть так:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
$baseUrl = JUri::base();
function renderModule( $position, $style = '' )
{
	$modules = JModuleHelper::getModules( $position );
	foreach ( $modules as $module ) {
		echo JModuleHelper::renderModule( $module, array( 'style' => $style ) );
	}
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title><?php echo $this->error->getCode(); ?>
		- <?php echo htmlspecialchars( $this->error->getMessage() ); ?></title>
	<link rel="stylesheet" href="/<?php echo $baseUrl; ?>media/jui/css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="/<?php echo $baseUrl; ?>wssnew/media/jui/css/bootstrap-extended.css" type="text/css" />
	<link rel="stylesheet" href="/<?php echo $baseUrl; ?>templates/wss/css/template_css5.css" type="text/css" />
</head>
<body>
<div class="page">
	<div class="header">
		<div class="logo">
			<?php if ( JUri::base() !== JUri::current() ): ?>
				<a href="/<?php echo $this->baseurl; ?>">Главная страница</a>
			<?php endif; ?>
		</div>
		<div class="share42init" data-url="<?php echo JFactory::getURI()->toString(); ?>" data-title="<?php echo JFactory::getDocument()->getTitle(); ?>"></div>
		<script type="text/javascript">share42('<?php echo $this->baseurl . '/templates/' . $this->template . '/scripts/'; ?>')</script>
		<?php renderModule( 'header' ); ?>
	</div>
	<div class="mainbar">
		<div class="left-block">
			<?php renderModule( 'auth', 'well' ); ?>
			<?php renderModule( 'left', 'xhtml' ); ?>
		</div>
		<div class="content" style="text-align: center;">
			<?php renderModule( 'content' ); ?>
			<p style="font-size: 80px; margin-top: 50px;"><?php echo $this->error->getCode(); ?></p>
			<p style="font-size: 16px; margin: 20px 0 30px 0;"><?php echo $this->error->getMessage(); ?></p>
			<p>Вы можете воспользоваться поиском:</p>
			<form id="searchForm" action="<?php echo $baseUrl; ?>component/search/" method="post">
				<div class="form-search-cmp">
					<div class="input-append">
						<input type="text" autocomplete="off" name="searchword" placeholder="Поиск:" id="search-searchword" value="" class="inputbox">
						<button class="button-search btn" type="submit"><span class="icon-search"></span></button>
					</div>
				</div>
				<input type="hidden" name="task" value="search">
			</form>
			<p>Либо <a href="/<?php echo $baseUrl; ?>" class="hover-u pink">перейти на главную</a></p>
		</div>
		<div class="guarantor"></div>
	</div>
</div>
<div class="footer">
	<?php renderModule( 'footer' ); ?>
</div>
</body>
</html>

Просмотреть как выглядит наша страница ошибок можно по ссылке.