Начиная эту статью можно было бы посетовать на засилье стандартных тем оформления не только у нас в рунете но и в странах с рыночной экономикой, но я этого делать не буду, так как прекрасно отдаю себе отчет, что в связи с абсолютной простотой установки подобные порталы устанавливают, все больше людей не только не знающих PHP, но и с HTML находящихся на ВЫ. Но если HTML можно освоить за вечер, а в PHP, при желании, тоже не составит труда разобраться, то создание хорошей темы оформления сайта зависит от таланта разработчика. Поэтому данный мануал, не учит создавать темы, а всего лишь освещает технические моменты их организации в E- Xoops. Естественно читающий должен ориентироваться в портале и хотя бы поверхностно в HTML и CSS.
Руководство будет состоять из трех частей, в первой из них мы коснемся структуры файла theme.php и функций отвечающих за внешний вид страниц сайта. Во второй опишем основные CSS классы из файла style.css, в котором задается большая часть графического оформления страниц. И в последней, на основе полученных знаний, по пунктам опишем создание совершенно новой темы для E- Xoops.
Хочется упомянуть статьи, которые, хоть и не являются источником данного руководства, но вдохновили на написание этого мануала. Прежде всего, статья с http://rus-phpnuke.com/ посвященная созданию тем для PHP-Nuke (автор Sergey), и статьи Alexxus с http://xoops2.ru/ посвященные созданию тем для XOOPS-2.
Приступим! Структура темы для E- Xoops уходит корнями в организацию тем своего прародителя - PHP-Nuke. Все файлы каждой конкретной темы располагаются в отдельной папке директории themes. Название этой папки соответствует названию темы. Как правило, структура папки выглядит следующим образом:
Начнем анализ файла theme.php. В этом файле задаются основные настройки, определяющие внешний вид страниц сайта. Каждая функция этого файла содержит шаблоны логических составляющих страницы (внешний вид блоков, верхней и нижней части сайта, внешний вид статей и т.д.). Функции эти следующее:
1. themeheader() - внешний вид верхней части сайта, 2. themefooter() - внешний вид нижней части сайта, 3. themesidebox_left() - внешний вид левых блоков, 4. themesidebox_right() - внешний вид правых блоков, 5. themecenterbox_left() - внешний вид левого центрального блока, 6. themecenterbox_center() - внешний вид среднего центрального блока, 7. themecenterbox_right() - внешний вид правого центрального блока, 8. themenews() - внешний вид статей, 9. themecenterposts() - внешний вид блока «Родственные ссылки», поля для предварительного просмотра при публикации сообщения, разделов «Популярные» и «Рейтинг» ссылок и файлов. 10. theme_waitbox() - внешний вид блока с сообщением, который появляется во время загрузки страницы, 11. theme_post() - внешний вид комментариев и сообщений на форуме.
И еще две функции: OpenTable() и CloseTable() – созданы для облегчения добавления стилистически единых таблиц. Соответственно открывают, и закрываю таблицы на различных страницах сайта.
Прежде чем мы перейдем к подробному описанию вышеперечисленных функций, нельзя не упомянуть о константе XOOPS_THEME, значение которой должно быть равно названию темы (и одновременно названию папки, в которой находятся файлы темы)
В самом начале файла theme.php мы должны вставить:
define("XOOPS_THEME", "название темы/папки");
Теперь переходим к подробному описанию функций theme.php. ------------------------------------------------------------ themeheader()
Шаблон:
function themeheader($show_rblock=0) {
global $xoopsConfig;
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Функция, содержит код HTML, который определяет внешний вид верхней части сайта. Должна обязательно содержать тег <body>. $show_rblock –аргумент, отвечающий за показ правых блоков, по умолчанию стоит 0. Значение данного параметра задается в конкретных модулях и если равно единице, то блоки показываются, если нулю, то нет. Соответственно если данный параметр в модуле не задан, то передается значение установленное по умолчанию, в приведенном шаблоне это 0 (значит, правые блоки в данном модуле показаны не будут), естественно значение по умолчанию можно изменить на единицу, и тогда все будет наоборот. Понятно, что очень важно грамотно сделать шапку сайта. Этой темы мы коснемся в третьей части руководства, а пока несколько стандартных решений для верхней части страницы:
Чтобы в то время, пока страница загружается, показывалась картинка загрузки, нужно вставить функцию
<?php OpenWaitBox();?>
Чтобы показывался баннер, вставляем функцию
<?php showbanner();?>
Это в самом простом случае, модулю баннеров посвящена отдельная статья, к которой я Вас и отсылаю.
Чтобы вставить показ текущей даты и времени, нужно (убедившись, что в папке темы имеется файл date.js) вставить до </head>:
(Я специально убрал из <body> все дополнительные параметры, чтобы не загромождать описание).
И теперь чтобы дата и часы были показаны в нужном месте просто к нужной ячейке или строке добавьте id="myclock"Например как это сделано в теме e-xoops:
Естественно в зависимости от своих задумок Вы можете, как угодно комбинировать все вышеприведенное, здесь был показан лишь общий принцип.
------------------------------------------------------------ themefooter()
Шаблон:
function themefooter($show_rblock=0, $footer='') {
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Функция, содержащая код HTML определяющий внешний вид нижней части сайта. $show_rblock – то же что и в предыдущей функции. $footer – переменная, которая содержит данные из поля «нижний колонтитул» мета-генератора. О мета-генераторе читайте в отдельной статье.
------------------------------------------------------------ theme_post()
Описание: Функция, содержит код, который определяет внешний вид комментариев и сообщений на форуме и в привате. Обратите внимание на большой список аргументов этой функции. Каждое сообщение (будь это комментарий или сообщение на форуме) имеет стандартный вид – это и имя его написавшего, его ранг, дата регистрации юзера, его аватар и т.д. наконец название сообщения, когда оно было помещено, кнопки создания и редактирования и т.п. Так вот с помощью этих параметров мы передаем все эти данные. От расположения этих переменных в коде HTML будет зависеть расположение этой информации в теле сообщения. То есть, - где будет размещен сам текст, где его заголовок, а где данные о пользователе его разместившего, где разместятся кнопки и т.д. Кратко перечислим, что обозначают эти аргументы.
$subject – название сообщения, $text – текст сообщения, $color_number – если равно 1, то будет чередование цвета фона в четных и нечетных сообщениях, если равно 0, то не будет, но об этом ниже, $subject_image – иконка сообщения (эмоция, важность направленность), $post_date – дата и время публикации, $ip_image – кнопка IP, $reply_image – кнопка ответа, $edit_image – кнопка редактирования, $delete_image – кнопка удаления сообщения, $username – ник написавшего сообщение, $rank_title – название ранга юзера, $rank_image – иконка, обозначающая ранг, $avatar_image – аватар пользователя, $reg_date – дата регистрации пользователя, $posts – количество сообщений, $user_from – местонахождение юзера, $online_image – картинка нахождения пользователя онлайн/офлайн, $profile_image – кнопка «профиль юзера», $pm_image – кнопка «приватное сообщение», $email_image – кнопка e-mail, $www_image – кнопка веб-страница, $icq_image – кнопка icq, $aim_image – кнопка aim, $yim_image – кнопка yim, $msnm_image – кнопка msnm
Каким образом мы вставляем эти переменные в код? Очень просто. Делаем разметку на HTML и в нужном месте вставляем, например <?php echo $text;?> - в этом месте будет распечатан текст сообщения, или, например <?php echo $subject;?> - в этом месте будет заголовок сообщения. Точно так же и с остальными переменными.
Как я уже упоминал если переменная $color_number – равна 1, то будут чередоваться цвета фона в четных и нечетных сообщениях, если будет равна 0, то чередования не будет.
CSS классы: 'bg1'и 'bg3'и определяют эти цвета. Но о CSS стилях в следующей статье.
Переменная $bg1– цвет фона первой и последней строк в таблице сообщения. Переменная $bg2- цвет фона средней строки (в ней непосредственно печатаются данные о пользователе и текст сообщения).
------------------------------------------------------------ themesidebox_left()
Шаблон:
function themesidebox_left($title='', $content) {
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Функция, содержит код HTML, который определяет внешний вид левых блоковпортала. Переменная $title – название блока, $content – его содержание.
------------------------------------------------------------ themesidebox_right()
Шаблон:
function themesidebox_right($title='', $content) {
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Функция, содержит код HTML, который определяет внешний вид правых блоковпортала. Переменная $title – название блока, $content – его содержание.
------------------------------------------------------------ themecenterbox_left()
Шаблон:
function themecenterbox_left($title='', $content) {
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Функция, содержит код HTML, который определяет внешний вид левого центрального блокапортала. Переменная $title – название блока, $content – его содержание.
------------------------------------------------------------ themecenterbox_center()
Шаблон:
function themecenterbox_center($title='', $content) {
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Функция, содержит код HTML, который определяет внешний вид среднего центрального блокапортала. Переменная $title – название блока, $content – его содержание.
------------------------------------------------------------ themecenterbox_right()
Шаблон:
function themecenterbox_right($title='', $content) {
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Функция, содержит код HTML, который определяет внешний вид правого центрального блокапортала. Переменная $title – название блока, $content – его содержание.
------------------------------------------------------------ themenews()
Шаблон:
function themenews(
$poster,
$time,
$title,
$counter,
$thetext,
$timglink,
$adminlink,
$morelink=''
) {
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Функция, которая определяет внешний вид статей, как в водной части, в ленте новостей, так и в ее полной версии. С помощью аргументов функции мы определяем размещение имени автора, заголовка статьи, самого текста, даты публикации, ссылки на ее полную версию и т.д. Параметры функции обозначают следующее:
$poster - автор, $time– дата и время публикации, $title – заголовок статьи, $counter – число просмотров, $thetext – собственно текст статьи, $timglink – картинка темы, $adminlink – ссылки доступные админу - «Редактировать», «Удалить», $morelink - ссылки «читать далее», «комментарии»
Применение аргументов: в нужном месте размещаем необходимую нам переменную, например <?php echo $poster;?> - в этом месте будет распечатано имя разместившего статью.
------------------------------------------------------------ themecenterposts()
Шаблон:
function themecenterposts($title='', $content) {
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Данная функция определяет внешний вид, во-первых, блока «Родственные ссылки» расположенного на странице с полной версией статьи, во-вторых, это поле для предварительного просмотра при публикации новости, комментария, или сообщения на форуме, в этом же поле в форме ответа помещается текст сообщения, которое комментируешь или на которое отвечаешь. И, в-третьих, это топы/рейтинги ссылок и файлов (разделы «Популярные» и «Рейтинг»). Переменная $title – заголовок блока, $content – его содержание.
------------------------------------------------------------ theme_waitbox()
Шаблон:
function theme_waitbox() {
?>
<!-- HTML CODE -->
<!-- HTML CODE -->
<?php
}
Описание: Функция, содержит код, определяющий внешний вид небольшого блока с сообщением, который появляется во время загрузки страницы.
----------------------------------------------------------- OpenTable() и CloseTable() – как уже говорилось созданы для облегчения добавления стилистически единых таблиц. Соответственно открывают, и закрываю таблицы на различных страницах сайта. Чтобы стало ясно, о чем идет речь, привожу их код полностью (тема e-xoops).
function OpenTable($width='100%') {
?>
<!-- HTML CODE -->
<table width="<?php echo $width;?>" border="0" cellspacing="1" cellpadding="0">
<tr class="bg2">
<td valign="top">
<table width="100%" border="0" cellspacing="1" cellpadding="8"><tr class="bg1">
<td valign="top">
<!-- HTML CODE -->
<?php
}
// ---------------------------------------------------------------------------//
function CloseTable() {
?>
<!-- HTML CODE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- HTML CODE -->
<?php
}
На этом первую часть руководства можно считать закрытой, в следующей статье мы будем рассматривать CSS стили и их применение.
Re: Руководство по созданию тем оформления для E-Xoops. Част
Помаленьку вникаю
Регистрация: 21.1.05
Сообщений: 15
Откуда: Москва
Вообще статья хорошая но головы она не заменит..я например научился без всякой статьи.
-- Я устал страдать от боли Несвершившийся любви Чувств не тронутое горе В сердце яркие огни Будь светла сидя у моря Где дрейфуют корабли Не видать теперь покоя Обернись и позови.. (с)D@rk
Управление
Гостей: 0
Пользователей: 
Всего: 0
Re: Руководство по созданию тем оформления для E-Xoops. Част
Re: Руководство по созданию тем оформления для E-Xoops. Част
