Забыли пароль?
Запросите новый здесь.

Голосование
Что вас интересует на нашем сайте больше всего?

База аддонов
База аддонов
32% [6 Голосов]

Форум, поиск ответов
Форум, поиск ответов
26% [5 Голосов]

Общение
Общение
26% [5 Голосов]

Новости
Новости
0% [0 Голосов]

Другое
Другое
16% [3 Голосов]

Голосов: 19
Вы должны авторизироваться, чтобы голосовать.
Начат: 16.05.2017 07:06

Архив опросов
Случайная тема
Друзья проекта
Unlogic W0rst Lab
Система Smart для PHP-Fusion
Миничат
Только пользователи могут отправлять сообщения.

Vova
Offline
· 14.11.2018 12:42
Zaxap, на основе Hetzner Cloud через их API: https://hetzner.a.
..loud/login

Polarfox
OfflineAdmin
· 11.11.2018 14:42
no comments

Vveb--ws
Offline
· 10.11.2018 15:24
зачем эти заморочки с безопасностью?

Rush
OfflineAdmin
· 08.11.2018 08:33
Безопасность обычно заключается в том чтобы предотвратить подмену этого айди на клиенте, привязать его к айпи, юзер агенту и прочей фигне

Rush
OfflineAdmin
· 08.11.2018 08:32
Сессию украсть или подменить нельзя, она хранится на сервере. Можно украсть кукисы. Айди сессии это всего лишь айди, он не может быть лучше или хуже чем другой айди)

Архив миничата
Сейчас на сайте
» Гостей: 3

Гости:
» [Ваш IP] 01:18:59
/Статьи
» 69.162.124.235 01:18:04
» 70.93.202.49 01:17:43

» Всего пользователей: 1,370
» Новый пользователь: EuroHoster
В базе имеется
аддонов: 951
тем: 137
Иерархия статей
Создание тем – Часть 1. Подготовка.

Как и обещал, открываю серию статей по созданию тем, т.е. как это делаю я (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 строк:

.admin-message {
                font-size: 12px;
                color: #006699;
                background: #e8eef1 url(images/icons/get_info.png) 0.8em 0.5em no-repeat;
                border-top: 2px solid #1380b1;
                border-bottom: 2px solid #1380b1;
                padding: 15px 0 15px 50px;
                margin-bottom: 10px;
}

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

.admin-message { font-size: 12px; color: #006699; background: #e8eef1 url(images/icons/get_info.png) 0.8em 0.5em no-repeat; border-top: 2px solid #1380b1; border-bottom: 2px solid #1380b1; padding: 15px 0 15px 50px; margin-bottom: 10px; }

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

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

img { border: none; }

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

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

.wrapper { width: 990px; margin: 0 auto; }

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

theme.php

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

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

echo "<div class='flleft'>".$subject."</div>\n";

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

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

echo "<div class='flleft'>".$title."</div>\n";

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

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

counter.php

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

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

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

<?php
if (!defined("IN_FUSION")) { die("Access Denied"); }

// Вместо строки между тегами noindex вставьте свой код счетчика
?>
<noindex>
<img src=’images/counter.gif’ alt=’Счетчиктвоюмать’ />
</noindex>

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

На выходе

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

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

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

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


Поделиться этой статьей
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:


#1 | Dzhi 15.11.2013 23:33
Avatar
Отсутствует
Пользователь
Активный
С 10.11.2013 08:45
Название темы может быть любое, может быть из нескольких слов, с пробелом или без, в общем, без разницы, здесь ограничений нет


Пробел надо обязательно обозначать нижним подчеркиванием? Что-то у меня тема с названием папки без этого соединителя работать не захотела...

Семь раз сделай бекап, один - вноси изменения (переделка известной пословицы).
#2 | jikaka 17.11.2013 14:39
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
это зависит от сервера, а так согласен, желательно в одно слово
мысли | фото
#3 | util 07.05.2015 14:20
Avatar
Отсутствует
Пользователь
Активный
С 13.09.2010 13:10
Костя,
неплохо было-бы, если приложишь этот изменённый файл темы (твой-экспериментально подготовленный New..) . Да и файл стилей тоже.
Некоторые моменты не ясны..
А так было-бы удобнее сравнить-понять.
Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
Добавить комментарий
Пожалуйста, залогиньтесь для добавления комментария.
Рейтинги
Нет данных для оценки.

Рейтинг доступен только для пользователей.

Пожалуйста, авторизуйтесьили зарегистрируйтесь для голосования.