Vi sono due modi per creare una pagina personalizzata indipendente in vBulletin 4, utilizzando un file php esterno o senza, il metodo da utilizzare cambia in base alle necessità del nostro progetto, per spiegare uno dei due metodi, studieremo come integrare la ricerca di Google AdSense nelle nostre pagine.
Per prima cosa procuriamoci i codici del nostro motore di ricerca visitando il menu I miei annunci presente nel vostro pannello di Google AdSense, nel menu ad albero presente sulla sinistra, aprite la voce Ricerca quindi Motori di ricerca personalizzati, per ottenere dei nuovi codici, premete sul pulsante Nuovo motore di ricerca personalizzato, compilate tutte le voci che vi vengono richiesti, alla voce Dove effettuare la ricerca inserite l’indirizzo del sito per il quale state creando il motore di ricerca, quindi completatelo con un bell’asterisco in modo tale che cerchi in tutte le sotto pagine (per esempio: http://www.redfoxy.it/*) e non solo nella principale, per attivare un’altra funzione che può tornare utile, mettete il segno di spunta in Utilizza query frequenti, compilate tutte le altre voci riguardanti le personalizzazioni, in fine andate in Risultati di ricerca e selezionate come Risultati di ricerca la voce sul mio sito web utilizzando iframe, nella casella di testo inserite l’indirizzo al vostro sito completando con misc.php (per esempio, per http://www.furryitalia.it dovete inserire http://www.furryitalia.it/misc.php ), le altre impostazioni presenti potete personalizzarle come meglio ritenete per il vostro sito, a questo punto cliccate sul tasto Salva e ottieni il codice e vi verrà presentata una pagina con tre caselle di testo (se non avete attivato Utilizza query frequenti ve ne verranno mostrate solo 2), non chiudete la pagina, che ci serviranno tutte e 3.
Nota: Seguendo più o meno la stessa procedura, potete utilizzare anche il CSE di Google per ottenere un motore di ricerca, anche se in questo articolo continueremo a utilizzare come esempio la versione di Google AdSense.
Google AdSense: Ecco i codici del motore di ricerca
Ora abbiamo i codici che ci servono, dobbiamo preparare una nuova pagina nei nostri forum vBulletin 4.x, per farlo dobbiamo collegarci al Pannello di controllo dell’amministratore, andate nella sezione Styles & Templates e cliccate su Style Manager, sulla destra vi verranno mostrati i temi che avete installato nel vostro forum, cliccate nel menu a tendina corrispondente al tema nel quale creare la pagina di ricerca e scegliete la voce Add New Template, vi verrà presentata una pagina vuota con tre caselle di testo, un menu a tendia che indica in quale tema verrà salvata la pagina e qualche pulsante che non ci interessa per le operazioni che andremo a eseguire.
Per prima cosa, diamo un titolo, Title, a questa pagina, inserendo nella prima casella di testo un nome che inizia obbligatoriamente con custom_ seguito dal nome da quello che desiderate, in questo esempio utilizzeremo custom_Ricerca.
Dato il nome alla pagina, copiate il seguente codice html nella casella di testo più grande, di nome Template:
[html]{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
<title>{vb:raw vboptions.bbtitle} – Risultati della ricerca</title>
{vb:raw headinclude}
</head>
<body>
{vb:raw header}
{vb:raw navbar}
<h2 class="blockhead">Ricerca</h2>
<div class="blockbody">
<div class="blockrow">
<!– ————- Codice della casella di ricerca ————- –>
</div>
</div>
<br />
<h2 class="blockhead">Risultato ricerca</h2>
<div class="blockbody">
<div class="blockrow">
<!– ————- Codice risultati di ricerca ————- –>
</div>
</div>
<br />
<h2 class="blockhead">Ricerche recenti</h2>
<div class="blockbody">
<div class="blockrow">
<!– ————- Codice query più frequenti ————- –>
</div>
</div>
<br />
{vb:raw footer}
</body>
</html>
[/html]
Fatto questo, sostituite i commenti che ho messo nel codice con i codici forniti da Google, nel caso del Codice della casella di ricerca dovremo fare una piccola modifica al codice, aggiungendo le seguenti due righe prima di :
[html]
<input type="hidden" name="do" value="page" />
<input type="hidden" name="template" value="Ricerca" />
[/html]
Fate bene attenzione alla fine della seconda riga, in quanto nel campo value bisogna inserire il nome della pagina che stiamo creando, senza inserire il prefisso custom_, non dimenticatevi di inserirle e ponete molta attenzione al nome della pagina, per evitare di uscire pazzi in seguito per capire cosa non funziona correttamente, premete il stato Salva in basso al centro e avremo concluso questa parte della creazione.
Abbiamo praticamente finito! Possiamo provare subito la paggina che abbiamo appena creato visitando il vostro sito seguito da /misc.php?do=page&template=Ricerca (Esempio: http://www.furryitalia.it/misc.php?do=page&template=Ricerca), se avete seguito correttamente tutte le istruzioni, vi verrà mostrata una pagina del vostro forum con una riga dove potrete inserire del testo per effettuare una ricerca, provatelo, e se avrete fatto tutto correttamente, la pagina si ricaricherà mostrandovi i risultati.
Cosa ci rimane da fare se non sostituire la vecchia barra di ricerca presente in tutte le pagine con la ricerca di Google?
Per prima cosa cliccate due volte sul Template chiamato navbar dopo che avrete espanso l’albero dei template premendo sul tasto « », vi si presenterà una situazione simile a quella di prima, solo che questa volta tutti, o quasi, i campi sono già compilati, cercate il seguente codice nella casella di testo più grande, lo troverete verso i tre quarti della casella:
[html]
<div id="globalsearch" class="globalsearch">
<form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
<vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="process" />
<span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span>
<span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar[‘textdirection’] == ‘rtl’">_rtl</vb:if>.<vb:if condition="(is_browser(‘ie’) AND !is_browser(‘ie’, 7) AND !is_browser(‘ie’, 8))">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById(‘navbar_search’).submit;" tabindex="100"/></span></span>
</form>
[/html]
Ora che lo avete trovato, cancellatelo!
Lo sostituiremo con l’unione del codice che abbiamo scritto per la pagina precedente e parte del codice che abbiamo cancellato, per venirvi incontro e sbrigarci prima, ho preparato il codice che dovete inserire al posto di quello precedente, dovete solo fare attenzione a cambiare i valori nella riga