Как настроить сайт?

23.01.2024

Рекомендации по вёрстке

К сайту можно подключить любой HTML-шаблон, но есть несколько рекомендаций, отступления от которых редко будут критичными:

  • Адреса файлов с изображениями, скриптами, стилями и др. файлов, для которых необходимо указание относительного URL, а также ссылки на страницы лучше начинать с ведущего слеша / в src и href
  • Изображения, необходимые только для дизайна желательно сохранять в папке /upload/image/design/default/
  • CSS-стили желательно сохранять в папке /css/
  • JS-скрипты желательно сохранять в папке /js/
  • Содержимое любых редактируемых полей должно быть одинаково оформлено в CSS, как без помещения всего целиком в тег p или div, так и без этого, т.к. эти теги могут добавлять различные WYSIWYG-редакторы контента. Это в том числе относится к:
    • основному тексту страницы,
    • контактным данным, которые видны на всех страницах
    • информации об авторских правах, которые видны на всех страницах
    • и т.п.
  • Аналогично предыдущему пункту, учитывайте, что какой-то блок может быть скрыт или отображён при выполнении или невыполнении, каких-то условий. Важно, чтобы соседствующие или другим образом связанные блоки, продолжали отображаться корректно

Первый запуск

После того, как сайт установлен на хостинг или виртуальный веб-сервер, и Вы уже перейшли в административный интерфейс по адресу вида http://(ваш-домен)/admin.php, до того, как задать параметры для доступа к базе данных нажмите по кнопке Создать администратора и укажите логин (e-mail) и пароль, которые далее будете использовать для входа в "админку".

Здесь же можно настроить кэширование, нажав по соответствующей кнопке

Настройка шаблонов

Прежде, чем перейти к дальшейшей настройки, ознакомьтесь со следующими статьями:

  1. Что такое Комплект поставки?
  2. Что такое Шаблон контента?
  3. Что такое Вкладки?
  4. Что такое Элементы?
  5. Что такое Свойства?
  6. Что такое Плагины?

При установке CMS в комплекте будет доступно сразу же несколько шаблонов. Можно их сразу удалить, но пока лучше рассмотрим вариант с их использованием и переделкой под цели Вашего сайта.

  1. Через меню администратора перейдите в раздел Справочники \ Шаблоны и нажмите Редактировать (карандашик) напротив шаблона Обычная страница.
  2. Перейдите на вкладку Структура веб-страницы и в поле HTML-код веб-страницы замените всё, что в нём есть, HTML-кодов обычной страницы Вашего сайта. Страницы новостей, товаров, титульную и другие страницы - позже. Начинте именно с обычной страницы, т.к. она обычно содержит основные элементы интерфейса, доступные и на других страницах.
  3. Сохраните всё пока в таком виде

При установке CMS в комплекте будет доступно сразу же несколько страниц. Можно их сразу удалить, но пока лучше рассмотрим вариант с их использованием и переделкой под цели Вашего сайта.

  1. Через меню администратора перейдите в раздел Контент \ Страницы и нажмите Редактировать напротив страницы О компании. Можно выбрать другую страницу, напротив которой указан шаблон Обычная страница, либо сделать копию любой из таких страниц, сразу указва нужные названия и ID.
  2. На вкладке Основные параметры можете изменить то, что написано в полях Название и Основной текст (например, можете вставить текст для страницы О компании)
  3. Сохраните всё пока в таком виде

Далее на панели инструментов вверху нажмите по кнопке Просмотреть (глаз) и увидите результат. Если что-либо не правили наперёд, то название и основной текст будут такими, как в HTML-коде, который Вы вставили в шаблон, а не такими, которые были указаны при правке страницы. Сейчас мы это  (и не только это) исправим. Пока не закрывайте просмотр страницы (пригодится).

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

  1. В шаблоне в поле HTML-код веб-страницы в теге <h1> (или в другом теге, в котором должен отображаться главный заголовок страницы) вставьте код {content_name}, чтобы получилось <h1>{content_name}</h1> (опять же с поправкой на нужный Вам тег).
  2. Там же вместо основного текста страницы вставьте код {content_maintext_value}.
  3. Сохраните всё пока в таком виде и посмотрите как стала выглядеть страница.

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

Прежде, чем продолжить, ознакомьтесь со следующими статьями:

  1. Как оптимизировать сайт под поисковые системы? (часть про sitemap.xml и robots.txt здесь пока не так важны)
  2. Плагин Menu (все параметры заучивать ненужно - важно понимать возможности в целом)

SEO-параметры

Если в комплекте поставки не пакета Zion SEO Booster, то в теге head вставьте или поправьте следующие теги:

<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta http-equiv=Content-Language content="ru">
<title>{content_seo_title}</title>
<meta name=keywords content="{content_seo_keywords}">
<meta name=description content="{content_seo_description}">
<link rel=icon href=/favicon.svg type=image/svg+xml>
<link rel=icon href=/favicon.ico type=image/x-icon>
<meta name="Generator" content="{project_cms_name}">
<meta name="Publisher-URL" content="https://webzion.ru/">

Если Zion SEO Booster доступен, то вместо перечисленных тегом можно просто вставить код {plugin:meta}. Код вызова плагина можно скорректировать под свои цели в разделе Инструменты \ Мастеры для вставки плагинов.

По части SEO - пока всё. Теперь наладим навигацию (хлебные крошки, менюшки и другие списки)...

Навигация

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

Начнём с так называемых "хлебных крошек" (пути к открытой странице).

Допустим на сайте путь к будет выглядеть примерно так: Главная \ О компании \ Наши партнёры

А HTML-код пути организован примерно так:

<p class="path">
  <a href="/">Главная</a>  
  \
  <a href="/about/">О компании</a>  
  \
  <a href="/about/partners/" class="current">Наши партнёры</a>  
</p>

  1. Через меню администратора перейдите в раздел Навигация \ Варианты оформления меню и нажмите Редактировать напротив записи Путь для контента с ID path. Можно выбрать другую запись или создать новую, в том числе через клонирование, но пока не будет этого делать.
  2. Заполните сделующие поля следующими кодами:
    • HTML-код до меню: <p class="path">
    • HTML-код после меню: </p>
    • HTML-код обычной записи: <a href="{content_url_value}">{content_name}</a>
    • HTML-код активной записи: <a href="{content_url_value}" class="current">{content_name}</a>
    • HTML-код между записями: \ (слева и справа по одному пробелу)
    • Остальные поля оставьте пустыми!
  3. Обратите внимание, что мы никак не меняем суть HTML-кода, но вместо URL-адресов мы вставляем свойство {content_url_value}, а вместо названий - свойство {content_name}
  4. Далее в шаблоне вместо HTML-кода хлебных крошек вставляем следующий код: {plugin:menu;id:path;select:path}, то есть
    • Мы вызываем плагин menu,
    • В параметре id указываем ID варианта оформления path,
    • И в параметре select указываем, по какому принципу нам нужно выбирать записи - path - "путь".
  5. Готово, но, если например, Вам нужно скрыть из пути активный раздел, отобразив только надразделы, то добавьте к команде вызова плагина параметр exclude (исключить) со значением {content_id} (ID активной страницы). Тогда вся команда будет иметь вид: {plugin:menu;id:path;select:path;exclude:{content_id}}.
  6. Сохраните изменения в варианте оформления меню и в шаблоне

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

Допустим HTML-код главного меню организован примерно так:

<nav>
  <ul>
    <li>
      <a href="/page1/" class="active">Страница 1</a>
    </li>
    <li>
      <a href="/page2/">Страница 2</a>
    </li>
    <li>
      <a href="/page3/">Страница 3</a>
      <nav>
        <ul>
          <li>
            <a href="/page3/subpage3-1/">Страница 3.1</a>
          </li>
          <li>
            <a href="/page3/subpage3-2/">Страница 3.2</a>
          </li>
          <li>
            <a href="/page3/subpage3-3/">Страница 3.3</a>
          </li>
        </ul>
      </nav>
    </li>
    <li>
      <a href="/page4/">Страница 4</a>
    </li>
    <li>
      <a href="/page5/">Страница 5</a>
    </li>
    <li>
      <a href="/page6/">Страница 6</a>
    </li>
  </ul>
