vince.tikasz.hu 

Többször is felmerült már, egy-egy WordPress sablon fejlesztésekor, hogy a widget-eket, a sidebar regisztrálásakor megadott CSS osztályok mellet, további osztályokkal is felruházzam. Jó lett volna megjelölni pl. az elsőt, az utolsót, vagy minden másodikat, harmadikat. A legutolsó munkámnál egyszerűen nem találtam kerülő megoldást, elengedhetetlenné vált ennek a megvalósítása.

A WP widgetekért felelős kódjait végigbogarászva bukkantam a dynamic_sidebar_params filter tag-ra. Ezen a ponton lehet a widget-ek által is megkapott paramétereken szűrő függvényeket futtatni. Lássuk a kódot:

<?php
function widget_param_filter( $params ) {
    $id = $params[0]['id'];
    static $counter;
    static $counts;
    if ( is_null( $counter ) ) {
        $counter = array();
    }
    if ( is_null( $counts ) ) {
        $counts = array();
        $sidebars_widgets = wp_get_sidebars_widgets();
        foreach ( $sidebars_widgets as $sidebar_id => $widgets ) {
            $counts[ $sidebar_id ] = count( $widgets );
        }
    }
    if ( !isset( $counter[ $id ] ) ) {
        $counter[ $id ] = 0;
    }
    $count = $counter[ $id ];
    $class = array();
    $m = array();
    $alowedQuotes = "['\"]";
    if ( preg_match( '/\sclass=('.$alowedQuotes.')(?P<class>.*?)\\1/', $params[0]['before_widget'], $m ) ) {
        $class = array( $m['class'] );
    }
    if ( $count == 0 ) {
        $class[] = 'first';
    }
    if ( $count + 1 == $counts[ $id ] ) {
        $class[] = 'last';
    }
    $class[] = ( $count % 2 ) ? 'odd' : 'even';
    switch ( $count % 3 ) {
        case '0' : $class[] = 'one-thirds'; break;
        case '1' : $class[] = 'two-thirds'; break;
        case '2' : $class[] = 'three-thirds'; break;
    }
    switch ( $count % 4 ) {
        case '0' : $class[] = 'one-fourth'; break;
        case '1' : $class[] = 'two-fourth'; break;
        case '2' : $class[] = 'three-fourth'; break;
        case '3' : $class[] = 'four-fourth'; break;
    }
    if ( count( $m['class'] ) &gt; 0 ) {
        $params[0]['before_widget'] = preg_replace( '/\sclass=('.$alowedQuotes.').*?\\1/', '', $params[0]['before_widget'], 1 );
    }
    elseif ( preg_match( '/< \w+/', $params[0]['before_widget'] ) ) {
        $params[0]['before_widget'] = preg_replace( '/<(\w)+/', '<$1', $params[0]['before_widget'], 1 );
    }
    else {
        $params[0]['before_widget'] = '<div>';
        $params[0]['after_widget'] .= '';
    }
    $counter[ $id ]++;
    return $params;
}
add_filter( 'dynamic_sidebar_params', 'widget_param_filter' );

A két static változót használjuk számolásra. A függvény első hívásakor állítódik be a $counter változó értéke, mely egy, a regisztrált oldalsávokban található elemek számát tartalmazzó tömb. A $counts is egy tömb, melyben azt tartjuk nyílván, hogy adott oldalsávban éppen hanyadik widget-et bővítjük.

Ezután kinyerjük az eddig beállított osztályokat, és elkezdjük összeszedni a sorban elfoglalt hely szerintieket. Ha az aktuáls számláló nulla, akkor ez az első, ha egyel kisebb mint az elemek száma akkor ez az utolsó. Ha a számláló értéke osztható kettővel akkor páros (odd), ha nem akkor páratlan (even). Még megállapítja hanyadik harmad, és hanyadik negyednél jár.

