I dom allra flesta teman som släpps, särskilt premiumteman, brukar sökfunktionen som ingår se rätt snygg ut. I wordpresstemat som jag använder här (Thesis) så ser väl sökfunktionen helt okej ut men jag ville ändå göra en egen variant som passar det utseende jag har här. Så här kommer en liten tutorial hur man själv kan snygga till wordpress sökfunktion.

Sökfunktionen i WordPress – Koden vi behöver

För att göra en egen anpassad sökfunktion behöver vi först få fatt i rätt kod. WordPress har en standardkord som du hittar i codex som jag visar här nedan. Det är denna som vi kommer att jobba med och fixa lite bilder, css, javascript och en bling bling (om du vill) i form av en jQuery funktion som heter autoComplete().

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  <div>
    <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form>

Här kan följande förklaringar angående koden göras:

• Taggen form anger att här skall det komma formulär och det anges metoden get som skickar in något i adressfältet i webbläsare.
• WordPress funktionen bloginfo(); skickar ut din bloggs adress
• Default anges namnet ”s” och css id:et ”s” och vanligt är att det finns färdig css i wordpresstemat så att sökfunktionen för en snygg design. Men vi skall krångla till det lite och fixa ny design istället. 🙂
• För att denna kod skall kunna fungera måste du placera den någonstans där php tillåts

Designa om sökfunktionen i 3 steg

Jag kommer att visa exakt hur du själv kan designa om din sökfunktion i tre steg, vi kommer först att lägga till ett nytt css id, sedan koppla på bilder och css till detta id och slutligen lägga till ett enkelt javascript. Så hey ho, lets go.

1. Lägga till det nya css id:et ”my-search”

För att vi skall kunna anpassa vår sökfunktion måste vi lägga in en divtagg utanför själva sökfunktionen så att vi kan anpassa formulären innanför. Css klasser och id:n ärver egenskapar av varandra så det går att göra flera olika designmallar för detta så länge man har något ”utanför” som anger att här skall det se annorlunda ut.

Så i den divtagg som tidigare låg odefinierad lägger vi nu istället till id:et ”my-search”. Vi lägger även in ett javascript onfocus som tar bort vårt default value (”sök på denna blogg”) när vi klickar i textrutan men mer om det nedan, så här ser nu koden ut:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  <div id="my-search">
    <input type="text" onfocus="if (this.value == 'Sök på denna blogg') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Sök på denna blogg';}" value="Sök på denna blogg" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="" />
  </div>
</form>

Sedan kan vi inom denna definiera följande divtaggar som du behöver lägga i din css fil:

#my-search {}
#my-search input#s {}
#my-search input#searchsubmit {}
#my-search input#searchsubmit:hover {}

2. Designa my-search och lägga till bilder i stilmallen (css:en)

När vi är klara kommer sökfunktionen att se ut så här:

Då har jag använt följande bild som bakgrund för själva sökknappen och css:en jag själv gjorde och som du kan modifiera är följande:

#my-search {
    border: 1px solid #1F67B8;
    display: inline-block;
}
#my-search input#s {
    background: none repeat scroll 0 0 #E0E5EA;
    color: #1466C3;
    float: left;
    font-style: italic;
    height: 20px;
    margin: 0;
    padding: 5px;
    width: 170px;
}
#my-search input#searchsubmit {
    background: url("din-bild-url") repeat scroll 0 0 transparent;
    cursor: pointer;
    float: left;
    height: 32px;
    width: 32px;
}
#my-search input#searchsubmit:hover {
    background: url("din-bild-url") repeat scroll 0 0 transparent;
    float: left;
    height: 32px;
    width: 32px;
    opacity: 0.7;
}

3. Koppla på ett javascript och kanske lite jQuery

Som nämns ovan i denna tutorial så lägger jag till det enkla javascriptet onfocos på textrutan för att kunna skriva vad man skall kunna göra i själva sökfunktionen. Detta nöjer jag mig med. Om du vill så kan du även lägga till ett plugin för att köra autocomplete() alla google sökfunktion. Dvs säga att du nedanför sökfunktionen får förslag på tex inlägg eller taggar som bloggen har producerat. De två inlägg som jag har testat för detta är det här eller det här. Bägge fungerar fast med lite olika design. För ändamålet används då jQuery’s javascriptbibliotek.

Hoppas nu att denna guide att snygga till sökfunktionen i wordpress inte har varit alltför krånglig och att det hjälper dig att blinga till din blogg!

Läs också:

• Css listor
• Fixa textdesignen