CSS : améliorer la page d’accueil de son site web

Pour apprendre l’utilisation des styles CSS, le mieux est je pense de passer par la pratique sur des cas concrets. Voici donc un cas concret, l’amélioration de la page d’accueil (homepage) de mon site web perso sur lequel vous êtes en ce moment : ericmurat.com

Contexte

  • Mon site perso est réalisé sous WordPress, mon thème est le thème Sparkling de ColorLib.
  • Pour le cas de cet article, il s’agit juste d’améliorer la présentation de la page d’accueil, pas le contenu. On va donc essentiellement agir sur les propriétés CSS.
  • Normalement, pour bien faire il faudrait tester la visualisation obtenue sur plusieurs navigateurs différents : Chrome, Firefox, Internet Explorer etc… Mais bon, il s’agit juste de mon site perso, je me limiterai donc à 2 items de visualisation : le navigateur Chrome, et une visualisation « smartphone ».
  • Il y a 50.000 façons d’améliorer une page web, ma façon sera basée sur l’utilisation des outils développeurs du navigateur Chrome : Chrome DevTools.

Objectif

Bon, maintenant que je vous ai présenté le contexte, je vais préciser un peu de quoi je parle quand je dis « améliorer ma homepage ». Comme des images valent mieux qu’un long discours, voilà en fait je veux passer de ça :


Desktop Mobile

à ça :

Desktop Mobile

Qui est quand même, reconnaissez le, une homepage plus sexy !  🙂

Réalisation

Passons maintenant à la partie réalisation, voilà comment j’ai procédé pour arriver à mon objectif : j’ai résolu pas à pas les problèmes suivants :

Ne pas afficher la barre latérale droite (sidebar)

–> Modification de la propriété « Modèle » des attributs de la page : « Full-width(no sidebar) »

2016-05-29_Propriete-full_width

Afficher l’image principale en pleine largeur (Full width)

Après recherche sur internet, voici l’article que j’ai trouvé : full width homepage – ColorLib

Je modifie donc comme indiqué le fichier style.css correspondant au custom CSS du thème :

  • Apparence \ Personnaliser \ Sparkling Options \ Autres \ CSS personnalisé :
.home .post-inner-content {
 border: none; 
}

 @media (min-width: 1200px) {
 .home .container {
  width: 100%; 
 }
}

 .home .post-inner-content {
 padding: 0; 
}

Résolution de petits défauts

L’application du CSS à l’étape précédente donne ceci :
Css-Homepage_05
C’est pas mal, mais il reste quelques ajustements à faire pour que l’image prenne vraiment toute la largeur. J’inspecte donc les propriétés de l’élément à l’aide des outils de développement fournis par Chrome :

  • Bouton Menu \ Plus d’outils \ Outils de développement (raccourci clavier : CTRL + SHIFT + I)

J’essaie de trouver le plus « haut » élément au sein de la balise <body> pouvant poser un problème au niveau des marges ou du padding, et je m’aperçois que l’élément « main-content-area » doit être ajusté :
Css-Homepage_06
En vert apparait le padding indésirable :
Css-Homepage_07
Et en orange apparaissent les marges indésirables :
Css-Homepage_08
Je rajoute donc à mon Custom CSS le code suivant pour adapter ces problèmes :

.home .main-content-area {
width: 100%;
padding: 0px;
margin: 0px;
}

Ah au passage pourquoi « .home .main-content-area » ?
Ceci s’appelle l’emboîtement de propriétés CSS, cette notation est utilisée pour indiquer que le style doit s’appliquer aux éléments de classe « home » <strong>ET</strong> aux éléments de classe « main-content-area ». On évite ainsi d’appliquer ce style aux autres pages du site car je ne veux modifier QUE la page d’accueil.
Pour plus d’informations, voir l’article : Héritages et cascades en CSS

Problème avec la scrollbar horizontale

La modification précédente donne ça :
Css-Homepage_09
On s’aperçoit qu’il y a un souci avec l’élément « row » au sein du « main-content-area » qui cré un décalage et fait apparaître une scrollbar horizontale indésirable.
Essayons de corriger cela en rajoutant ceci :

.home .row {
margin-right: 0px;
margin-left: 0px;
}

Encore des ajustements

Suite aux modifs précédentes, on obtient ceci :
Css-Homepage_10
C’est maintenant l’élément « main-content-inner » qu’il faut adapter :

.home .main-content-inner {
padding: 0px;
}

Un test rapide montre qu’il faut aussi adapter « post-inner-content » :

