Как и обещал, открываю серию статей по созданию тем, т.е. как это делаю я (jikaka).

Под словом «тема» я буду подразумевать шаблон для PHP-Fusion, т.е. готовый дизайн, интегрированный в CMS, который устанавливается в несколько кликов через админку. Естественно разговор будет идти про актуальную версию – 7.02.05, соответственно и про ее файлы.

Введение

До сегодняшнего дня я пробовал различные варианты построения или создания тем для различных версий PHP-Fusion. Перепробовав разные пути подхода, на данный момент у меня уже имеется более-менее отлаженный механизм и примерный порядок действий, который может меняться в зависимости от сложности создаваемой темы. Если вдаваться в цифры, то получается, что я примерно сделал чуть более 30 тем для разных версий PHP-Fusion. При этом на создание темы у меня теперь уходит значительно меньше времени, чем раньше, это примерно 3-5 дней при благоприятных условиях. Одним из этих условий является положительное утверждение нарисованного дизайна. Естественно, что при внесении правок в дизайн сроки увеличиваются в зависимости от количества и качества указанных замечаний.

Один из вариантов создания темы был стандартный метод: рисование дизайна – верстка дизайна – интеграция верстки. Т.е. сверстанную страницу, а точнее ее код я тупо вставлял в файл theme.php и использовал функции CMS для вывода контента. Но от такой версии работы я быстро отказался, т.к. это требовало больше времени и усилий на правильную и валидную верстку. В итоге сейчас схема работы у меня примерно такая: рисование дизайна – интеграция дизайна, таким образом, я пропускаю злополучный пункт верстки, а на выходе получаю валидный код и соответственно, тему, построенную по всем правилам PHP-Fusion.

Возможно, кто-то скажет, что это неразумно и не стоит пропускать столь важный пункт, как верстку дизайна, но я действую теперь именно так, на чем очень сильно экономлю время и нервы.

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

Структура

Для тех, кто не в курсе, не знал или просто забыл, напоминаю, что все темы CMS располагаются в корневой папке «themes» (не трудно догадаться почему пошло и название – тема). Папка «themes» содержит не только папки тем, но и имеет еще папку «templates» и файл index.php. в итоге структура для папки «themes» выглядит следующим образом:

• Theme_01/
• Theme_02/
• …
• Theme_N/
• Templates/
• index.php

где Theme_01, … , Theme_N – названия различных тем.

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

Теперь рассмотрим структуру папки с темой, которая выглядит следующим образом:

• forum/
• images/
• index.php
• styles.css
• theme.php

где папка «forum» содержит изображения, используемые форумом CMS, папка «images» содержит все изображения, используемые файлами темы, файл «index.php» – пустой файл, ограничивающий доступ к просмотру файлов к данной директории, грубо говоря – файл безопасности, файл «styles.css» – файл всех стилей, используемых темой, файл «theme.php» - основной файл темы, организующий каркас темы и подключение основных функций вывода контента.

При этом структура папки может состоять из дополнительных папок и файлов в зависимости от сложности темы. Например, логично создать папку «js» для размещения в ней файлов-скриптов, которые будут использоваться в теме, или создать файл «menu.php» – если вдруг решили заменить стандартную горизонтальную навигацию на что-нибудь красиво выпадающее, и т.д.

С чего начинается работа

Вся моя работа по созданию темы, по сути, строится на модификации (изменении) файлов выбранной темы примерно на 70-90%. Оставшиеся проценты относятся к административной части, которую, на мой взгляд, нет смысла сильно модифицировать.

В связи с тем, что сейчас актуально иметь блочную верстку дизайна, для себя я выбрал стандартную тему «Stylo», которая удовлетворяет всем требованиям, в том числе и валидности. Автор провел огромную работу по разработке данной темы, за что ему огромное спасибо. Если тема требуется для 6-ой версии движка, то выбирается тема с табличным каркасом, т.к. данная версия CMS блочную верстку не поддерживает.

Тему «Stylo» для себя переименовал в «For New Theme» и провел с ней ряд изначальных действий для большей производительности и для не повторения одних и тех же действий для вновь создаваемых тем, т.к. по сути, приходится делать одно и тоже из раза в раз.

styles.css

Первым делом я изменил файл styles.css. Т.к. данный файл большой по своему наполнению из-за чего переход от редактирования одного класса к другому получается утомительным, решено было редко редактируемые классы вывести в одну строку, тем самым значительно сократить файл по количеству строк. Например, есть класс «admin-message», который в файле по умолчанию прописан в 9 строк:

Делаем вывод его в одну строку:

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

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

Для чего эта строка нужна, объяснять не буду.

Дополнительно в начале файла прописываю класс «wrapper», который ограничивает ширину темы в определенных рамках. По умолчанию код выглядит так:

Размеры сделаны специально под монитор с разрешением в 1024px по горизонтали, чтобы не появлялась горизонтальная полоса прокрутки внизу экрана браузера. При необходимости класс можно усовершенствовать, используя такие стили, как «max-width» и «min-width».

theme.php

Вторым делом изменяю файл theme.php. Добавляю строки с классом «wrapper» в начале и в конце вывода функции «render_page(…)».

Для заголовков новостей и статей дополнительно прописываю стиль «style=’font-size:14px;’» для строк функций:

Делается это потому, что при правке файла styles.css именно изменения размера шрифта не добиться, т.е. никак не изменить шрифт заголовка новости или статьи. Как вариант можно поступить и по-другому, более универсально, прописать не стиль, а дополнительный класс и непосредственно новый класс указать в файле styles.css.

По аналогичной проблеме делаем тоже самое и для заголовков панелей, т.е. для функции «openside(…)», правим строку:

добавляя в нее все тот же стиль «style=’font-size:14px;’».

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

counter.php

Третьим делом создается папка «includes», а в ней пустой файл «index.php» и файл «counter.php», который выводит картинку размером 88х31 при подключении этого файла в «theme.php» в том месте, где это требуется. Картинку необходимо заранее подготовить.

Мне постоянно приходилось прописывать счетчики на сайт и делать это напрямую в файле «theme.php» было немного неудобно, т.к. счетчики имеют порой большой код, который мешает редактированию файла «theme.php». В итоге получается, что все счетчики в одном файле, что очень удобно, и при необходимости быстро редактируются.

Код файла «counter.php» по умолчанию содержит следующие строки:

Пояснительная строка сделана специально для тех, кому приходится отдавать файлы созданной темы, что позволяет не тратить время на объяснение что куда и как.

На выходе

В итоге я подготовил для себя немного измененные файлы темы «Stylo», которые постоянно использую для создания новых тем. При этом если что-то в процессе создания новой темы меня напрягает, то я вношу эти изменения в начальный дистрибутив файлов «For New Theme».

Возможно, я что-то упустил, но принцип подготовки файлов именно такой, как я его описал.

Таким образом, создав один раз под себя все изменения, последующие разы я пропускаю этап подготовки темы, что очень существенно экономит мое время.

Теперь можно приступать непосредственно к разработке новой темы, этапы которой я опишу в следующей части. По этой же части с удовольствием выслушаю вопросы, замечания или предложения.