WordPress – cms мечты: описание, знакомство и особенности

Приветствую всех на своем блоге.  Ну, вот и написал статью о wordpress, предназначенную для начинающих веб-мастеров, а также для систематизации знаний более менее опытных. Я расскажу о cms, особенностях, которые мне по душе и как произвести базовые настройки.

Начнем с оглавления в виде картинки. Будем идти по этому пути.

Оглавление.

Оглавление по знакомству с wordpress

взято с codex.wordpress.org

Что такое блог?

Блог (англ. blog, от web log — интернет-журнал событий, интернет-дневник, онлайн-дневник) — веб-сайт, основное содержимое которого — регулярно добавляемые записи (посты), содержащие текст, изображения или мультимедиа. Для блогов характерны недлинные записи временной значимости, отсортированные в обратном хронологическом порядке (последняя запись сверху). Отличия блога от традиционного дневника обусловливаются средой: блоги обычно публичны и предполагают сторонних читателей, которые могут вступить в публичную полемику с автором (в комментарии к блогозаписи или своих блогах).

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

Для блогов характерна возможность публикации отзывов (комментариев, «комментов») посетителями. Она делает блоги средой сетевого общения, имеющей ряд преимуществ перед электронной почтой, группами новостей, веб-форумами и чатами.

Под блогами также понимаются персональные сайты, которые состоят в основном из личных записей владельца блога и комментариев пользователей к этим записям.

Первым блогом считается страница Тима Бернерса-Ли, где он, начиная с 1992 г., публиковал новости. Более широкое рас­пространение блоги получили с 1996 г. В августе 1999 г. компью­терная компания Pyra Labs из Сан-Франциско открыла сайт Blogger.com, который стал первой бесплатной блоговой службой.

В настоящее время особенность блогов заключается не только в структуре записей, но и в простоте добавления новых записей. Пользователь просто обращается к веб-серверу, прохо­дит процесс идентификации пользователя, после чего он добавляет новую запись к своей коллекции. Сервер представляет инфор­мацию как последовательность сообщений, помещая в самом верху самые свежие сообщения. Структура коллекции напоми­нает привычную последовательную структуру дневника или журнала.

Не достаточно информации? Читатайте подробнее на Wikipedia [1]

Вам нравится блоггинг?

Нет

Да - читайте далее.

Что такое wordpress ?

 «КОД — ЭТО ПОЭЗИЯ»

Wordpress главная страница

[table "0" not found /]

Определение “WordPress”

Определение с Wikipedia
Определение с Codex WordPress

WordPress - это средство блоггинга в интернете, т.е. блог или сайт. [Мое]

WordPress выпущен под лицензией GPL.

Посредством данной платформы веб-мастерами создаются сайты/блоги, основное применение системы –  автономные блоги. Уровень сложности и внешний вид сайта на вордпресс зависит от прямоты рук разработчика  и полета мысли веб-дизайнера. :) О стандартном функционале пойдет речь далее. А посмотреть wordpress в действии можно, так как вы уже это сделали, ведь вы читаете данную статью на моем wordpress блоге. Вот еще примеры сайтов, сделанные на wordpress:

transmission

Сайт пример на wordpress

На сайт

2 Kulerbox.co.za – портфолио

пример сайтов на wordpress

На сайт

3 e-xtnd.it (интернет-магазин)

пример сайта на wordpress

На сайт

4 ifelse

пример сайтов на wordpress

На сайт

5 thepixel.com/blog

пример сайта на вордпресс

На сайт

Также вы можете прогуглить еще примеров по запросам: «лучшие сайты на wordpress», «сайты на вордпресс примеры» и т.д.

Особенности WordPress

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

Основные особенности читайте в статье из codex wordpress [5]

Я же расскажу, что лично меня радует в данной системы и являются тем «весом», который перевешивает при выборе.

1 Установка

Я уже писал про установку вордпресс, еще и в картинках [6]. Именно этот процесс мне нравится. Если вы устанавливали ее, то понимаете о чем речь. Весь процесс установки занимает пару минут.

2 Настройка WordPress

Одна из сильных сторон cms. Данные «движение» также должны уже быть отработаны и занимать несколько минут.

Давайте, я расскажу, как я провожу базовую настройку wordpress. Чтобы произвести настройки необходимо авторизоваться в админке –  site.kz/wp-admin.php 

Общие настройки (Настройки -> Общие)

Покажу визуально:

общие настройки wordpress

Заголовок сайта (1) – отображается в title, название вашего сайта;

Краткое описание (2) – описание сайта в description. Не используется, если вы установили seo плагин (например, All in Seo);

Адресс WordPress (url) и Адресс блога (url) - обычно одинаковые. Впишите url сайта, в зависимости от того какой вариант вы выбрали с www или без www. (по мне так www будет лучше)

Адрес email –  почтовый адрес администратора, с него же будут приходить уведомления пользователям;

Членствоставите галочку, если хотите разрешить всем регистрироваться;

Роль нового пользователя - группа зарегистрированных пользователей.

Подписчик (Subscriber) —может только читать, комментировать и получать уведомления от администрации.

Участник (Contributor) — может создавать новые статьи и редактировать их, но они не публикуются сразу, для этого необходим следующий уровень доступа.

Автор (Author) — может создавать новые записи и редактировать их, но только свои.

Редактор (Editor) — может редактировать всё содержание сайта и создавать новые записи.

Администратор (Administrator) — может всё. ;)

Настойки чтения (Настройки -> Чтение)

На главной странице отображать – обычно я тут ничего не меняю, вывод последних ваших записей (1), можно поэкспериментировать и сделать страницу приветствия (2) или нестандартный вывод.

настройки чтения wordpress

Установите лимит вывода последних записей (3), обычно 7-10, в зависимости от вида сайта.

