Лабораторная работа № 2. Создание страниц сайта
в Joomla
Пришло время сделать первую страницу нашего сайта - главную страницу. Все материалы сайта в Joomla находятся в Менеджере материалов , который находится в пункте Материалы :
Щелкаем по нему и попадаем в Менеджер материалов . Сейчас у нас нет ни одной статьи, поэтому список пуст. Давайте создадим первую статью, для этого нажмем на кнопку Добавить материал :
Открылась страница для добавления статьи
Здесь нужно указать ряд параметров:
Заголовок . В Joomla заголовок обязательно должен быть. Поэтому дадим нашей статье заголовок - Русобои Чебоксары.
Псевдоним . На главной странице это поле можно оставить пустым.
На главной . По умолчанию стоит НЕТ, но мы делаем статью для главной страницы, поэтому ставим ДА .
Вводим следующий текст:
Строилась фабрика обоев из экологически чистых материалов, с учетом всех положительных технологических наработок европейских коллег.
При производстве самих обоев компания использует дорогой, высококачественный флизелин-прессованный текстиль, состоящий из целлюлозы и вискозы. Этот материал легкий и долговечный. Благодаря этому, наши обои просты при монтаже и точны в подгонке. Устойчивы к истиранию и не теряют свою первоначальную форму. Пигменты, которые используются при окраске обоев - экологически чистые. Это те же пигменты, которые применяются в косметологии. Цветовые мотивы обоев адаптированы под вкусы и предпочтения российского потребителя. Кроме основных тем фабрика «Русобои Чебоксары» традиционно предоставляет богатейший выбор цветовых компаньонов, что оставляет максимум простора для дизайнерской мысли при разработке индивидуальных интерьеров. В разработке некоторых коллекций принимали участие японские дизайнеры, но в основном фабрика предоставляет классические традиции австрийской и немецкой школы.
Обои «Русобои Чебоксары» имеют большое преимущество по размеру. Техническое совершенство исполнения позволяет фабрике запускать обои шириной 1м, что недоступно для большинства западных производителей. Продукция «Русобои Чебоксары» получила одобрение среди самых требовательных и изысканных клиентов. Нашими обоями декорированы стены зданий правительств в пяти субъектах Российской Федерации.
Все эти преимущества дают нам возможность создания стильной, неповторимой и качественной продукции.
Нажимаем на кнопку Сохранить
(в верхнем правом углу) и видим, что наша статья появилась в Менеджере материалов
: 
Перейдем на вкладку сайта, обновим его и посмотрим, что у нас получилось:
Отлично, текст на главной странице появился, но есть несколько недочетов:
Отображается заголовок статьи,
Чтобы все это убрать, снова пойдем в менеджер материалов и щелчком по названию статьи откроем ее для редактирования. В правой части есть параметры настройки статьи, они нам и нужны:
Интересующие нас параметры находятся в Дополнительных параметрах . Раскрываем список, щелкнув по зеленому треугольничку и выбираем значение Скрыть в полях: заголовок страницы, имя автора, дата создания и изменения, значок PDF, значок Печать и значок e-mail:
Но название сайта - Русобои - по-прежнему отображается. Давайте это исправим. Для этого идем на вкладку администрирования , в Главное меню , которое находится в пункте Все меню :
У нас пока один пункт меню - Главная страница , щелкнув по его названию (Главная ), откроется страница редактирования пункта меню:
На панели Параметры системы надо поставить галочку НЕТ у Показать заголовок страницы :
Осталось сделать внешний вид текста нашей статьи таким же, т.е. выделить полужирным шрифтом отдельные слова. Для этого на странице редактирования статьи можно использовать панель для форматирования текста. (Сделайте это самостоятельно).
В Joomla по умолчанию стоит редактор для форматирования TinyMCE, честно говоря не самый удачный редактор, слишком ограничен у него набор функций. Поэтому мы установим другой редактор – JCE.
Мы знаем, что Joomla - некий конструктор, который позволяет вам как из кубиков собрать сайт любой сложности. На самом деле, когда мы устанавливаем Joomla, мы устанавливаем лишь базовый набор конструктора. Он умеет отображать страницы сайта, различные меню и еще кое-чего. Но если мы хотим расширить его функциональность, например, сделать фотогалерею или музыку на сайте, то нам необходимо найти в Интернете кубик, который умеет это делать, установить его и настроить. В Joomla такие кубики так и называются - Расширения . Само расширение может состоять из нескольких частей - компонента, модуля и плагина.
Компонент - блок управления расширением (именно здесь идет настройка работы расширения).
Модуль - отвечает за то, в каком месте сайта будет отображаться информация, за которую отвечает расширение.
Плагин - внедряет расширение прямо в текст страницы сайта. Расширения могут состоять только из компонента, из компонента и плагина, из компонента и модуля или из всех трех частей.
При установке Joomla устанавливается несколько базовых расширений, 6 из них имеют блоки управления - компоненты, которые вы можете увидеть в соответствующем разделе меню:
Остальные придется устанавливать самостоятельно по мере необходимости. У нас возникла необходимость установить расширение - редактор JCE.
Наше расширение состоит из компонента (файл D :\Джумл\com_jce_157_156_package.zip ) и плагина (файл D :\Джумл\ plg_jce_156.zip ). Теперь идем в администраторскую зону: Расширения – Установить/удалить.
Нажимаем на кнопку Выберите файл , выбираем сначала компонент com_jce_157_156_package.zip и нажимаем на кнопку Загрузить файл & Установить :
Видим, что компонент установлен:
Теперь также устанавливаем плагин:
После того, как установлен и плагин , можно увидеть, что наш компонент появился в пункте меню Компоненты:
А затем убедиться в Расширения – Менеджер плагинов :
что плагин Editor - JCE 1.5.6 включен (в столбце Включен стоит зеленая галочка).
Теперь нам надо сделать наш редактор редактором по умолчанию. Для этого мы идем в пункт меню Сайт – Общие настройки:
В поле Визуальный редактор по умолчанию выбираем наш редактор Editor - JCE 1.5.6 и сохраняем изменения.
Открываем нашу главную страницу для редактирования: Материалы – Менеджер материалов - Русобои Чебоксаы. Как видете панель форматирования стала гораздо объемнее:
Вообще форматировать текст можно двумя способами:
1. С помощью визуального редактора. Он такой же, как в Worde.
2. С помощью редактора HTML (для тех, кто знает html). Для того, чтобы перейти в редактор HTML надо щелкнуть по ссылке
здесь вы можете писать любой html-код. Не важно, какой способ вы выберите, но отформатируйте страницу на свое усмотрение.
Итак, наша главная страница готова.
Нам осталось разобраться с двумя вопросами:
1. С полем Псевдоним .
2. С глобальными настройками .
Поле Псевдоним
Псевдоним используется в SEF-ссылках (search engines friendly url, т.е человекопонятные УРЛ). Чтобы было понятнее приведем два примера: Если оставить это поле пустым, то УРЛ страницы, сделанной на CMS Joomla, будет выглядеть примерно так: http:// index.php?option = com_content & view = article&id=2&Itemid=2 а если указать псевдоним статьи (например, shop) - то УРЛ той же статьи будет вот таким: http://www.rusoboi.net/index.php/shop Согласитесь, что выглядит такой адрес куда лучше. Такой тип ссылок создается встроенным SEF расширением Joomla
На главной странице это поле можно оставить пустым, так как адрес главной страницы и так человеческий. А вот прежде, чем создавать другие статьи, надо включить SEF -расширение. Для этого мы идем в пункт меню Сайт – Общие Настройки :
В панели Поисковая оптимизация (SEO ) ставим галочку ДА у Включить SEF-ссылки (ЧПУ) и сохраняем изменения:
Глобальные настройки
Ранее, когда мы создавали Главную страницу, в параметрах настройки материалов, мы скрывали имя автора, дату создания и изменения статьи, различные иконки и т.д. Конечно, можно задавать эти настройки для каждой статьи (локальные настройки). Но если мы хотим задать какие-то настройки для всех статей сайта, то необходимо воспользоваться Глобальными настройками .
Для этого мы идем в пункт меню Материалы – менеджер материалов и щелкаем по кнопке Параметры :
Если редактируя статью, мы не укажем никаких параметров, то будут использоваться параметры, указанные здесь (глобальные параметры). Разобраться в них достаточно просто, к тому же при наведении мыши на параметр появляется подсказка, объясняющая за что отвечает данный параметр. Давайте здесь укажем те же параметры, что мы указывали при настройке Главной страницы . Т.е. скроем имя автора, дату создания и изменения статей и все значки . После чего нажмем на кнопку Сохранить в верхней части этого окна.
Наполняем сайт материалами (вставляем картинки)
В Joomla нельзя создать пункт меню, пока нет материала, на который этот пункт будет ссылаться. Поэтому мы сначала создадим 4 материала: Условия работы , Наши магазины , Контакты и Статьи (Карту сайта будем делать позже), а затем создадим меню.
Итак, создаем первую статью - Условия работы . Для этого, как вы уже знаете, идем в Административную панель и выбираем пункт Добавить материал:
Даем нашей статье:
Заголовок - Условия работы.
Псевдоним - cooperation (так эта страница называется на сайте-образце).
На главной - НЕТ.
Мы производим доставку готовой продукции по всей территории России
По г. Чебоксары и Новочебоксарск доставка осуществляется бесплатно.
В другие регионы России доставка осуществляется транспортными компаниями, любыми на Ваш выбор. В данном случае стоимость доставки Вы оплачиваете самостоятельно, по факту прибытия продукции, в конечный пункт назначения. Стоимость составит порядка 200-400 руб., в зависимости от пункта назначения.
Оплатить заказ Вы можете несколькими способами:
Наличными или картой курьеру при получении.
Наш курьер доставит заказанную продукцию к Вам домой, в офис или другое удобное для Вас место.
Банковским переводом на карту.
Вы можете воспользоваться услугой банковского перевода для оплаты заказ.
Оплату можно произвести на карту Сбербанка России или карту Банка Связной через интернет, банкомат или в любое удобное для Вас отделение банка.
Безналичным расчетом.
Вы можете оплатить Ваш заказ по безналичному расчету по счету, который Вы получите после оформления заказа.
В офисе нашей компании
Оплатить и забрать заказанную продукцию Вы можете в нашем офисе по адресу:
г. Чебоксары, ул. И. Франко, д. 3
Принимаем к оплате пластиковые карты.
Аналогично, создаем следующую статью - Наши магазины (stores). Здесь встает вопрос, как вставлять картинки в Joomla. Сами картинки расположены в двух блоках. Такую разметку удобнее всего сделать с помощью таблицы из одной строки и двух столбцов. Используя визуальный редактор, таблица задается кнопочкой Inserts a New Table :
Все изображения, которые вы будете использовать для своих статей, должны храниться в папке stories . Полный путь к этой папке у нас следующий:
Сохраним сюда нашу картинку karta .jpg
Теперь возвращаемся к нашей статье, будем вставлять в нее эти изображения. Встаем курсором мыши в место, куда хотим вставить картинку и на панели форматирования нажимаем на кнопку вставки изображения:
Здесь мы выбираем изображение, задаем необходимые параметры (описание, выравнивание...) и нажимаем кнопку Insert. Все, картинка вставлена.
Чтобы вставлять в Joomla картинки, необходимо:
Поместить картинки в папку stories.
Встать курсором мыши в то место статьи, куда хотим вставить картинку.
Щелкнуть по значку Insert/Edit image. В открывшемся окне выбрать необходимое изображение (щелкнуть по названию в списке), задать необходимые параметры (отступы, выравнивание, описание, размеры) и нажать на кнопку Insert (Вставить).
Удалить картинку можно кнопкой Del на клавиатуре.
Самостоятельно создайте для сайта Иванова Ивана Ивановича два пункта меню: О себе, Мои увлечения. Обязательно отредактируйте маиериалы (цвет, шрифт) и вставляйте картинки с использованием таблиц.
От автора: приветствую Вас уважаемые читатели. В CMS Joomla главная страница пользовательской части сайта – это конечно же его лицо. То есть это первое что видит посетитель, перейдя на сайт. Но как показывает практика большинство новичков не знает как работать с данным разделом сайта. Поэтому в данной статье мы с Вами рассмотрим все, что касается главной страницы CMS Joomla.
Как было сказано выше, главная страница сайта – это, в первую очередь его лицо. А значит, она должна максимально заинтересовать и даже завлечь посетителя, для того что бы он как можно дольше оставался на Вашем сайте. Поэтому данная страница должна быть максимально информативной, красивой и желательно содержать элементы с других страниц сайта, ну или хотя бы ссылки на них, так как это подталкивает пользователя к их посещению.
Теперь рассмотрим ответ на следующий вопрос для CMS Joomla — как сделать главную страницу? Главная страница – это в первую очередь абсолютно обычная страница, как, к примеру, страница контактной информации или отображения конкретного материала. А значит в качестве главной, может быть назначена любая созданная страница Вашего сайта.
Теперь давайте вспомним, как формируются страницы в CMS Joomla. В основном для создания отдельной страницы сайта необходимо создать новый пункт меню, который по сути представляет собой ссылку, ведущей на страницу. При этом за формирование страницы и отображения на ней необходимых данных, отвечает определенный компонент, который выбирается при создании пункта меню. Соответственно создавая или редактируя пункт меню в “Менеджере меню” мы можем назначить страницу, на которую он ссылается в качестве главной, используя специальный переключатель.
Так же, в менеджере материалов, на странице отображения списка созданных пунктов меню, напротив каждого из них доступен специальный переключатель, который так же используется для определения главной страницы сайта.
Далее, как в Joomla изменить главную страницу сайта, если ранее она уже определена, спросите Вы. Ответ на данный вопрос очень прост, достаточно, назначить новую страницу в качестве главной, используя Выше рассмотренные инструменты. Таким образом, выбирая новую страницу, Вы автоматически деактивируете предыдущую.
Теперь давайте рассмотрим, как редактировать главную страницу в Joomla. Как было описано Выше страницы формируются в определенных компонентах и главная – не исключение. А значит для редактирования данной страницы, необходимо отредактировать содержимое которое на ней отображается. К примеру, если на главной странице отображается конкретный материал, значит достаточно внести в него правки, используя менеджер материалов, что бы изменить вид главной страницы.
Так же для редактирования главной страницы можно использовать настройки для конкретного содержимого, которое на ней отображается. То есть для конкретного типа меню, а значит для конкретного содержимого главной страницы доступны различные настройки, которые можно настраивать непосредственно при создании или редактировании конкретного пункта меню. Если вернуться к примеру, с отображением конкретного материала на главной странице, то на странице данного пункта меню мы увидим следующие доступные настройки материала.
При этом обратите внимание, что раздел head главной страницы джумла, то есть я сейчас говорю о мета тегах, так как они очень важны в плане SEO оптимизации Joomla, формируется как правило исходя из содержимого которое отображается в главной странице. Конечно, создавая пункт меню Вы добавляете необходимую информацию в мета теги, но приоритет их ниже по сравнению с мета тегами, которые добавлены в содержимое страницы, к примеру, если на странице отображается материал, то в мета тегах будет отображаться информация, добавленная при его создании.
Таким образом мы с Вами кратко рассмотрели возможности админки Joomla в плане изменения вида главной страницы, но более глубокое редактирование, на уровне программного кода, требует хороших знаний движка, поэтому если данная тема Вам интересна, изучите курс . В нем достаточно подробно рассмотрена структура и принцип работы расширений CMS Joomla.
Вот собственно и все что я хотел сказать Вам в данной статье, а значит и вопрос для CMS Joomla как изменить главную страницу — исчерпан. Всего Вам доброго и удачного кодирования!!!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Для начала, в любом удобном для вас месте создайте папку нашего шаблона «whitesquare». В ней должны находиться три подпапки: css, images и language. В папках css и images создайте файлы index.html со следующим содержимым:
Эти файлы являются заглушками и, по требованиям CMS, должны отображать пустую страницу при обращении к этим папкам напрямую.
Далее, в папке css создайте пустой файл стилей template.css, а в папке language подпапку en-GB, которая будет содержать пустой файл en-GB.tpl_whitesquare.ini и файл en-GB.tpl_whitesquare.sys.ini со следующим содержимым:
TPL_WHITESQUARE_XML_DESCRIPTION="Whitesquare is the Joomla 3 site template."
Давайте подробно разберем, что все это значит. Папка language нужна для локализации, она может содержать подпапки с различными языками: en-GB, ru-RU и т.д. Каждая языковая папка включает два файла с ключами. Ключи представляют собой пару с названием ключа и его значением. Названия ключей для разных языков будут одинаковыми, а значения – разными. Такой механизм позволяет использовать шаблон для создания сайтов на разных языках. Поскольку это учебный пример, будем использовать только английский язык – en-GB. Первый файл en-GB.tpl_whitesquare.ini будет содержать ключи, которые увидят пользователи сайта, а второй - en-GB.tpl_whitesquare.sys.ini будет содержать ключи административных функций.
Далее нужно создать пустые файлы component.php, error.php и index.php. Они нам понадобятся в будущем.
Следующим шагом добавим картинки: favicon.ico, template_preview.png и template_thumbnail.png. Последние две – это превьюшки будущего шаблона и они имеют размеры 640х480 и 206х150 соответственно.
Последний файл, который нужно добавить – это templateDetails.xml. На данном этапе - это самый важный файл, он содержит подробное описание нашего шаблона:
whitesquare
2015-02-25
pcklab
http://www.pcklab.com
2014 Pixel Cook Laboratory. All Rights Reserved.
GNU General Public License version 2 or later; see LICENSE.txt
1.0.0
TPL_WHITESQUARE_XML_DESCRIPTION
css
images
js
language
component.php
error.php
favicon.ico
index.php
template_preview.png
template_thumbnail.png
templateDetails.xml
en-GB/en-GB.tpl_whitesquare.ini
en-GB/en-GB.tpl_whitesquare.sys.ini
Большая часть содержимого этого файла понятна, необходимо пояснить только следующее:
Поле description содержит тот самый ключ локализации, который мы указали в en-GB.tpl_whitesquare.sys.ini
Поле files содержит полный перечень всех файлов и папок, лежащих в корне шаблона.
Поле languages содержит список языковых файлов, а поле positions нам понадобится чуть позже.
Теперь, когда каркас шаблона готов, давайте добавим его в CMS. Для этого откройте панель администратора Joomla!, выберите пункт меню Extension -> Extension manager, перейдите на вкладку Install from Directory и в поле Install Directory укажите путь до папки whitesquare, в которой мы создавали файлы шаблона.
Нажмите кнопку Install и шаблон добавится в систему. Остается только активировать шаблон. Зайдите в меню Extension -> Template manager, найдите шаблон whitesquare в списке и в поле Default, нажмите на звездочку, это сделает наш шаблон – шаблоном по умолчанию. После этого уже можно открыть адрес сайта, где установлена Joomla! и увидите пустую страницу нашего сайта.
Предварительный осмотр
Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также, на всех страницах, кроме главной, есть сайдбар слева и название страницы. Поиск и все виды меню мы оформим в виде модулей Joomla!, а все тексты будут оформлены через механизм локализации.
Структура страниц Большинство руководств по созданию шаблонов для Joomla! ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на Joomla! в рамках предоставленных макетов.Давайте начнем со структуры страниц. Управление страницами осуществляется в панели администратора через меню Content -> Article Manager. Для добавления новой страницы нажмите кнопку New и заполните форму. В поле Title введите заголовок страницы. Остальные поля оставьте без изменений. Добавьте таким образом страницы Home, About us, Services, Partners, Customers, Projects, Careers, Contact. После добавления, список страниц должен выглядеть вот так:
Давайте подробно разберем, что здесь написано. Вначале идет PHP блок, в котором мы определяем необходимые переменные. Первая строка – это стандартная проверка безопасности Joomla! Далее мы устанавливаем переменные приложения, документа, меню и языка. Для подключения стилей и изображений также понадобится переменная, содержащая путь до нашего шаблона. И последняя переменная будет содержать проверку - является ли показываемая страница домашней. Помимо прочего, в этом же блоке подключаем локальный CSS файл нашего шаблона и удаленные стили шрифтов.
Далее идет стандартный html шаблон, в теле которого поместим два блока - .wrapper и footer. Секция head начинается с подключения стандартных заголовков Joomla! Дальше идет мета-тег перевода Internet Explorer в современный режим, а затем специальный скрипт для поддержки HTML5 тегов в старых версиях IE. Блок.wrapper содержит пустые блоки для шапки и заголовка страницы. Последней, но самой важной командой является подключение компонента внутри блока.wrapper – именно она будет добавлять содержимое страницы в шаблон и отображать информационные сообщения.
Теперь нужно стилизовать получившуюся страницу. Сохраните фон страницы в файл images/bg.png и добавьте немного базовых стилей в файл template.css:
Показать код
body {
margin: 0;
border-top: 5px solid #7e7e7e;
background: #f8f8f8 url(../images/bg.png);
color: #8f8f8f;
font: 12px Tahoma, sans-serif;
}
a {
color: #525252;
}
img {
border: 0;
}
p {
margin: 20px 0;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
.inputbox {
padding: 0 10px;
height: 30px;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
color: #b2b2b2;
vertical-align: top;
}
.button {
height: 32px;
border: none;
background-color: #29c5e6;
color: #fff;
font-family: "Oswald", sans-serif;
}
.image {
outline: 1px solid #c9c9c9;
border: 1px solid #fff;
}
figure img {
display: block;
}
.wrapper {
margin: auto;
max-width: 960px;
}
header {
padding: 20px 0;
}
aside {
float: left;
width: 250px;
}
aside + .item-page {
margin-left: 280px;
padding-bottom: 50px;
}
footer {
clear: both;
background: #7e7e7e;
color: #dbdbdb;
font-size: 11px;
}
После этих действий у нас должна появиться серая страница с большим нестилизованным заголовком. К нему мы вернемся позже.Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.svg?1. В блок header нашего шаблона вставьте разметку для логотипа:
">
В качестве альтернативного текста для изображения вставляется текст через стандартную функцию локализации Text::_(). Ключа TPL_WHITESQUARE_LOGO у нас еще нет, поэтому давайте добавим его в файл \language\en-GB\en-GB.tpl_whitesquare.ini:
TPL_WHITESQUARE_LOGO="Whitesquare logo"
К сожалению, после этого текст не появится на странице сайта. Дело в том, что мы добавляем ключ локализации в шаблон, который уже используется системой, а Joomla! так устроена, что она читает ключи локализации из этого файла только при первоначальной установке шаблона. Можно конечно удалить шаблон и добавить его в систему заново, но мы поступим проще – добавим этот же ключ в системный файл {joomla_root}\language\en-GB\en-GB.tpl_whitesquare.ini, где {joomla_root} – это папка, в которую установлена Joomla!
Joomla! уже содержит собственный модуль формы поиска. Его можно найти разделе Extensions -> Module Manager панели администратора. Если в вашей CMS он не установлен, то установить его можно, нажав кнопку New и выбрав из списка пункт Search.
Для того, чтобы поместить этот модуль в шаблон – нужно создать собственную «позицию» для этого модуля. Позиции (positions) – это специально размеченные области шаблона, в которые вставляются модули. Позиции описываются в файле templateDetails.xml в блоке positions:
search
После этого вернитесь в Module Manager и откройте модуль Search на редактирование. И в полях укажите следующие значения:
Box Label: пробел
Box Text: Search
Search Button: Yes
Button position: Right
Search Button Image: No
Button text: GO
Show Title: Hide
Position: Whitesquare Search
А на вкладке Advanced в поле Module Class Suffix введите «-block». Это позволит разделить стили формы поиска от содержимого страницы поиска.
Теперь, когда модуль подготовлен, нужно вставить его в шаблон index.php:
...
Осталось добавить стили в template.css:
Показать код
Search-block {
float: right;
}
.search-query {
margin-right: -4px;
}
Меню на страницах сайта создается в три этапа: сначала нужно создать абстрактное меню и определить его пункты, затем определить для него позицию в шаблоне и последним этапом создать модуль, который свяжет абстрактное меню с конкретной позицией.
Управление списками меню осуществляется в разделе Menus -> Menu Manager панели администратора. По умолчанию там уже есть меню под названием Main Menu. Зайдите в него.
Для того, чтобы создать новый пункт меню – нажмите кнопку New и заполните открывшуюся форму – следующим образом:
Menu Title: название страницы, например About us
Menu Item Type: Single Article
Select Article: About us
Создайте аналогичным образом все пункты главного меню: Home, About us, Services, Partners, Customers, Projects, Careers, Contact.
…
menu
Далее нужно создать модуль, который будет содержать меню. Модуль главного меню по умолчанию уже установлен в Joomla!, он называется Main Menu. Откройте его через меню Extensions -> Module Manager -> Main Menu. В поле Select Menu укажите Main Menu, а в поле Position: Whitesquare Menu. Поле этого нужно перейти на вкладку Advanced и в поле Module tag выбрать значение nav, а в поле Menu Class Suffix ввести «-top». Это позволит нам задавать CSS классы для этого меню более гибко и семантично.
Давайте теперь добавим нужную позицию в сам шаблон сразу после шапки:
...
На данном этапе меню уже появится на страницах, но без стилей. Стилизуем его:
Показать код
Main-navigation {
border: 1px solid #e7e7e7;
background: #f3f3f3;
}
.menu-top {
margin: 0;
padding: 0;
}
.menu-top li {
display: inline-block;
margin: 0;
padding: 10px 30px;
list-style-position: inside;
text-transform: uppercase;
font: 14px "Oswald", sans-serif;
}
.menu-top li.current {
background: #29c5e6;
}
.menu-top a {
color: #b2b2b2;
text-decoration: none;
}
.menu-top li.current a {
color: #fff;
}
Joomla! автоматически вставляет заголовки статей в содержимое страницы, но на главной странице нам заголовок не нужен, а на других, он должен иметь совсем другую верстку, поэтому давайте просто отключим автоматическую вставку заголовка и вставим заголовок внутри шаблона так, как это нам нужно.
Для начала немного теории. Настройки отображения элементов страниц задаются в Joomla! в трёх местах:
- В настройках Article Manager задаются глобальные настройки для всех статей.
- В свойствах каждой статьи задаются настройки этой статьи и перебивают глобальные
- Если на странице добавлено меню, то настройки пункта меню, указывающего на данную страницу, будут перебивать все остальные настройки
- В панели администратора зайдите в Content -> Article manager, нажмите кнопку Options и на первой вкладке Articles для всех полей поставьте значения Hide и No.
- Далее, там же, в Article manager зайдите в каждую статью на вкладку Options и поставьте для всех полей значение Use Global.
- И последним шагом зайдите в Menus -> Menu Manager -> Main Menu и для каждой станицы на вкладке Options так же поставьте для всех полей значение Use Global.
Теперь нужно стилизовать получившийся блок. Сохраните фон заголовка в файл images /h1-bg.png и добавьте стилевые правила:
Показать код
Main-heading {
margin: 30px 0;
padding-left: 20px;
background: transparent url(../images/h1-bg.png);
}
.main-heading h1 {
display: inline-block;
margin: 0;
padding: 0 10px;
background: url(../images/bg.png);
color: #7e7e7e;
text-transform: uppercase;
font: 40px/40px "Oswald", sans-serif;
}
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
Images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок
После того, как все ресурсы подготовлены, давайте взглянем на блок Sitemap. Он состоит из двух колонок. Сейчас, когда нативная поддержка переноса текста по столбцам не очень хорошо поддерживается в популярных браузерах гораздо проще сделать меню, состоящее из двух столбцов. Для этого в разделе Menus -> Menu Manager создайте меню Sitemap left с пунктами Home, About, Services и Sitemap right с пунктами Partners, Support и Contact. Пункты меню должны ссылаться на соответствующие статьи. Для каждого из этих двух меню нужно создать позиции sitemap-left и sitemap-right и связать меню с позициями через новые модули Sitemap left и Sitemap right. При добавлении модулей на вкладке Advanced в поле Menu Class Suffix вставьте значение –sitemap, для того, чтобы в CSS стилях отличать этот тип меню от остальных.
Далее делаем вёрстку в блоке footer файла index.php:
23 oct
Nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
">В этом блоке используется несколько локализованных строк, давайте их добавим в файлы локализации, как мы делали в блоке логотипа:
TPL_WHITESQUARE_TWITTER_FEED_TITLE="Twitter feed"
TPL_WHITESQUARE_SITEMAP_TITLE="Sitemap"
TPL_WHITESQUARE_SOCIAL_TITLE="Social networks"
TPL_WHITESQUARE_COPYRIGHT="Copyright 2012 Whitesquare. A pcklab creation"
Прописываем стили в template.css:
Показать код
Footer-content {
margin: auto;
padding: 10px 0;
max-width: 960px;
height: 90px;
}
.footer-heading {
margin: 0 0 10px 0;
border-bottom: 1px solid #919191;
color: #fff;
text-transform: uppercase;
font: 14px "Oswald", sans-serif;
}
footer a {
color: #dbdbdb;
}
footer p {
margin: 5px 0;
}
.twitter-time {
color: #b4aeae;
}
.twitter {
float: left;
width: 300px;
}
.twitter p {
padding-right: 15px;
}
.sitemap {
float: left;
margin-left: 20px;
padding-right: 15px;
width: 150px;
}
.sitemap .column {
display: inline-block;
margin-left: 40px;
}
.sitemap .column.first {
margin-left: 0;
}
.menu-sitemap {
margin: 0;
padding: 0;
list-style-type: none;
}
.sitemap a {
display: block;
margin-bottom: 5px;
text-decoration: none;
font-size: 12px;
}
.sitemap a:hover {
text-decoration: underline;
}
.social {
float: left;
margin-left: 20px;
width: 130px;
}
.social-icon {
display: inline-block;
margin-right: 10px;
width: 30px;
height: 30px;
background: url(../images/social.png) no-repeat;
}
.social-icon-small {
display: inline-block;
margin: 5px 6px 0 0;
width: 16px;
height: 16px;
background: url(../images/social-small.png) no-repeat;
}
.twitter-icon {
background-position: 0 0;
}
.facebook-icon {
background-position: -30px 0;
}
.google-plus-icon {
background-position: -60px 0;
}
.vimeo-icon {
background-position: 0 0;
}
.youtube-icon {
background-position: -16px 0;
}
.flickr-icon {
background-position: -32px 0;
}
.instagram-icon {
background-position: -48px 0;
}
.rss-icon {
background-position: -64px 0;
}
.footer-logo {
float: right;
margin-top: 20px;
text-align: right;
font-size: 10px;
}
В итоге внутренняя страница сайта должна выглядеть вот так:
Главная страница у нас уже создана. Наполнение ее контентом выходит за рамки создания шаблона Joomla!, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самого шаблона. Первым делом необходимо нарезать все изображения этой страницы и сохранить в папку images, которая находится в корне папки, где установлена Joomla!. Назовём эти изображения так:
Home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png
Далее, перейдите в панели администратора к форме редактирования главной страницы Content -> Article Manager -> Home и на вкладке Content нажмите Tools -> Source code и введите содержимое страницы:
Показать код
Fusce vitae nibn quis diam fermentum Etiam adipscing ultricies commodo.
Read more
A word from our ceo
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
Yane Naumoski, CEO
ServicesRead more
Our teams
Lorem ipsum
Lorem ipsum
Lorem ipsum
24/7/365 Support
Our clients
Теперь осталось стилизовать данный код.
Показать код
Slider {
margin-top: 30px;
text-transform: uppercase;
font-weight: 300;
font-family: "Oswald", sans-serif;
}
.slider .content {
padding: 30px 40px;
height: 220px;
background: #e2e2e2;
}
.slider .title {
color: #5a5a5a;
font-size: 42px;
}
.slider .subtitle {
color: #acacac;
font-size: 20px;
}
.slider .links {
display: block;
margin: 0;
padding: 10px;
border-bottom: 1px solid #e7e7e7;
background: #f3f3f3;
color: #8f8f8f;
counter-reset: list 0;
}
.slider .links li {
display: inline-block;
margin-right: 55px;
font-size: 18px;
line-height: 23px;
cursor: pointer;
}
.slider .links li.active {
color: #29c5e6;
}
.slider .links li:before {
display: inline-block;
margin-right: 10px;
width: 23px;
background: #8f8f8f;
color: #fff;
content: counter(list) " ";
counter-increment: list;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.slider .links li.active:before {
background: #29c5e6;
}
.teaser {
display: block;
float: left;
box-sizing: border-box;
padding: 0 10px;
vertical-align: top;
}
.teaser .heading {
margin: 40px 0 20px;
height: 16px;
background: transparent url(../images/h1-bg.png);
}
.teaser .bullet {
display: inline-block;
margin-right: -4px;
width: 16px;
height: 16px;
background: #29c5e6;
vertical-align: top;
}
.teaser .heading-text {
display: inline-block;
margin: 0;
padding: 0 10px;
background: url(../images/bg.png);
text-transform: uppercase;
font: normal 14px/16px "Oswald", sans-serif;
}
.teaser .image {
float: left;
margin-right: 20px;
}
.teaser .small-block {
margin-bottom: 10px;
}
.teaser .small-block .image {
margin-right: 10px;
}
.teaser .more,
.teaser .more a {
margin-bottom: 0;
color: #525252;
}
.teaser-small-heading {
display: block;
margin: 0;
color: #525252;
text-transform: uppercase;
font-weight: normal;
font-size: 11px;
}
.teaser-small-paragraph {
margin: 4px 0;
font-size: 11px;
}
.clients img {
display: inline-block;
margin-right: 30px;
}
Давайте добавим его в index.php перед вызовом контента страницы:
">
Этот блок будет выводиться на всех страницах, кроме главной. Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов.
Для полноты картины в качестве подменю предлагаю показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали другие виды меню. Создайте статьи под названиями: Lorem ipsum, Donec tincidunt laoreet, Vestibulum elit, Etiam pharetra, Phasellus placerat. Затем создайте новое меню под названием Submenu и добавьте в него вышеперечисленные страницы. После этого, создайте позицию submenu в templateDetails.xml и модуль Submenu, использующий эту позицию и меню Submenu. В свойствах модуля на вкладке Advanced укажите Menu Class Suffix: «-aside»
Блок карты особых вопросов не вызывает, не забудьте только добавить новый ключ локализации:
TPL_WHITESQUARE_OFFICES_TITLE="Our offices"
В качестве заглушки для карты создайте пустой файл sample.png и сохраните его в папку images в корне сайта Joomla!
В заключение, нам нужно добавить стили для вёрстки:
Показать код
Aside-navigation {
border: 1px solid #e7e7e7;
background: #f3f3f3;
}
.menu-aside {
margin: 0;
padding: 0;
text-transform: uppercase;
}
.menu-aside li {
padding: 10px;
border-top: 1px solid #e7e7e7;
list-style: square inside;
font: 14px "Oswald", sans-serif;
font-weight: 300;
}
.menu-aside li:first-child {
border: none;
}
.menu-aside li.current-menu-item,
.menu-aside li.current-menu-item a {
color: #29c5e6;
}
.menu-aside a {
color: #8f8f8f;
text-decoration: none;
}
.sidebar-heading {
margin: 30px 0 0 0;
padding: 10px;
background: #29c5e6;
color: #fff;
text-transform: uppercase;
font: 14px "Oswald", sans-serif;
}
.map {
margin: 0 0 30px 0;
padding: 10px;
border: 1px solid #e7e7e7;
background: #f3f3f3;
}
Теперь давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в папку images сайта Joomla! Назовите изображения вот так:
About-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg
Показать код
“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
John Doe, Lorem IpsumLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat.
Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor.
John Doeceo
Saundra Pittsleyteam leader
Julio Simsersenior developer
Margery Venutisenior developer
Fernando Tondreadeveloper
Ericka Nobrigaart director
Cody Roussellesenior ui designer
Erik Wollmansenior ui designer
Dona Shoffux designer
Darryl Bruntonui designer
И стили в template.css:
Показать код
Main-blockquote {
margin: 0;
padding: 10px 20px;
background: #29c5e6;
font-weight: 300;
font-family: "Oswald", sans-serif;
}
.main-blockquote p {
margin: 0;
color: #fff;
font-style: italic;
font-size: 33px;
}
.main-blockquote cite {
display: block;
margin: 0;
color: #1d8ea6;
text-align: right;
font-style: normal;
font-size: 20px;
}
.content-heading {
clear: both;
margin: 30px 0 0 0;
padding: 0 10px;
background: #29c5e6;
color: #fff;
text-transform: uppercase;
font: 30px "Oswald", sans-serif;
font-weight: 300;
}
.footer-content {
margin: auto;
padding: 10px 0;
max-width: 960px;
height: 90px;
}
.footer-heading {
margin: 0 0 10px 0;
border-bottom: 1px solid #919191;
color: #fff;
text-transform: uppercase;
font: 14px "Oswald", sans-serif;
}
footer a {
color: #dbdbdb;
}
footer p {
margin: 5px 0;
}
.team-row figure {
display: inline-block;
margin: 20px 0 0;
font-weight: 300;
font-family: "Oswald", sans-serif;
}
.team-row figure + figure {
margin-left: 43px;
}
.team-row figcaption {
margin-top: 5px;
font-weight: 300;
font-size: 16px;
}
.team-row .occupation {
display: block;
color: #29c5e6;
font-size: 14px;
}
В самом начале, когда мы создавали шаблон шапки, мы добавили в него поиск. Результатом поиска является страница, которая сейчас не очень хорошо выглядит. Давайте добавим для нее стили:
Показать код
Search {
margin-left: 280px;
padding-bottom: 50px;
}
.icon-search {
display: inline-block;
width: 21px;
height: 21px;
background: url(../images/search.png) center center no-repeat;
}
.search .btn-toolbar {
height: 30px;
}
Модуль поиска предусматривает, что в шаблоне должна быть иконка поиска для кнопки, но поскольку в дизайне ее нет, то придется добавить ее самим. Для этого найдите любую бесплатную иконку с изображением лупы и сохраните ее под названием search.png в папку images шаблона. Размер картинки должен быть 16х16 пикселей.Страница печати Помимо index.php в корне шаблона лежат еще 2 php файла. Первый из них – это сomponent.php. Этот файл отображает страницу печати, которую пользователь сможет открыть, кликнув на иконку печати в содержании каждой статьи. В самом начале мы отключили показ этих иконок в статьях через меню Content -> Article Manager -> Options -> Show Print Icon в панели администратора. Но, поскольку мы делаем универсальный шаблон, создать этот файл мы обязаны. Наполните его следующим содержимым:
Как вы видите, этот файл полностью повторяет структуру файла index.php. Отличие только в том, что мы убрали ненужные для печати блоки: шапку, футер и боковую колонку.
Последняя страница, которую осталось оформить – это страница вывода ошибки. Ее шаблон описывается в файле error.php. Код этого файла будет выглядеть следующим образом:
">
В целом структура здесь аналогична предыдущим страницам, но есть несколько нюансов. Во-первых, данный тип страницы не поддерживает конструкции вида «», поэтому пришлось отказаться от всех модулей и даже динамического блока head, поэтому теги в блоке head прописаны вручную. В заголовке страницы появился новый ключ локализации: TPL_WHITESQUARE_ERROR со значением «Error». Не забудьте прописать его в файлах локализации. И в области контента страницы выводится сообщения с кодом и текстом ошибки.
Добавить метки
Главная страница сайта Joomla, открывается по основному адресу сайта, его домену . Можно сказать, что через главную страницу посетители заходят на сайт. Именно поэтому, главную страницу в среде оптимизаторов, называют «дорвей» (doorway-входная дверь), а в российской среде, «морда» или «хомяк» (home page).
Будучи «лицом сайта», главная страница сайта имеет повышенное значение в удержании посетителя на сайте и продуманного направления посетителя по сайту (навигации по сайту).
Как создается главная страница JoomlaНа сайте Joomla инструментарий для создания главной страницы продуман очень хорошо. Инструменты понятны, не имеют сложных настроек и максимально упрощены. Общий принцип создания главной страницы сайта таков:
На сайте должен быть создан хотя бы один материал;
- Создаем меню и пункт меню нужного типа (Вкладка «Менеджер меню»);
- При создании пункта меню, назначаем его «Главной страницей» или «Home» или как угодно;
- Всё! Главная страница сайта, в самом простом её исполнении, создана.
Общий принцип пересоздания главной страницы сайта таков:
Вариант 1Если у вас несколько пунктов меню, и вы решили поменять главную страницу сайта. Для этого в списке пунктов меню, активируем новую главную страницу Joomla кнопкой «Звезда» или чекбоксом «Главная».
После этого, система автоматически пересоздаст главную страницу сайта. После очистки кэша сайта (если включено его использование), изменения перейдут на пользовательскую часть (фронтэнд) сайта.
При создании или редактировании пункта меню, просто включите кнопку «Главная страница».
На сайте есть инструмент «Избранные материалы». Это группа материалов, для которой можно создать отдельный пункт меню, типа «Избранные материалы». Если можно создать пункт меню, то можно этот пункт меню назначить главной страницей.
Очень часто, используя группу «Избранные материалы», создают главную страницу сайта Joomla в виде блога избранных материалов. То есть, получаем динамическую (постоянно обновляемую) главную страницу сайта. Для сравнения, на сайтах WordPress, это аналог страницы последних публикаций.
class="eliadunit">
Статическая главная страница сайта JoomlaЕсли вы используете CMS Joomla, не для информационного, а коммерческого сайта (интернет магазин, корпоративный сайт), то вполне разумно сделать главную страницу в виде своеобразной витрины: расширенной информации о товарах магазина или услугах фирмы.
Создается такая страница по аналогичному алгоритму:
- Сначала нужно создать страницу с материалом в текстовом редакторе. Материал нужно красочно и главное, информативно, оформить;
- Потом создается пункт меню по типу «Отдельный материал». При выборе материала для этого пункта меню выбирается созданная страница;
- Этот пункт меню назначается главной страницей.
В результате по открытию домена, пользователь увидит важный информационный материал, обвешанный информационными модулями, показом которых можно управлять.
Модули на главной страницеПоказ информационных модулей на главной странице можно и нужно регулировать. Для этого есть все необходимые инструменты. При создании модуля есть вкладка «Видимость». На этой вкладке можно указать, показывать модуль только на главной странице или наоборот, удалить модуль с главной страницы.
Используя именно этот инструмент, можно создать главную страницу самого различного вида:
- В виде отдельных модулей с минимальным содержанием;
- В виде большого материала о сайте с навигацией без боковых колонок;
- В виде страницы регистрации;
- В виде страницы контактов и т.д.
Именно так создаются лейдинг пейдж на CMS Joomla.
Как обновлять статическую главную страницуГлавная страница сайта это начало не только просмотра сайта, но и начало обхода сайта поисковиками. Поисковики должны видеть обновление «морды» и именно по этому, главная страница должна постоянно обновляться. Для обновления можно использовать следующие модули , поместив их на главную страницу:
- Модуль «Последние записи»;
- Модуль «RSS ленты», включая RSS ленты своих постоянно обновляемых новостей или RSS ленту блога «Избранных материалов».
Стоит кратко отметить (подробно будет отдельный материал), что CMS Joomla позволяет быстро и легко создавать красочные лендинг пейдж сайта. Для этого используют, инструментарий главной страницы сайта и возможность использования двух шаблонов на сайте : общий шаблон для основного сайта и одностраничный шаблон для лендинг пейдж.
ДополнениеВ интернет магазинах созданных на Joomla, вопрос настройки внешнего вида главной страницы определяется настройками расширения для магазина. Это может быть витрина товаров или списки товаров по разделам или отдельная страница. Однако, все эти настройки основываются на общий инструментарий базовой Joomla и назначение главной страницы мало чем отличается от действий описанных в той статье.
Создадим страницу с контентом и ведущий на неё пункт меню.
Как создать материал1. В главном меню панели управления Joomla выберите Материалы -> Менеджер материалов .
2. Откроется страница с уже созданными статьями. Их можно просмотреть, отредактировать или удалить, но сейчас нас это не интересует. Чтобы добавить новую статью, нажмите кнопку Создать в левой верхней части страницы.
3. В поле Заголовок введите название статьи.
4. В основное поле вставьте её текст. Создавать материалы прямо из админ-панели удобно, потому как Joomla предлагает для этой цели функциональный и удобный визуальный редактор, основные инструменты форматирования в котором не спрятаны глубоко и у большинства пользователей не вызовут вопросов. Однако есть некоторые возможности, о которых стоит упомянуть.
- Редактор может работать как в визуальном режиме, так и в режиме просмотра исходного кода материала. Чтобы активировать его, нажмите Инструменты -> Исходный код .
- Обратите внимание на вкладки. Самое популярное действие, кроме правки текста - добавление в него картинок. Эта функция в расширенном виде доступна на вкладке Изображения и ссылки .
- Простая вставка картинок (без широких возможностей) спрятана не так далеко: Вставить -> Вставить/редактировать изображение .
Однако вместо загрузки файла картинки такой подход предполагает вставку адреса ссылки, ведущей на рисунок.
- На вкладке Материал есть кнопка Модуль , с помощью которой можно вывести разного рода содержимое (архивы статей, последние, самые популярные посты и т. д.) прямо в материале. Нажмите кнопку Модуль и выберите, информацию какого именно хотите вывести, нажав на его названии.
После выбора в материале появится новая строка кода.
5. Когда материал готов, из раскрывающегося списка Категории выберите раздел, которому он принадлежит (как создавать категории, читайте здесь). Кроме того, вы можете добавить запись в Избранное, если нажмёте Да в одноимённой области.
6. Из раскрывающегося списка Доступ выберите, кто может просматривать материал. По умолчанию установлен уровень доступа Public - это значит, что страница будет находиться в публичном доступе и просмотреть её сможет любой желающий.
7. В поле Метки введите теги поста.
8. Когда материал будет полностью готов к публикации, нажмите кнопку Сохранить .
1. В панели управления Joomla откройте Меню -> Менеджер меню .
2. Загрузится страница со списком доступных меню. Щёлкните на том, в котором должен появиться новый пункт. Шаблон, установленный по умолчанию, содержит три меню: Top (верхнее), Main Menu (отображается справа) и User Menu (меню пользователя, которое появляется только после авторизации на сайте). Новый пункт можно добавить в любое из них, но я создам его в меню Top.
В нём мы видим два совершенно ненужных пункта (Sample Sites и Joomla.org ) и один (Home ), который надо переименовать, он ведёт на главную страницу сайта. Установите флажки рядом с ненужными пунктами и нажмите кнопку В корзину , щёлкните на оставшемся пункте, в поле Заголовок меню открывшейся страницы вместо Home введите Главная и нажмите Сохранить . В результате верхнее меню сайта полностью поменяет структуру.
3. Для добавления пункта в редакторе меню Top нажмите кнопку Создать .
4. Нажмите кнопку Выбрать области Тип пункта меню открывшейся страницы.
5. Из появившегося списка выберите Материалы -> Материал (подробнее об остальных типах меню читайте здесь).
6. В области Выбор материала нажмите кнопку Выбрать .
7. Либо найдите нужный материал в списке имеющихся, либо воспользуйтесь поиском - в поле Фильтр введите заголовок вашей статьи и нажмите Искать . Когда пост будет найден, щёлкните на нём кнопкой мыши.
8. Чтобы добавить пункт, нажмите кнопку Сохранить . Обратите внимание на дополнительные настройки: в частности, вы можете задавать родительский элемент меню (с помощью этой функции можно создавать подменю), устанавливать уровень доступа (как в материалах), изменять порядок расположения элементов и т. д.
Теперь можно перейти на сайт и посмотреть, что получилось - щёлкните на вновь созданный пункт меню и посмотрите свой первый материал.
