Меню

Сайт своими руками джумла

Как сделать сайт самому на Joomla

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

Почему выбор пал именно на данную CMS? Создание сайта на Joomla – эффективное достижение гарантированного результата неограниченного уровня сложности, будь то функциональный интернет-магазин, несложная в исполнении визитка-портфолио или, например, новостной сайт.

Инструкция позволяет легко и быстро освоиться со всеми этапами создания от 0% до почти готового результата – требуется лишь минимальный уровень знания ПК и наличие некоторого количества свободного времени и усердия. А скриншот ниже – подстегнет желание! Именно это можно получить на выходе, если приложить чуточку старания.

Подготовка к установке Joomla

Как известно, самое сложное в любом деле – это начало. Однако «Джумла» радует крайней нетребовательностью: достаточно лишь раз выполнить описанную ниже последовательность действий — и данный этап больше не заставит вспоминать о себе, позволяя полностью сосредоточить внимание непосредственно на сайте, контенте, дизайне и продвижении!

В первую очередь, надо скачать joomla дистрибутив, который располагается по адресу (для joomla 2.5): http://joomla.ru/downloads/joomla

joomla download 110642b

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

Рекомендуется воспользоваться помощью поистине бесценной программы « Denwer », которая позволяет создавать локальный сервер и просматривать сайты исключительно в пределах вашего компьютера, благо установка занимает всего считанные минуты. Скачать Денвер можно с официального сайта: http://www.denwer.ru

denwer download 110647

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

denwer install 110926

Установка Joomla на локальный сервер

Скачали и установили все требуемые файлы? – Тогда переходим к столь долгожданному и самому интересному этапу обучения — к раскрытию ответа на волнующий вопрос, как сделать свой сайт бесплатно. Открываем папку « home » (по умолчанию C:WebServershome ) и создаем папку с названием сайта, например: « site.ru ». Внутри созданной папки создаём ещё одну, с именем « www » — и распаковываем туда скачанные исходники Joomla. Сравниваем полученный результат с примером на скриншоте.

denwer local 110928

Откроется страница, где наша задача: найти строку « phpMyAdmin — администрирование СУБД » — кликаем. Откроется страница, откуда можно перейти через левую верхнюю вкладку по адресу «База данных». Внимательно прописываем латинскими буквами выбранное название сайта ( site ) и кликаем « создать ». Поздравляем! – База данных, необходимая для работоспособности сайта, создана.

denwer database 110930

joomla install database 110945

joomla install tools 110944

Следуйте указаниям инструкции – данный этап не скрывает в себе сложностей. Отныне вы знаете, как сделать сайт на joomla!

Вбивайте в адресную строку название сайта и можете любоваться полученным результатом. Для управления сайтом пройдите по ссылке (потребуется логин и пароль, указанные в процессе установки, как показано на скриншоте): http://site.ru/administrator

joomla admin 110945

Установка шаблона сайта на Joomla

CMS установлена, вход в администраторскую панель осуществлен: продолжаем раскрывать таинство темы, как сделать сайт бесплатно. В нашем случае стандартный шаблон заменен новостным « ZT_News_III », содержащий бонус: « ZT_News_III_template », « Plugin_System_ZT_Mega_Menu », а также дополнительные модули. Для установки необходимо скачать файлы на компьютер, разархивировать и найти в панели управления вкладку «Расширения – Установить/Удалить».

Предложенный вариант шаблона – далеко не единственный! На просторах сети имеется необозримое множество платных и бесплатных шаблонов. Экспериментируйте! Единственная рекомендация – использовать проверенные источники, в частности – с официальных сайтов. Интересует, как добавить шаблон? Кликаем « Выберите файл », находим архив шаблона на компьютере и нажимаем « Загрузить файл и Установить ».

joomla install shablon 110949

Настройка Joomla

Настройка шаблона и модулей

Настройка Joomla начинается с настройки компонентов.

Главное в настройке джумлы – это настройка компонентов. Для активации плагинов и модулей переходим по адресу « Расширения – Менеджер плагинов/модулей ». Контролируем, чтобы рядом с каждым нужным пунктом была установлена галочка.

Далее следует задействовать установленный шаблон сайта. Переходим в « Расширения – Менеджер шаблонов » и выбираем имеющийся (в нашем случае « ZT_News_III_template ») – устанавливаем по умолчанию. Преобладающее количество качественных шаблонов обладает собственными настройками, в частности, различными цветовыми гаммами (у нас зелёная, серая и красная).

Что касается прилагаемых модулей, то имеется следующий ассортимент:

joomla shablon change 110956

Любой из вышеперечисленных модулей свободно редактируется в разделе « Расширения – Менеджер модулей ». Переходим на сайт « выбранное название сайта » и наслаждаемся полученным результатом! Вы уже убедились, что сделать сайт самому бесплатно – легко и быстро?

joomla site zero shablon 111000

Настройка сайта

Крепкий фундамент – залог удивительной долговечности дома. Следует покопаться в глобальных настройках сайта сразу же — позднее что-либо менять на глобальном уровне будет крайне хлопотно! Находятся они в разделе « Сайт – Глобальная конфигурация », разбиваясь на три подраздела: « Сайт », « Систем а», « Сервер ».

Чуть правее располагаются настройки SEO:

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

Читайте также:  Починить коляску детскую своими руками

Начало работы с Joomla

Пока информация не добавлена – шаблон выглядит пустым и унылым. Чтобы сделать свой сайт конкурентоспособным, привлекающим всеобщее внимание – наполняйте его качественным и уникальным, интересным для пользователей контентом.

Прежде, чем добавлять записи, нарисуйте структуру сайта:

В разделе « Содержание » находятся менеджеры для редактирования каждой составляющей структуры. Начнем с разделов: переходим во вкладку « Содержание – Менеджер Разделов », в правом верхнем углу выбираем « Новый » — создаем раздел.

Заполняем поля «Название» (указываем название раздела на русском языке) и «Псевдоним» (название на латинице, рекомендуется транслитерация). Для автоматической транслитерации слов существует весьма удобный (достаточно ввести текст на русском языке, чтобы мгновенно получить его же, но английскими буквами) онлайн-сервис translit.ru – рекомендуется к использованию!

Проверяем, отмечена ли публикация (должно быть «да») — и нажимаем кнопку « Сохранить » в правом верхнем углу.

joomla category new 111005

joomla article new 111005

joomla major change 111006

Можете полюбоваться, как будет выглядеть сайт после появления первых нескольких статей. Прекрасно, не правда ли.

shablon rezultat 111007

А теперь – вперёд! На покорение новых вершин. Постойте… а вдруг у вас не получилось? Тогда специально для вас предлагается альтернативный вариант! Вы можете выбрать лучший онлайн конструктор сайтов в нашем обзоре или воспользоваться уникальным конструктором Wix – настолько простой, что абсолютно не требует даже базовых знаний.

Конструктор Wix – комплексное решение для ценящих собственное время людей и всех тех, кого по какой-либо причине не привлекла Joomla.

Источник

Как создать сайт на Joomla с нуля. Инструкции + видео.

Рассмотрим как сделать сайт, из каких этапов состоит разработка сайта на Joomla и сколько денег нужно чтобы его создать.

Содержание:

Это могут быть:

Этапы разработки для каждого типа сайта практически одинаковы.
Давайте их рассмотрим.

Установка Joomla

Для начала нужно познакомиться с системой и установить её.

Скачать последнюю версию можете с официального сайта >>

Установка может проивзодится как сразу на хостинг в интернете, так и на свой компьютер (для этого нужна специальная программа, которая сделает из вашего домашнего компьютера локальный сервер, называется OpenServer).

Если вы не знакомы с Joomla, то рекомендую установить её на локальный сервер.
Установка самого сервера и Joomla довольно простые, посмотрите весь процесс в видеоролике:

Знакомство с админкой и базовые настройки

