Техническая страничка

Предисловие

nvk41.org.ua — достаточно продвинутый сайт, который стоит на модернизированном движке WordPress Mr_Fullset’s edition 4.0 (№ сборки — 1.4.0.01). Модернизирован он тем, что часть движка WordPress, а также темы TwentyTwelve были отредактированы для оптимизации работы ресурса (в системных файлах WordPress лежит достаточно большое количество функций, которые для функционирования сайта на таком уровне не требуются, но если их оставить, то они подгружаются автоматически при открытии страниц). Раньше, когда я еще даже не знал о существовании сайта школы, он был написан Гришаевым Павлом на движке Joomla (чистом). К сожалению, тот сайт был с устаревшим дизайном, адаптированостью только под широкие дисплеи, плохой производительностью и «грязными» логами ошибок, что иногда во время наплыва посетителей, могло стать причиной падения сайта. Я решил взяться за это дело, ведь в 21 веке web стал очень популярным, и ресурс про школу является лицом этого заведения в интернете. С начала учебного года была добавлена функция дистанционного обучения. Это увеличило масштабы сайта, а также среднее кол-во посетителей за неделю. Разработчиками сайта является Александр Гончаров (Ведущий разработчик, ответственный за дизайн) и Наталья Карпухина (ответственная за техническую сторону дизайна).

Тех. сторона

(Тег
не является частью кода. Это издержки отображения в интерпретаторе html)
Для тех, кто интересуется тем, как же все таки работает этот сайт, этот раздел постарается ответить на этот вопрос. Представим наш сайт многослойным тортом:Р С самого начала мы будем есть верхний слой, а точнее — header.php.

HEADER.PHP

Казалось бы, что сложного написать шапку сайта, тем более на WordPress, где в исходных кодах темы уже все прописано и засунуть туда картинку? На самом деле не так уж и просто. За основу дизайна была взята стандартная тема TwentyTwelve. Во время разработки сайта мы столкнулись с проблемой при редактировании шапки, а именно тем, что эмблема сайта была не там, где она сейчас, а  под текстом (который почему-то был слева). В самом файле мы кучу раз проверили правильность написания кода, но он не работал, как нам было нужно. Из-за нашей невнимательности мы нашли ошибку аж через !3 месяца. Проблема была в файле общей конфигурации стилей style.css.

Оригинальный код шапки в style.css:

}
.site-header h1,
.site-header h2 {
text-align: left;

который мы изменили на 

}
.site-header h1,
.site-header h2 {
text-align: center;

После этого проблем с шапкой не было.

Следующий слой торта, или

BODY.PHP

К нашему счастью проблем с этой частью не было, но была поставлена изначально задача поменять цвет вот этого белого блока, который на себе держит всю информацию. Для этого нужно было отредактировать всего ОДНУ строчку в файле style.css:

}
body.custom-background-empty {
background-color: #fff;

Вот это «#fff» и есть обозначение цвета в html (css). Нашей задачей было поменять его цвет на более голубой. Нам больше всего подходил цвет «#F8F8FF», но потом мы решили стремиться к минимализму, и убрать его обратно на белый. Также по умолчанию на фоне сайта вместо нынешних квадратиков было просто серое поле. В WordPress в админ-панели есть пункт «Внешний вид». В выпадающем меню идем «Настроить» и там даем сайту фон. Кстати, все основные части сайта можно отредактировать в «Внешний вид — Редактор» (в текстовом формате).

Далее, нижний слой торта, с надписью:

FOOTER.PHP

По умолчанию WordPress внизу сайта ставит свое клеймо в виде надписи «Сайт работает на WP». Но мы же хотим, чтобы там величалось наше имя:) При редактировании этого файла мы снова столкнулись с проблемой. Если просто написать

Разработал Александр Гончаров

то у нас эта надпись переместится своевольно к верхушке body. Это связанно с интерпретатором PHP (основа движка WordPress). Он воспринимал этот код, как часть body. Решили мы эту проблему быстро: показали место этому негодяю!  обозначили уже внутри кода файла положение надписи:

Это называется — прилипающий footer. Так-же можно прилепить любую часть динамического сайта к нужной нам.

Далее мы рассмотрим красивую тарелку от торта, без которой этот торт лежал бы  на голом столе, что само по себе глупо.

ПЛАГИНЫ

Плагины — это дополнения к сайту, сделанные другими людьми для облегчения нашей жизни, и жизни сайта.

Первым делом мы должны обезопасить сайт от хакеров, которые хотят, например, забить трафик сайта, и тем самым заблокировать доступ к нему (Такой тип атаки называется DDOS). Плагин, который боронит наш сайт от таких атак называется —  Ограничение попыток авторизации (Автор: Johan Eenfeldt). Он блокирует запросы на сайт, которые превышают кол-во нормальных запросов при пользовании сайтом.

Второй плагин, который имеется у нас на сайте — Contact Form 7 (Автор: Takayuki Miyoshi). Наверное вы видели пункт в меню «Зворотній зв’язок». Внутренности этой страницы выглядят так:

[contact-form-7 id=»787″ title=»Контактная форма 1″]

Без плагина такой трюк с обратной связью не провернуть. Он поддается очень гибкой настройке, что немаловажно для разработчиков сайта.

И последний плагин, без которого не обойдется ни один разработчик сайта на WP — Site Closed (Maintence) (Автор: Oakwood Creative). Он поможет нам закрыть сайт на некоторое время, чтобы посетители не видели бардака при реставрации сайта. Грубо говоря при активации плагина сайт выдает ошибку 503 и сервис становится недоступным.

Надеюсь, вам понравилась статья. Если вы что-то не поняли — обращайтесь через форму обратной связи (Зворотній зв’язок). 


 

Александр Гончаров, гендиректор проекта