Меню

Joomla как сделать шаблон самим

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

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

Joomla представляет собой систему управления контентом (CMS), реализованную на основе php и JavaScript со встроенной поддержкой СУБД MySQL. Она является потомком известного движка Mambo.

Как отдельная CMS Joomla начала свое существование не так давно. Ее первая версия вышла лишь в 2005 году. Последней является версия 3.3, которая вышла в октябре 2014.

К особенностям данной CMS можно отнести:

  • Мультиязычность – в базовую версию движка уже включена поддержка нескольких языков. С помощью инсталляции лингвистических пакетов возможна реализация интерфейса административной и пользовательской частей Joomla на большинстве существующих языков;
  • Бесплатность – движок, как и многие шаблоны для сайта Joomla, распространяется на бесплатной основе и имеет полностью открытый код;
  • Легковесность – в состав инсталляционного пакета CMS входит лишь минимальный набор инструментов. По мере необходимости он легко расширяется с помощью установки нужных дополнений. Благодаря этому легко оптимизируется занимаемое ресурсом пространство на хостинге и уменьшается нагрузка на сервер:

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

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

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

Дополнительно в панели администрирования настраивается стиль отображения каждой из тем. Эта возможность доступна через вкладку «Стили» в «Менеджере шаблонов»:

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

Еще одной уникальной возможностью данного движка является использование для оформления сразу нескольких шаблонов. То есть для пунктов одного меню можно использовать несколько тем:

Для изменения кода страниц темы в «Менеджере шаблонов» нужно перейти на вкладку «Шаблоны». В списке ниже выбрать нужный элемент и нажать на ссылку «Параметры»:

На следующей странице выбираем файл для изменения. После нажатия ссылки с именем файла в окне редактора шаблонов Joomla отображается код выбранной страницы:

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

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

В случае удачной установки вверху появится соответствующее системное сообщение:

Теперь, если проследовать в «Менеджер шаблонов», то в списке установленных тем можно увидеть новый элемент:

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

  • index.php – отвечает за генерацию страниц;
  • templateDetails.xml – в этом файле содержится описание самого шаблона в формате xml. В его полях хранятся метаданные об авторе, версии расширения и другие значения. Все эти параметры будут использованы системой при работе сайта.

Темы Joomla хранятся в директории templates. Создадим в ней папку под названием «test». Здесь будут храниться все файлы будущего шаблона. Внутри этой папки создадим еще одну папку с именем css. Тут будут размещены все файлы стилей.

Для примера возьмем уже сверстанную страницу html со следующим кодом:

источник

Здравствуйте, дорогие читатели! Из-за моего отъезда у нас с вами получился опять долгий промежуток между выходом новых статей. Не знаю как вы, а я соскучился и потому сегодня мы рассмотрим очень важную тему, без которой, как я считаю, создать качественный сайт на Joomla просто невозможно!

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

Тезисно о том, почему свой шаблон всегда лучше скачанного:

  • Быстрее загружается;
  • Не содержит скрытых ссылок и вирусов;
  • Авторские права принадлежат вам;
  • Настраивайте его так, как душе угодно, никаких ограничений!

Но взамен от вас потребуются:

  • Минимальные знания PHP, советую заглянуть сюда;
  • Хотя бы средние знания HTML и CSS;
  • Дочитать данную статью, и подписаться, чтобы следить за продолжением.

Совсем не знаете PHP? Ничего страшного, дочитав статью, вы сможете делать всё по аналогии.

Существуют 2 вида шаблонов для Joomla: front-end (лицевая сторона) и back-end (административная панель). Чтобы не растягивать статью до неприличия, сегодня мы рассмотрим только front-end, то есть ту часть сайта, которая создана для пользователей (ваших клиентов), а не для администраторов.

Так вот все front-end шаблоны находятся в папке /templates/, в ней есть несколько папок, одна из которых system (её не трогаем), а все остальные папки – это и есть установленные нами (или по умолчанию) шаблоны.

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

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

Я всё делаю вместе с вами и назову свою папку site-on. Далее в этой папке вы можете создавать сколько угодно любых других файлов и папок. Но есть 2 обязательных файла – это index.php и templateDetails.xml

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

каждая папка вашего сайта должна содержать пустой файл index.html, это приём для защиты от парсинга директорий. Кстати, на хостинге «Украина» это реализовано на уровне сервера, но всегда нужно рассчитывать только на себя, тем более не на всех хостингах будет эта опция.

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

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

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

Назвать его можно как угодно: в стиле Джумлы положено назвать его template.css, но слово template слишком длинное, поэтому я люблю называть свои файлы в стиле WordPress — style.css

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

Не забудьте и в неё поместить пустой index.html !

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

Файл index.php шаблона загружается каждый раз, когда посетитель заходит на ваш сайт. Это фундамент макета вашего сайта, его скелет. Вот, как приблизительно должен выглядеть этот файл в начале пути:

Первая строка – это защита от прямого обращения к файлам, более подробно об этом я писал в статье про константы в PHP. Эта строка обязательна, если не хотите, чтобы вас взломали.

2 и 3 строки – указываем тип документа для браузеров, можете изменить на свой, в данном примере тип документа XHTML 1.0, язык – русский, правописание: слева направо.

Далее идёт блок head, в 5 строке мы подключаем метод Джумлы, который выводит необходимую информацию в голове сайта (title страницы, мета-теги, css и js файлы модулей и компонентов). Эта строка обязательна!

В 6-8 строках мы подключаем стили нашего сайта, 6-7 строки – это стандартные стили Джумла (советую их подключить, хотя необязательно), а 8 строка, это созданный нами style.css

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

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

Выше мы рассмотрели простейшую структуру файла index.php, вы уже можете использовать её как каркас для создания собственных шаблонов. Теперь разберёмся, как добавлять позиции для модулей, которыми так любят хвастаться производители шаблонов: «Наш шаблон содержит 69 продуманных позиций…»

Чтобы не копировать лишнего, вернёмся к блоку body:

Чего не хватает нашему макету? Я думаю шапки, пары колонок и подвала (футер, footer). Давайте создадим для них позиции модулей:

Мы создали 4 новых позиции для модулей Джумлы:

После установки шаблона все эти позиции станут доступны при выборе позиции модуля из административной панели Джумлы.

Но это был короткий вариант создания модуля. На самом деле в тех позициях, где вы собираетесь отображать несколько модулей один за другим, например, в правой и левой колонках сайта, будет удобно использовать «обрамление модуля» (оригинальное название: module chrome).

Обрамление (обёртка) модуля – это HTML структура, в которую будет обёрнут наш модуль при выводе в конкретной позиции. Обрамление служит для удобства стилизации при вёрстке и расширяет возможности вывода. Чтобы лучше понять, просто сравните 2 варианта вывода одного и того же модуля. Перед вами стандартный модуль меню (состоит из 2ух пунктов меню) без использования module chrome:

С использованием module chrome:

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

Во-вторых, весь модуль обернулся в тег div с классом moduletable_menu.

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

Чтобы обернуть наши модули, мы должны к тегу позиции добавить атрибут style с названием нужной обёртки (не путайте с атрибутом style в языке HTML, они не имеют ничего общего, в нашем случае — это чисто синтаксис Joomla):

Обертки, как и шаблоны, тоже можно создавать самим, но об этом в следующей статье, а теперь давайте придадим немного лоска нашему макету:

Читайте также:  Как сделать в домашних условиях конфеты баунти в домашних условиях

А в файл style.css напишем:

И в итоге у меня получился вот такой макет:

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

На скриншоте я через админ. панель добавил несколько модулей в позицию right-column и несколько модулей в позицию left-column. Но что делать, если вы хотите, например, иметь 3 колонки только на главной странице, а на всех остальных по две?

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

И вот что мы получаем на всех остальных страницах:

А именно: внутри правой колонки ничего нет, но сама колонка осталась, мы видим её границу и она продолжает занимать место.

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

Если в позициях right-column и left-column нет модулей, то в придуманную мной переменную $column заносим текст: all-hidden. Но если в одной из этих колонок есть модули, то проверяем по аналогии каждую колонку отдельно и в зависимости от того, в какой позиции нет модулей – заносим произвольный текст. Этот текст, например, all-hidden – это название класса, которое мы выводим в самой последней строчке описанного выше кода.

