Содержание

Создание новой темы. Часть вторая: page.tpl.php.

steel.ne 3 апреля 2007 в 14:10

Разберем подробнее HTML-структуру странички. Тема та же — стандартная Bluemarine.

После того, как мы посмотрели исходник готовой страницы, самое время немного полазить по файлам .tpl.php. Исключительно для понимания структуры. Сегодня мы их все еще менять не будем.

Итак, главный, центровой файл page.tpl.php в студию!

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» lang=»<?php print $language ?>» xml:lang=»<?php print $language ?>»>

<head>
  <title><?php print $head_title ?></title>
  <?php print $head ?>
  <?php print $styles ?>
  <?php print $scripts ?>
  <script type=»text/javascript»><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>

</head>

Что мы видим тут по сравнению со вчерашними наблюдениями? Как и следовало из расширения — это обычный PHP-файл. Поскольку PHP в душе уже сам шаблон, то почему бы его и не использовать по прямому назначению? Итак, до вызова этого файла в переменных $head, $styles, $scripts и т.д. находятся уже сгенерированные куски нашей страницы. А в этом шаблоне мы их собственно и выводим в том порядке, в котором хочется дизайнеру/верстальщику.

<body>
<table border=»0″ cellpadding=»0″ cellspacing=»0″>

Главное в этом фрагменте — начинается таблица с id #header. В файлах *.css часть ее свойств будут наследованы от вышестоящих элементов (в нашем случае body), часть будет описана для всех таблиц в целом, а некоторые свойства — непостредственно для данной таблицы. То есть если мы хотим что-то изменить в отображении верхней полоски — нам надо рыть внутри свойств этой таблицы.

<tr>
    <td>
      <?php if ($logo) { ?><a href=»<?php print $base_path ?>» title=»<?php print t(‘Home’) ?>»><img src=»<?php print $logo ?>» alt=»<?php print t(‘Home’) ?>» /></a><?php } ?>
      <?php if ($site_name) { ?><h2><a href=»<?php print $base_path ?>» title=»<?php print t(‘Home’) ?>»><?php print $site_name ?></a></h2><?php } ?>

      <?php if ($site_slogan) { ?><div><?php print $site_slogan ?></div><?php } ?>
    </td>

Ячейка с id #logo. Уже наверное понятно, что если нам что-то надо от этой ячейки — добро пожаловать в секцию #logo { … } файла .css.
Обращаем внимание, что картинка-логотип не имеет своего отдельного id и даже класса. С одной стороны, если сильно прижмет, можно и поправить этот файл (но не рекомендуется делать до начала соответствующего урока!), либо обращаться к этой картинке как #logo img { } (то есть ко всем картинкам элемента #logo, что в данном случае прокатит, поскольку в нем всего одна картинка). Зачем нам переопределять свойства картинки? Ну вдруг захотим размер поменять, или рамочкой обвести. Дизайнеры — они такие непредсказуемые.

Для тех, кто не умеет в уме вычищать теги <?php  ?>, смотрим во что в результате превращается этот кусок шаблона:

<td>
        <a title=»Home» href=»/»>
                <img alt=»Home» src=»/themes/bluemarine/logo.png»/>
        </a>
        <h2>
                <a title=»Home» href=»/»>Drupal</a>
        </h2>
</td>

Отступы и переводы строк сделаны мной для удобства чтения. На самом деле не совсем мной, а очень полезным Firebug’ом. Так что если еще не поставили его себе — срочно исправить упущение.

Маленькое отступление, чтобы не запутывать пытливых читателей: это плагин при разборе страницы самопроизвольно меняет местами свойства внутри тэгов. Например, если просмотреть исходник страницы, то тег <img> на самом деле выглядит так: <img src="/themes/bluemarine/logo.png" alt="Home" />. То есть как и в шаблоне, сначала идет свойство src, и только потом alt. Просьба не пугаться, шаблон выводится строго посимвольно.

    <td>
      <?php if (isset($secondary_links)) { ?><?php print theme(‘links’, $secondary_links, array(‘class’ =>’links’, ‘id’ => ‘subnavlist’)) ?><?php } ?>
      <?php if (isset($primary_links)) { ?><?php print theme(‘links’, $primary_links, array(‘class’ =>’links’, ‘id’ => ‘navlist’)) ?><?php } ?>
      <?php print $search_box ?>
    </td>
  </tr>
  <tr>
    <td colspan=»2″><div><?php print $header ?></div></td>
  </tr>