joomla admin

Всё управление сайтом происходит через административную панель.
Вход в неё всегда такой ваш_сайт.ru/administrator

Создание категорий и статей.

В материале Joomla размещаются такие типы контента:

Теперь определимся с будущей структурой вашего сайта и создадим предполагаемые категории.
Как создать категории Joomla >>

Далее пробуем создать несколько материалов. Необязательно создавать сразу все, можно создать только самые необходимые.
Это зависит от типа сайта, который вы разрабатываете.

Прим.: тексты для сайта вы можете писать самостоятельно или заказывать на специальных биржах.
Стоимость статьи получается примерно от 50 рублей за 1000 символов

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

Создание меню в Joomla и типы пунктов

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

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

kak sozdat punkt menu joomla

Например, пункт меню с типом категория Список, выводит все материалы выбранной категории в виде списка.
А тип меню Блог категории, выведет материалы выбранной категории уже в виде блога.
Т.е. это будет вступительный текст с картинкой и кнопка подробнее.

Дополнительные функции

В стандартной сборке Joomla уже присутствует много базовых функций.
Это например: поиск по сайту, форма обратной связи, баннеры, ленты новостей, метки и многое другое.

Это родные расширения Joomla.
Все расширения делятся на типы: модули, плагины и компоненты и т.д.

Выполняют основную логику работы, например компонент интернет магазина.
Дополняет Joomla возможность создать полноценный интернет магазин.

Вся информация из компонента выводится в основной колонке сайта.

Выводят информацию в боковых колонках и других позициях шаблона.
Можно назвать их виджетами.

Выполняют простую работу по выводу информации на сайт.
Например модуль входа (авторизации) выводит форму для ввода логина и пароля.

Их можно назвать «примочками», например, плагин авторизации по e-mail.
После его включения, пользователи сайта могут заходить не только под своим логином, но и под своим email’ом.

Или плагин рекапча от Google, он помогает защищать формы от спам ботов.

Также ещё есть шаблоны, языки и пакеты.
Они тоже считаются расширениями.

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

shablon joomla

Некоторые шаблоны иногда содержат дополнительные модули.

Существуют так называемые квикстарты (quickstart).
Это чистый сайт на Joomla (с демо данными) с полностью настроенным шаблоном.
Это удобно, когда времени на разработку и настройку совсем нет.

Прим.: расширения могут быть платные и бесплатные.

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

Читайте также:  Приора шумоизоляция дверей своими руками

Совет: никогда не скачивайте расширения с торрентов или складчин.
Вы рискуете безопасностью вашего сайта.
В таких «неофициальных» расширенияих, в большинстве случаев содержится вредоносный код, а иногда даже вирусы.

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

Перенос сайта на хостинг

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

Далее регистрируется доменное имя и сайт переносится на хостинг в интернет.

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

hosting saita

Хостинг тоже делится по типам.

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

Процесс переноса сайта.

Первоначальная настройка сайта на хостинге

После того как ваш сайт заработает на хостинге, производится его начальная настройка:

Поздравляю! Ваш сайт в интернете.

ya wm

Теперь ждём когда поисковые системы проиндексируют сайт и он появится в результатах поиска.
На это уходит примерно неделя-две.

SEO оптимизация

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

Тема SEO очень большая, охватить её одним абзацем невозможно.
Поэтому рекомендую вам книгу «Секреты SEO для новичка».

Дам пару советов.

Всё это будет учитываться поисковыми системами и они будут лучше к вам относится.

seo joomla

А мы поможем вам советами, видеоуроками,хорошими расширениями и шаблонами для Joomla.

Сколько нужно денег чтобы создать свой сайт с нуля?

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

Обязательные расходы:

Итого получается около 200 рублей.
Чтобы создать свой сайт по нашим инструкциям, вам нужно всего 200 рублей!

Дополнительные расходы (при желании):

А чтобы сделать сайт правильно и быстро, вам нужно всего около 3-4 тысяч рублей.
Решение за вами!

