Skip to content

Optimisation et modification d'un site WordPress

Pour cette tâche, le client sigma legal, nous à demandé certaines modifications sur leur site WordPress (déjà développé, pas par nous), à savoir :

  • Optimisation des images
  • Mise en place d'un cache
  • Certificat SSL
  • Navigation FR/EN
  • Changement de contenu

Pour ce faire, j'ai commencé par récupérer tous les fichiers du site depuis leur serveur et je l'ai mis en place en local. Ensuite, j'ai fait un test de vitesse et j'ai pu voir certains problèmes d'optimisations, notament concernant les images qui étaient trop grandes par rapport à la taille à la quelle elles étaient affichées. J'ai donc réduit les images à la bonne taille et les ai compréssés à l'aide d'un outil de compression d'images.
Grâce à ça, le site à déjà gagné de la rapidité. Ensuite, j'ai mis en place un cache. Pour cela, j'ai ajouté ces quelques lignes dans le fichier .htaccess : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Browser caching
<IfModule mod_expires.c>
  ExpiresActive On
  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

Ensuite, depuis l'interface d'Infomaniak, j'ai mis en place un certificat SSL, ce qui permet d'avoir un URL sécurisé https://.

Enfin j'ai du effectuer des modifications dans le code php du thème utilisé (en l'occurence Semplice) pour pouvoir gérer une navigation avec 2 langues, le français et l'anglais. Pour ceci j'ai du créer un child theme, qui est un clone du thème actuel, mais avec seulement les fichiers que l'on veux modifier. Cela permet de ne pas perdre les modifications le jour ou le thème est mis-à-jour, car sinon il remplacerai les fichiers modifiés en on perdrait les changements. Une fois le thème créé, j'ai ajouté le code php contenant une logique de double langue (en créant 2 menus WP, et en vérifiant la langue selon l'url de la page) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function my_theme_enqueue_styles() {

    $parent_style = 'semplice-style'; // This is 'semplice-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

// add french and english menu
function register_my_menus() {
    register_nav_menus(
      array(
        'french-menu' => __( 'Français' ),
        'english-menu' => __( 'English' )
      )
    );
}

add_action( 'init', 'register_my_menus' );

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// get last part of the url, to define the language
$fullUrl = $_SERVER['REQUEST_URI'];
$url = explode('/', $fullUrl);
array_pop($url);
$lastPath = explode('-', end($url));

if(isset($menu_style) && $menu_style === 'normal') {

    // diplay menu according to the language
    if (end($lastPath) == 'en') {
        $nav .= '<nav class="standard ' . $standard_menu_font_weight . '">' . wp_nav_menu( array( 'container' => '', 'theme_location' => 'english-menu',  'echo' => 0 ) ) . '</nav>';
    }
    else {
        $nav .= '<nav class="standard ' . $standard_menu_font_weight . '">' . wp_nav_menu( array( 'container' => '', 'theme_location' => 'french-menu',  'echo' => 0 ) ) . '</nav>';
    }
...

Pour finir, j'ai créé l'image d'aperçu du thème, celle que l'on verra quand on choisit le thème dans le menu Apparences de WP.

Semplice ChildTheme Cover