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

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

База аддонов
База аддонов
11% [1 Голос]

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

Общение
Общение
33% [3 Голосов]

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

Другое
Другое
22% [2 Голосов]

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

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

Alipapa
Offline
· 18.07.2017 22:13
тоже попадалась

Alex
Offline
· 18.07.2017 12:50
встретилась реклама в директе тык ab

jikaka
OfflineAdmin
· 12.07.2017 11:14
Alex, потому что лето...

Alex
Offline
· 11.07.2017 16:32
опять тишина

Alex
Offline
· 26.06.2017 18:41

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

Гости:
» 164.132.161.11 06:35:21
/Поиск
» [Ваш IP] 06:35:21
/Статьи
» 46.229.168.67 06:35:19
/moddb/error.php
» 46.229.168.76 06:35:05
/Профиль
» Google [Bot] 06:35:03
/Поиск
» 46.229.168.73 06:35:03
/Поиск
» 69.162.124.235 06:34:59
» 164.132.161.35 06:34:45
/Поиск
» 217.182.132.32 06:34:34
/Поиск
» 217.182.132.92 06:34:33
/Поиск
2 - не показано

» Всего пользователей: 1,304
» Новый пользователь: well-web
В базе имеется
аддонов: 952
тем: 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..) . Да и файл стилей тоже.
Некоторые моменты не ясны..
А так было-бы удобнее сравнить-понять.
Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
Добавить комментарий
Пожалуйста, залогиньтесь для добавления комментария.
Рейтинги
Нет данных для оценки.

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

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