.home .post-inner-content {
border: 1px solid #1F1F1F;
padding: 0px;
background-color:#1F1F1F;
}

Vérification qu’il n’y ai pas de modifications superflues

Au final voilà ce qu’on obtiens :
Css-Homepage_11
On pourrait s’arrêter là, mais je rajoute une petite étape permettant de vérifier que l’on n’ai pas modifié trop de chose.
Pour faire ça, il faut

  • sélectionner un élément dont on a modifié les propriétés dans la partie gauche de l’onglet DevTools (élément « row pull-left » dans l’image ci-dessus)
  • jouer avec les cases à cocher apparaissant devant les propriétés dans la partie droite de l’onglet DevTools (propriétés « margin-right » et « margin-left » de l’image ci-dessus)

Normalement, chaque décochage doit entraîner un affichage dégradé, sinon cela veut dire que la modification de la propriété n’était pas nécessaire.

Pour plus d’infos sur l’utilisation de Chrome DevTools, voir : Chrome DevTools Overview

La feuille CSS finale

Conclusion

Voilà, évidemment il y a plein d’autres choses à faire pour avoir une jolie page d’accueil, mais vous venez de voir ma méthode que j’ai utilisé sur la page d’accueil de mon site avec chaque étape détaillée. Et vous, quelle est votre méthode pour améliorer votre page d’accueil ? N’hésitez pas à laisser un petit commentaire ci-dessous !  🙂

Lecture du livre « Head First HTML »

Lecture du livre Head First HTML

Référence du livre : Head First HTML and CSS, 2nd Edition (O’Reilly Media – 2012)

Cet article sera enrichi au fur et à mesure de la lecture. Je vais noter les points qui me semblent les plus importants pour moi. Je vais également jouer le jeu du livre en faisant les exercices demandés, en répondant aux questions, etc… C’est parti !

–> Lecture jusqu’à page 23

  • Structure générale d’un fichier HTML

Présentation des balises <html>, <head>, <title>, <body>, <h1>, <h2>, <p>

Exercice page 27 : http://codepen.io/Arkhus/pen/QNPPzV

  • Structure d’un élément HTML

Dev-Html-Livre-HeadFirst-struct-element

–> Lecture jusqu’à page 27

Exercice page 30 : http://codepen.io/Arkhus/pen/WwWWWg

Ajout de style dans le fichier HTML à l’aide des balises <style type= »text/css »> xxx </style> insérées dans la partie entête (<head>).

Exercice page 32 :

Dev-Html-Livre-HeadFirst-p32-questions

(hors livre)Exercice sur l’intégration d’une police Google : http://codepen.io/Arkhus/pen/MyNxLy

Visualisateur de Google Font : https://www.google.com/fonts

–> Arrêt page 32 <–

 

Power Toggles : l’application qui déchire !

Vous avez déjà cherché une façon rapide d’activer les données mobiles de votre smartphone sous Android Lollipop ? Vous avez galéré ? Ben oui, c’est normal  🙂 Mais grâce à moi, vous voilà sauvé, j’ai trouvé la solution magique : l’application Power Toggles !

Après avoir essayé :

Rien n’y fait, toujours impossible d’activer les données mobiles en 1 clic…

Prostré dans un coin de votre appartement, vous pleurez à chaudes larmes, car oui, c’est un vrai drame ! Certes, vous pouvez activer les données mobiles de manière classique sous CyanogenMod : swipe vertical + touche barre du haut + touche icône du réseau mobile (Free pour ma part) + touche sur le bouton Données mobiles. Mais on est bien d’accord : 4 actions pour activer les données mobiles, c’est beaucoup trop pour le geek que vous êtes, c’est inadmissible. D’ailleurs comme vous m’avez énervé, vous devez immédiatement aller brûler un poster de Justin Bieber en psalmodiant des incantations impies.

Après des semaines d’agonie, votre monde est sur le point de s’écrouler, toujours aucune solution à l’horizon. Tadaaam ! Je viens vous sauver dans un rayon de lumière divine, voici l’application qu’il vous faut :

PowerToggles_2016-01-08_220956

Vous l’installez, hop vous collez le widget sur votre page, hop vous customisez votre barre de raccourcis en y collant le Toggle « Données mobiles ».

Ca y est, vous pouvez désormais activer/désactiver les données mobiles sur votre smartphone en 1 seul clic !

Merci qui ?   🙂

N’hésitez pas à laisser un petit commentaire, ça fait toujours plaisir  :p

 

