Skillnaden mellan Post Format och Custom Post Types

Sedan version, jag tror att det var 2.9 alternativt 3.0 har det funnits någonting som heter Custom Post Types, eller något i stil med ”valbara inläggstyper”. Detta är ett väldigt dåligt val av ord, som Mark Jaquith poängterar i ett inlägg, då det egentligen borde ha hetat någonting i stil med valbara innehållstyper, då dessa syftar på typen av innehåll inte på olika sorters inlägg.

Olika typer av innehåll skulle kunna vara Författare, Meny element eller Produkter, medan olika typer av inlägg skulle kunna vara Galleri, Länk, Chat eller Video.

Varför använda inläggstyper

Anledningen till att vilja sortera sina inlägg i olika grupper kan vara flera, men oftast så vill man att de ska presenteras på olika sätt på framsidan. Ett galleriinlägg vill man kanske ska visa en bild. En länk ska kanske låta titeln vara den externa länken och en aside (likt ett Twitter inlägg) kanske inte ska ha någon titel.

Matt har länge använt sig av detta och på bilden ovan kan vi se ett aside-inlägg (utan titel) och ett galleri-inlägg (med en bild).

Tidigare har det inte funnits någon standard för att lösa detta i WordPress, utan man har fått utnyttja kategorier, och sen beroende på ifall ett inlägg har en viss kategori visa den på ett visst sätt. Och visst det fungerar ju bra, tills du väljer att byta tema, och ingenting längre visas som det ska. Dessutom måste du som temaskapare utbilda användaren av temat om hur personen ska göra för att få saker att visas på vissa sätt.

Ange stöd till dina inläggsformat

Nu har äntligen lösningen kommit, Post Formats.

Man implementerar det lätt i function.php:

add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

och just like that så finns de att välja under publicerings boxen när du skriver ett inlägg. Temat TwentyTen har självklart blivit uppdaterad med detta redan.

Enligt Codex kan man se att man kan ange stöd för följande inläggstyper:

Använd dig av inläggsformaten

När en inläggstyp är satt på ett inlägg händer egentligen inte så mycket per automatik, men du som tema skapare har möjlighet att göra en hel del.

Först och främst dyker formatet nu mera upp som en extra klass med hjälp av funktionen post_class(), som bör vara satt på alla inlägg. Dessa visar i sig i formen format-<typen> så ett inlägg som skulle vara av typen galleri skulle få klassen format-gallery. Dessa kan du sedan använda till att styla med i din css:

.format-link h1{
    color: #900000;
}

Fortsättningsvis finns det en ny funktion som heter get_post_format() som du kan använda för att ta reda på inläggets typ i loopen. Men hjälp av den kunskapen kan du sedan skapa olika utskrifter i loopen beroende på vilken typ av inlägg man har specificerat inlägget som (pseudo-kod):

while( the_loop() ) :
    $format = get_post_format();
    if( $format == 'link' ) :

        //Gör saker om det är en länk
    elseif( $format == 'galleri' ) :
        //Gör saker som ett galleri borde vilja

    else :
        //Annars gör så här (standard)
    endif;
endwhile;

Om ett format inte skulle vara satt, eller om man sätter ett format som inte är giltigt så kommer inlägget automatiskt att få typen ”standard”.

Template filer med hjälp av post_format()

Om man vill stödja alla olika typer av inlägg kan din villkorssats bli väldigt lång, med väldigt mycket liknande kod, vilket kommer göra det rörigt ifall du skulle vilja ändra någonstans. Doglas Gunter hittade på en riktigt bra lösning där man med hjälp av funktionen get_template_part(), som låter dig hämta en fil som börjar med någonting, och slutar med någonting annat, bryta ut de olika typernas kod till separata templatefiler.

Koden ser ut så här:

while( the_loop() ) :

    get_template_part( 'format', get_post_format() );
endwhile;

Det den gör är att hämta innehållet i en fil som börjar med format och slutar med namnet på ditt format. Ett inlägg av typen galleri skulle alltså använda filen format-gallery.php. Fördelarna med det här sättet är att (1) du får mindre kod i din index fil, (2) du får lättöverskådliga templatefiler och (3) det är perfekt för child teman, eftersom ifall format-gallery.php inte kan hittas, så letar den efter samma fil i ett alternativt parent tema, skulle den fortfarande inte hittas, faller den tillbaka på filen format.php, och skulle inte den finnas i barn temat så letar den slutligen efter format.php i förälder temat. Tack vare detta kan man enkelt skriva över en viss templatefil i ett barntema utan att förstöra hur någonting annat ser ut. Och skulle ett temat inte göra någonting speciellt med en viss typ av inlägg, så faller den enkelt tillbaka till standard filen, format.php (den måste dock finnas för att det ska fungera).

Betatesta funktionen

Eftersom funktionen fortfarande bara är i betaversion, så går den inte att använda på din vanliga WordPress installation, men om du ändå vill leka med kontrollerna så kan du alltid följa min guide om hur du blir en beta testare, så är det bara att sätta igång och testa och uppgradera ditt tema så att det är fit for fight när version 3.1 äntligen kommer.

Vad vi vill åstadkomma

För att ge våra arkivbesökande besökare så bred valmöjlighet som möjligt vill vi erbjuda dem möjligheten att se en lista på inlägg i månadsordning, kategoriordning och sen bara en lista på alla inlägg rakt av, men uppdelade i månad och år för att göra det hela lite mer läsligt.

Detta gör vi lättast i tre olika steg, med tre olika funktioner en för varje visning, där WordPress själva erbjuder oss mer eller mindre färdiga funktioner för jobbet.

Arkiv månadsvis

För att få en lista per månad, så använder vi oss av funktionen wp_get_archives() som vi har möjlighet att skicka in lite parametrar till:

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

<?php 
 
//Standardvärden
$args = array(
    'type'            => 'monthly',
    'limit'           => ,
    'format'          => 'html', 
    'before'          => ,
    'after'           => ,
    'show_post_count' => false,
    'echo'            => 1 );
 
wp_get_archives( $args );
 
 ?>

type är hur du vill att arkiv listan ska visas, yearly, monthly, daily, weekly, postbypost, alpha.
Postbypost listar inläggen en efter en i datumordning medan alpha gör samma sak, men listar dem i bokstavsordning efter titeln.
limit är antalet arkivrader du vill visa totalt. Som standard visas alla rader.
format är hur listan ska genereras. html för att visa den som en vanlig lista med <li>’s. option för att göra valen till en rullgardinslista eller selectbox. link för att omsluta raderna med <link>-taggar att ha i headern. Eller slutligen custom där du kan använda before och after för att skapa din egna lista.
before är således en stäng att placera före varje länk till arkivraderna och
after är en stäng att placera efter varje länk till arkivraderna.
show_post_count är en boolean som talar om ifall man vill att en siffra med antalet inlägg som visas efter varje länk eller inte.
echo, och slutligen echo som också är en boolean och talar om ifall man vill att listan ska skrivas ut direkt eller inte.

Så för genom att skriva följande kod så får vi resultatet som är på min arkiv sida:

1
2
3

<ul class="archives">
    <?php wp_get_archives('type=monthly&show_post_count=1'); ?>
</ul>

Arkiv per kategori

För att åstadkomma ett arkiv per kategori så kan vi använda oss av en mycket lik funktion som heter wp_list_categories() och listar just kategorier. Även den har en del parametrar:

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

<?php 
 
//Standardvärden
$args = array(
    'show_option_all'    => ,
    'orderby'            => 'name',
    'order'              => 'ASC',
    'show_last_update'   => 0,
    'style'              => 'list',
    'show_count'         => 0,
    'hide_empty'         => 1,
    'use_desc_for_title' => 1,
    'child_of'           => 0,
    'feed'               => ,
    'feed_type'          => ,
    'feed_image'         => ,
    'exclude'            => ,
    'exclude_tree'       => ,
    'include'            => ,
    'hierarchical'       => true,
    'title_li'           => __( 'Categories' ),
    'number'             => NULL,
    'echo'               => 1,
    'depth'              => 0,
    'current_category'   => 0,
    'pad_counts'         => 0,
    'taxonomy'           => 'category',
    'walker'             => 'Walker_Category' );
 
wp_list_categories( $args );
 
 ?>

show_option_all, om detta värde sätts till en sträng, så kommer en länk att skapas till en ”visa alla kategorier”-sida, vilken vanligtvis är eran startsida.
orderby talar om hur listan ska sorteras: ID, name, slug, count eller term_group
order är ASC (stigande) eller DESC (fallande).
show_last_update är en boolean för ifall en datum stämpel med senaste inläggets datum ska visas vid varje kategori.
style kan ha värdena list eller none. List ringar in listan med <li>-taggar, medan none endast sätter <br /> efter varje kategori.
show_count är en boolean som talar om ifall antalet ska visas efter varje kategori.
hide_empty är en boolean som talar om ifall tomma kategorier ska dyka upp i listan eller inte.
use_desc_for_title är en boolean för att tala om ifall kategorins beskrivning ska dyka upp som titel på länken eller inte.
child_of genom att ange en kategori här, så kan man få endast kategorier som är barn till den kategorin att dyka upp i listan.
feed är en boolean för att slå på och visa en rss feed för varje kategori.
feed_type är typen av feed och
feed_image sätter en uri-address till en bild att använda som feed-ikon.
exclude är en lista på kategori-idn som ska uteslutas ut listan
exclude_tree kan exkludera hela kategoriträd.
include är en lista på kategorier som endast ska visas (och exkluderar alltså alla andra).
hierarchical huruvuda listan ska vara hierarkisk eller inte.
title_li är en sträng som blir listans titel.
number är ett nummer för hur många kategorier som ska visas i listan.
echo är huruvuda listan ska skrivas ut eller sättas till en variabel. Standard är alla.
depth sätts till hur många nivåer som ska visas i listan. Standard är alla.
current_category kan tvinga klassen ”current category” att bli satt på kategorin man är på, även om man inte befinner sig på en arkiv sida (tex om denna lista visas när man är inne på ett inlägg).
pad_counts talar om ifall man vill att parent kategoriers antal ska räknas ihop med alla inlägg som är i barnens kategorier.
taxonomy kan bli satt från version 3.0 och framåt och talar om vilken typ av kategorier man vill lista.
walker tillslut talar om vilken funktion man vill använda för att generera listan (avancerat).

Så, det var en lång lista. För att generera listan som är på min arkivsida så behöver vi således skriva följande kod:

1
2
3

<ul class="archives">
    <?php wp_list_categories('sort_column=name&show_count=1&title_li=') ?>
</ul>

Lista alla inlägg

För att lista alla inlägg blir det lite mer komplicerat om man vill ha det som jag har gjort det. Ska skriver hela koden först så kan vi gå igenom den efteråt.

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

<h2>Alla Artiklar:</h2>
<ul class="archives">
<?php
    $lastposts = get_posts('numberposts=-1');
    $year = '';
    $month = '';
    foreach($lastposts as $post) :
        setup_postdata($post);
 
        if(ucfirst(get_the_time('F')) != $month && $month != ''){
            echo '</ul></li>';
        }
        if(get_the_time('Y') != $year && $year != ''){
            echo '</ul></li>';
        }
        if(get_the_time('Y') != $year){
            $year = get_the_time('Y');
            echo '<li><h3>' . $year . '</h3><ul>';
        }
        if(ucfirst(get_the_time('F')) != $month){
            $month = ucfirst(get_the_time('F'));
            echo '<li><h4>' . $month . '</h4><ul>';
        }
?>
<li>
    <span class="pink"><?php the_time('d') ?>:</span>
    <a href="<?php the_permalink(); ?>">
<?php 
    if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
        the_post_thumbnail('rel_thumb', array('alt' => '', 'title' => ''));
    } 
    the_title();
?>
    </a>
</li>
<?php endforeach; ?>
</ul>

Rad 1 skriver ut titeln på vår lista, medan rad 2 startar listan.
På rad 4 hämtar vi alla inlägg med funktionen get_posts(‘numberposts=-1′); där värdet vi anger som -1 betyder att vi inte vill ha någon maxgräns på hur många inlägg vi hämtar. Vi kan sätta 100 tex för att begränsa oss till endast 100 inlägg. Inläggen placerar vi i variabeln $lastposts.
På rad 7 start vi en loop som kommer att gå igenom hela listan av inlägg och placera vart och ett i variabeln $post.
Rad 8 är viktig, då den kör funktionen setup_postdata($post); vilket gör att wordpress sätter inlägget som det aktiva inlägget, vilket gör att vi kan använda fuktioner som get_title() tex för att få titeln på inlägget.
Raderna 10-22 gör några villkorssatser för att undersöka ifall månaden och året är samma som inlägget innan, ifall det inte är det, vill vi avsluta en lista, och starta en ny, så att vi kan få alla inläggen uppdelade efter år och månad.
Rad 24-26 skriver ut själva inläggets <li>-tagg plus datumet inlägget var skrivet följt av starten av en länk till inlägget. Här används funktionen the_permalink() för att få länken till inlägget.
På rad 28-30 undersöker vi om inlägget har en visningsbild med funktionen has_post_thumbnail, och ifall den har det vill vi skriva ut tumnageln med storleken som jag har definierat i min funktion.php klass till ‘rel_thumb’. För mer information om bildernas tumnaglar läst gärna mitt inlägg Allt du behöver veta om WordPress tumnaglar.
Tillslut på rad 31 skriver vi ut titeln på inlägget och resterande rader avslutar bara vad vi tidigare har öppnat.

Så genom att skriva koden ovan så får ni en snygg lista med alla inlägg sorterade i datumordning och grupperade per år och månad. Sen är det bara att gå in style.css och fixa till visningen lite, så att allting visas på ett snyggt och harmoniskt vis.

Avslutning

Och där har ni det. Nu har ni allt ni behöver för att kunna göra en riktigt snygg arkivsida. Koden placerar ni i en fil som ni döper till archives.php och sedan placerar i er tema mapp. Filen kommer då sedan automatiskt att gå att hitta i rullgardinslistan för sidmallar nere till höger när ni sedan skapar en ny sida, och genom att välja den, kommer er sida att visas upp som en arkivsida. Lycka till, och skriv gärna en kommentar om ni får problem eller bara för att berätta hur er arkivsida blev.

Den här guiden kommer att gå igenom ett alternativ till ovan exempel, nämligen Child themes, eller barn teman, vilket möjliggör till redigering utan att egentligen redigera några av grundtemats filer, vilket gör att du säkert kan redigera, och uppdatera ditt tema, utan att vara rädd för att förlora någon information vid ett senare tillfälle.

Child Themes

Ett vanligt tema kräver som ett absolut minimum en stilmall som heter style.css, som innehåller minst en kommentar högst upp med namnet på temat, och en php-fil som är döpt till index.php för att kunna generera alla sidor med.

Ett Child tema, är ett barn till ett vanligt tema. Ett sådant tema behöver som minimum endast en stilmall som heter style.css och innehar minst en kommentar högst upp som definierar child temats namn och viket tema som är dess parent, alltså ”pappan”.

Genom att specificera en förälder i ett temas stilmall, använder WordPress förälder temat som en template, en grundstomme för hur temat ska genereras, så att ifall en specifik fil inte hittas i ditt nyskapade child tema, så låtar den istället efter filen i förälder mappen.

Detta betyder att om vi till exempel har temat TwentyTen och vill göra ett child tema till det så skapar vi en ny mapp i temamappen, skapar en fil, som vi döper till style.css och skriver en kommentar om att vi vill använda TwentyTen som parent theme.

Om vi nu kör vårat nyskapade tema kommer inte WordPress hitta några av filerna om hur den ska bygga upp våran hemsida i vårat eget thema, och kommer därför att plocka samtliga teman från TwentyTen, och vår hemsida kommer se likadan ut, som om vi hade valt att ha temat TwentyTen istället.

Nästan!

Om ni mins så kommer WordPress hitta en fil i vårat barn tema, nämligen style.css. Och kommer således att använda den för att generera färger, marginaler, textstorlekar och allt annat sådant. Men eftersom våran style.css är helt tom förutom en kommentar om TwentyTen och namnet på vårt tema, så kommer ingenting att stylas på något sätt, och hemsidan kommer att helt naken och tråkig.

Men frukta ej käre läsaer. Vidare i den här guiden ska jag gå igenom exakt hur du ska göra för kunna ändra bara precis på en liten text storlek och få allting annat att se exakt likadant ut som det gjorde innan.

Skapa ett eget Child Tema

Om du använder en ftp klient, till exempel FileZilla, och där i din grundmapp (den där du hittar filen wp-config.php) lokaliserar wp-content/themes/ så har du tagit dig till tema mappen i WordPress. Här hittar du mappar med namn som classic, default och tewntyten. Memorera exakt hur namnet är skrivit på det temat du vill ha som förälder tema, om det har stora eller små bokstäver och ifall det använder mellanrum eller understräck. I den här guiden kommer vi använda oss av temat TwentyTen där mappen heter exakt twentyten.

När du känner till den informationen skapar du sedan en ny mapp, antingen direkt i WordPress tema mapp (themes) eller lokalt på din dator för att sedan ladda upp med FileZilla eller liknande senare.

Mappen döper du till vad du vill, men för enkelhetens skull använd namnet du vill ha på ditt child tema, men ersätt mellanrum med understräck och skriv bara med små bokstäver (Detta är inget måste, men det blir snyggast på det viset, då alla gör detta som standard). I det här exemplet kommer vi utgå från att vi bygger ett barn tema till standard temat TwentyTen och vi kommer att döpa vårat tema till WpGuru TjugoTio. Så jag skapar först en mapp som jag döper till wpguru_tjugotio.

Gå sedan in i mappen och skapa en ny fil som du döper till style.css.

Öpnna din nyskapade style.css och skriv följande saker:

1
2
3
4
5
6
7
8
9

/*
Theme Name: WpGuru TjugoTio
Theme URI: http://www.wordpressguru.se/
Description: Barntema till TwentyTen 
Author: WordPressGuru
Author URI: http://www.wordpressguru.se/
Template: twentyten
Version: 1.0
*/

Du behöver inte ha alla de här raderna om du inte vill. Det ända du egentligen behöver är ”Theme Name” och ”Template” ifall du vill ha en barntema. Men det är alltid trevligare med mer information.
Theme Name är temats namn. Det som kommer att dyka upp som namn när man väljer ditt tema i Administrationpanelen.
Theme URI är temats hemaddress. Detta bör vara en länk till vart man kan ladda ner temat ifall du vill publicera det.
Description är en beskrivning till temat. Det som kommer att dyka upp under temats namn i Administrationpanelen.
Author är temats skapare.
Author URI är en adress till skaparens hemsida.
Template är viktigt och det är mappnamnet till det tema du vill använda som förälder tema. Mappnamnet måste skrivas exakt så som det är skrivet.
Version är temats version. Detta är bra att ha om du publicerar ditt tema och vill att folk ska kunna uppdatera det när du uppdaterar ditt tema.
Vidare finns det några till saker man kan skriva som Tags för att folk ska veta vad det är för typ av tema bland annat.

Om du nu sparar filen och laddar upp allting i din tema mapp så har du precis lyckats skapa ditt allra första barntema! Grattis!

Men så roligt ska vi inte ha det, exakt nu. Först ska vi göra en liten detalj till. Strax under ditt kommentarshuvud i style.css skriver du följande rad:

1

@import url("../twentyten/style.css");

Den här raden importerar alla stildeklarationer som finns i TwentyTen’s stilmall och placerar den överst i ditt barns temas stilmall, så att du nu kan skriva över bara de deklarationer du vill ha. Men vi går igenom vad vi har gjort:
@import betyder att vi vill hämta en fil och placera innehållet i den här stilmallen. Sedan deklarerar vi url(””); som ska innehålla adressen till filen vi vill importera. Länken är relativ från filen vi skriver i, vilket betyder att TwentyTen’s stil mall, relativt från våran stilmall ligger först ett mappsteg bakåt, sedan in i mappen twentyten, och sedan filen style.css. När man skriver en relativ länk så betyder en punkt samma mapp, och två punkter en mapp bakåt. Så våran address blir alltså ../twentyten/style.css.

Nu kan du spara. Ladda upp hela mappen. Gå in i Administrationpanelen > Utseende > Teman och hitta ditt nya tema. Aktivera det och du kommer att se att det är exakt likadant som ifall du hade aktiverat temat TwentyTen direkt.

Skriva över stil deklarationer

Nu kommer vi till de roliga bitarna. Nämligen till att skriva över och ändra på se stildeklarationer vi inte gillar, och förändra dem precis som vi själva vill ha dem.

Om två saker deklarerar samma sak i en stylesheet, så är det alltid den sista som tar effekt. Eftersom vi har skrivit @import raden högst upp i våran style.css så kommer allt vi deklarerar att kommer efter de gamla deklarationerna från TwentyTen, och på så sätt är det våra deklarationer som kommer att gälla.

Så hur vet du vad du ska deklarera och skriva över?

För det första krävs det en allmän förståelse av hur stilmallar fungerar. Att man först skriver vad deklarationen ska gälla för. Sedan mellan två måsvingar skriver man nycklar och de värden man vill ska gälla för nyckeln. För att ändra färgen på alla paragrafer till blått text, så kan vi till exempel skriva så här:

p{
    color: blue;
}

Men det lättaste är att öppna TwentyTen’s style.css, kopiera precis den deklaration du vill ändra på, klistra in den i din egen stilmall och sedan ändra värdena till dina egna.

Ändra länkarna

På rad 313 till 322 i wp-content/themes/twentyten/style.css hittar du följande:

a:link {
	color: #0066cc;
}
a:visited {
	color: #743399;
}
a:active,
a:hover {
	color: #ff4b33;
}

Detta beskriver färgerna som en länk ska ha, först om det bara är en vanlig länk, sen om länken är besökt och sist ifall du håller musen, eller precis har klickat på länken.

Kopiera raderna och klista in i din egen style.css och ändra lite på värden eller skriv dit nya deklarationer som du vill ska gälla länkar. Exempelvis så här:

a:link {
    color: #2243e6;
    text-decoration: none;
}
a:visited {
    color: #2243e6;
    text-decoration: none;
}
a:active,
a:hover {
    color: #e11717;
    background-color: #f8dada;
    text-decoration: underline;
}

Dessa länkar kommer att vara blå utan ett sträck under som normalt. Men om du håller musen över dem så kommer de bli röda, med en ljus ljus rosa färg som bakgrund och ett sträck under i samma röda färg som länktexten.

Så nu om du sparar och testar ditt tema igen, så kommer allt att se ut som vanligt, förutom att länkarna är annorlunda. Bra va?!

Ändra texten

Vilken typ av font som ska användas för text deklareras i TwentyTen’s style.css på raderna 109 till 151. Och ser ut så här:

/* =Fonts
-------------------------------------------------------------- */
body,
input,
textarea,
.page-title span,
.pingback a.url {
	font-family: Georgia, "Bitstream Charter", serif;
}
h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text,
input[type=submit] {
	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
pre {
	font-family: "Courier 10 Pitch", Courier, monospace;
}
code {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

Dessa är ganska klassiska och bra textval, titlar kommer i huvudsak att få typen ”Georgia” vilket är en font med ganska runda former och gör sig bra som överskrifter. I övrigt kommer det mesta andra att få typen ”Helvetica Neue” vilket är en ganska rak och lättläslig font som liknar Arial.

För att ändra någonting här, gör vi det lättast genom att kopiera hela alltihop till vår egen stilmall och lägger till vår egen lista av fonts som vi vill använda, på samma sätt som de har gjort.

Ju längre till vänster i den komma separerade listan en font är, ju högre prioriterad är den att användas. Om webbläsaren inte förstår eller har den angivna fonten så tar den nästa i listan.

Vi kan till exempel skriva.

Verdana, "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;

För att först och främst använda oss Verdana som font, men om det inte finns, så använder vi oss av samma saker som TwentyTen hade specificerat tidigare.

Functions.php

Filen functions.php är lite speciell, det är nämligen den ända filen som kommer att läsas in både från huvudtemat och barntemat automatiskt. Du behöver alltså inte använda några import funktioner eller liknande utan det räcker med att bara skapa functions.php i din egen tema mapp och sedan skriva de funktioner du vill använda. Tänk bara på att du inte deklarerar en funktion som redan finns, utan hitta på dina egna funktion namn. Det finns dock ett undantag; öppna TwentyTen’s egna function.php fil och leta efter en text som börjar med

Det är en funktion som gör så att TwentyTen bara definierar och skapar en funktion ifall du inte redan har gjort det i en barntema. Det gör att alla funktioner som börjar på det viset kan du skapa upp och skriva över i din egen funktions.php. Se bara till att de returnerar samma saker som orginal funktionen gör, så att ingenting går sönder.

Många andra av TwentyTen’s funktioner kan vi indirekt skriva över, även om det inte texten ovan står före. Vi letar då istället efter en text likt:

add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );

Den säger att funktionen twentyten_page_menu_args ska sättas in som en filter funktion när wp_page_menu_args körs. Om vi vill skriva våran egen meny arguments fukntion, så kan vi ta bort TwentyTen’s fukntion från filtret och lägga till vår egen istället:

1
2
3
4
5
6

function min_egen_page_menu_args_funktion()
{
    ...
}
remove_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );
add_filter( 'wp_page_menu_args', 'min_egen_page_menu_args_funktion' );

Hur vet vi då när det här ska köras eller om det ens körs? Det lättaste och snyggaste är att skapa får egen setup funktion på liknande sätt, och sätta in all kod i den:

1
2
3
4

add_action( 'after_setup_theme', 'mitt_temas_setup' );
function mitt_temas_setup() {
    ...
}

Övriga Filer

Tyvärr finns det inget enkelt sätt att ändra bara en rad i till exempel index.php filen, för om vi skapar en index.php fil så kommer bara den att användas och inte TwentyTen’s alls. Och ifall vi inkluderar deras index.php i våran, så kommer antingen hela deras fil att köras först, och sedan hela våran, eller tvärt om beroende på vart vi inkluderar filen.

Så ifall vi vill ändra någonting i index.php så får vi lov att kopiera hela filen och ändra det vi vill ändra helt enkelt, och hoppas att de inte gör så mycket uppdateringar på den koden, för dem kommer vi inte få tag på.

Ett bättre sätt är dock att ändra sidorna bara för några specifika sidor. Säg att vi tex har en sida som heter länkar. Och vill ha special utseende på just den sidan. Då skapar vi en fil i vårat tema som heter page-lankar.php där biten lankar i filnamnet är det exakta permalänksnamnet på vår sida. Sedan skriver vi precis hur vi vill att sidan genereras i den här filen, och när vi är inne på vår Länkar sida så kommer WordPress att använda våran page-lankar.php sida för genereringen.

Stylesheet_directory och Template_directory

En sista sak som är bra att veta om Child Teman och Parent Teman är php vägen bloginfo(‘template_directory’); och bloginfo(‘stylesheet_directory’);. Om ditt tema är ett vanligt tema utan barn eller föräldrar så kommer båda de här funktionerna att peka på samma plats. Man kommer att få tillbaka en länkadress till temats mapp. Men i fallet av ett barn-förälder förhållande så kommer stylesheet_directory alltid att peka på barnets temamapp eftersom det är barnet som använder style.css filen, och template_directory kommer alltid att peka på förälderns temamapp eftersom det är den som är templeten, eller mallen för temat. Detta kan vara bra att känna till speciellt när man skapar ett tema som är tänkt att kunna användas som föräldertema, då man tex länkar till bilder och ikoner. Om man använder sig av stylesheet_directory och har lite bilder i förälder mappen så kommer allting att gå bra ända tills man skapar barntemat. Plötsligt pekar ju nu nämligen adressen till barnets mapp, och om det inte finns några bilder att hämta därifrån så kommer inga bilder att visas. Samtidigt om man länkar till till exempel en favicon, som är den lilla bilden som visas högst upp i webbläsaren bredvid din adress så kanske man specifikt vill att länken ska användas från barnets mapp och inte från föräldern.

Oavsett vad man vill göra, så är det viktigt att känna till skillnaden.

Sammanfattning och avslutning

Så! Det var allt för den här gången. Nu bör ni veta tillräckligt mycket om child teman för att kunna skapa era egna varianter. Och när en uppdatering kommer av ert förälder tema så är det bara att uppdatera och inte vara rätt att uppdateringen kommer att skriva över några av era ändringar, så dessa är gjorda i ett helt eget tema.

Här är exemple temat vi precis skapade:

Registrera funktionaliteten i ditt tema

Relativt nytt för WordPress är att man måste aktivera nya funktioner i sin functions.php fil. Detta är som tur är väldigt lätt, och liknar i det här fallet en registrering av widgets. Funktionen vi ska använda heter register_nav_menus() och som parameter tar den en lista med nyckel och namn till de menyer du vill ska existera i ditt tema.

I den här guiden visar ju hur man gör två menyer, en topp meny, som vi vill kunna använda en drop down funktion på, och en meny att ha i sidfoten som ska kunna innehålla en drös med alla möjliga länkar till hela sidan. Så vi börjar med att registrera dessa två menyer genom att klistra in följande kod i functions.php:

1
2
3
4
5
6
7
8

/**
 * Två menyer, med nyckelnamnen 'main' och 'footer',
 * och visningsnamnen 'Huvudmeny' och 'Sidfotsmeny'
 **/
register_nav_menus( array(
        'main' => 'Huvudmeny',
        'footer' => 'Sidfotsmeny',
) );

Write it, cut it, paste it, save it, load it, check it, quick – rewrite it

Gå in i administraionpanelen och kika in under Utseende. Poff, så har det dykt upp ett nytt menyval där som heter Menyer. Grymt, navigera dig dit!

Du kommer nu att hitta en helt ny panel med en massa roligt att mixtra runt med, men först måste du skapa din första meny, som kommer att tjäna som en kanvas att placera länkarna på. Mitt på sidan skriver du in ett valfritt namn, och klickar sidan på Skapa Meny.

Fantastiskt! Du har nu lyckats skapa din första meny, men den innehåller inte några länkar än, och den visas ingenstans, så det måste vi genast göra någonting åt.

På vänster sida hittar du Temaposition. Där hittar du även de namn vi skrev in i functions.php i föregående stycke. Börja med att placera rätt meny, under rätt tema position, min meny som jag döpte till ”Huvudmeny” vill jag ska vara på temapositionen ”Huvudmeny” och så vidare. Glöm inte att spara!

Fortsätt sedan med att kryssa i lite sidor och kategorier, och varför inte hitta på några anpassade (egna) länkar också när du ändå håller på? Klicka sedan på Lägg till i meny för att se dina val dyka upp på menyytan i mitten av sidan.

Sist har du också möjligheten att gruppera dina menyval i annorlunda ordning, sätta ett nytt parent->child förhållande eller ta bort och redigera menyerna. Allt detta sker i mitten av skärmen med hjälp av DragOchSläpp teknik. Det kan vara lite trixigt att få menyvalen att hamna på rätt nivå ibland, men efter några försök brukar det alltid fungera.

På Huvudmenyn, försök skapa lite menyer i flera nivåer, så att vi kan gömma dessa för att sedan ta fram som en drop down meny. På Sidfotsmenyn skapa bara länkar i en nivå, då vi ändå kommer att begränsa visningen till toppnivån.

Placera dina menyer i temat

Okej, du har nu aktiverat funktionen wp_nav_menu, du har skapat dina menyer och positionerat dem på rätt ställe på administrations sidan, men de dyker fortfarande inte upp någonstans, och du ser dem fortfarande inte. Det är för att du inte har sagt till i ditt tema var någonstans dessa menyer ska skrivas ut.

Öppna därför filen header.php och leta upp en plats högt upp på sidan där du tycker att din meny ska få existera, förslagsvis strax nedanför loggan till din hemsida. Där klistrar du sedan in följande rader:

1
2
3

<?php
    wp_nav_menu( array( 'theme_location' => 'main' ) );
?>

Och det är allt som behövs. Theme_location talar om vilken meny som ska skrivas ut, och i det här fallet vill du ha huvudmenyn som vi döpte till main så tidigt som i det första stycket av den här guiden i functions.php

Öppna sedan footer.php, leta upp ett snyggt ställe att placera din sidfotsmeny på, förslagsvis precis innan en </div>-tag, och klistra in följande:

1
2
3
4

<?php
    wp_nav_menu( array( 'theme_location' => 'footer',
                        'depth'          => '1' ) );
?>

Det som är intressant här är att vi har lagt till depth och satt det till värdet 1, vilket gör att vi bara visar toppnivå länkar på den här menyn. Theme_location sätter vi till footer då detta var namnet angivet i functions.php.

And thats it folks, om du uppdaterar din sida så har du dina menyer som du precis har skapat placerade på dem ställen du placerade dem på. Nu gäller det bara att snygga till dem lite. För en guide på hur man skapar Drop Down menyer av huvudmenyn läs min guide: Bygg en Drop Down meny för sidor i WordPress men byt ut menyn som beskrivs där till den som du har här.

Godtagbara parametrar till wp_nav_menu()

Du har sett att man kan ändra temapositionen och nivådjupet på menyerna som ska visas med några enkla parametrar. Vad mer kan man ändra frågar ni? Jag har listan:

menu
Om du vill specificera en exakt meny, vid namn, som ska dyka upp, så kan du göra det med menu, parametern accepterar id, slug eller namn.

container
Elementet som ringar in hela menyn är som standard en div, det kan du ändra med den här parametern.
Default: div

container_class
Elementet som ringar in hela menyn kan få en klass som du kan specificera här.
Default: menu-{menu slug}-container

container_id
Samma som ovan, men id:t i det här fallet. Och inget standard värde.

menu_class
Ul elementet som är själva menyn har vanligt vis klassen menu, men du kan ändra det här.
Default: menu

menu_id
Samma som ovan men id:t. Standard är menyns slug med en ökande siffra efter.
Default: menu slug, incremented

echo
Huruvida menyn ska skrivas ut direkt eller returneras till en variabel att leka friskt med.
Default: true

fallback_cb
Om menyn du specificerar, eller meny positionen du har angett inte har en meny skapad åt sig, så kan du här specificera en funktion som ska kallas istället. Perfekt om du gör temat åt kunder eller för nedladdning. Eller för bakåtkompatibilitet för den delen. Som standard använder listar den alla sidor.
Default: wp_page_menu

before
Skriver ut en text före varje länktext (i länken)

after
Skriver ut en text efter varje länktext (i länken)

link_before
Skriver ut en text före varje länk (innan <a>)

link_after
Skriver ut en text efter varje länk (efter </a>)

depth
Talar om hur måna nivåer som ska få visas maximalt. 2 betyder alltså första och andra nivån, 0 betyder alla nivåer
Default: 0

walker
Avancerat! Detta är till för att göra en egen vandringsfunktion som ska användas när menyn ska skrivas ut.

theme_location
Placeringen i temat som ska användas. Namnet på positionen måste överensstämma med namnet som användes i register_nav_menu() för att användaren ska kunna välja positionen i adminpanelen.

Styla dina menyer

När menyn sedan skrivs ut loopas dina meny val genom och skrivs ut på följande sätt, så att du kan styla dem i style.css på rätt sätt:

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

<div class="menu">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-1" class="menu-item menu-item-type-post_type">
            <a href="http://www.wordpressguru.se/om/">About</a>
            <ul class="sub-menu">
	        <li id="menu-item-2" class="menu-item menu-item-type-post_type">
                    <a href="http://www.wordpressguru.se/om/och_om_igen/">Om igen</a>
	        </li>
	        <li id="menu-item-3" class="menu-item menu-item-type-post_type">
	            <a href="http://www.wordpressguru.se/om/lank/">Länk igen</a>
	        </li>
            </ul>
        </li>
        <li id="menu-item-4" class="menu-item menu-item-type-post_type">
            <a href="http://www.wordpressguru.se/fraga_gurun">Fråga Gurun</a>
        </li>
    </ul>
</div>

Avslutning

Det var allt för den här gången. Nu borde ni kunna skapa riktigt snygga navigationsmenyer för, och uppdatera alla era gamla. Den här funktionen går nästan inte att misslyckas med, men om ni ändå skulle få problem, lämna en kommentar, så ska jag göra mitt bästa för att hjälpa er.

Glöm inte heller bort att det krävs minst version 3.0 av WordPress för att kunna använda detta, så har du inte uppdaterat än, gör det nu!

Jag använder mig av WordPress funktion wp_list_categories() för att generera kategorimenyn, och efter att ha läst dokumentationen om funktionen kunde jag snabbt konstatera att det inte finns något argument som tar bort titeln helt och hållet (bara ändrar den från ”kategoribeskrivning” till en standard fras).

Så här kommer en funktion som tar bort hela attributet title från <a>-taggen:

wp_list_categories:

1
2
3
4
5

<?php
    $kategorier= wp_list_categories('echo=0');
    $kategorier= preg_replace('/title=\"(.*?)\"/','',$kategorier);
    echo $kategorier;
?>

wp_list_pages:

1
2
3
4
5

<?php
    $sidor= wp_list_pages('echo=0');
    $sidor= preg_replace('/title=\"(.*?)\"/','',$sidor);
    echo $sidor;
?>

wp_page_menu:

1
2
3
4
5

<?php
    $sidor= wp_page_menu('echo=0');
    $sidor= preg_replace('/title=\"(.*?)\"/','',$sidor);
    echo $sidor;
?>

När WordPress 3.0 släpps med den nya Meny panelen så kommer detta troligtvis inte vara så användbart, men tills dess.

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.

WordPress Tag Cloud

WordPress har en funktion för att visa etiketterna som du har lagt till dina inlägg, men självklart är inte standardinställningarna någonting att ha, men med lite enkla variabler kan vi lätt göra den lite snyggare.

Funktionen heter enkelt nog:

<?php wp_tag_cloud( $args ); ?>

Och istället för $args fyller du i alla olika argument du vill ha.

Standardinställningarna är som följer:

<?php $args = array(
    'smallest'  => 8, 
    'largest'   => 22,
    'unit'      => 'pt', 
    'number'    => 45,  
    'format'    => 'flat',
    'separator' => '\n',
    'orderby'   => 'name', 
    'order'     => 'ASC',
    'exclude'   => , 
    'include'   => , 
    'link'      => 'view', 
    'taxonomy'  => 'post_tag', 
    'echo'      => true ); ?>

Dessa inställningar gör att etiketten som minst antal inlägg är taggade med har storlek 8 pt (punkter) och den med mest inlägg taggade med sig har storlek 22 pt. Maximalt visas 45 st etiketter och gör så i bokstavsordning från A-Ö med ett mellanrum (\n betyder endast radmatning i php-koden alltså ingen förändring i det som skrivs ut) mellan varje. Och slutligen skrivs det ut så fort funktionen körs igenom.

Egna inställningar

Många av dessa inställningar fungerar väldigt bra, men andra inte. Säg till exempel att du har 100 olika etiketter och du visar 45 av dessa. Din mest populära etikett är WordPress vilket är ett ord som kommer väldigt sent i alfabetet, så troligtvis kommer inte ens den etiketten att finnas med när molnet visas.

Så först och främst bör vi ändra orderby till ‘count’ . Vilket gör att de 45 populäraste etiketterna kommer att synas istället för de 45 första i bokstavsordning.

Dessa 45 etiketter kommer nu att visas efter minst populär etikett först (nummer ordning från 1 och uppåt), vilket man kanske vill, detta kommer att få den första raden att stå med microbokstäver och ju längre ner man kommer i etikettmolnen ju större blir bokstäverna. Men om du har etikettmolnet i din sidopanel kan detta ställa till problem, då du antagligen inte har så mycket plats att leka med, och ord kommer att avstavas och hoppa ner på nästa rad, vilket inte kommer att bli så snyggt. Så för att förhindra detta kan vi ändra order till antingen DESC eller RAND (från ASC). DESC skulle göra precis samma sak, fast baklänges, vilket skulle föra med sig samma problem, bara tvärt om. Så jag skulle rekommendera RAND vilket kommer att skriva ut de 45 etiketterna i slumpmässig ordning varje gång sidan laddas. Förhoppningsvis kommer inte alla populära etiketter att hamna bredvid varandra på så vis.

Som standard skrivs som sagt de 45 första etiketterna ut, men det kan du ändra genom argumentet number. Ange ett högre eller lägre tal beroende på vad du är intresserad av, eller sätt den till 0 (noll) om du vill att alla etiketter ska skrivas ut.

Om du har några speciella etiketter du inte vill visa i ditt moln, använd dig av exclude och gör en komma separerad lista med alla term_id:n till etiketterna du inte vill ska visas. Till exempel ‘exclude’ => ’7,26,53′.

Du kan hitta dina etiketters id nummer i administrationspanelen Inlägg > Inläggsetiketter, genom att klicka på en av etiketterna och sedan titta i adressfältet:

Sedan version 2.8 har WordPress lagt till argumentet taxonomy vilket talar om vad som ska visas i molnet. Du kan välja på ‘post_tag’, ‘category’ eller ‘link_category’ vilka betyder vad de låter som. Standard valet är ‘post_tag’ vilket visar ett moln av etiketterna använda i inläggen (posts). Om du väljer ‘category’ får du ett moln bestående av dina kategorier (categorys) där ju fler inlägg en kategori har, ju större blir etiketten. Slutligen kan du välja ‘link_category’ som kommer att skapa ett etikettsmoln bestående av dina länkkategorierer (link category).

Sedan version 2.9 av WordPress introducerades separator vilket specificerar vad som skall vara mellan varje kategori. Genom att ange värdet ‘<br />’ kommer du t.ex. få en radmatning mellan varje etikett och genom att skriva ‘, ‘ så får du ett komma med ett mellanrum efter. Som standard har den värdet ‘\n’ vilket kommer att göra en radmatning i php-koden (så att det blir snyggt när du läser källkoden) men endast ett mellanrum i den riktiga html-koden.

Slutligen om du inte är riktigt nöjd med vad du kan göra med dessa standard inställningar kan du från version 2.8 av WordPress använda dig av echo vilken talar om ifall du vill att hela listan av etiketter ska skrivas ut eller returneras för att kunna tas om hand i en variabel. Värdena är 1 (true) ifall du vill att molnet ska skrivas ut, eller 0 (false) ifall du vill att listan endast ska returneras.

Om du väljer att ta hand om listan själv, är det att rekommendera att ändra format från ‘flat’ (vilket gör returnerar etiketterna i en lång rad med separatorn mellan sig) till ‘array’ som returnerar en array med varje etikett i varje fält. Format har också alternativet ‘list’ ifall du är intresserad av att få en ul-lista av dina etiketter.

Exempel

Med mina rekommenderade inställningar hade koden sett ut så här:

1
2
3
4
5
6
7
8

<?php if ( function_exists('wp_tag_cloud') ) : ?>
    <li>
        <h2>Populära Etiketter</h2>
        <ul>
            <?php wp_tag_cloud('orderby=count&order=RAND'); ?>
        </ul>
    </li>
<?php endif; ?>

Tag Cloud Plugins

Det finns ett hav av tillägg där ute som kan hjälpa dig att hotta upp ditt etikettmoln ytterligare. Jag använder mig tex av WP Colorful Tag Cloud där jag genom ett enkelt interface kan ändra färgen på mina etiketter beroende på storleken av etiketterna.

Ett annat populärt plugin är WP-Cumulus som skapar en sfär av dina etiketter som du kan integrera med genom flash.

Om du inte finner ett plugin som passar dig, varför inte sätta echo till 0 och experimentera själv?

1
2
3
4
5
6
7
8
9
10
11

<?php if ( function_exists('wp_tag_cloud') ) : ?>
    <li>
        <h2>Populära Etiketter</h2>
        <ul>
            <?php $tags = wp_tag_cloud('orderby=count&order=RAND&format=array&echo=0');
            foreach($tags AS $tag){
                echo $tag;
            }
        </ul>
    </li>
<?php endif; ?>

Koden kommer att resultera i samma sak som tidigare, men nu är det du som har kontrollen, placera lite andra taggar emellan, använd dig av all blandad kunskap du har och hitta på någonting ”out of the box”. Om det blir bra, gör ett eget plugin av det, och skriv om det här. För mer inspiration kolla in etikettsmolnet på Nationalencyklopedin.

Inspiration