Vous êtes ici : Miss SEO Girl » Lectures SEO & Rédaction web » Créer son premier thème WordPress pour mobile de Thibaut Baillet

Créer son premier thème WordPress pour mobile de Thibaut Baillet

J’ai voulu changer un peu de registre, les livres seo c’est bien, mais bon je lis toujours plus ou moins la même chose. Résultat, je commence à m’ennuyer. 🙂

En discutant avec un ami, je lui ai fait part de mes difficultés en HTML et CSS. Je pense que ce sont les deux sujets auxquelles je vais beaucoup m’intéresser cette année 🙂

Mon ami Mathieu m’a conseillé de lire ce petit bouquin : Créer son premier thème WordPress pour mobile. Ma première réaction fut : mais Mathieu, moi je ne veux pas faire un Template pour mobile – en pensant que c’était le sujet principal du livre. Et là, il me dit que les premiers chapitres sont consacrés au CMS WordPress, mobile ou pas, le fonctionnement WordPress ne change pas, et ensuite les notions HTML et CSS pourront m’être utiles ailleurs que pour mobile. Eh bien, il n’a pas eu tort. J’ai donc lu une première fois ce livre, en notant un peu les idées principales que je partage avec vous aujourd’hui. J’envisage de le lire une deuxième fois, en mettant en pratique les conseils et les astuces, pour m’entrainer et comprendre un peu plus ces aspects HTML/CSS qui clochent chez moi 🙂

Mon article d’aujourd’hui c’est pour vous présenter le livre et non pas pour vous donner les clefs pour créer votre Template. Si vous voulez le faire, je vous invite à acheter le livre et le lire. Il ne coûte pas cher, 13 euros chez Amazon.

L’auteur…

Thibaut Baillet, c’est un jeune homme de 22 ans, passionné par les TIC et le web. Sa spécialité : le web mobile. Son objectif : devenir expert front-end.

Je ne connais pas Thibaut, mais je lui souhaite bonne chance dans le métier qu’il a choisi, et j’espère pour lui qu’il va atteindre son objectif 🙂 . En tout cas Thibaut, au cas où tu arriverais sur mon blog, je voulais te dire bravo pour ce petit livre. Il est très facile à lire, simple et pédagogue. Je le recommande aux passionnés wordpress et tous ceux qui souhaiteraient créer leur propre Template (mobile ou pas) 🙂

129 pages et 9 chapitres…

Le livre commence par faire un constat : en 2012 en France, il y avait plus de 18 millions d’internautes mobiles. L’internet de demain sera mobile ! Un constat et une affirmation qui font prendre conscience de l’importance d’optimiser son site internet, blog… pour le mobile.

La difficulté des sujets traités par l’auteur va crescendo. Personne n’est perdu dans la lecture. C’est agréable et fluide.

Les bases du WordPress

On commence avec les bases du fonctionnement de WordPress. L’auteur passe en revue et explique brièvement : la notion d’articles, de médias, de liens, de pages, des extensions et plugins. Dès le début du livre, nous comprenons le fonctionnement du CMS.

Moi, j’ai dû découvrir WordPress en même temps que la création de mon blog. Pour être honnête, je savais déjà ces notions. Mais bon, une petite piqûre de rappel ne fait pas de mal.

Ensuite, l’auteur nous livre quelques idées de plugins à installer absolument : W3C Total Cache, Contact Form 7 pour créer facilement un formulaire de contact, All in one SEO pour optimiser le référencement, Yoast Breadcrumbs pour créer un fil d’Ariane.

Si vous êtes intéressé par les plugins WordPress je vous invite à lire l’article invité écrit par Samy : Mon top 7 de plugins WordPress..

D’ailleurs ce chapitre m’a rappelé que mon blog ne dispose pas d’un formulaire de contact, car il y a un problème d’incompatibilité entre mon thème et le plugin. Je vais devoir résoudre ça dès que possible 🙂

Le fonctionnement d’un thème

Dans le deuxième chapitre, l’auteur nous explique la structure d’un thème WordPres. On va analyser l’arborescence des fichiers, des différents dossiers et sous-dossiers qui composent un thème : comme les images, les fichiers css, les fichiers javascript. ..

On apprend également quelle est la différence entre le dossier CSS et le fichier style.css : l’un sert uniquement pour décrire un thème (style.css) et l’autre pour inclure les feuilles de style (dossier css), ainsi que la composition d’une page web : différents templates (header.php, sidebar.php, indx.php ou encore footer.php).

Enfin, l’auteur explique l’ensemble des éléments nécessaires pour comprendre le bon fonctionnement d’un thème wordpress.

La page d’accueil et son fonctionnement

  • Explications sur le fonctionnement d’une page d’accueil : la page d’accueil d’un site fait appel au fichier index.php présent à la racine du thème. Dans le fichier index.php on appelle le header.php, le sidebar.php et le footer.php
  • Pour appeler un fichier, il faut utiliser la fonction get_suivi du nom du fichier get_header() par exemple.
  • Une autre fonctionnalité importante et propre à WordPress : les boucles (loops en anglais), utilisées dans la page author.php par exemple.

Fonctionnement d’une page, la fonction get_ ainsi que les loops, tout y est très bien expliqué !

Créer les bases du thème

Petite introduction au HTML 5 et CSS 3 ainsi qu’un rappel des nouvelles balises à utiliser : <header>, <section>, <article>, <nav>… L’idée est d’organiser et de structurer les informations. Le HTML 5 va en fait améliorer dans le futur proche le référencement naturel. Les robots vont plus facilement identifier, lire et comprendre les éléments du code.

Avec le HTML 5 on écrit par exemple < !DOCTYPE HTML> pour déclarer la norme de codage, ou encore <meta charset –‘’UTF8’’ > pour déclarer l’encodage de caractères. Plus faciles à retenir, plus court que le XHTML, moins complexe pour les robots, moins de poids…

Le CSS3 a un potentiel créatif et interactif encore plus important qu’avant. Avec le CSS 3 vous pouvez réaliser des angles arrondis, ajouter une ombre portée sur du texte ou sur du contenu (border-radius, text-shadow, box-shadow)… Un petit outil en ligne qui vous permet d’obtenir un code css : css3generator.com. Simple et limité, mais bon, pour nous les novices ça peut être intéressant.

Intégration

Dans le chapitre 3 nous avons vu comment créer un thème très simple. Dans ce chapitre nous passons à l’étape d’intégration. Comment intégrer du contenu, comment le mettre en forme à l’aide de feuilles de style CSS..

On apprend comment créer un menu de navigation, comment activer la gestion de menus grâce au fichier fonctions.php, comment choisir un emplacement pour nos menus, comment l’insérer dans le header.php..

Une fois les menus créés, activés, et insérés dans le header, nous allons créer des articles et mettre en place une pagination.

On va apprendre à créer un formulaire de commentaires, activer les widgets, réaliser une feuille de style css…

Création d’une CSS pour mobile

Comment réaliser une feuille de style de notre site mobile et comprendre les enjeux liés à la conception web, quelles sont les contraintes concernant l’ergonomie, la présentation, le temps de chargement plus lent sur mobile, la diversification des appareils, la compatibilité avec les navigateurs, comment optimiser le site pour un mode paysage (réglage du viewport) et ajustement de la taille de la police…

L’auteur nous explique le tout !

Performances du site

Pour finir, Thibaut donne quelques astuces pour optimiser les performances du site : chargement rapide des pages et des images, comment mesurer la vitesse du site (page speed, yslow..), comment vérifier la taille des images, le poids des images… On va parler des outils de compressions (w3total cache, minify..).

Ensuite, on va apprendre à tester l’affichage du site et comprendre les spécificités des IOS, pour finir avec un cas pratique : comment adapter facilement un thème existant pour le mobile.

Conclusion