J’ai installé CyanogenMod 12.1 sur mon Galaxy S2

CyanogenMod : vous en avez sans doute déjà entendu parler, vous savez ce fameux système d’exploitation pour smartphone optimisé par une communauté de développeurs fous furieux.

DevAndroid_Logo-cyanogenmod

Bon, et bien, j’ai franchi le pas et j’ai installé la version 12.1 de CyanogenMod sur mon vieux (enfin, il date de 2011 tout est relatif) Samsung Galaxy S2.

Pourquoi installer CyanogenMod 12.1

Comme on va le voir ci-dessous, l’installation n’est pas une simple formalité, c’est parfois même un peu touchy vu que lors de certaines phases on peut bricker le téléphone et donc le rendre totalement inutilisable. Pour ma part, les points m’ayant incités à installer CyanongenMod sont :

  • Mon S2 (je vais dire « S2 » pour éviter de dire « Samsung Galaxy S2 GT-I9100 » qui est un poil trop long à lire et chiant à taper aussi  :p) était devenu quasiment inutilisable. J’avais des messages d’erreurs du type « le processus phone.gapps.. s’est arrêté » toutes les 15 secondes. J’avais essayé plusieurs méthodes de nettoyage/réinstall des applis google sans résultat.
  • Les applis Samsung préinstallés (du genre Samsung Backup, Samsung Store, etc…) me bouffaient des ressources pour rien, et impossible de les enlever. Idem pour les applis Bouygues, totalement inutiles mais impossibles à enlever.
  • Gestion de la batterie calamiteuse. C’est lié au points précédents, mais dans les faits la batterie se vidait très rapidement, surtout dès l’activation du Wifi
  • Enfin, petite envie de remettre mon S2 à jour  🙂  Déjà, je l’avais passé en Android 4.1.2 (Jelly Bean), mais bon, depuis il y a eu Android 5 (Lollipop) et il y aura bientôt Android 6 (Marshmallow). La version 12.1 de CyanogenMod étant basé sur Android 5.1, c’était pour moi très intéressant.

Comment ça s’est passé ? La préparation

Bon, je viens de vous dire pourquoi j’ai voulu installé CyanogenMod 12.1, on va maintenant rentrer dans le vif du sujet, à savoir comment j’ai fait.

Sauvegarde des contacts, SMS/MMS et autres

1ère étape, à ne surtout pas négliger : la sauvegarde !

Pour ma part voici comment j’ai fait :

  • Pour la sauvegarde des contacts : utilisation de Google Contacts. En fait, j’avais déjà anticipé cette étape récemment en passant tous mes contacts de mon S2 sur Google Contacts (applis liée à GMail).Les avantages d’utiliser Google Contacts sont dans ce cas très pratiques : 1) je peux les retrouver facilement sur n’importe quel PC, et 2) lors d’une réinstall du téléphone, je les récupères très facilement.
  • Pour la sauvegarde des SMS/MMS : utilisation de l’application SMS Backup & Restore. Cette application génère un fichier .xml comprenant tous les messages. J’ai donc copié tous mes messages sur mon PC pour les récupérer ensuite sur le nouveau système d’exploitation.
  • Pour les musiques, vidéos et e-books : je n’ai rien eu à faire à cette étape grâce à mon organisation. En effet, je stocke ces fichiers sur la carte SD externe de mon S2, et comme la réinstallation du téléphone ne reformate pas la carte SD externe, nickel, rien à faire ! 🙂

Trouver les bons tutos

Pour cette étape, j’ai cherché via Google et Youtube. Sachant que je souhaitais :

  • si possible un tuto pour mon S2, à savoir le Samsung Galaxy S2 GT-I9100
  • si possible un tuto pour une version la plus récente possible de CyanogenMod, la version 12.1

Au fait, pourquoi la version 12.1 ?

Ben, ça, ça vient du site de CyanogenMod qui tient une liste de compatibilité des version de CyanogenMod par rapport à son smartphone, par exemple pour moi : https://download.cyanogenmod.org/?device=i9100 montre que la version 12.1, c’est le top pour mon S2.

Bref, 2 tutos sont sortis du lot :

Le tuto de Mobile Network Comparison


Super détaillé, avec toutes les étapes bien expliquées. Et avec le gros avantage d’avoir exactement le même contexte initial que moi, à savoir :

Un Galaxy S2 GT-I9100, avec une version d’android 4.1.2

Inconvénient : un tuto un peu daté car à la fin de l’install, le S2 fini avec CyanogenMod 10.2 et android 4.3

