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

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

Сложность

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

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

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

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

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

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

Так же как и другие системы управления контентом, Anchor CMS имеет каталог шаблонов. Если вы перейдете в корневую папку 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 CMS совмещая с PHP функциями.

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

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

Далее поменяем стандартную статическую информацию в php helper, пример такого файла вы можете увидеть на сайте для предпринимателей. Ниже приведен код, который я скопировал из 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="/<?php echo base_url(); ?>" 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="/<?php echo menu_url(); ?>" 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(); ?> – Название пункта меню, также здесь присутствуют параметры страницы.

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

Точно так же, вам нужно взять блок футера своей разметки и вставить его в новый файл, под названием "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="http://david.darn.es" title="David Darnes: Designer">David Darnes</a></small>
            </footer>
        </section>
    </body>
</html>

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

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

Мы разделили все блоки на отдельные файлы, теперь мы должны соединить их вместе, для этого воспользуемся функцией "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="/<?php echo article_url(); ?>" 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(); ?> – Описание материала, необязательное поле

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

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

Пагинация

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

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

Обратите внимание, что разбиение на страницы создается аналогичным способом, как и меню.

Этот код нужно поместить в файл 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, если не удается решить какие либо проблемы.

ДЕМО

Перевод статьи Creating a Theme for Anchor CMS

Тэги: CMSPHPAnchor

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.