Francis Chouquet Graphiste Lettering

Theme WP – The Morning After: Installation et configuration

0

Comme promis la semaine dernière, j’ai enfin pu faire une analyse approfondie du thème WordPress, The Morning After. J’ai mis la démo sur mon blog test, et ce coup-ci, vous pouvez voir que j’ai avancé sur son utilisation ! 😉

Morningafter best wordpress theme
Je vais donc vous présenter les différents aspects de ce thème très bien construit, bien qu’un peu difficile d’accès pour tout néophyte. Quoi qu’il en soit, il est plutôt assez facilement customisable et son utilisation est très rapide à prendre en main. En fin d’article, je vous propose en format vidéo un petit aperçu sur « comment écrire un article avec The Morning After ». Vous y verrez comment utiliser les fameux « custom fields ».

1. Installation et configuration du thème

Uploader le dossier du thème, appelé « tma », et qui fait 516ko. Pensez à installer aussi les plugins qui sont fournis avec le thème et qui seront importants pour faire tourner certaines fonctions du thème ( email et version imprimable de l’article ).

Une fois le tout installé, vous allez devoir créer deux nouvelles catégories: « Asides » et « Featured ». En effet, le thème utilise les « query_posts » pour afficher séparément ces articles sur la page d’accueil. On en a déjà parlé il y a quelques temps. Quand vous créerez un article et que vous souhaitez le voir apparaître en « aside » ou en « featured », il vous suffira de cocher la bonne catégorie.

Ensuite, vous pouvez, si vous le souhaitez, rédiger une description du blog pour la page d’accueil. C’est ce qu’on voit en haut à droite sur le blog test. Pour cela, il vous faut créer une page intitulée « description ». Son contenu, via paramétrage dans les templates, apparaîtra automatiquement au bon endroit sur la page d’accueil.

Le thème par défaut est fourni avec une image dans le header. Si vous souhaitez modifier celle-ci, vous pouvez le faire très facilement. Pour cela, il vous faut choisir une image de votre choix, la formatter à 965 x 70 pixels et l’uploader via FTP dans le dossier du thème qui correspond: tma > images > bg.

Ici, on peut avoir 3 photos différentes dans le header selon qu’on se trouve sur la page d’accueil, la page d’article ou la page d’archives. Il faudra donc penser à nommer différemment ces images selon leur lieu d’apparition:

  • pour la page d’accueil: home_banner.png
  • pour la page d’article: single_banner.png
  • pour la page d’archives: archive_banner.png

Vérifiez bien que que vos images ont ce nom, sinon elles n’apparaîtront pas sur le blog.

2. Utilisation des « custom fields » (champs personnalisés)

2.1. Présentaion des « custom fields »

Les codex de WordPress fournit une très bonne définition de ce que sont les Custom fields. Pour faire extrêmement simple, je dirais que ce sont des champs qui vont vous permettre d’apporter une info supplémentaire à votre article. Prenons un exemple tout simple:

Je veux ajouter un tag, un mot donc à certains de mes articles. Comme une sorte d’accroche. Je veux que ce mot apparaisse au dessus du titre. Je vais donc créer une clé, disons ici « home_tag » et je vais lui associer des valeurs, qui seront mes tags. Dans le template adéquat, je vais saisir une simple ligne de code, php the_meta(), qui associée à la clé fera apparaître mon tag. Vous saisissez ? Cette ligne de code a l’apparence suivante:

get_post_meta($post_id, $key, $single);

et en remplaçant notamment $key par « home_tag », on va faire apparaître l’info que l’on avait paramétré comme « valeur » dans le champ optionnel.

Là, où ça va nous être utile dans le thème, et pour les images, c’est que dans le code source, c’est la valeur seule qui va apparaître. Par exemple, si on mets comme valeur « image.png », alors on aura « image.png qui va apparaître à l’endroit où on mis le code. Mais si on veut faire apparaître une image, on va juste ajouter l’URL complète avant la valeur et le code source reprendra l’ensemble de l’URL+valeur, ce qui donnera l’URL entière de l’image….Exemple simple pour comprendre facilement:

img src= »<?php bloginfo(‘stylesheet_directory’); ?>/images/latest/<?php echo get_post_meta($post->ID, « latest_home_img », $single = true);