Рекомендую посмотреть наши онлайн курсы >>

А с чего же начать создание сайта?

Ответ в этом видео.

Готовые сайты

Скачать Joomla

CMS для онлайн школ

Мощная система для создания онлайн школ и дистанционных уроков.

prs

Удобно: всё в одном месте!

Уроки + задания, мембершип и платный доступ, рассылка и приём оплаты.

+ Тест драйв на 14 дней

Новое на сайте

ИП Касьянов О.А. | ОГРН 314732807000062 | +79176096411

Источник

Создаем свой шаблон для Joomla. Пошаговое руководство

9afb378d507d465edecb9deacfd3cc8e

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

Зачем это нужно? Наверняка вы слышали о том, что CMS Joomla «тяжелая», в ней постоянно выскакивают ошибки, «едет» верстка, «отваливаются» скрипты. В основном это связано с шаблоном, который вы используете, а именно – с подключением множества плагинов и скриптов, фреймворков (как css/js, так и php), которые в процессе работы сайта и для его продуктивности практически не нужны. Поэтому мы сталкиваемся с долгой загрузкой в Google Page Speed и многочисленными ошибками, которые влияют на продвижение сайта в поисковиках.

Для решения этой проблемы мы сделаем свой шаблон (template), в котором можно будет настраивать внешний вид, менять цвета, добавлять информацию. Настройками можно легко управлять с помощью административной панели самой Joomla.

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

Итак, статья для вас, если:

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

874756e534dde7558659e40b4d7068c7747d0253Для начала нам необходимо создать папку со следующим содержимым. Попутно поясняю, что и зачем нужно, простым языком, чтобы разобраться мог каждый (начнем с конца):

1. templateDetails.xml – файл, в котором мы описываем информацию о разработчике, версии, вносим информацию о содержимом, позиции модулей, языковые файлы, настройки.

2. template_preview.png, template_thumbnail.png – изображения шаблона, можно в Adobe Photoshop сделать в виде иконок. У меня они такие:

2266feba48648bcac7529508a3744276d95cf9be
3. index.php – главный файл, в котором будет подключение скриптов, параметров, модули. И самое главное – верстка.

4. index.html – пустой файл html, который должен содержаться в каждой папке, чтобы мошенники не смогли просмотреть содержимое.

5. error.php – страница 404, можно настраивать как угодно, тем самым уйти от стандартной страницы 404 Joomla, которая выглядит не очень презентабельно 🙂

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

7. js – папка со скриптами, со временем можно подключить все самое необходимое для работы сайта.

8. images – говорит само за себя, здесь хранятся картинки шаблона. Рекомендую здесь хранить картинки, относящиеся только к оформлению, так как будет неудобно грузить картинки для статей именно в папку шаблона.

9. html – папка для переопределения модулей и компонентов Joomla. Об этом поговорим позже, но, забегая вперед, скажу, что в этой папке храним все то, что не должно перезаписаться при обновлении модуля или компонента.

10. fonts – в эту папку можно подключить шрифты для сайта, если таковых нет на Google Fonts. Гугл шрифты лучше подключать через основной шаблон. Так вы получите более высокую оценку в Google Page Speed.

Читайте также:  Ремонт своими руками авто уаз хантер

11. css – папка со стилями для шаблона, которые мы подключим к нашему шаблону.

Файл templateDetails.xml

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

5065ab586d23343004c56950b18bf4b81446fd1a
1. Первая строчка обязательная, содержит версию xml и кодировку:

2. Далее открываем тег extension и начинаем описывать наше приложение:

Указываем версию Joomla, тип расширения, клиент установки и метод установки.

3. Рассмотрим следующие строчки.

В данном виде содержится языковая переменная (как пример), ниже рассмотрим, как это используется на практике.

Здесь и так все понятно 🙂

Тоже не нуждается в пояснении:

Информация о лицензии:

Всю информацию в этом блоке описываете на свое усмотрение.

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