</table>

В этой ячейке с id #menu выводятся первичные и вторичные ссылки (если определены конечно).

Вот эта конструкция <?php if (isset($primary_links)) { ?> отвечает за вывод частей шаблона. И поэтому, если $primary_links не определены, то ничего туда и выводиться не будет. Если обратили на это внимание еще в прошлом фрагменте, то не вывелся целиком <div> со слоганом сайта. Для чего такие сложности? Просто без использования такой конструкции если не будет слогана, то останутся его уши в виде открывающего и закрывающего тега . А это может изрядно попортить дизайн.

<table border=»0″ cellpadding=»0″ cellspacing=»0″>
  <tr>

Тут начинается самое интересное — таблица контента. С понятным id.

    <?php if ($sidebar_left) { ?><td>
      <?php print $sidebar_left ?>
    </td><?php } ?>

Сайдбар — это столбики слева и справа от основного тела сайта. Туда выводятся разные блоки. Например меню, блок входа и т.д. Собственно ширину это колонки можно легко задать в свойствах #sidebar-left. Ну и как уже догадались, если у нас никаких блоков ни слева ни справа нет, то вся ячейка просто не выводится.

    <td valign=»top»>
      <?php if ($mission) { ?><div><?php print $mission ?></div><?php } ?>

      <div>
        <?php print $breadcrumb ?>
        <h2><?php print $title ?></h2>
        <div><?php print $tabs ?></div>
        <?php print $help ?>
        <?php print $messages ?>
        <?php print $content; ?>
        <?php print $feed_icons; ?>
      </div>
    </td>

Уже натренировав глаз на предыдущих кусках, легко заметить, что сюда просто выводятся уже сгенериованные куски странички — мисиия (если есть), путь текуще странички, заголовок страницы, закладки, подсказки и собственно контент.

<?php if ($sidebar_right) { ?><td>
      <?php print $sidebar_right ?>
    </td><?php } ?>
  </tr>
</table>

<div>
  <?php print $footer_message ?>
</div>
<?php print $closure ?>
</body>
</html>

Ну и что у нас осталось незатронутым? Правый сайдбар и подвал странички. Общая структура страницы должна быть уже ясна.

Соответственно, если нам будет нужно поменять оформление шапки сайта, изменить размеры колонок (уже понятно, что в данной теме подразумевается трехколоночный дизайн, сделанный таблицей), то вопросов, к каким элементам обращаться, возникнуть уже не должно.

Переменные шаблона header.tpl | ocShop (Opencart.pro)

Подробности
Категория: ocShop (Opencart.pro)
Просмотров: 2814

В этой статье разберем — переменные шаблона header.tpl —

он находится либо по базовому адресу catalog\view\theme\default\template\common\header.tpl, либо в папке вашей темы:

1. <html dir=»<?php echo $direction; ?>» lang=»<?php echo $lang; ?>»> — задает язык. Можно заменить на что-то конкретное.

2. <title><?php echo $title; ?></title> — так прописывается тайтл в ocshop версии 1.5

3. <base href=»/<?php echo

$base; ?>» /> — базовая страница сайта. Например — на этом сайте это http://art-decoupage.ru/.

4. <?php if ($robots) { ?>
<meta name="robots" content="<?php echo $robots; ?>" />
<?php } ?> 

— эта конструкция необходима для SEO — устранения дублей навигационных цепочек и при сортировке.

5. Еще SEO мета теги — описание и ключевые слова:

<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />

<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php } ?>

6.

И еще доп. для SEO — полезняки:

<meta property="og:title" content="<?php echo $title; ?>" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<?php echo $og_url; ?>" />
    <?php if ($og_image) { ?><meta property="og:image" content="<?php echo $og_image; ?>" /><?php } else { ?><meta property="og:image" content="<?php echo $logo; ?>" /><?php } ?>
    <meta property="og:site_name" content="<?php echo $name; ?>" />

это Open Graph формат, разработанный Facebook, но удобен и поэтому многие лидирующие соц. сети его используют. Более подробно, что означает каждый элемент можно прочитать тут — Яндекс об Open Graph.

Но заметьте тут именно тэги есть интересные:

$og_url — он вытягивает канонический урл — очень полезен для SEO в движке, то есть в ocshop с этим проблем нет, вот например в Битриксе, надо голову сперва сломать, чтобы это все сделать, а тут по умолчанию идет — это удобство!

7. Перебор подключаемых стилей, например для попап-коризны:

<?php foreach ($styles as $style) { ?>
<link rel="<?php echo $style['rel']; ?>" type="text/css" href="/<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>

8. Перебор через цикл ява-скриптов:

<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="/<?php echo $script; ?>"></script>
<?php } ?>

9. Это я не в курсе — кто знает в комментах пишем — ????? Потом узнаю допишу.

<?php foreach ($links as $link) { ?>
        <link href="/<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
    <?php } ?>

10. Удобная фишка в ocshop — подключение гугл аналитики:

<?php echo $google_analytics; ?>

11. Ставим ссылку на главную страницу ocshop: <a href=»/<?php echo $home; ?>»>

12. Прописываем лого и название картинки: <img src=»/<?php echo $logo; ?>» title=»<?php echo $name; ?>

13. Выбор языка: <?php echo $language; ?>

14. Выбор валюты:  <?php echo $currency; ?>

15. Отображение корзины магазина в ocshop: 

<?php echo $cart; ?>

16. Установка поиска на сайте:

<div>
    <div><i></i></div>
    <input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
  </div>

 17. Для тех, кто дальше копает:

а) можно осуществить вывод блога

<?php if ($this->config->get('config_blog_header_menu')) { ?><li><a href="/<?php echo $blog; ?>"><i></i> <?php echo $text_blog; ?></a></li><?php } ?>

Вывод акций (если они у вас есть и настроены):

<?php if ($this->config->get('config_menu_special')) { ?><li><a href="/<?php echo $special; ?>"><?php echo $text_special; ?></a></li><?php } ?>

Вывод новинок (если они у вас есть и настроены):

<?php if ($this->config->get('config_menu_latest')) { ?><li><a href="/<?php echo $latest; ?>"><?php echo $text_latest; ?></a></li><?php } ?>

Вывод производителей (если они у вас есть и настроены):

<?php if ($this->config->get('config_menu_brands')) { ?>    <li><a href="/<?php echo $brands; ?>"><?php echo $text_brands; ?></a>    <div>    <ul>    <?php foreach($manufacturer as $manufacturers){ ?>    <li><a href="/<?php echo $manufacturers['href']; ?>"><?php echo $manufacturers['name']; ?></a></li>    <?php } ?>    </ul>    </div>    </li><?php } ?>

18. Задать время работы магазина (через настройки): <?php echo $time; ?>

19. Вывод Яндекс Карты в ocshop : <?php echo $maps; ?>

20. Можно даже пожаловаться директору магазина — <li><a href=»/<?php echo $abuses; ?>»><?php echo $text_abuses; ?></a></li> (начиная с версии 1.5.6.4)

21. Подключайте социальные сети — кнопки:

<div><a target="_blank" href="/<?php echo $vk; ?>"><i></i></a>
<a target="_blank" href="/<?php echo $fb; ?>"><i></i></a>
<a target="_blank" href="/<?php echo $googleplus; ?>"><i></i></a>
<a target="_blank" href="/<?php echo $youtube; ?>"><i></i></a>
<a target="_blank" href="/<?php echo $twitter; ?>"><i></i></a>
</div>

 

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

Как сделать сайт на tpl шаблонах? | PHPClub

Q-Astion
Новичок