ria pc game
fle game engine - движок для создания игр
fle game engine - движок для создания игр


Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
18 февраля 2019 5:42
Вход Регистрация Забыли пароль ?

megainformatic - статья Тимонина Андрея - States. Создаем менеджер состояний игры.
[к содержанию] [другие статьи Тимонина Андрея] States. Создаем менеджер состояний игры. автор: Тимонин Андрей дата публикации на сайте Мега Информатик: 18.11.2012 До
подробнее...

Теги создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт
Статьи сайта
Советы копирайтеру - как не обмануть и не быть обманутым

Balls and Holes игра скачать + как создать игру на fle game engine

Balls and Holes игра скачать + как создать игру на fle game engine

Something: Unexplained 2 captive of desires

KKK Коллекционное издание: Веселый Буквоежка Комикс + Костя Коробкин Комикс + Нечто: Необъяснимое в плену желаний 2 начало

KKK Коллекционное издание: Веселый Буквоежка Комикс + Костя Коробкин Комикс + Нечто: Необъяснимое в плену желаний 2 начало

megainformatic - Костя Коробкин - В гостях у тёти Светы часть 2 Живые машины (kk as) - онлайн комикс - страница 17

megainformatic - Игродельня

megainformatic - Новости страница 542

megainformatic - С днём защитника отечества !

megainformatic fle game engine fle / Пример простой игры fle - Скроллинг больших локаций

megainformatic - Костя Коробкин - В гостях у тёти Светы часть 2 Живые машины (kk as) - онлайн комикс - страница 18

megainformatic - Шарики и Ямки игра PC

megainformatic - Шарики и Ямки игра PC

megainformatic fle game engine fle / Изучаем основы c++ - переменные на примере реального игрового проекта Balls and Holes

megainformatic - Реферальная ссылка

megainformatic - Изменение постоянных свойств в зависимости от контекста

megainformatic - Костя Коробкин Компания Зергов онлайн комикс читать

megainformatic - Искатели приключений Зеленый Шарик

megainformatic - Без названия

megainformatic - Мульти анимация

Pencil, Paper and the Ball PC game

megainformatic - Костя Коробкин Компания Зергов онлайн комикс читать страница 2

megainformatic - Костя Коробкин Компания Зергов онлайн комикс читать страница 3

megainformatic - fle game engine - создание 3d игры - simple game 3d

Pencil, Paper and the Ball PC game

I Free lancer - tale, story Я фрилансер повесть, история

Шарики и Ямки игра, Эмулятор игры Ну Погоди, Balls and Holes, Веселый Буквоежка Комикс, Костя Коробкин Комикс, Нечто: Необъяснимое в плену желаний 2 начало, simple game, с новым годом

Процесс создания игры в картинках

Сравнение различных игровых движков. Плюсы и минусы

app combainer - комбайнер настольных и веб приложений

kerbal space program - Первые впечатления

Pencil Paper and the Ball PC Game review #91 - Как я придумываю историю

We all live in a yellow submarine !

PSI Siberian Conflict Reincarnation - Сибирский Конфликт Война Миров Реинкарнация

megainformatic - Костя Коробкин Компания Зергов онлайн комикс читать страница 4

Ria PC game

Cradle / Колыбель PC game 2015 история неуспеха

ria pc game история

ria pc game - видео 105 - темная сторона

ria pc game - доска почета

ria pc game - Ваше персональное место в игре

ria pc game - megainformatic развитие проекта с 2006 года обзор 108

megainformatic страница 577

ria pc game - megainformatic обзор 109_1

ria pc game - megainformatic обзор 110_2

ria pc game - история создания проекта

Развитие сайта - временная капсула

Игра Мечты - ria pc game

megainformatic - минимизация css, js

megainformatic - Создание игры Шар Бумага Карандаш Pencil Paper and the Ball (каникулы зеленого шарика)

megainformatic - Генератор ников, логинов

megainformatic - Начало работы с fle game engine. Создание стартового шаблона приложения - будущей игры на c++ directx 9

