// Implementatie van Google Custom Search op deze website
// Implementatie van Google Custom Search op deze website
Google Custom Search heeft zichzelf al bewezen op meerdere website. Volgens verschillende bronnen zorgt de integratie ervoor dat de website “beter” geïndexeerd zal worden door Google. Het is immers in het voordeel van Google om de pagina’s zo correct mogelijk te kunnen doorzoeken. Ook al is de standaard zoekmachine binnen Wordpress krachtig, toch wil ik de switch maken. Hier kan je lezen hoe dat voor mij in zijn werk ging.
Registratie van de zoekfunctie
De eerste stap die je moet zetten, is het registreren van een Google “Custom Search Engine”. Hiervoor kan je terecht op www.google.com/cse met een Google account. Heb je geen google account? Dan kan je daar ook onmiddellijk registreren.
Loop door de kinderlijk eenvoudige interface om je “custom search” op te bouwen. Door de verschillende pagina’s kan je hier bijvoorbeeld instellen welke pagina’s van je site doorzocht moeten worden (het volledige domein? Enkele een aantal vaste onderdelen? Enkele pagina’s?), hoe de pagina er moet uitzien (keuze uit enkele templates), waar de zoekresultaten moeten komen, …
De code
Zodra je tevreden bent met de code (je kan steeds een “preview” doen hoe de resultaten er zouden uitzien met de gemaakte instellingen) kan je de code laten aanmaken. Die verkrijg je via de link “Get code”.
Maak een pagina aan binnen Wordpress (in dit geval “Zoekresultaten”) en voeg daar een custom field aan toe (in dit geval “PageType” met als waarde “ZOEKEN”). Je kan deze pagina uit de automatische lijsten weren door middel van de exclude of include functies.
De URL van deze pagina heb je nodig om de Google code aan te maken. Geef de URL in en kies waar de advertenties mogen geplaatst worden. Google geeft je nu 2 codes:
Search box code
De search box code heeft ongeveer volgende vorm:
<form action="" id="cse-search-box"> <div> <input type="hidden" name="cx" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Zoeken" /> </div> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=nl"></script>
Ga in Wordpress naar Weergave > Bewerken, en kies daar de template “Koptekst (header.php)”. Zoek in de HTML code naar het formulier om te zoeken en vervang of vul aan. Bovenstaande code van Google heb ik herschreven om beter te passen, naar:
<div id="searchbox"> <div id="searchcontent"> <form action="http://www.lepouttre.be/zoekresultaten/" id="cse-search-box"> <input type="hidden" name="cx" value="018295088826771564515:smyesokfcfi" /> <input type="hidden" name="cof" value="FORID:9" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" value="" /> <input type="submit" name="sa" value="zoeken" /> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=nl"></script> </div> </div>
Klik op “Bestand bijwerken”.
Search result code
De search result code heeft ongeveer volgende vorm:
<div id="cse-search-results"></div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 600; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
Ga in Wordpress naar Weergave > Bewerken, en kies daar de template “Paginasjabloon (page.php)”. Zoek een gepaste locatie om de zoekresultaten weer te geven, en kopieer volgende code:
<?php
$page_type = get_post_meta($post->ID, 'PageType', true);
if ($page_type) {
generatePageContent($page_type);
}
?>
Klik op “Bestand bijwerken”.
Kies vervolgens de template “Themafuncties (functions.php)”. Voeg volgende functie toe in de PHP code:
function generatePageContent($pageType) {
if ( $pageType == "ZOEKEN") {
?>
<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 690;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
<?php
}
}
Klik op “Bestand bijwerken”.
Wat doet deze functie?
In de page.php template beslis je dat elke pagina met een ingevulde pageType als custom field, de functie generatePageContent moet uitvoeren, met als parameter de waarde van pageType. In dit geval “ZOEKEN”.
In de functie generatePageContent wordt vervolgens de correcte code ingevuld.
Als laatste “finetuning” heb ik de width van de iframe aangepast door volgende regel aan de CSS toe te voegen:
#cse-search-results iframe {width: 690px; }
Let wel: deze integratie is louter afgestemd op mijn installatie van Wordpress. Deze installatie is lichtjes aangepast naar mijn wensen. Je kan dan ook moeilijk spreken van een “standaard” installatie van Google Custom Search. Wil je toch een standaard antwoord, dan ben ik er van overtuigd dat het Wordpress forum meer hulp kan bieden.