От стара Joomla към нов сайт (част 3): тема, навигация и съдържание

В втората част стигнахме до работещ нов сайт с цялото пренесено съдържание — но той изглеждаше като прясна инсталация: гол стандартен шаблон, разбъркана навигация, статии с чупещи се картинки и дребен разнобоен текст. Тази последна част е за най-обемната работа — тунинга. Как от техническа инсталация направихме подреден, съвременен портал, който хората могат да четат. Отново под измисленото име novsaitobshtina.bg.

Темата не можеше да е същата

Първото, което трябваше да приемем: старият външен вид не можеше да се пренесе. Той стъпваше на търговски шаблон върху framework, който съществува само за старата Joomla. Опитът да го възстановим би означавал да вкараме обратно точно онзи вид зависимости, от които бягахме.

Затова тръгнахме от стандартния шаблон на Joomla (Cassiopeia) и го брандирахме за общината — не защото е красив по подразбиране (не е), а защото се поддържа от самата Joomla, обновява се без риск и е чиста, предсказуема основа. Целият облик изградихме над него.

Правилният начин за персонализация: user.css, не хакове в ядрото

Ключово решение за дълготрайност: нито един ред от нашия дизайн не пипа файловете на ядрото. Cassiopeia поддържа update-safe файл user.css — стилове, които оцеляват при всяко обновяване на шаблона. Целият брандинг (цветове от герба на общината, хоризонтална навигация, hero банер, футър) живее там.

Принципът е прост: update-safe или не се прави. Всичко, което пипа ядрото, е бомба със закъснител — първото обновяване го изтрива и сайтът се чупи. За държавен сайт, който ще живее години, това е неприемливо.

Изхвърлихме над 100 разширения

Старият сайт носеше над сто разширения — галерии, слайдери, SEO добавки, форми, дублиращи се компоненти. Мнозинството изобщо не се използваха; останалите се заместваха от вградени в Joomla възможности. Подходът беше радикален и прост:

• Нищо не се пренася „за всеки случай“. Разширение влиза само ако има конкретна нужда, която ядрото не покрива.
• Търсенето — вградено Smart Search, не външен компонент.
• Sitemap, SEO, Open Graph — собствен малък плъгин (за него по-долу), не тежка добавка.

По-малко разширения означава по-малко повърхност за атака, по-бърз сайт и по-малко неща, които могат да се счупят при обновяване. За информативен сайт това е чиста печалба.

Ново разпределение на навигацията

За годините менюто на стария сайт беше набъбнало и станало нелогично — раздели с припокриващи се имена, десетки категории с над 600 статии без нито една връзка в менюто (тоест на практика недостъпни през нормален адрес). Пренаредихме навигацията около това как човек всъщност търси информация в общински сайт:

Карти, устойчиви на счупен HTML

Началната страница и листингите показват статиите като карти — снимка, заглавие, кратък откъс. Тук се сблъскахме с типичен за стар сайт проблем: съдържанието, писано с години от различни хора, е пълно с счупен HTML — незатворени тагове, вградени публикации от Facebook, таблици в увода. Една такава статия с невалиден HTML буквално „поглъщаше“ следващите карти и ги влагаше в себе си, чупейки цялата подредба.

Козметичното решение (да го скриеш с CSS) не работи — проблемът е в самата DOM структура. Затова направихме template override — контролирано копие на шаблонния файл за карти, в което откъсът се генерира безопасно:

// вместо суров въвеждащ текст на статията:
$excerpt = htmlspecialchars(
    strip_tags(
        html_entity_decode($introtext, ENT_QUOTES|ENT_HTML5, 'UTF-8')
    )
);
$excerpt = mb_substr($excerpt, 0, 220);   // само чист текст, отрязан

Резултатът: каквото и да има в статията — Facebook embed, таблица, незатворен таг — картата винаги показва само чист откъс. Пълното форматиране остава видимо в самата статия. Един override пази подредбата от всяка бъдеща счупена статия, а общинските редактори постоянно пействат съдържание отнякъде.