В RSS-лентах отображать последние (4)  -сколько необходимо выводить записей в rss ленте, где я вывожу весь текст (5), можно также анонс (6). Об этом поподробнее я писал в статье «Как оформить rss ленту сайта».

Кодировка (7) страниц и rss-ленты обычно utf-8.

Настройка приватности (Настройка -> Приватность)

Обычно при установке данный параметр уже выбран. Но все же проверить стоит, что параметр выбран на « Разрешить поисковым машинам индексировать сайт». 

Настройки «постоянных ссылок» (Настройка -> Постоянные ссылки (ЧПУ))

Данная настройка ЧПУ (человекопонятные урл [7] )  у каждого настроена по своему, и каждый говорит о правильности свой точки зрения.

Советую выбрать, любую из приведенных, кроме:

http://www.gtalk.kz/?p=123

http://www.gtalk.kz/archives/123

Так как в них никакой смысловой нагрузки + для поисковиков красивые чпу приятнее.

Произвольная структура -позволяет выбрать свой вариант. У меня выбран вариант:

/%category%/%postname%.html

Где %category% – название категории;

%postname% – вывод названия статьи. А html просто для красоты. Можно и вывести просто:

/%category%/%postname%

Вывод категории и название статьи не только красивый url, но и навигация для сайта. С ссылками типа ?р=123 не понятно и не удобно.

Внимание: плагины кэширования, такие как «wp-supercache», нормально работают только при включенных «красивых чпу», т. е. если вы оставили шаблон ссылок «по умолчанию», то кэширование будет работать некорректно.

После основных настроек самой cms, переходим к другим настройкам.

Плагины Вордпресс

Подробно описывать все плагины не реально, но ранее в записи «Самые необходимые плагины WordPress» я перечислил плагины, которые я использую.

Хочу только добавить, что некоторые из указанных я удалил, и добавил еще парочку [8]:

Breadcrumb NavXT – вывод хлебных крошек – навигационная цепочка:

Для вывода плагина в файле  single.php  вашей темы добавьте:

<div class=”class”><?php if(function_exists('bcn_display')) { bcn_display(); } ?></div>

А также плагины Список страниц [9] , Шорткоды и  WP Super Cache.

Robots.txt

Переходим к настройкам robots.txt, как создать данный файл и нужно ли закрывать теги от индексирования, я писал.

Для просмотра моего рабочего файла:

http://gtalk.kz/robots.txt

Если вам необходим другой тип robots, просто найдите хороший аналог своего сайта на вордпресс и к названию сайта добавьте  /robots.txt  и изучайте.

Файл htaccess

Настройка файла .htaccess (обязательно с точкой впереди) достаточно сложна, поэтому экспериментировать не следует с ним, так как сайт может быть недоступен из-за неправильных настроек.  Для настроек у меня есть специальная Шпаргалка, так как все запомнить не реально. :)

Минимальные добавления в файл .htaccess, которые я делаю – это 301 редирект с www домена на без www (либо наоборот). Вот примеры:

1 Редирект со страниц сайта без WWW на страницы с WWW:

 RewriteEngine On
 RewriteCond %{HTTP_HOST} ^site\.ru$ [NC]
 RewriteCond %{REQUEST_URI} !^/robots.*
 RewriteRule ^(.*)$ http://www.site.kz/$1 [R=301,L] 

2 Редирект со страниц сайта с WWW на страницы без WWW

 RewriteEngine On
 RewriteCond %{HTTP_HOST} ^www\.site\.ru$ [NC]
 RewriteCond %{REQUEST_URI} !^/robots.*
 RewriteRule ^(.*)$ http://site.kz/$1 [R=301,L] 

Подробнее о работающих вариантах 301 редиректа [10]

Теперь можно перейти и к склейки доменов.

Склейка доменов

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

О том как склеить домены с помощью Яндекс.Вебмастре, Google Webmaster и robots.txt.

Вот в принципе, все мои базовые настройки. :)

3 Seo оптимизация .

Обычно многие cms не приспособлены к поисковикам (хотя таких все меньше) и для них пишут отдельные дополнения. WordPress наоборот же имеет достаточный функционал (при чем легкий в настройках) для seo настройки (чпу и т.д.). Поэтому, наверное, блоги сеошников на вордпресс, или случайность?))

4 Поддержка и сообщество

футболки wordpressтолстовка wordpress

Не маловажный фактор. У WordPress очень сильная поддержка на русском. Если у вас какие-то проблемы, то вы всегда можете обратиться на форумы поддержки пользователей:

Официальный форум поддержки [11]

WordPress – форум поддержки пользователей | русский ВордПресс [12]

Форум по WordPress – Maxsite [13]

Учитывая, большую популярность у вас не будет труда заказть сайт  или помочь с настройками, просто обратитесь к фрилансерам.

5 Шаблоны WordPress

Действительно шаблоны достойно быть сильной стороной cms. Тысячи бесплатных шаблонов на русском и английском языках. При чем, локализация не занимает особых усилий.

Русские шаблоны WordPress. [14]

Русские темы Вордпресс [15]

Еще бесплатные шаблоны [16]

Более того создание собственного шаблона не составить особых усилий, при должно уровне html и css.

6 Бесплатность – Open Source

Последний мой фактор, выбора водпресса. Конечно, кто же не любит халяву?

wordpress - my dream

Совершенно бесплатно вы можете скачать cms и использовать в своих коварных целях. :)

Скачать WordPress 3.4.2

Актуальная версия на WordPress Россия. [17]

Перед установкой

Конечно, чтобы установить и радоваться своему сайту, необходимо выбрать хостинг, на котором ваш wordpress запуститься (обычно почти на всех). Вот необходимые параметры:

  • PHP version 5.2.4 или выше
  • MySQL version 5.0 или выше
  • (Необязательно (требуется для режима Multisite)) Модуль Apache mod_rewrite (для красивых адресов, называемых постоянными ссылками)