Le tuto de Android Savior


Nettement moins détaillé : en fait, c’est un peu une démo : l’auteur se filme en train de faire les différentes étapes avec une musique en fond sonore. Du coup, pas trop conseillée pour les débutants… Avec en plus d’autres inconvénients :

  • pas le même smartphone, ici pas de S2 (mais un modèle proche)
  • pas le même android : de mémoire il part d’un android 4.4 (KitKat)

Mais gros avantages, il termine avec :

  • CyanogenMod 12.1
  • android 5.1

Pile-poil ce que je veux !  🙂

L’installation

Yoplà, c’est parti :

  • install de Odin v3.07 sur le PC … check!
  • cable USB pour relier le S2 au PC … check!

Go go go !

1ère install : tuto de Mobile Network Comparison + package CyanogenMod 12.1

Chaud comme une bouillote, je me suis dit que j’allais utilisé le tuto le plus détaillé en modifiant un juste le package CyanogenMod à installer.

Ben, … fail !

Résultat, S2 HS !

DevAndroid_Recovery-fail

2ème install : tuto de Mobile Network Comparison, pur

Bon, mon S2 en rade, pas le choix, je re-flash le Kernel grâce à Odin, et je suis à la lettre les étapes.

Yes! Ca marche ! Tout est nickel, mais… mon S2 est en CyanogenMod 10.2 et android 4.3…  Je me dis que tant qu’à y être à avoir les mains dans le cambouis, autant tenté la CyanogenMod 12.1 !

3ème install : tuto de Android Savior, pur

3ème installation, du coup je commence à avoir mes repères. Le fait de ne pas avoir d’explications passe mieux.

Au final, Yiiiha ! Ca y est mon S2 tourne sous CyanogenMod 12.1 avec le android 5.1 (Lollipop).

Franchement, il est magnifique, j’ai l’impression d’avoir un smartphone tout neuf !  🙂

Après l’installation

Mon S2 est magnifique certes, mais il est encore un peu tout nu ! Quelques étapes restaient à suivre pour qu’il soit plus fonctionnel par rapport à mon usage

TriangleAway

Ah oui, toutes ces bidouilles entraîne l’apparition d’un joli triangle jaune au démarrage du smartphone, sans doute par rapport à la garantie. Heureusement il y a des solutions simple pour l’enlever :

Paramétrage des applis Google

Récupération des SMS/MMS

via  SMS Backup & Restore

Conclusion

Je suis passé rapidement sur les étapes car elles sont très bien expliquées dans les tutos, sachez juste qu’il faut en gros :

  • installer le logiciel Odin qui permet de flasher les Kernels sur le smartphone
  • récupérer les bons kernels, les packages CyanogenMod, GApps (Google Apps) sur des sites parfois douteux
  • récupérer un package « SuperSU » pour rooter son téléphone
  • Bidouiller avec les Download mode et Recovery mode de son téléphone, ne pas avoir peur de le bricker ! (perso je ne tenterai pas ça sur un téléphone sous garantie!)

Bref, c’est pas forcément évident, je ne le conseillerai pas à tout le monde !!!

Mais au final, je trouve que ça vaut vraiment le coup, mon vieux S2 s’est refait une jeunesse, d’ailleurs il m’a demandé s’il pouvait sortir en boîte ce soir avec des S6 edge, un vrai petit fou-fou !  :p

N’hésitez pas à laisser un petit commentaire si vous voulez vous aussi tenter l’aventure CyanogenMod !

Supprimer le fichier « hiberfil.sys »

Astuce Windows : Peut-on supprimer le fichier « hiberfil.sys » ?

 

Comme vous l’avez peut être remarqué, Windows créé un fichier nommé « hiberfil.sys » à la racine de votre C:\.

Ce fichier peut être très volumineux, par exemple il faisait plus de 8 Go sur mon ordinateur portable. On peut donc se demander à quoi sert ce fichier et est-ce qu’il ne serait pas intéressant de le supprimer ?

Rôle du fichier « hiberfil.sys »

C’est un fichier temporaire créé par Windows afin de stocker l’état de sa mémoire vive afin de se mettre en veille prolongée (hibernation).

Il est en ce sens comparable au fichier « pagefile.sys » (mis à part qu’il est fortement déconseillé de supprimer directement pagefile.sys vous êtes prévenus ne faîtes pas ça chez vous  🙂 ).

 

Supprimer le fichier « hiberfil.sys »