То есть если у нас в правой колонке нет модулей, то мы получим:

А если, например, у нас везде будут модули (и справа и слева), то получим:

Это лишь вариант, как можно было применять эту проверку:

Где $this->countModules() – это встроенный PHP метод Джумлы, который возвращает число модулей в данной позиции.

Только что был представлен элементарный кусок PHP кода, поэтому если вы ничего не поняли – ничего страшного, просто зайдите в раздел PHP данного блога и внимательно прочитайте всё с первой статьи до статьи под названием: урок 3 (включительно). Не пугайтесь, там немного, но вам сразу станет гораздо понятней.

Шаблон мы создали, осталось установить.

Файл templateDetails.xml – это файл установки, без него невозможно установить созданный нами шаблон через установщик Джумлы.

В нашем случае он будет выглядеть так (и для версии 2.5 и для Joomla 3.x):

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

Затем мы перечисляем все папки и файлы, которые находятся в корне нашего шаблона:

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

папки не должны быть пустыми! В них должен быть хотя бы 1 файл, как минимум – пустой index.html

Далее мы перечисляем названия всех позиций:

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

Всё готово, осталось только создать архив с шаблоном. Поддерживаются архивы форматов: ZIP (.zip), TAR-gzip (.tar.gz) и TAR-bz2 (.tar.bz2). После создания архива, вам остаётся установить свой шаблон через стандартный установщик Джумла, так, как вы делаете с любым другим шаблоном или расширением. Прямая ссылка на скачивание шаблона из данной статьи:

Давайте подведём итоги. Сегодня мы получили все необходимые знания для создания шаблонов под Joomla 2.5 и Joomla 3. Создали трёх колоночный макет сайта и научились динамически менять количество колонок.

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

Всем спасибо за внимание, незабываем подписываться удобным для вас способом (почта, соц. сети, RSS). Для вас – только актуальная информация из мира веб-технологий!

источник

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

Мы будем строить шаблон на основе Twitter Bootstrap — начиная с версии Joomla 3, этот набор инструментов формирует основу пакета для создания пользовательского интерфейса в Joomla. Тем не менее, даже если вы решите воспользоваться другими инструментами, отличными от Bootstrap, концепции и процедуры останутся теми же.

Базовая структура шаблона

Веб-страницы, которые вы видите в своем браузере, состоят из кода HTML (HyperText Markup Language, гипертекстовый язык разметки), который, в свою очередь, взаимодействует с другими файлами, такими как файлы изображений, каскадные таблицы стилей (Cascading Style Sheets, CSS) и сценарии JavaScript (js). PHP — это язык программирования, предназначение которого — упрощать создание динамических страниц.

В Joomla базовую структуру HTML-кода страниц определяет именно РНР, основываясь на шаблонах, в частности шаблонном файле index.php. Если вы откроете файл index.php из любого шаблона, например »eez3, то увидите, что он довольно сложен и содержит множество элементов. Коммерческие шаблоны зачастую оказываются еще более изощренными. Прежде чем мы углубимся в детали работы с шаблонами, полезно освежить в памяти знания о базовой структуре HTML-страницы и о том, как устроен файл index.

Примером простейшей HTML-страницы служат файлы index.html, которые можно обнаружить в любой папке установки Joomla!. Если вы в своем браузере перейдете по адресу http//мой домен.com/components/index, html, то увидите пустую страницу. В этих файлах содержится следующий код:

Скопируйте такой файл в папку templates/ourtemplate. Это абсолютный минимум кода, который должен содержаться в странице HTML, однако мы настоятельно рекомендуем вам добавить еще два фрагмента — тег head и тип документа. Тег head состоит из двух частей и выглядит как ; его необходимо вста¬вить между тегами и :

Мы используем отступы, чтобы сделать файл более читабельным, а также чтобы было удобнее проверять, не забыли ли мы какие-нибудь теги. Создайте в той же папке файл index.php. Пока что в него следует поместить точно такой же текст, как в предыдущем файле. Теперь, если вы перейдете по адресу http://мой_домен.соm/ templates/ourtemplate/index.php, то увидите пустую страницу.