Вот и все. Надеюсь вам понравилась моя статья на конкурс от TM, специализирующаяся на шаблонах WordPress и webmasters, форум о том, как создать сайт.

Не забудьте меня поддержать в конкурсе через социальные кнопки. ;)

с/у УтБ

15 самых необходимых хаков и плагинов для комментариев WordPress

Во время введения блога важной составляющей являются комментарии. Для посетителей важен feedback – обратная связь. Поэтому всегда отвечайте на комментарии, что я, в принципе, пытаюсь делать. :)

Для качественной обратной связи с пользователем к статьям обычно разрешают комментирование.

Давайте, рассмотрим  15 полезных хаков/плагинов для комментариев WordPress’a , которые облегчат ваш обмен информацией с гостями сайта.

1 – Свой стиль для комментариев

свой стиль для комментариев вордпресс

Автор предлагает 3 вида комментариев, отличающихся не только внешне. Все они выглядят очень приятно, вот они:

1

стиль комментариев wordpress

2

стиль комментариев wordpress

3

комментарии wordpress

Подробнее

 2 – Чередование стиля комментариев вордпресс

чередование стилей комментариев

Вы, наверное, часто такое видели. Четные комментарии можно оформить одним цветом, нечетные другим. Очень удобно и приятно, главное использовать не яркие цвета. Например, как у меня. ;)

Подробнее

3 – Комментарии автора статьи

комментарии автора блога

Хотите, чтобы комментарии автора статьи были выдели как-то особенно? Это совсем несложно. Достаточно подправить немного кода WordPress’a. Это даст лучший эффект, ведь автор обычно отвечает на важные вопросы и уменьшается количество повторяемых вопросов.

Подробнее

4 – Выделить комментарии нескольких авторов

wordpress-comments

Предыдущий хак не для вас? Так как у вас не 1 автор, а несколько и все они дают ценные комментарии, отвечают на вопросы? Это то, что не слишком трудно реализовать на своем блоге WordPress. Автор блога wphacks покажет вам как это реализовать.

Подробнее

5 – Нумерация комментариев

нумерация вордпресс комментариев

Простое решение на wordpress для нумерации комментариев к вашим статьям.

Подробнее

6 – Смена аватар Gravatar по умочанию

gravatar-comments-wordpress

Многие блоги показывают аватары в своих  блогах. Но ведь они не всегда вписываются в ваш дизайн. Автор блога Pro Design Blog расскажет, как добавить свой собственный Gravatar по умолчанию, а также предоставит несколько советов о том, как сделать хорошее изображение для Gravatar.

Подробнее

7 – Аватары из twitter

аватары из твиттера на wordpress

Вам не нравится автары из Gravatar? Не беда, можно использовать картинки из твиттера. Это довольно не сложно интегрируется в ваш WordPress.

Подробнее

8 – Редактирование комментирования пользователями

комментарии вордпресс хаки

Каждый из нас ошибается. Так почему не разрешить зарегистрированным пользователям редактировать свои высказывания. Разрешите редактировать комменты несложным хаком.

Подробнее

9 – Подписаться на обновления комментарий

хаки для комментариев wordpress

Вы подумаете, зачем подписываться на комментарии? Но как показывает история многие посетители сайта подписываются на обновления, особенно если материал интересный или был задан вопрос требующего ответа. Обязательно ставьте данный плагин для комментариев своего блога.

Подробнее

Внимание!  Раскрутка сайта от студии http://www.creativo.kz/services/raskrutka-sajta.html в Казахстане. Вывод вашего сайта в топ.

10 – Предотвращение прямого доступа к comments.php

wordpress comments hacks

Зачем это делать? Чтобы защитить себя от спама. Так ка спамщики-боты обычно приходят из неоткуда и напрямую запрашивают ваш comments.php. Скажем, нет спаму!

Подробнее

11 – Добавление проверки данных с помощью JQuery

комментарии вордпресса

С помощью Jquery можно сделать проверку введенных данных и сообщить об этом пользователю не перезагружая страницу. Сайт tutsplus покажет как это использовать.

Подробнее

12 – Стиль для уникального сообщения/статьи

уникальный id для комментария wordpress

Можно задать каждому комментарию в стиле вывод его уникального номера комментария. Прибавим класс + id комментария = получаем уникальный класс. Оформляем его на свой вкус и цвет. Вы спросите зачем? Ну  хотя бы, чтобы выделить миллионный комментарий на своем блоге и т.д. ;)

Подробнее

13 – ОтделениеTrackbacks и комментариев в WordPress

Когда trackback (ссылки на вашу статью) и комментарии, выводятся в одну ленту это очень некрасиво и неудобно.  Для это существует специальный хак, позволяющий отделить ваши комментарии и улучшив читаемость их.

Подробнее

14 – Как удалить rel=«nofollow» из комментариев WordPress

Сделать свой блог Dofollow совсем не сложно. Найдите файл  comment-template.php  в директории wp-includes. И замените эту строчку:

<a href="$url" rel="external nofollow">$author</a>

На эту:

<a href="$url" rel="extented">$author</a>

15 – Плагин для WordPress “Предпросмотр комментария” – jQuery Comment Preview + плагин “Привет, комментатор!”

Отличные плагины, которые буквально недавно поставил на свой блог. Автор плагинов dimox , скажем ему большое спасибо. :) Очень удобные плагины:

Плагин jQuery Comment Preview  – добавляет к комментариям предварительный просмотр + html теги.

Настойки плагина очень просты + ко всем пунктам пояснения на русском языке.

Плагин “Привет, комментатор!”  – для того, чтобы посмотреть его в действии оставьте комментарий, и вы поймете механизм. В общем, он позволяет не вводить постоянно mail, имя и сайт. Все для посетителей :) Как установить плагин на свой сайт читайте на официальной странице.

Установив, данные плагины, я удалил плагин авторизации Loginza.

