Как добавить страницу в joomla. Создание страницы в Joomla на примере материала
Эти файлы являются заглушками и, по требованиям 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, страница называется «материал».
Условно процесс добавления страницы состоит из двух этапов:
Итак, разберем эти пункты подробнее:
Создание материала1. Войдите в панель управления сайтом и кликнете на «Менеджер материалов»
2. Если Вы планируете создать новую страницу, то в «менеджере материалов» кликнете на кнопку «создать»:
3. В окне добавления материала укажите его название, и вставьте или напишите текст материала.
После этого, сохраните и закройте «материал». Поздравляем Вас, Вы создали новую страницу, теперь нужно сделать так, чтобы она появилась на Вашем сайте.
Привязка «материала» к меню сайтаВы создали новую страницу сайта, теперь, чтобы посетитель сайта смог зайти на эту страницу нужно создать для нее новый пункт меню.
1. Вернитесь на главную страницу панели управления сайтом и зайдите в «Менеджер меню»
2. Выберите меню, в которое Вы хотите добавить новый пункт, как правило, это «Вертикальное меню»
3. Войдя в редактирование «Вертикального меню», нажмите на кнопку «Создать», для создания нового пункта меню.
4. Сначала нужно выбрать тип пункта меню. Для этого в первой строке нажмите кнопку «выбрать»
5. Выберите тип пункта меню «Материал»
6. Укажите название пункта меню, выберите из списка нужный материал, который будет открываться при клике на данный пункт меню. Больше ничего заполнять не нужно! Сохраните пункт меню. (Для увеличения изображение кликнете по нему мышью)
(Если Вы хотите добавить новый материал в качестве подпункта к уже существующему пункту меню, то Вам нужно указать «Родительский элемент». Для этого в поле «Родительский элемент» Вам нужно выбрать основной пункт меню, для которого Вы создаете новый подпункт.)
Вы добавили новый «материал» и пункт меню с привязкой к данному материалу. Откройте Ваш сайт, проверьте проделанную работу. Должен появиться новый пункт меню в вертикальном меню, при клике на который, должен открываться созданный Вами «материал» (новая страница).
Десять лет назад это могло казаться фантазией, но сейчас даже начинающий пользователь может создать самый простой сайт. Осуществить свою задумку легко, используя специальные движки, которые устанавливаются за пару минут.
ИнструкцияНаверное, каждому из нас приходилось не раз попадать на страницы некоторых сайтов, которые не предоставляли информацию, а сообщали о том, что искомая страница удалена или просто не существует. Выглядеть такие страницы могут совершенно по-разному. На одних сайтах несуществующая страница может быть в юмористическом стиле, на других может быть оформлена строго и серьезно, а на некоторых может вообще не быть никакого оформления. Такие страницы обычно открываются пользователю в тех случаях, когда страница сайта была удалена владельцем сайта либо перенесена в другую категорию, либо вы неверно ввели адрес в браузерной строке.
Что такое ошибка 404Итак, несуществующая страница является ошибкой 404 и сообщает посетителям сайта и роботам, что такого адреса на сайте больше нет или не было вообще. Чаще всего с такой страницы настроен переход на главную страницу сайта или встроена форма поиска. но в любом случае, необходимо позаботиться, чтобы пользователю было все понятно, доступно и он бы не покинул сайт, а перешел к основному контенту.
Кроме того, что несуществующая страница должна привлечь внимание пользователя к сайту, но самое важное, что эта страница должна вернуть поисковым роботам правильный код - код ошибки 404.
Например, вы удалили с сайта какую-то страницу, которая уже была проиндексирована поисковыми роботами и выдается в поисковой выдаче. Так вот, если страница возвращает верный код, то со временем роботы перестанут выдавать ее в поиске. Если же код настроен неверно, то пользователи так и будут попадать на эту страницу и со верменем, когда таких страниц будет много, сайт может потерять позиции в поиске, ведь код будет сообщать роботам, что страница реальна, а информации на ней не будет и роботы могут посчитать сайт спамным и даже отправить под фильтр. К этому стоит отнестись серьезно и настроить все правильно.
Изначално в Джумле уже есть стандартная страница ошибки 404 и выглядит она вот так:
Но думаю, многие со мной согласятся, что выглядит страничка не совсем приглядно и не каждый догадается перейти по ссылке "домашняя страница". Большинство пользователей могут просто закрыть сайт и больше на него не возвращаться, а кто-то даже может принять такую страницу за вирусную. Поэтому я предлагаю заменить стандартную страницу на свою, котороая сможет убедить пользователя, что в целом с сайтом все в порядке, просто адреса именно этой страницы на сайте нет.
Как создать собственную страницу 404 в Joomla 3Большинство вебмастеров учат делать страницу 404 непосредственно на сайте. Для этого следует создать материал с названием error-404, вывести его пунктом меню с таким же названием, затем опубликовать это меню фиктивным модулем (без позиции), которое не будет отображаться на сайте и прописать в коде путь к этой странице. Таким образом страница 404 вписана в шаблон и пользователь попадает сразу на сайт и чувствует себя вполне комфортно. Но есть у этого метода один, но очень весомый минус, такая страница возвращает роботам код 200, что означает, что страница нормально существует, контент в порядке, хотя на самом деле это далеко не так. В самом лучшем случае, при более тонких настройках в нескольких файлах сайта страница возвращает код 302, что означает: страница удалена временно, и это тоже не правильно!
Мы же будем создавать правильную страницу, которая будет понятна для пользователей и будет возвращать правильный код (ответ сервера) поисковым роботам.
Итак, необходимо создать файл страницы 404 с названием error в формате php и загрузить его в папку с шаблоном сайта. Только и всего! Не нужно танцев с бубном, не требуется никаких изменений в кодах, всего лишь один файл и изображение (при необходимоcти), больше ничего. Все просто, доступно и даже самый неопытный вебмастер сможет это сделать.
Если пожелаете, сможете создать страницу error.php самостоятельно, а если хотите, можете просто скачать готовый вариант из тех, что я для вас подготовила (ссылки на скачивание - в конце урока). Скачанный архив нужно будет распаковать и выполнить три действия:
Если со временем вы пожелаете изображение заменить, то создайте картинку с таким же названием и расширением м просто загрузите на сервер с заменой.
Как проверить правильно ли создана страница ошибки 404После того, как все действия будут выполнены, откройте свой сайт и введите после названия домена любое сочетание символов вашдомен.ру/аоала9в8во
Должна будет открыться страница, которую вы создали.
Далее следует проверить, верный ли код возвращает страница. Сделать это можно в вебмастере яндекса, по адресу: https://beta.webmaster.yandex.ru/tools/server-response/ .
Ну что ж, если страница открывает правильно и сервер возвращает код ошибки 404, значит вы создали правильную страницу ошибки 404! Я вас поздравляю и желаю успешного продвижения проектов!
Страница ошибки 404 - скачатьВыберите страницу, которая вам больше нравится и скачайте архив с файлами страницы внизу скриншота. Затем выполните все, как написано выше и правильная страница ошибки 404 готова!
От автора: приветствую Вас уважаемые читатели. В CMS Joomla главная страница пользовательской части сайта – это конечно же его лицо. То есть это первое что видит посетитель, перейдя на сайт. Но как показывает практика большинство новичков не знает как работать с данным разделом сайта. Поэтому в данной статье мы с Вами рассмотрим все, что касается главной страницы CMS Joomla.
Как было сказано выше, главная страница сайта – это, в первую очередь его лицо. А значит, она должна максимально заинтересовать и даже завлечь посетителя, для того что бы он как можно дольше оставался на Вашем сайте. Поэтому данная страница должна быть максимально информативной, красивой и желательно содержать элементы с других страниц сайта, ну или хотя бы ссылки на них, так как это подталкивает пользователя к их посещению.
Теперь рассмотрим ответ на следующий вопрос для CMS Joomla — как сделать главную страницу? Главная страница – это в первую очередь абсолютно обычная страница, как, к примеру, страница контактной информации или отображения конкретного материала. А значит в качестве главной, может быть назначена любая созданная страница Вашего сайта.
Теперь давайте вспомним, как формируются страницы в CMS Joomla. В основном для создания отдельной страницы сайта необходимо создать новый пункт меню, который по сути представляет собой ссылку, ведущей на страницу. При этом за формирование страницы и отображения на ней необходимых данных, отвечает определенный компонент, который выбирается при создании пункта меню. Соответственно создавая или редактируя пункт меню в “Менеджере меню” мы можем назначить страницу, на которую он ссылается в качестве главной, используя специальный переключатель.
Так же, в менеджере материалов, на странице отображения списка созданных пунктов меню, напротив каждого из них доступен специальный переключатель, который так же используется для определения главной страницы сайта.
Далее, как в Joomla изменить главную страницу сайта, если ранее она уже определена, спросите Вы. Ответ на данный вопрос очень прост, достаточно, назначить новую страницу в качестве главной, используя Выше рассмотренные инструменты. Таким образом, выбирая новую страницу, Вы автоматически деактивируете предыдущую.
Теперь давайте рассмотрим, как редактировать главную страницу в Joomla. Как было описано Выше страницы формируются в определенных компонентах и главная – не исключение. А значит для редактирования данной страницы, необходимо отредактировать содержимое которое на ней отображается. К примеру, если на главной странице отображается конкретный материал, значит достаточно внести в него правки, используя менеджер материалов, что бы изменить вид главной страницы.
Так же для редактирования главной страницы можно использовать настройки для конкретного содержимого, которое на ней отображается. То есть для конкретного типа меню, а значит для конкретного содержимого главной страницы доступны различные настройки, которые можно настраивать непосредственно при создании или редактировании конкретного пункта меню. Если вернуться к примеру, с отображением конкретного материала на главной странице, то на странице данного пункта меню мы увидим следующие доступные настройки материала.
При этом обратите внимание, что раздел head главной страницы джумла, то есть я сейчас говорю о мета тегах, так как они очень важны в плане SEO оптимизации Joomla, формируется как правило исходя из содержимого которое отображается в главной странице. Конечно, создавая пункт меню Вы добавляете необходимую информацию в мета теги, но приоритет их ниже по сравнению с мета тегами, которые добавлены в содержимое страницы, к примеру, если на странице отображается материал, то в мета тегах будет отображаться информация, добавленная при его создании.
Таким образом мы с Вами кратко рассмотрели возможности админки Joomla в плане изменения вида главной страницы, но более глубокое редактирование, на уровне программного кода, требует хороших знаний движка, поэтому если данная тема Вам интересна, изучите курс . В нем достаточно подробно рассмотрена структура и принцип работы расширений CMS Joomla.
Вот собственно и все что я хотел сказать Вам в данной статье, а значит и вопрос для CMS Joomla как изменить главную страницу — исчерпан. Всего Вам доброго и удачного кодирования!!!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении