http://beta.lepouttre.be

Geen bloed, zweet en tranen, maar gevloek en een hoopje frustratie. Maar uiteindelijk is alles (al bij al) goed gekomen. Wordpress in verbinding met Coppermine. Geen sinecure. But it works.
Allen daarheen!

ps: de URL zal (na de geboorte uiteraard) nog wijzigen, naar voornaam.lepouttre.be

Hoe gaat alles, theoretisch, in zijn werk?
Lees er meer over in de presentatie van Stefan Koopmandschap of in de video van  Hamid Shojaee op YouTube.

En de praktijk? Die kan je hier, als alles goed verloopt, volgen in de toekomst!

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 code nodig om het zoekveld aan te maken (waar je met andere woorden je zoekterm ingeeft)
• Search result code : de code om de zoekresultaten weer te geven

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.

Just like many people that work in the internet business I spend most of my day on line. Unlike what many people think, all the things I ever did with the internet are scattered all around the place. There’s no coherence. There’s no unison, no central storage of everything that’s “Thomas Lepouttre“. This website should change that. Should…

This website will never be ready and constantly evolve into “something else“. This time I will be playing some with existing plugins and themes. Next time I’ll put some effort in creating a theme on my own. We’ll see.