Создание сайта на Joomla: шаг за шагом

Устанавливаем Joomla на хостинг

Существует 3 способа установки CMS-системы на сервер хостинг-провайдера: через встроенный каталог CMS, через файловый менеджер и с помощью FTP-клиента.

Рассмотрим последовательно каждый из методов на примере хостинга Timeweb. Зарегистрировать аккаунт на нем можно бесплатно. Кроме того, на первые 10 дней предоставляется полный доступ к сервису. Последующие дни платные – стоимость зависит от выбранного тарифа.

Первым делом пройдем небольшую регистрацию на Таймвэб. Открываем главную страницу и выбираем «Вход для клиентов».

Выбираем «Регистрация».

Вводим имя, почту и нажимаем «Стать клиентом».

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

Теперь мы можем переходить к установке Joomla на хостинг. Для этого последовательно выполняем следующие действия:

1. В личном кабинете Timeweb переходим в раздел «Каталог CMS».
2. Выбираем «Joomla» – она находится вторым по списку в разделе «CMS».
3. В отобразившемся окне жмем «Установить приложение».
4. Следующим шагом нужно указать доменное имя – здесь можно оставить тестовое, для изучения CMS оно вполне подойдет. Также выбираем создание новой базы данных, в завершение кликаем на «Начать установку».
5. Готово! Теперь мы можем переходить к приложению.
6. Вводим выданный нам логин и пароль, авторизуемся в личном кабинете Joomla.

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

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

Способ 2: Установка через файловый менеджер

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

Открываем на Timeweb личный кабинет и переходим в раздел «Сайты». Выбираем «Создать новый сайт».

В отобразившемся окне указываем название будущего сайта. Затем жмем на кнопку «Создать».

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

Сайт создан, теперь на него можно установить Joomla:

1. Переходим в раздел «Файловый менеджер» и открываем папку с сайтом, который мы создали в предыдущей инструкции. Затем заходим в подпапку «public_html» и поочередно нажимаем на два файла с зажатой клавишей «Shift». Затем выбираем «Файл» -> «Удалить» – в результате папка окажется пустой.
2. Следующим шагом переносим скачанный ранее архив с Joomla. Он автоматически распакуется, а мы увидим заполненную папку:
3. Осталось создать базу данных, которая в последующем будет использоваться CMS-системой. Переходим в раздел «База данных MySQL» и выбираем «Создание новой базы данных».
4. В отобразившемся окне указываем название базы данных и придумываем пароль. После этого кликаем по кнопке «Создать». Обязательно сохраните пароль на видном месте – он потребуется в дальнейшем.
5. После этого можем переходить к установке CMS. Заходим на привязанный к сайту домен – должно отобразится установочное окно. В нем мы уже работали, поэтому рассмотрим лишь один раздел, который отличается – «Конфигурация базы данных». Здесь нужно указать в качестве «Имя пользователя» имя созданной базы данных, а также прописать к ней пароль. В строке «Имя базы данных» указывается БД хостинга.

На этом установка завершена. Подробнее о том, какие действия выполнять далее, мы уже рассмотрели в разделе «Установка Joomla на локальный сервер».

Способ 3: Через FTP-клиент

Для установки Joomla на хостинге можно воспользоваться и FTP-клиентом. В нем передача данных осуществляется примерно так же, только для этого нужна дополнительная программа, например FileZilla. Давайте рассмотрим, как ей пользоваться:

Осталось загрузить файлы Joomla в нужную директорию и провести предварительные настройки. Подробнее о том, как все это сделать, мы уже говорили в предыдущем разделе: для начала нужно создать сайт и привязать к нему домен, затем из папки сайта удалить все файлы – это действие выполняется уже не в браузере, а через FTP-клиент. Затем там же добавляем все файлы и возвращаемся в браузер: создаем на хостинге новую базу данных, заходим к себе на сайт и там продолжаем установку.

Вот такими простыми действиями на хостинге будет установлена новая CMS.

Шаг 0. Бэкапы и тестовая среда

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

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

Чтобы при переносе базы данных и внесённых правок не получить новых проблем, сразу стоит подумать о соответствии имён тестового и рабочего сайтов. Если вы выбрали разные имена или забыли про нюансы работы сайтов с HTTP и HTTPS-протоколами (а это фактически разные версии сайтов), изучите наш материал по переносу сайтов с одного домена на другой.

Если имена и протоколы полностью совпадают, тогда перенос проекта с тестового на рабочий можно осуществить по этой инструкции.

В качестве тестовых сред стоит рассмотреть:

• виртуальные машины/серверы (можно организовать с помощью Virtual Box и аналогов);
• локальные сервера (наиболее популярное программное обеспечение для реализации – Open Server, но есть и другие альтернативы, набор ПО может зависеть от вашей операционной системы);
• другой хостинг (для правильной работы потребуется альтернативный домен и запрет индексации, что усложняет процесс переноса изменений).

Небольшой пример, как перенести сайт на Joomla из Open Server на реальный хостинг, если доменное имя полностью совпадает:

1. Архивируются все файлы сайта на локальном сервере (в папке проекта на Open Server).
2. Открывается интерфейс PhpMyAdmin в Open Server и экспортируется база данных сайта. Желательно сразу в сжатом виде, чтобы снизить риски долгой загрузки на реальном хостинге.
3. Архив с файлами загружается на реальный сервер в новый каталог проекта и распаковывается там (через SSH-консоль или с помощью онлайн файлового менеджера в хостинг-панели).
4. Открывается интерфейс PhpMyAdmin на хостинге и импортируется база данных сайта.
5. Редактируется файл configuration.php в корне сайта. Вас интересуют параметры, отвечающие за подключение к базе данных:
   1. $mosConfig_user = ‘здесь нужно указать правильный логин пользователя БД’;
   2. $mosConfig_password = ‘тут вводится актуальный пароль для доступа к БД’;
   3. $mosConfig_db = ‘текущее имя БД на хостинге’;
   4. $mosConfig_absolute_path = ‘абсолютный_путь_к_каталогу на сервере’;
6. Вместо редактирования конфигурационного файла можно скопировать каталог installation из оригинального дистрибутива движка и заново запустить процедуру установки по адресу «ваш-сайт.ру/installation/index.php». Не забудьте потом удалить этот каталог.

Бэкапы. Владельцы сайтов по-прежнему делятся на тех, кто их «уже делает» и «ещё не делает». Переходите сразу в первую категорию. Необходимо иметь как минимум 2 разные версии резервных копий файлов сайта и базы данных. Храниться они должны в разных местах. Ни в коем случае не стоит хранить бэкапы у своего же хостинг-провайдера. При выходе из строя его серверов, при отключении его от интернета или при других технических проблемах вы не сможете получить доступ к своим данным. А значит, сайт не будет работать всё это время.

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

Step 4. Create Menu

Without adding the article in the menu, it will not appear on the websites. It is your wish that you want to add your article to the default menu or would like to create your own menu. Most probably, you would like to create your own menu. For this, go to Menu Manager–> Add New Menu. Then, add a title, type and description of the menu. Save & Close the screen.

It is the time now for adding menu items. To do so, go to Menus–>select New Menu–> Add New Menu Items.

From above screen, you need to select the menu item type. You see following screen for selecting the menu item type.

Select Articles as menu item type. As a result, a list will appear from which you should select single article. Then, select the article you want to display on the menu. We select the article created in step number three, that is, “Home”.

This is not it. For displaying the menu on the website, it has to be assigned a module position. So, jump to the step five to know how to do so.

Этап №1 — Подготовка к установке Joomla!

Вас наверняка интересует, как создать сайт на Joomla? Первый шаг — это регистрация домена и выбор платформы для хостинга. CMS выступает лишь набором файлов для отображения контента. Но для полноценной работы ей необходим доменный адрес и место на сервере, где и будут храниться все данные. Поэтому начинать нужно именно с этого. Сегодня существует множество сервисов, которые предлагают услуги по регистрации или продлению домена и хостинга с разнообразными возможностями и дополнительными опциями. Поэтому вы без труда подберете тариф под себя с учетом требований к хранилищу и бюджетом. Более того, во многих компаниях действуют акции — например, «Домен в подарок при аренде хостинга на 3 месяца».

Что до самой CMS, то тут создание сайта на Joomla может проходить двумя способами. Первый — это хостинг с предустановленной системой. После регистрации вы можете выбрать в меню интересующую вас CMS, и платформа будет автоматически установлена в директорию. Второй — это ручная загрузка файлов на хостинг с последующей инсталляцией. Для обоих вариантов доступны подробные инструкции, поэтому вы не запутаетесь.

После всех организационных моментов и установки CMS вы получаете полноценный сайт и доступ к панели администратора.

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

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

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

Решение возможных проблем с веб-шрифтами

В случае некорректного отображения веб-шрифтов после установки, откройте для редактирования файл index.php шаблона (\templates\theme****\index.php), например, перейдя в админ-панели Joomla! в менеджер шаблонов (Extensions -> Template Manager -> Templates) и выбрав соответствующий шаблон (Theme**** Details and Files).

