A testreszabások jelentős részét a Thesis menü “Custom File Editor” menüpontjában elérhető szerkesztővel tudjuk elvégezni. Ez az egyszerű kódszerkesztő gyakorlatilag semmilyen extra funkciót nem kínál, de jelentősen leegyszerűsíti a testreszabások, módosítások elvégzését. Itt tudjuk a custom.css és a custom_functions.php fájlokat módosítani. Ez a két fájl tartalmazza az összes saját testreszabásainkat. A saját testreszabások ebben a két fájlban és a /custom/ könyvtár teljes tartalma a Thesis frissítésekor sem kerül felülírásra.
Logó elhelyezése a fejlécben
Azt már tudjuk, hogy a Thesis sablon egyszerű és letisztult. A weboldalunk kinézetét tovább javíthatjuk saját logó vagy grafika alkalmazásával a fejlécben. Az újabb verziók már lehetőséget adnak arra, hogy saját logót töltsünk fel a Thesis webes felületén. Ez egyszerű megoldás, az esetek egy részében megfelelő is, de önmagában nem feltétlenül elegendő.
Kihasználva a rugalmasságot amit a Thesis biztosít, rengeteg egyedi testreszabást elvégezhetünk. Gyakorlatilag mindegy, hogy a képet a Thesis adminisztrációs felületén keresztül töltjük fel, vagy a WordPress médiatár feltöltésével, a kép ugyanoda kerül (/wp-content/uploads). A testreszabáshoz pár egyedi beállításokat hajthatunk végre a custom.css fájlban. Az alábbi csak példa, természetesen a kép elérési útvonalát, méretét, helyzetét és a többi beállítást kedvünk szerint módosíthatjuk.
/* logo */
.custom #header #logo a {
display: block;
height: 120px; /* a kép magassága, pixelben */
width: 360px; /* a kép szélessége, pixelben */
background: url(/wp-content/uploads/logo.png) no-repeat;
outline: none;
}
/* a tagline-t csak a keresők látják */
.custom #header #logo, .custom #header #tagline {
text-indent: -9999px;
}
.custom #header #tagline {
height: 0;
}
/* keret */
.custom #header {
border: 0.2em solid #888888;
height: 120px;
padding: 5px;
}
Hirdetés elhelyezése a fejlécben
A fejlécben elhelyezett logótól eltérően, a hirdetés elhelyezésére a custom_functions.php fájlban is kell elhelyeznünk saját kódot. A custom_functions.php fájlt a Thesis menü alatti “Custom File Editor” menüpontban érjük el.
A “my_header_banner()” egyszerű funkció a funkció törzsében elhelyezett html kódot fogja megjeleníteni. Az “add_action()” függvénnyel pedig azt adjuk meg, hogy hol kerüljön végrehajtásra (thesis_hook_header, ami a fejléc létrehozásakor fut le) és melyik függvény (my_header_banner, ami a saját kódunkat jeleníti meg). A “my_header_banner” függvénynév helyett természetesen mást is használhatunk, csak ügyeljünk arra, hogy ne ütközzön a WordPress vagy a Thesis saját függvényeivel. A kód igen egyszerű és átlátható, a DIV tagok közt lévő html kódot cseréljük ki a sajátunkra:
/* fejléc hirdetés */
function my_header_banner() {
?>
<div id="header"><a href="http://url.org">
<img id="header_ad" src="/wp-content/uploads/banner-468x60.png"
alt="alternatív text"
width="468" height="60" /></a></div>
<?php
}
add_action('thesis_hook_header', 'my_header_banner');
Ügyeljünk arra, hogy a custom_functions.php végén ne legyen php záró tag – “?>” – és ezt leszámítva érvényes és szintaktikailag helyes php kód legyen. Ha valamit elrontottunk és a WordPress adminisztrációs felülete sem jelenik meg, akkor a cPanel-ből elérhető fájlkezelő és kódszerkesztő segítségével javíthatjuk, vagy pedig egyszerűen egy ftp klienssel feltöltjük a javított változatot.
A hirdetés megfelelő helyéről pedig az alábbi kód gondoskodik, amit illesszünk be a custom.css fájlba:
/* fejléc hirdetés */
.custom #header #header_ad {
float:right;
margin-top:-9em;
width: 500px;
}
Breadcrumbs plugin nélkül
A breadcrumb (vagy “kenyérmorzsa”, “zsemlemorzsa”) a weboldalakon használt navigációs eszköz, amely a kezdőlaptól a böngésző felhasználó jelenlegi tartózkodási helyéig vezető utat mutatja, mélységtől függően akár közbenső linkekkel.
Egyszerű, plugin nélküli “breadcrumb”:
A fenti képen látható böngészési útvonalat megjeleníthetjük az alábbi kód beillesztésével a custom_functions.php fájlba. Fontos megjegyezni, hogy ez a megoldás sokkal egyszerűbb, rugalmasabb és mindenekfelett gyorsabb, nem lassítja a weboldalt, mintha plugint használnánk a megjelenítéshez.
/* Breadcrumbs */
function thesis_breadcrumbs() {
echo '<a href="' . get_option('home') . '">';
bloginfo('name');
echo "</a>";
if (is_category() || is_single()) {
echo " » ";
the_category(' • ');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo " » ";
echo the_title();
} elseif (is_search()) {
echo " » Keresési találatok... ";
echo '"<em>' . the_search_query() . '</em>"';
}
}
function display_breadcrumbs() {?>
<div class="breadcrumbs"><?php thesis_breadcrumbs(); ?></div>
<?php
}
add_action('thesis_hook_after_header','display_breadcrumbs');
A kinézetét pedig a custom.css fájlba elhelyezett kóddal tudjuk testreszabni:
/* Breadcrumbs */
.custom .breadcrumbs {
font-family:Verdana,Arial;
font-size:1.2em;
padding:1.2em 1em 1em 1em;
border-color: #DDDDDD;
border-style: double;
border-width: 0 0 0.3em;
}
.custom .breadcrumbs a {
color:#888;
border-bottom: 1px dotted #fff;
}
.custom .breadcrumbs a:hover {
border-bottom: 1px dotted #cc0000;
}
Widgetek az oldal alján
A Thesis nem tartalmaz widgeteket a láblécben, így ha használni szeretnénk, létre kell hoznunk egy, kettő, három vagy több vízszintesen elhelyezett területet a láblécben, amit a megszokott módon használhatunk.. Ez egyszerűbb mint gondolnánk. A WordPress register_sidebar() funkcióját használjuk a láblécben is a widgetek alapjául szolgáló területek létrehozására is.
/* lábléc widgetek */
function footer() { ?>
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Column 1') ){ ?>
<li>
<h3>Custom Widget 1</h3>
<p>This widget is completely customizable and can be controlled via the Widgets Panel in <em>Admin → Appearance → Widgets → Footer Column 1</em></p>
</li>
<?php }
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Column 2') ){ ?>
<li>
<h3>Custom Widget 2</h3>
<p>This widget is completely customizable and can be controlled via the Widgets Panel in <em>Admin → Appearance → Widgets → Footer Column 2</em></p>
</li>
<?php }
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Column 3') ){ ?>
<li class="last">
<h3>Custom Widget 3</h3>
<p>This widget is completely customizable and can be controlled via the Widgets Panel in <em>Admin → Appearance → Widgets → Footer Column 3</em></p>
</li>
<?php } ?>
</ul>
<div id="copyright">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Copyright') ){ ?>
<p>Copyright © <?php echo(date('Y')); ?> Gipsz Jakab - Minden jog fenntartva.<a style="float: right;" href="#" title="Vissza az oldal tetejére">Vissza az oldal tetejére</a></p>
<? } ?>
</div>
<?php }
add_action('thesis_hook_footer', 'footer');
/* remove_action('thesis_hook_footer', 'thesis_attribution'); */
register_sidebar(array('name'=>'Footer Column 1', 'before_title' => '<h3>', 'after_title' => '</h3>', 'before_widget' => '<li>', 'after_widget' => '</li>'));
register_sidebar(array('name'=>'Footer Column 2', 'before_title' => '<h3>', 'after_title' => '</h3>', 'before_widget' => '<li>', 'after_widget' => '</li>'));
register_sidebar(array('name'=>'Footer Column 3', 'before_title' => '<h3>', 'after_title' => '</h3>', 'before_widget' => '<li class="last">', 'after_widget' => '</li>'));
register_sidebar(array('name'=>'Footer Copyright', 'before_widget' => '', 'after_widget' => ''));
Az alábbi kód gondoskodik a három widget-terület megfelelő megjelenítéséről:
/* lábléc widgetek */
.custom #footer_area { margin-top: 3em }
.custom #footer {
padding: 2em 1.1%;
text-align: left;
}
.custom #footer ul {
list-style: none;
overflow: hidden;
}
#footer li {
float: left;
margin-right: 2%;
width: 32%;
}
#footer li li {
float: none;
list-style: square;
width: auto;
}
#footer .last {
margin: 0; /* Fontos! */
}
#copyright {
border-top: 1px solid #000;
clear: both;
margin-top: 2em;
padding-top: 1.5em
}
A fenti kód három, vízszintesen elhelyezett widget-területre mutat példát és kedvünk szerint módosítható háromtól eltérő számú terület létrehozására.