Страница по страница: оправяне на съдържанието

Това беше най-трудоемката, но и най-важната част. Пренесеното съдържание работеше технически, но беше грозно и на места нелогично. Минахме през него системно:

Счупени пътища към картинки

Старите статии сочеха изображенията с относителни пътища (src="images/..."), които се чупят на дълбоки адреси, и с абсолютни http:// адреси, които на HTTPS сайт дават „смесено съдържание“. Файловете си съществуваха — проблемът беше само в записа. Оправихме ги масово със SQL замяна в текста на статиите:

-- относителни → абсолютни от корена
UPDATE j6_content SET introtext = REPLACE(introtext, 'src="images/', 'src="/images/');
-- http и стар домейн → относителни (без mixed content)
UPDATE j6_content SET introtext = REPLACE(introtext, 'http://www.novsaitobshtina.bg/', '/');

Отделно почистихме стотици мъртви външни картинки — предимно от Facebook CDN с изтекли токени, чиито източници вече не съществуват. Скрипт тестваше всеки външен адрес и махаше само реално счупените, а живите вдигаше на HTTPS.

Дребен и разнобоен шрифт

Много статии носеха вградени inline стилове от стария сайт — font-size:10pt; font-family:verdana и подобни — заради което текстът беше дребен и различен на всяка страница. Наложихме единен, четим шрифт през user.css, който бие вградените стилове.

Безсмислени заглавия

Над триста статии носеха едно и също заглавие — „Общината обявява“ — което прави списъците безполезни. Извадихме смислено заглавие от началото на всяка статия, запазвайки адреса (alias) непроменен, за да не се чупят връзки.

Снимки в статиите

Снимките в текста бяха слепени, грамадни или пък сплескани от наложени стари размери. Дадохме им дишане и разумен максимален размер, центрирахме ги, а последователни снимки подредихме по две в ред — така статиите станаха приятни за четене, а не стена от текст и разкривени картинки.

Търсене, SEO и мобилен изглед

След подредбата дойде видимостта:

• Търсене — вграденото Smart Search, индексирано (над 2100 записа), с компактно поле в хедъра.
• Sitemap — тъй като не искахме тежък плъгин, написахме собствен генератор, който всяка нощ пресъздава sitemap.xml с всички над 2100 адреса и го подава на Google Search Console.
• SEO плъгин — малък собствен плъгин, който добавя структурирани данни (GovernmentOrganization JSON-LD с адрес, телефон, работно време), Open Graph и Twitter тагове и canonical адрес. Всичко в един файл, без външни зависимости.
• Meta descriptions и alt текстове — генерирани автоматично за над 2000 статии от съдържанието и заглавията им.
• Мобилен изглед — хамбургер меню, коректно свиване на футъра, премахване на хоризонталното превъртане. Съвременен сайт трябва да работи на телефон също толкова добре, колкото на десктоп.

Какво постигнахме

Изводът

Когато системата е достатъчно стара, компрометирана и обрасла, изграждането наново често е по-бързо, по-евтино и по-безопасно от кърпенето. Ключът е в подхода: пренасяш данните, не проблемите. Инсталираш чисто, мигрираш съдържанието, изхвърляш баласта и подреждаш наново.

Този проект — от диагноза до подреден портал с над две хиляди статии — беше свършен в сгъстени срокове именно защото данните бяха ясно отделени от кода, а всяка персонализация беше направена по устойчив начин. Резултатът е сайт, който администрацията може да поддържа с години напред, без да се страхува от следващото обновяване. Работи върху нашата инфраструктура за хостинг и VPS сървъри — със съвременен PHP, изолиран акаунт и редовни архиви.

Ако управлявате остарял сайт на Joomla или WordPress — особено ако вече е бил пробиван — свържете се с нас. Правим одит, изчистване и, когато си струва, пълно пресъздаване с миграция на съдържанието.