</nav>

В данном примере мы исходим из следующего:

  • Страница 1 описывает то, как выглядит код активной страницы
  • Страница 3 описывает то, как выглядит код страницы с подразделами
  • Код подменю (для подразделов) не отличается от кода надменю (для надразделов). Варианты с отличающимся кодом также рассмотрим, но позже.

Делаем следующее:

  1. Через меню администратора перейдите в раздел Навигация \ Варианты оформления меню и нажмите Добавить новую запись над списком записей. Можно также изменить имеющуюся запись или сделать копию. Но пока будем исходить из того, что будет новая запись с ID mainmenu. Название - любое, например, Главное меню.
  2. Заполните сделующие поля следующими кодами:
    • HTML-код до меню:
      <nav>
        <ul>
    • HTML-код после меню:
      </ul>
      </nav>
    • HTML-код обычной записи:
      <li>
            <a href="{content_url_value}">{content_name}</a>
            {plugin:menu;id:mainenu;factor:{content_id}}
          </li>
    • HTML-код активной записи:
      <li>
            <a href="{content_url_value}" class="active">{content_name}</a>
            {plugin:menu;id:{menu_params_id};factor:{content_id}}
          </li>
  3. Обратите внимание:
    • Мы также вместо URL-адресов вставляем свойство {content_url_value}, а вместо названий - свойство {content_name}
    • При оформлении обычной и активной записи мы пишем разный код (чтобы выделить активный пункт меню на фоне остальных), но в обоих случаях вызываем подменю. Оно одно и то же, но делаем мы это немного по-разному (это необязательно - просто для примера):
      • Мы также вызываем плагин menu,
      • В параметре id в первом случае мы указываем mainmenu, а во втором случае для того же параметра пишем {menu_params_id} - сюда автоматически будет подставлено ID этого меню - то есть mainmenu. Подход второго варианта может быть полезен, если мы в будущем решим сделать копию этого меню, тогда вызов подменю (для указания корректного ID подменю) нам править не придётся.
      • Параметр select мы не указываем, так как автоматически будет подставлено нужное нам значение - children - непосредственные подразделы.
      • При этом мы явно задаём значение {content_id} для параметра factor. Если этого не сделать, то при вызове подменю будут отображены подразделы открытой в данный момент страницы, а нам нужны подразделы для каждого подраздела надменю.
  4. Далее в шаблоне вместо HTML-кода главного меню вставляем очень знакомый код: {plugin:menu;id:mainenu;factor:main}, то есть
    • Мы вызываем плагин menu,
    • В параметре id указываем ID главного меню mainmenu,
    • И в параметре factor явно указываем, подразделы, какой страницы нам нужны. Например, это страница с ID main. Если в Вашем случае нужны подразделы верхнего уровня, то вместо main, укажите точку .
  5. Сохраните изменения в варианте оформления меню и в шаблоне

