Jak w trzech krokach zmodyfikować prosty szablon?

Darmowe szablony są fajne, bo są darmowe. Ich wadą jest to, że skoro Ty zauważyłeś dany szablon, to pewnie zrobiło to setki innych osób i może być tak, że na świecie jest setki tak samo wyglądających blogów. Na podstawie prostego szablonu Simplistic Blue pokażę, jak w trzech krokach, które zajmą maksymalnie kilka minut, zmodyfikować szablon, aby był unikalny.

Krok 0 – instalacja szablonu Simplistic Blue

Do swojej modyfikacji wybrałem popularnym szablon. Jego olbrzymią zaletą jest duża prostota. Dzięki tej prostocie jest on bardzo wdzięczną bazą do modyfikacji i własnoręcznego dochodzenia do własnego, unikalnego szablonu. Szablon można pobrać tutaj.

Krok 1 – Zmiana tła

Jeżeli już masz zainstalowany szablon to teraz pora na modyfikacje. Najpierw należy odnaleźć plik style.css dla danego szablonu. Znajdziesz go w katalogu odpowiadającemu szablonowi - katalog_główny_witryny\wp-content\themes\simplistic-blue. Otwórz plik style.css w trybie do edycji i znajdź następującą sekcję.:

body {
	background: #EFEDED;
	font: 0.75em Arial;
	color: #555555;
	margin: 0px;
	text-align: center;
}

Pora na trudną decyzję… wybór koloru tła. Ja wybrałem czarny. W linii drugiej sekcji body zmieniam wartość koloru tła na: #000. Tak powinna wyglądać sekcja body po zmianach:

body {
	background: #000;
	font: 0.75em Arial;
	color: #555555;
	margin: 0px;
	text-align: center;
}

Krok 2 – Zmiana koloru linków

Wszystkie linki w szablonie Simplistic Blue wyświetlane są na niebiesko. Definicja koloru znajduje się w jednej linii pliku style.css. Mowa tu o drugiej linii sekcji dotyczącej linków.

a {
	color: #156CB2;
	text-decoration: none;
}

Ja zgodnie z kolorem tła zmieniam kolor linków na czarny. Wynik:

a {
	color: #000;
	text-decoration: none;
}

Krok 3 – Zmiana obrazka w nagłówku

Po dwóch wcześniejszych zmianach obrazek zastosowany w nagłówku jakoś mi nie pasuje do czarnego tła i czarnych nagłówków itd. Plik *.gif z obrazkiem znajduje się w: katalog_główny_witryny\wp-content\themes\simplistic-blue\images. Jego wymiary to 761×130 pikseli. Postaram się zastosować obrazek bardziej pasujący do nowej kolorystyki strony zachowując rozmiary 761×130 pikseli. Oryginalny plik z obrazkiem nazywa się header_bg.gif. Ja swój nazywam header_bg2.gif i kopiuję go do tego samego katalogu, gdzie był obrazek oryginalny. Poniżej możesz pobrać obrazek zastosowany przeze mnie.

Jeszcze jedna zmiana i nasz „nowy” szablon gotowy. W pliku css należy podmienić stary obrazek na nowy. Znajdź następującą sekcję:

#header {
	margin: 0px auto 0px auto;
	background: url(images/header_bg.gif);
	width: 761px;
	height: 130px;
	text-align: left;
}

Zamień w trzeciej linii nazwę oryginalnego pliku na swój własny – header_bg.gif na header_bg2.gif. Wynik powinien być następujący:

#header {
	margin: 0px auto 0px auto;
	background: url(images/header_bg2.gif);
	width: 761px;
	height: 130px;
	text-align: left;
}

Zrobione. Efekt końcowy poniżej:

Krok dodatkowy

W kroku dodatkowym opiszę czynności, które można wykonać, ale nie są one konieczne. O ile zmiany w nagłówku pliku style.css wydają się jak najbardziej zasadne, ponieważ szablon Simplistic przestał być Blue, o tyle usuwanie linka ze stopki szablonu może być dyskusyjne. Decyzję pozostawiam osobie, która szablon będzie modyfikować, natomiast ja postanowiłem opisać jak to zrobić.

W pliku style.css w nagłówku znajdują się informacje dotyczące szablonu. Można te informacje zmodyfikować tak, aby wynikało z nich, że nie jest to oryginalny szablon a raczej jego wariacja.

/*
Theme Name: Simplistic Blue
Theme URI: http://www.carsenklock.com/resources/
Description: A simple blue wordpress theme by Carsen
Version: 1.3.2
Tags: blue,two-columns,white,light,fixed-width,right-sidebar
Author: Carsen Klock
Author URI: http://www.carsenklock.com/
*/

Aby zmienić stopkę szablonu należy w trybie edycji otworzyć plik footer.php w katalogu z naszym szablonem, co i tak należy uczynić, aby zmienić chociażby kopiarkę. W przypadku mojej wersji szablonu jest tam „na sztywno” 2008 rok. Cała edycja treści szablonu opiera się na zmianie zawartości poniższego div-a:

<div id="footer">
Copyright &copy; 2008 <?php bloginfo('name'); ?>
| WordPress Theme by
<a href="http://www.carsenklock.com">
<b>Carsen Klock</b></a>
| Powered by <a href="http://www.wordpress.org">
<b>Wordpress</b></a>
</div>

Sposób przeze mnie przedstawiony nie jest bez wad. Największą jest chyba to, że w momencie jeśli zdecydujesz się na aktualizację swojego szablonu to autor w nowszej wersji może zawrze takie zmiany, które powodować będą, że Twoja modyfikacja nie będzie wyglądać już tak ładnie.