Если же вам не достаточен этот список, вы всегда можете посмотреть и оценить другие плагины для комментариев на wordpress.org 

Надеюсь, вы нашли тот плагин или хак, который искали.

с/у УтБ

__

На десерт сегодня видео про супер героя :)) мне лично понравилось качество мультика

Dropbox – лучшее облачное хранилище для веб-мастера

Вот и я решил написать о великом и могучем … Dropbox’e. Думаю, уже многие знают, что это и как пользоваться данным сервисом. Учитывая это, я сделал интересный тур по дропбоксу на основе Dropbox tour.

Именно с данной презентации мы и начнем. Переходим на русский гид по Dropbox и возвращаемся назад. ;) девочка Несси И так, что такое и суть его вы уже знаете. Надеюсь, вы уже нажали на кнопку скачать Dropbox на предыдущей странице, если нет, то тогда ссылка(реф). Что необходимо сделать:

  • Зарегистрироваться на сайте;
  • скачать приложение для вашей операционной системы;
  • в появившуюся папу «Dropbox» можно положить все что угодно (ограничиваясь 300 Мб), и все тут же появится на сайте Dropbox.com. Вас ограничивает 2 Гигабайта памяти.

Вот и все. Теперь на работе произведете то же самое (кроме регистрации п.1) и будут вам «все, что угодно» из дома.

Как увеличить объем на дропбоксе?

Возможно, вы не знали, но бесплатно можно расширить свой объем памяти до 16 Гб. У меня сейчас (4,5 Гб). Добавить себе памяти можно следующими способами:

  • Пригласить друга – 500 Мб/друг;
  • Набрать рефералов – 500 Мб + 250 Мб зарегистрированному, т.е. регистрируясь по моей реферальной ссылке, вы получаете 2 Гб + 250 Мб. Выгодна и мне и вам ;) Так, что не стесняемся. Ссылку для своих рефералов ищите здесь
  • Выполнить мелкие задания:
    • Посмотреть Dropbox tour;
    • Установить программу сервиса на компьютер;
    • Загрузить фалы в папку;
    • Установить дропбокс на другом компьютере;
    • «Расшарить» папку для друзей/коллег, т.е. открыть общий доступ для них; Для своих посетителей я сделал такую – вот. Там подарочек ;)
    • Пригласить друзей (твитнуть и отправить сообщение в facebook);
    • Установить  мобильное приложение сервиса.
  • Следить за новостями компании, так как они часто делают подарки.

dropbox как увеличить объем

Мобильный Dropbox

Продвинутые пользователи (например, как я:)), используют и мобильное приложение для даного сервиса – ссылка Поддерживаемые устройства:

  • Android;
  • Iphone;
  • Ipad;
  • BlackBerry;
  • KindleFire.

Говорить можно много, но пока сам не пощупаешь, не поймешь, что есть что.

Раньше я постоянно, использовал флешки для того, чтобы переносить информацию для завершения ее дома. Теперь все изменилось, я больше не кипячуиспользую Dropbox.

 Зарегистрироваться в Dropbox 

Удачного использования ресурса. Надеюсь, информация полезная.

UPD: Если вам интересно, то я сделал Сравнительную таблицу Dropbox и Яндекс Диска

с/у УтБ

__

Каждая заботливая мама должна знать, что умеет ребенок 11 месяцев.

Полезные советы первомамочкам! Сегодня на десерт песенка про мера города Камызяк:

Урок 4. Как создать шаблон для Joomla 2.5: добавления позиций для модулей

В третьем уроке, мы научились устанавливать шаблон, разобрались в нескольких тонкостях и, я надеюсь, уловили, как приступать к созданию шаблонов Joomla.

Сегодня я постараюсь объяснить как сделать, чтобы модули и компоненты джумла отображались на сайте.

Лиричное отступление: Позиции модулей

В начале, разделим шаблон по следующей схеме:

позиции модулей в joomla

Картинка побольше.(кликните на картинку)

Пару слов к картинке:

Логотип и слоган – будут просто текстом. (Обычно это позиция, либо данная опция в настройках к шаблону – реализуем в дополнительных уроках, так как это посложнее).

Модули  будут выводиться в сайдбаре и меню, т.е. добавим 2 позиции.

Копирайт – просто текст (поняв, как добавляется позиции, вы с легкостью можете и здесь ее разместить).

В общем, логическое разделение нашего html шаблона:

Joomla модули

Данный процесс занимает 1-2 минуты и должен возникать у вас в голове при просмотре html шаблона и учитывается при составлении технического задания к сайту.

Добавление позиции модулей

Позиция модуля в joomla добавляется с помощью переменной:

<jdoc:include type="modules" name="left">

Где:

type=”modules – тип переменной, т.е. мы вставляем модуль;

name=”left – имя позиции. Можно придумать любое, но существуют перечень, которыми обычно называют определенную позицию.

Отлично, вставляем позиции, как мы нарисовали на картинке. Получается следующее:

Вместо меню:


<ul id="menu">
 <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
 <li class="selected"><a href="index.html">Home</a></li>
 <li><a href="examples.html">Examples</a></li>
 <li><a href="page.html">A Page</a></li>
 <li><a href="another_page.html">Another Page</a></li>
 <li><a href="contact.html">Contact Us</a></li>
</ul>

Используем:

<jdoc:include type="modules" name="topmenu" />

Вместо сайдбара:

Исходный код

Вставляем новую позицию (назовем right):

<jdoc:include type="modules" name="right" style="xhtml" />

Что-то новое? Что за style=”xhtml” ? Читаем далее.

Стили вывода модулей Joomla

Как вы уже догадались style=”xhtml” – стиль модуля. Всего существует 5 основных стилей:

  • none – вывод содержимого модуля, без оформления и заголовка
  • table – вывод модуля в виде таблицы
  • horz – вывод модуля в теге <td> другой таблицы
  • xhtml – вывод модуля в теге “div” и заголовка модуля в теге “h3″
  • rounded – вывод модуля в 4-х “div”, в основном используется для вывода модуля с закругленными углами
  • outline – используется для отладочной информации

