Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Как создать свой первый шаблон Joomla 

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Shaun Murphy (you can also view the original English article)

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


1. Подготовка 

Прежде чем мы начнем наш шаблон, есть несколько вещей, которые вы должны подготовить. 
Как и большинство серверов CMS, Joomla требуется сервер с поддержкой PHP и MySQL установлен. Установив вышеуказанные вручную может быть довольно раздражающим и, честно говоря, пустая трата времени (если вы хотите сделать, как это сделать точно). 
 Что мы должны сделать это скачать один инсталлятор для всех вышеперечисленных, что будет придерживаться локальный сервер на вашем компьютере и дать вам действительно отличная панель управления тоже.

Так что голова на WAMP и скачать последнюю версию.( МАМП для Mac) 

 Как только установщик загрузится, запустите его и установите ПУВР в месте, легко запомнить. Если все пойдет по плану, вы должны быть глядя на папку с именем : ПУВР

 Теперь вы должны также иметь значок в панели уведомлений (где часы), что дает вам доступ к панели управления ПУВР по. Вы можете использовать для целого ряда вещей, в том числе и перезапустить сервер.


2. Скачивание и установка Joomla 

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

 Прежде чем мы продолжим, давайте снова посмотрим на наш папка ПУВР. Внутри вы найдете кучу папок, но нас интересует каталог www.
Это корень вашей установки сервера и это, где мы будем устанавливать Joomla. (Примечание: Вы можете установить столько копий Joomla в здесь, как вы хотите, или что-нибудь еще по этому вопросу) 

Итак, распакуйте Joomla скачать в папку www. Я обычно переименуйте его в этот момент, чтобы название моего сайта или просто сократить его на Joomla. 

 Joomla-это сейчас на нашем сервере. Однако последнее, что нам нужно сделать перед установкой, а вот для создания базы данных. Откройте свой браузер и перейти на http://localhost .
Здесь вы найдете свой уголок сервере администрирования, это где мы создаем в нашей базе. 

 Для создания базы данных, щелкните на панели phpmyadmin под раздел псевдонимы.

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

 Теперь у нас есть база данных, мы можем начать установку Joomla. Запустите свой браузер и перейдите на http://localhost/joomla (или как вы назвали ваш сайт, когда распаковкой.)

На первом экране довольно много говорит само за себя. Выберите язык и нажмите "Далее". 

На следующем экране вы видите предварительной установки контрольного списка. Это список необходимых элементов и настроек Joomla нужно успешно установить. Убедитесь, что у вас необходимую конфигурацию и щелкните далее. 

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

Пропустить экран конфигурации FTP, нажав кнопку Next и на следующей странице введите имя вашего сайта, адрес электронной почты и выбрать пароль. Это будет пароль, который вы будете использовать для входа в админку на Joomla вместе с Имя пользователя: admin. 
Мы не будем устанавливать сейчас любой образец данных, как мы хотим, чтобы добавить модули по одному, чтобы увидеть, как наш шаблон идет позже в ТТУ. Нажмите кнопку Далее. 

Поздравляю! Joomla будет установлена и запущена, но прежде чем мы можем пойти и mess вокруг мы должны удалить папку установки. Так пойдите в папку www, внутри wamp, а затем в папке joomla и удалите папку установки


3. Пристальный взгляд в Joomla 

Это довольно сложно в эти дни, чтобы попасть в любое открытым исходным кодом CMS обсуждение без имени падает на Joomla. 
 Его установка вместе с интуитивно понятной админ-панели делает его очень популярным среди пользователей, которые после легкого КМВ и в то же время, будучи упакован с функциями, которые держат
тысячи разработчиков заняты подвижного приложений и модулей. При необходимости, ознакомиться с заднего конца ( я рекомендую этот быстрый для Joomla 101 статьи на Themeforest блог, чтобы быстро чувствовать.) 

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


4. Шаблон 

Для того, чтобы начать понимать структуру шаблона, давайте взглянем на стандартную. Заходим в папку www, потом внутри Joomla в папке вы увидите папку шаблоны. 
(ПУВР/ВСП/в Joomla/шаблоны). Это когда разные шаблоны перейти. Вы можете переключаться между шаблонами в админке. 

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

Хотя большинство шаблонов состоят из несколько файлов, только два необходимы для того чтобы сделать рабочий шаблон. Это: 

  • индекс.в PHP 
  • templateDetails.xml 

 Первый - index.php - где все разметки идет, в котором вы вставляете Joomla включает. Это можно увидеть как маленькие крючки, где на Joomla вешает информацию о том, как модули, например

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

Выше приведен пример файла templateDetails.xml . Как вы можете видеть, это конкретный список, что говорит о шаблонах Joomla шаблон, например, название, автор, дата создания и т. д... 
Обратите внимание на раздел позиции в приведенном выше коде. С этих позиций мы говорили ранее, включает в себя. 
Некоторые из них понятны, как колонтитул. 
Если вы ставите на Joomla колонтитул включить в футер вашего дизайна, вы сможете контролировать некоторые аспекты колонтитул, используя пошаговый откат. Давайте попробуем и собрать простой шаблон. 


5. Начало шаблона 

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

Внутри новой папки, создайте файл с именем index.php и еще называется templateDetails.xml (копировать/вставить код в примере выше внутри него). 

Откройте свой файл index.php в блокноте или что-нибудь еще вы используете для редактирования кода, и копировать/вставить следующее: 

У нас установлен, PHP код для языка, и в разделе head нашего первого в Joomla включать. Это не в XML-список, потому что это не позиция. 

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

Закончить разметку на странице, добавив в теги body и закрытия тега html. 


6. Используя шаблон 

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

Теперь вы должны иметь это в index.php 

 Прежде чем мы тестируем наш шаблон, давайте добавим статью Итак, у нас есть некоторое содержание. Убедитесь, что ПУВР работает и зайти в вашу админку в Joomla с http://localhost/joomla/administrator

Теперь введите Ваш логин и пароль 

Перейти к содержимому меню и затем в статье диспетчер в выпадающем 

Нажмите Создать, чтобы добавить статью 

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

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

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

Вы должны увидеть template_tut в списке, так что идти вперед и выбрать, и установить его по умолчанию. 

Нажмите предварительный просмотр и проверить ваш славный новый шаблон. Ну может и не такая славная, но свой первый шаблон для Joomla. УРА! 


7. Добавив немного мяса, чтобы наш шаблон 

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

Они включаются следующим образом: 

Поэтому для того, чтобы добавить , например, в левое положение, наши index.php будет выглядеть так: 

Хотя мы на это, давайте добавим позицию в футере 

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

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

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

Позволяет получить нижний колонтитул работает. Перейти в менеджер модулей, нажмите кнопку Создать и выберите нижний колонтитул. Затем нажмите кнопку Далее. 

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

Нажмите кнопку Сохранить и затем просматривать страницы. 
Теперь вы должны также видеть информацию в футере в шаблонах. 


 8. Добавление дополнительных позиций и модули

Позволяет стиль нашей странице немного, поэтому мы видим то, что мы делаем. В папке template_tut создать новую папку и назвать ее "УСБ" , и создать файл внутри него называется 'шаблон.УСБ" 

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

и CSS 

Позволяет зацепить правой боковой панели и заголовка с позиций. Добавить верхнюю позицию в заголовок и правое положение на правой боковой панели. 

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

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

  • Подписаться на NETTUTS RSS-ленту для более ежедневный веб-туц разработки и статьи. 


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.