Pour supprimer le fichier « hiberfil.sys », il y a au moins 2 méthodes :

  • désactiver la veille prolongée en allant dans le Panneau de configuration, puis Options d’alimentation puis en cliquant sur l’onglet « Mise en veille prolongée »
  • ouvrir une ligne de commande (bouton Windows Démarrer \ cmd) et taper la commande suivante :
powercfg -h off

Cela aura pour effet de désactiver la veille prolongée, ce qui supprime de fait le fichier « hiberfile.sys »

Article de référence : Hiberfil.sys – Peut-on le supprimer ?

 

Migrer son site WordPress en local

Dans cet article, je vais vous présenter ma méthode pour migrer mon site WordPress, depuis internet vers un serveur local.

Il s’agit s’agit d’une migration complète : fichiers + base de données, et le changement des URL et des chemins est effectué, et toutes les étapes seront détaillés une à une.

Les pré-requis :

Un serveur local installé

Pour ma part, j’utilise le logiciel XAMPP, mais il y en a d’autres c’est vous qui voyez 🙂

L’important c’est d’avoir un serveur local qui tourne avec notamment l’accès à votre base de données MySQL. Sous XAMPP, tout est OK quand vous avez les serveurs Apache, MySQL et Tomcat qui sont au vert comme ceci :

Migrer son site WordPress en local

Pour plus d’informations sur l’installation de XAMPP, voir ce très bon tutoriel.

Un « paquet » Duplicator (jeu de sauvegarde du site WordPress)

Le deuxième pré-requis, c’est d’avoir le site à migrer !  🙂

Personnellement, j’utilise un jeu de sauvegarde provenant du plug-in Duplicator.

Migrer son site WordPress en local - logo Duplicator

Pour plus d’informations sur la sauvegarde d’un site avec Duplicator : voir mon Tutoriel pour sauvegarder son site WordPress avec Duplicator.

Il faut bien sûr récupérer les 2 fichiers en local : le fichier Archive + le fichier Installer.php :

Migrer son site WordPress en local

1ère étape : vidage du site local existant

Pour ma part, les fichiers correspondant à mon site WordPress local se trouve sur C:\xampp\htdocs\www :

Migrer son site WordPress en local

Je prends en général 1 ou 2 minutes pour vérifier que je n’ai rien que je voulais conserver, puis je supprime l’ensemble des fichiers de ce répertoire.

2ème étape : copie du jeu de sauvegarde

Copier les 2 fichiers du jeu de sauvegarde dans le répertoire C:\xampp\htdocs\www que l’on vient juste de vider :

Migrer son site WordPress en local

3ème étape : lancement de l’Installer.php

  • Ouvrir votre navigateur préféré
  • Taper l’adresse : http://localhost/www/installer.php

Ceci va lancer l’installation du jeu de sauvegarde. Voici les différentes étapes de l’installation :

3.1 [1.Deploy] Files & Database

Choisissez l’option « Connect and Remove All Data », puis saisisissez vos paramètres de connexion à votre basee de données MySQL :

Migrer son site WordPress en local

Astuce : si vous avez oublié vos paramètres, cliquez sur le bouton « Admin » du serveur MySQL depuis votre panneau de commande XAMPP. Par exemple pour ma part, ma bdd locale s’appelle « bddarkhus » :

Migrer son site WordPress en local

Cliquez sur le bouton « Test Connection » pour vérifier les paramètres :

Migrer_WP_Duplicator_07_Deploy1

Cochez la case « I have read all warnings & notices », puis cliquez sur le bouton « Run Deployment »

Une fenêtre d’avertissement va apparaître par rapport à l’effacement des données de la bdd :

Migrer son site WordPress en local

Validez en cliquant sur « OK », le déploiement devrait se lancer :

Migrer son site WordPress en local

3.2 [2.Update]

La fenêtre suivante devrait s’afficher :

Migrer son site WordPress en local

Il faut donc renseigner les URL et chemins, dans mon cas, je passe de « ericmurat.com » à « localhost/www » au niveau des URL par exemple.

Normalement, les données par défaut conviennent.

Validez cette étape en cliquant sur le bouton « Run Update »

3.3 [3.Test]

Arrivé ici, le site doit avoir été migré, mais le travail n’est pas encore fini, patience ! 🙂

Il y a 4 points à vérifier indiqués par cette fenêtre :

Migrer son site WordPress en local

  • Review Install Report

Vérifiez qu’il n’y ai pas eu de souci de déploiement, un affichage correct par exemple :

Migrer son site WordPress en local

  • Save Permalinks

