Мы стремимся охватить много CMS; особенно WordPress связанные материалы и темы. Хотя WordPress — это совершенно замечательная CMS, существуют некоторые другие системы управления контентом, которые не получают должного уважения. Стоит отметить, что Frog CMS — простая система управления контентом с открытым исходным кодом. Из того, что я могу сказать, самое большое, что есть у Лягушки, — это простота. Это кажется невероятно быстрым, и то, как все организовано, очень интуитивно понятно. Сегодня мы подробно рассмотрим начало работы с Frog CMS, а также создадим собственный блог с нуля.
Финальный просмотр
Изображение выше — это скриншот того, как будет выглядеть наш блог Frog CMS, когда мы закончим с этим руководством. Имейте в виду, что мы используем тему по умолчанию в настоящее время.
Шаг 1: Установка лягушки
- Как и в большинстве популярных систем управления контентом, Frog использует базу данных MySQL для хранения большей части ваших данных. Вам нужно будет создать базу данных для вашей установки лягушки. Обязательно запишите свое имя пользователя, пароль и хост, так как эта информация понадобится вам на странице установки.
- После того, как вы создали свою базу данных, скачайте и установите Frog CMS где-нибудь на вашем сервере. Для этой статьи наша установка будет на http://dev-tips.com/frog_cms/ , то есть на реальной демо-странице, которую вы можете бесплатно просмотреть и просмотреть, если хотите.
- После того, как вы загрузили Frog на ваш сервер, перейдите в каталог, в котором вы его установили. Что-то вроде
yoursite.com/ribbit/
Вы должны перейти на страницу установки, где вы будете заполнять все детали конфигурации вашей базы данных. Смотрите скриншот ниже:
Заполните все необходимые поля и отправьте форму. Если все пойдет хорошо, вам будет предоставлено имя пользователя и пароль. Обязательно тщательно запомните этот пароль и не забудьте сменить его после входа в систему! Смотрите скриншот ниже для страницы успеха.
Теперь нам нужно следовать инструкциям в нижней части страницы успешного завершения установки, показанной выше. Убедитесь, что вы делаете следующие шаги, иначе Frog отключит блог из-за проблем с безопасностью (что на самом деле является отличной функцией).
- Удалить папку установки. Вся папка.
- Измените права доступа (Chmod, вы должны быть в состоянии сделать это с вашим редактором FTP, в Coda вы можете щелкнуть правой кнопкой мыши на файле и нажать «получить информацию») в файле конфигурации только для чтения. Вы удалите все разрешения на запись, оставив вам номер разрешения (ну, в общем, восьмеричный), равный 444. Ниже приведен скриншот, чтобы прояснить любое недопонимание.
- Удалите все ненужные файлы, такие как changelog.txt, install.txt и т. Д.
- Перейдите на страницу входа по предоставленной вам ссылке (изображенной ниже).
На фото выше: удаление разрешений на запись из config.php
На фото выше: экран входа в систему.
Идите вперед и войдите, вы сделали с установкой!
Шаг 2: Изучение основ
После того, как вы вошли в систему, продолжайте в том же духе, чтобы изучить бэкэнд Frog CMS и попытаться понять, как все работает. Я думаю, что вы будете действительно впечатлены простотой и гибкостью Frog сразу. Я кратко опишу несколько терминов, чтобы вы привыкли работать с бэкэндом Frog.
- Страницы: здесь будет храниться, добавляться и редактироваться весь ваш основной контент. Отдельные статьи также проводятся здесь. Не смущайтесь этим, статьи имеют своих собственных детей и по-прежнему отделены от отдельных страниц. Если вы хотите создать новую страницу, просто нажмите значок плюса под «Домой». Если вы хотите добавить новую статью, просто нажмите значок плюса рядом с подразделом статьи.
- Статьи: Как и любой блог, вы можете иметь статьи и отдельные статические страницы. Как уже говорилось выше, статьи на самом деле находятся под страницами в их собственном подмножестве. Чтобы написать новое сообщение в блоге, просто щелкните значок «плюс» рядом с подмножеством статей.
- Отрывки: это одна из особенностей, которая, на мой взгляд, делает Frog действительно великолепным и действительно простым. Думайте о фрагментах как о необычном php включении. Вы создали новый фрагмент, который может содержать любую разметку или язык, который вы пожелаете. Затем вы можете получить доступ к этому фрагменту в любом месте шаблона вашего сайта, вызвав
$this->includeSnippet('snippet_name');, Позже мы рассмотрим, как использовать фрагменты для рекламы на боковой панели. - Макеты: думайте о макетах как о страницах шаблона WordPress. Они определяют, как выглядит контент и как он размечен. Так же, как вы можете создать новый шаблон страницы в WordPress, вы можете выбрать и создать макет страницы в Frog CMS. Например, если у вас было две разные статические страницы, и вы хотели, чтобы между ними были совершенно разные стили и макеты, вы просто создали бы новый макет для одной из них и присвоили его этой странице.
- Файлы: файлы — это просто место, где вы можете найти все, что находится в вашей общедоступной папке / папке установки. Такие вещи, как темы и изображения.
Это должно охватывать основы достаточно, чтобы мы могли двигаться дальше, поэтому давайте сделаем это …
Шаг 3: Добавление некоторого контента
Идите вперед и найдите время, чтобы создать несколько фиктивных статей и наполнителей. Вы можете использовать такой сайт, как HTML-ipsum.com, чтобы получить наполнитель контента. Если вы ленились и пропустили предыдущую часть о создании статей, просто перейдите к бэкэнду, щелкните страницы и щелкните зеленый значок рядом с подмножеством статей. Теперь вы можете опубликовать столько статей, сколько захотите. Три или около того должны сделать на сегодня.
Содержание боковой панели находится по ссылке «Главная страница», которая находится под страницами. Нажмите на домашнюю ссылку, и вы увидите вкладку с надписью «Боковая панель». Нажмите на эту вкладку, и у вас будет возможность редактировать или изменять любой контент боковой панели, который вы хотите. Вскоре мы будем использовать пользовательский фрагмент на боковой панели, чтобы показывать некоторые объявления для нас.
Шаг 4: Создание нескольких хлебных крошек!
Отличная функция для любого блога или веб-сайта — это навигация в виде крошек. Это устраняет любые недоразумения, которые могут возникнуть у пользователя, и позволяет им узнать, где именно они находятся на вашем сайте. К счастью для нас, нам не нужно добавлять много кода для автоматической навигации по каждой странице. Нам даже не нужен плагин!
- Перейдите к административной панели Frog CMS и нажмите «Фрагменты».
- Здесь вы найдете как минимум два фрагмента, верхний и нижний колонтитулы. Нажмите на фрагмент заголовка, чтобы открыть его для редактирования.
- Просто добавьте следующий код
echo $this->breadcrumbs();между некоторыми php-тегами, где бы вы ни хотели, чтобы появились хлебные крошки. Ниже приведены два примера снимков экрана.
На фото выше: добавление нашего кода к фрагменту заголовка.
На фото выше: наш код в действии работает, как и ожидалось.
Вы также можете передать аргумент-разделитель методу breadcrumbs (), если вам нужен другой разделитель. И это все, что нужно, чтобы получить рабочую навигацию в системе Frog CMS.
Шаг 5: Добавление фрагментов для рекламы
Как мы уже упоминали ранее, фрагменты отлично подходят для любых коротких фрагментов контента, которые будут включены в ваш сайт или блог. Скажем, мы хотим разместить на нашем сайте рекламу ThemeForest и AudioJungle. Сначала мы можем перейти на страницу ThemeForest, чтобы заработать деньги, где мы можем загрузить около 125 на 125 графиков для рекламы. Загрузите графику в вашу установку лягушки в каталоге public / images.
Теперь мы можем пойти дальше и создать наш фрагмент. Перейдите в раздел фрагментов панели администратора и создайте новый фрагмент с именем sidebar_ads . Вставьте или введите следующую разметку:
|
1
2
3
4
|
<ul>
<li><a href=’#’ title=’AudioJungle’><img src=’http://themeforest.s3.amazonaws.com/100_frog/http://dev-tips.com/frog_cms/public/images/125x125_AJ.jpg’ alt=’AudioJungle’ /></a></li>
<li><a href=’#’ title=’ThemeForest’><img src=’http://themeforest.s3.amazonaws.com/100_frog/http://dev-tips.com/frog_cms/public/images/TF_125x125.jpg’ alt=’ThemeForest’ /></a></li>
</ul>
|
Конечно, вы можете добавить любое объявление, которое вы хотите, это только для демонстрационных целей. Теперь мы собираемся включить наши фрагменты, где мы хотим, чтобы они отображались на нашем сайте. Очевидно, они собираются в нашей боковой панели. Перейдите в раздел «Страницы» панели администратора. Нажмите ссылку «Домой» (или в моем случае ссылку «Веселитесь вместе с лягушкой!», Поскольку я изменил название домашних ссылок). После того, как вы нажали ссылку «Домой», нажмите на вкладку боковой панели.
Теперь вставьте следующий код и разметку, где вы хотите, чтобы ваши объявления появлялись на боковой панели:
|
1
2
3
4
|
<hr /><h2>Sponsors</h2>
<div class=’sidebar_ads’>
<?php $this->includeSnippet(‘sidebar_ads’);
</div>
|
Вы заметите, что мы обернули наш фрагмент в базовый класс div, чтобы учесть некоторые основные стили, такие как удаление типа стиля списка в рекламных объявлениях. Добавьте любую разметку CSS, которую хотите, и вы только что включили свои объявления на каждой странице через боковую панель и фрагменты. Самое замечательное в сниппетах — это то, что вы можете использовать столько, сколько захотите, везде, где они нужны на вашем сайте.
Шаг 6: Создание страницы Sitemap для удобной навигации
На многих веб-сайтах и блогах удобно предоставлять пользователям организованную страницу карты сайта, чтобы они могли легко просматривать любую информацию, которую они ищут. CMS Frog позволяет нам действительно легко сделать это.
Сначала нам нужно создать новый фрагмент sitemap названием sitemap и вставить в него следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
function snippet_sitemap($parent)
{
$out = »;
$childs = $parent->children();
if (count($childs) > 0)
{
$out = ‘<ul>’;
foreach ($childs as $child){
$out .= ‘<li>’.$child->link().snippet_sitemap($child).'</li>’;
$out.= ‘</ul>’;
}
}
return $out;
}
?>
<div id=»sitemap»>
<?php echo snippet_sitemap($this->find(‘/’));
</div>
</code>
|
Теперь просто создайте новую страницу по ссылке «Домой», нажав зеленый значок справа. Назовите страницу как хотите и включите фрагмент, который мы создали выше, так:
|
1
|
<?php $this->includeSnippet(‘sitemap’);
|
Поздравляем, вы только что создали организованную и структурированную страницу карты сайта примерно за 30 секунд. В итоге вы должны увидеть что-то похожее на скриншот ниже:
Если вы не хотите, чтобы фактическая страница карты сайта была включена в карту сайта, вы можете установить ее как «скрытую» во время публикации.
Бонус: удаление? Из URL
Возможно, вы заметили знак вопроса, который включен в некоторые части вашего URL в вашей установке лягушки. Лично меня это не сильно беспокоит, но если вы хотите избавиться от них, Frog уже придумал простое решение. Следуйте инструкциям ниже:
- Откройте файл
_.htaccessрасположенный в корне вашей установки Frog. - Измените RewriteBase на местоположение вашей установки Frog CMS (т.е. / frog_cms /). Скриншоты ниже.
- Сохраните и переименуйте файл
.htaccess - Откройте файл config.php и измените значение USE_MOD_REWRITE на true. Сохранить и все готово.
На фото выше: редактирование файла _.htaccess по нашему пути установки.
На фото выше: редактирование файла config.php.
Для получения дополнительной информации об удалении? Отметьте, или если у вас есть какие-либо проблемы, см. руководство пользователя по этой теме .
Наш конечный продукт
С этими основными шагами мы смогли создать очень простой блог за короткое время. Вы можете проверить окончательную демонстрацию этого урока здесь .
Хочу больше?
Я должен сказать, что при подготовке к этому уроку система Frog CMS меня очень впечатлила. Что вы все думаете? Хотели бы вы видеть больше учебников по Frog в будущем, возможно, по темам? Каковы ваши впечатления от From CMS в целом? Пожалуйста, дайте нам знать в разделе комментариев!
Эта статья была первоначально размещена в блоге ThemeForest . В настоящее время мы портируем некоторые из наиболее популярных статей на Nettuts +.