Готово. Можете наладить навигацию в остальных необходимых шаблонах. Все меню и списки создаются примерно также. Рассмотрим ещё несколько примеров:

  1. Код надменю должен отличаться от кода надменю:
    • В примере выше мы создавали один общий вариант меню и вызывали его сначала из шаблона, а потом из самого себя. Если HTML-код надменю и подменю должен быть разным, то просто создайте два отдельных варианта меню. Главный вызывайте из шаблона, а второстепенный - из главного.
  2. Код пунктов без подразделов отличается от кода пунктов с подразделами:
    • При правке меню обратите внимание на то, что написано под полями HTML-код обычной записи и HTML-код активной записи. Можно заметить там блок Доступные условия. Они позволяют по-разному оформить HTML-код для разных пунктов при соблюдении (или несоблюдении тех или иных условий).
    • Допустим часть кода для пункта без подразделов нужно оформить так:
      <a href="{content_url_value}" class="without-sub">{content_name}</a>
      А часть кода для пункта с подразделами нужно написать так:
      <a href="{content_url_value}" class="with-sub">{content_name}</a>
    • Мы можем, например, использовать условие [IS_TREE??истина::ложь] (если у данного пункта есть подразделы), которое в случае выполнения вернёт то, что указно вместо истина. Иначе - вернёт то, что указано в ложь.
    • Если учесть, что в нашем случае код пунтка с подразделами и без них отличаются только именем класса (without-sub либо with-sub) или даже только частью имени класса (наличие или отсутсвие в нём out), то нам нужен такой код:
      <a href="{content_url_value}" class="with[IS_TREE??::out]-sub">{content_name}</a>. То есть, если у пункта есть подразделы (выполнится истина), из условия вернётся "пустота". А если подразделов нет (выполнится ложь), из условия вернётся код out.
    • Аналогично можно использовать, например, условие <a href="{content_url_value}" class="with[IS_TREE??::out]-sub">{content_name}</a>. Оно выполнится, если у пункта есть подразделы такого типа, который указан в тип.
  3. Код каких-либо пунктов должен сильно отличаться от кода других пунктов:
    • Всё аналогично предыдущему примеру. Просто подберите более подходящее условие при выполнении (или невыполнении), которого должен быть возвращён разный код - вариантов очень много...
  4. Нужно отобразить в списке только записи определённых типов, скрывая все остальные:
    • При формировании команды вызова плагина menu перечислите нужные типы в параеметре types через запятую.
    • А если нужно, чтобы подменю отображало записи тех же типов, что и надменю, при этом подменю заранее "не знает", какого типа будут надразделы, то можно сделать так: types:{menu_params_types}. То есть при вызове подменю в параметр types будет автоматически прописано то же, что было указано при вызове надменю.
  5. Нужно разбить список на несколько блоков:
    • Обратите внимание на параметры blocks, inblock и fixblocks.
    • Блоки могут быть полезны, например, при табличной вёрстке. В этом в полях до-после меню можете указать тег table, в полях до-после блока можно указать тег tr. А уже сами записи - теги td.
    • В случае с блочной/адаптивной вёрсткой лучше использовать возможности вёрстки. Но, если их не хватает, то перечисленные параметры - Вам в помощь.
  6. Нужно разбить список на несколько подстраниц:
    • При формировании команды вызова списка используйте параметр inlist, укав в нём число равное тому, сколько записей нужно отобразить на одной подстранице.
    • Попутно можно задать (необязательно) параметры, listing, subpages, maxsubpages.
    • При оформлении HTML-кода списка заполните поля до-после списка подстраниц, а также обычного-активного пунктов и того, что между ними.
    • При оформлении HTML-кода списка Вам точно пригодятся следующие свойства меню: {menu_subpage} и {menu_subpage_url}, а также возможно пригодятся {menu_subpage_firsturl}{menu_subpage_lasturl} и {menu_subpages}.
  7. Нужно отобразить список новостей или товаров:
    • Здесь всё аналогично, но у новостей, скорее всего должна быть дата, а также краткий текст (помимо основного) и, возможно, изображение:
      • Добавьте в шаблон новостей (если их там ещё нет, но в комплекте поставки изначально они созданы) элементы Дата, (для краткого тексты) Многострочное поле с редактором (если в нём планируется HTML-оформление текста) или Многострочное поле без редактора (если там будет только текст без HTML), а также Изображение (для него также можно указать сразу несколько размеров, до которых необходимо обрезать изображения).
      • Для формирования команды отображения даты Вам может пригодиться мастер по вставке плагина TimeMashine (смотрите раздел меню администратора Инструменты \ Мастеры для вставки плагинов). Код может быть примерно таким: {plugin:timemashine;value:{content_date_3_value}}.
      • Для краткого текста используйте свойство наподобии {content_multistringfieldwitheditor_4_value}.
      • Для картинок используйте свойства уменьшенных копий, например, {content_pic_5_100x100}, а в ссылках для просмотра оригинала уже что-то вроде {content_pic_5_original}.
      • Подсказки по тому, какие точно нужно использовать свойства Вы найдёте при правке соответствующих записей
    • У товаров также может быть изображение, а также цена и какие-либо другие характеристики:
      • Удалите из шаблона ненужные элементы, либо переименуйте и настройте их, добавив недостающие (числа, однострочные текстовые поля, выбор из вариантов и т.п.). Сохраните шаблон. Подсказки появятся при правке товаров.
      • Для цены (это элемент Число, для которого установлена отметка Это цена) будет доступно несколько подсказок. В большинстве случае можно использовать что-то вроде: {content_number_6_value}. Но также есть варианты с учётом или без учёта скидок. Об этом - позже...
  8. Нужно отобразить список результатов поиска:

