PHP-Fusion 9 - мобильный одностраничник
В этой статье рассказано, как сделать максимально простой сайт на CMS PHP-Fusion 9, заточенный под мобильные устройства - смартфоны и планшеты. Так называемый "одностраничный" сайт, или сайт-визитка, или лендинговый сайт... Я расскажу все подробно, где какие могут быть баги, ошибки, как этого избежать и получить наилучший результат.
- Мы будем ориентироваться в первую очередь на смартфоны, если на них все будет хорошо, то на планшетах и подавно.
- Термин "сайт одностраничник" вовсе не означает, что он физически состоит из одной страницы - страниц может быть и 2 и 3, и 100.
+ Щелкайте по фото, чтобы увеличить!
Этап 1
![PHP-Fusion 9.хх.хх как сделать одностраничный сайт PHP-Fusion 9.хх.хх как сделать одностраничный сайт](/1/4_php-fusion-9_mobil.jpg)
Итак, свежеустановленный сайт на движке PHP-Fusion 9 с темой оформления по умолчанию. На настольном ПК или на ноутбуке он выглядит нормально, на нем удобно посетителям... Сверху "шапка" с логотипом... Левая колонка - пункты навигации, они же в "шапке" - подзаголовок... Ниже информационная панель о пользователях и гостях на сайте. Справа панель авторизации - вход на сайт. Посередине главной страницы - приветствие. Внизу подвал сайта, там опять логотип сайта и копирайт. Это стандартная блочная конструкция сайта PHP-Fusion. Темы могут немного менять внешний вид, но суть обычно остается. Здесь отключены все плагины, если мы их будем включать, будут появляться новые панели и пункты в меню - Статьи, Последние статьи, Новости, Блоги, Форум... ну и так далее. Нам этого не нужно в данный момент. Сейчас мы делаем сайт-визитку, одностраничный.
![PHP-Fusion 9.хх.хх доработка под мобильные устройства PHP-Fusion 9.хх.хх доработка под мобильные устройства](/1/2_php-fusion-9_mobil.jpg)
Смотрим, как он будет смотреться на экране смартфона. Да, сайт адаптирован для мобильных устройств, однако в данном его виде он не годится. Вправо от логотипа три полоски - это сворачиваемое меню навигации, и одновременно под логотипом панель Навигации... она здесь совершенно не нужна. Затем идет панель Пользователей на сайте - это тем более ненужный элемент для мобильного сайта. И вот только теперь идет панель - Добро пожаловать, которая должна быть сразу под логотипом и в которой можно указать нашу основную информацию, чтобы пользователь сразу же видел ее, как откроет сайт на своем смартфоне. И под этой панелью опять идет панель авторизации или данные пользователя, а еще ниже подвал сайта... Все это громоздко, тяжело, неудобно. Вероятность того, что гость тут же покинет такой наш сайт - практически 100%.
Если вы жлчитаете статью до конца, то поймете, что в общем-то ничего особо сложного здесь нет и это по плечу почти каждому... однако есть и свои нюансы. Например, здесь описана работа с версией PHP-Fusion 9.03.00, но прошло полгода и уже вышло несколько обновлений движка - последняя версия 9.03.70 - а сколько раз еще будет он обновлятся дальше? Это маленькая деталь, но она требует большого внимания, так как движок серьезно изменяется. И это всего лишь одна бесплатная CMS, а их существуют сотни. Если вы не чувствуете, что готовы самостоятельно осваивать премудрости создания веб-сайтов, или их поддержки, вам лучше обратиться - разработка сайта компании. Для бизнеса часто важнее результат, чем сам процесс, и обратиться сразу к профессионалам - это хорошая идея.
Ну а мы, кто все же решился на самостоятельную работу, продолжаем.
Этап 2
![PHP-Fusion 9.хх.хх работа с панелями PHP-Fusion 9.хх.хх работа с панелями](/1/3_php-fusion-9_mobil.jpg)
Заходим в Админпанель сайта, здесь выбираем Система - Панели. Здесь мы видим текущие панели: слева Navigation - Навигация, RSS - она отключена, и Online Users - Пользователей на сайте. Справа User Info - Информация о пользователе, она же Вход на сайт. По центру панель Приветствия - Welcome Message.
![PHP-Fusion 9.03.20 отключаем ненужные панели PHP-Fusion 9.03.20 отключаем ненужные панели](/1/5_php-fusion-9_mobil.jpg)
Отключаем ненужные панели - Щелкаем по Navigation, в выпавшем меню выбираем - Отключить. Так отключаем все, кроме центральной панели Welcome Message.
![PHP-Fusion 9.03.20 меняем дизайн сайта PHP-Fusion 9.03.20 меняем дизайн сайта](/1/6_php-fusion-9_mobil.jpg)
Теперь открываем сайт и смотрим, что получилось. Теперь наша главная страница выглядит так: нет слева и справа колонок, навигация в шапке сайта. Посередине панель Добро пожаловать (с нею и будем работать).
![PHP-Fusion 9 плохо подогнана для мобильных девайсов PHP-Fusion 9 плохо подогнана для мобильных девайсов](/1/7_php-fusion-9_mobil.jpg)
Конечно, смотрим, как теперь сайт будет отображаться на смартфоне. Вот теперь намного лучше... Пробуем щелкнуть по этим трем полоскам возле логотипа - меню навигации открывается. ОКейно.
![PHP-Fusion 9.хх.хх интерфейс управления панелями PHP-Fusion 9.хх.хх интерфейс управления панелями](/1/8_php-fusion-9_mobil.jpg)
Снова Админпанель - Система - Панели. Щелкаем по Welcome Message - Изменить.
![PHP-Fusion 9.хх.хх настройка Welcome Message PHP-Fusion 9.хх.хх настройка Welcome Message](/1/9_php-fusion-9_mobil.jpg)
Открывается интерфейс управления панелями - настройка непосредственно Welcome Message панели. Здесь указано Название и файл панели - это лучше не трогать. Размещение панели - Центр вверху. Можно куда угодно ее переместить, но это будет ужасно. Доступ - Гость. Именно так - панель видна всем, как и должно быть. Язык панели - русский (если у вас другой язык сайта, или установлено несколько языков - ставьте нужный). Затем - где будет отображаться эта панель? Так как мы делаем одностраничник, то и указываем - отображать только на главной странице. Аккуратно и грамотно заполняем поля - Описание сайта и Ключевые слова, по ним Поисковики нас и будут находить. Если что-то меняли, щелкаем по Сохранить.
![PHP-Fusion 9.хх.хх делаем приветствие на сайте PHP-Fusion 9.хх.хх делаем приветствие на сайте](/1/10_php-fusion-9_mobil.jpg)
Теперь нам надо заполнить поле в панели приветствия. Админпанель - Настройки - Основные параметры. Здесь, конечно мы указываем название сайта, например "Самый лучший, белый и пушистый!", затем указываем свой адрес электронной почты, Ваше имя - никнейм... Начальная страница - обычно это home.php. Указываем протокол вашего сайта http или https, ваше доменное имя сайта - оно уже по-умолчанию проставлено... Ну вот - Приветствие посетителям, здесь и будем писать!
Кстати, на этой странице Основных параметров, отключаем вообще левую и правую панель - колонки. Находим - Исключить левые панели: - сюда прописываем home.php, находим Исключить правые панели: home.php. Сохраняем изменения.
Теперь пишем краткое приветствие, для примера: "Добро пожаловать на наш сайт! Мы оказываем услуги по кладке кирпича, чтению стихов и полетам в космос во время сновидений... Наши телефоны: +7 777 888 99-99", по сути, для сайта одностраничника, ориентированного на мобильных посетителей, много текста и не нужно: кратко о своем товаре и услугах (помним, что это также ключевые слова), телефоны, Skype, WhatsApp и прочее, что нужно для контакта с вами. Ну и желательно одну картинку - очень многие цепляются взглядом за картинку, а потом уж читают текст... так что картинка важный элемент!
Берем картинку, в примере, который я описываю - это фото 772х360. Обязательно оптимизируем ее - например, в Фотошопе, сохраняем для Web, и с 320 Кб получаем 56 Кб.
![PHP-Fusion 9.хх.хх все об загрузке изображений PHP-Fusion 9.хх.хх все об загрузке изображений](/1/11_php-fusion-9_mobil.jpg)
Затем в Админпанели открываем Содержимое - Изображения. Здесь - загрузка изображения, загружаем на сайт фото.
![PHP-Fusion 9.хх.хх как найти нужное фото в загруженых PHP-Fusion 9.хх.хх как найти нужное фото в загруженых](/1/12_php-fusion-9_mobil.jpg)
Затем переходим в первую вкладку - Изображения, здесь наше фото - destination-1.jpg
![PHP-Fusion 9.хх.хх правильная загрузка фото PHP-Fusion 9.хх.хх правильная загрузка фото](/1/13_php-fusion-9_mobil.jpg)
Щелкаем - Просмотр изображения. Откроется загруженная фотография. Щелкаем по ней правой кнопкой мыши, выбираем "Копировать ссылку на изображение", или "Копировать URL изображения" (в разных браузерах по-разному).
Теперь снова заходим в Настройки - Основные параметры. Создаем Приветствие посетителям... Ага, не так-то это просто! Текст мы конечно без проблем введем, но его форматирование... Встроенный редактор примитивный и какой-то кривой! Вставить видео есть, вставить изображение - нет!
Поэтому мы открываем сторонний редактор html - например, ФронтПейдж. И в нем набираем текст, вставляем картинку, форматируем. Код получился такой:
<h1 align="center">Добро пожаловать на наш сайт!</h1>
<p align="center">Мы оказываем услуги по кладке кирпича, чтению стихов и полетам в космос во время сновидений...</p>
<p align="center">
<img src="https://ВАШ_САЙТ/images/destination-1.jpg" longdesc="С нами веселее и быстрее!" alt="Мы самые лучшие белые и пушистые!"></p>
<p align="center">Наши телефоны: +7 777 888 99-99</p>
![PHP-Fusion 9 код для Приветствия или Добро пожаловать PHP-Fusion 9 код для Приветствия или Добро пожаловать](/1/22_php-fusion-9_mobil.jpg)
А так мы его скопировали из редактора - все между тегами <body> и </body>, и вставили на наш сайт. Сохранили.
![PHP-Fusion 9 главная страница как оформить PHP-Fusion 9 главная страница как оформить](/1/14_php-fusion-9_mobil.jpg)
Открываем сайт в браузере и смотрим что получилось. На компьютере вроде бы все смотрится нормально. Картинка посередине, текст... конечно, можно немного доработать...
![PHP-Fusion 9 картинка разбивать структуру сайта PHP-Fusion 9 картинка разбивать структуру сайта](/1/15_php-fusion-9_mobil.jpg)
Смотрим, как теперь сайт смотрится на смартфоне. Все работает, но наша фотография разрушает целостность сайта - она не масштабируется, потому внизу появляется горизонтальная прокрутка. Это значит - никуда не годится! Да и вообще - Большими буквами "Добро пожаловать" совсем не к месту!
Этап 3
![PHP-Fusion 9 как сделать масштабируемые картинки? PHP-Fusion 9 как сделать масштабируемые картинки?](/1/17_php-fusion-9_mobil.jpg)
Отказываемся от использования уже готовой панели приветствия Welcome Message. Админпанель - Система - Панели, щелкаем правой кнопкой мыши по Welcome Message и отключаем ее. Щелкаем - Добавить панель. Заполняем поля: Название панели - Приветствие, например, его все равно не будет видно. Файл панели - ничего. Тип панели - отображать только на главной странице. Доступ - Гость, язык панели - русский.
![PHP-Fusion 9 ошибки в коде приводят к разрушению сайта PHP-Fusion 9 ошибки в коде приводят к разрушению сайта](/1/18_php-fusion-9_mobil.jpg)
Ниже содержимое панели. Как видим, здесь редактор намного богаче, чем в первом случае... Если мы вставим код, который делали ранее во ФронтПейдже, результат будет таким же - картинка разобьет целостность сайта... Всему виной код вставки картинки во FrontPage... Его я тут выделил желтой полосой.
![PHP-Fusion 9.хх.хх правильный код для Приветствия PHP-Fusion 9.хх.хх правильный код для Приветствия](/1/21_php-fusion-9_mobil.jpg)
Поэтому текст Приветствия набираем по новой. Надпись Добро пожаловать на наш сайт - выделена тегами <h1> и <center> - заголовок и выравнивание посередине. Краткое описание - Мы оказываем услуги... Выделено тегами <h2> и снова <center>.
Изображение вставляем - в редакторе видим Вставка изображения, щелкаем по ней и открывается список загруженных изображений. Там выбираем нашу - destination-1.jpg - в появившемся коде надо заполнить значение тега alt= (заголовок изображения). Я ввожу снова - "Мы самые лучшие белые и пушистые!". Картинку также выделяем тегом <center>.
Телефон - его надо сделать кликабельным. Чтобы посетитель, щелкнув по нему на вашем сайте начал звонок - это важный пункт! На скриншоте вы можете видеть, как это делается (номер телефона у меня указан условный).
<a href='tel:+77778889999' target='_blank'>Звоните нам +7 777 888 99 99</a>
И это опять выделяется тегами <h2> и снова <center>... Сохраняем все.
![PHP-Fusion 9.хх.хх создаем новую панель Приветствия PHP-Fusion 9.хх.хх создаем новую панель Приветствия](/1/19_php-fusion-9_mobil.jpg)
Панель также следует Включить! Не забываем.
![PHP-Fusion 9.хх.хх вместо Welcome Message свою панель PHP-Fusion 9.хх.хх вместо Welcome Message свою панель](/1/23_php-fusion-9_mobil.jpg)
Вот такой общий вид созданной нами панели...
![PHP-Fusion 9 как сайт ондостраничник для мобильных гаджетов PHP-Fusion 9 как сайт ондостраничник для мобильных гаджетов](/1/1_php-fusion-9_mobil.jpg)
Открываем сайт в браузере компьютера - все отображается нормально. При наведении курсора на номер телефона, в левом нижнем углу появляется номер телефона...
![PHP-Fusion 9 правильная правка для работы на мобильных устройствах PHP-Fusion 9 правильная правка для работы на мобильных устройствах](/1/20_php-fusion-9_mobil.jpg)
Открываем сайт на смартфоне. Все работает отлично. Картинка масштабируется, и сайт не разваливается. Текст выделен нормальными тегами, размер, цвет - это все подбирается индивидуально. Телефон кликабельный - щелкнув, тут же происходит набор и вызов абонента...
Остается только этот логотип внизу - но в других темах оформления его нет... И копирайт. Его можно убрать, вообще весь подвал либо убрать, либо почистить и оставить там лишь счетчики и коды от Яндекса и Гугла... Но - копирайт убирать не разрешено.
Напоследок
- Здесь все плагины отключены, они для данного типа сайта не нужны (но их можно будет включить в любой момент). На сайте работает Главная страница, страница авторизации или регистрации, обратная связь.
![PHP-Fusion 9 делаем сайт-визитку или лендинг PHP-Fusion 9 делаем сайт-визитку или лендинг](/1/25_php-fusion-9_mobil.jpg)
- Можно создавать отдельные страницы - например, для детального описания товара или услуг, прайс, каталог и т.д. Потом на эти отдельные страницы даются гиперрсылки с Главной. Оформление может быть каким угодно - здесь широкое поле для фантазии! Можно вставлять маленькие картинки, таблицы, видео...
![PHP-Fusion 9 отображение на смартфонах, правим код PHP-Fusion 9 отображение на смартфонах, правим код](/1/24_php-fusion-9_mobil.jpg)
- В некоторых темах, в нижней части выше Подвала будет появляться надпись: Модули контента не установлены. Пожалуйста, установите хотя бы один модуль для текстового контента или измените стартовую страницу в разделе «Основные настройки». Я еще не нашел способа, как с этим бороться. Поэтому придется включить, например Новости, или Статьи. Впрочем, для сайта это только идет на пользу. Если вы разместите несколько новостей, Поисковики это оценят благожелательно.
- Обсуждение CMS PHP-Fusion 9.xx.xx на нашем Форуме, здесь же в первом сообщении список статей, ссылки и прочее...
На этом пока заканчиваю.
Михаил Дмитриенко, 2020 г. |
February 23 2020 09:42:20
March 11 2020 13:33:46
March 12 2020 08:25:49