megainformatic - fle game generator - эффекты под музыку и без на движке fle game engine

megainformatic - fle game generator - эффекты под музыку и без на движке fle game engine - урок 2 - переходим к более сложным эффектам - вращение 3d объектов

megainformatic - Создание простейшей нейросети на примере распознавания цифр

подробнее

     
  Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2)  
     
  модель коммандного центраСкачать готовую модель вы можете кликнув по картинке.  
     
  Этот объемистый урок расскажет Вам как научиться создавать нечто подобное: всем известно, что вышла игра StarCraft 2 компании Blizzard. Об этой игре ходят легенды. Но не дожидаясь когда вам удастся засесть за игру, а также для того, чтобы пополнить свои навыки и умения попробуем вообразить себя "крутым дизайнером" (прямо как из Blizzard) и попробовать создать модель и текстуру для коммандного центра из StarCraft 2.  
     
 

Часть 3

Следующая часть нашего урока - это создание стойки (support). Всего их будет 4. Однако для создания достаточно и одной. Остальные мы получим путем создания копий созданной стойки операцией клонирования.

 
     
  Как можно заметить готовая стойка (которую Вы вскоре создадите) включает два элемента в основе которых лежит примитив цилиндр.  
     
  готовая стойка для Коммандного Центра  
     
  Поэтому - создадим цилиндр. Радиус 0,5 единиц, Высота 0,1, Количество сегментов по высоте - 1, в основании (cap) - 1, количество сторон (Sides) - 8;  
     
 

Размеры даны в относительных единицах (в качестве них могут быть метры, дюймы или другие допустимые единицы - в зависимости от того какая система единиц измерения у Вас установлена - Customize > Units Setup). Количество сегментов (сторон) следует выбирать опытным путем исходя из того, как Вы будете далее видоизменять созданный примитив.

