Lecaw

Учимся создавать Web-сайты

Создание шаблона для Anchor CMS

July 1, 2013 478hits

В этом уроке мы собираемся создать собственный шаблон для "ближайшего" Open Source проекта - CMS Anchor. Anchor супер простая, легкая и быстрая система управления контентом. Вы можете скачать её с официального сайта Anchor CMS, а также можете найти несколько бесплатных шаблонов.

ДЕМО Исходные файлы

 

Для чего нам это?

Может быть, вы фронтенд веб-дизайнер или разработчик и хотите пойти еще дальше? Возможно, у вас есть статический HTML прототип веб-сайта и хотите создавать страницы и статьи очень быстро, без лишних хлопот написания кода.

Что нам для этого нужно?

Вам понадобятся, по крайней мере, элементарные знания веб-дизайна и понятия разработки, таких как хостинг веб-сайтов и кодинг HTML. Вы должны установить Anchor CMS локально или удаленно. Для установки Anchor (локально или удаленно) нужно просто скачать копию и следовать инструкциям по установке. Также советую вам посмотреть обзор Anchor CMS.

Наряду с установкой вам будет нужен прототип своего шаблона. Прототип должен быть визуально размеченным в HTML, с CSS таблицей стилей и любыми другими компонентами которые вы будете использовать, например изображения или JavaScript. Чтобы продемонстрировать весь этот процесс, я буду создавать свой шаблон вместе с вами. Ниже я приведу примеры своих шаблонов, где вы можете скачать прототип HTML шаблона:

Макет & Компоненты

Так же как и другие системы управления контентом, Anchor имеет каталог шаблонов. Если вы перейдете в корневую папку CMS, там будет папка с названием "themes". Создайте в ней новую папку с названием вашего шаблона, в моем случае я назову шаблон “Cleat”:

Кроме того, нужно создать файл "about.txt". Это простой текстовый файл, который содержит, дополнительную информацию о шаблоне.

Theme name:     Cleat
Description:    A light and pure theme thats simple at heart.
Author name:    David Darnes
Author site:    http://david.darn.es
License:        http://licence.visualidiot.com

Вместе с вашим файлом about.txt, скопируйте файлы HTML прототипа в эту же папку. Лучше всего, сохранять дополнительные элементы, такие как изображения, в отдельной подпапке. Для создания шаблона, мы будем брать блоки из прототипа HTML и размещать их в Anchor совмещая с php функциями.

Большинство веб-сайтов имеют шапку, нижний колонтитул и основной блок контента. Anchor CMS использует такую же структуру, позволяя Вам разбить Ваш шаблон на эти отдельные блоки. Это помогает с организацией и что более важно консистенцией.

Создайте новый файл в папке шаблона под названием "header.php". Откройте этот файл и ваш HTML прототип. Скопируйте HTML с самого верха, вплоть до основной части содержимого. В моем случае это до блока меню. Потому что в моем проекте весь код выше меню идентичен на каждой странице, таким образом, я хочу сохранить это по всему шаблону.

Теперь мы собираемся заменить статическую информацию на php helper, которые предоставляются в Anchor. Ниже приведен код, который я скопировал из прототипа HTML, но с некоторыми изменениями:

<!DOCTYPE html>
<html>
    <head>
        <title>
            <?php echo page_title("Page can't be found"); ?> - <?php echo site_name(); ?>
        </title>
        <!-- Asset links -->
        <link href="/<?php echo theme_url('assets/style.css'); ?>" media="screen" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" href="/<?php echo theme_url('assets/favicon.ico'); ?>" type="image/x-icon">
        <!-- Meta -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="generator" content="Anchor CMS">
    </head>
    <body>
        <section>
            <header>
                <a class="logo" href="#" title="<?php site_description(); ?>"><?php echo site_name(); ?></a>
                <!-- Main Menu -->
                <hr/>
            </header>

