Afficher la SERP de Google dans votre site Joomal 3

Le fichier default.php

Pour commencer, nous allons légèrement customiser l'affichage du titre de la page (simple question de goûts personnels). Attention, les classes CSS sont ici propres à Bootstrap 4. Si votre template n'utilise pas ce framework, vous devez adaptez les classes CSS à votre cas.

Nous remplaçons :

<h1 class="page-title">

par :

<h1 class="h2 py-3 page-title">

Concrétement, on applique une classe H2 au titre H1 et on ajoute un peu de padding pour aérer l'affichage.

Ensuite, nous allons ajouter une <div> pour que les résultats affichés soient un peu moins larges que le champ de recherche (là aussi, c'est une modification purement esthétique).

Nous remplaçons :

	<?php if ($this->error == null && count($this->results) > 0) : ?>
	<?php echo $this->loadTemplate('results'); ?>
	<?php else : ?>
	<?php echo $this->loadTemplate('error'); ?>
	<?php endif; ?>

Par :

	<?php if ($this->error == null && count($this->results) > 0) : ?>
	<div class="px-4 mx-4">
	<?php echo $this->loadTemplate('results'); ?>
	<?php else : ?>
	<?php echo $this->loadTemplate('error'); ?>
	</div>
	<?php endif; ?>

Concrétement, on ajoute les classes px-4 et mx-4 pour avoir du padding et du margin à gauche et à droite de cette <div>.

Enregistrez votre travail !

Le fichier default_form.php

Pour faire simple, nous ne gardons que le champ de recherche et le bouton. Pour supprimer tout le reste, nous allons commenter la quasi totalité de ce code car nous n'avons pas besoin d'afficher les options de recherche de Joomla. Il est aussi possible d'effacer tout ce qui n'est pas utile mais c'est une méthode qui a l'inconvénient de n'offrir aucune possibilité de retour en arrière. Aussi, je préfère commenter pour me garder cette possibilité.

Pour ce faire, nous ajoutons <!-- au début de la ligne 35 et nous ajoutons --> à la fin de la ligne 82. Ainsi, tout le code contenu entre ces deux signes ne sera pas interprété.

Enregistrez votre travail !

Le fichier default_results.php

C'est ici que nous avons le plus de travail pour que notre page de résultats de Joomla ressemble à celle de Google.

Comme les résultats de Google ne sont pas numérotés, nous allons commenter toute la ligne 16 pour supprimer la numérotation des articles.

<!--<?php echo $this->pagination->limitstart + $result->count . '. '; ?>-->

Ensuite, nous devons afficher l'URL complète de l'article à la place de la catégorie. Pour ce faire, nous remplaçons :

<?php if ($result->section) : ?>
		<dd class="result-category">
			<span class="small<?php echo $this->pageclass_sfx; ?>">
				(<?php echo $this->escape($result->section); ?>)
			</span>
		</dd>
	<?php endif; ?>

par :

<?php if ($result->section) : ?>
		<dd class="result-category">
			<span class="teal-text small">
      			  www.web-eau.net<?php echo JRoute::_($result->href); ?>                 
    		</span>
		</dd>
	<?php endif; ?>

J'ai ajouté la classe CSS teal-text afin de colorer en vert le lien, comme sur la page de résultats de Google.
Naturellement, vous adapterez ce code à votre nom de domaine.

Maintentant, nous devons ajouter la date de création de l'article et l'intro du texte de l'article. Pour cela, nous modifions la partie suivante :

<dd class="result-text">
		<?php echo $result->text; ?>
	</dd>
	<?php if ($this->params->get('show_date')) : ?>
		<dd class="result-created<?php echo $this->pageclass_sfx; ?>">
			<?php echo JText::sprintf('JGLOBAL_CREATED_DATE_ON', $result->created); ?>
		</dd>
	<?php endif; ?>

par :

<dd class="result-text small">
		<span class="text-muted"><?php echo $result->created; ?></span> - <?php echo $result->text; ?>
	</dd>

Vous noterez la classe CSS small qui est ajoutée à la balise <dd> afin de réduire la date et le texte d'intro de l'article.

Enregistrez votre travail !

Je tiens ici à saluer publiquement Alexandre Elisé pour son coup de main sur cette partie : merci de m'avoir aidé, Alex ;)