В нашем случае стойка должна иметь 8-ми гранную форму и 4 выступающих ножки. Исходя из этого мы и выбрали количество сторон примитива равным 8.

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

 
     
  будущая стойка - а пока - сплюснутый цилиндр  
     
  Щелчком правой кнопки мыши в окне стека модификаиций преобразуем объект в editable mesh. Используя технологию выдавливаний, которую Вы уже применяли при создании основания Коммандного Центра, формируем основу стойки -  
     
   
     
   
     
   
     
  На рисунках выше показано как последовательно нужно производить выдавливания со скосами (Bevel) для придания нужной формы.  
     
  Следующий этап - выдавливание 4 маленьких ножек и формирование держателя к которому будет крепиться второй видоизмененный цилиндр опоры. Тут будет одна маленькая особенность - дело в том, что опоры должны располагаться относительно основания коммандного центра повернутыми относительно своего первоночального положения на 23,5 градуса. Вам нужно путем выбора инструмента Select And Rotate повернуть заготовку будущей опоры на этот угол относительно оси Z.  
     
  Выберите весь объект в целом (editable mesh) в стеке модификаций и поверните на нужный угол.  
     
   
     
  Теперь, прежде чем выдавливать ножки, нужно сформировать в верхней части стойки грань. Мы выполним это путем надреза -  
     
   
     
  Сначала выберите в стеке модификаций пункт Edge или Face. Чтобы легче было выполнять надрез (создание нового ребра на поверхности грани или полигона) на панели инструментов включите 3-х мерное выравнивание. Нажмите кнопку Cut в группе Edit Geometry окна параметров editable poly. Обратите внимание в каком месте нужно выполнять надрезы, иначе держатель получится в неверном положении.  
     
   
     
  Аналогично выполните второй надрез. После этого отожмите кнопки Cut и Snaps Toggle (3-х мерную привязку).  
     
  Теперь дело за малым - выдавить держатель и 4 ножки -  
     
   
     
   
     
   
     
  На какое примерно расстояние выполнять сдвиг грани для формирования держателя? Можете ориентироваться на готовую модель опоры или подогнать по месту позднее.  
     
   
     
   
     
  Теперь создаем второй цилиндр - он будет играть роль промежуточного звена в прикреплении опоры к основанию Коммандного центра -  
     
   
     
  Для создания можете использовать следующие предварительные размеры - Radius = 0,2 Height = 0,4 Height segments = 1 Cap segments = 1 Sides = 8  
     
  Теперь Вам нужно выполнить 2 вращения - на 90 градусов по оси Y и на 45 по оси Z и разместить цилиндр в нужном месте опоры.  
     
   
     
   
     
   
     
   
     
   
     
  После проделанных манипуляций мы получим цилиндр лежащий на держателе ребром -  
     
   
     
  Казалось бы, достаточно повернуть его вокруг своей оси на нужный угол (-23,5 градуса) и уложить точно на держатель.  
     
   
     
  Но не тут то было. Все наши попытки привести к правильному повороту не приводят к оному. Почему? Да потому что мы повернули локальную систему координат относительно глобальной. Решением является выбор локальной системы координат объекта, относительно которой получится сделать задуманное -  
     
   
     
  Теперь остается только подобрать нужные размеры, преобразовать цилиндр в editable mesh и выполнить выдавливание нужной формы.  
     
  Думаю с этим Вы справитесь самостоятельно.  
     
  Теперь остается только сгруппировать или связать два элемента формирующие единую опору, чтобы они не "рассыпались" при дальнейших манипуляциях. Лучше конечно использовать связывание (Link), т.к. оно поддерживается форматом X.  
     
  Для выполнения связывания выберите связываемый объект (звено опоры), используя инструмент Select And Link протащите курсор к родительскому (корневому) объекту - опоре.  
     
   
     
  Связывание завершено. Теперь при перемещениях опоры звено опоры двигается совместно. О связывании подробно рассказывалось в уроке посвященном 3D-анимации .  
     
  Теперь Вам остается разместить опору в нужном месте основания базы -  
     
   
     
  Теперь если выполнять перемещения или вращения с нажатой клавишей [Shift] можно создать копии опор и разместить их в нужных местах. Только имейте в виду, что для клонирования нужно выбрать и опору и звено!  
     
   
     
   
     
   
     
  Корректируем положение созданной опопы, а после выделяем все элементы обоих полученных опор и с нажатой клавишей [Shift] поворачиваем на 90 градусов по оси Z в глобальной (view или world) системе координат.  
     
   
     
  [назад] [далее мы создадим элементы крыши]  
     
подробнее

     
     
  Добро пожаловать в систему управления сайтом megainformatic cms !  
     
  [к содержанию] [назад] [далее]  
     
 

7)  Создание шаблонов

 
     
 

В предыдущих уроках мы уже рассмотрели основы того, как можно подойти к созданию вашего сайта. Принципиально эти шаги являются универсальными и подойдут вам в применении к любой cms, потому что принципы использования html, css и php во всех системах подобны.

Главным отличием megainformatic cms является независимость и снятие многих ограничений на внедрение дополнительных модулей. Однако цена этому - крайняя минимализация и упрощение функционала.

 
     
  Рассмотрим каким образом можно с одной стороны немного усложнить систему, а с другой - получить некоторый набор новых возможностей.  
     
  Основная задача - это то, чтобы все страницы сайта выглядели в едином стиле, включая страницы модулей - поиск по сайту (search.php), карта сайта (map.php), модули обработки заказов (after_buy.php, after_pay_kind.php, buyer_data.php, accept_order.php).  
     
 

Казалось бы - самым простым способом является взятие необходимого кода из index.php и вставка в эти файлы. В принципе да, но не совсем так.

Если мы просто возьмем сейчас тот код, который уже есть в index.php и скопируем его и вставим в код этих модулей (еще не забудьте про соответствующие изменения), то в дальнейшем нам придется при изменении оформления - при использовании нового шаблона - вручную обновлять код html и css и во всех модулях, в который мы его вставим.

А как же сделать лучше тогда ? Спросите вы.

Воспользуемся опытом, который можно позаимствовать из других CMS. Мы конечно возьмём самый простейший вариант. И вот как он выглядит:

 
     
 

