WordPress — Un blog version «mobile» sans plugin

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

WordPress — Un blog version «mobile» sans plugin

Avec la réduction des tailles d’écrans qui va des téléphones portables aux ultra-portables comme l’eeePc, il devient urgent de proposer aux visiteurs une version mobile de votre blog. Il existe de nombreux plugins pour WordPress permettant d’obtenir une version mobile ou une version iPhone, mais je me suis amusé à chercher une solution minimaliste pour afficher mes derniers articles sans fioriture.

J’ai écarté la mise en place d’un style switcher pour changer la feuille de style CSS standard par une CSS spécifique aux mobiles ; difficile dans ce cas de partager une URL de type http://mobile.css4design.com ! Sans compter la reconnaissance des périphériques qui va du format 240 x 320 pixels des téléphones portables aux 800 x 480 pixels des premiers eeePC !

Créez votre version mobile à partir des modèles de pages WordPress

Je suis donc partie sur l’idée d’utiliser le moins de ressources possible (y compris intellectuelles) et de voir ce qu’il est possible de faire sans quitter WordPress. La création d’une nouvelle Page Version mobile basée sur une le Modèle de page mobile.php s’est imposée :

  1. Créez votre template mobile :

            <title></title>
    
    
        <div>
                <h1>
                    css4design | Version mobile du blogzine d'un intégrateur web
                </h1>
    
            <div>
                <h2></h2>
                <div></div>
                <p>Publié le  par .</p>
                <hr />
            </div>
    
        </div>
    
  2. Créez ensuite une nouvelle Page (Ecrire -> Page),

  3. Donnez-lui le titre Version mobile,

  4. Sélectionnez le modèle de page mobile (Modèle de page -> choix du modèle dans la liste déroulante),

  5. Enregistrez, c’est fini.

Ce template affiche les 5 derniers billets et il suffit de modifier le paramètre showposts="5" pour l’adapter à vos besoins en gardant à l’esprit que le poids de votre page fait partie des éléments à surveiller de près pour un affichage optimum sur un téléphone portable notamment.

En savoir plus : sur la création d’un modèle de page et sur les boucles WorPress.

les plus

  • Basique, permet d’aller à l’essentiel : proposer un lien pour afficher les 5 derniers billets sans formatage, donc accessibles depuis n’importe quel périphérique accédant au web,
  • Service minimum, rapidité maximum ;)
  • l’identifiant dans le body permettra de styler légèrement cette version mobile de votre blog (changer la taille de la police de caractère, gérer les interlignage de texte, etc.)

Les moins

  • Il s’agit d’une page unique qui ne permet pas (d’après des tests rapides) l’affichage des commentaires de l’article,
  • Les liens internes pointent vers la version standard,
  • Il ne s’agit pas d’une vraie version mobile (manque le Doctype adapté, code HTML non-valide au regard des possibilité des mobiles, page encore un peu lourde, etc.),

Ressources pour la conception de pages web « mobiles »

Voici quelques liens en relation avec la conception de sites pour mobiles :

  • ready.mobi — Cet outil de test gratuit évalue la conformité de votre page ou de votre site web au regard des standards et des bonnes pratiques spécifiques à ce secteur d’activité. Les résultats se présentent sous la forme d’une note de 1 à 5 et d’une analyse approfondie de la page pour en évaluer les performances sur un périphérique mobile. Nombreux conseils pour corriger les erreurs.

  • dev.mobi — Toutes les informations pour développer votre site mobile ready : guide du développeur, outil pour construire votre site rapidement, etc.

  • Votre blog sur un téléphone portable, really ready ? — Présentation détaillée de ready.mobi avec l’analyse de mon blog.

  • W3C mobileOK Checker [Beta] — Make your Web site mobile-friendly! Déclinaison pour mobile du validateur du W3C.

  • Developing Wireless Content using XHTML Mobile — Cet article montre comment créer un document XHTML adapté aux périphériques mobiles : mise en place de l’environnement de travail et transformation d’un document XHTML en WML.

Peut mieux faire !

Coluche vous le dirait, cette solution ne promet pas le grand soir, mais juste à manger et à boire ;) Elle s’inscrit dans une démarche visant à proposer aux lecteurs différentes manières d’accéder aux articles en complément des flux RSS. N’hésitez pas à proposer vos idées pour l’améliorer (notamment pour afficher les commentaires, n’afficher qu’un seul article avec pagination pour alléger la page, etc.).

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



34 commentaires pour “WordPress — Un blog version «mobile» sans plugin”

  1. skullpat dit :

    Très bon article, comme toujours (que je bookmarke de ce pas), merci :)

  2. jo dit :

    bonjour ,

    Passer des pages de blog sur écran mobile est aussi mon objectif .

    J’ai donc suivi le template ‘ mobile ‘ et c’est un bon début .

    Comment faire ensuite pour que cette page soit lu dans un :

    http://……blog/mobile/

    j’ai ajouté un fichier index.php dans /mobile/ , avec :

    c’est bon , mais rajoute un ascenseur sur le côté et je ne vois pas commentle supprimer

    @+

  3. Darklg dit :

    J’utilise le plugin  » WordPress Mobile Edition « . Résultat, il redirige les visiteurs navigant sur mobile sur une version de mon blog utilisant un template adapté. Mais mon contenu n’est pas vraiment adapté aux mobiles, donc c’est plutôt du  » au cas où  » ;)

  4. Bruno Bichet dit :

    @skullpat: Merci ;)

    @jo: Apparamment, il y a du code qui n’est pas passé dans le commentaire. Pour afficher du code dans les commentaires, il faut le faire précéder de 4 espaces. Enfin, normalement, je vais tester :

    /* Voici du code */

    @Darklg: mon objectif n’est pas de faire une « vraie » version pour mobile ou pda, mais de m’adresser à tous ceux qui veulent juste prendre connaissance des textes, sans être obliger de passer par la version standard qui peut paraitre chargée pour certains.

    De toutes façons, pour passer le validateur mobile, il faut enlever les scripts (statistiques, etc.), ne plus utiliser de balises sup, del, etc… à moins d’utiliser un strip_tags ou assimilé pour supprimer les balises.

  5. Adri dit :

    Plus simple sans plugin non ?

  6. jo dit :

    @ bruno ,

    Exact , le code n’est pas passé , et c’est la balise html

    object type= »text/html » data= »http:….. width= »900px » height= »750px » /object

    Je ne connais pas d’autre balise qui peut insérer la page du template ‘ mobile ‘, et ce qui ajoute l’ascenseur sur le côté , c’est width et height .

    Obtenir le tout sans l’ascenseur serait beaucoup mieux !

  7. Bruno Bichet dit :

    @jo: Essaie avec des frames qui sont peut-être plus adaptées que la balise object pour affiché une URL.

  8. Martin dit :

    Cette astuce est tout à fait pertinente, mais il faudrait encore modifier le robots.txt pour cantonner les divers robots web et mobile pour éviter la duplication de contenu. Du coup, cela serait encore meilleur !

    Une autre astuce proposée par l’actuel P-DG de Newsvine voici quelques années, mais qui n’a pas perdu elle non plus de sa pertinence :

    http://www.mikeindustries.com/archive/2005/07/make-your-site-mobile-friendly

    consiste à mettre en place la version mobile sur un site parallèle (css4design.mobi ?) et d’y installer un habillage simpliste qui crawle la page demandée sur le site mobile sur le site original et en enlève tout le superflu pour l’adapter au monde du mobile, aux ressources et aux caractéristiques plus limitées.

  9. […] Une version mobile de votre blog sans plugins via css4design […]

  10. jo dit :

    Essaie avec des frames ( ) … Sortir le contenu d’un template sur un page externe au blog wp , bingo , mais je ne vois pas comment réaliser cela !!

    haha ha :)

  11. Bruno Bichet dit :

    @jo: Bon, j’dis ça, j’dis rien, mais j’ai vu passer une page du codex qui explique comment installer WP dans un sous-dossier en faisant ressortir uniquement le fichier index.php, histoire de ne pas encombrer la racine de l’hébergement. Peut-être qu’il y a matière à chercher de ce côté :

    http://codex.wordpress.org/fr:Donner_%C3%A0_WordPress_son_Propre_Dossier et http://codex.wordpress.org/Moving_WordPress

  12. jo dit :

    @bruno :

    La page ‘ mobile ‘ , avec le template , se voit bien dans le menu conventionnel de blog wp .

    URL = http://…blog/up.php/?page_id=140

    Se souvenir de id=140 , c’est ce qui est gênant . Donc , c’est pas tout le blog que je veux déplacer , mais uniquement la page id=140 !

  13. Bruno Bichet dit :

    @jo : Je ne penses pas que le « déplacement » physique de la page soit possible car le moteur de WordPress ne pourra pas la parser pour afficher les billets.

    En revanche, tu doit pouvoir appeler cette page dans une iframe située dans une page index.php sise à la racine d’un dossier /mobile/ (à supposer que j’ai bien compris ce que tu voulais faire)

  14. Martin dit :

    Concernant l’emplacement de la page, le plus simple serait sans doute d’utiliser l’extension Redirection de WordPress qui permet de faire des redirections explicites (l’adresse figurant dans la bare d’adresses du navigateur change via une redirection HTTP 301 ou 302) ou implicites (l’adresse figurant dans la barre d’adresses du navigateur ne change pas).

  15. jo dit :

    @bruno :

    Allèger wp pour le rendre mobile n’est pas la prochaine étape prioritaire du staff de développement .

    Je vais me contenter de ce qui va avec ‘object ‘ , qui rempli mes attentes !

  16. jo dit :

    @martin :

    URL = http://…blog/up.php/?page_id=140 ,

    redirection implicite ou explicite , cela mène où ( ‘ <? php ‘ ) pour rediriger cette page vers l’extérieur du blog dans le dossier …/mobile/

    @+

  17. Greg-J dit :

    Très efficace cette façon de procéder, même si l’ajout d’un plugin reste forcement plus rapide (plutôt pour ceux qui n’aime pas mettre les mains dans le cambouis).

  18. Bruno Bichet dit :

    @Greg-J : L’ajout d’un plugin est peut-être plus rapide (quoique le code donné plus haut doit être fonctionnel, donc, un coup de copié-collé et c’est presque fini ;) ).

    Mais surtout, l’idée c’est de proposer une version accessible pour les mobiles mais aussi pour tous les petits écrans, et je ne suis pas sûr que les plugins fassent une reconnaissance des user-agent et encore moins qu’ils permettent d’en ajouter ou d’en supprimer. Mais là pour le coup, je n’ai jamais testé de plugins pour faire une version mobile, donc, à prendre avec des pincettes ;)

    @jo: je ne sais pas si ça peut t’aider, mais pour ma version mobile, j’ai créé le sous-domaine http://mobile.css4design.com que j’ai fait pointer bêtement sur la page http://www.css4design.com/version-mobile et c’est tout. Ca permet de donner une URL propre et ça reste simple à mettre en oeuvre.

  19. Martin dit :

    @jo : En utilisant une redirection explicite de type 301 (via le plugin WordPress Redirection ou un fichier .htaccess), lorsque l’utilisateur arrive sur la page :

    http://www.example.com/toto

    il voit son navigateur changer d’adresse vers :

    http://www.example.com/ailleurs/adresse-complexe?a=2&b=toto

    En utilisant une redirection implicite (via le plugin WordPress Redirection ou un fichier .htaccess), lorsque l’utilisateur tapote :

    http://www.example.com/toto

    son navigateur reste sur cette même page et affiche le contenu figurant à l’emplacement de :

    http://www.example.com/ailleurs/adresse-complexe?a=2&b=toto

    mais sans jamais voir cette adresse qui reste du boulot interne au CMS.

    Avec le plugin WordPress Redirection, tu peux donner n’importe quelle adresse de redirection implicite (en affichant alors une page figurant par ailleurs sur ton site, ou bien sur un autre sous-domaine, voire un autre site, ou encore ailleurs, tant que ton serveur peut la charger d’une manière ou d’une autre).

    Avec un .htaccess, tu dois te contenter du chemin de la même arborescence que ton host (donc là où se trouve ton blog).

  20. jo dit :

    @bruno : pas de sous domaine pour moi , ni de serveur dédié , l’hébergeur qui est basique est donc free.fr

    @martin a une réponse , avec qui permet …

    http://wordpress.org/extend/plugins/redirection/

    A tester , pour voir si c’est possible de rediriger une page et pas tout le blog …

    :-)))

  21. jo dit :

    @martin : implicite (via le plugin WordPress Redirection ou un fichier .htaccess), lorsque l’utilisateur tapote :

    http://www.example.com/mobile/

    son navigateur reste sur cette même page et affiche le contenu figurant à l’emplacement de :

    http://www.example.com/ailleur…..amp;b=toto

    mais sans jamais voir cette adresse qui reste du boulot interne au CMS.

    1 – Sans rien dans /mobile/ , la redirection ne donne rien . Alors que faut t-il ajouter ?

    2 – 301 -​/blog​/mobile​/

    Select All | Toggle | Reset Hits | Supprimer | Move To … C’est le menu de redirect que je vois dans l’espace admin !

    @+

  22. Martin dit :

    @jo  :

    D’abord, installe Redirection. Ensuite, active-le. Va dans le menu Gérer. Ouvre le sous-menu Redirection. Au bas de la page, dans la partie Ajouter une nouvelle redirection, ajoute ceci :

    URL source: /test/pour/joe/mobile/ Match: URL only Action: Pass-through Regular expression non coché URL cible: http://www.css4design.com/ Clique sur Ajouter la redirection.

    Exemple d’application sur mon blog (attention, je vais le retirer sous peu pour éviter de piller le contenu de css4design et le contenu dupliqué :

    http://unearaigneeauplafond.fr/test/pour/jo/mobile/

  23. Martin dit :

    (@Bruno Bichet : J’ai comme l’impression que la syntaxe Markdown a cassé mon commentaire en syntaxe HTML… Car je viens de relire mon HTML d’origine et il ne semble pas problématique…)

  24. Martin dit :

    Tiens, je viens de m’apercevoir que Redirection n’a pas correctement géré cette redirection (voir ci-dessus), car… une erreur 404 apparaît plus bas. Est-ce parce que je suis allé chercher une page sur un autre site que le mien ? A tester.

  25. jo dit :

    @martin : Ave Free.fr la redirection ne prend pas avec ce plugin ! url : http://….blog/mobile/

    [DIR] Parent Directory 02-Sep-2008 15:04 – Apache/ProXad [Aug 9 2008 02:45:07]

    La config est bien ==> pass ​/blog​/mobile​/

  26. Martin dit :

    jo : Si tu as un « & » dans l’URL, il faut les remplacer par du « &amp; » dans la redirection (habituellement, ton navigateur le fait, mais ici, c’est à toi de le faire, comme tu ne passes pas par un navigateur pour charger la page). Tu peux copier-coller ici, par ailleurs, les URL source et destination que tu utilises ? Les URL précises, j’entends ?

  27. jo dit :

    @martin :

    Je ne vois pas ce qui bloque , il n’y a pas de caractères spéciaux dans la source et la cible :

    blog/mobile/

    vers

    blog/up.php/?page_id=140

  28. Martin dit :

    @jo : Il faut débuter les URL par un « / » et si je ne m’abuse indiquer l’URL complète de l’URL destination. Par conséquent :

    Source : /mobileDestination : http://www.tonblog.com/up.php/?page_id=140

  29. Martin dit :

    (Pourtant, j’avais bien indiqué le « / » initial et le « http » complet dans mon exemple au-dessus…)

  30. Bruno Bichet dit :

    @Martin: Excuse pour le retard, je viens juste de m’apercevoir qu’il manquait une partie de ton commentaire où tu détailles la procédure pour faire une redirection avec la plugin de WordPress. C’est réparé ;)

    Tiens au fait, pour faire la même chose avec un htaccess sans passer par le plugin (parce que rRedirection n’a pas l’air compatible avec Dean’s Permalink), c’est comment ?

  31. Martin dit :

    @Bruno Bichet : Passer par un .htaccess est plus performant (aucune exécution de code PHP), mais moins pratique (il faut éditer le .htaccess à chaque fois) qu’un plugin avec une interface utilisateur et des logs aisément consultables et éditables.

  32. jo dit :

    @martin :

    /mobile/ , oubli mais le problème avec ce plugin , c’est de ne pas pouvoir tester le redirection dans l’espace du plugin de wordpress

    Maintenant qu’il n’y a plus de doute , le plugin redirection de fonctionne pas sur mon blog free.fr avec la version 2.0.5 !

    J’ai ressorti de mes souvenirs une frame html avec entête , pour masquer la cible . Le template de @bruno n’a plus besoin du plugin …

  33. […] Bruno, nous propose des codes pour rendre votre blog wordpress compatible avec les mobiles et les UMPC sans plugin à […]

  34. […] WordPress — Un blog version «mobile» sans plugin Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? […]



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site