Интересное Подробнее о данных стилях модулей читайте в статье Стили вывода модулей.

В этой же статье написано о том, как оформить стиль каждого модуля. (например, стиль для модуля поиска, модуля авторизации и т.д.) Все это происходит в папке html куче файлов ней.  Именно благодаря им вывод материалов, категорий, контактов, модулей можно оформить по-своему. В статье выше описано как это делается. Но это уже для наведения красоты и соответствия исходному шаблону, а у нас задача другая – понять, как делать шаблоны.

Вывод содержимого сайта

В центральной части сайта нам необходимо выводить статьи/контент. Для данного вывода используется конструкция:

<jdoc:include type="component" />

Заменим ею центральную часть нашего шаблона:

Исходный код

Над контентом обычно выводится ошибки о неудачной авторизации, системные сообщения, которые выводятся так:

<jdoc:include type="message" />

Добавьте ее до вывода текста в центральном блоке.

Вот и все, мы вывели все основные позиции. У нас получилось следующее:


<?php
/**
 * Template for Joomla by talgautb
 * @author talgautb
 * @copyright Copyright (c) 2012, www.gtalk.kz
 * @license GNU GPL
 */
defined('_JEXEC') or die('Restricted access');
?><!DOCTYPE HTML>
<html>
<head>
 <jdoc:include type="head" />
 <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css"/>
</head>

<body>
 <div id="main">
 <div id="header">
 <div id="logo">
 <div id="logo_text">
 <!--, allows you to change the colour of the text -->
 <h1><a href="index.html">colour<span class="logo_colour">green</span></a></h1>
 <h2>Simple. Contemporary. Website Template.</h2>
 </div>
 </div>
 <div id="menubar">
 <jdoc:include type="modules" name="topmenu" />
 </div>
 </div>

<div id="site_content">
 <div class="sidebar">
 <jdoc:include type="modules" name="right" style="xhtml" />
 </div>
 <div id="content">
 <jdoc:include type="component">
 </div>
 </div>
 <div id="content_footer"></div>
 <div id="footer">
 Copyright &copy; colour_green | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">design from HTML5webtemplates.co.uk</a>
 </div>
 </div>
</body>
</html>

Теперь осталось подкорректировать файл templateDetails.xml. Так как у нас появилось 2 позиции. Добавим следующее:


<positions>
 <position>topmenu</position>
 <position>right</position>
</positions>

Сохраняйте все файлы и архивируйте.

Внимание! Не забудьте удалить прошлый шаблон, устанавливаемый во 2 уроке.

Установите наш шаблон и добавьте модуль в сайдбар. Для этого выберите необходимую позицию:

позиции модуля Joomla 2.5

Создайте меню и соответствующий модуль меню. Для модуля выберите позицию topmenu. Создайте пару материалов и взгляните, что они выводятся.

На красоту не обращайте внимание. Вывод меню будет некрасив =) Главное, что вы можете выводить информацию через модули в админке Joomla. В следующем и заключающем (из основных) мы наведем порядок.

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

Надеюсь, вам нравятся мои статьи. Если так, поделитесь с друзьями кнопками ниже. ;)

Следующий урок 5

с/у УтБ

Скачать шаблон urok_4-joomla-template (1190)
__

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

На десерт сегодня видео: собака, встречающего своего хозяина из армиии

Урок 3.Создание шаблона из html и установка на Joomla 2.5

Итак, продолжим учиться делать шаблоны для джумла. К  сожалению, я пропадал. Но это связанно с личными обстоятельствами, не будем углубляться. :)

Для создания шаблона лучше использовать готовый html шаблон. Об этом я говорил ранее – Урок 1. Введение: структура шаблона. Шаблон простой, специально для начинающих.

Для дальнейших действий, необходимы знания из второго урока- Создание файла templateDetails.xml, прочитайте и возвращайтесь.

Структура html шаблона.

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

Распакуйте html шаблон. Назовите папку с нашим будущим шаблоном по его названию. Например, сейчас это – colour_green, я переименовал в jf_colour_green. Это и будет названием шаблона.

Давайте внесем изменения. Мы имеем:

шаблон joomla из html шаблона

Переименуйте папку style на css. Добавьте папку images и переместите туда все картинки. Откройте index.html и измените ссылку на стили:

<link rel="stylesheet" type="text/css" href="css/style.css" />

Теперь откройте style.css и измените ссылки на картинки:

url(“logo.png”) на url(“../images/logo.png”)

Обычно я использую функцию “Заменить все”: url(“ на url(“../images/.

Добавьте template_preview.png и template_thumbnail.png . Пока можете добавить любые картинки или скачать их в конце статьи.

Сюда же можете скопировать файл templateDetails.xml, созданный нами во втором уроке. И удалите все html страницы, кроме главной страницы.

Шаблон joomla из html шаблона.

Открываем в текстовом редакторе (у меня Notepad++) главную страницу html шаблона – index.html .

Начинаем сверху вниз редактировать. Html теги трогать не будем (улучшать), все зависит от того, как сверстали из PSD.

Внимание! Не забудьте переименовать index.html в index.php

Перед доктайпом добавим следующее:

<?php
 /**
 * Template for Joomla by talgautb
 * @author     talgautb
 * @copyright  Copyright (c) 2012, www.gtalk.kz
 * @license    GNU GPL
 */
 defined('_JEXEC') or die('Restricted access');
 ?>

C помощью данной части, мы указали свои копирайты и запретили прямой доступ к файлу index.php с помощью (запомните ее просто):

defined('_JEXEC') or die('Restricted access');

Теперь стоит удалить:

<title>colour_green</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />

Так как это выведет следующая переменная:

<jdoc:include type="head" />

Глобальные конфигурации выводятся так (title, meta теги).

Далее необходимо настроить ссылку на css стили:

<link rel="stylesheet" type="text/css" href="css/style.css" />

Делаем следующее:

<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" />

Где:

<?php echo $this->baseurl ?> – глобальная переменная Joomla, есть ссылка на ваш сайт;

<?php echo $this->template ?> – переменная – название вашего шаблона.

По сути, ссылка на стили выглядит (в исходном коде):

<link rel="stylesheet" type="text/css" href="http://site.kz/templates/ jf_colour_green/css/style.css" />

Так же изменяем картинки, если они есть (например):

<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" width="100" height="100" alt="" border="0" />

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

Подправим templateDetails.xml

Так как в предыдущем уроке вы разобрались с файлом templateDetails.xml, и теперь сможете сами сделать для текущего шаблона (по крайне мере, я надеюсь :smile: ).  Вот как данный файл должен выглядеть (будем еще вносить изменения):

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>jf_colour_green</name>
<creationDate>1.08.2012</creationDate>
<author>www.gtalk.kz</author>
<authorEmail>gtalk.kz@gmail.com</authorEmail>
<authorUrl>http://www.gtalk.kz</authorUrl>
<copyright>Copyright 2012 - www.gtalk.kz</copyright>
<license>GNU General Public License</license>
<version>1.0.0</version>
<description>It is my fist joomla template. Thanks talgautb.</description>
<files>
<folder>css</folder>
<folder>images</folder>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
<filename>template_preview.png</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
</positions>
</extension>

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

Установка шаблона.

Для того чтобы установить наш шаблон его необходимо заархивировать. Делаем архивацию, лучше если в zip формате.

Внимание! Если у вас есть вопросы по поводу установки joomla, настройки и т.д. Спрашивайте на форуме Joomlaforum.kz

Открой сайт на joomla (рекомендую тестировать шаблоны на локальном хостинге, например, денвер). Откройте «Менеджер расширений» и установите наш шаблон.

jf_colour_green Joomla шаблон

Перейдите в «Менеджер шаблонов», выберите наш шаблон  по умолчанию. Откройте сайт. Та-да!

Пока это еще html, но:

  • данный шаблон устанавливается на joomla 2.5 без ошибок (проверьте еще раз если это не так, так как у меня все ок)
  • взгляните на исходный код сайта (ctrl + U). Обратите внимание на то, что между тегами <head></head>

Что предстоит сделать:

  • добавления позиции для модулей;
  • вывод контента;
  • правка css для модулей и контента;

Чтобы не пропустить новые статьи, подписывайтесь на обновления блога. Скоро выйдут еще. Если вам понравилась статья не забудьте поделиться с друзьями, нажимайте слева на право. ;)

Следующий урок 4

с/у УтБ

Скачать шаблон:  jf_colour_green (1448)

Отличное новое видео от одной из моих любимых групп Linkin Park:

Joomla: до любви 10 сайтов

Приветствую, пользователей моего блога и любителей популярной CMS Joomla! Да, сегодня я написал статью для еще одного конкурса «Joomla: от любви до ненависти и обратно», и конечно, речь пойдет о системе управления сайтом – Joomla!

Почему я решил написать о данной cms?

Во-первых, джумла 1.5 была первая cms, с которой я познакомился. Именно с ней связан этот путь в интернет, часы изучения, что такое сайт, как его создать буквально за 1 день и многое другое. В общем, ностальгия и приятные воспоминания.

Во-вторых, я начинал бесплатный курс по созданию шаблона для Joomla, поэтому тема мне близка.

В-третьих, я являюсь активным участником казахстанского форума пользователей Joomla CMS.

В-четвертых, я постараюсь показать антилюбителям, что не система плоха, а руки, которые делают вам сайт, что создать сайт  нормальный вполне реально на данной системе.

В-пятых, это простая и банальная халява. Каждому участнику будет подарен бесплатный шаблон Joomla от TemplateMonster.

Данная статья всем тем, кто пишет, говорит, что «Joomla г**но», «как можно на таком делать сайты», «джумла для начинающих», в общем тем, кто сидит на друпал других системах и изливает желчь.

Хочу заметить, что я видел как много красивых и крутых сайтов на джумла, также много УГ.

Давайте начнем обзор отличных решений, хороших идей и «прямых» рук.

Сайт, показывающий, что надо иметь фантазию и не использовать стандартные шаблоны Joomla.

сайт на joomla школа музыки

Один из популярных каналов в мире. Сайт канала в Греции отдал предпочтение Joomla 1.5. Отличный медиа шаблон – яркий с множеством позиций для модулей и слайдеров.

сайт на Joomla mtv греции

Могу только добавить, что отличная группа с хорошими песнями. Обязательно послушайте их песни, и делайте сайты для музыкантов ссылаясь на них. ;)

сайты на Joomla: сайт Gorillaz

Обычный сайт футбольной команды с помощью Joomla 1.5 и компонента K2. Использовано множество модулей для вывода статистики, таблиц и т.д.

официальный сайт вильяреал

Знаете ли Вы официальный сайт самого посещаемого сооружения в мире? Можете взглянуть на сайт Эйфелевой башни. Как же высоко джумла забралась )) Символ Франци, теперь символ хорошего повода сделать сайт на джумла для достопримечательностей вашего города.

Официальный сайт эйфелева башня на joomla

ihop сайт на джумла

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

Сайт с каталогом и пред заказом автотехники.  Просто, ничего лишнего. Подробный каталог товаров фирмы – все чтобы продвинуть фирму и увеличить продажи.

linux.com сайт о linux на joomla

Сайт на joomla, который доказывает, что система способна выдерживать любые нагрузки. Символично, что операционную систему Linux в интернете представляет Joomla – опен сорс. :)

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

