iPhone-anpassa din WordPressblogg

21 Jan 2009 Övrigt

När jag skaffade en iPhone för två veckor sedan var det efter insikten att iPhone är mer än bara en finessladdad produkt. Det är ett nytt mobilt användarbeteende. Mycket utifrån att Apple valt att klämma in en dator i telefonen istället för att bygga en telefon. I en iPhone kan man göra överaskande mycket av vad man normalt gör i en vanlig dator. Även om det går att surfa till de allra flesta hemsidor i Safari har jag kommit på mig själv att oftare surfa på de sidor som är anpassade till mobila skärmar. Inte nödvändigtvis iPhone-anpassade men allmänt, sidor som är lättare att surfa på i små datorer.

Så jag har kollat runt lite och letat efter smidiga sätt att publicera min egen blogg för iPhone. Och då har jag kommit över det mycket intressanta temat och pluginet iWPhone. Det är en plug som detectar vilken plattform man kommer ifrån och om den märker att du surfar på en iPhone byts temat ut mot ett anpassat för mindre skärmar. Knapparna är större, bilderna komprimeras till att rymmas på skärmen. Och det är allmänt mindre plottrigt. Det bästa med pluggen är att den är så otroligt enkel att använda.

Man bara installerar och aktiverar och vips blir din blogg iPhone-anpassad. Vill man snygga till det nÃ¥got trista temat är det bara att style’a om. Dock märkte jag att pluggen har nÃ¥gra buggar som jag själv har försökt fixa. Det är problemet med att den inte skalar om YouTube-klipp, utan bara bilder. Det är ett problem eftersom de flesta YouTube-klipp är över 320 pixlar som iPhone har i bredd. Vidare har jag märkt att lÃ¥nga länkar inte heller ryms pÃ¥ skärmen vilket gör att temat ser helt galet ut. Därför föreslÃ¥r jag att du gör följande ändringar i pluggen innan du installerar:

Om du inte orkar göra ändringarna själva så har jag lagt upp en modifierad version här:
http://utveckling.swedmedia.se/extra/iwphone-wordpress-plugin-and-theme.zip

I header.php byt ut funktionen fixImgs mot följande så omformateras även storleken på embeddade filmklipp.

function fixImgs(whichId, maxW) {
	var pix=document.getElementById(whichId).getElementsByTagName('img');
	for (i=0; i<pix.length; i++) {
		w=pix[i].width;
		h=pix[i].height;
		if (w > maxW) {
		  f=1-((w - maxW) / w);
		  pix[i].width=w * f;
		  pix[i].height=h * f;
		}
	}

	pix=document.getElementById(whichId).getElementsByTagName('object');
	for (i=0; i<pix.length; i++) {
		w=pix[i].width;
		h=pix[i].height;
		if (w > maxW) {
		  f=1-((w - maxW) / w);
		  pix[i].width=w * f;
		  pix[i].height=h * f;
		}
	}
}

Och i CSS-filen style.css byter du ut #maincontent .post mot följande för att begränsa bredden pÃ¥ innehÃ¥llsytan till 320 pixlar. Viktigt när du t.ex. har för lÃ¥nga url’er utskrivna i sidan.

#maincontent .post {
	border-top: 1px solid #ccc;
	background-image: url(images/top-shadow.png);
	background-repeat: repeat-x;
	width: 320px;
	overflow: hidden;
}