Ici, on a le code qui nous permet d’afficher l’image. Un « img src » classique avec l’URL de l’image et vous voyez qu’un niveau des dossiers, on a mis notre get_post_meta qui va appeler la bonne image que l’on aura paramétré dans l’article. Pour faire simple, on pourrait dire que get_post_meta = valeur champ optionnel. Donc dans le code source on aura l’URL complète avec la valeur de get_post_meta… Pas facile d’expliquer tout ça… J’essaierai de faire un article pédagogique là-dessus.

Quoi qu’il en soit, ici, le fait de paramétrer ces champs optionnels, va faire apparaître des images aux endroits prévus.

2.2. Custom field « Latest Post »

Ici, on va paramétrer un champ optionnel pour afficher l’image qui est au-dessus du dernier article. Le format à respecter pour cette image est 470 x 175 pixels.

  • key = latest_home_img
  • valeur = nom de l’image ( exemple pour ce thème c’est latest_post.jpg ).

N’oubliez pas l’extension de l’image sinon rien ne s’affichera. On ne fera le paramétrage qu’une seule fois. Par la suite, il vous suffira de choisir la bonne clé dans la liste déroulante.

Les images pour ce billet sont à stocker sous le dossier « latest » du dossier images du thème.


2.3. Custom field « Featured Post »

Ici, comme si dessus, on va paramétrer l’image qui va apparaître à gauche de l’article affiché sur la page d’accueil comme « featured » (« A la une »). Le format pour cette image est de 64 x 64 pixels.

  • key = featured_home_img
  • valeur = nom de l’image ( exemple pour ce thème c’est temp.png ).

Les images pour ce billet sont à stocker sous le dossier « featured » du dossier images du thème.

2.4. Custom field « Recent Post »

Ici, comme si dessus, on va paramétrer l’image qui va apparaître à gauche de l’article affiché sur la page d’accueil comme « Recent Posts » (« Articles récents »). Le format pour cette image est de 64 x 64 pixels.

? key = thumb_home_img
? valeur = nom de l’image ( exemple pour ce thème c’est thumb.png ).

Les images pour ce billet sont à stocker sous le dossier « thumbs » du dossier images du thème.

3. Envoi par email ou impression de l’article

En allant sur la page article, vous pouvez remarquer que l’on peut envoyer ou s’envoyer un email avec le lien vers l’article en question. Je trouve l’idée plutôt intéressante et à creuser. Pourquoi ne voit-on pas cette option plus souvent. Et surtout l’autre d’ailleurs, la possibilité d’imprimer l’article, avec ou sans les commentaires. Ca je trouve ça très bien et je pense le proposer rapidement sur le blog. Parfois, on ne veut pas rester des heures accroché à son écran. Pouvoir imprimer l’article peut être d’un grand service…même si ce n’est pas bon pour l’environnement…

Tout ce fait via 2 plugins, wp-mail et wp-print, qui sont fournis avec le thème. Reste à faire les paramétrages selon votre volonté.

4. Remplacer le titre et la description du blog par son propre logo

Vous pouvez très facilement virer le titre et la description du blog et mettre votre logo à la place. C’est d’ailleurs ce que j’ai fait en exemple sur le blog test. Pour ce faire, il faut aller faire des modifs dans le template header.php. Dans le « body », vous avez la balise « title ». Elle comprend le titre et la description du blog. En dessous, il y a une ligne de code qui est en commentaires. Virer les commentaires devant et derrière ce code et placez-les autour de la balise title. Maintenant, les titres et descriptions n’apparaitront plus et WordPress ira chercher l’image sitelogo,png placé dans le dossier « bg » du dossier « images » du thème.

Attention, cette image doit s’appeler obligatoirement « sitelogo.png » et ne doit pas dépasser 400×90 pixels.

5. Placements pour les encarts de pub

Des encarts pour la pub ont été prévu. Ils sont de 250×250 pixels sous « recent posts » sur la homepage, et de 180 pixels de large sur les pages articles, sous les catégories. Pour insérer votre code, il faut aller le placer dans des templates prévus à cet effet: ad_home.php pour la page d’accueil et ad_side pour les autres pages.

Pour terminer, et comme promis au début de l’article, voici une petite vidéo pour vous montrer comment rédiger un article avec le thème « the morning after ». C’est mon premier screencast, donc je vous demanderai d’être indulgent. Cette vidéo n’est pas encore localisé sur un player. Je suis en train de tester différentes solutions. En attendant, ça ne vous empêchera pas de visualiser la vidéo au bon format !

VIDEO SUR LA REDACTION D’UN ARTICLE

75 Commentaires

  • Max

    Mea-culpa, la soluce est notée plus haut… je vais essayer @ plus 🙂

  • Max

    Nickel !

    Une fois le thème modifié, je veux faire avec ce thème un blog multilangues (français, anglais et espagnol), d’autres personnes ont-elles déja fait ça ? si quelqu’un veut bosser avec moi là dessus, je ne serais pas contre…

    Je ne souhaite pas mettre en place un outil de traduction mais proposer aux lecteurs un contenu traduit (plus pro et sans doute meilleur pour le référencement).

    J’ai lu ton article fran6 avec intérêt :
    http://www.fran6art.com/webdes.....tilangues/
    et je me demande vers quel solution m’orienter…. un conseil ? des retours d’expériences ?

    Merci d’avance à tous ! 🙂 bye bye

  • Bonjour Max,

    J’ai découvert un site tres interessant qui devrait répondre à ta question sur le multilangue. Le webmaster a créé un plugin à télécharger. Plugin YammYamm (WordPress)

    Voir son site : http://www.jide.fr/francais/te.....wordpress/

    A+ Xav.

  • Max

    Salut Roman,
    merci à toi pour ce lien, je vais étudier ça de près.
    en relation avec ce plugin il y a aussi un forum dédié :
    http://www.wordpress-fr.net/su.....279-1.html
    bye

  • Max

    Je devais être fatigué… mon lien correspont au plugin Polyglot …. pfff
    Lequel est le meilleur ?… une idée ?.. 🙂 🙂

  • Max

    Je devais être fatigué… mon lien correspond au plugin Polyglot …. pfff
    Lequel est le meilleur ?… une idée ?.. 🙂 🙂

  • Max

    En tout cas, avec Polyglot ça marche nickel 😉

  • Max

    Encore moi…. je me suis mis en mode spamming…
    « Est ce que quelqu’un aurait eu vent d’un fichier .po pour ce thème ?… »

    Merci

  • Re-question bête à propos de The Morning After : comment faites-vous un saut à la ligne avec ce thème sachant que WordPress vire systématiquement (et j’ai jamais compris pourquoi) les et les ?
    Merci beaucoup de votre réponse…

  • Bonsoir,

    J’essaye de suivre vos conseils pour remplacer les # de header pour que les liens en haut de la page fonctionnent…

    Problème : Que mettre comme liens !!! pour Home, archives,… ? Je seche.

    Autre Question : Lorsqu’on écrit une page (pas un article) et qu’on l’envoie sur le site… elle n’apparait nulle part !! N’est dans aucune catégorie…

    Je voudrais pouvoir faire une page differente par semaine sur un thème précis. Comment faire puisque rien n’invite à s’y rentre ?

  • Re-bonsoir !!

    La galère continue.

    Cette fois c’est la vidéo que je n’arrive pas à insérer dans mes articles !!

    Je fais : Link, je renseigne l’adresse qui m’est donnée sur youtube… et RIEN.

    Je ne sais pas quoi faire d’autant que les plugins qui sont proposés sont fait pour des versions antérieures à 2.3.1

  • J’ai eu Arun (l’auteur du thème) par mail qui précise qu’un fichier .po devrait être proposé bientôt.
    🙂

  • Max > Tu utilises un plugin video pour cela ? lequel ? regardes avec un autre thème pour voir si le souci provient du plugin ou du thème

  • nicolas

    j’ai trouvé … http://www.darrenhoyt.com/2007.....stomfields

    🙂 merci pour l’article Fran6 !
    Nico

  • j’ai utilisé et customisé le theme morning after vous en pensez quoi :

    http://subitoshop.info/wordpress/

  • Bonjour, suite à ton article sur TMA, j’ai téléchargé ce thème, pour mes débuts sur wordpress: je ne sais pas pourquoi, après avoir activé le plug-in wp-print, l’icone s’affiche bien sur mes articles, en revanche, lorsque l’on clique dessus, s’ouvre une page sur laquelle est écrite :

    Oops!

    Looks like the page you’re looking for has been moved or had its name changed. Or maybe it’s just fate. You could use the search box in the header to search for what you’re looking for, or begin again from the home page.

    peux tu m’aider ou me dire où je dois me renseigner pour savoir modifier cela?
    Merci beaucoup d’avance!!

  • Très bel article Francis !

    Néanmoins, je ne sais pas si c’est parceque je n’ai pas encore bu le café mais je n’ai pas capté l’utilisation d’un custom field pour l’association d’une image à chaque billet sur les articles récents…

    Un peu bête parfois, je vais essayer d’aller jeter un oeil sur le Codex (après le café) mais si quelqu’un a une explication simple…

    Si j’ai bien compris, telle image peut être associée à telle catégorie ?

  • Bonjour à tous, comme beaucoup d’entrevous j’ai moi aussi craqué pour le thème the morning after…très beau et fonctionnel.

    Mon site est encore en construction, mais déjà en ligne…, et j’ai besoin de quelques conseils pour customiser le thème.

    Comment faut-il faire pour afficher environ 5 articles « en vedette » / featured, sur la page d’accueil, car sur la configuration par défaut, le nouvel article chasse le précédent.
    A ce propos, ou va l’ancien article ? Il est impératif de le classer dans une autre catégorie n’est-ce pas ?

    Autre question, Comment fait-on pour limiter le nombre de tags à afficher sur la page d’accueil, car par défaut et avec un grand nombre de tags, cela casse la présentation générale du site je trouve.

    Enfin je souhaite pouvoir créer un article et le faire renvoyer vers une page en particulier. Exemple je crée un article intitulé « Annuaire » et je le place en featured pour qu’il s’affiche sur la page d’accueil, mais je souhaite que lorsque l’on clique dessus, on puisse directement accéder à la page Annuaire.

    Merci d’avance pour votre aide !

  • Stefan

    Merci de partager vos découvertes,

    Des années après sa parution, ce thème se distingue toujours par son efficacité ergonomique.

    Malheureusement, j’ai constaté un problème de compatibilité avec la dernière version de WP 2.9.2, comme indiqué ci-dessous :

    Warning: fopen(C:\wamp\www\wordpress/wp-content/themes/tma/style.css) [function.fopen]: failed to open stream: Permission denied in C:\wamp\www\wordpress\wp-includes\functions.php on line 3598
    Warning: fread() expects parameter 1 to be resource, boolean given in C:\wamp\www\wordpress\wp-includes\functions.php on line 3601
    Warning: fclose() expects parameter 1 to be resource, boolean given in C:\wamp\www\wordpress\wp-includes\functions.php on line 3604

    Connaîtriez-vous une solution pour contourner ce problème ?

    Merci d’avance pour votre attention et votre aide.

  • Bonjour,

    Après de longues recherches pour trouver un thème correspondant à mes attentes je suis tomber, comme beaucoup, sur ce superbe thème qui m’apporte beaucoup de satisfaction !

    Merci à Fran6 pour ses précieux conseils !

    The Morning After fonctionne très bien avec WP 3 et surtout il est possible de le personnaliser relativement facilement, même pour un débutant WP comme moi.
    Il conccurence plus d’un thème premium payant !

    Je n’ai pas encore totalement terminé de l’arranger à ma sauce mais pour ceux que ça intéresse de voir les modifs qu’il est possible de faire voici l’adresse de mon site :
    http://www.youcarpress.com

    Vos commentaires sont les bienvenues.

    Ji.P

  • audrey

    bonjour,

    super thème en effet
    j’ai juste un problème : les images des Latest Post ou des Featured ne s’affichent pas sur la home. J’ai réinstallé plusieurs fois wordpress et le thème sans succès…
    Dans le code de home.php c’est sans doute cette ligne qui doit appeler l’image du dernier post :

    mais il n’affiche rien sur la home. Dans le code source de la page d’accueil le div est vide :

    J’ai essayé en incluant une image dans le post, en « image à la une », et aussi en créant un champ personnalisé avec le nom latest_home_img
    Rien à faire, toujours pas d’image sur la home.

    Auriez-vous une idée pour me dépanner ?

    merci!

  • audrey

    désolée pour le bruit
    je n’avais pas vu que le serveur tournait avec php4… un passage en php5 a résolu le pb.

Success, your comment is awaiting moderation.