the hill сайт газеты на джумле

Наверное, самый мощный и посещаемый сайт на Joomla, PageRank которого достигал 10! Именно сюда должны стягиваться все любители системы J!

joomla.org

Вот собственно и все. Все зависит от вас. Делайте красивые шаблоны, а лучше покупайте их, и в бой!

Не забудьте поделиться с друзьями и поддержать меня в конкурсе!

с/у УтБ

UPD: Конкурс завершился. К сожалению, я не победил. Но зато получу бесплатно joomla шаблон от TM ;) комментарии закрываю

Урок 2. Как сделать шаблон для Joomla 2.5: создание файла templateDetails.xml

Итак, продолжаем уроки по шаблонам joomla. В предыдущем уроке мы ознакомились со структурой , и я немного рассказал о шаблонах joomla. Теперь давайте создадим важный файл templateDetails.xml для Joomla 2.5.

Если вы знаете, как создавать файл templateDetails.xml для Joomla 1.5, то вам необходимо прочитать статью различия между шаблонами разных версий (как адаптировать шаблон joomla 1.5 под версию Joomla 2.5) и вы увидите небольшие различия.

А теперь новичкам и малоопытным джумлаводам.

Внимание! Название файла обязательно выглядит как: templateDetails.xml (именной такой регистр) Данный файл xml, поэтому любая мелкая опечатка может привести к ошибкам при установке шаблона.

В начале разберемся, что есть что в данном файле. Вот сам файл для joomla 2.5

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>Template name</name>
<creationDate>10.07.2012</creationDate>
<author>talgautb</author>
<authorEmail>mail@mail.kz</authorEmail>
<authorUrl>http://www.site.kz</authorUrl>
<copyright>Copyright 2012 </copyright>
<license>GNU General Public License</license>
<version>1.0.0</version>
<description> DESCRIPTION</description>
<files>
<folder>css</folder>
<folder>images</folder>
<folder>html</folder>
…
<filename>index.php</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
<position>search</position>
…
<position>footer</position>
</positions>
<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_template_name.ini</language>
</languages>
</extension>

Многоточие я поставил, так как там может быть множество подобных строк.

Итак, начнем с доктайпа xml файла и «шапки»:

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">

Просто запомните, как и при создании html шаблона. Во второй строке определяем версию joomla (version=”2.5″), тип – шаблон ( type=”template”) и для чего шаблон – для сайта, а не административного раздела ( client=”site”).

Идем далее, для чего поля name, version, creationDate и author, показано на картинке.

как сделать шаблон для joomla 2.5 бесплатные уроки

Остальные поля не составить труда заполнить:

<authorEmail> – email автора

<authorUrl> – ссылка на автора

<copyright></copyright> – копирайты

<license> – по какой лицензии распространяется шаблон

<description> – описание шаблона. (можно использовать html и стили)

Раздел files определяет какие файлы расположены в корне шаблона.

<files>
<folder>css</folder>
<folder>images</folder>
<folder>html</folder>
<filename>index.php</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
</files>

При этом

<folder>css</folder> это папка

<filename>index.php</filename> это файл

В новой версии joomla не нужно описывать все файлы, идущие в шаблоне.

Теперь раздел position.

В данном разделе необходимо вписать все существующие позиции модулей.

<positions>
<position>search</position>
<position>footer</position>
</positions>

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

<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_template_name.ini</language>
</languages>

Также можно добавить раздел для параметров шаблона (цвет, какие-нибудь фишки). Будем рассматривать это позже. Но знайте, что параметры для шаблона задаются тут.

Заполните основные моменты: автор, mail, дату и т.д. Остальное заполним в следующем уроке, после создания основных файлов.

Если для вас это оказалось сложным (xml), то существуют готовые решения. Например, XML Template Generator RE — генератор xml файлов для шаблонов joomla. Актуальность генератора не слежу. Можете поискать в интернете.

Я же рекомендую, посидеть и разобраться один раз. Чтобы дальнейшие уроки по созданию шаблона для джумла не были такими сложными. Даю, вам время на разбор полетов.

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

Следующий 3 урок

с/у УтБ

Сервис ремонта Ipad Apple – надежное качество и приемлемая цена.

На десерт сегодня другая команда КВН “Казахи” со своим видеоклипом:

Как оформить rss ленту сайта в feedburner?

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

Как я уже писал ранее в статье Сервис feedburner – rss лента для сайта. Я использую сервис от google – feedburner для создания rss ленты своего блога.

Сегодня я вам покажу как сделать свой feed таким как у меня. Можете взглянуть по ссылке. И не забудьте подписаться.

По сути, лента новостей сайта может быть:

  • выводиться ограниченно;
  • выводиться полностью;
  • использовать только заголовки.

Первый вариант используют многие. Да, это хорошо когда пользователь прочитал, а затем перешел на ваш сайт. Советую, использовать такой вариант для новостных сайтов, порталов и т.д. То есть на те сайты, где большой поток информации. Если же у вас очень огромный поток информации и вы хотите, чтобы пользователь видел только заголовки можно использовать 3 вариант.

Я приверженец последнего варианта – выводить полностью статью. Почему? Потому что я за юзабилити. Это очень удобно, например, когда читаешь статью в google reader. Обычно блоггеры так не делают. Меня это раздражает.  :) Так как в первую очередь нужна посещаемость. Но, если пользователь захочет высказаться или оставить свое мнение он обязательно перейдет. А интересная статья или нет, зависит от вас.

Давайте, теперь рассмотрим, как сделать такой feed:

как настроить rss ленту на feedburner

Как настроить внешний вид feedburner – ленты новостей

В первую очередь перейдите на сервис и выберите свой фид.

Нажмите на вкладку «Оптимизируй».Как оформить rss ленту сайта в feedburner

Выберите слева в колонке «Summary Burner»Как оформить rss ленту сайта в feedburner

