År 2007 startades siten IconFinder som nu är en av världens populäraste hemsidor för att söka fram och ladda ner bloggikoner. Men en snygg design, enkel navigation och smarta funktioner gör IconFinder ikonsöknandet till en fröjd för utvecklaren och genom att kunna söka på en viss typ av ikon istället för ett set av ikoner, skiljer den ut sig från mängden ikonhemsidor och gör det roligt att hitta dina små bilder.

Om du hittar en ikon du tycker om, kan du självklart titta på hela settet för att hitta liknande ikoner som passar bra ihop.

Genom en användarvänlig meny kan du ställa in bakgrund till ikonerna, vilken storlek du önskar och huruvida du letar efter ikoner som går att använda till kommersiella ändamål eller inte.

De klassiska och populära ikonsamlingarna hittar du självklart också på hemsidan, likt silk2 till exempel. Genom att skriva iconset: före ditt sökord letar du enkelt upp det specifika iconset som du önskar, för just silk2 blir alltså adressen: iconset:silk2.

Som om detta inte var tillräckligt, IconFinder erbjuder dessutom ett eget API för dig att kunna programmera dina egna applikationer och funktioner emot. Kanske visa de senaste ikonpaketen på din egen hemsida?

Har du egna ikoner som du gjort hemma och känner att du också vill finnas med på IconFinder, då kan du enkelt ladda upp dina ikoner på siten och bli tillgänglig i sökmotorn för att nedladdas du med.

Detta är lite av vad IconFinder har att erbjuda, ta en titt själv för att se hur det fungerar. Har du någon annan bra ikonsida att rekommendera? Släng iväg en kommentar och berätta för mig i så fall. Tills WordPressGuru har hittat någonting bättre kommer jag i alla fall att använda IconFinder.

Men andra ord, blogga som du är van att se det. Det är gratis att ladda ner, så ladda ner AdminPress direkt och testa hur det ser ut.

Klicka på bilden för att se ett demo.

Features

AdminPress använder sig av 960 Grid System, som är ett CSS framework, som gör programmeringen enklare och snyggare.
Det gör att sidan är precis 960 px bred (inklusive 20 px padding på vardera sida) vilket skapar den bästa upplösningen för alla skärmupplösningar som förtillfället används (allt över 1024*768 px).

Main kolumnen tar upp 9 grids och skapar således efter borders och padding en skrivyta på 678 px.
Sidebaren som är placerad på höger sida tar upp övriga 3 grids. Ytan där texten är placerad blir efter paddings och borders 198px bred.

AdminPress finns hittills bara på Svenska.

Pluginstöd

AdminPress stödjer följande plugins utan att du behöver redigera någonting:

• Yoast Breadcrumbs
• Yet Another Related Posts Plugin
• WP-PageNavi
• SexyBookmarks

Sök efter dem i ”Lägg till plugins” och aktivera, så är det klart.
Några av tilläggen försöker lägga till sig själva. Stäng av detta, då temat sköter det själv.)

Inlägg med sidor

Om du skriver inlägg med <!––nextpage––> för att dela upp inlägget i flera sidor, kan du använda ”egna fält” för att namnge dina sidor.

Skapa ett ”eget fält” som heter ”page_name” och som värde skriver du sidans namn. Om du har fler sidor så lägger du till fler fält med nyckeln ”page_name”. Som standard blir sidorna döpta till ”Sida 1, Sida 2…”.

Excerpt / Content

I temats inställningspanel (Teman > Theme Settings) kan du välja ifall du vill att framsidan ska visa blogginläggen som heltext eller som sammanfattning, om du väljer att visa dem som heltext kan du fortfarande korta av dem genom att använda <!––more––>-taggen.

Post Thumnails

Om du vill kan du inkludera tumnaglar till dina inlägg som visas på första sidan ifall du använder dig av ”Sammanfattning”. Ställ in eventuell tumnagel på inläggssidan. Och ställ in storleken på alla tumnaglar under Inställningar > Media > Miniatyrstorlek.

Changelog

1 Mars 2010 — ver. 1.1:
• Fixade indikatorer på dropdown menyer med undermenyer.
• Rättade till i kommenteringen

1 Mar 2010 — ver. 1.2:
• La till stöd för inläggstumnaglar (post_thumnails).

2 Mar 2010 — ver. 1.3:
• Snyggade till och fixade lite buggar i Drop Down menyn för sidor.

2 Mar 2010 — ver. 1.4:
• Rundade till en hel del kanter, för att göra det mer likt administrationspanelen

