Блог старого компьютера

Блог старого компьютера


Главная Joomla Облегченная версия сайта на Joomla, WAP, PDA...

Облегченная версия сайта на Joomla, WAP, PDA...

17.04.2012 05:06 Администратор Joomla
Печать PDF
В один прекрасный день, а может быть и не в очень прекрасный попросили меня буквально за несколько часов сделать версию существующего сайта для мобильных устройст. Немного подумав решил взятся. Задание довольно интересное. С помощью описанного метода и его доработки можно сделать PDA версию сайта на Joomla или же WAP версию, или просто облегченную версию сайта джумле.

Первым делом полез в интернет в поисках хорошего готового решения, рылся наверно целый час испробовал кучу всяких вариантов, но все мне неподошли. В одних компонентах WAP версии сайта были довольно сложные настройки, и их было море, как не странно они еще и не работали у меня. И тут было принято решение доработать существующий шаблон чтоб он поддерживал переключение дизайна с версии для мобильных устройств на версию для ПК.

Метод будет сложен для людей не имеющих ни каких навыков в html и php, впрочем на все вопросы отвечу в комментариях.

И так первым делом открываем index.php шаблона который планируем адаптировать, и на всякий случай сделайте копию этого файла. В моем случае был шаблон под названием gopip_money.

Сейчас его содержимое выглядит так:

Далее у нас цель весь этот html код засунуть в переменную php.

Привожу небольшой прмер (не всего кода) как это будет выглядеть (код я заключил в переменную $template_html):

 /**
* @copyright Copyright (C) 2007 Rene Wandel goP.I.P.
* @email info@gopip.de
* @webadress http://www.gopip.de
* @javascript fontsize from Angie Radtke/Robert Deutz
*/

defined('_JEXEC') or die('Restricted access');

$url = clone(JURI::getInstance());

$template_html='
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="'.$this->language.'" lang="'.$this->language.'" dir="'.$this->direction.'" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/'.$this->template.'/css/template.css" type="text/css" />
<script type="text/javascript" language="javascript" src="/templates/'.$this->template.'/javascript/md_stylechanger.js"></script>
</head>
<body id="bg">
<div align="center">
<div id="fontsize">
<div id="fontsize_inner">
<p class="fontsize"> <a href="/index.php" title="Increase size" onclick="changeFontSize(2);return false;" class="larger"> larger</a><a href="/index.php" title="Decrease size" onclick="changeFontSize(-2);return false;" class="smaller"> smaller</a><a href="/index.php" title="Revert styles to default" onclick="revertStyles(); return false;" class="reset"> reset</a> </p>
</div>
</div>
<div id="container">
<div id="header">
<div id="header_inner"> </div>
<div id="header_img1"> <a href="/index.php"><img src="/templates/'.$this->template .'/images/trans.gif" border="0" height="100" width="410" alt="Joomla Template gopip_earth - goP.I.P." title="YOUR HOMEPAGE NAME"/></a></div>
<div id="header_banner">
<jdoc:include type="modules" name="banner" style="xhtml" />
</div>
<div class="clr"></div>
<div id="topnav">
<ul class="menu">
<li><a href="/?pda=1">WAP Версия Сайта</a></li>
</ul>
<jdoc:include type="modules" name="user3" style="xhtml" />
.....
.......';

 Обратите внимание как мы поступили с линками на стили, мы заменили части со вставкой php кода в шаблон на склеивание строк. Картинка ниже показывает как раньше выглядел кусок кода и как сейчаc:

Обратите внимания так мы должны поступить со всеми линками. Так же если в шаблон внедрен какой либо php код то его нужно вынеси наверх, и в место где он был вывести его переменную склеиванием с основным кодом шаблона.

Далее проверяем все ли мы правильно сделали для этого после конца переменной  $template_html выводим ее через echo. Ниже пример (точками я обозначаю то что код в переменной не полный, это делается чтоб ненагромождать страницу и сосредоточить ваше внимание на происходящим).

/**
* @copyright Copyright (C) 2007 Rene Wandel goP.I.P.
* @email info@gopip.de
* @webadress http://www.gopip.de
* @javascript fontsize from Angie Radtke/Robert Deutz
*/

