Med Relevant AdSense Ads kan man hjälpa Google AdSense visa mer relevanta annonser genom att markera vilka sektioner på en sajt eller en bloggpost som är relevanta och vilka som inte är det.

Ett exempel på det är om man skriver om en viss typ av sajter som man inte gillar så vill man såklart inte visa annonser baserat på denna text.

Läs mer om Relevant AdSense Ads eller ladda ner det direkt och testa.

Adminsida för Relevant AdSense Ads

Easy Excerpt är inte ett speciellt avancerat plugin utan målet jag hade var att lära mig mer om hur man skapar ett plugin och använder WordPress API på rätt sätt. Jag har en del andra liknande plugins som ligger halvfärdiga och som förhoppningsvis snart blir klara. Såklart finns det även mer avancerade plugin som jag skulle vilja göra men det får bli när jag känner att grunderna sitter bättre.

Adminsida för Easy Excerpt

I samband med publiceringen av Easy Excerpt har jag även gjort en nya sajt vilken på många sätt kommer att vara lik denna fast den nya sajten kommer att vara på engelska. Sajten ligger på domänen FredrikMalmgren.com. Anledningen till att jag skapar ytterligare en sajt är att jag tänker publicera fler plugins som till exempel Easy Excerpt men även andra saker som plugins till webbläsare, tutorials med mera. Sajten kommer även att fungera som en portfolio där jag listar alla projekt och sajter jag gör.

Så här såg den gamla koden ut:

<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
	try {
		var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
		pageTracker._trackPageview();
	} catch(err) {}
</script>

Den nya asynkronta javascriptet:

<script type="text/javascript">
	var analyticsFileTypes = [''];
	var analyticsEventTracking = 'enabled';
</script>
<script type="text/javascript">
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
	_gaq.push(['_trackPageview']);

	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
	})();
</script>

Självklart fungerar fortfarande den gamla koden men det är rekommenderat att byta till den nya snabbare koden så snart som möjligt.

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;