Utolsó lépésben lecseréljük az eddigi osztályokat az összeszedettre. Ha nincs beállítva semmilyen osztály, akkor a legkülső HTML tag kapja meg mint új attributumot. Ha a határoló kód üres, akkor beállítunk egy div elemet az előbb összeszedett osztályokkal (és egyúttal a zárót is bővítjük, az előbbi div záró felével).

Ezt a kódot a használt téma functions.php állományába kell elhelyezni

Újabb frissítésen esett át a Searchlink plugin. Első lépesben töröltem a megboldogult Tango keresőt, de ha már ezt megtettem, akkor elvégeztem, amit már az előző verzió lezárása óta szeretnék.

Az előző verzióban még csak engedélyezni, tiltani lehetett az egyes “kereső protokollokat”. Ettől a verziótól nincsenek “beégetett” protokollok, mindegyik szerkeszthetővé vált.

Egyenként engedélyezhető mind, további álneveket adhatsz a keresőkhöz, és a törlésre is megvan a lehetőség.

Searchlink 0.5 letöltése Telepítés leírása

Elég nagy frissítésen esett át a Searchlink plugin. Az előző (0.2) verzióban gyakorlatilag összesen egy preg_replace hívás történt. Ebben a verzióban sokkal egyszerűbbé vált az új keresők implementálása is.

A 0.4.2-es verzió kapott egy beállító felületet, ahol az egyes “kereső protokollokat” ki, vagy be lehet kapcsolni.

A Miner és a Tango keresőkhöz létrehozott hivatkozások CSS osztályából kikerült a ‘-hu’ rész, így csak a 'miner', 'tango', 'tango-image' osztályok maradtak.

A jövőbeli tervek között szerepel az egyes elemek adatainak szerkesztésének lehetősége (alias, url, stb.,) valamint az új elemek felvételének, és a meglévők törlésének lehetősége.

Letöltés (searchlink_v042) Telepítés leírása

Ezennel szeretném publikussá tenni a Searchlink WordPress plugint, mely a bejegyzésekben, és a hozzászólásokban a ‘google://keress+meg’; formátumú keresésre utaló szövegeket kattintható hivatkozássá alakítja át.

Eddig ismeri a WordPress saját keresőjét, Google, Yahoo, MSN kereső, Altavisata, AllTheWeb, Miner.hu és Tango keresőket.

A tovább fejlesztési javaslatokat hozzászólásokban itt várom.

Úgy döntöttem (miszerint, az a véleményem), hogy újul az oldalam kinézete címe. A sötétre sikerült korábbi kinézetet világosabbra cserélem, ugyanakkor eleflejtem a 800×600-at és 1024×768-as felbontásban gondolkodom.

Általában, ha új WP témát készítek, akkor a alapértelmezett Kubrik témáról készítek egy kigyomlált másolatot, amiben csak a legszükségesebb állományok maradnak meg (style.css, index.php, header.php, footer.php, sidebar.php, comments.php, comments-popup.php, searchform.php, functions.php), majd kiürítem a CSS-t, hogy nulláról építhessük fel az új kinézetet. Ezután az alap szerkezetet kissé módosítottam egy általánosabbra.

A későbbi meglepetések megelőzése végett, az új CSS-t CSS reset-tel kezdem

Azt már biztosan tudom, hogy a szerkezetben maradt hr tagokat nem szeretném megjeleníteni, és a kódblokkokat is kódszerűen szeretném megjeleníteni.

pre {
	font-family: "Consolas","Courier New",Courier,mono,monospace;
	font-size: 12px;
	line-height: 1.1em;
}
hr {  display: none; }

Hogy beférjen az oldal a fentebb kitűzött felbontású monitorra, a körbefogó #page szélességét 980px-re állítom, a képernyő közepén veló megjelenítésér pedig a margin: 0 auto; rész felel. A fejléc szélességét, és hátterét is meghatározom, így annak további elemeit már tudom a látványterveben kialakított vonalakhoz tudom igazítani.

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
#page {
	width: 980px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	background: transparent url(img/sidebar.bg.jpg) repeat-y scroll right center
}

#header {
	color: #fff;
	height: 225px;
	background: #000 url(img/header.bg.jpg) no-repeat 0 0;
}

A következő lépéssel kialakítjuk az alap kétoszlopos elrendezést. A módosítások után már az oldalsáv kb a helyén látszik, ugyan még kilóg a számára szánt helyről.

#content {
	width: 670px;
	float: left;
}
#sidebar {
	float: right;
	width: 260px;
	position: relative;
	right: 20px;
}
#sidebar ul {
	list-style: none;
	margin: 0;
}

A dobozok kilógásán és a doboz címek tervnek megfelelő formázását a következőkkel állítottam be

#sidebar .widget .widgetcontent {
	padding: 5px 15px 10px;
	font-family: Georgia,Times,"Times New Roman",serif;
}

#sidebar .widgettitle {
	font-size: 1.3em;
	color: #fff;
	background: #000 url(img/sidebar.head.bg.jpg) no-repeat top right;
	margin: 10px 25px 0 0;
	padding: 5px 10px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
}

Pár pillanatig térjünk vissza a fejlécre

#headerimg .description {
	position: absolute;
	top: 0;
	left: 50px;
	height: 40px;
	width: 580px;
	background: #f4eedf;
	color: #000;
}
#headerimg .description .desccont {
	padding: 5px;
	text-align: center;
}
#headerimg h1 {
	height: 90px;
	left: 40px;
	position: absolute;
	top: 70px;
	width: 640px;
}
#headerimg h1 a {
	display: block;
	height:90px;
	color: #fff;
	line-height: 90px;
	text-align: center;
	text-decoration: none;
	font-size: 3em;
}
#headerimg h1 a #titletext {
	display: none;
}
#headerimg h1 a #titleimg {
	background: url(img/titleimg.jpg) no-repeat 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

Az első két kiválasztóval a leírás mezőt betettem a felső (régi dizájnból átvett háttérszínű) dobozba. A második kettővel, pedig az oldal valódi címét (ami esetünkben az URL is egyben) a fekete blokk közepére tettem. A #titletext, és #titleimg blokkokkal kicsit a dizájnnak is adhatunk…

A keresődobozt kicsit átalakítottam, hogy könnyebben lehessen formázni. A hagyományos < input type="submit" /> gombot kicseréltem egy megfelelően felparaméterezett button elemre

<button>Keresés</button>

amit már sokkal könnyebben testre szabhattam.

#sidebar #searchform input {
	border: 1px solid #333;
	padding: 1px;

}
#searchform #submit {
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent url(img/icons/magnifier.png) no-repeat center top;
	text-indent: -1000em;
	cursor: pointer;
	cursor: hand;
}

Ha most letekerünk a lap aljára észrevehetjük, hogy a láb rész még mindig úgy néz ki ahogy (sehogy). Ráadásul az oldalsáv sem ér le a lap aljára. Mivel mind a #content, mind a #sidebar dobozok lebegnek (float: left/right;), rá kell vennünk #footer dobozt hogy zárja le az összes lebegtetést (clear: both;). A viszonylag nagy padding értékek a dizájn elemek érvényesülése miatt szükségesek.

#footer {
	color: #fff;
	clear: both;
	background: #000;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-size: .7em;
	padding: 40px 0 10px;
	background: #000 url(img/footer.bg.jpg) no-repeat 0 0;
}
#footer a {
	color: #ddd;
}
.copy {
	font-family: Verdana,Helvetica,Arial,sans-serif;
 	text-align: right;
	margin: 10px;
	color: #ddd;
}

Ha már idelent vagyunk gyorsan formázgassuk meg a láb részben elhelyezett dobozokat is. A .widgetcontent és .widgettitle kiválasztók padding értékével nagyon-nagyon sok időt el lehet játszani (tapasztalatból mondom ).

#footer ul {
	list-style: none;
	margin: 0;
}
#footer #footerwidgets {
	float: left;
	background: #000;
	border-top: 1px solid #fff;
}
#footer ul.widgets {
	float: left;
	width: 980px;
	border-collapse: collapse;
}
#footer ul.widgets li.widget {
	float: left;
	width: 490px;
	line-height: 1.3em;
}
#footer ul.widgets li.widget .widgettitle,
#footer ul.widgets li.widget .widgetcontent {
	margin: 20px 40px 10px;
}
#footer ul.widgets li.widget .widgettitle {
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
	padding-bottom: .5em;

}
#wp-calendar {
	width: 100%;
}

A navigációs doboz elhelyezésén és formázásán rengeteget gondolkoztam, de a végén ennél a formánál maradtam

.navigation {
	background: #000 url(img/posttitle.bg.png) no-repeat left bottom;
	color: #fff;
	padding: 15px 20px 15px 15px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-size: .7em;
	float: left;
	width: 650px;
}
.navigation a {
	color: #fff;
}
.navigation .older {
	float: left;
}
.navigation .newer {
	float: right;
}

Na és akkor foglalkozzunk kicsit magukkal a postokkal is egy picit. Először a bejegyzés címével kezdem. A formázás kialakításakor szempont volt, hogy egy jól olvasható, könnyen észrevehető cím formázás legyen a végeredmény, ugyanakkor szerettem volna átemelni az előző dizájn “átnyúló” (egyesek szerint szövegkiemelős) motívumát. Eddig kintről nyúlt be, most a belső elválasztóvonalként szolgáló “tengelyből” fog kifelé nyúlni.

.post h2.posthead {
	background: #000 url(img/posttitle.bg.png) no-repeat left bottom;
	color: #fff;
	padding: 15px 20px 15px 15px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-size: 1.4em;
}

.post h2.posthead a {
	color: #fff;
	text-decoration: none;
}

A bejegyzés adatait tartalmazó rész kialakításakor megengedtem egy pici játékot (amennyit a szerkezet engedett). A :before, :after kiválasztók és a content szabály használatával az adat blokkok felidézik a HTML kódok szerkezetét. Gondolkodtam rajta, hogyan lehetne atribútum/értéké párokat is megjeleníteni, de úgy tűnt számomra, hogy ezt csak a szerkezet jelentős módosítása, és/vagy a szemantikusság feladása árán lehetett volna elérni.

.post .metadata {
	font-size: .8em;
	font-family: "Consolas","Courier New",Courier,mono,monospace;
	text-align: right;
	padding: 10px 20px;
}
.post .metadata .meta {
	white-space: nowrap;
}
.post .metadata .meta:before{
	content: "<";
}
.post .metadata .meta:after {
	content: " />";
}

A bejegyzés forma meghatározásakor a célom az volt, hogy jól olvasható sorok jelenjenek meg, a bekezdések egyértelműen elváljanak, ugyanakkor maradjon egyértelmű, hogy összetartoznak.

.post .entry {
	margin: 0 20px 5px;
	line-height: 1.4em;
	font-size: .9em;
	font-family: Georgia,Times,"Times New Roman",serif;
}
.post .entry p {
	margin: 1em 0;
}

És a végére egy kis játék a linkekkel. Szerettem volna picit szinesebbé tenni az oldalt, de az alapszíneke uralkodó mivoltát megtartani. Ezért felvettem a következő két szabályt is.

.post .entry a[href^="http://"] {
	padding-right: 20px;
	margin-right: 5px;
	background: url(img/icons/world_link.png) no-repeat center right;
}
.post .entry a[rel^="lightbox"] {
	padding-right: 0  !important;
	background: none !important;
}

Az elsővel minden “külső” link kap a jobb oldalára egy ikont, mely jelz, kattintásra el hagyjuk az oldalt. Ugyanakkor a postokban elhelyezett lightboxos hivatkozásokon nem szeretnénk ezt az extrát érvényesíteni. A játékhoz hozzátartozik a header.php-ben elhelyezett CSS szabály is mely a belső hivatkozásokat jelöli meg.

.post .entry a[href^=""],
.post .entry a[href^="/"]
{
	background: url(/img/icons/house_link.png) no-repeat center right;
	padding-right: 20px;
	margin-right: 5px;
}