Detta kommer att bli den sista artikeln, åtminstone för en tid framöver.

I den här artikeln går jag igenom grunderna för hur man får sin WordPress-installation att bli mer likt en hemsida och mindre likt en blogg.

Läs hela artikeln här: WordPress-skolan del 4 – från blogg till hemsida

WordPress

WordPress bör inte behöva mer presentation och förklaring än att säga att hela den här bloggen använder sig av det, och är skapad för att lära dig som läsare hur man använder detta fenomenala bloggverktyg, som med åren utvecklats mer och mer till ett CMS i hög standard. Öppen källkod förstås.

jQuery

jQuery är ett bibliotek med funktioner till JavaScript. Man använder det för att lättare kunna manipulera den så kallade DOM:en som din hemsida är uppbyggd av, lägga till text, ta bort text och få saker att röra på sig efter att sidan är färdigladdad. jQuery använder sig av öppen källkod med ett enkelt och väldokumenterat API som gör det möjligt för användarna att skapa egna plugin eller ladda ner andras.

Det finns andra bibliotek som gör liknande saker där Mootools och Dojo är de största, men i mitt tycke har det skuggats av jQuery som helt klart har ledningen i det bästa JavaScripts biblioteket där ute.

För användar gränssnitt finns även jQueryUI med flera fantastiska tillägg till jQuery för att skapa dialog rutor, datumväljare, tabbar med mera.

960 Grid System

Jag har i flera andra inlägg beskrivit storheten i 960 Grid System. Detta framework som med några enkla stilmalls deklarationer ger dig möjligheten att sätta klasser på dina element på bloggen för att enkelt skapa kolumner som annars kunnat ge dig huvudvärk i veckor. Genom att dela in din blogg i 12 eller 16 osynliga kolumner skapar du struktur på bloggen och får dina användare att känna harmoni i vad de ser.

Den här bloggen använder sig av den lite mer extrema 24 kolumns griden, men jag skulle inte rekommendera den, och skulle inte bygga en ny hemsida med detta kolumnmått. Försök i stället med 12 kolumner vilket skapar ordning och stilrenhet. 960 Grid System gör jobbet åt dig.

Infoo

Infoo är KTH’s webbkatalog, som samlar alla svenska webbsidor där ute för att strukturera internet. Finns inte din blogg med där, så gå in på deras hemsida och registrera dig. På grund av deras höga rankning från Google, så ger det även dig själv en push på vägen.

Loopia

Det finns bra, och det finns dåliga webbhotell där ute. Loopia är ett bra.
De har länge haft marknadens bästa priser på domännamn och trots att de är dyrare än många andra webbhotell så vet man att man får stabilitet, bra support och dessutom teknik och hårdvara väl värda pengarna.

Loopia försöker dessutom hänga med i svängarna på internet, genom att skapa speciellt dedikerade servrar endast för dina statiska filer (bilder) så att dessa ska gå snabbare att ladda ner. Om man installerar tex WordPress genom deras One-Click Installer så får man denna funktion automatiskt uppsatt på din blogg.

Sedan har de insätt styrkan av bloggar på dagens internet. De använder bland annat mig för att skriva deras WordPress skola, och andra gästskribenter för att skriva om andra program man kan kan installera enkelt i deras webbhotell.

Nu har de dessutom ute en enkel tävling, nämn deras blogginlägg på din blogg, och du har chansen att vinna en iPod. Det är så man sprider ordet på internet.

Threadless

Threadless är en framtidssökande t-shirt butik på internet. De utnyttjar communityn för att designa deras t-shirttryck. Låter samma community rösta på de snyggaste designerna och efter att ha tryckt upp bara ett fåtal av de designer som fått högst betyg, till sist låta communityn fota sig själva och lägga upp bilder på sig själva bärandes sina nyligen köpta t-shits. Varje gång du röstar, varje gång du lägger upp en bild, ifall du får en design upptryckt, eller gör någonting annat av värde på hemsida, så får du poäng, poäng som du antingen kan köpa nya t-shirts för, eller så skänks pengar till räddningsorganisationer.

Threadless vet att styrkan i en person som har någonting att samla på, en poäng samling, skattjakt. Kombinera detta med en topplista och det är mål nog för många att lägga sin själ i ett projekt. Belöningen kommer till oss alla andra som får en väl fylld t-shirt hemsida, med konstant uppdaterade och snygga designer.

Threadless är helt klart en rollmodell för lyckade projekt.

Firefox

Jag har flera inlägg om webbläsare. Vilken man ska välja. Varför.
I slutändan finns det två val i mitt tycke; Chrome, för snabbhet snygghet, enkelhet, perfektionism och allt annat…
eller Firefox på grund av sina plugin.

Som webbutvecklare använder jag mig konstant av ett plugin som heter FireBug till Firefox, tillsammans med FireQuery gör det webbutveckling till en barnlek (ok inte riktigt, men de hjälper till en hel del). Jag vill egentligen gå över till Chrome, eftersom allting går så mycket fortare där. Med Chromes V8 motor för JavaScript finns det egentligen ingen annan webbläsare som hotar dem, ifall det nu inte hade varit för dessa plugin.

Jag vet att Chrome har sin Developer Tools bar, lika så de andra webbläsarna av relevans, men de saknar fortfarande en del funktionalitet för att jag ska kunna gå över till dem helt, så tills dess är jag kvar som Firefox fan.

Ni märker om jag har lämnat skeppet genom att hålla koll på ifall länken nere i hörnet byts ut mot en Chrome länk.

Avslutning

Så där har ni det. Där är min lista, eller kanske mer förklaring till varför jag har länkarna jag har nere i hörnet av den här sidan. Sen är det klart att jag har många fler rekommendationer och tips på sidor som jag gillar och så också kanske ni. Men de får bli till ett annat inlägg.

Så missa inte den spännande fortsättningen av WordPress-skolan här med den tredje delen i serien.

Läs hela artikeln här: Tillägg och widgets – WordPress-skolan.

Om du missade förra månadens del i WordPress skolan så ta en titt på förra inlägget så får du mer information om det.

Jag kan ärligt säga att jag har läst alla era kommentarer som har kommit in sedan november och svarat på dem, har ni sett mina svar, great, om inte; Posta gärna kommentaren igen, så ska jag göra ett nytt försök att svara på er fråga åt er.

Skulle det vara så att ni har lämnat en kommentar om beröm eller för att lämna ett tips eller liknande, var inte rädda för att skriva en ny kommentar. Jag älskar när ni skriver till mig, och vill gärna ha kommentarerna tillbaka.

Inläggen är i alla fall återskapade och all kod till hemsidan hade jag backup på, så nu vet ni i alla fall varför WordPressGurun var nere några dagar, och varför era kommentarer har försvunnit.

En glad nyhet i alltihop är att sidan nu är mycket snabbare. Jag hade länge gått och funderat över varför laddningstiden på sidan hade varit uppe i 4 sekunder i snitt, och antagit att jag hade kodat någonting fel, eller att WordPress rent allmänt skulle vara långsamt, då jag trots mycket läsande inte kunde hitta några källor till dess långsamhet. Anledningen till dess långsamhet var dock, visade det sig nu, att hårddisken höll på att lägga av, och helt enkelt hade svårt att läsa filer och ge dem till klienten, så nu när WordPressGurun ligger på en ny och stabil server, så är sidan åter igen i den briljanta hastighet den förtjänar.

WordPress 3.1 ”Reinhardt”

Vidare till efterlängtade och glada nyheter; WordPress 3.1 Reinhardt har äntligen släppts. Det beräknades komma ut för någon månad sedan, men efter att ajax versionen av administrationspanelen drogs tillbaka på grund av för mycket buggar och säkerhetsrisker som man inte hann lappa ihop, så blev man nu tvungen att testa igenom hela WordPress versionen på nytt för att se att ingen funktionalitet råkade försvinna när man drog tillbaka funktionaliteten. Där av den förlängda test perioden.

Men nu är WordPress 3.1 äntligen här mer mycket nya och härliga funktioner. Det första ni kommer att se är den nya administration-baren som placeras absolutpositionerat högst upp på era sidor när ni är inloggade. Genom den kan ni enkelt komma åt de vanligaste sidorna ni vill komma åt, skriva nytt inlägg, redigera sida, kommentarer och så vidare.

Den andra största förändringen är tillägget av Inläggsformat som äntligen har kommit till WordPress. Läs gärna mitt tidigare inlägg om just Inläggsformat i WordPress 3.1 där jag går igenom precis hur nu gör för att utnyttja denna super funktion i era teman.

För mer information om de nya funktionerna som har tillkommit i version 3.1, vänligen fortsätt läsandet på WordPress.org’s nyhets sida.

Så uppdatera era versioner av WordPress och njut av ett bättre bloggverktyg.

Del 1 i artikelserien ”WordPress-skolan” lär dig kort och gott hur du gör för att ”Installera och publicera ditt första inlägg” som Loopia kund.

Läs gärna hela artikeln här: WordPress-skolan del 1 – Installera och publicera ditt första inlägg.

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.

Poängen är att din typografi är viktig. Tyvärr kan vi inte använda vilka fonts som helst på webben, då det gäller att alla webbläsare ska kunna förstå hur vi vill ha vår text. Så vad har vi för alternativ?

För det första kan vi göra bilder av alla text, så får vi allt att se ut precis som vi vill ha det, eller så använder vi den relativt nya css definitionen @font-face som du kan läsa mer om i artikeln Strunta i webbsäkra font-familjer och låt @font-face skapa typografisk magi, eller slutligen så använder du webbsäkra font-familjer som fungerar i alla webbläsare.

Special fonts som bilder

Alternativet att använda bilder för statiska texter (loggor, överskrifter, menyer) är i mitt tycke endast ett alternativ vid ett specifikt tillfälle, och det är till din logga, och då endast så länge du har ditt namn skrivet någon annanstans eller på något annat sätt med klar text. Varför? Anledning är att Google inte kan läsa bilder (än). För att Google och andra sökmotorer ska förstå vad som händer på din hemsida, kunna orientera sig och kunna sända relevant trafik åt ditt håll, så måste Google kunna läsa dina texter. Det kan de inte ifall du har valt att göra bilder av all text.

Jag rekommenderar därför emot att använda enbart bilder till menyer och överskrifter. En logga är som sagt okej eftersom detta är en logotyp som ska skilja sig från övrig text och ofta är något slags motiv, eller väldigt specifik text, som ska se ut på ett speciellt sätt.

För att Google ändå ska kunna läsa din hemsidas namn är då istället det bästa alternativet att skriva namnet i en div som du absolutpositionerar -9999px till vänster eller något liknande, så att en vanlig användare inte ser den dubbla texten.

.logo-text{
    position: absolute;

    left: -9999px;
}

Websafe font-families

Det andra alternativet är att välja fonts som du vet fungerar på de flesta webbläsarna och då försäkra dig om att din text är läsbar på samma sätt överallt. Detta gör du genom att specificera font-family i din css, och som värde anger du en komma separerad lista med typsnitt som du föredrar. Skulle din webbläsare trots allt inte kunna hitta ditt typsnitt först i listan, kommer den att använda den andra, och så vidare.

Här kommer en lista på alla webbsäkra typsnitt du kan använda dig av, med för det mesta en liknande fallback font och alltid en så kallad Generic font Family (serif, sans-serif, cursive, monospace) som definitivt existerar i varenda webbläsare där ute.

För en lista på alla fonts, säkra eller inte ta en titt på den här sidan: font Tester – All Fonts Preview

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: