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.

Varje år firas dagen den 9:e April, och WordPress Gurun är med för andra året i rad. Var med du också!

Jag skriv ihop ett litet filter som gör att inga WordPress css:er laddas:

function wpguru_strip_styles() {
    return "";
}
add_filter( 'style_loader_src', 'wpguru_strip_styles' );

Lägg till koden i din functions.php så tas all style bort från tillägg och annat. Filen hittar du om du går in i Administrationspanelen och väljer ”Utseende > Redigerare”.

Dessutom måste du gå in i header.php som du hittar om du hittar på samma ställe som functions.php. Här letar du upp en rad som ser ut ungefär så här:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Kommentera ut raden genom att ersätta den mot följande:

<!--<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />-->

Så, spara(!) och all din style ska nu vara helt borta från din hemsida.

Ha detta igång under hela dagen, för att vara med och fira Naked CSS Day 2011.

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.

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.

Men vad gör du ifall just ditt typsnitt inte existerade i den listan. Och som grafisk designer kan du inte ha det på något annat vis än att använda just ditt specialdesignade typsnitt. Bilder är inget alternativ, så vad gör du då?

Med css definitionen @font-face är det möjligt. @font-face låter dig definiera en egen font-familj och låta besökaren ladda ner det aktuella typsnittet och sedan visa din hemsida precis som du vill ha den. Funktionen är egentligen en CSS2 definition, men då var det bara Internet Explorer som stödde den, och då endast med specialformatet .eot (vilket för övrigt fortfarande är det ända IE stödjer). Nu när CSS3 och HTML5 gör intåg stödjer alla stora webbläsare @font-face till en viss grad, och med lite special kodning och alternativa typsnitt att falla tillbaka på kan vi visa hemsidan precis som vi vill ha den utan att oroa oss för att gamla webbläsare och uråldriga användare inte ska kunna hänga med.

Bulletproof smily version av @font-face

Koden som rekommenderas att använda för @font-face och som framförallt är framarbetad av Paul Irish ser ut som följer:

1
2
3
4
5
6

@font-face {
  font-family: 'WpGuru Familjen';
  src: url('WpGuruFamiljen.eot?') format('eot'),
       url('WpGuruFamiljen.woff') format('woff'),
       url('WpGuruFamiljen.ttf') format('truetype');
}

Koden ovanför gör så att jag kan använda mig av font-familjen ‘WpGuru Familjen’ i min style.css, där konden ovan också för övrigt ska in. Anledning till att den är på så många rader är för att alla webbläsare ska förstå, framförallt IE. Genom koden ocan kan man lura de olika webbläsarna så att till och med ie6 kan förstå. Om du vill veta exakt varför läs gärna Paul Irish inlägg om saken

Första raden @font-face talar om att här börjar en definition om en ny font. Andra raden specificerar namnet på fonten. Det är detta namnet man ska skriva ifall man sedan vill använda fonten.

Tredje raden är till för Internet Explorer som bara förstår .eot filer, och detta är alltså platsen på hårddisken relativt till stylesheet filen där fint typsnittsfil ligger.

Rad 4-7 är till för alla andra webbläsare. Rad 4 säger att ifall besökaren redan har ett typsnitt installerat på datorn som heter samma sak som står mellan local, så ska man använda detta typsnitt, vilket kan vara bra, för att besökaren ska slippa ladda ner din fil, men ifall besökaren råkar ha fel typsnitt med samma namn installerat, så kommer alltsammans se fel ut, så därför testar man och ser ifall användaren har ett typsnitt som heter (smily), för att den alltid ska misslyckas. Varför då inte helt strunta i det, frågar du dig? För att IE inte förstår vad local betyder, och kommer att hoppa över den raden. Skulle man IE lasa vidare, skulle IE ladda ner även nästkommande typsnittsfiler trots att IE inte förstår sig på dessa typsnitt, vilket bara skapar massa jobbigheter. Så detta är den bästa lösningen (läs mer på Paul Irish sidan specificerad ovan).

Vidare på rad 5-7 sedan när IE är ur vägen, specificeras olika typer av din font, för olika typer av webbläsare. WOFF är ett litet och snabbt format som stödjs av FF3.6+, true-type stödjs av de flesta och är special designat för att visas bra på webben. Svg tillslut är xml format som södjs av ett fåtal webbläsare men framförallt av iPhone och iPad.

Tillslut på rad 8-10 tar vi bort några buggar i webkit läsare genom att specificera alla stil varianter till normala. Så får vi inga dumma kraschar på grund av detta. Läs gärna mer om detta här.

Förut var det The Bulletproof smily syntax som gällde, men skaparen till Font Squirrel har lyckats komma på en smart metod som ersätter den och genom de få raderna ovan lyckats göra så att till och med ie6 kan få special designade fonts. Genom att lägga till information om 3 stycken fonts, kan man erbjuda det bästa typsnittet för varje webbläsare. eot filen till Internet Explorer mindre än 9, woff filen till alla moderna webbläsare, och slutligen ttf-filen till Safari, Android, iOS.

Den här metoden heter ”The Fontspring @font-face syntax” och Font Spring har skrivit ett bra inlägg om precis vad som händer i syntaxen.

Generera dina typsnitt

-Men, tänker ni, så många filer av ett och samma typsnitt har inte jag!

Så hur får du tag i typsnitten i alla de där formaten som beskrevs ovan?

Lugn, som tur är finns det smidiga och bra verktyg på internet, där det bästa är skapat av Font Squirrel.

Här kan du ladda upp dina normala .ttf filer som du till exempel kan hitta i din dators font mapp eller lite varstans på internet. Och sedan ser generatorn till att skapa filerna du behöver. Tänk vad lätt det kan vara ibland.

Hur du sedan använder dina familjer

Ok, koden är redo, filerna är redo. Hur får du nu din text att formad som du vill ha den? Enkelt, precis som du skulle vilken annan font som helst.

p{

   font-family: WpGuru, 'WpGuru Familjen', verdana, helvetica, arial, sans-serif;

}

Nu kommer den att använda WpGuru fonten som allting går som det ska, och ifall den inte hittar typsnittet trots alla våra koder och filer (och under de få sekunder innan webbläsaren har hunnit ladda ner och installera typsnittet), så kommer den att falla tillbaka på verdana i första hand, helvetica i andra hand och så vidare.

Så nu kan du styla din hemsida precis så som du vill ha den, med de coolaste typsnitten du kan då tag i, få det att fungera i alla webbläsare och skulle det mot förmodan ändå gå åt pipan, så har du lösningen för det också.