3 Mar 2010 — ver. 1.5:
• Uppdaterade screenshot.png.
• Fixade en bugg med datumet.

3 Mar 2010 — ver. 1.6:
• Fixade en bugg i pageNavi stylen

Ladda Ner

wp_list_pages()

För att göra detta i WordPress kommer vi att använda oss av funktionen wp_list_pages() som listar alla sidor precis på ett sånt vis som vi vill ha dem.

Gå in i header.php och leta upp ett bra ställe att placera dina sidor på. När du hittar en bra plats skriver du följande:

1
2
3
4
5
6
7
8

<div id="nav">
    <ul>
        <li <?php if(is_front_page()) { ?>class="current_page_item"<?php } ?>>
            <a href="<?php echo get_option('home'); ?>/">Hem</a>
        </li>
        <?php wp_list_pages('sort_column=menu_order&title_li=' ); ?>
    </ul>
</div>

Ok, nu har vi skapat oss en lista med först en länk till ”Hem” och sedan en lista av resterande sidor och undersidor. Raden om ”current_page_item” är till för att vi ska kunna ändra färg på ”Hem” när vi är placerade på den sidan.

Vi kommer nu få en meny som ser ut ungefär så här:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id="nav">
    <ul>
        <li>
            <a href="#">Hem</a>
        </li>
        <li>
            <a href="#">Topp Sida</a>
            <ul>
                <li>
                    <a href="#">Undersida 1</a>
                </li>
                <li>
                    <a href="#">Undersida 2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Sida utan undersidor</li>
        </li>
    </ul>
</div>

Style.css

Gå nu vidare till din stilmall i filen style.css och börja med följande:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#nav{
	background: #464646;
	color: #999999;
}
#nav li{
	display: inline;
	list-style: none;
	margin: 0;
	position: relative;
}
#nav a{
	text-decoration: none;
	color: #999999;
	padding: 0px 15px;
	margin: 0;
	display: inline-block;
	font: normal 14px/47px Georgia,"Times New Roman","Bitstream Charter",Times,serif;
}

Det som är viktigt här är att ha li som inline så att de hamnar på en horisontell linje istället för under varandra. Sedan att ha position som relative så att vi senare kan få våra drop down menyer att hamna rätt.

I a är det viktigt att använda inline-block så att de hålls kvar på en linje, men fortfarande accepterar line-hight och padding. Line-hight är det som står efter / i deklarationen om font, alltså i exemplet 47 px. Detta ska vara höjden på din meny. Så har du en högre eller mindre meny, ändra detta värde.

Göm dina undersidor

Som läget är nu, så kommer vi att se våra undersidor hela tiden, så vill vi inte ha det, utan vi vill bara att undersidorna ska synas ifall vi håller musen på huvud sidan. Så vi lägger till följande.

1
2
3
4
5
6
7

#nav ul ul{
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background: #464646;
}

Vi definierar #nav ul ul eftersom det betyder en onumrerad lista inuti en onumrerad lista, alltså en undermeny. Sätt display till none så visas den inte. Sätt till din ”Absolut” så blir vi fria att placerade den var som helst. Eftersom vi vill ha den precis under huvud sidan så sätter vi left: 0; och top: 100%; det är här det är viktigt att vi redan definierat #nav li till position: relative, annars skulle undermenyn hamna högst upp i vänster hörn.

Bakgrunds färgen är bara att den ska synas.

Ta fram undersidorna igen

Vi vill att undersidorna ska visas när vi håller musen över länken till huvud sidan, alltså a:hover, men detta skulle göra att under menyn skulle försvinna ifall vi försöker flytta ner musen till undermenyn. Så istället använder vi oss av li:hover, då vi har en <li>-tag som sträcker sig runt hela undermenyn. Koden blir alltså:

1
2
3

#nav li:hover > ul{
	display: block;
}

Genom att sätta display till block får vi dem dessutom på en vågrät linje under varandra. Vill vi att undermenyerna också ska vara på en horisontell linje kan vi sätta display till inline.

Eftersom alla li, enligt tidigare definition är satta som inline och vi här vill ha dem som block, kan det vara bra att definiera det här också:

1
2
3

#nav li ul li{
	display: block;
}

Snygga till

Om vi är på en under-under-sida (Pappa > Son > Barnbarn) och vill att alla tidigare sidor, plus den vi är på (Barnbarn, Son och Pappa) ska bli färgade på ett speciellt sätt så kan vi använda oss av vissa klasser som automatiskt kommer att skapas. Den aktiva sidan (Barnbarn) kommer att få klassen current_page_item sidan ovanför den (Son) kommer att få klassen current_page_parent och alla sidor ovan för denna (Pappa, och Farfar och…) kommer att få klassen current_page_ancestor. Vi kan deklarera dessa separat eller gemensamt enligt:

1
2
3
4
5

#nav li.current_page_ancestor > a,
#nav li.current_page_parent > a,
#nav li.current_page_item > a{
	color: #FFFFFF;
}

Koden ovan gör så att länken direkt efter ett list item som har någon av dessa klasser kommer att få en vit text.

Under-under-sidor

Om du har sidor som är barn till en undersida så kommer du att få problem med våran kod. Det mest klassiska är att dessa menyer ska dyka upp bredvid menyn till höger om denna. Vi kan då skriva in följande:

1
2
3
4
5

#nav ul ul ul{
	position: absolute;
	left: 100%;
	top: 0;
}

Vilket kommer att flytta alla under-undersidor en meny till höger.

Vill du att menyerna ska ligga lite omlott kan du tex skriva:

1
2
3
4
5

#nav ul ul ul{
	position: absolute;
	left: 98%;
	top: 10px;
}

Hover effekter

Det sista vi kan snygga till är så att vi får ändra färger på menyvalen när vi håller musen på dem. Det ordnar vi enklast så här:

1
2
3
4

#nav li a:hover{
	color: #FFFFFF;
	background: #999999;
}

Detta kommer att göra så att när du håller musen på ett menyalternativ kommer det alternativet att bli vitt och få en bakgrundsfärg som är #999999;

Vill du göra det lite mer avancerat, så att det blir likt bilden högst upp, där det inte någon bakgrund på top-länken, men på undersidorna, och färgen dessutom stannar kvar när man kommer vidare till en undersida kan du använda följande kod:

1
2
3
4
5
6

#nav li ul li:hover > a{
	background: #999;
}
#nav li:hover > a{
	color: #FFFFFF;
}

Avslutning

Det ska nog vara allt som krävs, självklart man man leka mer om man vill, testa att sätta en border på #nav li ul och se vad som händer. Ändra på top och left och se hur det förändrar ditt utseende, skriv menyvalen i andra storlekar, bold och med andra färger och ändra detta när du håller musen över för att få en annan effekt. Sätt en bakgrund med en gradient färg för att skapa en webb 2.0 känsla över menyn.

Skriv en kommentar och visa din meny eller fråga om det är någonting som inte fungerar.

Här följer en exempel fil med css koden som används i exemplet.

Överkurs, undermenys inikator

Om man vill sätta dit en liten pil på undersidorna som indikerar att det finns fler undermenyer så finns det ett ganska snyggt sätt att göra det på, men tyvärr syns det inte i IE.

Eftersom WordPress inte sätter dit några klasser som visar på att det finns under menyer, och jag i den här guiden inte vill göra några avancerade javascript eller php-funktioner för att lägga till det, så kan vi använda oss av en css kod för att lösa problemet.

Vi utnyttjar :not() och :last-child, som fungerar utmärkt i Firefox, Opera och Crome, men tyvärr inte i någon version av IE. Koden ser ut så här:

1
2
3

#nav li li a:not(:last-child){
	background: url(./images/arrowInd.png) no-repeat 100% 50%;
}

Det koden säger är att li li a, en länk i en lista i en lista (alltså en länk i en undermeny) som inte är det sista barnet i det listobjektet, ska ha en bakgrund.

Om vi tittar på våran förenklade modell av menyn från tidigare:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id="nav">
    <ul>
        <li>
            <a href="#">Hem</a>
        </li>
        <li>
            <a href="#">Topp Sida</a> <!-- Länk med undermeny -->
            <ul> <!-- Fler barn i <li> -->
                <li>
                    <a href="#">Undersida 1</a>
                </li>
                <li>
                    <a href="#">Undersida 2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Sida utan undersidor</li> <!-- Länk utan undermeny. Ända barnet -->
        </li>
    </ul>
</div>

Som ni kan se har länkar med undermenyer fler element under sig, och blir då alltså ”inte sista barnet” och uppfyller kraven från innan.

På detta länkar vill vi sätta en bakgrund som ser ut som en pil, som vi sedan placerar längst ut till höger (Häger 100% och vertikalt i mitten 50%).

I exemplet krävs också att du har en bild som heter arrowInd.png som ligger i mappen Images

Så varför inte låta kommentarerna vara ett rent nöje för besökaren, så att denne verkligen vill lämna ett avtryck? Den här guiden kommer att gå igenom allting från att sätta in kommentering, till att tråda dem och slutligen förändra dem precis som du själv önskar.

Lokalisera kommentarerna

Den mesta koden till kommentarerna är placerade i templet-filen comments.php, om du inte har en sådan i ditt tema redan, så skapar du en nu. Vi kommer sedan också att använda oss av functions.php för att få våra kommentarer att visas på det vis vi själva vill.

Men vi börjar med en helt annan fil, nämligen single.php och page.php. Öppna dessa och lokalisera platsen där du vill att dina kommentarer ska synas (om du vill ha kommentarer förståss, jag själv har inte tillåtit kommentarer på sidor, och alltså ingen kod där). Denna plats bör vara direkt efter ditt inlägg, kanske efter att du har redovisat relaterade inlägg, och troligtvis precis innan en </div>.

Här placerar du följande rad:

<?php comments_template(); ?>

Ok nu var det klart. Spara dessa filer och stäng dem.

Comments.php

Nu öppna comments.php och börja sidan med följande:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
/**
 * @package Ditt_Paket
 * @subpackage Ditt_Tema
 */
 
// Do not delete these lines
	if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');
 
	if ( post_password_required() ) { ?>
		<p class="nocomments">Detta inlägg är lösenordsskyddat. Vänligen skriv in lösenordet för att visa kommentarerna.</p> 
	<?php
		return;
	}
?>
 
<!-- Du kan börja ändra här. -->

Dessa rader startar alla kommenteringssidor, de startar med lite kontroll av paketet ditt tema ingår i, fortsätter med att se till så att man inte försöker komma åt ”comments.php” direkt, och avslutas med att undersöka ifall kommenteringen är lösenordsskyddad eller inte.

Fortsätt sedan med följande:

1
2

<?php if ( have_comments() ) : ?>
   <h3 id="comments"><?php comments_number('Inga Kommentarer', 'En Kommentar', '% Kommentarer' );?> till '<?php the_title(); ?>'</h3>

På rad ett undersöker vi ifall vi har kommentarer eller inte. Och på rad två skriver vi ut en rubrik med antalet kommentarer följt av titeln på inlägget. Byt gärna ut texten ifall du vill ha någonting annat. Nu kan det exempel vis stå:

Genom att byta plats på dessa två rader kommer den här rubriken att synas oavsett ifall det finns kommentarer eller inte.

Från version 2.7 har det tillkommit en funktion som heter wp_list_comments() som jag starkt rekommenderar er att ni använder, den ser dessutom automatiskt till att dina kommentarer blir trådade, ifall du har accepterat det.

Skriv följande:

1
2
3

<ul class="commentlist">
    <?php wp_list_comments();?>
</ul>

Det här är allt som behövs för att skriva ut dina kommentarer. För att ändra hur dina kommentarer skrivs ut, se mer information om wp_list_comments() nedan.

Om du har mycket kommentarer har man sedan version 2.7 också lagt till så att kommentarerna delas upp i flera sidor, för att kunna navigera mellan sidorna måste du lägga till navigations kanppar:

1
2
3
4

<div class="navigation">
    <div class="alignleft"><?php previous_comments_link() ?></div>
    <div class="alignright"><?php next_comments_link() ?></div>
</div>

När du är färdig här måste du sätta in lite mer WordPress rader:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php else : // this is displayed if there are no comments so far ?>
 
	<?php if ( comments_open() ) : ?>
		<!-- Om kommentarerna är öppna, men ingen har kommenterat än. -->
 
	 <?php else : // comments are closed ?>
		<!-- Om kommenteringen är stängd. -->
		<p class="nocomments">Kommenteringen är stängd</p>
 
	<?php endif; ?>
<?php endif; ?>
 
<?php if ( comments_open() ) : ?>

Här kan du göra förändringar ifall du vill att någonting speciellt ska ske ifall det inte har kommit några kommentarer eller ifall kommenteringen är stängd. Sista raden undersöker ifall kommenteringen är öppen, för i så fall vill vi placera in formuläret besökaren ska kunna skriva sin kommentar i.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<div id="respond"> <!-- Viktig ifall du vill att "svara" ska fungera bra -->
 
<h3><?php comment_form_title('Lämna en kommentar', 'Skriv ett svar till %s'); ?></h3> <!-- Formulär titel beroende på ifall du vill svara någon eller inte. -->
 
<div id="cancel-comment-reply"> <!-- Om någon har klickat på svara, kan man avbryta det här -->
	<small><?php cancel_comment_reply_link() ?></small>
</div> 
 
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>Du måste vara <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">inloggad</a> för att kunna skriva en kommentar.</p>
<?php else : ?>
 
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
 
<?php if ( is_user_logged_in() ) : ?>
 
<p>Du är inloggad som <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Logga ut från denna session') ?>">Logga ut &raquo;</a></p>
 
<?php else : ?>
 
<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Namn <?php if ($req) _e("(obligatoriskt)"); ?></small></label></p>
 
<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (kommer inte att visas) <?php if ($req) _e("(obligatoriskt)"); ?></small></label></p>
 
<p><input type="text" name="url" id="url" value="<?php echo  esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url"><small>Hemsida (frivilligt)</small></label></p>
 
<?php endif; ?>
 
<!-- Ta bort kommentering ifall du vill visa tillåtna taggar -->
<!--<p><small><strong>XHTML:</strong> Du kan använda dessa taggar: <code><?php allowed_tags(); ?></code></small></p>--> 
 
<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>
 
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Skicka kommentar" />
<?php comment_id_fields(); ?> 
</p>
<?php do_action('comment_form', $post->ID); ?>
 
</form>
 
<?php endif; // Avsluta ifall registrering krävs och du inte är inloggad ?>
</div> <!-- Avsluta id="respond" -->
 
<?php endif; // Om du tar bort denna kommer himlen att falla ner ?>

Allright, vi har precis gått igenom allt som behövs skrivas i comments.php. Grattis. För att ”svara” ska fungera också måste du lägga till en liten kodsnutt i header.php.

Så öppna header.php och leta upp <?php wp_head(); ?>
Precis innan placerar du denna kod:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

Vilket inkluderar all javascript som behövs för att ”svara” ska fungera.

Så allt klart. Testa att öppna din blogg att se att allting fungerar.

wp_list_comments();

För att få dina kommentarer att synas så tar wp_list_comments() hand om hela proceduren. Genom att ange lite värden till den här funktionen kan vi förändra delar av denna listning, eller alltihop. Som standard ser funktionen ut så här:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php $args = array(
    'walker'            => null,
    'max_depth'         => ,
    'style'             => 'ul',
    'callback'          => null,
    'end-callback'      => null,
    'type'              => 'all',
    'page'              => ,
    'per_page'          => ,
    'avatar_size'       => 32,
    'reverse_top_level' => null,
    'reverse_children'  =>  ); ?> 
 
 <?php wp_list_comments( $args ); ?>

Värdena ‘max_depth’, ‘per_page’ och ‘reverse_top_level’ sätts lättast i administrationspanelen under ”Inställningar > Diskussion”, men om temat så önskar, kan bli åsidosatta här.

‘avatar_size’ är storleken på den avatar som används. För mer information om avatarer, läs Skaffa avatarer med Gravatar. Avatarerna i mina kommentarer är 80 px stora.

‘style’ kan ha värdena ‘ul’, ‘ol’ eller ‘div’, och värdet du använder måste överensstämma med de taggar du skrev runt wp list comments() i filen comments.php. Koden ska alltså vara någon av dessa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ul class="commentlist">
    <?php wp_list_comments(); ?>
</ul>
 
<!-- ELLER -->
 
<ol class="commentlist">
    <?php wp_list_comments(array('style' => 'ol')); ?>
</ol>
 
<!-- ELLER -->
 
<div class="commentlist">
    <?php wp_list_comments(array('style' => 'div')); ?>
</div>

‘type’ kan ha värdena ‘all’, ‘comment’, ‘trackback’, ‘pingback’ eller ‘pings’, och avgör vilka sorts kommentarer som ska visas. Om du sätter pings så visas både trackbacks och pingbacks.

‘callback’ är den mest intressanta variabeln här, eftersom den kan se till att vi kan förändra hur kommentarerna ska visas, helt och hållet. Se nästa stycke.

För resterande värden och vad du kan göra med dem, ta en titt på wp_list_comments i WordPress.org’s Codex

Bestäm själv hur kommentarerna ska se ut

Genom att använda sig av en callback funktion kan du utforma dina kommentarer precis som du vill. För att göra det, gå in i comments.php Och ändra koden så att det står:

1
2
3

<ul class="commentlist">
    <?php wp_list_comments('callback=mina_kommentarer');?>
</ul>

Öppna sedan functions.php och skapa en ny funktion som heter samma sak du skrev i comments.php:

1
2

function mina_kommentarer($comment, $args, $depth) {
}

I den här funktionen skriver du sedan precis hur du vill att varje kommentar ska visas, här är ett exempel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default=get_bloginfo('stylesheet_directory').'/images/noAvatar.php' ); ?>
 
         <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>
 
      <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s klockan %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
 
      <?php comment_text() ?>
 
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php
}
?>

Ok det som är viktigt här är den första rande: $GLOBALS['comment'] = $comment; som ser till att den aktuella kommentaren verkligen är aktuell, så att vi kan utnyttja alla standard funktioner och nå kommentarens värden.

comment_class(); ser till att placera massa olika klasser på din <li>-tagg så att du kan ändra style’s beroende på ifall det är en admin som har kommenterat eller exempelvis alterera färger mellan kommentarerna.

get_avatar(); hämtar och skriver ut avataren. I exemplet i storlek 48px och om användaren inte har en avatar använder han bilden som ligger i ditt tema under /images/noAvatar.png.

comment_reply_link(); genererar svara-knappen och fungerar bara om du gjort resterande saker jag skrivit den här guiden.

Övriga saker i exemplet är nog ganska självförklarliga, comment_text(); är kommenterarens text till exempel.

Sist får du inte heller glömma att det inte ska vara någon avslutande </li>-tag då WordPress sköter detta automatiskt. Det beror på att man ska kunna få nästade, trådade inlägg att fungera.

Styla dina kommentarer

Ok över till style.css och börja styla dina kommentarer.

Jag kan gå över detta lite övergripande bara eftersom egen experimenterade är det bästa sättet att lära sig på.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

ul.commentlist{
  /*Detta ringar in alla dina kommentarer*/
}
li.comment{
  /*Om kommentaren är en kommentar (annars trackback, eller pingback)*/
}
li.even{
  /*Ändra här om du vill alterera bakgrunden på dina kommentarer*/
  background: #FFFFFF;
}
li.odd{
  background: #E7E7E7;
}
li.byuser{
  /*Om inlägget har gjort av en inloggad användare*/
}
li.bypostauthor{
  /*Om kommentaren är gjord av inläggsskribenten*/
  background: #EEEEFF;
}
li.depth-1{
  /*Kommenteringsdjup, nivå 1*/
}
li.depth-2{
  /*Kommenteringsdjup, nivå 2*/
}
ul.children{
  /*För varje ny nivå skapas denna, sätt margin för att förskjuta kommentarerna*/
  margin-left: 15px;
}
.vcard{
  /*Här är avataren och 'personen säger'*/
}
.comment-meta{
  /*Är datum och tid för kommentaren*/
}
.replay{
  /*Är svars knappen*/
}

Ok det där är väl framförallt de viktigaste klasserna. För mer exakta områden i kommentaren, rekommenderar jag att använda tillägget Firebug till Firefox och inspektera dina kommentarer, eller så lämnar du en kommentar, så kan jag säkert hjälpa dig.

Dela upp dina Kommentarer och Pingar

Om du vill separera dina kommentarer och pingar, tex så som jag har gjort, så kan du lätt fixa det.
Byt ut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?php if ( have_comments() ) : ?>
    <h3 id="comments"><?php comments_number('Inga Kommentarer', 'En Kommentar', '% Kommentarer' );?> till '<?php the_title(); ?>'</h3>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
    <ul class="commentlist">
        <?php wp_list_comments('callback=mina_kommentarer');?>
    </ul>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
	<?php else : // this is displayed if there are no comments so far ?>
 
    <?php if ( comments_open() ) : ?>
            <!-- Om kommentarerna är öppna, men ingen har kommenterat än. -->
 
    <?php else : // comments are closed ?>
            <!-- Om kommenteringen är stängd. -->
            <p class="nocomments">Kommenteringen är stängd</p>
 
    <?php endif; ?>
<?php endif; ?>

Mot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<h3 id="comments"><?php comments_number('Inga Kommentarer', 'En Kommentar', '% Kommentarer' );?> till '<?php the_title(); ?>'</h3>
<?php if ( have_comments() ) : ?>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
    <ul class="commentlist">
        <?php wp_list_comments('type=comment'callback=mina_kommentarer');?>
    </ul>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
	<?php else : // this is displayed if there are no comments so far ?>
 
    <?php if ( comments_open() ) : ?>
            <!-- Om kommentarerna är öppna, men ingen har kommenterat än. -->
 
    <?php else : // comments are closed ?>
            <!-- Om kommenteringen är stängd. -->
            <p class="nocomments">Kommenteringen är stängd</p>
 
    <?php endif; ?>
<?php endif; ?>
<?php if ( have_comments() ) : ?>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
    <ul class="commentlist">
        <?php wp_list_comments('type=pings&callback=mina_kommentarer');?>
    </ul>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
	<?php else : // this is displayed if there are no comments so far ?>
 
    <?php if ( comments_open() ) : ?>
            <!-- Om kommentarerna är öppna, men ingen har kommenterat än. -->
 
    <?php else : // comments are closed ?>
            <!-- Om kommenteringen är stängd. -->
            <p class="nocomments">Kommenteringen är stängd</p>
 
    <?php endif; ?>
<?php endif; ?>

Så det jag har gjort nu är egentligen bara att loopa igenom alla kommentarer två gånger, en gång med kommentarer som argument och en gång med pings som argument.

Avslutning och Exempelfiler

Nu borde allting vara upplagt för att du ska kunna experimentera och snygga till dina kommentarer så att de kan bli precis som du vill ha dem.

Om du har frågor eller inte får någonting att fungera, läng iväg en kommentar så kan vi säkert reda ut vad det är för fel.

Här kommer i alla fall filerna så att ni kan ledda ner och testa själva.

I föregående inlägg om 960 gs gick jag igenom grunderna tillräckligt för att kunna programmera en hemsida som ser ut som följer:

Låt oss anta att vi vill skapa samma hemsida, men den här gången som ett WordPress templet. Vi kommer att vilja ha den översta gröna titeln i header.php, den undre gröna i footer.php. I det orangea i mitten vill vi att våra blogginlägg ska synas, alltså index.php. Slutligen får de blå spalterna för enkelhetens skull slås samman till en sidopanel, sidebar.php .

Låt oss börja

Skapa en mapp som heter tema960gs, detta kommer att vara din templet mapp där du placerar alla filer som har med ditt theme att göra.

I din nyligen skapade mapp placerar du filen 960.css, och rekommenderat även en reset.css och text.css. Alla dessa filer hittar du om du laddar ner filerna från 960 Grids Systems hemsida.

I samma mapp skapar du också en ny fil som du döper till style.css. Detta kommer att vara där du placerar all din riktiga designkod. Denna fil är också obligatorisk för att WordPress ska kunna hitta ditt tema.

I style.css skriver du följande rader:

1
2
3
4
5
6
7
8
9
10
11
12

/*   
Theme Name: WpGuru 960
Theme URI: http://www.wordpressguru.se/bygg-ett-wordpress-tema-med-960-grid-system/
Description: A shell theme with 960 Grid System
Author: Kristoffer Emanuelsson
Author URI: http://www.wordpressguru.se/
Tags: 960, grid system, framework
Version: 1.0--frivilligt
.
All övrig information om ditt tema, licenser, behov av vissa plugins, eller hur man använder vissa funktioner
.
*/

Byt ut svaren till saker som passar in på ditt eget tema. Theme Name är det viktigaste, då detta är det namn ditt tema får i temavalsmenyn i WordPress administrationspanel.

Header.php

Skapa en ny fil som du döper till header.php (eller kopiera en från ett annat tema, default tex). Öppna den och skriv följande:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css" /> <!-- Återställer css attribut -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/text.css" type="text/css" /> <!-- Sätter tillbaka en del gemensamma css attribut -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/960.css" type="text/css" /> <!-- Lägger till 960 Grid System -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <!-- Din egen style.css -->
 
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <!-- Tillåt pingar -->
 
        <?php wp_head(); ?> <!-- Gör så att plugins och WordPress kan placera saker i headern -->
    </head>

Det viktigaste och den största skillnaden i koden ovan från vanliga teman är raden

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/960.css" type="text/css" /> <!-- Lägger till 960 Grid System -->

som talar om att vi ska lägga till alla klasser vi behöver för att kunna använda oss av 960 Grid System. ‘stylesheet_directory’ är samma sak som din templet mapp, alltså mappen tema960gs där du tidigare just placerade filen 960.css.

Efter detta vill vi börja starta <body>-taggen och börja våran hemsida, så fortsätt med

1
2
3
4
5
6

    </head>
    <body <?php body_class(); ?>>
        <div id="wrapper" class="container_12"> <!-- Definiera conteinern som talar om ifall vi använder oss av 12 eller 16 kolumner -->
            <div id="header" class="grid_12"> <!-- Vår header ska sträcka sig över alla 12 kolumner -->
                <h1>Ett WordPress tema som använder 960 GS</h1>
            </div>

Nu har vi startat bodyn med en container och en titel, det får räcka för header.php. Spara.

Index.php

Skapa filen index.php och placera även den i mappen tema960gs där du har alla andra filer som hör till ditt tema. Skriv följande

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php get_header(); ?> <!-- Inkludera header.php -->
 
<div id="main" class="grid_8"> 
    <!-- Main... Här kommer the_loop(); det är här vi ska få upp våra inlägg   -->
    <div id="tom1" class="grid_1 alpha"> <!-- Första barnet med klassen alpha och ett mellanrum i sig -->
    &nbsp;
    </div>
    <div id="child1" class="grid_2"> <!-- Första riktiga barnet som vi har text i -->
        <p>En "puff" med lite text i</p>
    </div>
    <div id="child2" class="grid_2">
        <p>En mitten "puff" med lite mer information</p>
    </div>
    <div id="child3" class="grid_2"> <!-- Sista synliga barnet -->
        <p>En tredje och sista puff</p>
    </div>
    <div id="tom2" class="grid_1 omega"> <!-- Sista barnet med klassen omega, dessa vill vi inte ska synas -->
    &nbsp;
    </div>
</div> <!-- Avsluta main -->
 
<div id="sidebar" class="grid_4"> <!-- Sidebaren måste vara 4 kolumner stor eftersom main tar upp 8 -->
    <?php get_sidebar(); ?> <!-- Inkludera sidebar.php -->
</div>
 
<?php get_footer(); ?> <!-- Inkludera footer.php -->

Efter att ha inkluderat header.php med standard funktionen delar vi upp våra 12 kolumner till två spalter, main med 8 kolumner och sidebaren med de resternade 4.

I main kan du koda precis som vanligt, och genom att placera the_loop() här kommer våra blogginlägg att synas på den här ytan.

Jag lät barnen från den tidigare guiden få vara kvar, men eftersom de tar upp 2 kolumner var, och vi har 8 stycken som vi måste utnyttja är vi tvungen att göra några små förändringar, antingen utöka bredden på en eller fler av dem, lägga till fler barn, eller placera tomhet före och efter det första och sista barnet. Det sistnämnda gör man genom att lägga till klasserna prefix_x eller suffix_x för x antal kolumner tomma före respektive efter barnet i fråga. Problemet med detta är att padding används, vilket gör att bakgrunden på barnet kommer att sträcka sig ut över den ytan. Så istället valde jag att placera två barn, ett på vardera sida om de tre barnen, som använder sig av en kolumn var, och sedan endast fylla dessa med ett mellanslag &nbsp;.

Sidebar.php

Skapa en fil som du döper till sidebar.php och fyll den precis som vanligt med sidopanels kod.

Eftersom vi bestämde dess bredd i divarna i index.php är det ingenting annorlunda i den här filen:

1
2
3
4
5
6
7
8
9
10

<div id="sidebar" role="complementary">
    <ul>
    <?php  /* Widgetized sidebar, if you have the plugin installed. */
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
            <li>
		<?php get_search_form(); ?>
	    </li>
        <?php endif; ?>
    </ul>
</div>

Eller vad du nu kan hitta på.

Glöm inte att tillåta en sidebar genom att skapa filen functions.php och skriva följande

<?php register_sidebar(); ?>

Footer.php

Avsluta hela din kod genom att skapa filen footer.php och fylla den med följande:

1
2
3
4
5
6
7

        <div id="footer" class="grid_12"> <!-- En Footer som sträcker sig över alla 12 kolumner -->
            <p>Skapad av WordPressGuru.se</p>
        </div>
    </div> <!-- Avsluta containern från header.php -->
<?php wp_footer(); ?> <!-- Tillåt plugins och WordPress att lägga till saker i footern -->
</body>
</html>

I footern skapar du en ruta som sträcker sig över alla 12 kolumner och efter att ha avslutat den så får du inte glömma att du också måste avsluta containern som du startade i header.php.

Innan allt är över inkludera wp_footer() och avsluta sedan både bodyn och hela html-koden. Allt klart.

Avslutaning och testkörning

Styla som du vill i style.css och lägg till massa häftiga funktioner och text som vanligt.

När du är färdig laddar du upp hela mappen tema960gs med innehåll till /wp-content/themes/. Gå nu till administrationspanelen (/wp-admin/) på din WordPress blogg och navigera dig vidare till Utseende > Teman. Där kommer du att hitta en tema med namnet som du gav i style.css. I mitt fall ”WpGuru 960″. Temat kommer inte ha någon bild, eftersom du inte har någon screenshot.png i din templet mapp. Men aktivera ditt nya tema ändå och poff, så har du precis gjort ditt första egna tema i 960 Grid System.

Ladda ner alla filerna och testa själv, lek och ändra allt hur mycket du vill:

Ikonen kommer i 6 varianter i storlekarna 150x150px, 64x64px och 32x32px.