Бесплатные CMS > Установка и расширения PunBB > Интеграция форума в сайт

Как добавить форум на сайт

Это инструкция для начинающих вебмастеров.

Предположим, Вы имеете простой сайт из нескольких страничек: Главная, Мои фотки, Обо мне и т.д. Наша цель добавить на сайт форум PunBB|FluxBB так, чтобы форум стал одной из составляющих сайта и при этом повторялись единые элементы разметки: шапка, подвал и боковая колонка с навигацией и баннерами.

Урок 1. Есть сайт, добавляем форум

Для иллюстрации я создал сайт "Вася в сети". У Васи есть дизайн — копия авторитетного сайта simplebits.com. Содержание страничек для нас значения не имеет, поэтому там будет вздор и мусор, как впрочем на большинстве персональных страничек.

С другой стороны верстка страниц заслуживает уважения. У студии simplebits есть чему поучиться! Я не стал выдумывать что-то свое, а предпочел показать их разметку как пример грамотной и хорошо читаемой работы.

Большая часть ссылок на страничках "сайта" ведут на сайт авторов, тексты большей частью адаптация их текстов. Действительно внутренними ссылками являются только пункты главного меню и один из них это наш будущий форум.

Цель первого урока — изучить разметку и определиться как и куда мы засунем форум. Все необходимые файлы находятся во вложениях к этой статье. Файл vasya-1-site.zip. Странички это статичный html + css. Ссылки абсолютные, подразумевают, что архив распакован в корень сайта.

1. Создайте тестовый виртуальный сервер и распакуйте архив.

2. Папка forum пока пустая, туда мы установим стандартный форум FluxBB без модов. Скачать его можно с официального сайта. Распакуйте дистрибутив форума в папку forum. Откройте в браузере тестовый сайт и перейдите в пункт главного меню "форум". Должно появиться стандартное приглашение к установке:

The file 'config.php' doesn't exist or is corrupt. Please run install.php to install FluxBB first.

Описывать саму установку смысла нет, сделайте все, что надо и убедитесь, что форум работает.

Итак, мы имеем сайт, а по ссылке "форум" открывается форум, который внешне никак не связан с самим сайтом. Мо-ло-дцы!

Пора заняться делом: открываем в браузере главную страницу сайта и ее же в текстовом редакторе чтобы видеть структуру. Я использую PHP Expert Editor, вы можете взять любой другой, понимающий utf-8 и подсвечивающий синтаксис. Мой редактор позволяет сворачивать блоки, что бывает очень полезно при изучении структуры.

3. Наша цель — повторить эту схему с заголовком и подвалом и засунуть форум в левый широкий столбец, то есть в

. Для этого понадобится отредактировать главный шаблон форума и немного поправить файлы стиля. Я пока не буду трогать основные php-файлы, в этом нет необходимости.

Я скопировал файлы Oxygen в новый тиль SB и в профиле пользователя и общих опциях указал исользование нового стиля. В новом шаблоне шапка, подвал и правая колонка подставляются через конструкцию . Подключаемые файлы я сложил в папке include/user/ : sbheader.htm, sbfooter.htm и sbsidebar.htm

Шаблон main.tpl полностью:

<div class="group">
<div class="main pun">
<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>
<pun_announcement>
<pun_main>
<pun_footer>
</div>
<pun_include "sbsidebar.htm">
</div>
</div></div> <!-- /wrap -->
<hr />
<pun_include "sbfooter.htm">
</div> <!-- #simplebits -->
</body>
</html>

Класс main из стилей сайта заставляет форум гдездиться в заданных пределах, а класс pun из стилей форума служит префиксом для описания многих форумных элементов. Из стилей форума я убрал описание "обертки" #punwrap — она здесь не используется больше.

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

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

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

За кадром остался русский язык для форума и работа с UTF-8, т.к. для данного урока это неважно.


Меню сайта

Как добавить форум на сайт
Как добавить форум на сайт