Accentsconagua

Thème WordPress mobile Jour 3

Code
Share

Bienvenue sur le dernier volet de Mobile WordPress Theming. La semaine dernière, nous avons créé la version HTML du thème WordPress que nous allons créer dans ce tutoriel. À la fin de ce didacticiel, nous aurons un thème WordPress de base pouvant être appliqué à n’importe quel site WordPress existant. La semaine prochaine, nous allons emballer et terminer. Allons droit au but!

WordPress Theming Mindset

Pour les lecteurs qui ne sont pas familiers avec la création de thèmes WordPress, vous devez comprendre certains principes fondamentaux du fonctionnement de WordPress avant de commencer à les thèmes. WordPress est un framework de blogging. Il est conçu pour servir le contenu à l'utilisateur de la manière la plus flexible possible. WordPress stocke votre contenu et vous donne les outils pour le servir comme vous le souhaitez. En «personnalisant» les données que WordPress sert, processus également appelé «thématisation», vous pouvez distinguer l’aspect de votre blog. Chaque fois que vous souhaitez modifier ou améliorer un site WordPress, vous devez écrire un plugin ou créer un thème. Les plugins sont appropriés si vous modifiez ou ajoutez des fonctionnalités WordPress de base. Cependant, si vous souhaitez modifier le style de WordPress, éditez ou créez un thème.. Ne modifiez pas directement le code WordPress principal. Cela va probablement gâcher WordPress, surtout lorsque vous devez mettre à jour les versions plus tard.

Partir nu

À moins que vous ne soyez extrêmement novateur et unique, presque tous les thèmes WordPress partagent les mêmes fondements. Ils ont tous besoin d'un en-tête, d'un corps, d'un pied de page, d'un style de base, etc. Cela étant dit, au lieu de réinventer la roue, nous utiliserons un "thème nu". Comme son nom l'indique, un thème nu est le plus nu possible. En général, il n’ya que très peu de style en plus des réinitialisations et des extraits utiles que vous utiliserez probablement dans votre projet. Il existe de nombreuses variétés de thèmes nus sur le net. Donc, en fonction du projet, vous pouvez en choisir un autre. Il n'y a pas de meilleur thème nu. Pour ce projet, j'ai décidé d'utiliser WordPress-naked. Vous pouvez en obtenir une copie sur leur page Google Code. Pour une grande collection de thèmes nus, vous pouvez également consulter l'article de speckboy.com.

Installer WordPress

Nous avons maintenant besoin d’une installation WordPress pour thème. Vous pouvez en installer un sur votre serveur si vous en avez un ou l'installer localement.

Serveur

Si vous installez localement, assurez-vous de disposer d'un serveur de test local. Pour Windows, WAMP ou EasyPHP sont de bons choix. Si vous êtes sur Linux, consultez XAMP. Si sur un Mac, consultez MAMP. Pour ce tutoriel, nous allons utiliser MAMP.

WordPress

Il suffit d'aller sur WordPress.org pour télécharger la dernière version de WordPress.

Installer WordPress sur le serveur

Copiez le répertoire WordPress dans le répertoire de votre serveur et installez-le. Ce n'est pas un tutoriel sur l'installation de WordPress. Il y a beaucoup de tutoriels qui font déjà comme celui-ci.

Une fois WordPress installé, copiez le répertoire du thème nu dans le répertoire. wp-content / themes annuaire. Puis connectez-vous à WordPress, allez à Apparence> Thèmes et sélectionnez les nus.

"Habille le thème"

Maintenant que le thème est actif, nous pouvons le modifier et le voir tout de suite. Commencez par modifier les informations de thème situées en haut de style.css. C'est ici que vous déclarez le nom du thème, l'auteur, etc. Dans ce cas, je l'ai modifié comme suit:

 / ** Nom du thème: URI du thème MyTouch: http://www.connorzwick.com Version: .9 Auteur: Connor Zwick URI de l'auteur: http://www.connorzwick.com Tags: simple, mobile, jqtouch, ajax Licence: GPL Description: Un thème créé dans l’esprit Félixibilité. Permet à quiconque de choisir comme thème mobile. * /

Entête

WordPress commence par regarder le fichier index.php dans le répertoire du thème. Ce fichier est la façon dont le reste des fichiers de thème sont incorporés. Si vous le regardez, vous verrez qu'il saisit tout le contenu de l'en-tête. C'est par là que nous devons commencer. Commencez par supprimer tout, du Doctype au tag, et coller dans ce qui suit:

     <?php if(is_home()) bloginfo('name'); else wp_title("); ?>

Ceci est directement copié de la tête de ce que nous avons fait la semaine dernière, à l'exception de deux choses. Vous remarquerez que tous les liens vers des fichiers JS, CSS ou Image ont été précédés du préfixe PHP modèle. Ceci est une fonction WordPress qui fera écho à l'URL du fichier de modèle. Cela aidera à résoudre tous les problèmes que nous aurions avec la liaison à des fichiers statiques, car nous y avons maintenant des liens dynamiques. Deuxièmement, vous remarquerez que nous avons lié à une feuille de style au lieu de mettre tout notre style directement dans notre en-tête. Ceci est juste pour la propreté. Cela dit, si vous suivez vos propres fichiers, assurez-vous de copier et coller le style dans style.css.

Comme vous pouvez le constater, jQTouch utilise déjà sa magie en ajoutant les liens d’en-tête..

Coiffant

Comme mentionné précédemment, nous avons vidé tous les styles dans une feuille de style. Nous pouvons également supprimer les préréglages accompagnant le thème nu. Quand tout est dit et fait, la feuille de style devrait ressembler à ceci:

 / ** Nom du thème: URI du thème MyTouch: http://www.connorzwick.com Version: .9 Auteur: Connor Zwick URI de l'auteur: http://www.connorzwick.com Tags: simple, mobile, jqtouch, ajax Licence: GPL Description: Un thème créé dans l’esprit Félixibilité. Permet à quiconque de choisir comme thème mobile. * / body.fullscreen #home .info display: none;  #about padding: 100px 10px 40px; ombre du texte: rgba (255, 255, 255, 0.3) 0px -1px 0; taille de police: 13px; text-align: center; arrière-plan: # 161618;  #about p margin-bottom: 8px;  #about a color: #fff; poids de police: gras; texte-décoration: aucun;  / * Commencez la personnalisation ici * / .blog-title 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-description min-height: 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;

C'est presque exactement ce que nous avons créé la semaine dernière. Nous ajouterons du style ici si nous avons besoin de personnalisations supplémentaires..

Index.php

Encore une fois, index.php est le fichier qui intègre le reste des fichiers de thème. Nous devons d’abord appeler le fichier header.php. C'est assez simple:

Nous pouvons maintenant commencer à coller à partir des extraits de la semaine dernière. Nous allons commencer par le corps:

  
 
 
Site WordPress
 Sur

    Nous nous sommes arrêtés avant l'élément de menu du blog pour une raison. Nous ne souhaitons pas que l'élément de blog soit une option si nous n'avons pas de publications. Nous aurons donc besoin de présenter WordPress PHP supplémentaire ici:

      
  • Articles de blog 12
    •

    En gros, nous vérifions si nous avons des publications avec la fonction have_posts (), et si nous affichons l’élément de menu. Si nous ne le faisons pas, nous n’afficherons rien. Nous pourrions probablement nous contenter de laisser de côté le tag else également, mais je tiens à montrer que si vous vouliez y insérer quelque chose comme "Aucun blog en ce moment", vous pourriez le faire. Ensuite, nous finissons juste la déclaration IF

    Maintenant, nous pouvons coller plus de contenu de la semaine dernière:

     
  • 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

    Nous nous sommes arrêtés à nouveau parce que nous ajoutons quelque chose d'autre cette semaine aussi. La semaine dernière, nous avons démontré les capacités AJAX de jQTouch en récupérant le fichier blog.html et en le chargeant. Maintenant que nous sommes en train d’intégrer WordPress, il est beaucoup plus simple d’utiliser un même tag d’ancrage de page. Nous avons donc intégré la partie blog dans la page index.php.

    Ce que nous allons faire est d’abord, vérifiez que nous avons de nouveau des publications. Ensuite, nous allons initier une boucle while et créer un élément de liste non ordonné pour chaque élément de blog. À l'intérieur de cette boucle, vous pouvez voir que nous avons utilisé d'autres fonctions de modèle WordPress. Ils sont tous assez explicites. Pour le moment, M est un raccourci pour une abréviation de trois lettres du mois et j représente le numéro du jour sans le zéro (0, soit 09)..

     
     
     
    Blog
     Accueil 
     
     Ceci est une courte description du blog. Ici vous décrivez le but. 
      
      
       
    • ">
       
       
       
      Par: 
       
      Lire la suite')); ?>
      •

    Puis le reste de la page:

     
     
     
    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..
      •

    À la fin, nous incluons un fichier de pied de page. Pour ce thème, le fichier de pied de page n'est pas utilisé, nous n'en avons donc vraiment pas besoin. Mais je laisse le thème ouvert, nous l'inclurons quand même. Pour ce thème, nous ne voudrons que le tag dedans là.

    PHP Supprimer P du contenu

    Comme vous l'avez peut-être remarqué. Le texte extrait des articles de blog est plus volumineux qu'il ne devrait l'être. La raison en est que nous avons utilisé la fonction the_content (), qui enveloppe l’extrait dans une balise p supplémentaire. Comment réparons nous ça? Nous devons ajouter une ligne en haut du fichier index.php:

    Emballer

    Maintenant, tout va bien. Mais il reste encore beaucoup de choses à couvrir, telles que les messages individuels, la recherche, la pagination et les commentaires, avant que ce thème soit complet et utile! J'espère que vous avez beaucoup appris, et assurez-vous de lire le dernier post de cette série la semaine prochaine!

    Code
    ×