Sur un site j'utilise CodeIgniter et un plug in jQuery pour la navigation (sans recharger tout le contenu).
La navigation comme ça c'est bien mais ça ne fonctionne pas partout et pour le référencement c'est pas terrible.
Donc je vais vous expliquer les différentes modifications que j'ai fait dans mon code source de base pour pouvoir référencer correctement le site avec la navigation en "AJAX".
Dans un premier temps j'ai utiliser le Framework PHP CodeIgniter : http://www.codeigniter.com
Ensuite j'ai téléchargé la librairie jQuery : http://www.jQuery.com ainsi que le plugin jQuery.History disponible ici : http://www.mikage.to/jquery/jquery_history.html
Par défaut les adresses de Code Igniter sont du genre : /index.php/class/méthode etc... ce qui est vraiment pas optimum pour le référencement j'ai donc décidé de supprimer le "index.php/" pour cela j'utilise un fichier .htaccess avec les paramètres suivants :
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php?/$1 [L]
Ce qui me permet d'avoir : /accueil/login à la place de : /index.php/accueil/login
Ou d'avoir /accueil à la place de : /index.php/accueil
J'ai créer dans /application/controllers un contrôleur que j'ai nommé "page". Ce contrôleur appellera la page demandé avec un header et un footer.
class Page extends Controller {
function Page()
{
parent::Controller();
}
function index()
{
// Charge la page : /application/views/accueil.php
$data['main_content'] = 'accueil';
$this->load->view('includes/template', $data);
}
function contact()
{
// Charge la page : /application/views/contact.php
$data['main_content'] = 'contact';
$this->load->view('includes/template', $data);
}
}
Ensuite dans le dossier /application/views j'ai un dossier "includes" qui contient :
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
template.php
// Header du site
<?php $this->load->view('includes/header'); ?>
// Vue chargé par la variable $main_content
<?php $this->load->view($main_content); ?>
// Footer du site
<?php $this->load->view('includes/footer'); ?>
footer.php
</body>
</html>
Ajouter dans votre htaccess une ligne par page que vous voulez créer à noté on appel toujours "page" qui est notre contrôleur et "accueil" qui est notre méthode
RewriteRule ^accueil$ /index.php/page/accueil/ [L]
RewriteRule ^contact$ /index.php/page/contact/ [L]
Donc on peut créer un menu dans /application/views/includes/header.php
<div id="navigation">
<ul>
<li><a href="/accueil">Accueil</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
Ce menu fonctionnera parfaitement avec tous les navigateurs par contre il rechargera a chaque fois tous les éléments : header.php template.php et footer.php
Pour ne pas recharger a chaque fois tous les éléments on peut utilise le plugin jQuery.History. Ce plug in fonctionne avec des liens avec l'attribut rel="history" et avec des ancres donc des liens avec des #page etc...
J'ai donc fait un petit code en jQuery qui modifie le menu précédent par le code :
<div id="navigation">
<ul>
<li><a rel="history" href="#accueil">Accueil</a></li>
<li><a rel="history" href="#contact">Contact</a></li>
</ul>
</div>
Le script jQuery qui permet de modifier le menu a la volée est le suivant :
$(document).ready(function() {
/* Pour chaque element a qui se trouve dans un li dans un ul dans un element id="navigation" */
$("#navigation ul li a").each(function(){
/* On recupere le href et on coupe le slash */
var ancre = $(this).attr("href").split('/');
/* On ajoute l'attribut rel avec la valeur history */
$(this).attr("rel","history");
/* On modifie l'attribut href par le nouveau avec le # a la place du slash */
$(this).attr("href","#" + ancre[1]);
});
});
Si le navigateur accepte jQuery et le Javascript alors les liens seront de la forme #lien et chargé grâce au plugin jQuery History sinon les liens seront de la forme /lien
A l'an prochain bon réveillon