Idag för 7 år sedan skrev Matt Mullenweg (@photomatt) ett inlägg på Wordpress.org med rubriken WordPress Now Available. Första releasen var version 0.7 och sedan dess har mycket hänt. Nu väntar alla på version 3.0 som inte är långt ifrån att släppas.

Wordpress har under åren som gått utvecklats från en plattform för bloggar till att även fungera utmärkt som CMS för göra sajter. Innan jag fick upp ögonen för Wordpress använde jag uteslutande Joomla men har nu nästan helt gått över till Wordpress.

Har du inte testat Wordpress än rekommenderar jag verkligen att du ger det en chans, du kommer inte att ångra dig.

Vad är fördelen med att lägga shortcodes i en plugin?

Det vanligaste är att man lägger sina shortcodes i functions.php som finns i de flesta teman. De uppenbara nackdelarna med detta är att när man uppdaterar eller byter ut sitt tema och glömmer att kopiera över sina shortcodes till det nya temat kommer dessa att försvinna.

Lösningen på detta är att skapa ett plugin där man lägger alla sina shortcodes. På detta sätt blir de tillgängliga oberoende vilket tema du använder. Det är också väldigt lätt att flytta dem till andra bloggar.

Hur gör man ett plugin för sina shortcodes?

Börja med att skapa en fil som heter shortcodes.php. För att det ska gå att aktivera ett plugin i Wordpress måste följande rader finnas.

<?php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
*/
?>

Nu när grunden är klar återstår det bara att lägga in alla shortcodes du vill använda.

Så här kan ett färdigt plugin se ut med en shortcode som skriver ut Hello World.

<?php
/*
Plugin Name: My plugin for shortcodes
Plugin URI: http://fredrikmalmgren.se/2010/05/tutorial–skapa-ett-plugin-for-dina-shortcodes-i-wordpress
Description: This is a plugin for all my shortcodes to separate them from my theme
Version: 1.0
Author: Fredrik Malmgren
Author URI: http://fredrikmalmgren.se
*/

function hello() {
 return 'Hello, World!';
}
add_shortcode('hw', 'hello');

?>

Lägg sedan denna fil i wp-content/plugins. När du gjort det borde du kunna se något liknande i Wordpress under Plugins.

Wordpress plugin för shortcodes

För att kunna börja använda sina shortcodes är det bara att man aktiverar sitt plugin.

Att göra ett plugin som endast ska användas för eget bruk ställer inte samma krav som ett plugin som man ska publicera i Wordpress plugin directory. Vill man göra ett plugin som ska publiceras krävs en del andra saker.

Vad är shortcodes?

Det finns tre grundtyper av shortcodes. Den enklaste varianten är att man endast skriver följande i sin bloggpost:

[adsense]

Ovan version ger inget utrymme för val av till exempel storlek på annonsen. Vill man kunna välja storlek kan man lägga till en parameter:

[adsense format=1]

Ovan version ger dig en AdSense annons med till exempel bredden 468 pixlar. Den sista typen är när man vill lägga till eget innehåll. Så här kan det se ut när man skapar en AdSense annons med en rubrik:

[adsense format=1]Annons:[/adsense]

Dessa koder skriver man helt enkelt in i sin editor där man vill att de ska bli synliga. När sedan en besökare läser din bloggpost kommer denna shortcode att översättas och den bakomliggande funktionen körs och visar innehållet i bloggposten.

Hur skapar man shortcodes?

Att skapa en shortcode är väldigt enkelt. Kan du skriva lite PHP har du stora möjligheter att skapa användbara shortcodes som kommer att spara mycket tid åt dig.

Först skapar vi den enklaste versionen av shortcode:

[adsense]

I detta fall finns det bara en typ av annons man kan välja på.

Börja med att öppna filen functions.php som ligger i ditt tema. Finns den inte kan du skapa den. Efter det skriver du in följande kod:

function add_adsense() {
return '<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXX";
google_ad_slot = 'XXXXXXXXXX';
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
}

Nu när funktionen är klar måste vi berätta för Wordpress att det är en shortcode och det gör vi med följande rad:

add_shortcode('adsense', 'add_adsense');

Den första parametern är vad du skriver i din bloggpost för att använda din shortcode och den andra är funktionens namn i functions.php

