Вчера отделих целия ден да направя някои промени по блога, като основно имах доста забележки към темата (iTheme), която ползвам.
Първо започнах да правя малки промени по дизайна
- сложих да се виждат таговете към даден пост
- промених (с малко помощ от колега) изцяло извеждането на коментарите
- формата за добавяне на коментар претърпя малки графични промени
- тема вече е изцяло на български език (тук таме може да е останало нещо чуждоезично, но малко по-малко що променям)
- доста по-добра 404 страница, за която използвах от Google Webmaster Tools - Enhance 404 pages
- промени извеждането на постовете при търсене.
После започнах промени по секциите
- Добавих нова страница “Аз в мрежата“, в която има информация за част от различните ми регистрации из мрежата. Скоро ще има още връзки, просто на този етап нямам подходящи лога за тази страница (трябваше да има и страница “Аз съм”, но за нея не остана време
) - Добавих “Подобни постове” към всеки пост, като за него използвам плъгина Contextual Related Posts
- Изтрих от sidebar-a мета информацията и на нейно място сложих таговете в сайта
- Преминах през Google Webmaster Tools и пооправих някой връзки в сайта, които не работеха, също така промених и няколко meta description-и и други дребни неща
Промени по кода
И след това започнах да работя по интересната част. Докато оправях темата забелязах, че колкото и да е красива от долу като код е просто … ужасна. Още повече самия WordPress не използва нещо като Smarty, и го кара на голо php (в този пост – “Be smart with smarty“, съм си казал мнението за Smarty). Всички шаблони на темата общо взето изглеждаха така:
<?php get_header(); ?> <div id="content"> // кода за съответния шаблон </div> <div id="footer"> <a href="...">WP Theme</a> & <a href="...">Icons</a> by <a href="...">N.Design Studio</a> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
след малко refactoring в шаблон кода стана така, като преместих общите части в хедъра и футера:
<?php get_header(); ?> // кода за съответния шаблон <?php get_footer(); ?>
Мина ми през главата, дали да не направя някои плъгин за WordPress, който позволява ползването на Smarty и/или layout файлове, подобни на тези които използвам от години в ControlDepo и които ги има в Rails, но в крайна сметка реших, че през лятото най-вероятно ще мина на някое мое блог решение.
След като подредих и пренаписах шаблоните, се насочих към самата html структура, в която беше пренебрегнато ползването на ul елементи и други дребни неща който ме дразнеха. Но най-големия проблем от който най-вероятно страда доста SEOто на NeXt е че липсваше h1 елемент (т.е. имаше го но просто винаги беше просто NeXt), а той трябва все пак да е заглавието на самата страница.
JavaScript / CSS / Images
Поради използването на много плъгини се беше натрупало огромно количество външни javascript и css файлове, което много вреди на цялостното зареждане на сайта. Така че минах и събрах всичките css файлове в един all.css (останаха само print.css и css файловете от Highlight Source Pro плъгина, но там още не искам да пипам).
С JavaScript нещата седяха малко по сложно поради това че използвах plugin за live търсенето и за още 2-3 малки неща, решението беше да се отърва от всички плъгини и да си напиша собствени версии използвайки ControlDepo 3 Widgets. От него използвах тези компоненти:
- CD3.Behaviors – постове с уроци за това – 1 и 2 (което ми напомня да довърша и 3, 4
)
- CD3.Behaviors.TitleAsDefaultValue
- CD3.Behaviors.ScrollTo
- CD3.AdjustableTextarea
- Effects (малко надграждане към Script.aculo.us)
- Event.delegate
Отделих javascript-a в два файла – all.js и frontend.js ( както права във всичките си проекти напоследък ), Във all.js са библиотечните файлове – Prototype, Script.aculo.us, no.ie6.js, ControlDepo 3 Widgets а във frontend.js са скриптовете специално за блога ми livesearch, widgets и други малки javascript глезотии. По-важното е в случая е това че вече имам стабилна основа върху която да надграждам в бъдеще.
Всички javascript файлове са най-долу, така че няма смисъл да правя dom:loaded а мога директно да изпълнявам кода си. Също така вече и целия код е unobtrusive, и поне на този етап ако даден посетител няма javascript или му е изключен, всичко в сайта ще си работи.
Последната стъпка беше оптимизацията на снимките за това използвах просто ruby gem-a – smusher, който прекарва всяка снимка през smush.it. Така отстраних с около 40 KB размера на всички картинки от блога.
Финални думи
Като цяло за себе си съм си доволен от работата, която свърших по блога. Останаха някои неща за бъдещето:
- live comment preview
- най-сетне да имам about страница
- да взема под IE да видя как се вижда NeXt
- да се по съберат снимките в css spirites
- почистване на css файловете, т.е. изтриване на излишните стилове и оптимизация
- gzip на css / javascript файловете
п.п. от цялото тази работа около WordPress, ми хрумнаха две идеи за plugin, първия да е Smarty, а втория да е нещо подобно на sprockets което събира всички css / javascript във един файл gzip-ва го, добавя му etags и т.н. Незнам дали е възможно да се направи такова нещо с WordPress, ако някой има желание за нещо такова, с удоволствие бих му помагал.
). Та в тази статия има четири сценария:
