Créer son premier thème WordPress pour mobile
146 pages
Français

Vous pourrez modifier la taille du texte de cet ouvrage

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus

Créer son premier thème WordPress pour mobile

-

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus
146 pages
Français

Vous pourrez modifier la taille du texte de cet ouvrage

Description


Vos premiers sites WordPress mobiles optimisés avec HTML5 et CSS3 pour tous les smartphones




  • Découvrez WordPress et comment ses thèmes fonctionnent ;


  • Comprenez les contraintes d'ergonomie du Web mobile ;


  • Créez les bases d'un thème mobile en tenant compte de la compatibilité avec les navigateurs ;


  • Exploitez les possibilités de HTML5 et CSS3 et maîtrisez la hiérarchie des éléments et balises ;


  • Optimisez les performances et le temps de chargement de vos sites mobiles ;


  • Testez votre site sur iPhone, iPad, Android, Windows Phone, etc. ;


  • Spécialisez votre site mobile pour iOS le système de l'iPhone ;


  • Adaptez le thème d'un site existant pour mobile.



Avec pour étude de cas la réalisation d'un thème mobile (de A à Z) et l'adaptation d'un thème existant.




  • Rappels sur le fonctionnement de WordPress


  • Comprendre le fonctionnement d'un thème


  • Créer les bases du thème


  • Intégration


  • Création d'une CSS pour mobile


  • Optimiser les performances


  • Tester l'affichage du site


  • Les spécificités iOS


  • Cas pratique : adapter facilement un thème existant


Sujets

Informations

Publié par
Date de parution 14 juin 2012
Nombre de lectures 98
EAN13 9782212166231
Langue Français
Poids de l'ouvrage 1 Mo

Informations légales : prix de location à la page 0,0067€. Cette information est donnée uniquement à titre indicatif conformément à la législation en vigueur.

Exrait



  • Créez les bases d'un thème mobile en tenant compte de la compatibilité avec les navigateurs ;


  • Exploitez les possibilités de HTML5 et CSS3 et maîtrisez la hiérarchie des éléments et balises ;


  • Optimisez les performances et le temps de chargement de vos sites mobiles ;


  • Testez votre site sur iPhone, iPad, Android, Windows Phone, etc. ;


  • Spécialisez votre site mobile pour iOS le système de l'iPhone ;


  • Adaptez le thème d'un site existant pour mobile.



  • Avec pour étude de cas la réalisation d'un thème mobile (de A à Z) et l'adaptation d'un thème existant.




    • Rappels sur le fonctionnement de WordPress


    • Comprendre le fonctionnement d'un thème


    • Créer les bases du thème


    • Intégration


    • Création d'une CSS pour mobile


    • Optimiser les performances


    • Tester l'affichage du site


    • Les spécificités iOS


    • Cas pratique : adapter facilement un thème existant


    ' />

    Résumé
    Vos premiers sites WordPress mobiles optimisés avec HTML5 et CSS3 pour tous les smartphones
    → Découvrez WordPress et comment ses thèmes fonctionnent ;
    → Comprenez les contraintes d’ergonomie du Web mobile ;
    → Créez les bases d’un thème mobile en tenant compte de la compatibilité avec les navigateurs ;
    → Exploitez les possibilités de HTML5 et CSS3 et maîtrisez la hiérarchie des éléments et balises ;
    → Optimisez les performances et le temps de chargement de vos sites mobiles ;
    → Testez votre site sur iPhone, iPad, Android, Windows Phone, etc. ;
    → Spécialisez votre site mobile pour iOS le système de l’iPhone ;
    → Adaptez le thème d’un site existant pour mobile.
    Avec pour étude de cas la réalisation d’un thème mobile de A à Z et l’adaptation d’un thème existant.
    L’auteur
    Thibaut Baillet est titulaire d’un DUT en réseau et télécommunications et diplômé de l’HETIC. Ce jeune développeur conçoit et réalise des interfaces web ou mobiles en HTML5, CSS3 et JavaScript. Il intervient également dans des écoles spécialisées en tant que formateur HTML5 et mobile.
    www.editions-eyrolles.com
    Thibaut Baillet
    Créer son premier thème WordPress pour mobile
    ÉDITIONS EYROLLES
    61, bd Saint-Germain
    75240 Paris Cedex 05
    www.editions-eyrolles.com
    En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre Français d’exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris.
    © Groupe Eyrolles, 2012, ISBN : 978-2-212-13441-4
    D ANS LA COLLECTION A CCÈS LIBRE

    D ANS LA COLLECTION A B OOK A PART

    C HEZ LE MÊME ÉDITEUR
    Développement web mobile

    Design et marketing Web
    Avant-propos
    En France, en 2012, on dénombre plus de 18 millions d’internautes mobiles. Ce chiffre est en constante augmentation à travers le monde ; nul doute que l’Internet de demain sera sur mobile.
    À travers ce livre, vous apprendrez à créer votre propre site mobile avec le CMS WordPress. En outre, vous saurez prendre en considération tous les principes et problématiques liés au Web mobile. Nous espérons d’ailleurs que lors de la conception d’un site web, vous penserez d’abord à sa version mobile.
    Cet ouvrage est en outre l’occasion de promouvoir et de démocratiser l’utilisation de technologies comme HTML5 et CSS3.
    Que vous soyez plus intéressé par le mobile ou par WordPress, j’ai fait en sorte que ces domaines soient accessibles à tous, même sans grandes connaissances préalables.
    Bonne lecture !
    Structure de l’ouvrage
    Dans un premier chapitre, nous commençons par rappeler rapidement comment fonctionne WordPress, afin de comprendre l’intérêt d’utiliser ce CMS.
    Au chapitre 2 , nous entrons plus en détail dans le fonctionnement des thèmes eux-mêmes : où se trouvent les fichiers, comment ils déterminent l’affichage des contenus, notamment grâce aux boucles, qui sont au cœur du fonctionnement de WordPress.
    Le chapitre 3 , après un rappel sur HTML5 et CSS3, explique comment écrire les bases de tout thème WordPress. Ensuite, au chapitre 4 , on voit comment afficher les différents contenus dans notre thème.
    C’est au chapitre 5 que nous verrons à quoi doit ressembler une feuille de style CSS adaptée à un support mobile – et suffisamment souple pour tenir compte de la multiplicité des supports.
    Enfin, au chapitre 6 , nous verrons comment optimiser les performances du site – une condition sine qua non pour le succès d’un site destiné à des internautes nomades.
    Bien entendu, nous parlons, au chapitre 7 , de l’étape indispensable des tests : comment simuler des visites et tester l’affichage.
    Le chapitre 8 , quant à lui, traite des spécificités de l’affichage sur terminal iPhone ou iPad, et propose des façons d’intégrer plus étroitement le site au smartphone via iOS.
    Enfin, nous vous montrerons, au fil d’une petite étude de cas limpide ( chapitre 9 ), comment adapter un thème existant à une consultation depuis un mobile.

    R ESSOURCES Site dédié au livre
    Le lecteur souhaitera sans doute une assistance en ligne, nous fournissons une page spéciale dédiée à ce livre. Vous y retrouverez les codes utilisés, des informations complémentaires, ainsi qu’une boîte de dialogue pour échanger avec moi ou laisser votre avis sur le livre.
    http://thibaut-baillet.com/livre/

    À PROPOS DE L’AUTEUR
    Encore étudiant à l’heure où j’écris ces lignes, je me souviens du jour où je suis tombé dans l’univers du Web. En cette année 2007, je devais préparer mon bac électronique. C’est alors que j’ai découvert un site appelé le Site du Zéro ; j’ai passé toutes mes journées sur le tutoriel xHTML et CSS de Mathieu Nebra. Je n’ai jamais eu autant de plaisir à lire et la qualité des explications m’a donné envie de poursuivre dans cette voie. Je me suis donc orienté vers le développement web plus classique, avec des technologies telles que PHP pour m’entraîner, et j’ai ainsi créé mon site :
    http://thibaut-baillet.com
    Souhaitant continuer mes études pour devenir développeur web, j’ai obtenu un DUT Services et Réseaux de Communication. Ensuite, j’ai rejoint HETIC, la seule école à proposer une formation entièrement tournée vers les métiers d’Internet.
    Cette école a été une grande source de motivation pour entreprendre et créer des projets. Passionné par les nouvelles technologies, j’ai orienté mon expertise vers le développement web mobile. Ce marché est en pleine expansion grâce au smart-phone qui concurrence de plus en plus nos ordinateurs. En parallèle, je me suis lancé en free-lance pour arrondir mes fins de mois d’étudiant.
    C’est ainsi que pendant deux ans, je me mis à travailler plus de soixante heures par semaine pour continuer mes études, réaliser des projets free-lance et pratiquer le plus possible le Web mobile et HTML5.
    Aujourd’hui, la fin de mes études approche. Je me présente en tant que développeur frontend . Ce terme anglais résume très bien ce que je fais : développer des interfaces web ou mobile en utilisant les technologies actuelles telles que HTML5, CSS3 et JavaScript. Je donne également des cours de développement dans d’autres écoles que HETIC.
    J’espère que vous trouverez ce livre simple et efficace et que, grâce à lui, quand vous concevrez un site Internet, vous penserez également mobile.
    Remerciements
    À l’instar de nombreux autres auteurs, je souhaite tout particulièrement remercier ma compagne pour son soutien durant ces soirées à écrire et pour sa relecture.
    Je remercie également ma famille qui m’a toujours soutenu dans mes études et dans mes projets personnels.
    J’aimerais d’une manière plus générale remercier toutes les personnes que j’ai croisées durant mon parcours, qui m’ont directement ou indirectement orienté et permis d’en être là actuellement. Un grand merci à Barthelemy Ehui N’da, Mathieu Nebra, Sylvain Weber, Jacinthe Busson, Stéphane Dietz, Mathieu Adoutte, Jean-Christophe Beaux, Olivier Chatel, Eloïse Barbarin, Stéphanie Chhim, Pierrick Caen, ainsi qu’à toute l’équipe de TRI-OR, de l’IUT de Sarcelles et de HETIC.
    Merci à Geoffroy Monika pour les illustrations.
    Un dernier remerciement pour ma maison d’édition Eyrolles et Muriel Shan Sei Fan qui m’ont donné la chance de réaliser ce beau projet.
    Table des matières
    1. R APPELS SUR LE FONCTIONNEMENT DE W ORD P RESS
    WordPress : un CMS à optimiser pour le Web mobile
    Fonctionnement de WordPress
    Les articles
    Les médias : PDF, images, vidéos, sons …
    Les liens
    Les pages
    Les commentaires
    Apparence
    Extensions
    Utilisateurs
    Les outils
    Réglages
    Et bien d’autres …
    Plug-ins à installer
    2. C OMPRENDRE LE FONCTIONNEMENT D ’ UN THÈME
    Convention de nommage
    Arborescence des fichiers
    Les différents dossiers
    Le répertoire CSS
    Composition d’une page web
    Le fichier header.php
    La barre latérale et ses composants
    La page d’accueil
    Les autres fichiers utiles
    Les boucles, moteur essentiel de WordPress
    Afficher les articles
    Options de réglage des boucles
    3. C RÉER LES BASES DU THÈME
    Utilisation de HTML5 et CSS3
    Les nouvelles balises
    Le doctype
    L’encodage de caractères
    Les balises header et footer
    Les balises section et article
    La balise nav
    La balise video
    CSS3
    La compatibilité navigateur
    Les scripts de compatibilité
    Les formats de vidéos
    Les CSS propriétaires
    Définition du viewport
    Utilisation des fichiers de base
    Création de l’arborescence
    Mise en place des fichiers de base
    Mise en place du fichier index.php
    Configuration de l’en-tête
    Activation du thème
    4. I NTÉGRATION
    Affichage du contenu
    Création du menu
    Activation de la gestion de menu
    Affichage des menus
    Affichage des articles et pagination
    Utilisation de la boucle WordPress
    Affichage d’informations supplémentaires
    Utilisation d’une image miniature (thumbnail)
    Performance
    La pagination
    Affichage d’un article complet et de ses commentaires
    Le formulaire de commentaire
    Intégration du pied de page
    Réaliser une feuille de style CSS
    Utiliser un reset CSS
    Les bases de notre feuille de style
    5. C RÉATION D ’ UNE CSS POUR MOBILE
    Les contraintes du Web mobile
    La nouveauté des fonctions mobiles
    La diversité des appareils
    La compatibilité des navigateurs
    Une ergonomie adaptée
    Mise en place d’une présentation adaptative
    Un menu extensible
    Organisation des articles
    Présentation du contenu
    Un bouton « Lire la suite »
    Pagination
    Des formulaires adaptés
    Présentation du pied de page
    Optimisation en mode paysage
    6. O PTIMISER LES PERFORMANCES
    Mesurer la vitesse du site
    Page Speed
    YSlow
    Gestion des tailles d’images
    La taille des images
    Le poids des images
    Outils de compression
    Mise en cache
    7. T ESTER L’AFFICHAGE DU SITE
    Les simulateurs en ligne
    Les outils officiels
    Le SDK iOS
    L’émulateur Android
    Opera Mini
    8. L ES SPÉCIFICITÉS I OS
    Créer son icône de bureau
    Faire disparaître la barre d’adresse
    Le mode web application
    L’écran de démarrage
    9. C AS PRATIQUE : ADAPTER FACILEMENT UN THÈME EXISTANT
    Utilisation du thème par défaut
    Étude de la structure
    Adaptation du thème
    Utiliser plusieurs thèmes
    C ONCLUSION
    Ouverture sur le design adaptatif
    Le framework jQuery mobile
    I NSTALLATION RAPIDE DE W ORD P RESS
    R ESSOURCES
    Liens francophones
    Liens anglophones
    Livres
    Comptes Twitter
    I NDEX

    Rappels sur le fonctionnement de WordPress
    Avant de commencer à développer pour mobile, il est important de revoir les bases du fonctionnement de WordPress et les spécificités liées au Web mobile.
    S OMMAIRE
    Introduction à WordPress et au Web mobile
    Le fonctionnement de WordPress
    Les plug-ins à installer
    WordPress : un CMS à optimiser pour le Web mobile
    WordPress est un logiciel open source de gestion de contenu ( Content Management System ou CMS). À sa création, il permettait essentiellement de réaliser des blogs, mais aujourd’hui, de nombreux sites l’utilisent comme des sites vitrine, institutionnels ou encore des e-commerces.
    L’un des rares inconvénients à son utilisation est la performance. Il peut s’avérer très lent à l’affichage et consommer beaucoup de ressources serveur, ce qui va à l’encontre du Web mobile, basé essentiellement sur des connexions de type 3G dont le débit est nettement inférieur à celui d’un ordinateur connecté en Wi-Fi ou en Ethernet.
    Pour pallier ce problème, WordPress possède de nombreux plug-ins améliorant la vitesse de chargement. Ceux-ci vont utiliser des techniques comme la mise en cache du site côté serveur ou encore la compression du code source des fichiers HTML et CSS.

    V ERSION WordPress 3.3
    Tout au long de ce livre, j’utiliserai la version 3.3 de WordPress. Au moment où vous lirez ces lignes, il est possible qu’une nouvelle version soit sortie ou que l’interface ait légèrement changé. Cependant, tout ce que vous allez voir dans ce livre restera toujours valable.
    Fonctionnement de WordPress
    WordPress propose un back-office vraiment très agréable pour gérer le contenu de notre site. On peut facilement éditer des articles, des pages, gérer des commentaires ou encore les différentes images et vidéos qui vont être utilisées.
    L’élément important est la barre latérale (sidebar) présente à gauche, que je vais rapidement vous présenter.


    F IGURE 1–1 Le back-office de WordPress
    Les articles
    C’est le cœur de votre site et sûrement l’une des raisons qui fait que vous utilisez WordPress aujourd’hui. Vous allez créer du contenu : les articles de votre blog. Sachez qu’avec WordPress, vous pouvez faire bien plus. Il est possible de concevoir vos articles comme des créations que vous afficherez dans un portfolio, ou comme des petites annonces dans le cas d’un site spécialisé, etc.
    De base, un article comporte un titre, un contenu, ainsi que des catégories ou des tags que vous pourrez lui rattacher.

    Les médias : PDF, images, vidéos, sons …
    C’est ici que vous gérez les différentes illustrations de votre site. Vous pouvez charger des images, des vidéos ou encore des fichiers PDF.

    R EMARQUE
    Rassurez-vous, il n’est pas obligatoire de passer par là pour ajouter une image à un article. Cette fonction est directement disponible lors de la création de votre article.
    Les liens
    C’est une liste de liens que vous pouvez ajouter et classifier par catégories. Cela vous sera utile si vous souhaitez créer une liste de sites partenaires ou que vous les recommandez. Vous les afficherez facilement dans votre barre latérale avec les widgets disponibles dans WordPress.
    Les pages
    Leur fonctionnement est similaire à celui des articles. On les utilise pour créer les pages dites statiques de notre site, comme les pages À propos, Contact, Mentions légales , etc. Vous ajouterez ensuite facilement les liens de ces différentes pages dans le menu de votre site.
    Les commentaires
    Vous pourrez ici gérer tous les commentaires qui ont été ajoutés sur vos articles ou sur vos pages, les approuver ou au contraire les déclarer comme spams.
    Apparence
    C’est un menu très important où vous choisirez le thème à utiliser sur votre site. C’est également à partir de là que vous ajouterez des widgets si votre thème le permet. WordPress propose de nombreux widgets par défaut, pour afficher des liens, des articles récents ou bien des formulaires de recherche.

    Vous pourrez créer autant de menus que votre thème le permet en fonction de vos différentes pages ou catégories d’articles. Certains thèmes, comme celui que nous allons créer, permettent d’insérer un menu principal et un menu secondaire pour le pied de page. Après, vous êtes libre de choisir les liens à afficher dans le menu.
    Extensions
    L’une des forces de WordPress est de disposer de milliers de plug-ins développés par toute une communauté. Dans ce menu, vous installerez des plug-ins qui créent des formulaires de contact, affichent des boutons de partage sur les réseaux sociaux, etc. Vous pouvez installer directement vos extensions depuis ce menu ou bien aller sur le site officiel de WordPress.
    Utilisateurs
    WordPress propose un système de gestion d’utilisateurs avec différents rôles. Vous pouvez créer des administrateurs, des éditeurs, des auteurs et des contributeurs ou encore des abonnés. Chacun de ces rôles définit les zones du back-office qui seront accessibles à votre utilisateur.
    Les outils
    Il existe quelques outils par défaut intéressants, comme la possibilité d’exporter et d’importer le contenu de votre blog. Cela peut être utile pour faire des sauvegardes régulières.
    Il est intéressant de noter que WordPress permet d’importer des contenus d’autres services de blog comme Blogger ou encore Tumblr.
    Certains plug-ins que vous installerez sont susceptibles d’ajouter des sous-menus dans cette section.
    Réglages
    C’est un endroit très important de WordPress, que je vous conseille d’inspecter attentivement. On y retrouve de nombreux réglages, comme le titre et la description de notre site, le choix du fuseau horaire, la possibilité de laisser des commentaires, les formats de vos images, etc.
    Et bien d’autres …
    On voit, sur la capture précédente, deux sections, Contact et Performance . Ces rubriques ont été ajoutées par des plug-ins. Quand vous installez un plug-in, il est donc possible que cela crée un onglet ou un sous-menu dans l’onglet Réglages ou Outils .
    Plug-ins à installer
    Tout au long de ce livre, trois plug-ins vont être particulièrement utiles :
    • W3 Total Cache ;
    • Contact form 7 ;
    • Mobile Theme Switcher.
    Le premier met en place la compression et la mise en cache des fichiers. Le deuxième gère les formulaires de contact.
    Quant à Mobile Theme Switcher, il charge un thème spécifiquement adapté si l’internaute utilise un mobile.
    Pour installer, par exemple, le plug-in W3 Total Cache :
    1 Allez dans l’option Extensions du menu de gauche et cliquez sur Ajouter .
    2 Ensuite, tapez W3 Total Cache dans le moteur de recherche de plugins.
    3 Une fois le plug-in trouvé, il reste à cliquer sur Installer maintenant . Après l’installation, vous serez invité à activer le plug-in.

    R EMARQUE
    Nous verrons plus précisément comment configurer W3 Total Cache dans le chapitre 5 .


    F IGURE 1–2 Installation du plug-in W3 Total Cache
    Il existe bien d’autres plug-ins qui peuvent vous être utiles. En voici quelques-uns :
    • WP pagenavi pour la pagination ;
    • All in one SEO pour optimiser le référencement naturel ;
    • Yoast Breadcrumbs pour créer un fil d’Ariane.

    R ESSOURCES Installation et utilisation de WordPress
    Si vous souhaitez savoir comment installer et utiliser WordPress, reportez-vous au court tutoriel en annexe de ce livre.

    Comprendre le fonctionnement d’un thème
    Nous allons décrire la structure d’un thème WordPress et comment les fichiers fonctionnent pour afficher le contenu de votre site.
    S OMMAIRE
    Conventions de nommage
    Arborescence des fichiers
    Composition d’une page web
    Les boucles WordPress
    Convention de nommage
    Tout au long de ce livre, nous allons appliquer quelques conventions simples pour mieux nous organiser.

    • Accueil Accueil
    • Univers Univers
    • Ebooks Ebooks
    • Livres audio Livres audio
    • Presse Presse
    • BD BD
    • Documents Documents