Thème WordPress Mobile Jour 2

La semaine dernière, nous avons exploré, jQTouch, le cadre que nous utiliserions pour créer notre thème wordpress mobile. Cette semaine, nous reprendrons là où nous en étions et appliquons ce que nous avons appris pour créer les fichiers de thèmes que nous utiliserons pour les intégrer à un thème WordPress. Allons-y!

En partant

Pour commencer, nous utiliserons une installation par défaut de jQTouch que nous avons téléchargée la semaine dernière. Pour simplifier les choses, nous allons utiliser autant que possible les fonctionnalités par défaut de jQTouch..

Tout d’abord, copiez le contenu du répertoire de démonstration principal (demos / main) et collez-le dans le dossier principal jQTouch.:

Puisque la présentation de notre blog fonctionnera de manière très similaire à celle de cette démo, il est logique de partir de là. Ceci fait, vous devrez mettre à jour certains liens vers les fichiers JS et CSS. Au-delà de cela, vous n'avez pas à vous soucier des 60 premières lignes. Ce sont essentiellement ce qui fait que jQTouch fonctionne comme il le fait. Remplacez le début du fichier par ceci:

    jQTouch β

Après la balise de script de fin, vous devriez voir une balise de style. C'est là que tu sais que tu peux t'arrêter.

La page d'index

Nous n'intégrons pas Wordpress dans cette partie du didacticiel. Au lieu de cela, nous créons le thème en HTML ordinaire, puis nous le transformons en thème dans le prochain didacticiel. Cela étant dit, nous devons remplacer le contenu d'index par défaut par un contenu de blog réaliste. Sélectionnez tout le contenu entre les balises body et supprimez-le. Maintenant, nous allons le remplir avec du contenu. La semaine dernière, nous avons couvert tous les principes fondamentaux de jQTouch, donc tout ce qui suit doit faire l’objet d’un examen:

   Site Wordpress
 Sur 
   
 
 
  Articles de blog 12
 Des pages 2
 
 Liens externes
  Souscrire
 Gazouillement
 Page de bureau
 
  Email
 Faire un don
 
  Ajoutez cette page à votre écran d'accueil pour afficher l'icône personnalisée, l'écran de démarrage et le mode plein écran..
 
 
   
 Thème Mobile
Version 0.1 beta
 Par Connor Zwick
 Poussez votre contenu au-delà des limites sur tous les appareils mobiles connectés à Internet
 en utilisant le célèbre Wordpress CMS et JQTouch.
  @connorzwick sur Twitter 
 

Fermer
 
    Pages du site
 Accueil 
 Des pages
  Sur
 L'histoire
 
 
   Pages du site
 Accueil 
 Des pages
  Sur
 L'histoire
 
 
   Pages du site
 Accueil 
  Titre de l'article
 Par: Connor Zwick
 Ceci est une courte description. Voici un court extrait du message à l’intention du spectateur de juger s’il veut en savoir plus. C’est une brève description. Voici un court extrait du message à l’intention du spectateur de juger s’il veut en savoir plus. C’est une brève description. Voici un court extrait du message, permettant au spectateur de juger s’il veut en savoir plus..

Comme vous pouvez le constater, nous avons ajouté des menus, des barres de titre et même une page blog.html chargée en AJAX. Mais tout ce qui précède devrait être examiné. Si vous trouvez cela déroutant, veuillez relire le message de la semaine dernière..

La page du blog

Avec jQTouch, nous avons essayé de garder autant que possible sur la page initiale. Comme vous pouvez le constater, nous l’avons fait en grande partie ci-dessus. Mais pour un blog, cela n’est pas très réaliste, car un blog sera constamment mis à jour et, dans presque tous les cas, il ne serait pas très efficace de charger tous les articles de blog sur une seule page. C'est pourquoi, pour l'élément de menu du blog, nous n'avons pas créé de lien vers un élément d'ancrage de la même page, mais plutôt avec un nouveau fichier HTML. Cependant, jQTouch le chargera ensuite de manière transparente sur le site..

Cette page de blog sera une liste de tous les articles de blog récents. Alors, que voulons-nous sur cette page?

Une description du blog
Titres de poste
Auteur du post
Post extrait
Date de publication

Donc à peu près les bases. Nous allons envelopper chaque message dans une liste non ordonnée, puis un élément de la liste. Pour rendre le site un peu plus coloré et attrayant, nous allons également formater la date pour qu'elle ressemble à la tendance de la date du calendrier. Si vous ne savez pas de quoi je parle, regardez ci-dessous ou dans l'aperçu de l'article de la semaine dernière. Nous aurons également besoin d'ajouter un peu de style personnalisé, nous allons donc ajouter quelques classes. Comme ça:

  Titre de l'article
 Juin
 30
 Par: Connor Zwick
 Ceci est une courte description. Voici un court extrait du message, permettant au spectateur de juger s’il veut en savoir plus..