Обратите внимание, что HTML все еще на месте, но я заменил весь контент, на отрывки PHP кода. Эти части кода PHP - вызов функций, они действуют в качестве содержания. Когда шаблон будет полностью функционировать, эти функции будут заменены на ваше содержание. Вот список функций, которые я использовал:

  • <?php echo page_title(); ?> - Отображает название страницы
  • <?php echo theme_url('assets/image.png'); ?> – Использует, чтобы получить URL компонентов в Вашей папке шаблона, используйте это для своих таблиц стилей и любых изображений.
  • <?php echo site_description(); ?> – Описание сайта установленное в разделе метаданных.
  • <?php echo site_name(); ?> – Имя сайта, указанное в Anchor.
  • <?php echo base_url(); ?> - Корневой URL установки, которая должна также быть основным адресом сайта.

Добавление меню

Создать меню в Вашем шаблоне довольно просто, если вы понимаете, как это работает. Anchor создает меню из всех опубликованных страниц, которые вы создали.

Чтобы использовать опубликованные страницы, нам нужен способ их выбрать . Взгляните на моем примере ниже:

<?php if(has_menu_items()) : ?>
    <nav role="main">
        <?php while(menu_items()) : ?>
            <a href="#" title="<?php echo menu_title(); ?>"><?php echo menu_name(); ?></a>
        <?php endwhile; ?>
    </nav>
<?php endif; ?>

После того когда пункт меню (создание выпадающего меню) заработает, произойдет вызов нескольких функций:

  • <?php echo menu_url(); ?> - Получает ссылку пункта меню
  • <?php echo menu_title(); ?> – Заголовок элемента, иначе заголовок страницы.
  • <?php echo menu_name(); ?> – Название пункта меню, добавлены Параметры страницы.

Сравните их со своим меню и замените содержание и информацию в Вашем меню на функции выше.

Точно так же, как файл header.php, вам нужно взять раздел нижнего колонтитула своей разметки и вставить его в новый файл, под названием “footer.php”. В моем шаблоне есть ключевая строка , которая появляется на каждой странице, таким образом, я помещу HTML код этой части в мой файл footer.php.

                <hr/>
                <small class="credit"><a href="https://github.com/daviddarnes/cleat" title="Cleat: GitHub">Cleat</a> for <a href="http://anchorcms.com" title="Anchor CMS Homepage">Anchor CMS</a>, Created by <a href="#" title="David Darnes: Designer">David Darnes</a></small>
            </footer>
        </section>
    </body>
</html>

Чтобы охватить все типы содержания, с которыми будет работать Ваш шаблон, мы должны создать три различных файла. Эти файлы находятся между Вашим заголовком и нижним колонтитулом и будут показывать Ваши сообщения, Ваши отдельные статьи и страницы.

После того как мы сделали заголовок и футер, скопируйте основную область своей разметки в новый файл, под названием “posts.php”. Разметка должна находится после кода header.php и до кода footer.php. Файл posts.php используется, чтобы показать все опубликованные сообщения на сайте. Другими словами, это ваш блог.

Если у вас есть HTML прототип для своей страницы блога как у меня, то это создать его будет еще проще, если у вас еще нет прототипа, вы можете сделать его по этому уроку. Мы разделили все блоки на отдельные файлы, теперь мы должны соединить их вместе, для этого понадобится функция “theme_include”. В самом верху файла posts.php добавьте следующее:

<?php theme_include('header'); ?>

Эта функция добавляет файл header.php в страницу. То же самое и для нижнего колонтитула, добавьте следующий код в нижнюю часть posts.php:

<?php theme_include('footer'); ?>

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

<?php theme_include('header'); ?>
<?php if(has_posts()) : while(posts()) : ?>
    <article>
        <header>
            <h1>
                <a href="#" title="<?php echo article_title(); ?>"><?php echo article_title(); ?></a>
            </h1>
            <small><?php echo article_date(); ?></small>
        </header>
        <p><?php echo article_description(); ?></p>
    </article>