Bref, un petit bouquin super pratique. Je l’ai aimé et je l’ai trouvé très intéressant. J’ai appris de petites choses, maintenant il ne me reste plus qu’à les mettre en pratique. Pour m’amuser, je pense concevoir un Template pour mon propre blog 🙂

Et pour ceux qui se demandent.. oui je suis en vacances ! 🙂 J’ai disparu ! Vous ne me voyez plus ! 🙂

PS : les illustrations proviennent du livre et ont été réalisées par Geoffroy Monika.

Please wait...

10 réflexions au sujet de « Créer son premier thème WordPress pour mobile de Thibaut Baillet »

  1. Et voilà ! Victime une fois de plus de la folie Miss SEO Girl je viens d’acheter le livre de ce jeune homme et j’ai déjà hâte de le lire !

    Merci pour ce partage de bon plan 😉

  2. Pour avoir acheté le livre et l’avoir rapidement lu (il est relativement court), j’avoue l’avoir trouvé très bien. En toute modestie, et sans vouloir faire offense à l’auteur, je n’ai rien appris de particulier car je connais déjà très bien WordPress, mais je l’ai acheté car il résume tout ce qu’on a besoin de savoir pour créer un thème sans se prendre la tête, etc.

    Je le recommande vivement, il n’est pas très cher et c’est un super memento au fond pour avoir tous les codex utiles et des aspects pratiques pour les moins techniciens d’entre nous. Bravo car il fallait réussir la prouesse d’être complet en peu de pages et pédagogue pour expliquer des points techniques. C’est réussi et il mérite sa place dans ma bibliothèque ! ^^
    Mathieu Chartier Articles récents..Template Layout et slots CSS 3 pour le web mobileMy Profile

  3. Merci pour la présentation de ce petit bouquin. Je n’utilise pas WP mais la semaine dernière je me suis offert un gros pavé sur le HTML 5 et le CSS 3 … je n’ai pas encore pris le temps de lire tout ça mais je ne doute pas que cela me sera plus qu’utile pour les mois et années à venir.

    Par contre, un peu découragé rien qu’a l’idée qu’un jour où l’autre il faudra reprendre le code de l’ensemble de mes sites actuels … enfin bon j’ai encore le temps pour voir tout ça.
    Xavier Articles récents..Contenu dupliqué : C’est quoi ? Quels outils utiliser ?My Profile

  4. Bonjour,
    J’ai également des difficultés en CCS et HTML, donc je ne suis pas contre quelques informations éclairées surtout que le livre à l’air assez accessible. J’espère juste ne pas trop être largué quand même, mais je vais essayer ça ne pourra pas me faire de mal bien au contraire.

  5. Le dev front-end reprend tout ses lettres de noblesse depuis l’apogée des smartphones. Il devient impératif d’avoir des CSS pour medias tels que téléphones et tablettes, tout comme le HTML5 permet d’intégrer nativement un tas de fonctionnalités bien pratiques comme le prefetching !
    Merci pour cette fiche de lecture…
    Manu Articles récents..Studio Sinaé : réalisé en CSS et xHTMLMy Profile

  6. merci pour cette recommandation, tu devrais avoir un pourcentage sur les ventes avec un article comme ça ;).

  7. All in one SEO
    Yoast Breadcrumbs pour créer un fil d’Ariane

    Aucun intéret mieux vaut : SEO by yoast qui regroupe tout ou encore le coupler au code de SEOmix pour le bread.

    Sinon un site responsive pour le mobile ça suffit, il faut juste se serivr des media query ex : @media screen and (max-width: 640px) et adapter son css existant.

  8. Merci pour cet article très intéressant !

    Je maîtrise bien HTML, CSS et WP mais je ne me suis jamais attaquée à la réalisation d’un thème…

    Le livre est commandé et j’ai hâte de le lire !
    Gwendoline Articles récents..Ouverture du siteMy Profile

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

CommentLuv badge

Les liens des commentaires peuvent être libérés des nofollow.