1) Сейчас у нас есть index.php, который содержит html, css код оформления нашего сайта, а также необходимый php код отвечающий за вывод контента и подключение других модулей; Модули которые я перечислил выше оформления не содержат вообще - только необходимый минимум php кода для обеспечения своей функциональности;

2) Шаг первый - мы должны разбить код файла index.php на 4 логические части -

header.php, menu.php, content.php, footer.php

эти файлы мы поместим в отдельную папку blocks

в файл header.php пойдёт весь код начиная от начала файла index.php и до строки

<div id="top"><a href="http://www.megainformatic.ru"><img src="images/skin/top.jpg" alt="создание игр, уроки, создание сайтов" width="800" height="111" border="0"></a></div>

включительно

 
     
 

в файл menu.php пойдёт весь код между строками -

<!-- ====== MENU ========= -->

<!-- ====== MENU ========= -->

 
     
 

в файл content.php нужно вставить код между строками -

начиная со строки следующей сразу же за блоком меню

<div id="infoleft">

и до второго появления строки

<!-- =============/ CONTENT ================ --> включительно !

оставшийся код пойдёт в файл footer.php

 
     
 

после того как эти файлы будут созданы, вам останется изменить код файла index.php на следующий -

 

 
     
 

<?php

/* =================================================================

megainformatic cms 16.01.2011

http://www.megainformatic.ru

Автор: Синицин Андрей Сергеевич (megainformatic)


***************************

данный файл является главной частью вашего сайта - он содержит ссылки на все остальные блоки,
отвечающие за формирование - заголовочной части (header), меню (menu), основного
информационного блока - контент (content), нижней части страницы (footer).

===================================================================
*/

include "blocks/header.php";
include "blocks/menu.php";
include "blocks/content.php";
include "blocks/footer.php";

?>

 
     
 

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

Каким образом ? А по аналогии с тем, что мы сотворили с index.php - мы разбили весь его код на 4 независимые части, которые теперь отвечают за формирование - заголовочной части шаблона сайта (header), блока меню (menu), контента (content), нижней части страницы (footer).

Значит чтобы превратить например модуль map.php в оформленный по шаблону мы вставляем в его начало следующий код

 
     
 

<?php

/* ==================================================================

megainformatic cms 16.01.2011

http://www.megainformatic.ru

Автор: Синицин Андрей Сергеевич (megainformatic)


***************************

модуль формирования карты сайта map.php

==================================================================
*/

$pagetitle_overloaded = "Мега Информатик - Карта сайта"; /*данная переменная определяет новый заголовок для страницы, иначе он берется из модуля header.php */

include "blocks/header.php";
include "blocks/menu.php";

 

?>

 
     
  Созданную карту сайта надо выводить в блоке контент (content.php), но поскольку этот блок по-умолчанию отвечает за вывод статей сайта, то мы его не можем взять, требуется его переделка и тут можно поступить двояко - либо создать видоизмененный файл content.php, назвав его как то по-другому и подключив директивой include, либо просто взять весь код оттуда и внеся изменения добавить в модуль map.php, мы так и поступим - вот что надо взять из модуля content.php -  
     
 

<div id="infoleft">

<div id="infoleft_content" align="justify">
<font color="#0000FF" size="2" face="Verdana, Arial, Helvetica, sans-serif">Сегодня</font>
<?php
$mounth = date("n");
$day = date("j");
$year = date("Y");
$time = date("G:i ");
$mounth_ru = "";
switch ( $mounth )
{
case 1: {
$mounth_ru = "января";
break;
}

case 2: {
$mounth_ru = "февраля";
break;
}

case 3: {
$mounth_ru = "марта";
break;
}

case 4: {
$mounth_ru = "апреля";
break;
}

case 5: {
$mounth_ru = "мая";
break;
}

case 6: {
$mounth_ru = "июня";
break;
}

case 7: {
$mounth_ru = "июля";
break;
}

case 8: {
$mounth_ru = "августа";
break;
}

case 9: {
$mounth_ru = "сентября";
break;
}

case 10: {
$mounth_ru = "октября";
break;
}

case 11: {
$mounth_ru = "ноября";
break;
}

case 12: {
$mounth_ru = "декабря";
break;
}

}
echo "<font color=\"#0000FF\" size=\"2\" face=\"Verdana, Arial, Helvetica, sans-serif\"> $day $mounth_ru $year года $time </font><br>";
?>
Здравствуйте!
Вы попали на исследовательско-креативный сайт Мега Информатик. Наша цель
- создание, накопление и популяризация знаний в области создания компьютерных
игр, а также собственно создание игр.