Для визуализации веб-страниц используется код HTML, но в действительности существует несколько вариаций HTML. Новые шаблоны, которые обычно предлагаются для Joomla! 3, в большинстве своем написаны на HTML5. В Joomla! 2.5 большая часть шаблонов использовала XHTML (Extensible HyperText Markup Language — расширяемый гипертекстовый язык разметки). Вы должны сообщить браузеру, какой вариант применяется в вашем шаблоне.

Это делается с помощью тега ! DOCTYPE, поэтому он почти всегда встречается в файлах index.php. Этот тег определяет набор стандартов, который будет использоваться для валидации кода HTML (или XHTML) на странице. Чаще всего в шаблонах Joomla! 3 используется обычный тип HTML, а в шаблонах Joomla! 2.5 — так называемый переходный стандарт XHTML 1.0, но разработаны и другие стандарты. Таким образом, этот тег обычно добавляют для указания типа.

Для Joomla! 3 в большинстве ситуаций он выглядит очень просто:

Существует несколько типов документа, среди которых вы можете выбрать желаемый; кроме того, на веб-сайте http://www.w3.org предлагается несколько опций. Там же вы найдете службу валидации, которая сможет проверить, удовлетворяет ли ваш сайт требованиям стандартов для выбранного типа документа.

Начиная с этого момента, между файлами Joomla index.php и index.html начинают возникать более существенные различия.

Простая в использовании программа для создания резервных копий на Microsoft SQL Server и Azure баз данных. Скачать программу можно здесь .

источник

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

Теперь откройте папку своего сайта /templates/ в файловом менеджере, если он на localhost и в ftp менеджере, если сайт на хостинге. Если вы установили мой чистый шаблон, то увидите папку shablon. Откройте ее и приступим:

Давайте разберем для чего нужны и за что отвечают файлы и папки нашего шаблона:

  • /css — папка для хранения файлов стилей шаблона .css
  • /css/template_css — файл стилей шаблона
  • /css/editor_content.css — файл стилей для редактора
  • /fonts — папка для хранения шрифтов
  • /html — папка для хранения шаблонов модулей и компонентов
  • /images — папка для хранения изображений шаблона
  • /index.html — файл заглушка для каталога
  • /index.php — главный файл шаблона с html разметкой
  • /templateDetails.xml — файл содержащий настройки шаблона и необходимый для его установки.

Откройте файлы index.php, template_css в редакторе. В index.php уже создан основной скелет страницы и добавлены основные команды для вывода данных из базы Joomla.

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

Теперь разберем каждое по отдельности:

С помощью этого выражения мы выводим теги head которые формируются в самой Joomla различными компонентами и самим движком. В первоначальном варианте выглядит так:

Подключаем файл стилей с помощью следующей строчки:

Выражение необходимое для отображения содержимого компонентов выглядит так:

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

Что бы мы смогли выводить модули в нужной нам позиции на сайте через админку Joomla нужно задать положение позиции следующим выражением:

  • name=»modul1″ — имя позиции
  • style=»xhtml» — стиль шаблона вывода модуля

В статье как «Как создать сайт html в блокноте» мы сверстали макет по дизайну. Теперь можно превратить его в шаблон Joomla. Для этого нужно скопировать все изображения в папку images шаблона, все содержимое файла style.css в наш файл стилей template_css.css, а также перенести все содержимое тега body index.html в наш index.php.

Получится, что template_css.css выглядит так:

А файл index.php шаблона Joomla 3 вот так:

Сохраните и посмотрите что получилось. Пока не очень правда и стили почему то не подключились.

Теперь нужно адаптировать этот макет по наш движок, для этого отредактируем файл index.php. Для начала заменим содержимое тега head и подключим выражения joomla и файл стилей нашего шаблона. Приведите его в такой вид:

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

Меню мы тоже будем управлять из админ панели, поэтому удаляем их и вставляем позицию модуля modul1 для верхнего меню и modul2 для левого:

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

Вы так же как я видимо задаетесь вопросом почему не видно логотипа и телефонов? А все потому, что url прописанные до файлов теперь нужно немного подправить. Добавьте, ко всем изображениям в файле index.php стоку:

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