Вставка других "популярных" плагинов

Ознакомьтесь со следующими статьями:

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

CMS Zion WebEngine является бесплатной системой. Развивается за счёт рекламы, помощи веб-студии #webZion и других спонсоров.

 

Будем рады, если Вы поддержите нас любой суммой, а также поделитесь идеями на счёт каких-либо улучшений и доработок для CMS...

 

Заранее, большое, спасибо

 

Блог обновлений

Zion WebEngine 24.06.14
  • Доработан плагин универсального меню (спасибо Киокушин Online):
    • Устранены недочёты, выявленные в предыдущем обновлении CMS

Zion WebEngine Что такое CMS Zion WebEngine? Меню/Списки/Навигация Обновления CMS Плагины

Zion WebEngine 24.06.13
  • Доработан плагин универсального меню (спасибо Киокушин Online):
    • Теперь фильтрация записей доступна не только через GET-массивы, но и через POST-массивы, что позволяет обойти ограничения на длину GET-запроов на стороне веб-сервера

Zion WebEngine POST/GET-данные Веб-сервер/Хостинг Меню/Списки/Навигация Плагины Фильтрация Плагин Menu

Zion WebEngine 24.05.31
  • Доработан класс для управления пользователями (спасибо Киокушин Online):
    • Помимо даты регистрации теперь доступен просмотр и даты последнего изменения данных о пользователе

Zion WebEngine Дата/Время/TimeMashine Доступы/Пользователи Классы

Zion WebEngine 24.05.29
  • Доработан класс для управления пользователями (спасибо Киокушин Online):
    • Расширен список полей, доступных для указания контактных данных пользователя
    • Реализована возможность быстро заблокировать или разблокировать пользователя

Zion WebEngine Доступы/Пользователи Классы Как импортировать данные о пользователях из XML

Zion WebEngine 24.05.28
  • Доработан класс для управления интеграцией с Jivo:
    • Устранены недочёты при описании возможностей онлайн-консультанта в административном интерфейсе

Zion JivoSite Административный интерфейс Классы Онлайн-консультант Что такое Классы?

Zion WebEngine 24.05.24
  • Доработаны административные скрипты и элемент Связи (спасибо ТК Кило):
    • Удалён устаревший, более не использующийся функционал

Zion WebEngine Связи Элементы Что такое Элементы?

Zion WebEngine 24.04.25
  • Доработаны классы для управления базой данных, пользователями и проектом, а также страницы ошибок:
    • Улучшена интеграция с Рекламной сетью Яндекса
  • Доработан настраиваемый модуль для работы с Атол Онлайн:
    • Доработана интеграция с веб-сервисом онлайн-кассы
  • Доработан элемент Файл (спасибо Киокушин Online):
    • Реализован функионал, который можно использовать в том числе в нестандартных компонентах для загружки файлов

Zion WebEngine Zion Pub Hub Zion Export База данных/Таблицы данных Доступы/Пользователи Классы Настраиваемые модули Онлайн-касса Реакции на заказ Страницы ошибок Файлы/Папки Элементы Что такое Классы?