Ce n'est pas l'utilisation la plus sémantique des listes, mais cela aura plus de sens en une seconde. En concevant ce thème, nous avons un dilemme. Nous avons un espace d'écran limité. Nous pouvons donc compresser les articles de blog afin que les utilisateurs puissent en voir plus, ou les agrandir comme ci-dessus et donner aux lecteurs une meilleure idée de l'objet de l'article. Ou nous pourrions faire les choses simplement et faire les deux. Dans ce thème, nous allons afficher 5 articles développés comme ci-dessus, puis 5 titres d'articles seulement ci-dessous. Nous pouvons y arriver avec un menu simple:

 Plus de messages:
  Titre de l'article
 Titre de l'article
 Titre de l'article
 Titre de l'article
 Titre de l'article

Assembler la page du blog

Maintenant, nous avons juste besoin de mettre ensemble les deux pièces ci-dessus et de les placer dans une page jQTouch. Il n'est pas nécessaire de créer un lien vers des fichiers JS ou CSS dans la page de blog. Pensez à la page du blog comme à un PHP, si vous êtes familier avec PHP. Sinon, imaginez que jQTouch récupère le contenu, puis l'insère directement dans la page d'index principale. Voici l'intégralité du fichier blog.html:

   Blog
 Accueil 
  Ceci est une courte description du blog. Ici vous décrivez le but. 
  Titre de l'article
 Juin
 30
 Par: Connor Zwick
 Ceci est une courte description. Voici un court extrait du message, permettant au spectateur de juger s’il veut en savoir plus..
 
  Titre de l'article
 Juin
 30
 Par: Connor Zwick
 Ceci est une courte description. Voici un court extrait du message, permettant au spectateur de juger s’il veut en savoir plus..
 
  Titre de l'article
 Juin
 30
 Par: Connor Zwick
 Ceci est une courte description. Voici un court extrait du message, permettant au spectateur de juger s’il veut en savoir plus..
 
  Titre de l'article
 Juin
 30
 Par: Connor Zwick
 Ceci est une courte description. Voici un court extrait du message, permettant au spectateur de juger s’il veut en savoir plus..
 
  Titre de l'article
 Juin
 30
 Par: Connor Zwick
 Ceci est une courte description. Voici un court extrait du message, permettant au spectateur de juger s’il veut en savoir plus..
 
 Plus de messages:
  Titre de l'article
 Titre de l'article
 Titre de l'article
 Titre de l'article
 Titre de l'article
 
 
   Test des événements
 AJAX Accueil 
  Ce serait l'endroit où le courrier irait.

Style personnalisé

J'ai déjà mentionné qu'il faudrait ajouter du CSS personnalisé pour formater la page du blog. Ce tutoriel n'est pas axé sur les bases du CSS, je suppose donc que vous connaissez les principes fondamentaux. Cela étant dit, je vais couvrir tous les CSS3 que nous utilisons, ce qui est malheureusement très peu. Seul le rayon de la frontière, ce qui est assez explicite. Nous utilisons border- [haut / bas] - [gauche / droite] -radius pour donner les coins arrondis du calendrier:

 .titre de blog border-bottom: 1px solid # 333333;  span.blog-title color: #fff; largeur: 100%; bloc de visualisation; rembourrage en bas: 10px;  .post-description, .post-author taille de la police: 12px; marge gauche: 75px;  .post-author margin-bottom: 3px;  .post, .page-author taille de la police: 13px; couleur: #fff; marge inférieure: 5px;  #blog .rounded li position: relative;  .month position: absolute; largeur: 70px; text-align: center; arrière-plan: # aa3939; couleur: # f5f2f2; hauteur de ligne: 28px; rembourrage en bas: 5px; border-top-left-radius: 4px; border-top-right-radius: 4px;  .date position: absolute; largeur: 70px; marge supérieure: 25 px; taille de la police: 40px; text-align: center; arrière-plan: # f5f2f2; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;

Testez-le

Si tout se passe bien, vous devriez avoir un site de travail! Nous avons également couvert les tests dans le dernier tutoriel, mais comme critique, je vais utiliser le simulateur Apple iPhone officiel. Pour exécuter le simulateur, vous devez télécharger le SDK iOS dans le centre des développeurs d’Apple. Pour télécharger le SDK, vous devez d'abord vous enregistrer en tant que développeur iPhone (l'inscription est gratuite), et vous aurez besoin d'un Mac sous OS X Snow Leopard. Vous n'avez pas de Mac ou vous ne voulez pas vous enregistrer en tant que développeur iPhone? Ne vous inquiétez pas, vous pouvez suivre presque tous les autres navigateurs, mais vos résultats risquent d'être moins précis que les miens (espérons que personne ne lira ceci IE6).

Allez-y et ouvrez le simulateur iPhone ou votre navigateur de choix. Si vous avez installé Xcode et le SDK iOS, vous devriez pouvoir rechercher simplement "Simulator" sous le feu des projecteurs pour trouver l'application..

Nous avons fini pour aujourd'hui!

Maintenant que nous avons créé le code HTML pour le thème, tout ce que nous avons à faire est de lui attribuer un thème WordPress, et nous avons un thème mobile fini! N'hésitez pas à jouer avec les fichiers de démonstration et à personnaliser ce que nous avons fait aujourd'hui pour votre propre site.

Code