</div>

</div>

<div id="inforight">

<div id="inforight_content" align="justify">
Мега Информатик функционирует с 20 февраля 2006 года, когда был создан первый
сайт на хостинге pochta.ru. Много воды утекло с тех пор. Уже нет хостинга
boom.ru, на котором также размещался сайт, хостинг pochta.ru объединился
с qip.ru. Много событий произошло и в жизни самого сайта. О самых последних
новостях Вы сейчас и узнаете.
</div>

</div>



<!-- ====== CONTENT ================= -->

<div id="content-container" align="justify">

<div id="content">

 
     
  далее вставляем код, который непосредственно отвечает за оформление и вывод карты сайта  
     
 

<table width="85%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
<td><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">Карта
Сайта megainformatic.ru</font></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<?php
include "config.php";

$pageid = 1;
$pagetitle = "сайт Мега Информатик - Новости";
//for ( $pageid = 1; $pageid <= 62; $pageid++ )
while ( $pagetitle != "" )
{
$pagetitle = "сайт Мега Информатик - Новости";

if ($rc = mysql_connect($dbhost, $dbuser, $dbpassw))
{
mysql_select_db($dbsite);
$table = "papers";

$sql = "SELECT * FROM $table WHERE pageid = '$pageid'";
$s = mysql_query($sql);

$a = mysql_fetch_array($s);
$pagetitle = $a[pagetitle];


if ($pagetitle == "" )
{
$pageid = 2;
$pagetitle = "сайт Мега Информатик - Новости";
break;
}

mysql_free_result($s);
}

echo "<tr>
<td>&nbsp;</td>
<td><p><a href=\"index.php?page=".$pageid."\"><font size='2'

face='Verdana, Arial, Helvetica, sans-serif'>".$pagetitle."</font></a></p></td>
<td>&nbsp;</td>
</tr>
";
$pageid++;
}

?>

</table>

</div>

</div>

<!-- =============/ CONTENT ================ -->

 
     
  и как обычно подключаем вывод нижней части страницы -  
     
  <?php
include "blocks/footer.php";
?>
 
     
  Другие модули оформить по шаблону можно аналогично.  
     
 

В следующих наших уроках нас ждут обновления системы на тему -

- переключение шаблонов через админку сайта, новый вариант системы шаблонов;

- отслеживание в админке списка статей, проектов, пользователей;

 
  [к содержанию] [назад] [далее]  
подробнее

     
  [к содержанию] [назад] [далее]  
     
 

Рисование персонажей (урок 6)

 

Рисование и придумывание персонажей очень интересное и увлекательное дело. Вам понадобятся сведения из предыдущих уроков, если Вы еще новичек. Что нужно для того, чтобы нарисовать вот такую картинку:

Приступим к решению этой задачи средствами программы Corel Draw (CD).

Замечание: в данном уроке содержатся сведения ориентированные на Corel Draw 11, но общие принципы создания подобны для любых версий!

1.    Запустите программу Corel Draw и создайте новое изображение File > New. Заметим, что по умолчанию, при запуске выводится окно в котором можно сразу же выбрать создание нового изображения.

2.    По умолчанию размер Вашего изображения – формат A4, т.е. 297х210 мм. Попробуем задать иной размер, например, пусть мы рисуем заставку 1024х768 пиксель. На панели свойств (Property bar) выберите единицы измерения pixels (пиксели):

 

3.    В полях Papers width and height задайте требуемый размер: 1024 х 768

 