Позволяет вывести название папки текущего шаблона.

И в файле templates_css.css добавьте ко всем url изображений «/templates/shablon/», получится:

Первый этап создания шаблона мы прошли и теперь все наши файлы и вид сайта должны выглядеть следующим образом:

template_css.css

Сайт в браузере

Теперь давайте откроем админку Joomla и разместим несколько статей. Открываем в браузере http://вашсайт/administrator вводим логин и пароль. Открываем «Материалы -> менеджер материалов» и жмем кнопку «Создать»

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

Читайте также:  Как сделать самому диагностику инжектора ваз 2109

Откройте «Меню -> Менеджер меню» и создайте в нем два разных меню назовем одно «Верхнее меню», а второе «Левое меню». В каждое меню нужно добавить соответствующие пункты и выбрать материалы, которые должны отображаться при клике по ссылке пункта. Процесс создания меню я тоже опущу, так как это относится к администрированию Joomla а не созданию и редактированию шаблона.

Теперь нужно открыть «Расширения -> Менеджер модулей» и клацнуть «Создать». В открывшемся окне выберите » Меню Этот модуль отображает меню на страницах сайта.» Укажите заголовок модуля и в настройках укажите «Верхнее меню». Параметр «Показывать заголовок» установите «Срыть». И главное выберите позицию «Modul1» и сохраните.

Для левого меню сделайте все тоже самое, только позицию выберите «Modul2»

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

Если у вас появляются данные:

То имейте ввиду их можно либо красиво оформить через css или отключить через настройки материалов. Для этого откройте «Менеджер материалов» и нажмите кнопку «Настройки» в правом верхнем углу, ну а дальше думаю разберетесь, там ничего сложного просто отключайте что вам не нужно и все.

источник

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

При этом его файловая структура следующая:

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

источник

Шаблон — это внешнее оформление сайта, это его дизайн и компоновка, это та оболочка, с которой непосредственно сталкивается пользователь.

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

Обычно, шаблоны либо скачивают уже готовые, либо покупают у специалистов, которые под заказ соглашаются сделать все, что угодно. Но в данной статье вы узнаете, как происходит самостоятельная верстка макета для сайтов Joomla.
https://www.youtube.com/watch?v=iLgc2xnMaN8

Есть разные способы создания собственного макета для движка Joomla. Один из самых простых — это использовать специальноt ПО для ускоренного создания шаблона. Есть ни одна программа, которая позволяет без знания кода делать замечательные сайты. Но проблема в том, что часто такая программа труднодоступна — то есть стоит слишком много для начинающего вебмастера. Хорошая программа такого плана — это Aristeer. Это не единственная программа, которая поможет вам сделать шаблон, и если вас интересует именно такая верстка посредством приложений, тогда собирайте деньги на покупку специального ПО.

Другой простой вариант, как сделать макет для Joomla — это переписывание уже готового шаблона. То есть вы берете чужой шаблон, меняете его составляющие и делаете из него свой макет для сайта. Но настоящим романтикам IT-сферы такой метод явно не понравится, потому перейдем к третьему, самому сложному и интересному способу — вы узнаете как сделать шаблон своими руками с нуля для любого сайта на движке Joomla.
https://www.youtube.com/watch?v=1aZEz5oHMlE

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

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

  1. Logo — данный блок предназначен для вывода логотипа сайта/компании. Обычно, его размещают в верхней части сайта, то есть в шапке.
  2. Справа от Logo можно разместить блок модуля для поиска по сайту Joomla.
  3. Как правило, у ресурса есть блок «футер» — это подвал сайта, где размещается различная информация, вроде карты сайта, контактов и прочего.
  4. Content — это основа сайта, компонент, в котором будет выводиться главная информация страницы.
  5. Left и right — это боковые модули, в которые можно будет поместить онлайн-калькуляторы, формы авторизации, календари и прочее.
  6. Header — это «голова» сайта, которая содержит его заголовок, описание, слайд-шоу (обычно) и прочее.

Вот и весь примерный набор блоков для полноценного сайта. У вас может быть абсолютно иной набор позиций, и это нормально.
https://www.youtube.com/watch?v=vhfMA0IGhbA

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

