Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Статья по просьбе одного из наших подписчиков.

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

Задача: перенести всё это на CMS Joomla (в частности на движок Joomla 3)

Такой перенос можно разделить на два варианта.

Вариант 1. Простой. Скопировать - вставить. 
Этот вариант подходит, если вам нужно хоть как то перенести материалы статичного сайта на движок. Без переноса дизайна.

Вариант 2. Правильно скопировать - правильно вставить.
Этот вариант подходит, если вам нужно полностью скопировать весь html сайт на Joomla, включая дизайн.

 

Какие неожиданности могут тут вас поджидать?

  1. Хаотичное хранение изображений. Если изображения хранились НЕ централизовано, т.е. были разбросаны по разным папкам или вообще лежали в корневой папке, то при переносе могут быть проблемы. Чуть дальше я расскажу как это исправить.
  2. Неотформатированный текст. Это когда в тексте почти нет тегов <p>, и он идёт сплошняком в div'ах или span'ах, иногда с разбавлением тегами из Word'а. 
    Напомню, что отформатированный текст лучше воспринимается пользователями и поисковыми системами. И тег <p> используется для разбивки на абзацы. Чуть далее я тоже расскажу как это поправить.
  3. Старые url адреса скорее всего станут недоступны, потому что они изменятся. В этом случае можно сделать редиректы.

 

Вариант 1. Просто скопировать - вставить

Для этого нам нужны:

  • установленная Joomla 3 с созданными категориями для будущих материалов
  • статичный html сайт, расположенный в интернете

Шаг 1. Открываем первую html страницу в браузере, выделяем и копируем основной текст страницы, из основной колонки. Т.е. содержание статьи.

Для копирования используйте сочетание клавиш: Ctrl + C

Шаг 2. На всякий случай пропускаем его через программу Блокнот, чтобы очистить возможное форматирование. Т.е. скопированный текст вставляем сначала в Блокнот, затем Ctrl + A (выделить всё) и Ctrl + C (скопировать выделенное).

Шаг 3. Создаём новый материал в Joomla. Даём ему название и выбираем категорию, которой будет принадлежать этот материал.

Шаг 4. Вставляем скопированный чистый текст (Ctrl + V), который мы прогнали через Блокнот. Производим форматирование текста средствами Joomla: абзацы, списки и т.д.

Шаг 5. Если на старой странице присутствуют изображения, то копируем эти изображения к себе на компьютер (клик правой кнопкой мыши по картинке -> Сохранить изображение как -> и сохраняем в папку Joomla для картинок, это папка images в корне сайта, если нужно создаём в ней подпапки).

Шаг 6. Если на старой странице есть мета теги keywords и description, то через просмотр кода страницы (обычно Ctrl - U), копируем их и вставляем в соответствующие поля у материала Joomla. Эти поля находятся на вкладке "Публикация".

И так проделываем с каждой страницей старого сайта.

В итоге все тексты переносятся в Joomla. Далее создаётся всё остальное: модули в боковой колонке (уже через саму Joomla), ставится шаблон, создаётся меню и т.д.

Если что этот видеокурс вам в помощь >>

Этот вариант примечателен тем, что не нужно работать с html кодом.
Но при этом теряется всё форматирование старого текста (если оно есть). Иногда это даже полезно. Потому что за всё время я ни разу не встречал на старых сайтах нормального форматирования.

 

Вариант 2. Правильно скопировать - правильно вставить. С переносом дизайна.

Для этого нам потребуется:

  • Joomla 3 с созданными категориями для будущих материалов
  • старый html-сайт перенесённый на ваш компьютер по FTP (используйте программу FileZilla)
  • редактор NotePad++

Шаг 1. Открываем первую страницу старого сайта в NotePad++ и копируем основной текст страницы, вместе с тегами. Т.е. содержание статьи. Это содержание находится в секции <body>

Важно! Не копируйте код из <head>, боковых колонок, футера и т.д. Только сам html код статьи.

Шаг 2. Создаём новый материал в Joomla, даём ему название и выбираем категорию.

Шаг 3. В редакторе Joomla переходим в режим исходного кода статьи и вставляем туда скопированный текст со старого сайта вместе с тегами.

Как перенести html сайт на Joomla

Шаг 4. Если на странице старого сайта есть мета теги keywords и description, то их тоже копируем в соответствующие поля редактора (во вкладке Публикация).

Шаг 5. Если на старой странице есть изображения, то смотрите примечание в конце статьи.

Сохраняем и проделываем также со всеми остальными страницами старого сайта.

После того как тексты со старого сайта скопированы в Joomla, можем приступать к переносу дизайна (натягиванию дизайна на Joomla).

 

Как перенести дизайн сайта на Joomla

Joomla использует шаблонизатор. Это html код со вставками переменных Joomla. 
Переменные выводят тексты статей, модули (блоки в боковой колонке), меню, title страницы, подключают CSS и JS файлы и т.д. 

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

На самом деле, если разбираетесь в html, то ничего сложного нет.

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

Заодно подтяните знания по html и css

 

Как быть с изображениями на старом сайте?

Тут тоже может быть несколько вариантов. 

Если с изображениями хаос. То лучше всего поступить как в варианте №1. Т.е. просто сохранить все изображения к себе на компьютер, а потом потихоньку вставлять их в статьи.

Если изображения хранятся централизовано, например в папке img старого сайта. В этом случае, при копировании исходного текста статьи, путь до изображений будет также копироваться, и в итоге будет не правильным, т.к. картинки будут храниться в Joomla совсем по другому пути. 

Тут можно открыть все html странички старого сайта в NotePad++ (если их очень много, то можно сделать это частями). При помощи функции замена (Ctrl + F), сделать замену части пути у всех изображений. 

Например, картинка в старом коде выглядит так:

<img src="/img/kartinka.jpg" />

А нам надо так:

<img src="/images/stories/kartinka.jpg" />

То заменяем: "img/   
на: "images/stories/

Жмём "Заменить все"

перенос статичного сайта на joomla

 

После этого все пути до картинок будут правильными. Но в любом случае сначала попробуйте создать один материал в Joomla, вставить туда код старой статьи, и перенести изображение в папку images/stories (или в любую другую).

Если всё нормально, то потом уже переносите все остальные.

 

Как быть со старыми url адресами?

Можно попытаться их сохранить, но это почти не реально. Столько заморочек, что лучше и проще сделать редиректы через файл .htaccess

Редирект делается такой строчкой:

Redirect 301 /старый_URL http://новый_URL

Обратите внимание, что старый URL имеет относительный вид, а новый URL (куда будет перенапрвлен пользователь) имеет абсолютный вид с http, и между двумя URL'ами стоит пробел.

Поэтому перед переносом старого сайта на Joomla, сохраните все старые адреса в отдельный документ.

 

Как поступил бы я?

Лично я бы использовал первый вариант. Если обновлять сайт, то уж обновлять по полной.
Чтобы на новый сайт не переносились старые косяки.

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

А если сайт очень большой?

Ну а что делать? Потихоньку, по-маленьку.
Можно, конечно, заказать или написать какой-нибудь парсер, но для этого нужно знать PHP и MySQL или иметь знакомого программиста.

Если подсчитать, то на одну статью будет уходить примерно 3-4 минуты. Значит 100 страниц можно перенести за 300 - 400 минут, грубо говоря за пол-дня, с перекурами.

P.S.: Воспользуйтесь бесплатным видео курсом по Joomla, он поможет во многом разобраться.

Желаю успехов!

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!