4a90df15cb9859a637e20d568d4597df426df11a
5. Языковые файлы. Если вы делаете шаблон для русскоязычной аудитории – в этом нет необходимости, можно не добавлять этот раздел, а в теге description выше в описании шаблона можно просто написать русское описание напрямую. Но, если приложение предназначено и для других стран, достаточно будет добавить англоязычную версию по примеру ниже.

ec1dfa6a4dcb0199d6f377a3819870fb1ff7936d

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

Самое главное – верно указать теги и названия файлов. Все аналогично для любой локализации, сейчас рассматриваем на примере русской локализации.

TPL_UNIVERSUM_DESCRIPTION – это и есть переменная, которую мы запишем в языковой файл, и Joomla будет «подтягивать» значение из него.

Открываем файл ru-RU.tpl_universum.ini и записываем значение переменной:

Можно записать любое значение, главное – без перехода на новую строку, иначе работать не будет. Также можно использовать html для красивого оформления сообщений.

Результат добавления description можно увидеть при установке шаблона:

26a32440b51b7dc14f74178967885f2141ffa422Чтобы увидеть эту же информацию в настройках, необходимо эту же переменную добавить в файл ru-RU.tpl_universum.sys.ini:

06adfaf2e389031461c1788e79e252b46fe17a38Идем дальше.

6. Описываем позиции шаблона (что и где у нас будет выводится), для этого потребуется раздел positions:

0516ca658611ec1f8526fe46f0395bf4dc8c3045

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

7. Параметры шаблона. В этом разделе мы можем указать настройки, которые можно менять в административной панели Joomla. Это удобно, чтобы клиенту или администратору не пришлось открывать файлы с кодом, а можно было изменить информацию в пару кликов. Настройки шаблона могут быть самые разные и зависеть только от вашей фантазии. Мы рассмотрим самые основные, которые помогут вывести необходимую информацию и отредактировать цвета оформления, зачастую этого достаточно. Далее по примеру можно добавить более гибкие настройки шаблона, а также неограниченное количество вкладок для удобства группировки настроек по смыслу.

d7ac7bcf3fbd811487fde42eb202d82356b245ef

Задать настройки шаблона нам поможет раздел config. Вот так выглядят параметры в админ-панели Joomla:

6849fabf1d0ec5f298b6c13169294771de22a355Тегом можно задать вкладки, внутри fieldset располагаем поля настроек. Рассмотрим, из чего состоят поля.

Значение по умолчанию (может отличаться в зависимости от типа поля):

Все типы полей можно посмотреть на официальном сайте Joomla.

Языковые переменные, о которых мы говорили выше, их необходимо прописать в файле ru-RU.tpl_universum.sys.ini для отображения в админке:

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

Файл index.php

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

Первой обязательной строчкой php файла является следующее выражение:

Далее нужно передать параметры в шаблон следующим образом:

Затем передаем сами параметры и записываем в переменные – на примере title, description и лого:

Начало файла шаблона index.php:

c4e07295ee0dc62dc6fc5223590a3af1bd95c8cc

Продолжаем наполнение шаблона, дальше следуют стандартные блоки html. Код приведен ниже:

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

В остальных папках и файлах содержится наша верстка, и у каждого она своя.

Файл error.php

Имеет смысл рассмотреть еще файл error.php – в нем мы показываем, как должна выглядеть страница 404, у меня он такой (также можно «подхватить» все параметры из настроек шаблона – все зависит от фантазии и верстки страницы):

b1ee1c1f237c2d4c65ad8117353496bfcf0d37c6

Вот и все, минимальный набор для установки шаблона готов!

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

dce97f1b81d9d67117334af58870970e6590ce39

Заходим в административную панель Joomla и устанавливаем наш шаблон:

95b3be744ead4f98f07cc84e02d77d53c2cc48ae
Выбираем наш шаблон по умолчанию и переходим на сайт, чтобы убедиться, что все работает:

92ec1f6cc167b4e0c79aded8e78f00bfb4bae79f

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

Источник

Adblock
detector