Om man vill använda sig av flera olika storlekar på annonser kan man lägga till en parameter som anger format. Då får man istället en shortcode som ser ut så här:

[adsense format =1]

I functions.php skriver man istället följande:

function add_adsense( $atts ) {
extract(shortcode_atts(array(
'format' => '1',
), $atts));
switch ($format) {
case 1 :
$ad = ' <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>';
break;
case 2 :
$ad = ' <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>';
break;
}
$rest = '<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
return $ad.$rest;

}
add_shortcode('adsense', 'add_adsense');

Vill man lägga till flera annonstyper är det bara att lägga till fler case i koden ovan.
Om man vill bygga på sin shortcode ytterligare kan man välja att lägga till extra innehåll i form av en text som talar om att det är en annons på följande sätt.

 [adsense format=1]Annons:[/adsense]

I vår functions.php skriver vi då följande kod:

function add_adsense( $atts, $content = null ) {
extract(shortcode_atts(array(
'format' => '1',
), $atts));
switch ($format) {
case 1 :
$ad = ' <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>';
break;
case 2 :
$ad = ' <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>';
break;
}
$rest = '<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';

return = '<strong>'.$content. '</strong><br/>'.$adsense.$rest;

}
add_shortcode('adsense', 'add_adsense');

Det var tre exempel på olika typer av shortcodes man kan använda för att lägga till annonser från Google AdSense mitt i en bloggpost. Glöm inte bort att byta ut AdSense koden till din egen.

Läs mer om Wordpress shortcodes API.

Aktivera ministyrbilder i Wordpress

Det första man måste göra är att aktivera funktionen för miniatyrbilder. Man kan välja på om man vill aktivera det för både poster och sidor eller bara för någon av dem. Lägg till någon av följande rader i functions.php beroende på hur du vill göra.

add_theme_support( 'post-thumbnails' ); // post och sida
add_theme_support( 'post-thumbnails', array( 'post' ) ); // endast post
add_theme_support( 'post-thumbnails', array( 'page' ) ); // endast sida 

Nästa steg är att ange storleken för dina miniatyrbilder, även det i functions.php. Här har man lite olika val både när det gäller storleken på bilderna men även hur man ska beskära bilden. Det enklaste fallet är att ange miniatyrbilder enligt följande.

 set_post_thumbnail_size( 100, 100 );

Detta betyder att bilder är i storlek 100×100 pixlar och bilden förminskas tills den får plats inom angiven storlek. Anger man istället följande så betyder det att man beskär bilden i angiven storlek.

 set_post_thumbnail_size( 100, 100, true );

Det kan finnas tillfällen då man vill använda samma bild fast i en annan storlek på till exempel sidan som visar hela posten (single.php). Detta gör man genom att ange fler storlekar på detta sätt i functions.php.

 add_image_size( 'single-post-thumbnail', 400, 9999 );

Visa miniatyrbilder på sajten

För att sedan visa miniatyrbilderna i home.php eller index.php anger man följande kod.

<?php the_post_thumbnail(); ?>

För att visa bilder på single.php i den större storleken anger man följande.

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

Stöd tidigare versioner av Wordpress

Om man utvecklar ett tema som man planerar att publicera kan man lägga till funktioner som kontrollerar vilken version av Wordpress man använder och om inlägget verkligen har en miniatyrbild. Ange följande kod i function.php för att kontrollera vilken version av Wordpress du använder. Använder man version 2.9 eller nyare aktiverar man funktionen för miniatyrbilder.

if ( function_exists( 'add_theme_support' ) ) { // Från och med 2.9
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100, true ); // index.php eller home.php
add_image_size( 'single-post-thumbnail', 400, 9999 ); // single.php
}

För att kontrollera om en post innehåller en miniatyrbild anger man följande.

if ( has_post_thumbnail() ) {
the_post_thumbnail(); // posten har en miniatyrbild
} else {
// posten saknar en miniatyrbild
}

Använd CSS med dina thumbnails

Vill man använda CSS tillsammans med sina miniatyrbilder kan man såklart göra det.

the_post_thumbnail('single-post-thumbnail', array('class'=>'thumbnail')); 

Hur fungerar det för användare?

Efter att ha gått igenom hur man aktiverar miniatyrbilder i sitt tema ska vi kolla på hur det fungerar när man väl skriver inlägg i sin blogg eller på sin webbsida.

Har man gjort allt ovanstående och går till sidan där man skriver sina inlägg så ser man följande box där man kan ladda upp en miniatyrbild.

Ladda upp en miniatyrbild

Om man klickar på Set thumbnail i bilden ovan så kommer man till den vanliga bilduppladdningen i Wordpress men nu så har man fått ytterligare ett val att använda bilden som miniatyrbild (thumbnail).

Använd som miniatyrbild

När detta är gjort så ser man den uppladdade bilden direkt på sidan.

Förhandsgranska inläggets miniatyrbild

Svårare än så är det inte att aktivera miniatyrbilder i sitt tema och att använda funktionen när man skriver inlägg på sin blogg.

1. Om du har tillgång till php.ini, kan man ändra följande rad till 64M istället för 32M

memory_limit = 64M;

2. Om du inte har tillgång till php.ini, kan man lägga till följande rad till sin .htaccess

php_value memory_limit 64M

3. Ett annat alternativ är att lägga till följande rad till sin wp-config.php

define('WP_MEMORY_LIMIT', '64M');

4. Sista alternativet är att ta kontakt med ditt webbhotell

För mig fungerade lösning nummer två bra.

När man utvecklar för webben är det viktigt att man testar sina sajter för alla olika webbläsare som finns eftersom de beter sig lite olika. När man utvecklar sajter för mobiler är det samma sak. För att göra sin mobilsajt tillgänglig för så många mobilmodeller som möjligt är det viktigt att man följer alla de standarder och riktlinjer som finns. Ett företag som verkar för att mobilbranschen ska ta fart på allvar är dotMobi som har ett flertal sajter som handlar om mobilutveckling.

dotMobi compliance & mobileOK checker

Företaget har utvecklat ett verktyg som heter ready.mobi som kan användas för att testa hur bra en sida, en bit kod eller en hel sajt lämpar sig för mobiler. Vill man testa hela sajten på en gång måste man vara registrerad på deras sajt. Verktyget testar mot W3C mobileOK, mot andra standarder och praxis inom mobilvärlden. När testet är klart får du en generell bedömning på en skala från noll till fem (där fem är bäst) men även en detaljerad rapport med förslag på förbättringar.

Om du utvecklar sajter för mobiler tycker jag absolut att du ska testa ready.mobi.

Eftersom jag använder Zend Framework för att implementera MVC använder mig av den inbyggda klassen Zend_Config_Ini som läser från min INI-fil. Zend_Config_Ini använder sig av parse_ini_file som är en funktion i PHP. Min INI-fil har två sektioner, en för utveckling och en för produktion. Det fina med denna uppsättning är att sektionen ”development” kan ärva från sektionen ”production” så i ”development” behöver man bara specificera skillnaden mellan dem. Så här kan en INI-fil se ut.


; Production site configuration data
[production]
webhost                  = www.example.com
database.adapter         = pdo_mysql
database.params.host     = db.example.com
database.params.username = dbuser
database.params.password = secret
database.params.dbname   = dbname

; Development site configuration data inherits from production and overrides values as necessary
[development : production]
database.params.host     = dev.example.com
database.params.username = devuser
database.params.password = devsecret


I min bootstrap-fil har jag definierat min INI-fil så att jag genom hela applikationen kommer åt mina inställningar. Så här kan det se ut.

$configFile = 'config.ini';

$configSection = '';
if (isset($_SERVER['APP_CONFIG_SECTION'])){
$configSection = basename($_SERVER['APP_CONFIG_SECTION']);
}
if (strlen($configSection) == 0){
$configSection = 'production';
}
$config = new Zend_Config_Ini('../' . $configFile, $configSection);
Zend_Registry::set('config', $config);

Som ni kan se så kontrollerar jag om systemvariabeln $_SERVER['APP_CONFIG_SECTION'] är satt vilket jag bara har gjort på min utvecklingsserver. Detta är för att applikationen själv ska veta om den ligger på utvecklingsservern eller om den ligger på produktionsservern. Genom att göra på detta sätt behöver jag bara en INI-fil och jag behöver aldrig fundera över om jag läser från rätt INI-fil.

När jag sedan vill använda något värde från min config.ini så behövs endast följande kod:

$config = Zend_Registry::get('config');
echo $config->database->params->username;


Hittills har jag inte använt något ramverk för CSS men i nästa projekt tänkte jag testa att göra det. Jag har letat en hel del på nätet efter olika CSS-ramverk och hittat några intressanta. Tre ramverk som jag fastnade för är:

• 960 Grid System
• Blueprint
• YUI Grids CSS

Det alla dessa ramverk har gemensamt är att det bygger på ett rutsystem. Det hela fungerar så att man delar upp sajtens bredd i ett antal kolumner. Hur många kolumner man har är lite beroende på vilken bredd sajten ska ha och avståndet mellan kolumnerna. Jag ska inte gå in exakt på hur man använder alla ramverk i detta inlägg men kan ge ett kort exempel på hur det fungerar.

Säg att man vill utveckla en sajt som har en meny till vänster, en större yta i mitten och slutligen en lite smalare yta till höger. Det man gör i alla ramverk är att ange bredden på ytorna i antalet kolumner de får ta upp. Om hela sajten har bredden av 24 kolumner (som är standard för Blueprint) så kan menyn till vänster vara 8 kolumner bred, ytan i mitten 12 kolumner bred. Då återstår 4 kolumner till ytan till höger. Man kan kombinera bredderna hur man vill, det ända man behöver komma ihåg är att tillsammans ska de ha bredden av 24 kolumner. I exemplet har man skapat en sajt som har tre ytor som går från toppen till botten av sajten. Självklart kan man skapa en banner längst upp. Det är bara att ange att den ska vara 24 kolumner bred. Detsamma gäller för sidfoten om man vill ha en sån. Det hela kanske låter krångligt men det är i praktiken väldigt lätt. Alla ramverk har tydliga beskrivningar som förklarar detta på ett bra sätt.

Har du inte testat ett CSS-ramverk så rekommenderar jag verkligen att du gör det.

Man kan förstås alltid testa sig fram med ”trial and error”-metoden vilket också funkar men kan ta väldigt lång tid om man inte vet på ett ungefär hur det ska se ut. Det är här Regex Coach kommer till stor nytta.

Regex Coach – Interaktiva reguljära uttryck

Programmet är väldigt enkelt. Det består egentligen av två stora textfält. I det översta skriver man in sin regex och i det understa skriver man in textsträngen man vill använda sin regex på. Den eller de delar i texten som matchar din inskrivning regex kommer att markeras med gult i realtid så man ser direkt vad varje del gör. Under textfälten finns ett antal flikar. Dessa flikar är lite överkurs men det skadar inte om du bekantar dig med dem i alla fall.

Vill man veta mer om hur Regex Coach fungerar rekommenderar jag att man tittar på deras tutorial som går igenom programmet i några enkla steg.

Apache Lucene

Jag har på senare tid laborerat lite med Lucene som är en sökmotor med vilken man kan indexera innehållet på sin webbsida. I mitt projekt använder jag mig av en version gjord helt i PHP som är integrerad i Zend Framework 1.8. Zend’s version av Lucene härstammar från Apache Lucene projektet som är skrivet i Java.

Det var inte svårt att implementera Lucene på sajten. Dock fanns det inte något bra sätt att se innehållet i indexet. Efter lite letande så hittade jag ett verktyg som ger ett grafiskt gränssnitt till indexet.

Verktyget, som är distribuerat under Open Source, heter Luke – Lucene Index Toolbox. Med Luke kan du bland annat:

• Söka i indexet och bläddra igenom resultatet
• Analysera sökresultat
• Editera och ta bort dokument från indexet
• Optimera indexet

Bilden visar hur det ser ut när man söker i indexet med Luke

Innan jag hittade Luke kändes det som jag famlade lite i mörkret eftersom jag inte riktigt förstod hur indexet fungerade och hur dokumenten lagrades. Nu när man får en grafisk bild av hur indexet ser ut är det mycket lättare att förstå hur det fungerar och förhoppningsvis så blir det lättare att använda indexet på ett optimalt sätt. Använder du Lucene eller är nyfiken på att testa rekommenderar jag verkligen att du laddar ner och testa Luke.

Lämna gärna en kommentar om du vet något liknande verktyg som Luke.