В прошлом месяце я писал о создании собственной темы Bootstrap, основанной на некоторых новых способах работы, и сегодня я собираюсь использовать эту же тему Bootstrap для создания оболочки для Anchor CMS , довольно стройной и приятной системы управления контентом. Если вы не знаете, что это такое и почему вы должны его использовать, прочитайте мой обзор .
Подводя итог, можно сказать, что в основном это система управления контентом, построенная на современной технологии PHP, предназначенная для дизайнеров, которые хотят продемонстрировать свои навыки в каждой статье. Его можно легко использовать как игровую площадку для внешнего интерфейса, а также как очень приятный и инновационный блог.
Самое замечательное в Anchor заключается в том, что он может быть быстро и легко тематическим. Он следует тем же соглашениям о темах, что и WordPress, так что совсем не сложно в него войти.
Скачать | предварительный просмотр
Файловая структура
Сначала отметим структуру файла. Все темы находятся в папке / themes в корне сайта. Давайте создадим папку с именем мышления внутри и начнем нашу разработку. Вот файлы, которые мы будем создавать:
css/
app.css
bootstrap.min.css
theme.css
fonts/
...bootstrap fonts...
img/
basic-header.jpg
js/
bootstrap.js
jquery.js
less/
...front-end less files...
404.php
about.txt
article.php
footer.php
function.php
header.php
page.php
posts.php
search.php
sidebar.php
Структура покажется немного знакомой; однако вы легко заметите, что index.php не существует, и это нормально. Итак, позвольте мне сначала сказать, что все подпапки являются добровольными. Я хотел сохранить LESS-версию своей темы и скомпилировать ее в папку / css вместе с другими файлами. Как видите, я держу все очень разрозненно, опять же, специально.
Я не буду рассказывать ни о стиле, ни о javascript; вы можете просто скопировать мой репозиторий Bootstrap 3 и добавить файл app.css для настройки.
Итак, файлы:
- 404.php — не требует пояснений. Основной шаблон страницы 404
- about.txt — вместо того, чтобы испачкать наш CSS-файл информацией о теме, мы используем этот файл. Anchor интерпретирует информацию в файле и извлекает ее. Этот файл будет содержать название темы, описание, имя автора и сайт автора.
- article.php — это эквивалент «single.php». Этот файл используется для одной статьи блога
- footer.php — не требует пояснений, это то, куда идет ваш нижний колонтитул. Отсюда он включается во все остальные файлы
- function.php — аналогично WordPress, этот файл может содержать любые и все пользовательские функции, которые вы хотели бы использовать в своей теме
- header.php — шаблон заголовка
- page.php — шаблон одной страницы
- posts.php — это эквивалент «index.php». Содержит список ваших статей. Используется для страниц блогов и категорий
- search.php — файл шаблона для результатов поиска
- sidebar.php — хотя это и не обязательно, это файл, который я использую для добавления боковой панели на каждую указанную страницу. Проще, чем копирование, по крайней мере для меня.
О, верхний и нижний колонтитулы
Давайте начнем с основ. Создайте папку своей темы и создайте файлы about.txt, header.php и footer.php . Во-первых, давайте поговорим о файле. По сути, это файл свойства: тип значения со свойствами, разделенными новыми строками:
Theme Name: Thought Essays
Description: This is AntJanus's Thought Essays Theme
Author Name: Antonin Januska
Author Site: http://antjanus.com
Это гарантирует, что Anchor проанализирует эту информацию и даст нам это взамен (в админке):
Далее, давайте работать над заголовком. Я принял несколько решений, с которыми многие из вас могут не согласиться:
- Я решил использовать названия категорий в качестве элементов для навигации
- Я решил оставить свои файлы CSS разделенными (bootstrap.css, theme.css и app.css) для более простых обновлений.
Хорошо, давайте посмотрим, что мы можем сделать. Сначала давайте пройдемся по «головной» части:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo page_title('Page can’t be found'); ?> - <?php echo site_name(); ?></title>
<meta name="description" content="<?php echo site_description(); ?>">
<link rel="stylesheet" href="<?php echo theme_url('/css/bootstrap.css'); ?>">
<link rel="stylesheet" href="<?php echo theme_url('/css/theme.css'); ?>">
<link rel="stylesheet" href="<?php echo theme_url('/css/app.css'); ?>">
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo rss_url(); ?>">
<link rel="shortcut icon" href="<?php echo theme_url('img/favicon.png'); ?>">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="<?php echo theme_url('/js/jquery.js'); ?>"></script>
<script src="<?php echo theme_url('/js/bootstrap.min.js'); ?>"></script>
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Anchor CMS">
<meta property="og:title" content="<?php echo site_name(); ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?php echo current_url(); ?>">
<meta property="og:image" content="<?php echo theme_url('img/og_image.gif'); ?>">
<meta property="og:site_name" content="<?php echo site_name(); ?>">
<meta property="og:description" content="<?php echo site_description(); ?>">
<?php if(customised()): ?>
<!-- Custom CSS -->
<style><?php echo article_css(); ?></style>
<!-- Custom Javascript -->
<script><?php echo article_js(); ?></script>
<?php endif; ?>
</head>
Что за стена кода. Большая часть этого материала должна быть вам знакома (насколько HTML), поэтому давайте сосредоточимся на специфических для якоря вещах.
<title><?php echo page_title('Page can’t be found'); ?> - <?php echo site_name(); ?></title>
Сначала название. Якорь имеет несколько опрятных функций. Одним из них является page_title , почему? Потому что это позволяет вам проходить через заголовок страницы по умолчанию для 404. В любом случае, довольно очевидно, вне этого.
<link rel="stylesheet" href="<?php echo theme_url('/css/bootstrap.css'); ?>">
<link rel="stylesheet" href="<?php echo theme_url('/css/theme.css'); ?>">
<link rel="stylesheet" href="<?php echo theme_url('/css/app.css'); ?>">
Мы ссылаемся на наши таблицы стилей. Обратите внимание, что у нас есть функция theme_url, которая всегда ссылается на корневую папку темы. Это довольно полезно. Кроме того, почему 3 таблицы стилей? Что ж, если вы прочитаете мое руководство по созданию современных тем Bootstrap , вы обнаружите, что я говорю о разделении CSS. Распределение Bootstrap довольно ванильно с парой переменных изменений. Theme.css основан на моей оригинальной теме мысли. И, наконец, файл «app.css» ссылается непосредственно на реализацию привязки. В будущем я определенно хотел бы внедрить какое-то минимизацию процесса.
В любом случае, строки JavaScript отражают сделку CSS, поэтому давайте перейдем к opengraph:
<meta property="og:title" content="<?php echo page_title(); ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?php echo current_url(); ?>">
<meta property="og:site_name" content="<?php echo site_name(); ?>">
<meta property="og:description" content="<?php echo site_description(); ?>">
Взятые непосредственно из темы по умолчанию Anchor CMS, эти маленькие строчки кода облегчают Facebook, Twitter и Google Plus, чтобы выяснить, о чем ваш сайт. У Facebook есть множество документов, доступных для объяснения этой функции. Мы также познакомимся с некоторыми новыми функциями Anchor. К счастью, я уверен, что вы можете понять это на основе свойств og.
<?php if(customised()): ?>
<!-- Custom CSS -->
<style><?php echo article_css(); ?></style>
<!-- Custom Javascript -->
<script><?php echo article_js(); ?></script>
<?php endif; ?>
Пользовательские CSS и JavaScript. Здесь Anchor становится интересным. Технически, вы можете создать эту функцию в WordPress в кратчайшие сроки, но приятно, что она действительно встроена в Anchor. Вы можете настроить каждую страницу статьи на сайте с помощью индивидуального постраничного CSS и JS.
Если вы когда-нибудь заполните эти два текстовых поля в бэкэнде, то функция custom () вызовет возвращение true для этой статьи.
Далее, навигация:
<body class="<?php echo body_class(); ?>">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<?php while(categories()): ?>
<li>
<a href="<?php echo category_url(); ?>" title="<?php echo category_title(); ?>">
<?php echo category_title(); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>
<a href="<?php echo base_url(); ?>"><?php echo site_name(); ?></a>
</h1>
<br />
<h3><?php echo site_description(); ?></h3>
</div>
</div>
Для навигации я явно использовал категории. Но давайте вернемся немного назад. У нас здесь есть несколько замечательных функций:
<?php echo body_class();?>
<?php echo base_url();?>
Класс body — это, по сути, способ дать CSS знать, на какой странице вы находитесь. Если вы находитесь на странице posts.php, там будет написано «posts», а если вы и на домашней странице, то будет «posts home». И base_url — это именно то, что вы ожидаете.
Поэтому для создания нашего меню мы использовали следующий цикл:
<?php while(categories()): ?>
<li>
<a href="<?php echo category_url(); ?>" title="<?php echo category_title(); ?>">
<?php echo category_title(); ?>
</a>
</li>
<?php endwhile; ?>
Функция категорий всегда должна быть доступна вам при создании шаблонов. При его вызове вы можете легко сделать это некоторое время и использовать его свойства title и URL для создания меню или виджета боковой панели. Чтобы закончить наш заголовок, я добавил jumbotron с названием и описанием сайта. Результат пока что:
Так что насчет нашего жалкого нижнего колонтитула? Это самый простой:
<div class="container">
<hr />
<p>
Created by <a href="http://antjanus.com">AntJanus</a>
</p>
</div>
</body>
</html>
Давайте перейдем к следующей части, нашей странице posts.php .
Posts.php
Posts.php используется для создания списка нашего контента. Это «index.php» WordPress. Вот как это будет выглядеть:
И это довольно просто. Во-первых, давайте включим заголовочный файл:
<?php theme_include('header');?>
Это обеспечит включение заголовка на каждой странице постов, и давайте начнем с цикла.
<divclass="container"id="content">
<divclass="row">
<divclass="col-md-2 visible-md visible-lg">
</div>
<divclass="col-md-7">
<?php if(has_posts()):
while(posts()):?>
<articleclass="post">
<h2>
<a href="<?php echo article_url();?>" title="<?php echo article_title();?>"><?php echo article_title();?></a>
</h2>
<smallclass="meta">
<?php echo article_author();?> | <time datetime="<?php echo date(DATE_W3C, article_time());?>"><?php echo article_date();?></time>
</small><br/>
<?php echo article_description();?>
</article>
<hr/>
<?php endwhile;?>
Обратите внимание, что цикл «если» все еще открыт, я рассмотрю его (и закрою) после того, как перейду к этой части. Опять то же самое, что и WordPress. У нас есть функция has_posts (), которая проверяет наличие сообщений, затем мы запускаем цикл while () для сообщений. Я еще не нашел альтернативу query_loops в якоре, что означает, что цикл записей будет работать только на страницах сообщений и категорий. Далее у нас есть несколько (самоочевидных) функций:
- article_url () дает вам URL статьи
- article_title () для заголовка
- article_author () для автора
- article_date () для даты. Я также использую функцию даты для тега <time>. Проверьте, что он делает, и это важно.
- article_description () для его краткого описания
Вы будете вводить всю эту информацию для каждой статьи в фоновом режиме. Проверьте документы, чтобы увидеть больше статей, связанных с функциями. Я использую обычные стили начальной загрузки 3, так что не обращайте внимания на некоторые классы «class =» posts »» и «meta», они на самом деле не стилизуются.
Так что же происходит, когда у вас больше сообщений по умолчанию? Вы должны будете получить нумерацию страниц. К счастью, якорь имеет следующее:
?php if(has_pagination()):?>
<nav class="pagination">
<?php echo posts_prev();?>
<?php echo posts_next();?>
</nav>
<?php endif;?>
Добавьте это прямо под предыдущим кодом, и вы получите простые ссылки «<- Previous», «Next ->» внизу постов.
Итак, еще одна вещь. Давайте закроем цикл и закончим страницу.
<?php else:?>
<p>Looks like you have some writing to do!</p>
<?php endif;?>
</div>
<divclass="col-md-3"id="sidebar">
<?php theme_include('sidebar');?>
</div>
</div>
</div>
<?php theme_include('footer');?>
Построчно. «Else» будет гарантировать, что мы показываем что-то пользователю, когда нет сообщений. Если (has_posts ()) не удастся.
Далее я хотел создать боковую панель, поэтому мы просто предварительно включим ее и то же самое в нижний колонтитул.
Поздравляем! Мы сделали наши домашние / категории / посты!
Боковая панель
Быстро, давайте сделаем боковую панель. Технически, у Anchor нет специальных функций «боковой панели», виджетов или чего-то подобного WordPress. Я решил связать в поле поиска с боковой панелью, чтобы мы могли ее иметь. Опять же, это обычай.
<divclass="widget">
<h3>
Search
</h3>
<form action="<?php echo search_url();?>" method="get">
<divclass="input-group">
<inputtype="search"class="form-control"name="term"id="term">
<spanclass="input-group-btn">
<inputtype="submit"value="Search!"class="btn btn-default">
</span>
</form>
</div>
Это все содержание этого. Единственная особенность привязки здесь — это функция search_url (), которая даст вам URL-адрес, куда вам нужно разместить поисковый запрос. Убедитесь, что вы используете «get» и что ваше поле поиска называется «term». Это гарантирует, что якорь знает, о чем вы говорите.
Статья
Далее идет страница нашей статьи. Поток будет похож на страницу сообщений, за исключением того, что нам не понадобится цикл «posts ()». Вот что мы пытаемся создать:
Мы в основном хотим левую боковую панель с метаинформацией и правую боковую панель с поиском и контентом посередине. Неплохо.
<?php theme_include('header');?>
<divclass="container"id="content">
<divclass="row">
<divclass="col-md-2 visible-md visible-lg">
<p>
<strong><?php echo article_author();?></strong>
<br/>
<time datetime="<?php echo date(DATE_W3C, article_time());?>"><?php echo article_date();?></time>
<br/>
<strong>About: </strong><?php echo article_author_bio();?>
</p>
</div>
<divclass="col-md-7">
<h1class="post-title">
<?php echo article_title();?>
</h1>
<pclass="meta visible-sm visible-xs">
<?php echo article_author();?> | <time datetime="<?php echo date(DATE_W3C, article_time());?>"><?php echo article_date();?></time>
</p>
<?php echo article_markdown();?>
</div>
<asideclass="col-md-3"id="sidebar">
<?php theme_include('sidebar');?>
</aside>
</div>
</div>
<?php theme_include('footer');?>
Вы должны привыкнуть к потоку сейчас. Мы указали ту же метаинформацию для левой боковой панели (начиная с col-md-2, классифицированного как div), а затем перешли к основному контенту с помощью класса col-md-7. Вы увидите, что метаинформация повторяется, потому что она видна только для телефонов в горизонтальном / вертикальном представлении. Левая боковая панель исчезнет в этом представлении. Вот как это выглядит:
Я думаю, что это выглядит лучше, чем какая-то боковая панель мета ширины 100%. Weird. В любом случае, одна классная вещь, которую мы можем использовать, это функция article_markdown (), которая автоматически конвертирует вашу уценку в html.
И наконец, обычная боковая панель, а затем нижний колонтитул.
Поздравляем! Мы почти закончили
Пейдж, 404, и Поиск
У вас должно быть довольно четкое представление о том, как создавать страницы сейчас. Выясните, какие основные группы функций следует использовать (статья, страница, публикация), а затем примените информацию, которую вы хотите представить на странице (имя, URL и т. Д.). Давайте займемся страницей.
Создайте файл page.php . Вот чем его заполнить:
<?php theme_include('header');?>
<divclass="container"id="content">
<divclass="row">
<divclass="col-md-2 visible-md visible-lg">
</div>
<divclass="col-md-7">
<h1class="post-title">
<?php echo page_title();?>
</h1>
<?php echo page_content();?>
</div>
<asideclass="col-md-3"id="sidebar">
<?php theme_include('sidebar');?>
</aside>
</div>
</div>
<?php theme_include('footer');?>
Увидеть? Не так сложно, мы, опять же, в том числе верхний и нижний колонтитулы. Мы используем нашу существующую структуру html и отключаем некоторые вещи. Я оставил левый столбец (col-md-2) пустым, в основном из-за возможного использования в будущем и из-за упрощения стиля. Это не хорошая практика, но смирись с этим . И снова у нас есть функции page_title () и page_content (), которые отображают то, что мы хотим, чтобы они отображали.
Далее 404 стр. Страница 404, очевидно, отображается, когда пользователь нажимает на ошибку 404.
<?php theme_include('header');?>
<divclass="container"id="content">
<divclass="row">
<divclass="col-md-2 visible-md visible-lg">
</div>
<divclass="col-md-7">
<h1class="post-title">
404 - Not Found
</h1>
</div>
<asideclass="col-md-3"id="sidebar">
<?php theme_include('sidebar');?>
</aside>
</div>
</div>
<?php theme_include('footer');?>
То же самое, что и раньше, за исключением того, что на этот раз мы просто сообщаем пользователю, что страница, которую он искал, не была найдена. Облом.
Так что насчет страницы поиска? Это немного сложнее:
<?php theme_include('header');?>
<divclass="container"id="content">
<divclass="row">
<divclass="col-md-2 visible-md visible-lg">
</div>
<divclass="col-md-7">
<h1class="post-title">
You searched for “<?php echo search_term();?>”.
</h1>
<?php if(has_search_results()):?>
<?php while(search_results()):?>
<articleclass="post">
<h2>
<a href="<?php echo article_url();?>" title="<?php echo article_title();?>"><?php echo article_title();?></a>
</h2>
</article>
<?php endwhile;?>
<?php if(has_pagination()):?>
<navclass="pagination">
<?php echo posts_prev();?>
<?php echo posts_next();?>
</nav>
<?php endif;?>
<?php else:?>
<p>Unfortunately, there's no results for “<?php echo search_term();?>”. Did you spell everything correctly?</p>
<?php endif;?>
</div>
<asideclass="col-md-3"id="sidebar">
<?php theme_include('sidebar');?>
</aside>
</div>
</div>
<?php theme_include('footer');?>
Напоминает вам о странице сообщений, верно? Это работает аналогично. Вместо использования has_posts () мы используем has_search_results (), а затем копируем наш шаблон сообщений. Если результатов нет, мы отправляем пользователям сообщение по умолчанию. Обратите внимание, что мы не даем пользователям article_description () ; тем не менее, вы можете легко добавить его самостоятельно. Я просто предпочитаю не делать этого.
А как насчет комментариев? (по желанию)
Я предпочитаю использовать Disqus для комментирования, потому что я прохожу тонны CMS и блогов и что у вас так, вот как я это реализовал. Это необязательный шаг. Создайте файл comments.php . Вставьте следующий код в:
<?php if(comments_open()):?>
<divid="disqus_thread"></div>
<scripttype="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname ='REPLACE!!!!';// required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function(){
var dsq = document.createElement('script'); dsq.type ='text/javascript'; dsq.async =true;
dsq.src ='//'+ disqus_shortname +'.disqus.com/embed.js';
(document.getElementsByTagName('head')[0]|| document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <ahref="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<ahref="http://disqus.com"class="dsq-brlink">comments powered by <spanclass="logo-disqus">Disqus</span></a>
<?php endif;?>
Мы используем встроенную функцию комментирования Anchor, чтобы проверить, разрешены ли комментарии на странице или нет. Если они есть, мы используем фрагмент Disqus, чтобы показать комментарии. Теперь нам просто нужно включить файл комментариев в файл article.php.
Добавьте следующее в <? Php echo article_markdown ();?>
<?php theme_include('comments');?>
И вы сделали. Вот итоговый результат.
Пользовательские функции
Как и в WordPress, в Anchor есть файл functions.php. Здесь вы можете разместить функции, которые вы хотите использовать в вашей теме. Создатель Anchor составил аккуратный список из них в своей теме по умолчанию. Вот пример:
function count_words($str){
return count(preg_split('/\s+/', strip_tags($str),null, PREG_SPLIT_NO_EMPTY));
}
Если бы мы хотели отобразить количество слов, которое есть в статье, мы могли бы легко сделать это, передав содержание статьи в функции следующим образом:
<strong>Word Count: </strong><?php echo count_words(article_markdown());?>
Он будет включен автоматически, поэтому убедитесь, что вы не испортили файл и не вызвали кучу ошибок PHP!
Вывод
Как видите, создать тему Anchor довольно просто. Вы можете в значительной степени создать несколько HTML-шаблонов и добавить их в PHP, чтобы сделать его темой. Это так просто.
Если у вас есть какие-либо вопросы о процессе, не стесняйтесь комментировать. Вы также можете проверить форум!