defined('_JEXEC') or die('Restricted access');

$url = clone(JURI::getInstance());

$template_html='
...............
...................
</div>
<div class="clr"></div>
<div id="footer">
<div id="footer_inner"> <br />
<jdoc:include type="modules" name="footer" style="-1" />
<a href="http://validator.w3.org/check/referer"></a><br />
<a href="http://www.gopip.de"><img src="/templates/'.$this->template.'/images/trans.gif" border="0" height="50" width="300" alt="Webdesign auf Usedom - goP.IP." title="Webdesign auf Usedom - goP.IP." /></a></div>
</div>
</div>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>';
echo $template_html;

 Если вы все правильно сделали то сейчас ваш сайт должен работать так как и работал. Html мы засунули в переменную лишь для того чтоб работать с этой переменной и обрезать лишний код.

Далее буду представлять сам php код для превращения его в более легкий.

 /*Включаем работу с сессиями для того чтоб писать туда значение о том какую версию выводить*/
session_start();
/**
* @copyright Copyright (C) 2007 Rene Wandel goP.I.P.
* @email info@gopip.de
* @webadress http://www.gopip.de
* @javascript fontsize from Angie Radtke/Robert Deutz
*/

defined('_JEXEC') or die('Restricted access');
$url = clone(JURI::getInstance());

/*Ниже пишем код который будет в зависмости от GET запроса (по типу ?pda=1) будет писать отметку в сессия какой шаблон выводить*/
$pda=$_GET['pda'];
if($pda!=''){
if($pda=="1"){
$_SESSION['pda']="1";
}
elseif($pda=="2"){
$_SESSION['pda']="2";
}
}

/*
Далее идет функция обработки, обрезки кода шаблона который мы заключили в переменную $template_html
Заполняем нужные стили, ставим нужные нам шапки, доктайпы W3C для вывода легкой версии,
Так же вставляем ссылку на переключения с вап версии на веб версию.
Функция вырезает из кода изображения, Вытаскивает нужные нам позиции модулей <jdoc:include.... и выводит их
*/
function obr($txt){
$document =& JFactory::getDocument();
$jf=$document->getBuffer(component);
$jf=preg_replace('#<img(.*?)>#i','',$jf);
$document->setBuffer($jf, 'component');

$config = & JFactory::getConfig();
$sitename = $config->getValue('sitename');
$style = '
<style>
Сюда вставляем ваши стили для оформления легкого html кода.
</style>';
preg_match_all('/<jdoc:(.*?)\/>/is', $txt, $match);
$count= count($match[0])-1;
$j=-1;
while(++$j<=$count){
if($match[0][$j]=='<jdoc:include type="head" />'){
echo "<html><head>".$match[0][$j].$style."</head><body><h3>".$sitename."</h3> <ul class='menu'>
<li><a href='?pda=2'>WEB Версия Сайта</a></li>
</ul>";
}else{
echo $match[0][$j];
}
}
echo "</body></html>";
}

/*
Дальше Идет функция которая определяет автоматом с помощью регулярного выражения
с телефона вы зашли или нет и выдает облегченную версию сайта Joomla
По сути больше она ни чего не делает
*/

function lite_template($txt){
if($_SESSION['pda']==""){
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){

obr($txt);
}else{
echo $txt;
}
}
else{
if($_SESSION["pda"]=="1"){
obr($txt);
}
elseif($_SESSION["pda"]=="2"){
echo $txt;
}
}
}

$template_html='
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="'.$this->language.'" lang="'.$this->language.'" dir="'.$this->direction.'" >
<head>
<jdoc:include type="head" />........';

 Далее необходимо в шаблон вставить ссылку для ручного переключения на wap версию сайта joomla.

Ссылка должна быть следующего вида:

<a href="/?pda=1">WAP Версия Сайта</a>

 Вставлять можно куда душе угодно желательно на более менее видное место.

Далее прикладываю скрины того что у меня вышло сообственно wap версия сайта и web версия сайта на joomla:

WEB

WAP

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

Адаптированный шаблон gopip_money для joomla под WAP и WEB  можно скачать тут 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?
 

Все материалы раздела