<?php endwhile; endif; ?>
<!-- Pagination -->
<?php theme_include('footer'); ?>

Здесь точно также как и в меню, сообщения проходят через ряд функций. Вот еще несколько функций в деталях:

  • <?php echo article_url(); ?> – Получение ссылки сообщения
  • <?php echo article_title(); ?> – Получение заголовка сообщения
  • <?php echo article_date(); ?> – Дата создания сообщения
  • <?php echo article_description(); ?> – Описание сообщения, необязательное поле

Также как и в меню, сравнивайте эти функции с Вашей разметкой и заменяйте содержание на соответствующие функции.

Это наверно, первый раз, когда Вы сможете проверить свой шаблон, чтобы убедится в правильности его работы. Войдите в систему Anchor и выберите Ваш шаблон из выпадающего списка в Extend > Site Metadata.

Если вы следовали моим инструкциям и все сделали правильно, то должны увидеть свою страницу сообщений.

Пагинация

Некоторые из вас задаются вопросом “Что, если у меня очень много сообщений? ”. Хорошо, не волнуйтесь, сейчас я объясню вам эту ситуацию. Для начала проверьте этот отрывок кода:

<?php if(has_pagination()) : ?>
    <nav class="pagination">
        <?php echo posts_prev(); ?>
        <?php echo posts_next(); ?>
    </nav>
<?php endif; ?>

Вы заметите, что разбиение на страницы создается аналогичным способом, как и меню. Есть также альтернативный вариант создания пагинации при помощи фреймворка Foundation.

Этот код нужно поместить в файл posts.php. В моем случае это как раз перед нижним колонтитулом, таким образом, я добавил его в нижнюю часть моего posts.php файла.

Статьи

Относительно страницы сообщений, статьи чрезвычайно просты в реализации. Снова нужно скопировать основной раздел HTML прототипа, который Вы хотите использовать для статей. Точно так же, как файл posts.php, должен совпасть с Вашим заголовком и кодом нижнего колонтитула. В моем примере у статьи есть заголовок, дата и содержание.

Создайте новый файл, под названием “article.php” в Вашей папке шаблона, а затем вставьте в него разметку. Вы также должны убедиться, что Ваш заголовок и нижний колонтитул используют те же функции что и файл posts.php.

<?php theme_include('header'); ?>
<article>
    <header>
        <h1><?php echo article_title(); ?></h1>
        <small><?php echo article_date(); ?></small>
    </header>
    <?php echo article_markdown(); ?>
</article>
<?php theme_include('footer'); ?>

Краткое содержание используемых функций:

  • <?php echo article_title(); ?> – Заголовок статьи
  • <?php echo article_markdown(); ?> – Содержание статьи в теле документа
  • <?php echo article_date(); ?> – Дата создания

Как и прежде, проверьте свой код и замените статическое содержание на соответствующие функции. После того, как Вы закончили с article.php, можете просмотреть, как работают статьи.

Страницы

Создание страниц еще проще создания статей. Скопируйте свою разметку, но на сей раз вставьте ее в новый файл, под названием “page.php”, и добавьте функции подключения файлов сверху и снизу. Страницы на веб-сайтах обычно содержат статическое содержание, которое не изменяется. Поэтому страницы не нуждаются в дате:

<?php theme_include('header'); ?>
<article>
    <header>
        <h1><?php echo page_title(); ?></h1>
    </header>
    <?php echo page_content(); ?>
</article>
<?php theme_include('footer'); ?>

Заключение

Если вы сделали все правильно, у вас не должно возникнуть никаких проблем с созданием шаблона для CMS Anchor. Если все-таки возникли какие-либо проблемы, тщательно проверьте свой код. Часто бывает, что просто пропускают какой-нибудь символ или задают неправильное расположение элементам. Советую воспользоваться форумом Anchor CMS, если не удается решить какие либо проблемы. 

ДЕМО Исходные файлы

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(3 голосов)

Оставить комментарий