Далее найдите строку вида “$doc->addStyleSheet(‘//fonts.googleapis.com/css?family=’);” и измените ее на строку вида “$doc->addStyleSheet(‘//fonts.useso.com/css?family=’);”.

Joomla! Расширения

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

Joomla! Прeдупреждение об использовании cookies

По закону ЕС о Cookies Вы должны добавить на Ваш сайт модуль, который будет отображать предупреждение о cookies, используемых на сайте. Мы рекомендуем следующие модули:

• Cookie Accept
• EU e-Privacy Directive

Валидация

В наших шаблонах мы придерживаемся семантических правил написания кода HTML-разметки и CSS-стилей. Однако, некоторые ошибки все же могут возникать при W3C валидации. Создание 100-процентно правильного кода, согласно стандартам консорциума W3C, ограничивает использование современных технологий создания сайтов, таких как спецификация CSS3 и разметка HTML5. Целью нашей компании является предоставление богатого пользовательского опыта с высококачественными шаблонами, и иногда нам приходится нарушать некоторые правила.

Курсы

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

Первый видеокурс бесплатный. Называется он «Joomla 3 в деталях». В нем вы сможете узнать о том, как работать с платформой: устанавливать плагины и модули, добавлять статьи и изображения, баннеры, ленты новостей, работать с редактором и перенести с денвера (локального компьютера) на хостинг.

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

Курс «Joomla 3 – профессиональный сайт за один день» более полный. Знакомство с панелью происходит более детально: создание категорий, материалов, основы сео, расширение возможностей, редактирование главной страницы, установка шаблона, рекламных баннеров, меню, поиска, тегов, комментариев, галереи с картинками, работа с хедером и футером, контакты, даже форма обратной связи и Яндекс Метрики.

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

Затраты окупятся

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

Ну вот и все. До новых встреч, друзья.

Как выбрать хостинг и домен

Из чего, если так можно выразиться, состоит сайт? Прежде всего это хостинг, благодаря которому у каждого пользователя интернета есть доступ к электронному порталу. Без него не обойтись. Существуют бесплатные хостинги. Вы наверняка уже слышали, что если вы хотите добиться славы и денег, то пользоваться ими не рекомендуется.

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

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

С ним у вас уже через 15 минут будет свой сайт на Джумле, даже если вы начинаете изучение этого движка и сайтостроения в целом с нуля.

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

Мне нравится сервис продаж ReGod.ru.

Этап №2 — Инсталляция шаблона Joomla!

После запуска вебсайта вы увидите, что он имеет стандартное оформление. Разумеется, дизайн стоит поменять — однотипных страниц в интернете тысячи, их внешний вид может попросту не соответствовать тематике вашего проекта. Если хотите создать сайт на Joomla с оригинальным и привлекательным дизайном, нужно установить подходящий шаблон. Он бывает двух основных типов: бесплатный и платный. Первый вариант распространяется через специальные каталоги шаблонов. Также в самом движке доступно несколько моделей. Вы просто выбираете подходящий дизайн и устанавливаете его. Бесплатные шаблоны примечательны тем, что зачастую имеют ссылку на разработчика (как правило, в нижней части экрана). Ну и, само собой, такие дизайны очень распространены в интернете. Платные вы можете приобрести в тех же каталогах или заказать в веб-студии. В этом случае вы получите уникальный дизайн, который будет полностью соответствовать вашим запросам (оформление, наличие блоков навигации и пр.).

Выбирая шаблон для сайта на Joomla, обратите внимание на следующие пункты:

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

учитывайте направленность проекта

Дизайн для бизнес-сайта кардинально отличается от личного блога или онлайн-магазина не только цветовой палитрой или графикой, но и расположением блоков с контентом;

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

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

 

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

Все готово. Первый шаг, раскрывающий, как создать сайт на Джумле, мы сделали.

Подготовка Что нужно сделать перед началом работы

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

Программное обеспечение

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

1. Прежде всего нужны правильные приложения для распаковывания защищенного паролем архива sources_#########.zip. Можно воспользоваться WinZip 9+ (Windows) и Stuffit Expander 10+ (Mac).
2. Также может понадобиться программа Adobe Photoshop. Она используется для редактирования исходных файлов .PSD и необходима, если требуется изменить графический дизайн и изображения шаблона.
3. Для редактирования исходного кода файлов шаблона нужно использовать редактор кода, например Adobe Dreamweaver, Notepad++, Sublime Text и т.п..
4. Чтобы загрузить файлы на хостинг сервер, потребуется FTP менеджер, например Total Commander, FileZilla, CuteFTP и т.д..

Final Words

You can add as many articles as you want for scaling your website. You can organize your articles into a category blog in case you want to include a “blog page” in your website.

Joomla doesn’t daunt the learners. Once you begin with Joomla, soon you become used to. There is a very big community of Joomla. If you ever get stuck at some point, help will be readily available to you. Don’t back your step because someone said to you that Joomla can’t be your cup of tea. Let your conscience decide whether Joomla is pretty or not your cup of tea.

If you are going to take a shot to make a website, make TemplateToaster web design software your designing partner. It is a premium Joomla template generator helps in making template without coding. It saves a lot of time of a designer as no coding is required to make the templates. Download TemplateToaster by now and start making your Joomla template of your creative imagination.

Немножко теории

CMS Joomla (Джумла) это система управления сайтом общего
назначения. Сегодня она вторая в мире по распространенности после CMS
WordPress. Сайты на Joomla сегодня исчисляются уже
наверное миллионами. Такое положение обусловлено тем, что создать сайт на Joomla
можно очень быстро и недорого (если использовать бесплатные шаблоны для Joomla).
Впрочем есть хорошие и недорогие платные шаблоны Joomla, в диапазоне 10 –
100 долларов

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

Вы можете почитать
подробнее о том, что такое CMS.