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.

1. Cookies for Comments

För att underlätta vid mycket skräppost så är Cookies for Comment ett genialiskt litet tillägg som placerar en mängd spam direkt i skräpkorgen. Pluginet går ut på att placera en cookie på besökarens dator när bloggen besöks. När personen sedan försöker posta en kommentar, så undersöks ifall kakan existerar, ifall den gör det, så godkänns kommentaren.

På detta vis kan man inte posta kommentarer på bloggen utan att besöka bloggen, vilken man borde vilja att besökaren ska göra, och vilket flera spamrobotar inte gör. Enkelt, smidigt och genialt.

2. FeedBurner FeedSmith

FeedBurner FeedSmith är ett plugin som letar upp alla möjliga vägar till din RSS-feed och omdirigerar all trafik från dem till din nya FeedBurner feed (eller vad du nu har stillt in som feedadress). På så sätt kan du få statistik även från gamla prenumeranter som fortfarande når din feed från en gammal adress.

3. Yoast Breadcrumbs

Yoast Breadcrumbs är ett litet enkelt plugin som placerar en ”Du är här <” rad på din blogg. Genom att placera den, förslagsvis direkt ovanför dina post, kan man lättare förstå strukturen på din hemsida, och lättare hitta resterande sidor. Google gillar breadcrumbs, så för sökmotoroptimering är detta ett bra alternativ.

4. Contact Form 7

Contact Form 7 är ett riktigt snyggt och avancerat tillägg som låter dig placera kontaktformulär på din blogg, som besökare kan fylla i och skicka e-mail till dig. Du kan konfigurera formulären precis hur du vill och dessutom lägga till en Captcha ifall du har pluginet Really Simple CAPTCHA installerat.

5. Search Excerpt

Search Excerpt förbättrar utdraget från dina inlägg som genereras när någon söker på din blogg. Istället för att ge tillbaka de x antal första orden i varje post skickar den nu tillbaka ett utdrag från texten där det sökta ordet existerar. Dessutom är ordet i fråga i fetstil för att lättare identifieras.

6. WP to Twitter

Alla bloggar bör ha en Twitter kopplad till sig, som talar om för dina prenumeranter när du har postat ett nytt inlägg. WP to Twitter är ett tillägg som automatiskt postar dessa tweet, så att du slipper engagera dig själv i detta.

7. Yet Another Related Posts Plugin

Slutligen är Yet Another Related Posts Plugin ett smidigt plugin som genererar relaterade inlägg till varje post. Placera det som en Widget i sidopanelen eller under en artikel och styla den som du vill med hjälp av templets. Du kan vidare ställa in bland annat tröskelvärden och hur mycket du vill att olika parametrar har betydelse till relativiteten mellan olika inlägg. Ett riktigt bra tillägg.

WordPress har en mängd stylesheets de använder för att få saker och ting att se ut som de ska, utnyttja dessa genom att formatera din kod på rätt sätt och få dina egna element att se ut precis som de borde i WordPress.

Oneextrapixel skrev ett riktigt bra inlägg om detta, så jag tänkte att jag skriver mitt eget på svenska och rättar till några saker jag tyckte saknades på hans inlägg.

Det första du borde göra är att sluta in hela din kod i en wrap-tag. Det är en vanlig <div>-tag med klassnamnet wrap:

1
2
3

<div class="wrap">
    ...
</div>

Riktiga Knappar och Rubriker

Rubrukerna får du automatiskt genom de vanliga rubrik-taggarna. Använd dig av <h2> endast som din huvudrubrik, och <h3> och <h4> till de andra rubrikerna.

Knapparna får du genom att sätta in klassen button-primary eller button-secondary i <input>-taggen.

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

<!-- Huvud Rubrik -->
<h2>Mitt Plugin</h2>
 
<!-- Under Rubrik -->
<h3>Kontakt Formulär</h3>
 
<!-- Under Under Rubrik -->
<h4>Under Inställingar</h4>
 
<!-- Primär Knapp -->
<input class="button-primary" type="submit" name="Save" value="<?php _e('Save Changes') ?>" id="submitbutton" />
 
<!-- Sekundär Knapp -->
<input type="submit" value="<?php _e('Search'); ?>" class="button-secondary" />
 
<!-- Sekundär Knapp i <a> -->
<a class="button-secondary" href="#" title="Länk knapp">Länk knapp</a>

Plugin Ikon vid rubriken

Högst upp till vänster om din huvudrubrik kan du ha en ikon i storleken 32 px. Det finns 11 st standard ikoner som du kan använda dig av med den enkel php-funktion

<?php screen_icon($screen); ?>

Variabeln $screen bestämmer vilken ikon du vill ha.

Om du vill ha din egen ikon med en länk till din hemsida så kan du göra det också, genom att använda dig av klassen icon32 så kan du få den att formateras på rätt sätt.

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

<style type="text/css">
    <!-- Sätt adressen till din ikon som bakgrund, no-repeat-->
    #min_ikon{
        background: url(http://www.mitt_domän.se/extras/ikon-32x32.png) no-repeat;
    }
</style>
 
<!-- Länken du vill att ikonen ska peka till-->
<a href="http://mittdomän.se">
    <!-- Det är den här div:en som blir ikonen, id ska vara samma som i stilmallen-->
    <div id="min_ikon" class="icon32"><br /></div>
</a>

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

<?php /** Standard ikoner **/ ?>
 
1#    <?php screen_icon('themes'); ?>
2#    <?php screen_icon('edit-comments'); ?>
3#    <?php screen_icon('index'); ?>
4#    <?php screen_icon('link'); ?>
5#    <?php screen_icon('upload'); ?>
6#    <?php screen_icon('page'); ?>
7#    <?php screen_icon('plugins'); ?>
8#    <?php screen_icon('tools'); ?>
9#    <?php screen_icon('options-general'); ?>
10#   <?php screen_icon('edit'); ?>
11#   <?php screen_icon('profile'); ?>

Låt användarna fylla i Formulär

När du vill låta dina användare fylla i inställningar till ditt plugin så gör du det snyggast genom att ha varje val på varsin rad i en table med klassen form-table.

Varje rad har en <th>-cell med rubriken till varje val. Denna skall ha atributet scope=”row”. Detta följt av en <td>-cell med själva valet, <input>-taggen.

Efter att du avslutat tabellen sätter du in din spara knapp, och avslutar sedan formuläret med </form>

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

<!-- Formulär som skickas till options.php för att automatiskt sparas med funktioner från WordPress 2.7+ -->
<form method="post" action="options.php">
    <table class="form-table">
 
        <!-- Första raden en vanlig text input -->
        <tr valign="top">
            <th scope="row">
                <label for="mitt_option_namn">Mitt option namn</label>
            </th>
            <td>
                <input type="text" name="mitt_option_namn" value="<?php echo get_option('mitt_option_namn'); ?>" />
            </td>
        </tr>
 
 
        <!-- Andra raden en radio knapp -->
        <tr valign="top">
            <th scope="row">Kön</th>
            <td>
                <input type="radio"  <?php echo get_option('mitt_radio_val') == 'man'?'checked="checked"':''; ?> name="mitt_radio_val" id="mitt_radio_val_1" value="man" />
                <label for="mitt_radio_val_1">Man</label>
                <br />
 
                <input type="radio"  <?php echo get_option('mitt_radio_val') == 'kvinna'?'checked="checked"':''; ?> name="mitt_radio_val" id="mitt_radio_val_2" value="kvinna" />
                <label for="mitt_radio_val_2">Kvinna</label><br />
            </td>
        </tr>
 
    </table>
 
    <p class="submit">
    <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>
 
</form>

<label for=”mitt_option_namn”> gör att man markerar input-rutan (eller markerar respektive radio-val) med samma id, ifall man klickar på texten.

<?php echo get_option(‘mitt_option_namn’); ?> hämtar ett tidigare sparat svar, så att användaren inte måste fylla i samma information flera gånger.

I fallet med radio knapparna skriver den ut ”selected=selected” på det radiovalet som tidigare har blivit sparat.

Visa informationen i professionella Tabeller

Tabeller kan man göra riktigt snygga genom att definiera klassen widefat i <table> och sedan specificera både en <thead> och <tfoot >. Efter det sköter den allt själv.

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

<table class="widefat">
    <thead>
        <tr>
            <th>Id</th>
            <th>Namn</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
       <tr>
         <td>1</td>
         <td>Mr X</td>
         <td>mrx@wordpressguru.se</td>
       </tr>
       <tr>
         <td>2</td>
         <td>Fru Söt</td>
         <td>frusot@wordpressguru.se</td>
       </tr>
    </tbody>
    <tfoot>
        <tr>
        <th>Id</th>
        <th>Namn</th>
        <th>Email</th>
        </tr>
    </tfoot>
</table>

Gör Navigation snyggare

För att få den riktigt snygga navigationen att fungera, så måste den först inneslutas av en div med klassen tablenav och senare en till div med klassen tablenav-pages. Det är sedan inuti detta som navigationen tar plats. Varje länk består av en <a>-tag med klassatributet page-numbers, eller en <span> som dessutom ska ha klassen current, ifall den är markerad.

<div class="tablenav">
    <div class="tablenav-pages">
        <span class="displaying-num">Visar 16—30 av 263</span>
        <a class="prev page-numbers" href="/wp-admin/edit.php?paged=1">«</a>
        <a class="page-numbers" href="/wp-admin/edit.php?paged=1">1</a>
        <span class="page-numbers current">2</span>
        <a class="page-numbers" href="/wp-admin/edit.php?paged=3">3</a>
        <a class="page-numbers" href="/wp-admin/edit.php?paged=4">4</a>
        <span class="page-numbers dots">...</span>
        <a class="page-numbers" href="/wp-admin/edit.php?paged=17">17</a>
        <a class="next page-numbers" href="/wp-admin/edit.php?paged=3">»</a>
    </div>
</div>

Inkludera globala Stylesheets och egna Stilmallar

För att kunna utnyttja alla stilmallar som WordPress redan har skrivit måste du se till att dem läses in i början av ditt plugin.

Genom funktionen wp_enqueue_style kan du inkludera de stilmallar du vill använda.
De flesta ingår i stilmallarna global eller wp-admin så vi ser till att inkludera dem. Ifall vi har en egen stilmall kan vi inkludera den med samma funktion, vi behöver då ange sökvägen till den:

1
2
3

wp_enqueue_style('global');
wp_enqueue_style('wp-admin');
wp_enqueue_style('min-css', get_bloginfo('url') . '/wp-content/plugins/mitt_plugin/min_css.css');

Avslutning

Om det är någonting jag inte har tagit upp här, eller om du skulle hitta någonting som någon annan har gjort som du tycker är snyggt, så är det bästa sättet ,att lista ut hur personen har gjort, att använda Firebug till Mozilla Firefox. Där kan du se vilka element som är viktiga för att någonting ska ske.

Du kan även läsa igenom css filen rakt av då alla css filer ligger under /wp-admin/css/. Där kan du även se vilka andra css-filer du kan inkludera i ditt plugin.

Experimentera och ha roligt. Det är det viktigaste.

Men det finns några bra verktyg och knep där ute för att få de flesta av de ovälkomna kommentarerna att direkt hamna i skräpkorgen.

1. Svartlista för kommentarer

I administrationspanelen under Inställningar > Diskussion finns det en ruta som heter Svartlista för kommentarer. Om en kommentar innehåller någonting av ordet eller orden du skriver i den här rutan så kommer de direkt att markeras som skräppost. Om du tex upptäcker att du får mycket skräppost från en avsändare med mail adressen @spam.com, lägg då till det i den här rutan och du blir genast kvitt honom.

WordPress tillåter vanlig html-kod i sina kommentarer, så ifall någon vill skriva en länk i en kommentar skriver man <a href=”länkadress”>länk text</a>. På många andra ställen, speciellt i forum har man skapat speciella taggat kallade BBCode (Bulletin Board Code), där man bytt ut hakparenteserna (<>) mot klamrar ([]). På dessa ställen blir länkarna antingen [url=länk]Länk text[/url] eller [link=länk]Länk text[/link]. Många spammare helgarderar sina skräpkommentarer för att alltid få sina länkar synliga oavsett vilken kod som är tillgänglig och använder sig av alla sätten, så genom att skriva:

i rutan Svartlista för kommentarer har vi redan blivit av med de flesta skräpposterna.

2. Plugin: Cookies for Comments

Installera tillägget Cookies for Comments. Tillägget placerar en cookie på alla användare som kommer till din sida. När de sedan kommenterar kollas det ifall kakan existerar, ifall den gör det accepteras kommentaren.

Med detta plugin förhindras robotar från att kommentera på din sidan utan att egentligen besöka den. Man måste alltså besöka din sidan för att kunna kommentera, vilket borde vara självklart. De blockerade kommentarerna markeras som skräppost, så skulle någon ha cookies avstängda så kan du fortfarande se vad de har försökt kommentera och tillåta just deras kommentar.

3. Plugin: Akismet

Tillägget Akismet skeppas som standard med WordPress från 2.0 och är byggt speciellt för just WordPress. Det beter sig annorlunda än andra spamskydd då Akismet söker igenom innehållet i en kommentar och jämför den mot en databas för att verifiera ifall det är skräp eller inte. Detta gör dock att man måste ha en API nyckel för att det ska fungera, men frukta ej, ty en sådan kan du få gratis från WordPress.com. Logga in eller registrera dig och gå till Användare > Din profil. Där i första paragrafen hittar du din API nyckel som du kopierar och klistrar in på rätt ställe i Akismet-tillägget på din riktiga blogg.

4. Sista utväg: CAPTCHA

Har du gjort de tre stegen ovan, men fortfarande inte blivit av med all skräppost från din vanliga inkorg? Då är sista utvägen en så kallad CAPTCHA. Vi känner igen dem som bilder på bokstäver eller ord med konstiga bakgrunder där vi ska försöka tyda vad som står och skriva det i en ruta bredvid. Jag avråder från att använda sådana lösningar då potentiella kommenterare ofta inte orkar med din opålitlighet och istället väljer att låta bli. Ibland har man dock inget annat val (jag har tex en CAPTCHA på kontaktformuläret, då ett sräppostfilter inte fungerar på mail) och då finns det ett flertal olika plugins eller alternativ att tillgå. I bland räcker det med en ruta där man ska skriva svaret på en enkel fråga, så som ”hur många liv har en katt?” eller ”vad är 1+1?”. Om du vill ha en riktig CAPTCHA med bild skulle jag ändå föreslå någonting enkelt, tex Really Simple CAPTCHA, just det inlägget fungerar dessutom utmärkt tillsammans med Contact Form 7 ifall man använder det.

Börja med att logga in på din blogg och titta igenom vilka val du har i menyn till vänster. (www.dittdomän.se/wp-admin/)

Blandade inställningar

Ta en titt under Inlägg > Kategorier och fundera över ifall du vill att standardkategorin ska vara ”Okategoriserade” eller ifall du vill ha ett annat namn eller kanske några extra kategorier. Min standard kategori på den här sidan är WordPress, detta blir den kategori som bli vald ifall du glömmer att välja någonting annat.

Gå förbi Länkar > Länkkategorier och välj ett bra namn för din standardkategori. Svenska standardnamnet är Länklista, men du kanske vill ändra det till något i stil med bara Länkar, Vänner, Inspiration eller liknande.

Användare > Din Profil blir nästa stopp. Här kan det vara bra att fylla i lite information under titeln ”Namn”. Efter att informationen är ifylld uppdatera din profil och du kommer att ha möjligheten att ändra din ”Visa namn offentligt som” till ett bättre val än admin. Detta är namnet som visas när du skriver kommentarer på din sida. Uppdatera profilen igen när du valt något bra.

Fortsätt till Inställningar > Allmänt. Har du ångrat din titel du valde på din blogg är det här du ändrar den. Passa också på att ändra Slogan från ”En WordPressblogg till” då detta är det första tecknet på att du är ny i bloggosfären.

Nästa stopp är Inställningar > Skriva där du kan kryssa i dina nya namngivna länk- och inläggskategorier. Om du automatiskt vill pinga olika hemsidor för att tala om att du har skrivit ett nytt inlägg så är det här man fyller i dem adresserna, men mer om det i ett senare inlägg. Passa även på här att ändra ”Redigeringsrutans storlek” till 20 rader då 10 är ganska litet, och du inte vill scrolla i rutan när du skriver hela tiden.

Skynda dig nu vidare till Inställningar > Permalänkar och kryssa i ”Anpassad struktur”. I rutan skriver du /%postname%/ vilket gör ett snyggare adressfält och bättre indexering för google. Eftersom vi är svenskar kan vi även passa på att skriva en lämplig kategori- och etikettsbas. Detta är det som kommer att stå i adressfältet efter ditt domännamn när man trycker på en etikett eller när du söker i arkivet. Så jag rekommenderar att du skriver kategori och etikett i respektive ruta här.

Plugins

Börja med att ladda ner de 5 plugin du måste ha som jag skrev om i ett tidigare inlägg: All in One SEO Pack, Google Analyticator, Google XML Sitemaps, WP Super Cache, WP-PageNavi.

Det bästa inlägget för kontaktformulär, så folk kan skriva mail till dig är Contact Form 7.

Känner du att du saknar vissa val för att kunna formatera texten på rätt sätt när du skriver dina inlägg? I så fall är det TinyMCE Advanced du ska ha.

Om du är intresserad av att kunna skriva kod, i form av tex php, c++, html eller liknande och vill få den färgformaterad på rätt sätt skulle jag rekommendera WP-Syntax som stödjer de allra flesta vanliga programmeringsspråk plus är lätt att ändra ifall du tycker att färgerna är fel.

Lightbox 2 gör det där lilla extra med dina bilder för att de ska visas så bra som möjligt när man klickar på dem.

Sökfunktionen i WordPress är som standard väldigt dålig, men med några små fixar kan man snart få den mycket bättre. Börja med att ladda ner pluginet Search Excerpt vilket vill ta fram den del av inlägget där sökordet existerar istället för att alltid visa första raderna av ett inlägg.

Fortsätt sedan med ett plugin i stil med Search Everything vilket också gör det möjligt att söka på kommentarer, sidor och etiketter.

Högst upp på alla inlägg och sidor bör det finnas en liten text som talar om var du är likt: Du är här: WpGuru » Nybörjare » Så börjar du din blogg. Denna funktion kallas Breadcrumbs och det enklaste pluginet för detta ändamål är i mitt tycke Yoast Breadcrumbs. Detta gör det både lättare för besökare att förstå vart de är och för Google att kunna pussla ihop din site.

Avslutningsvis är det bra att ha ett plugin som genererar relaterade inlägg till det inlägg som dina besökare läser, så att de enkelt kan hitta fler intressanta inlägg och stanna kvar på din blogg. Yet Another Related Posts Plugin är ett enkelt och anpassningsbart plugin som dessutom kan generera de relaterade inläggen i förväg vilket snabbar på laddningen av varje inlägg när den visas.

Utseende

Det här är ett kapitel för sig och kommer att skrivas om i många fler inlägg. Det är här du kan få din blogg att se seriös ut, eller motsatsen. Du kan få den att attrahera datornördar eller 14-åriga tjejer, eller den målgrupp du är intresserad av. Att välja rätt design när A och O för att få en populär och välbesökt blogg och det görs genom ett byte av skin, tema eller theme beroende på vad du vill kalla det, och du gör det med ett musklick under Utseende > Teman, men först måste du ha ett tema att byta till.

Från start finns Classic vilket inte är ett allt för snyggt tema, och Default vilket man ser allt för ofta då många inte ens orkar byta tema ens en gång. Du bör inte vara en person i den kategorin eftersom du läser det här så ta dig till Utseende > Lägg till nytt tema och börja söka efter någonting som du gillar. 2 eller 3 kolumner är det vanligaste att ha för att göra det möjligt att ha widgets i en sidebar, annars är det bara att hitta ett som du trivs med. En tumregel är att ett mörkt tema inte funkar så bra att läsa långa inlägg på, då man lätt blir trött i ögonen, medan det istället funkar bättre att visa foton på.

När du hittat ett tema du gillar är det bara att klicka på installera och det kommer att dyka upp under Utseende > Teman. Där kan du aktivera det och hela bloggen kommer att byta design.

Hittar du inget tema du gillar där kan du söka på internet. Googla på wordpress theme free och du kommer att hitta en mängd teman du kan ladda ner och sedan ladda upp till din blogg. Ta dig tid att hitta någonting du gillar och som du kan stirra på själv i flera timmar. Om inte du ens klarar av det kommer ingen annan heller att göra det.

Under Utseende hittar du även Widgets vilket är små rutor med olika information som man kan placera i en sidebar. Det kan vara allt från ”Senaste inläggen” till ”Slumpade bilder från Galleriet” och det finns en mängd widgets att ladda ner, plus att varje plugin ofta har sin egen. I mitt tycke är ”Less is More” en bra regel här. Alltså se till att inte proppa din blogg full med widgets med all information du kan få tag i, då detta endast blir rörigt och tappar sitt syfte. Om du däremot endast har några stycken, kommer besökarna att se dem och ta emot den information du vill ge dem. ”Senaste inlägg” och ”Kategorier” (Om dessa inte redan visas någon annan stans i ditt tema) är dock två widgets jag starkt kan rekommenderar att du har.

Avslutning

Så där nu har du kommit igång med din blogg ordentligt. Nu är det inte längre en okunskap i WordPress som kan få besökare att tro att du är en nybörjare som bloggare, utan nu är det endast ditt skrivande som skulle kunna avslöja något sådant.

Så skynda dig iväg till Inlägg > Nytt inlägg och se till att fyll din blogg till bredden med intressanta historier om allt du har att berätta. Lycka till.

1. All in One SEO Pack

Detta är ett starkt plugin som framför allt ser till att dina titlar talar om vad som ses på sidan och inte stannar kvar som en statisk titel av din hemsidas namn.

2. Google Analyticator

Det här pluginet ser till att din Google Analytics spårningskod dyker upp på alla bloggens sidor. Den kan dessutom spåra utgående länkar och hjälpa dig med event spårning.

3. Google XML Sitemaps

Detta plugin genererar en XML webbkarta så att google och andra sökmotorer enkelt kan hitta och indexera alla dina sidor på hemsidan. Pluginet uppdaterar automatiskt webbkartan varje gång du skriver ett nytt inlägg så efter att ha aktiverat pluginet och skapat den första webbkartan behöver du aldrig mer röra pluginet.

4. WP Super Cache

Det här är ett kraftfullt plugin som chachar din hemsida för att snabbare kunna surfa på den. Detta är framförallt nödvändigt för större hemsidor med mycket trafik men även de små hemsidorna bör se till att vara så snabba som möjligt.

5. WP-PageNavi

Det här pluginet skapar en snyggare och mer avancerad navigation till din blogg. Detta gör att besökare enklare kan bläddra igenom dina inlägg även om du har en mängd sidor. Det krävs dock att du placerar en kod snutt där du vill ha navigationen vilket gör att du antingen måste kunna redigera ditt tema eller skaffa ett tema som redan har scriptet på plats. Populariteten hos detta plugin gör dock att de flesta teman har skrivit en den här koden i förebyggande syfte.