Для начала создайте папку images. Она не будет выполнять функции хранилища для медиафайлов, размещаемых в контенте — она нужна для хранения картинок, которые используются в шаблоне. Учтите, что если вы решили создать свой шаблон, то эта папка обязательно должны быть чем-то наполнена, иначе Joomla откажется читать вашу дизайнерскую затею и выдаст на экране ошибку.

Следующая папку, которую вам необходимо сделать — это CSS. В данной директории будут содержаться все файлы каскадных стилей, которые определят дизайн вашего шаблона. Обязательно поместите в папку файл template.css, пусть даже пустой — с него и начнете свою верстку с нуля.

Но самое главное, что вам нужно сделать, чтобы сгенерировать свой шаблон в CMS Joomla — это создать файл index.php. Именно этот файл станет основным связующим между движком и вашим дизайном. Создавать этот файл, да и вообще весь шаблон, лучше через специальный редактор. Лучший в своем роде для новичков — это Macromedia Dreamweaver. Если вы ненароком сделаете ошибку в коде, умная программа сообщит вам об этом, наподобие того, как Word подчеркивает ошибки красным.
https://www.youtube.com/watch?v=DYR4yXnjn8M

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

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

источник

It has been suggested that this article or section be split into specific version Namespaces. (Discuss). If version split is not obvious, please allow split request to remain for 1 week pending discussions. Proposed since 3 years ago.

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

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

Используя ваш любимый текстовый редактор, создайте файлы index.php и templateDetails.xml Для поддержания порядка в файлах, создайте «‘две новые папки» » с названием «images» и «css». Внутри папки «css» создайте файл с названием template.css .

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

Это самые простые практичные найстройки. Структура папок и файлов может быть такой:

TemplateDetails.xml файл необходим. Без него, ваш шаблон не будет виден в Joomla!. Этот файл содержит ключи метаданных о шаблоне.

Структура и синтаксис файла зависит от той или иной версии Joomla.

Для , используйте следующее:

Для и более поздних, используйте следующую версию файла. Измените цифры версии version=»2.5″ на версию вашего Joomla! пакета.

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

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

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

index.php файл является ядром каждой страницы Joomla!. По сути, вы делаете обычну html-страницу, в которую вставляете PHP код, который будет вставлять содержание вашего сайта. Шаблон создается путем добавления кода в Joomla с указанием позиций модулей и компонентов в соответствующем разделе вашего шаблона. Все, что добавляется в шаблон будет отображаться на всех страницах, кроме разделов сформированных через систему управления сайтами Joomla (или индивидуальным кодом).

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

Читайте также:  Сделать игру самому и движки для игру

Шаблон Joomla начинается с следующих строк:

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

Вторая строка-это Объявление типа документа (DOCTYPE), который сообщает браузеру (и Веб-краулерам) какой тип HTML-кода используется на вашей странице. Тип документа, используемый здесь совместим с HTML5, новой версией HTML, которая во многом сохраняет обратную совместимость, но содержит много новых возможностей. Вы должны знать, что это не будет хорошо работать в Internet Explorer 8 или более ранних без патчей. Вам стоит продумать это и учесть пожелания ваших клиентов, прежде чем решить, какой Тип документа использовать. Так или иначе указанный тип документа является основным в Joomla версии и более поздних.

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

Первая строка просит Joomla вставить соответствующую заглавную информацию. Это включает в себя Заголовок страницы, Мета-данные, а также код JavaScript. Следующие строки создают ссылки на две страницы стилей и собственную таблицу стилей (если это именованный шаблон.в CSS и находится в папке «CSS», в папке вашего шаблона каталога. Так что если ваш шаблон в http://www.mysite.com/templates/my_template/ тогда CSS-файлы будут идти в http://www.mysite.com/templates/my_template/css/ ).

Невероятно, но этого будет вполне достаточно! Да, это очень простой макет, но это будет работать. Все остальное будет сделано на Joomla!. Эти линии, обычно называют декларациями jdoc, которые сообщають Joomla запрос на вставку информации из определенных частей системы Joomla. Внимание: убедитесь, что ваше меню готово быть размещено в «верхней» позиции модуля.

Above, the line which says name=»top» adds a module position called top and allows Joomla to place modules into this section of the template. The type=»component» line contains all articles and main content (actually, the component) and is very important. It goes in the centre of the template.

Note: You can add your own module lines anywhere you want in the body, but you have to add a corresponding line to the templateDetails.xml file which sits alongside the index.php of your template.

Finish it off — one last bit:

If you want to add any images to the template you can do so like this:

Here the template variable will fill in the name of your template.

You can add custom css like this:

Every file which is added must have a line in the templateDetails.xml file for the template, unless it resides in a sub-folder (which can be included in a element).

Это будет в окончательной версии файла:

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

В Joomla! 1.5, новый шаблон будет отображаться непосредственно в Диспетчере шаблонов, которые доступные также через меню Расширения -> менеджер шаблонов.

+ в Joomla! 2.5 и позже, сначала надо указать для Joomla!, что Вы создали новый шаблон. Эта функция называется «Откройте для себя расширения» и может быть доступна через Расширения -> менеджер расширений -> Найти (например выбрать «одну из вкладок»). Нажмите кнопку «‘открыть»‘ (т. е. найти «кнопку»), чтобы найти свой шаблон, то выберите его и нажмите «установить», чтобы установить его. Теперь Ваш шаблон должен отображаться в менеджере шаблонов (стилей), доступный через Расширения -> менеджер шаблонов.

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

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

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

источник

Сегодня мы поговорим на очень актуальную тему «Как создать свой шаблон Joomla или как натянуть сайт и html верстку на Joomla».

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

Создаете папку с названием вашего сайта в вашсайт/templates/

Например у меня сайт называется soft

Файл TemplateDetails.xml . Я подготовил шаблон, который достаточно будет скачать тут и просто вносить правки согласно своего сайта.

Это версия и т.д. Обычный стандартный набор. Тут ничего не трогаем и не меняем

Название вашего сайта Описание вашего сайта

Если, допустим, вы делаете апдейт своего сайта, выпускаете его новую версию, то просто пишите, например, 2.0 и т.д.

Дата создания вашего сайта/шаблона

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

index.php — для начала в этот файл пишем

templateDetails.xml — это файл, с которым мы работали выше

template_thumbnail.png — иконка шаблона, которую можно будет увидеть в меню выбора шаблонов в админке Joomla.

template_preview.png — превьюха шаблона, которую можно увидеть в менеджере шаблонов в joomla

— определяем папки, которые используются в шаблоне

С пока что использую стандартный набор папок: css, js и html.

Закрываем . Наш ваш templateDetails.xml готов.

Создание архива с шаблоном для установки

Просто архивируем нашу папку с файлами в .zip

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

источник

Приветули. Моё имя – Кристина и я хочу поделится знаниями, как создавать шаблоны для Joomla собственными ручками, и в тоже время не затрачивая большое количество времени. Я постараюсь наглядно создать простенький шаблон и пояснить детально основные моменты, основываясь на собственном опыте разработке.

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

Думаю тот, кто решил, создать шаблон для Joomla, знаком с ней хотя бы каплю, так что не стану рассказывать, что это за чудо-зверь эта Joomla и на что она способна (можно обновить свои знания и прочесть в вике об этом ещё разок http://ru.wikipedia.org/wiki/Joomla), от себя лишь добавлю, меня Joomla притягивает тем, что для неё существует большое количество халявных модулей, плагинов, шаблонов и прочих плюшечек и постоянные обновления, но отталкивает тем, что в продвижении не весьма хороша.

Задача: Реализовать простой шаблон для Joomla. Темой которого будет «Автобиография», мы создам простой шаблон –визитку.
На примере я реализую фиксированный шаблон.
Я набросала схематично, как будут располагаться основные блоки шаблона:

Инструменты для реализации (которыми при разработки удобно использовать мне):

  • Виртуальный сервер Denwer
  • Dreamweaver (редактор, которым мне удобен, для написания кода)
  • Браузер Opera (просматривать сайт и инспектировать элементы, некоторые предпочитают для этого использовать firefox Mozilla, но я предпочитаю, пользоваться Operой)
  • Photoshop
  • Пакет Joomla, я буду использовать версию 2.5.4

Подготовка:

  • Устанавливаем пакет Denwer (http://www.denwer.ru/base.html) или любой другой удобный для вас виртуальный сервер, если вы вообще хотите работать на локалке.
  • Создаём папочку на нашем виртуальном сервере, куда в последствии разархивируем Joomlу, я использую Denwer, и путь у меня такой Z:homelocalhostwwwназвание папки.
  • Скачиваем Joomla, если в этом есть необходимость (http://joomlaportal.ru/) и разархивируем её в нашу папочку, которую мы создали на виртуальном сервере.
  • Нажимаем «Strart Denwer» на рабочем столе и в браузере в адресной строке набираем http://localhost/ название папки / и приступаем к установке Joomla (как установить с лёгкостью можно прочесть в интернете).

СТАНДАРТНАЯ КОНСТРУКЦИЯ ШАБЛОНА

Итак, приступаем к самому вкусному. Заходим в папочку нашего проекта, где уже разархевирована Joomla и открываем папочку templates (тут хранятся все шаблоны Joomla), в ней мы уже видим: лежат снаднартные шабюлоны для Joomla.

Создаём свою папочку и называем её, так как хотим назвать наш будущий шаблон. На примере, я назвала её «myshablon». При этом мы знаем, что названия чувствительны к регистру и в них не должно быть пробелов.

В состав нашего шаблона мы должны создать обязательные два файла, templateDetails.xml и index.php, которые используются ядром Joomla.

templateDetails . xml — описывает шаблон в XML формате. Он действует как декларация, которая описывает все файлы и папки, которые входят в состав шаблона.

index.php обеспечивает генерацию страниц.

Остальные файлы и папки, являются не обязательными, но мы их всё же создадим:

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

index.html — защитный файл, ограничивающий доступ с файлам папки.

component.php —файл, который отвечает за отображение страницы с печатью.

сss – папка, в которой мы будем хранить CSS стили шаблона.

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

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

javascript — папка, которая будет содержать наши скрипты javascript.

favicon.ico — иконка нашего сайта

По необходимости мы будем добавлять файлы, и соответственно вносить их названия в templateDetails.xml

Вот что у нас собственно находится в папке нашего шаблона «myshablon»:

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

Теперь открываем файл index.php и тоже вписываем стандартное бла-бла-бла:

СОЗДАНИЕ РАЗМЕТКИ ШАБЛОНА

Стандартная писанина в index.php окончена, теперь приступаем к телу.
Для создания скелета разметки, нам вполне подойдёт сервис http://csstemplater.com/– это неплохой онлайн-генератор html+css, который позволяют быстро сверстать основу для шаблона будущего сайта с использованием «блочной» вёрстки.

В блоке DOCTYPE (директива стандарта: без него ваш код и CSS не пройдут проверку валидатором) нам предлагают выбрать один из четырёх вариантов:

  • XHTML 1.0 Strict – включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены.
  • XHTML 1.0 Transitional — включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты не разрешены. Разметка должна быть правильно XML оформлена.
  • HTML 4.01 Strict — включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены.
  • HTML 5

Я выбрала вариант XHTML 1.0 Strict , постараюсь придерживаться этого стандарта и не использовать никаких переходных синтаксисов, писать код извращённым не валидным способом.

В блоке CSS Reset (сброс стилей) я выбрала вариант, с которым я ближе всего знакома, про остальные варианты, вы можете ознакомиться прямо там в справке.

Во всех остальных блоках, думаю разъяснять не нужно. Что касается размеров шапки, футера и правого сайдбара, в последствии мы возможно поменяем размеры уже в самом коде.
Так же выбрала сразу «прижать футер к низу», что бы он не прыгал, когда контент будет менять свою высоту, в зависимости от наполнения.
Далее нажимаем кнопочку «Получить ссылку» затем «Скачать .zip архив» и выбираем куда будет сохранён архивный файл нашего шаблона.
Распаковав архив в папке мы найдём HTML и CSS файлы.

Открываем наш сгенерированный HTML-файл и копируем, то что находиться между тегами

источник