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

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.

För det första har W3Schools inge koppling till World Wide Web Consortium (W3C), den internationella communityn som skapar webbstandarder på internet. W3C har flera gånger bett W3Schools att påpeka detta på deras hemsida för att inte skapa förvirring, men de vägrar.

Fortsättningsvis delar de ut certifieringar, som ingen varken känner igen eller värderar. Till skillnad från Microsoft’s MCP och Cisco’s CCC har W3Schools ingen kontroll över sakerna de påstår certifiera.

Slutligen fortsätter de att frekvent publicera felaktig och missvisande texter och exempel på sin sida, utan att tillåta folk att rätta till det.

Problemet med detta är att folk lär sig inkorrekt, och ökar felaktig kodning på internet vilket snarare är bakåtsträvande än motsatsen.

Ett fyrtio tal kända namn i internetvärlden har fått nog av W3Schools felaktigheter och har skapat ett dokument för att påvisa varför man inte ska använda W3Schools som referenskälla. Dokumentet hittas på W3Fools och det är också därifrån min information till den här artikeln kommer ifrån.

På sidan W3Fools påvisas en mängd fel som W3Schools har på sin site, och trots att de inte fått någon direkt kontakt med W3Schools så har flertalet av punkterna faktiskt förbättrats efter publiceringen. Men fortfarande är hemsidan full av felaktigheter.

Var ska man hitta sin information istället

Jag skriver detta inlägg för att följa upp kampen om att leda människor till andra källor, när de letar efter sina svar. W3Fools själva rekommenderar följande:

• Html Dog som ger en bra och komplett introduktion till HTML och CSS.
• Opera Web Standards Curriculum som täcker basen av webbstandardbaserad webbutveckling i HTML och CSS.
• Google’s HTML, CSS, and Javascript from the Ground Up presenterar grunläggande webbutveckling med hjälp av videotutorials med hjälp av Google experter på webbutveckling.
• SitePoint är enligt W3Fools en helt okej dokumentation till HTML, CSS och JavaScript där de påpekar framtida webbläsarstöd och beskriver kända webbläsarbuggar.
• W3C, själva, har en wiki-baserad allmän Utbildningssida förutom deras dokumentation av HTML-element.
• The MDC (Mozilla’s Doc Center) erövrar scenen för den mer avancerade CSSen och dokumenterar JavaScript bättre än någon annan.

W3Fools tipsar också om att i dina framtida Google sökningar lägga till -w3schools för att slippa deras sökresultat och istället starta sökningen med MDC för att få resultat från Mozilla’s Doc Center.

Så hjälp till även nu att sprida informationen om att W3Schools är en dålig källa för säker information. Glöm inte också att läsa dokumentet W3Fools för att få all information om saken.

Nu ska jag gå igenom mina gamla inlägg och ändra länkningar till W3School, för jag tänker inte hänvisa till dem i fortsättningen.

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.

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.

Strukturen på en hemsida

Okej, vi börjar med att förklara konceptet ”hemsida”. Moderna hemsidor och framförallt stora ramverk som WordPress, försöker så långt det går att separera presentation från logik, och sedan vidare hålla allting så separat det går för att vi som användare enkelt ska kunna modifiera så mycket som möjligt utan att behöva leta så mycket.

Html

För enkelhetens skull, låt oss likna en hemsida vid en bil. Html koden beskriver hur bilen ska vara uppbyggd. Den säger att hela bilen är en bil, och i den ska det finnas 5 platser, 4 dörrar, en motor, 4 hjul. och så vidare. Allting delas in i element som ringar in andra element. Ett startelement kan se ut så här: <bil>. Alla element måste avslutas, och det görs dem genom att placera ett framåt snedstreck (front slash) i elementet: </bil>. Varje text snutt som är inringat med ”krokodilmunnar” kallas för en tagg och en starttagg och en sluttagg skapar ett element.

Exempel:

<bil>
    <dörr>
        <fönster>
        </fönster>
    </dörr>
    <säte>
    </säte>
    <dörr>
        <fönster>
        </fönster>
    </dörr>
</bil>

För att lättare kunna identifiera de olika elementen så kan vi sätta klasser (class) och id:n (id) på dem. Se klassen som bilmodellen, den kan delas av många bilar som ser likadana ut, och id:t är registreringsnumret, och pekar på precis en specifik bil, och inga fler.

<bil class="wp70" id="abc123">
    <dörr class="vänster">
        <fönster>
        </fönster>
    </dörr>
    <säte>
    </säte>
    <dörr class="höger">
        <fönster>
        </fönster>
    </dörr>
</bil>

CSS

Css:en eller stilmallen, talar om hur din bil ser ut. Allt från längd och bredd till färg och form. När man skriver i sin stil mall så filtrerar man ut vissa element som man vill ange attribut på och talar sedan om hur alla filtrerade element ska se ut. Om vi vill förändra en specifik elementtyp, behöver vi bara skriva namnet på det elementet, utan ”större än”, ”mindre än” tecknen, exempelvis bil. Vill vi filtrera ut element utefter deras klasser så skriver vi en punkt och sedan klass-namnet, exempelvis .vänster. På samma sätt gör vi för att filtrera efter ett visst id, men då använder vi fyrkant, stakettecken, så då blir det #abc123. Vi kan även kombinera flera av dessa med mellanrum ifall det ska vara element i ett annat element och komma ifall det ska inkludera även en ny filtrering av element. Om vi har en skada på sätet och en repa i vänster fönster på bil abc123 så skulle vi kunna skriva så här:

bil#abc123 .vänster fönster
{
    skada: stenskott;
    djup: 1 cm;
}
bil#abc123 säte
{
    skada: brännmärke;
}

Måsvingarna talar om att här slutar filtreringen av element och nu börjar deklarationen av hur elementet ska formateras. Först skriver du en nyckel med ett kolon efter och sedan ett värde, och avslutar raden med ett semikolon. När du är färdig med alla deklarationer avslutar du med en måsvinge igen.

Databas

Databasen tar hand om all information om bilden, den skulle tex kunna innehålla all information som registreringsverket har, alltså ägaren till bilen, adressen och så vidare. Den här informationen ska vara enkel att ändra då man ska kunna sälja bilen och byta ägare.

En databas är uppbyggd precis som ett excel dokument med rader och kolumner. Varje kolumn representerar en typ av information och varje rad motsvarar en post. Varje databas tabell måste också ha en primär nyckel som ska vara unik och göra det möjligt att hitta en specifik post. I vårat exempel skulle det vara helt perfekt att använda registreringsnumret som denna nyckel, då vi vet att det bara får finnas en bil för varje registreringsnummer. I många fall använder man bara en siffra som hela tiden räknar upp för varje ny post utan att vara direkt kopplad till någonting specifikt på bilen.

I tabellen finns det nu två bilar registrerade, båda är bundna till WordPressGuru, men så länge den primära nyckeln är olika så kan man ändå hitta en specifik bil.

Php

Php är ett serverspråk som talar ser till att informationen i databasen visas på hemsidan, och får saker och ting att hända. Om du vrider på nyckeln så är det php-språket som talar om att du ska ändra värdet på tändning från av till på. Det är php som placerar alla saker på rätt plats och får din bil att leva. Du kan se php som motorn i din bil. Med hjälp av villkorssatser kan du få saker att ske beroende på andra saker. Om vi tar exemplet med att vrida på nyckeln igen, så skulle du kunna skriva en sats som är
”Om du vrider på nyckeln och motorn är av -> starta motorn
annars -> stäng av motorn”

1
2
3
4
5
6
7
8
9
10

<?php
if( $vrida == true && $motorn != 'igång' )
{
    startaMotorn();
}
else
{
    stängAvMotorn();
}
?>

På rad 1 och 10 ser vi php taggarna. Dessa talar om att mellan dessa är det php-kod, så att vår hemsida vet hur den ska tolka det vi skriver.
Rad två är våran villkorssats som säger att ifall värdet på $vrida är lika med sant och värdet på $motor är ‘inte lika med’ igång så ska vi köra funktionen ”startaMotorn” annars ska vi köra funktionen ”stängAvMotorn”.

Sammanfattning

Där har vi de fyra huvudsakliga delarna i en hemsida. Html för att tala om strukturen, stilmallen för att visualisera, databasen för fakta och php för att sätta ihop allting och få det all leva.

Hur ser detta ut på riktigt?

Vi har hittills bara gått igenom detta genom ett låtsasexempel på en bil för att det ska vara lättare att förstå, men det är ny dags att börja med lite riktiga taggar så att ni ska kunna lära er att modifiera era egna hemsidor.

Det första elementet, och det som omringar alla hemsidor, är alltid taggen <html> den säger att ”här börjar en hemsida” och när webbläsaren hittar </html> så vet den att ”här slutar hemsidan”.
Inuti detta har vi först hemsidans huvud <head></head> och sedan kropp <body></body>. I huvudet skriver du saker som titel och länkar till stilmallar och lite sådant. I kroppen kommer själva hemsidan med alla dess element.

Här kommer en lista på lite bra element att känna till:

• div – Ett block, ett fyrkantigt område.
• span – Ett område som omsluter text för att kunna styla.
• p – En paragraf.
• h1 – Header 1 – brukar oftast ringa in titeln på din hemsida.
• h2, h3… h6 – Header 2-6 – h2 är ofta rubriker till inlägg, eller saker i sidopanelen. H3 är ofta underrubriker i ett inlägg och så vidare.
• strong – Gör text till fetstil, är tillsammans med em det ända element som får användas för att styla din text på andra ställen än i stilmallen.
• em – Gör text till kursiv, är tillsammans med strong det ända element som får användas för att styla din text på andra ställen än i stilmallen.
• ul – Ringar in en onumrerad lista
• li – Ett listobjekt
• a – Ett ankare – Länkar till antingen en annan hemsida, eller en annan sida på din egen hemsida.
• img – Bilder. Detta element behöver ingen avslutnings tagg utan avslutas i starttaggen: <img src=”adressen till en bild” />
• br – En radmatning i text. Detta element behöver ingen avslutnings tagg utan avslutas i starttaggen: <br />

En standard hemsida skulle kunna se ut som följer:

<html>
    <head>
        <title>
           Hello World - Min första hemsida
        </title>
    </head>
    <body>
        <h1>
            Hello World!
        </h1>
        <p>
            Det här är min första hemsida.
        </p>
        <ul>
            <li>
                En lista
            </li>
            <li>
                Ett element till
            </li>
        </ul>
        <div>
            Det här är en div
        </div>
        <span>
            Det här är en span
        </span>
    </body>
</html>

Spara koden i ett dokument som du döper till index.html och dubbelklicka på filen för att öppna den i en webbläsare.

Yes! Det fungerade, men det ser ju inte så roligt ut, så vi lägger till en stilmall också.

Skapa ett nytt dokument som du döper till style.css och placera det på samma ställe som index.html.

Ändra nu i headern (mellan <head> och </head>) så att den ser ut enligt följande:

    <head>
        <title>
           Hello World - Min första hemsida
        </title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>

Vi har nu lagt till en länk till vår stilmall, attributet rel talar om att det är en stilmall, href talar om vad filen heter och type talar återigen om att det är en stilmall.

Gå nu in i style.css och skriv följande:

h1
{
    color: blue;
    text-decoration: underline;
    font-size: 26px;
    font-family: Georgia, 'Times New Roman', times,serif;
}
 
p
{
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
div,
span
{
    border: 1px solid green;
    color: red;
    background: yellow;
    margin-bottom: 10px;
}

Spara och ladda om din sida för att se ändringarna.

Våran header har nu bytt färg, blivit understruken och ändrat font. Vår paragraf har ändrat radhöjd och font och både våran span och div har fått bakgrund, border, text färg och en marginal i botten på 10px. Vi kan nu se hur enkelt det är ett modifiera våra element med stilmallen och få saker att se helt annorlunda ut. Vi kan också se skillnaden mellan ett div element och ett span element.

Applicera detta i WordPress

I WordPress hittar du alla filer som är värda att modifiera under ”Utseende > Redigera”. Här är saker och ting exakt likadana som jag precis har beskrivit bara lite mer avancerade. Om du kikar i din stilmall (style.css) så hittar du precis dessa definitioner, och vilka element de modifierar. Testa gärna att ändra på någonting, spara och se hur det förändrar din hemsida.

Om du använder en egen installation från WordPress.org, så hittar du även alla andra temafiler här, de som skriver ut inläggen på din sida, de som talar om hur ett inlägg ska se ut när det är ensamt och hur en sida ska formateras. Om du går in i en sådan fil och ändrar så kan du direkt se hur saker förändras på din blogg.

Det är nu kunskap och fantasi kommer med i spelet. Det gäller att veta vad man kan göra, och hitta på ett sätt att använda den informationen på. Vad beträffar databasen och php, så ignorerar jag det i denna grundläggande guide, då det kan bli relativt komplicerat och WordPress redan sköter det mesta av detta i bakgrunden åt oss i vilket fall, vilket gör att html och css är det första vi behöver lära oss.

Ett sista ord

Nu är det egentligen bara att börja testa och leka med de givna verktygen. Skapa gärna en ny blogg, och testa runt med att ta bort element, sätta in nya, och formatera dem i stilmallen.

Om du vill lära dig mer om html och css så skulle jag skarpt rekommendera att du kollar in W3Schools och deras guider och dokumentation. Annars är Google rent allmänt ett fantastiskt verktyg (jag rekommenderar inte längre W3Schools, ta istället en titt på tex Html Dog).

Viktigast av allt är dock att du vågar, och inte ger upp. Jag vet inte hur många år jag har hållit på med alla dessa språk och många fler, och jag lär mig nya saker hela tiden. Det finns alltid mer information där ute, och ingen blir någonsin fullärd, så börja på din nivå, läs och testa och våga göra fel, det gör jag också.

Men säg nu att du har fått en känsla över bloggandet, du känner att det här är din grej. Du börjar få regelbundna besökare och det börjar kännas som att du lite har växt ur WordPress.com’s skor. Du vill helt enkelt ha mer, men på samma sätt. Vad gör du då?

Det jag skulle rekommendera är att konvertera din blogg från en WordPress.com blogg, till en WordPress.org blogg. Det är samma gränssnitt, menyerna är dem samma, du kan säkert till och med hitta samma tema som du haft på WordPress.com, eftersom programvaran fortfarande är den samma, men ändå är allting både annorlunda och bättre.

Fördelar med WordPress.org

Den största och viktigaste fördelen med att ha en egen installation av WordPress, genom att ladda ner och installera det själv, är att du har full kontroll över allting. Du bestämmer vilka teman som ska finnas, vilka plugin man ska kunna använda, och du kan ta exakt så mycket utrymme som du har plats med.

Det finns en skog av Plugins där ute som du inte har kunnat komma åt tidigare på grund av att WordPress.com ägarna bestämmer vad du ska få ha, och inte ha.

Du kan redigera allt, framförallt hela ditt tema. Lägga till texter du vill ha, ta bort texter du inte vill ha.

Du kan skapa dina egna teman, och ladda ner andras från hela internet.

Och det är ingen som kan säga någonting om någonting.

Nackdelar med WordPress.org

Nackdelarna med att ha en egen installation av WordPress är självklart att du måste göra allting själv. Du måste läsa på, ta reda på, välja och konfigurera allting själv. Självklart finns det vänliga själar där ute som kan hjälpa dig, men i slutändan är det alltid upp till dig själv att få det att fungera.

Du måste ha en plats att ha din installation. Vanligast är att man köper ett webbhotell på tex One.com, Binero.se eller Loopia.se, men det går också att ha den på en egen webbserver.

Du kommer att bli tvungen att köpa ett eget domännamn, men detta är ändå rekommenderat, ifall du vill att dina besökare ska kunna hitta dig. Då du inte längre kan använda dig av http://minblogg.wordpress.com

Och slutligen, om det blir fel, så har du bara dig själv att skylla! (detta kan dock också vara en fördel)

Men jag har bloggat i flera år, jag vill inte börja om!

Ingen panik, det är det som är det fiffiga med att byta från WordPress till WordPress, du kommer inte att gå miste om någonting, dina besökare kommer inte att märka ett dugg, då du nämligen kan exportera alla dina inlägg, sidor, kommentarer och bilder till din nya blogg, och få det att se ut som om ingenting har hänt.

Ok, jag är såld! Vad gör jag?

Börja med att skaffa dig ett webbhotell eller sätt upp din egen webbserver. One.com må vara den billigaste där ute, men rekommenderas inte till ändamålet, då de har så dåliga erbjudanden och inställningar att de senaste versionerna av WordPress inte ens brukar gå att köra. Så välj istället något dyrare webbhotell som du inte kommer att bli besviken på. Loopia.se är en personlig favorit, och det är också här jag har alla mina domännamn. Binero.se är ett annat bra webbhotell liksom Manufrog.com.

Om du vill sätta upp din egen webbserver kan du läsa min guide om det. Men tänk på att ifall du stänger av din dator, kommer ingen kunna se din hemsida.

Köp sen också ett Domännamn som passar din blogg, för tips om vad du ska tänka på när du väljer domän namn, läs gärna min guide: Konsten att välja rätt domännamn.

Right! Jag har ett webbhotell, jag har ett domännamn, vad gör jag nu?

Nu är det dags att ladda ner och installera WordPress. För en svensk version av WordPress börja med att ladda ner WordPress från wp-support.se.

Packa upp och med hjälp av ftp, laddar du upp det till ditt webbhotel.

När allt är på plats surfar du in på ditt webbhotell och installationen kommer att starta automatiskt.

För mer information och en längre guide på hur man installerar WordPress, läs och följ gärna min guide: Installera din WordPress med 9 enkla steg.

Yey, jag har installerat WordPress på mitt webbhotell, men det är ju tomt!

Ta det lugnt, det är nu magin börjar på riktigt.

Logga in på din WordPress.com blogg. Gå till ”Verktyg > Exportera” och välj att du vill exportera ”alla författare” och klicka sedan på ”Ladda ner Exportfil”. Då får välja en plats på datorn att spara filen som kommer att heta wordpress.dagensdatum.xml. Kom ihåg vart du sparar ner den.

Gå sedan in på din nya WordPress.org installation på ditt webbhotell, och logga in. Gå till ”Verktyg > Importera” och klicka på länken längst ned, ”WordPress”.

Du får nu välja att ladda upp en fil, och du vill välja filen du precis laddare ner, xml-filen från förra punkten.

Nu kommer du att kunna välja att koppla ihop användare och ifall du vill ta med alla bifogade filer. Dina val här bör var att du vill koppla din förra användare (ditt inloggningsnamn) med din nya användare (admin), och du vill gärna ta med alla bifogade filer, då detta antagligen mest är bilder, som du gärna vill flytta över. Så klicka ja, and let the process begin.

Detta kan ta en stund beroende på hur aktiv du varit på din förra blogg, men avbryt den inte, utan låt den ta sin tid, och vänta tills allt är klart. Ta en kopp kaffe så länge.

Phew! Nu är det klart. Vad ska jag göra?

Testa att visa din blogg (länken med ditt namn högst upp till vänster), och kontrollera att alla inlägg, kommentarer, bilder och allting nu existerar på din nya installation.

Om det gör det, så är det nu det roliga börjar. Det är nu du ska undersöka dina inställningar, välja ett tema, lägga till plugins och göra det så snyggt som möjligt här istället.

För mer information om vilka inställningar du bör ha kan du läsa min guide: Så börjar du din blogg. Och för lite tips om bra plugins att ha och börja med så kan du läsa artiklarna 5 Plugins du måste ha och 7 till Plugins du bör skaffa.

Men alla mina besökare fortsätter att gå till min WordPress.com blogg!!!

Om du hade ett eget domännamn till din WordPress.com blogg så är det läge nog att rikta om det till din nya installation nu, så att alla besökare som går in på http://www.dindomän.se automatiskt hamnar på din nya blogg. Detta gör du där du köpt ditt domännamn, kontakta webbhotellet för mer information.

Om du inte har haft ett domännamn tidigare, utan dina besökare har blivit tvungna att gå in på http://dittnamn.wordpress.com så är det smartaste att ta bort (eller sätta ”privat” på) alla dina inlägg på den gamla bloggen, och sedan skriva ett nytt och sista inlägg på den gamla bloggen där du skriver ”Jag har bytt blogg. Vänligen besök mig på <länk till min nya blogg> istället.”

Cool! What now?

Ingenting, och allting. Du är klar, samtidigt som du precis bara har börjat. Du har lyckats byta till en egen installation av WordPress där du har full kontroll. Nu är hela världen framför dina fötter, och det ska mycket till för att du ska växa ur dessa skor. Du kan fortsätta läsa på den här sidan, tex resten av inläggen under kategorin Nybörjare, eller hitta på någonting annat roligt.

Om det är någonting som du inte lyckats med, eller om det fungerade perfekt, släng gärna iväg en kommentar så jag får veta. Lycka till!

När du väl har fått några läsare vill du att dessa ska bli stammisar, och regelbundna besökare, men ifall du inte fortsätter att skriva inlägg så kommer dina besökare snart få nog, och tröttna att titta efter ifall du har skrivit någonting nytt eller inte. Ett bra alternativ för att få dina besökare att återkomma och dessutom bli meddelande när det händer någonting nytt, är att erbjuda dem ett RSS-flöde. Det är är en enkel ström med alla dina inlägg som kan plockas upp och läsas från olika program eller apparater, iPhone, bloglovin.se eller google.com är några exempel. Dessa RSS-läsare hämtar din feed lite då och då, och kollar åt besökaren ifall du skrivit någonting nytt eller inte. Dessutom kan den placera alla besökarens favorit bloggar på ett och samma ställe.

Visst är det tur att WordPress vet om detta, och automatiskt gett oss ett RSS flöde. Du hittar det genom att lägga till /feed/ sist i din webbadress. Mitt flöde hittar du här: www.wordpressguru.se/feed/

Vad är en ”Ping”

Fortsättningsvis finns det vissa hemsidor som använder sig av detta flöde för att analysera dina inlägg och ta reda på vad alla bloggar i bloggosfären skriver om för tillfället. För att hjälpa dessa siter, kan du pinga dem. Det innebär att du skickar en liten knuff till dem, och talar om att du precis har skrivit ett nytt inlägg, och att det är dags för dem att hämta ditt flöde, för just nu har det hänt någonting nytt.

Om du vill, kan du pinga dessa hemsidor manuellt, genom att varje gång du skriver någonting, gå in på varje hemsida och tala om detta. Men det kommer inte bara att vara jobbigt och tidskrävande, utan också helt onödigt, för man kan nämligen göra detta automatiskt om man använder sig av WordPress. Öppna din administrationspanel (/wp-admin/) och gå till Inställningar > Skriva . Längst ner på denna sida hittar du Uppdateringstjänster, och troligtvis hittar du även raden http://rpc.pingomatic.com/ där.

Ping-O-Matic

Som standard finns Ping-O-Matic automatiskt på alla WordPress bloggar, och för dem som har sina bloggar genom WordPress.com är detta den ända automatiska ping-siten du kan kontakta.

Ping-O-Matic är dock den största ping-hemsidan där ute, och vad den gör är att försöka kontakta så många olika services som möjligt där ute, för att tala om för alla att just du har skrivit ett nytt inlägg.

Om du inte har deras adress i rutan så ska du skriva

Nyligen

Om du en av oss som skriver på svenska, så kanske du vill ha lite mer nationella hemsidor kontaktade, då är bloggosfärnärverket (det var ett ord jag aldrig trodde att jag skulle få använda) Nyligen.se är bra alternativ. Tillsammans med portalerna Knuff.se, Intressant.se, Bloggkartan.se och Bloggar.se försöker de kartlägga alla svenska bloggar där ute, indexera, analysera och knyta samman.

Genom att pinga Nyligen.se dyker du automatiskt upp på alla de andra hemsidorna, ifall de tycker att din blogg är tillräckligt genuin. På raden under Ping-O-Matic’s adress skriver du

Bloggportalen

Bloggportalen är numera uppköpta av Aftonbladet, men det går fortfarande att pinga dem automatiskt för att dyka upp på deras bloggsökmotorer. Du måste dock genomgå en längre registrering av din hemsida för att göra detta, och sedan få en unik länk som du klistrar in på nästa rad i rutan Uppdateringstjänster. Adressen du kommer att få tag i kommer att se ut ungefär så här:

Twingly

Twingly har växt sig riktigt stora under de senaste åren. Att pinga dem är framförallt för personer som skriver om nyheter från våra stora dagstidningar här i Sverige, så som DN, SvD och så vidare. Men på senaste tiden har Twingly växt ur sida gamla skor och är nu öppen för alla bloggar.

Du pingar deras tjänst genom att skriva följande på nästa rad i rutan för Uppdateringstjänster

Bloggnytt

Bloggnytt är en relativt nystartad pingtjänst. Genom att pinga dem kommer du att dyka upp på Bloggnytt.se, Bloggbilder.se samt bloggsökmotorn Bloggz.se

För automatiska pingningar skriver använder du följande rad:

Nybloggat.se

Nybloggat.se är en bloggtjänst från Blogg Esse. Den här bloggtjänsten ber dig specificera en kategori som dina blogginlägg dyker upp i. För att se vilka kategorier du kan vänja bland, kan du gå in på följande sida: http://nybloggat.se/categories/.

Pingraden för kategorin bloggning ser ut så här:

Google Bloggsök

Ni har säkert sätt ”inkommande länkar” som finns på eran Panel i administrationspanelen. Dessa länkar kommer från bloggsökfunktionen som Google har lanserat. I skrivandet stund är detta bara en beta version, men det går fortfarande bra att pinga och dyka upp på tjänsten.

Du pingar dem automatiskt genom att lägga till denna rad i uppdateringstjänster:

FeedBurner

För oss som använder oss av FeedBurner, eller har en bloggtjänst som inte tillåter automatiska pingningar, så kan man aktivera PingShot.

Genom att logga in på din FeedBurner och klicka på din Feed och sedan gå till Publicize så kan du hitta i vänster meny servicen PingShot. Klicka på den och ta ”Activate”.

Det PingShot gör är att försöka meddela alla som prenumererar på din feed, så att alla blir meddelade på samma gång. Detta är helt klart den smidigaste metoden, men varför nöja sig med en?

Avslutning

Avslutningsvis finns det ytterligare en mängd ping tjänster där ute som låter olika hemsidor och program, veta att du publicerat någonting nytt. Ta en titt på WordPress.org så har de en lista på en gäng av dem.

Vissa har en lista på 20-30 ping-tjänster i sin ruta. Personligen skulle jag kalla det overkill, jag tror på att pinga de stora väsentliga tjänsterna och sedan ignorera resten. De flesta tjänsterna är ändå kopplade till varandra så de kommer att hitta dig ändå.

Med blogg tjänsterna ovan kommer listan se ut ungefär så här:

Tänk på att Bloggportalen har en unik pinglänk för varje blogg, och att nybloggat har fler kategorier att välja på.

Kom gärna med kommentarer om du har någon speciell tjänst du tycker att man borde ha med på sin lista, jag är idel öra.

Om du bloggar på WordPress.com

Om du är en av dem som har en gratis blogg via WordPress.com istället för att ha gjort din egen, så kan du tyvärr inte använda den automatiska pingfunktionen.

Som standard pingar alla bloggar hos WordPress.com Ping-o-Matic, vilket täcker in ganska mycket av den internationella bloggosfären, men vi svenskar blir tyvärr inte lyckligare för det. Vad man kan göra är dock att gå in på varje sida jag skrivit om här ovan, och pinga manuellt. När du har kommit till ”tack”-sidan, bokmärker du den. Du kan sedan enkelt gå in på ditt bokmärke varje gång du skriver ett inlägg och ”automatiskt” pinga tjänsten på det viset.

Även om detta är en relativt jobbig och ineffektiv metod är det det bästa som kan erbjudas WordPress.com användare.