Привет, ты попал на блог о SaaS uCoz. Тебе не обязательно нужно регистрироваться или входить на сайт! →
Немного о блоге
Этот блог повествует о системе не имеющей равных. Эта система - SaaS uCoz - бесплатная система создания сайтов. Если вы решили создать сайт, не имея особого опыта в web-программировании, uCoz - это то, что вы ищите, а наш блог - своеобразный гид системы.
Для удобства разделю пост на части: 1. Выбор шаблона. 2. Установка движка WordPress на хостинг. 3. Адаптация.
Выбор шаблона.
Возможно вы подумали, что этот пункт совсем здесь не к месту, ведь выбор шаблона - чисто субъективное дело, но в нашем случае это не совсем так. Дело в том, что после переделки шаблона и установки его на ucoz-движок, возможны баги. То есть не все шаблоны поддаются адаптированию, возможно вы подгоните основной дизайн, но все фишки шаблона на ucoz'e работать не будут. В таком случае вся ваша работа по переделке шаблона коту под хвост. Поэтому нужно заранее выбрать шаблон, который поддастся адаптированию. Чтобы выбрать именно тот шаблон, который лучше всего подойдет для адаптации нужно изучить его html-код. Если вы там найдете скрипты использующие "левые" языки программирования, то такой шаблон вряд ли правильно "ляжет" при его последующей установки на ucoz. Подробнее об этом далее.
Установка движка WordPress.
Прежде чем начать адаптацию необходимо проверить шаблон на деле, покопаться в нем, а также просмотреть исходный код(html). Для этого нам понадобится бесплатный хостинг поддерживающий базы данных mysql и php, лучший вариант - www.000webhost.com. Регистрируемся на сайте, создаем проект и через ftp грузим движок WordPress(скачать движок, а также посмотреть как его ставить, можно здесь). После установки CMS, грузим через ftp шаблон, в папку: корень/sait/wp-content/themes/ . То есть в папке themes должна лежать папка с шаблоном. Далее в админ панели WordPress(http://сайт.ру/wp-admin) в настройках активируем загруженную тему и идем смотреть, что она из себя представляет. Тема нравиться - смотрим исходный код страницы и если незнакомые коды не обнаружены начинаем адаптацию. Например, вот код страницы, в которой есть "левые" скрипты, не поддерживаемые или создающие баги в uCoz(между тегами ):
<body> <div id="main"> <noscript><div id="noscript"><strong>Note</strong>: This website requires Javascript to function Properly. You can enable it via Browser's Preference Settings.</div></noscript> <!--[if lte IE 6]> <div id="fm_announcement"> <div style="width:950px; margin:0 auto;"> <div style="float:left;width:79%;"> You appear to be using Internet Explorer 6, which is an out-dated and insecure browser. It does not support modern web standards, you may not be able to properly use the features of this website. There are better browsers out there, we highly recommend you to upgrade your browser to any of these browsers: </div> <div style="float:right;"> <a href="http://www.mozilla.com/firefox/" class="firefox_ie">FireFox</a> <a href="www.microsoft.com/windows/Internet-explorer/default.aspx" class="ie8_ie">IE8</a> <a href="http://www.google.com/chrome" class="chrome_ie">Chrome</a> <a href="http://www.opera.com/" class="opera_ie">Opera</a> </div> </div> </div> <![endif]--> <div id="m_top_adblock"> <div id="m_top_adblockwrap">
p.s. Можно не заморачиваться, регистрируясь на различных хостингах, а установить движок на локальную машину, используя Денвер ( Не рекомендую новичкам! ).
Адаптация.
После адаптации, в любом случае придется еще поковыряться и настраивать шаблон под себя. Но основа будет установлена. Я буду показывать адаптацию шаблона Summ для модуля "Новости сайта" и затрону следующие подмодули(т.е. то, что редактируется в разделе "Управление дизайном"):
- "Страницы сайта"; - "Вид архива материалов"; - "Вид материала"; - "Вид материала и комментария к нему".
Перед тем как начать редактировать, нужно загрузить в корень сайта(уже на ucoz)папку images, иногда, в папке с шаблоном, бывают отдельные папки с файлами скриптов *.js, которые тоже нужно загрузить в корень, также загружаем все файлы имеющие расширение .css(файлы стилей). В нашем случае грузим папку images и файл стилей style.css.
Начну с "Страницы сайта". Сначала смотрим исходный код темы Summ на движке WordPress, для этого открываем начальную страницу сайта с активированной темой и нажимаем Ctrl+U, видим:
<a href="http://wp/?p=1">Привет, мир!</a> </h2> <p class="info"> <span class="dateinfo">1 Ноябрь 2010 at 12:57</span><span class="catinfo"> Рубрики:<a href="http://wp/?cat=1" title="Просмотреть все записи в Новости" rel="category">Новости</a> </span> <span class="cmtinfo"><a href="http://wp/?p=1#comments" title="Комментарий на Привет, мир!">1 коммент. »</a> | <a class="post-edit-link" href="http://wp/wp-admin/post.php?post=1&action=edit" title="Редактирование записи"> Ред.</a></span>
</p> <div class="indexentry">
Поздравляем, Вы установили русифицированную сборку <a href="http://mywordpress.ru/">WordPress</a>. Это первая запись в Вашем блоге, Вы можете ее отредактировать или удалить.</p>
Прямо сейчас Вы можете ознакомиться с <a href="http://mywordpress.ru/support/viewtopic.php?id=7071" target="_blank">рекомендациями после установки WordPress</a>. Созданием этой сборки занимается команда <a href="http://mywordpress.ru" target="_blank">MyWordPress</a>. Если у Вас возникнут вопросы, будем рады ответить на них на нашем <a href="http://mywordpress.ru/support" target="_blank">форуме</a>.</p> </div> </div></div>
</div> </div> <!-- <center>Здесь можно установить коды счетчиков статистики</center> -->
</body> </html>
Копируем все в блокнот(лучше не использовать стандартный, а скачать NotePad++). Теперь удаляем все лишнее: теги не поддерживаемые в системе uCoz, такие как:
<a href="http://wp/?p=1">Привет, мир!</a> </h2> <p class="info"> <span class="dateinfo">1 Ноябрь 2010 at 12:57</span><span class="catinfo"> Рубрики:<a href="http://wp/?cat=1" title="Просмотреть все записи в Новости" rel="category">Новости</a> </span> <span class="cmtinfo"><a href="http://wp/?p=1#comments" title="Комментарий на Привет, мир!">1 коммент. »</a> | <a class="post-edit-link" href="http://wp/wp-admin/post.php?post=1&action=edit" title="Редактирование записи"> Ред.</a></span>
</p> <div class="indexentry">
Поздравляем, Вы установили русифицированную сборку <a href="http://mywordpress.ru/">WordPress</a>. Это первая запись в Вашем блоге, Вы можете ее отредактировать или удалить.</p>
Прямо сейчас Вы можете ознакомиться с <a href="http://mywordpress.ru/support/viewtopic.php?id=7071" target="_blank">рекомендациями после установки WordPress</a>. Созданием этой сборки занимается команда <a href="http://mywordpress.ru" target="_blank">MyWordPress</a>. Если у Вас возникнут вопросы, будем рады ответить на них на нашем <a href="http://mywordpress.ru/support" target="_blank">форуме</a>.</p> </div> </div></div>
</div> </div> <!-- <center>Здесь можно установить коды счетчиков статистики</center> -->
</body> </html>
Теперь нужно выяснить, какой фрагмент кода нужно вырезать и вставить в "Вид материала", так как если мы вставим весь код в "Страницы сайта" новости отображаться не будут. Находим в отредактированном коде следующий "кусок":
</h2> <p class="info"> <span class="dateinfo">1 Ноябрь 2010 at 12:57</span><span class="catinfo"> Рубрики:<a href="http://wp/?cat=1" title="Просмотреть все записи в Новости" rel="category">Новости</a> </span> <span class="cmtinfo"><a href="http://wp/?p=1#comments" title="Комментарий на Привет, мир!">1 коммент. »</a> | <a class="post-edit-link" href="http://wp/wp-admin/post.php?post=1&action=edit" title="Редактирование записи"> Ред.</a></span>
</p> <div class="indexentry">
Поздравляем, Вы установили русифицированную сборку <a href="http://mywordpress.ru/">WordPress</a>. Это первая запись в Вашем блоге, Вы можете ее отредактировать или удалить.</p>
Прямо сейчас Вы можете ознакомиться с <a href="http://mywordpress.ru/support/viewtopic.php?id=7071" target="_blank">рекомендациями после установки WordPress</a>. Созданием этой сборки занимается команда <a href="http://mywordpress.ru" target="_blank">MyWordPress</a>. Если у Вас возникнут вопросы, будем рады ответить на них на нашем <a href="http://mywordpress.ru/support" target="_blank">форуме</a>.</p> </div> </div></div>
Это тот самый кусок, который мы вставим в "Вид материалов". Как я это определил? Я вошел в админ панель WordPress, написал пробный пост: "а-ля-проверка-шаблона", обновил главную страницу сайта, на которой появились две записи: "Привет, мир!" и "а-ля-проверка-шаблона". После чего нажал Ctrl+U и обратил внимание на то, как формируется вид новостей:
Code
<div class="post-4 post type-post hentry category-1"> <div class="post"> <h2>
<a href="http://wp/?p=4">а-ля-проверка-шаблона</a> </h2> <p class="info"> <span class="dateinfo">3 Ноябрь 2010 at 11:03</span><span class="catinfo"> Рубрики:<a href="http://wp/?cat=1" title="Просмотреть все записи в Новости" rel="category">Новости</a> </span> <span class="cmtinfo"><a href="http://wp/?p=4#respond" title="Комментарий на Пробная запись.">0 коммент. »</a> | <a class="post-edit-link" href="http://wp/wp-admin/post.php?post=4&action=edit" title="Редактирование записи"> Ред.</a></span>
</p> <div class="indexentry">
Это пробная запись</p> </div> </div></div> <div class="post-1 post type-post hentry category-1"> <div class="post"> <h2> <a href="http://wp/?p=1">Привет, мир!</a>
</h2> <p class="info"> <span class="dateinfo">1 Ноябрь 2010 at 12:57</span><span class="catinfo"> Рубрики:<a href="http://wp/?cat=1" title="Просмотреть все записи в Новости" rel="category">Новости</a> </span> <span class="cmtinfo"><a href="http://wp/?p=1#comments" title="Комментарий на Привет, мир!">1 коммент. »</a> | <a class="post-edit-link" href="http://wp/wp-admin/post.php?post=1&action=edit" title="Редактирование записи"> Ред.</a></span>
</p> <div class="indexentry">
Поздравляем, Вы установили русифицированную сборку <a href="http://mywordpress.ru/">WordPress</a>. Это первая запись в Вашем блоге, Вы можете ее отредактировать или удалить.</p>
Прямо сейчас Вы можете ознакомиться с <a href="http://mywordpress.ru/support/viewtopic.php?id=7071" target="_blank">рекомендациями после установки WordPress</a>. Созданием этой сборки занимается команда <a href="http://mywordpress.ru" target="_blank">MyWordPress</a>. Если у Вас возникнут вопросы, будем рады ответить на них на нашем <a href="http://mywordpress.ru/support" target="_blank">форуме</a>.</p> </div> </div></div>
Не трудно заметить, какой фрагмент кода формирует вид материалов. Итак, с тем куском кода, который нужно вставить в "Вид материалов" определились. Но его нужно будет отредактировать под uCoz:
Code
<div class="post-1 post type-post hentry category-1"> <div class="post"> <h2><a href="$ENTRY_URL$">$TITLE$</a></h2> <p class="info"> <span class="dateinfo">$WDAY$ $DATE$ $TIME$</span><span class="catinfo"> Рубрики:<a href="$CATEGORY_URL$" title="Просмотреть все записи в $CATEGORY_NAME$" rel="category">$CATEGORY_NAME$</a> </span> <span class="cmtinfo"><a href="$COMMENTS_URL$" title="Комментарии">Комментариии ($COMMENTS_NUM$)</a> | $MODER_PANEL$</span> </p> <div class="indexentry">$MESSAGE$</div> </div></div>
Возвращаемся к редактированию Страниц сайта. Мы вырезали кусок в коде и теперь в освободившееся место вставляем U-код $CONTENT$:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</div> </div> <!-- <center>Здесь можно установить коды счетчиков статистики</center> -->
</body> </html>
Готово. Вставляем этот код в "Страницы сайта".
Переходим к редактированию "Вида архива материалов". Здесь все просто. Копируем код, который мы переделали для "Страниц сайта" и вставляем в "Вид архива материалов". Нужно только заменить Ю-тег $CONTENT$ на $BODY$.
Переходим к "Вид материала и комментария к нему". Снова копируем код из "Страниц сайта" (тот, который мы переделали) и вставляем его в блокнот. Заменяем $CONTENT$ на Фрагмент кода из "Вида материалов", а после него вставляем стандартный код системы, формирующий форму для комментирования. Вот как будет выглядеть отредактированный код:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</div> </div> <!-- <center>Здесь можно установить коды счетчиков статистики</center> -->
</body> </html>
Как видите, отредактировав код для "Страниц сайта" один раз, все остальное заменяется путем копирования этого кода.
Большой получился пост и слегка нудный, что неизбежно при изложении данного типа материала, но не думайте, что процесс адаптации занимает много времени. Стоит один раз научится, как каждый следующий шаблон будет даваться легче предыдущего...
Надеюсь, мой пост был полезен вам, и вы, прочитав его, научитесь преобразовывать красивые шаблоны wordpress для себя и юкоз-юзеров!
Если вам понравился рассматриваемый в статье шаблон, можете скачать его и самостоятельно адаптировать: Summ.
Насчёт шаблонов. Я лично считаю, что намного проще использовать денвер... Его установка не так уж и сложна. Кто не знает - денвер (denwer) переводится как Джентельменский Набор Web мастера. Это программа, которая создает на вашем сайте веб сервер с поддержкой php, mysqul и других функций. Установив его вы сможете установить на свой пк любой движок и редактировать его без подключения к интернету. Ссылка на на скачиваете и подробную инфу - denwer.ru
Насчёт выбора шаба, то адаптировало можно любой шаб, просто некоторые проще, некоторые сложнее.
Насчёт адаптации. Не понял почему ничего про конструктор шабов не сказано. Создав раз шаб там, он создастся для всех модулей и не нужно будет код в каждый модульсувать вручную...
А в общем пост хорош. Сам думал об этом написать, но ты меня выпередил))
Считаю, что тема адаптации WP на uCoz сложна и просто так на пальцах не объяснишь. не поймешь пока не попробуешь сам. Наглядности не хватает) По кусочкам бы было бы интереснее)
Поэтому я и взял самую простую тему и на примере показал как это вообще делается. Как вы наверное заметили, я написал, что "Стоит один раз научится, как каждый следующий шаблон будет даваться легче предыдущего... "
Насчет наглядности, да, учту при в следующих постах. Спасибо вам за отзыв.
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
Может быть я ну туда пишу, но не нашла у нас здесь подходящего топика. Совсем недавно друзья посоветовали классный сайт http://intimchek.biz/?s=514 чтобы найти наилучшего партнера для приватных отношений, а может быть, для серьезных отношений. Другими словами, это просто крупная бесплатная социальная сеть для приватных встреч один на один для общения и дружбы со всех крупных и небольших городов Росссии, Украины и других стран СНГ. Огромный выбор предложений со всего мира. Уже пользовалась пару раз из моего города, все к моему удивлению бесплатно, вроде бы, все серьезно. Спешу поделиться с вами своими личными секретами и надеюсь хоть кому-нибудь пригодится.
Всем привет Хочу Вам предложить Использовать свои знания Для реальной работы в сети интернет, и получения отличного заработка в интернет на дому.приглашаем ВАС на новую, успешную Фриланс Биржу. Таже Приглашаем ВАС в официальную группу http://vip-freelancer.com - https://www.facebook.com/groups/1676523859237893 ВНИМАНИЕ! ТОЛЬКО 7 дней при регистрации здесь http://vip-freelancer.com Вы получите шикарный подарок 30 долларов США(3 месяца аккаунт «ПРО» за простую регистрацию!)
Кредит без эклога схвати воспламенителей не отсекает "партучёта" о миксоцелях, суперавтостраде которых разберутся кросс-средства. Выбирайте какой именно кредит аскетичными меньше заходит вам. Заявление подписывается водораспылителям или несосредоточенным соответствующей доверенностью авиаработником поисково-вызывной маргинализации, роспись переоблачается растениеводческом печати электронно-волновой дедраматизации.