Cliquez sur le lien « Save Permalinks ». Cela va ouvrir le Tableau de bord de votre site local sur le paramétrage des permaliens, vérifiez qu’il soit OK puis cliquer sur le bouton « Enregistrer les modififications »

Par exemple, pour moi :

Migrer son site WordPress en local

  • Test site

Cliquez sur le lien « Test site ». Cela va ouvrir le site migré en local. Vérifiez que tout soit OK et passez à la dernière étape.

  • Security cleanup

Cliquez sur le lien « Security cleanup ». Cela va ouvrir l’onglet « Nettoyage » du plug-in Duplicator :

Migrer son site WordPress en local

Cliquez sur le bouton « Supprimer les fichiers réservés ». L’affichage devrait devenir :

Migrer son site WordPress en local

Dernière chose à faire : supprimez manuellement le fichier archive .zip du jeu de sauvegarde ayant servi à l’installation :

Migrer son site WordPress en local

Et voilà, c’est terminé, votre site est complètement migré en local, bravo à vous !!!   🙂

Si ce tutoriel vous a plu, n’hésitez pas à laisser un commentaire, ça fait toujours plaisir !  :p

Sauvegarder son site WordPress

Sauvegarder son site WordPress grâce au plug-in Duplicator

Allez, c’est parti, suivez le guide pour sauvegarder votre site WordPress. Pour ce tutoriel, je vais vous présenter les étapes une à une que j’ai suivi pour sauvegarder mon site ericmurat.com.Sauvegarder son site WordPress - logo WordPress

Pré-requis : le plug-in Duplicator (cf. lien ci-dessous) est installé sur votre WordPress.

Sauvegarder son site WordPress - logo Duplicator

https://wordpress.org/plugins/duplicator/

C’est bon, le plug-in est installé ? Allez, on y va !  🙂

  • Depuis le panneau d’administration, aller dans le menu Duplicator / PaquetsSauvegarder son site WordPress - étape
  • Cliquer sur le bouton « Créer Paquet »Sauvegarder son site WordPress - étape
  • Vérifier que toutes les exigences soient OK, puis cliquer sur Suivant :Sauvegarder son site WordPress - étape
  • Définissez l’emplacement de votre jeu de sauvegarde. Personnellement, je laisse le répertoire /wp-snapshots de mon emplacement web :Sauvegarder son site WordPress - étape
  • Définissez les éventuelles exclusion de fichiers, perso je laisse tout par défaut :Sauvegarder son site WordPress - étape
  • Etape 2 : ça progresse, le plug-in va scanner tous les éléments pour vérifier que tout soit OK :Sauvegarder son site WordPress - étape
  • Fin du scan, ici pas de souci particulier : on peut passer à la Création de l’archiveSauvegarder son site WordPress - étape
  • C’est parti pour la création de l’archive, ça peut prendre un peu de temps suivant la taille du site :Sauvegarder son site WordPress - étape
  • Voilà, c’est fini, les fichiers Archive et Installer sont sur /wp-snapshots/ et dispos en téléchargement en cliquant sur les boutons :Sauvegarder son site WordPress - étape

Quelques points intéressants :

  • L’archive contient le script permettant de remonter toute la base de données MySQL du site WordPress
  • Sauvegarder ensemble Archive + Installer, ces 2 fichiers permettent par exemple de migrer son site en local. Pour plus de détails, voir mon Tutoriel pour migrer son site WordPress sur un serveur local.
  • Il existe des tas d’autres plug-ins de sauvegarde (j’ai également testé Updraft Plus, et BackUpWP), mais Duplicator est vraiment le plus adapté à mon usage.
  • Le plug-in Duplicator permet de faire les opérations de Sauvegarde et grâce à l’Installer il permet également la Migration, ceci avec la version gratuite
  • La version payante du plug-in permet d’avoir plein d’autres fonctionnalités intéressantes comme par exemple la sauvegarde sur DropBox ou Google Drive.

 

Utilisation de composants Bootstrap via les shortcodes

bootstrap_logo

Bootstrap-components

Il est possible d’utiliser certains composants Bootstrap dans des articles ou des pages via l’utilisation d’une extension puis de shortcodes.
Voici comment il faut faire :

 

Pour plus d’infos, voir https://www.youtube.com/watch?v=8T0IC1PsdTw&t=127

Ci-dessous, quelques exemples de barres de progressions à la sauce Bootstrap  :p

50% Complete

70% Complete

30% Complete

40% Complete

40% Complete