4.    Ваш лист станет нужного размера. Приступим к созданию персонажа, расположенного на переднем плане. Тело персонажа представлено совокупностью из нескольких эллипсов. Для создания эллипса на панели инструментов (Tool bar) нажмите кнопку Ellipse tool:

 

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

 

6.    Поскольку объекты в CD легко масштабируемы (так как представляют из себя векторные изображения), то сожмите полученный Вами эллипс для создания тела персонажа похожего на образец.

 

7.    Не совсем удобно делать это с выбранным инструментом Эллипс. Просто может получиться еще один эллипс, а этого нам пока еще не надо. Вместо инструмента Эллипс выберите инструмент Выбор (Pick tool)

 

8.    Используя этот инструмент Вы можете простым щелчком выбирать векторные объекты из которых и строятся все изображения в CD. Наведите курсор на контур созданного Вами эллипса и щелкните мышью.

 

9.    Вы заметите, что по периметру появились маленькие черные квадратики. Это захваты для масштабирования объекта. Наведя курсор на один из этих захватов сожмите эллипс.

 

10.          Нарисуйте еще эллипсы и разместите их слегка с перекрытием:

 

11.          Сплавим полученные фигуры в единый цельный объект, для этого инструментом Выбор обведите курсором вокруг созданных объектов тем самым выделив их все и используйте команду: Arrange > Shaping > Weld.

12.          Используем для объекта текстурную заливку, обратите внимание, объект должен быть выделен, иначе выводится окно предлагающее изменить данное свойство для всех вновь создаваемых объектов. Наведите курсор мыши на инструмент Fill Tool и нажмите маленькую черную стрелку в правом нижнем углу кнопки инструмента. Появится выбор разных инструментов этой группы

 

13.          В открывшемся диалоговом окне выберите группу Sample 5 и текстуру Curved spaces. Нажмите ОК.

14.          Вы получите тело персонажа. Вид текстуры можно видоизменить. Для этого сначала Вам понадобится отобразить окно так называемого причаливающего (Docker) типа для свойств объекта: щелкните правой кнопкой по объекту тела персонажа и выберите пункт Properties. В правой части окна программы откроется соотвествующее причаливающее окно:

 

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

 

16.          Используя кнопку Edit в данном окне можно видоизменять текстуру воздействуя на параметры алгоритма создающего изображение текстуры. Для начала попробуйте нажимать кнопку Preview (см. рисунок после шага 12). Каждый раз генерируется новый образец со случайно заданными параметрами. Если самостоятельно изменить какие-либо параметры и нажать Preview, то при создании текстуры будут использованы заданные параметры.

17.          Попробуем изменить теперь толщину и цвет обводки объекта тела персонажа. В окне свойств объекта выберите вкладку перо (Outline). В данном окне измените толщину и цвет линии обводки (абриса) контура.

 

Тело персонажа готово. Используя снова инструмент Эллипс создайте персонажу глаза.

 

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

 

Затем Вы выделяете обе фигуры и производите операцию логического вычитания: Arrange > Shaping > Back Minus Front (или Front Minus Back). Отличие заключается в том, какая фигура расположена поверх другой (Front), т.е. на переднем плане или (Back) на заднем плане.

 

Положение любого объекта по глубине (Передний план, Задний план и т.п.) можно задавать командой: щелчок ПРАВОЙ кнопкой мыши по центру (крестик) объекта и выбор Order (Порядок) > и соответствующая команда (To Front, To Back …).

 

Полученный объект можно масштабировать, раскрашивать, вообщем использовать в качестве бровей и рта персонажа. Для того, чтобы дублировать объект дабы не повторять проделанное заново просто Edit > Duplicate – дублируйте объект и получите второй. Заливка сплошным цветом – Fill Color Dialog на панели инструментов или кнопка Uniform fill на вкладке Fill окна свойств объекта (Property docker).

 

Персонаж готов.

 
     
  [к содержанию] [назад] [далее]  
     
     
подробнее

     
  Создание своих Тем для WordPress  
     
  Введение  
     
 