Zion WebEngine 24.04.24
  • Доработан элемент Связи (спасибо ТК Кило):
    • Удалён устаревший, более не использующийся функционал

Zion WebEngine Связи Элементы Что такое Элементы?

Zion WebEngine 24.04.23
  • Доработан класс для управления пользователями (спасибо Киокушин Online):
    • Упрощено отображение некоторых свойств пользователей

Zion WebEngine Что такое Свойства? Доступы/Пользователи Классы Свойства

Zion WebEngine 24.04.22
  • Доработан плагин универсального меню (спасибо ЛеоСталь):
    • Устранены недочёты из предыдущего обновления CMS

Zion WebEngine Что такое CMS Zion WebEngine? Меню/Списки/Навигация Обновления CMS Плагины

Zion WebEngine 24.04.17
  • Доработан плагин универсального меню (спасибо Киокушин Online):
    • Теперь более корректно обрабатываются свойства пустых списков

Zion WebEngine Меню/Списки/Навигация Плагины Свойства Плагин Menu

Zion WebEngine 24.04.15
  • Доработаны класс для управления пользователями и элемент Изображение (спасибо Киокушин Online):
    • Устранена опечатки
    • Реализован функионал, который можно использовать в том числе в нестандартных компонентах для загружки изображений

Zion WebEngine Доступы/Пользователи Изображение Классы Элементы Что такое Элементы?

Zion WebEngine 24.04.12
  • Доработан класс для управления экспортом данных в YML (спасибо DeviProf):
    • Реализована обработка множества спецсимволов, недопустимых в Товарах сообществ VK.com и в веб-сервисах Яндекса

Zion Export XML/RSS/1С/YML Импорт/Экспорт Классы Кодировки/Наборы символов Что такое Классы?

Zion WebEngine 24.04.05
  • Доработаны административные JS-скрипты (спасибо ТК Кило):
    • Удалён устаревший, более не использующийся функционал

Zion WebEngine

Zion WebEngine 24.04.03
  • Доработан класс для управления базой данных (спасибо Киокушин Online):
    • Устранена проблема с невозможностью выбора того, между какими разделами нужно вставить новый раздел в форме Добавление новой записи

Zion WebEngine База данных/Таблицы данных Классы Контент/Контентные единицы Формы Как редактировать Контент?

Zion WebEngine 24.04.01
  • Доработан плагин универсального меню (спасибо Moto-Retail18):
    • Теперь в пагинации (в списке подстраниц) ссылки автоматически используют (частичный или полный ЧПУ), что позитивно влияет на SEO-оптимизацию

Zion WebEngine SEO-параметры Адрес (URL)/ЧПУ/Переадресация Меню/Списки/Навигация Пагинация/Подстраницы Плагины Как оптимизировать сайт под поисковые системы?

Zion WebEngine 24.03.28
  • Доработан монитор очистки после обновления CMS (спасибо Киокушин Online):
    • Более корретно реализована автоматическая корректировка шаблонов для учёта обновлений в элементах

Zion WebEngine Что такое система Мониторинга? Мониторинг Обновления CMS Шаблоны контента Элементы

Zion WebEngine 24.03.26
  • Доработан элемент Связи (спасибо MasterProfi):
    • Расширены возможности некоторых плагинов

Zion WebEngine Связи Элементы Что такое Элементы?

Zion WebEngine 24.03.22
  • Доработаны элемент Связи и  административные JS-скрипты (спасибо MasterProfi):
    • Доработана настройка связей между пользователями и контентом:
      • Теперь для связей пользователей с контентом доступен весь функционал, доступный для связей контента с контентом

Zion WebEngine Доступы/Пользователи Контент/Контентные единицы Связи Элементы Как редактировать Контент?

Zion WebEngine 24.03.20
  • Доработан элемент Однострочное поле (спасибо GL Technology):
    • Создан новый плагин stringfield_Replace, позволяющий в указанной строке заменять одну подстроку на другую

Zion Catalog Однострочное поле Плагины Поиск текста Элементы Что такое Плагины?