O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Créer son premier thème WordPress pour mobile

Book Description

Présentation
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.

Au sommaire
  • 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

Table of Contents

  1. Couverture
  2. Résumé
  3. Page de titre
  4. Copyright
  5. Dans la collection accès libre
  6. Avant-propos
  7. Table des matières
  8. 1. Rappels sur le fonctionnement de wordpress
    1. WordPress : un CMS à optimiser pour le web mobile
    2. Fonctionnement de wordpress
      1. Les articles
      2. Les médias : PDF, images, vidéos, sons …
      3. Les liens
      4. Les pages
      5. Les commentaires
      6. Apparence
      7. Extensions
      8. Utilisateurs
      9. Les outils
      10. Réglages
      11. Et bien d’autres …
    3. Plug-ins à installer
  9. 2. Comprendre le fonctionnement d’un thème
    1. Convention de nommage
    2. Arborescence des fichiers
      1. Les différents dossiers
      2. Le répertoire CSS
    3. Composition d’une page web
      1. Le fichier header.php
      2. La barre latérale et ses composants
      3. La page d’accueil
      4. Les autres fichiers utiles
    4. Les boucles, moteur essentiel de wordpress
      1. Afficher les articles
      2. Options de réglage des boucles
  10. 3. Créer les bases du thème
    1. Utilisation de HTML5 et CSS3
      1. Les nouvelles balises
      2. Le doctype
      3. L’encodage de caractères
      4. Les balises header et footer
      5. Les balises section et article
      6. La balise nav
      7. La balise video
      8. CSS3
    2. La compatibilité navigateur
      1. Les scripts de compatibilité
      2. Les formats de vidéos
      3. Les CSS propriétaires
    3. Définition du viewport
    4. Utilisation des fichiers de base
      1. Création de l’arborescence
      2. Mise en place des fichiers de base
        1. Mise en place du fichier index.php
        2. Configuration de l’en-tête
        3. Activation du thème
  11. 4. Intégration
    1. Affichage du contenu
      1. Création du menu
        1. Activation de la gestion de menu
        2. Affichage des menus
      2. Affichage des articles et pagination
        1. Utilisation de la boucle wordpress
        2. Affichage d’informations supplémentaires
        3. Utilisation d’une image miniature (thumbnail)
        4. Performance
        5. La pagination
      3. Affichage d’un article complet et de ses commentaires
      4. Le formulaire de commentaire
      5. Intégration du pied de page
    2. Réaliser une feuille de style CSS
      1. Utiliser un reset CSS
      2. Les bases de notre feuille de style
  12. 5. Création d’une css pour mobile
    1. Les contraintes du web mobile
      1. La nouveauté des fonctions mobiles
      2. La diversité des appareils
      3. La compatibilité des navigateurs
      4. Une ergonomie adaptée
    2. Mise en place d’une présentation adaptative
      1. Un menu extensible
      2. Organisation des articles
        1. Présentation du contenu
        2. Un bouton « lire la suite »
        3. Pagination
      3. Des formulaires adaptés
      4. Présentation du pied de page
      5. Optimisation en mode paysage
  13. 6. Optimiser les performances
    1. Mesurer la vitesse du site
      1. Page speed
      2. Yslow
    2. Gestion des tailles d’images
      1. La taille des images
      2. Le poids des images
    3. Outils de compression
    4. Mise en cache
  14. 7. Tester l’affichage du site
    1. Les simulateurs en ligne
    2. Les outils officiels
      1. Le SDK iOS
      2. L’émulateur android
      3. Opera mini
  15. 8. Les spécificités ios
    1. Créer son icône de bureau
    2. Faire disparaître la barre d’adresse
    3. Le mode web application
    4. L’écran de démarrage
  16. 9. Cas pratique : adapter facilement un thème existant
    1. Utilisation du thème par défaut
    2. Étude de la structure
    3. Adaptation du thème
    4. Utiliser plusieurs thèmes
  17. Conclusion
    1. Ouverture sur le design adaptatif
    2. Le framework jquery mobile
  18. Installation rapide de wordpress
  19. Ressources
    1. Liens francophones
    2. Liens anglophones
    3. Livres
    4. Comptes twitter
  20. Index