Начнём с того, что, как мне кажется, будет вам интересно узнать из области сайтостроения.

Итак, даже если у Вас есть собственная CMS (самописная, как говорят), то всегда полезно знать, как устроены профессиональные CMS. Их великое множество - Joomla, Drupal, ModX, Dle, WordPress и т. д.

Стоит ли осваивать их все или достаточно выбрать какую то одну и прорабатывать её ?

Если Вы новичок в сайтостроении, каким был совсем недавно и я, то лучше для начала остановить свой выбор на чём-то одном, и заняться его изучением.

На данном этапе я хотел бы познакомиться с созданием простого шаблона для CMS WordPress. Собственно этим мы сейчас и займёмся.

 
     
 

Для начала конечно вам необходимо установить denver и wordpress.

Ну а далее - вы займётесь собственно изучением данного урока.

 
     
 

Предположим, что Вы установили wordpress локально на свой компьютер в следующую папку -

C:\WebServers\home\localhost\www\wordpress_ru

 
     
  Если заглянуть в папку установленного wordpress, то там вы найдёте такой путь - wp-content\themes  
     
  Это и есть папка, внутри которой Вы можете размещать собственные шаблоны сайтов для WordPress. В WordPress они именуются Темами.  
     
 

Так что же нужно для того, чтобы создать собственную тему для WordPress ?

А нужно нам следующее:

 
     
  внутри папки themes создаем папку, например, mytheme  
     
 

Открываем эту созданную папку и внутри неё создаем такие файлы -

index.php

header.php

sidebar.php

footer.php

style.css

loop.php

functions.php

 
     
  Кроме того создайте здесь папку images, в которую будете помещать изображения, необходимые для оформления внешнего вида вашей темы.  
     
  Далее, вооружившись каким либо редактором, например, DreamWeaver или даже обычным Блокнотом добавляем в наши файлы следующий код  
     
  В файл index.php  
     
 

<?php
/**
* Главный файл шаблона темы
*
* Это изменяемый файл шаблона для темы WordPress
* и один из 2 обязательных файлов для темы (второй - это style.css).

* Используется для отображения страницы, в том случае, когда
* неопределены другие дополнительные варианты
* т. е., он совмещает вывод главной страницы, когда нет файла home.php.
* Более подробно: http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage MyTheme
* @since MyTheme 1.0
*/

get_header(); ?>

<div id="container">
<div id="content" role="main">

<?php
/* Запуск цикла вывода постов блога.
* Если нужно переопределить данную возможность в дочерней теме тогда

* включите в папку новой темы файл loop-index.php для использования особенностей, описанных в нём.
*/

get_template_part( 'loop', 'index' );
?>
</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 
     
  В файл style.css мы добавим такой код  
     
  style.css  
     
  Файлы loop.php и functions.php также можете взять в готовом виде -  
     
  loop.php  
     
  functions.php  
     
  В файл header.php  
     
 

<?php
/**
* Заголовок (Header) для нашей темы.
*
* Отображает содержимое секции <head> и всё до блока <div id="main">
*
* @package WordPress
* @subpackage MyTheme
* @since MyTheme 1.0
*/

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Выводим тег <title> в зависимости от содержимого страницы.
*/

global $page, $paged;

wp_title( '|', true, 'right' );

// Имя нашего сайта (блога).
bloginfo( 'name' );

// Добавляем описание для домашней/начальной страницы.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";

// Если нужно - добавляем номер страницы:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* Мы добавим немного JavaScript на страницы с комментариями для
* формирования поддержки сайтов с подпроцессными (threaded) комментариями (когда они используются).
*/

if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );

/* Всегда ставим вызов wp_head() до закрытия тега </head>
* вашей темы, либо вы нарушите подключаемость многих плагинов (plugins), которые обычно используют этот обработчик (hook)
* для добавления элементов в <head> таких как
* стили (styles), скрипты (scripts), и мета теги (meta tags).
*/

wp_head();
?>
</head>

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

<?php
// Проверка условия, что это пост или страница, имеет сокращенное представление (thumbnail), либо располагается целиком
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
(
/* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
//Изображение в заголовке страницы
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
</div><!-- #branding -->

<div id="access" role="navigation">
<?php
/* Разрешить экранным ридерам (screen readers)/ текстовым браузерам (text browsers) пропустить отображение меню навигации и получить все равно корректный вариант отображения*/ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php
/* Наше навигационное меню. Если оно не заполнено, wp_nav_menu переключается к состоянию wp_page_menu. К меню применяется основная позиция из возможных. Если ничего не присвоено, используется меню с наименьшим ID*/ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->

<div id="main">

 
     
  В файл sidebar.php  
     
 

<?php
/**
* Сайдбар (Sidebar) включает области для основных и вторичных виджетов (widget).
*
* @package WordPress
* @subpackage MyTheme
* @since MyTheme 1.0
*/

?>

<div id="primary" class="widget-area" role="complementary">
<ul class="xoxo">

<?php
/* Когда мы вызываем функцию dynamic_sidebar(), она будет разделять
* виджеты на области для этих виджетов. Если вместо этого функция возвратит false,
* тогда sidebar просто не существует, поэтому будет отображен
* сайдбар с содержимым по умолчанию.
*/

if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>

<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>

<li id="archives" class="widget-container">
<h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>

<li id="meta" class="widget-container">
<h3 class="widget-title"><?php _e( 'Meta', 'twentyten' ); ?></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

<?php endif; // end primary widget area ?>
</ul>
</div><!-- #primary .widget-area -->

<?php
// A second sidebar for widgets, just because.
if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>

<div id="secondary" class="widget-area" role="complementary">
<ul class="xoxo">
<?php dynamic_sidebar( 'secondary-widget-area' ); ?>
</ul>
</div><!-- #secondary .widget-area -->

<?php endif; ?>

 
     
  В файл footer.php  
     
 

<?php
/**
* Шаблон для отображения подвала (footer).
*
* Содержит закрывающий блок id=main тег и весь контент
* после него. Вызывает sidebar-footer.php для нижележащих виджетов.
*
* @package WordPress
* @subpackage MyTheme
* @since MyTheme 1.0
*/

?>
</div><!-- #main -->

<div id="footer" role="contentinfo">
<div id="colophon">

<?php
/* Сайдбар в футере? Вы можете настроить
* ваш футер на 4 столбца виджетов.
*/

get_sidebar( 'footer' );
?>

<div id="site-info">
<a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</div><!-- #site-info -->

<div id="site-generator">
<?php do_action( 'twentyten_credits' ); ?>
<a href="<?php echo esc_url( __('http://wordpress.org/', 'twentyten') ); ?>"
title="<?php esc_attr_e('Semantic Personal Publishing Platform', 'twentyten'); ?>" rel="generator">
<?php printf( __('Proudly powered by %s.', 'twentyten'), 'WordPress' ); ?>
</a>
</div><!-- #site-generator -->

</div><!-- #colophon -->
</div><!-- #footer -->

</div><!-- #wrapper -->

<?php
/* Всегда используем функцию wp_footer() до закрывающего тега </body>
* вашей темы, иначе вы повредите многие плагины, которые
* обычно используют этот обработчик (hook) для обращения к JavaScript файлам.
*/

wp_footer();
?>
</body>
</html>

 
     
  Теперь Вам остается только активировать созданную тему через админку WordPress и увидеть результат !  
     
  В следующем нашем уроке мы разберем как создается меню навигации.  
     
Содержимое данной страницы доступно только зарегистрированным пользователям.



Пожалуйста войдите на сайт - Вход

или пройдите процедуру регистрации - Регистрация

megainformatic live chat
Начать беседу
X
 

Оставленные комментарии



fle game engine - движок для создания игр
fle game engine - движок для создания игр


Something: Unexplained 2 captive of desires / Нечто: Необъяснимое 2 в плену желаний
Костя Коробкин Комикс Коллекционное издание - 6 комиксов, 81 страница, 220 mp3 треков
megainformatic Размещение баннерной рекламы у нас
Время загрузки: 1,1551