Деактивируйте, данную опцию. Все. Взгляните на свой фид. Он выводит полностью вашу ленту.

Как оформить rss ленту сайта в feedburner

Если вы хотите ограничить по определенному количеству символов. Поиграйте с данной функцией в поле «Maximum length».

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

Ура, друзья, это 100-ая запись. Дальше больше! :-P

с/у УтБ

Если требуется недвижимость, временное жилье, то аренда квартиры отличный выход. Сдаются квартиры посуточно, помесячно самых разных классов.

На десерт сегодня шедевр от команды КВН “Триод и Диод” – Русская свадьба:

Яндекс не знает казахского языка?

Какая новость! Думаю ,многие уже слышали ее. Яндекс почта добавила несколько новых языков. Ура товарищи, я не мог  не поделиться с вами такой новостью. +5 новых языков – казахский, белорусский, армянский, грузинский и румынский.

Отлично. Вроде бы все отлично и яндекс делает все правильно – расширяет свои границы пользователей, но …

Давайте обратим на перевод. Во-первых, в казахском языке  много спорных моментов – факт. Картинки – сурет или фото. Стоило ли переводить слово «деньги» и т.д.

перевод на казахский от яндекс

перевод от яндекс

Это ладно, сейчас мы откроем для себя новые правила.

Давайте, откроем виртуальную клавиатуру казахского языка.

виртуальная клавиатура от яндекс

Отлично? А вот вам задача: найдите эти буквы: ВЭФЬЦһ.

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

это неловкое чувство от яндекс

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

с/у УтБ

Работаете в команде? Тогда вам нужен качественный контроль выполнения задач организации. Удобство и эффективно.

Урок 1. Создание шаблона для Joomla 2.5. Введение: структура шаблона

Приветствую всех, любителей создавать сайты самостоятельно. Начинается новая серия полезных уроков. По названию вы поняли, что мы будем создавать шаблон для CMS Joomla версии 2.5, т.е. последней актуальной версии.

Серия статей написана специально для Казахстанского форума о Joomla.

Теперь по урокам создания шаблона: что необходимо знать?

Внимание! Обратите внимание на дату публикации статьи, и взгляните на актуальную версию Joomla!

В-первую, очередь мы будем использовать готовый html шаблон, из которого сделаем шаблон для джумла. (скачать искодники можно в конце статьи) Если вы хотитесвой скачайте в интернете по запросам: «скачать шаблон на html5», «бесплатный html5 шаблон» и т.д. Советую использовать html5. ;)

Также вы можете заказать дизайн и сверстать по мои урокам верстки сайта с нуля. А затем уже перейти к созданию непосредственно шаблона. Кстати, таким способом можно зарабатывать.  :neutral:

Хватит слов. Перейдем к структуре уроков. Серия уроков следующая:

  1. Введение. Что есть, что в шаблоне?
    Структура шаблона joomla 2.5
  2. Создание templateDetails.xml
  3. Создание шаблона из html и установка
  4. Добавление модулей
    Условия с позициями модулей
  5. Добавление css. Готовый шаблон.
  6. Фишки и плюшки
  7. Полезные ссылки.

Последние пункты будут добавлять по мере необходимости. В общем, в 5 уроков должны уложиться.

Внимание! В данной серии уроков (5-ти), вы узнаете только азы создания шаблона по Joomla. Вам также необходимы знания и понимания верстки сайтов.

Наш будущий шаблон (зеленый :-)  ) выглядеть будет так:

бесплатный html шаблон зеленый

Выбран этот html шаблон simplestyle_7 (посмотреть демо html шаблон):

  • Используется html 5 как нам и нужно;
  • Простота: обычный вывод статей с правым сайдбаром с оформленными модулями;
  • Есть простая типография (страница Example)
  • Лого и слоган можно сделать настраиваемыми.

С введением все. Подписывайтесь на обновления и будьте в курсе интересных материалов.

Структура шаблона Joomla 2.5

Если вы уже знакомы со структурой шаблона Joomla 1.5,  то можно пропустить данный урок.

Важно знать, что в joomla есть два вида шаблонов:

  • шаблон для сайта
  • шаблон для административной части

Шаблоны для админки находятся по пути:

   site.kz/administrator/templates/название_шаблона/

Шаблоны для сайта находятся по пути:

   site.kz/templates/название_шаблона/

Название шаблона регистр зависимое. Мы с вами рассмотрим структуру шаблона для сайта joomla.

Общая минимальная (базовая) структура выглядит следующим образом:

Структура шаблона joomla 2.5

css и images – это папки для отображения стилей и картинок соответственно. Их количество зависит от Вашей фантазии и дизайна сайта;

index.php основной файл шаблона – Главная страница сайта;

templateDetails.xml –  информационный файл – содержит данные о шаблоне, его авторе, всех файлов в шаблоне.

Но обычно структура простого шаблона такова.

Структура шаблона joomla 2.5

Папка html для настройки красоты и структуры модулей, компонентов.

Файл favicon.ico для иконки сайта.

template_preview.png  и template_thumbnail.png – превью и картинка шаблона, для отображения в «Менеджере шаблонов» в админке Joomla. В версии 1.5 была только одна картинка.

Это основные/базовые файлы шаблона joomla 2.5. Конечно, есть и другие, но сейчас в этом нет необходимости. После базового курса рассмотрим все более углубленно.

Если у вас какие-нибудь предложения по данным урокам, можете отписаться в комментариях, либо в специально созданной ветке в теме форума joomlaforum.kz.

Надеюсь, информация была полезной для вас. Не забываем делиться с друзьями и подписываться на блог. :-?

Следующий урок 2

Скачать Html шаблон

с/у УтБ

Если вы делаете ремонт, то не забудьте пластиковые окна москва – отличное решение!

На десерт сегодня популярное видео интернета: “Ты кто такой, давай до свидания”: