Etikettarkiv: tips & trix

Utveckling

Förbättra sökningar i wordpress med Google did-you-mean™

Lämna en kommentar

WordPress är ett perfekt verktyg till så mycket mer än bloggar, jag använder det ofta för sina CMS egenskaper och med hjälp av några extra tillägg kan man få det mycket bättre. Så när jag igår började jobba på en ny kunds webbsida i wordpress började jag med att leta runt bland bloggarna i mitt rss-flöde då jag följer många duktiga utvecklare som delar med sig av sina wordpress tips. Något som är extra viktigt när man skapar en större webbplats är möjligheten att söka för att hitta sin information, och ingen gör det bättre än Google. Jag gillar speciellt googles did-you-mean, eller ”menade du” funktion som med en gång rättar till eventuella felaktigheter i sökfrågan. Inte baserat på något lexikon utan baserat på vad användare faktiskt söker efter, det gör deras funktion så mycket mer flexibel och uppdaterad.

Jag hittade många tips angående hur man förbättrar sök funktionaliteten i wordpress, bland annat tipsar Andras Karman om hur man förbättrar sökfunktionen i wordpress (nere för tillfället) om två väldigt intressanta plugins Search Unleashed och Search Suggest. Search Unleashed förbättrar sökfunktionaliteten i wordpress något avsevärt med mycket fler inställningar och möjlighet att byta sökalgoritm. Jag valde att använda Lucene och det fungerar otroligt bra, hittar till viss del felstavade samt böjningar av ord och det funkar minst lika bra på svenska som engelska. Search Suggest verkade också mycket lovande då den använder Yahoos API för att hitta felstavningar och ord, dock blev jag snabbt besviken. Den hade två stora nackdelar:

  1. Yahoos API fungerade enbart med engelska ord, och även där fungerade det inte lika bra som googles did-you-mean.
  2. När man infogade koden gjorde sökningarna att hela sökresultatet blev segt eftersom det tog en stund att ladda yahoos api.

Jag bestämde mig då för att leta efter en implementation eller ett API mot googles did-you-mean istället, jag trodde att det skulle vara ganska enkelt då google har en ganska öppen policy med massvis av APIer. Men jag lyckades inte hitta något i wordpress katalogen, många använde google search direkt men jag ville enbart ha tillgång till googles rättstavning. Efter lite googlande hittar jag att det faktiskt finns ett SOAP Search API som stödjer Google suggestion med funktionen doSpellingSuggestion. Men min lycka blev inte långvarig då jag snart insåg att Google SOAP Search inte längre ger ut några API-nycklar istället hänvisar de till sitt AJAX Search API och i AJAX Search API finns det ingen möjlighet att använda doSpellingSuggestion eller på något annat sätt då ut googles did-you-mean.

Exempel på hur Google did-you-mean ser ut i wordpressJag bestämde mig då sent igår kväll för att skriva min egen class i PHP för att hämta ut googles föreslagna ord, några timmar senare har jag en första version klar. Jag har tidigare använt CURL för att läsa in andra hemsidor och började därför att försöka läsa in Google.com genom CURL för att få ut googles förslag. Det var inte riktigt lika enkelt då google nu för tiden använder mycket ajax och javascript vilket inte gjorde det möjligt att parsa resultatet direkt. Lyckligtvis hittade jag m.google.com, deras mobila sökplattform och den är fortfarande mer straight forward med ett vanligt GET-anrop för att göra sökningarna. Efter att jag fått tillbaka resultatet från google skapade jag ett simpelt regular expression för att hämta googles did-you-mean, med hjälp av deras css-klassnamn kan jag använda exakt samma kod oavsett vilket språk sökningen är på.

/<div[^>]*spelling_onebox_result[^>]*>.*?<b><i>(.+?)</i></b>.*</div>/

Jag valde att göra en wordpress plugin för att enkelt kunna integrera med nya hemsidor, jag försökte göra det helt med hooks först men efter letat i timmar efter vilken hook att använda så gav jag upp och insåg att less is more och make it work, then beatuifull är två viktiga ledord och valde därför att skriva en simpel funktion (om någon har mer information om hur man hittar rätt hooks, eller vilka hooks man kan använda vid sökningar säg gärna till så kan jag göra en helt automatisk plugin). För att ansluta mot google skrev jag ett kort ajax-script i jQuery för att på så sätt inte göra hela webbsidan seg medan den i bakgrunden hämtar förslag på nya ord. Ifall den hittar något nytt ord så visar den förslaget där man valt att anropa google_suggestion(). I tillfället finns det både på svenska och engelska om man skickar med ”sv” som argument till funktionen, den skriver då ut ”Menade du” istället för ”Did you mean” samt att den använder google.se som sökmotor (dock tror jag inte att det spelar så stor roll vilken domän man använder). För att inkludera i din wordpressblogg anropa bara funktionen där du vill använda googles did-you-mean, förslagsvis ifall du inte hittar några resultat i sökningen men det går lika bra att använda vid en lyckad sökning.

<?php if ( function_exists('google_suggestion') ) { google_suggestion("sv"); } ?>

Fördelen med att använda Google did-you-mean för wordpress är:

  • Enkel integration, installera wordpress pluginen och lägg till en kodrad så fungerar resten automatiskt.
  • Använder googles grymma tjänst ”Menade du” för att hitta felstavningar men fungerar även lika bra på särskrivningar och andra konstigheter.
  • Använder ajax-anrop för att inte göra din blogg långsam.

Både bakgrundslogiken i PHP för att hämta did-you-mean orden från google samt wordpress pluginen är släppt som open source och finns tillgänglig på github, jag tar gärna emot förslag på hur man kan förbättra det. Jag avvaktar med att lägga upp det på wordpress.org, dels vet jag inte om google skulle bli så glada eftersom de själv inte släppt ett eget API, samt att jag gärna vill ge det lite tid för att upptäcka eventuella buggar. Hör gärna av dig ifall du väljer att använda det och hur det fungerar för dig. Jag har för tillfället ingen möjlighet att visa ett demo då bloggen ligger på wordpress.com samt min server idag kör IIS, så för nu får det räcka med bilden men installationen är väldigt enkel så testa gärna själv och jag ska försöka fixa fram ett demo lite längre fram.

För er som letar efter fler tips om hur man anpassar wordpress till ett bättre CMS verktyg rekommenderar jag att ni läser igenom Andreas Karman (hans blogg har inte uppdaterats på länge och ligger för tillfället nere, tyvärr), Niklas Olsson tipsar om bra tillägg vid wordpress som CMS , Nikke Lindqvist har publicerat en lista på alla tillägg han installerat (visserligen en blogg, men listan innehåller många bra tillägg)

Har du något annat livsnödvändigt tips för hur man får ut det mesta från wordpress som CMS?

Utveckling

Anpassad bekräftelse med hjälp av jQuery

Lämna en kommentar

jQuery Easy Confirm Dialog pluginIbland behöver man få bekräftat från besökaren att de verkligen vill utföra åtgärden, det sker i de flesta program genom en standarddialogruta som ber användaren bekräfta med Ja eller Nej. På webben är det inte riktigt lika enkelt, det går att använda den inbyggda javascript funktionen confirm(). Men en hemsidan idag innehåller oftast mycket ajax och dialogrutor,  att en standard popup ruta både bryter layouten och kan bli förvirrande.

När jag behövde en dialogruta för en kunds hemsida började jag leta efter ersättningar till denna standardfunktion. Eftersom vi använder oss utan jQuery för övrig funktionalitet kollade jag naturligtvis efter plugins till jQuery. Med de flesta lösningarna krävde callback funktioner eller var överdrivet krävande. Så jag bestämde mig för att utveckla mig egen plugin jQuery Easy Confirm Dialog, den är som vanligt även tillgänglig på github.

Fördelarna med Easy Confirm Dialog plugin är:

  • Den är väldigt enkelt att integrera, kräver ingen modifikation på övrig kod och inga callbacks
  • Fungerar både på vanliga länkar och jQuery events.
  • Anpassningsbart språk, Svenska och Engelska finns som standard

Allt som krävs är att man binder knapparna/länkarna till easyconfirm(), den tar sedan hand om alla events och utför enbart dessa ifall användaren godkänner.

Exempel på Easy Confirm Dialog plugin

<script type="text/javascript">
$(function() {
  $(".confirm").easyconfirm();
  $("a").click(function() {
    alert("You approved the action");
  });
});</script>
<a href="#" class="confirm">Testlink</a>
Utveckling

Hur cachar man delar av sidan i php för att snabba upp sidvisningar

Lämna en kommentar

För ett nuvarande projekt hade jag behov av att cacha data, men vi använder oss av ett specialskrivet framework och ville inte implementera caching på hela webbplatsen. Istället ville jag ha möjlighet att cacha delar av resultatet för att snabba upp sidvisningen. Anledningen är att jag behöver vissa mycket statistik på startsidan, denna statistik uppdateras inte särskilt, och i det här fallet är det inte så viktigt att datan är helt aktuell.

De krav jag hade när jag började kolla in i problemet är

  • Skall fungera på delar av resultatet (inte spara hela webbplatsen)
  • Resultatet skall sparas till statiska html-filer
  • Resultatet skall skapas när det efterfrågas unikt för varje besökare
  • Så liten påverkan på övrig kod som möjligt

Jag började så klart med att söka runt efter färdiga lösningar och hittade då en tråd på stackoverflow (How do I implement a HTML cache for a PHP site?), de flesta svaren är helt färdiga template system med inbyggd caching men eftersom vi använder ett eget framework och i dagsläget inte har tid att införa detta var det inte aktuellt för mig. Andra möjligheter var att använda proxy cache eller lösningar som Memcache eller APC men webbplatsen skall installeras på ett vanligt webbhotell och jag letade egentligen efter en enklare lösning än dessa.

Istället fastnade jag för PHPs inbyggda funktion för output-buffering vilket gör det möjligt att spara outputdatan i minnet och skriva den till fil för att vid nästa sidvisning läsa den från filen istället.

ob_start();
echo 1+2;
$cache = ob_get_contents();
ob_end_clean();
echo $cache;

Så ser det ut i sin simplaste form, där $cache nu håller datan, i det här fallet "3", som skall sparas. Tjusningen är att den även sparar all output, html kod och allt annat som finns mellan ob_start() och ob_get_content(). För att göra detta så smidigt som möjligt stoppade jag in det i en egen class PartialCache, jag har laddat upp classen i sin helhet på github för den som är intresserad. Här kommer också en kort genomgång och huvudpunkterna. Koden tillhandahålls open source och ”as is”, den behöver säkerligen modifieras lite innan den fungerar för dig.

public function __construct($site, $key, $disable=false)
  {
    if (is_array($key)) {
      $key = implode($key,"_");
    }

    if ($disabled)
      {
	$this->filename = dirname(__FILE__) ."/../cache/". $site ."/". $key .".html";
	$this->site = $site;
	$this->key = $key;
      }
  }

Jag använder mig av mappstrukturen samt filnamnen för att spara cachad data till disk, $site blir mappen och $key filnamnet, har man flera värden man vill skicka med läggs dessa ihop med en linje.

public function is_cached()
  {
    $limit = 60*60*24;
    return file_exists($this->filename) && (time() - $limit) > filemtime($this->filename);
  }

För att kolla ifall datan finns i cachen kontrollerar jag enbart ifall filen finns på disk och i mitt fall att filen inte är mer än 1 dag gammal.

public function start()
  {
    if (!$this->is_cached()) {
      ob_start();
      return true;
    } else {
      return false;
    }
  }
  public function render()
  {

    if ($this->is_cached()) {

      $cache = file_get_contents($this->filename);
      echo $cache;
      echo '<div class="info-box">'
	       . sprintf($this->text,
	                 strftime("%Aen den %e %B kl %H:%M", filemtime($this->filename)))
	. sprintf($this->link, $this->site, $this->key)
	. '</div>';

    } else {
      $cache = ob_get_contents();
      ob_end_clean();

      echo $cache;

      $file = fopen($this->filename, 'w');

      if (is_writable($this->filename)) {
        fwrite($file, $cache);
        fclose($file);
      } else {
        echo '<div class="info-box">Kunde <strong>inte skapa cache</strong>, troligen felaktiga rättigheter på servern. Vänligen kontakta systemadministratören.</div>';
      }

    }
  }

Jag har sedan de två funktionerna start och render, som ifall det inte finns någon cache startar output-buffern och i render sparar denna till fil. Finns den redan i cache retunerar funktionen false vilket indikerar att koden inte behövs köras igen, istället läser render från fil och skriver ut denna. Exempel på hur koden kan användas

<?php
  $cache = new PartialCache("statistics", $userid);
  if ($cache->start()):
?>
<h1>Resultatet</h1>
<p><?php echo $result;<?></p>
<?php
  endif;
  $cache->render();
?>

Så gör man för att enkelt cacha delar av sitt resultat unikt för varje besökare.