Manuel d'utilisation de QRecipeWriter

1.1. Édition de la feuille de style CSS

Connectez vous via FTP à votre serveur (grâce à Filezilla par exemple). À partir de la racine de votre site Wordpress, accédez au dossier wp-content / themes, et de là au dossier de votre thème Wordpress. C'est là que tout va se passer.

Il faut maintenant ajouter les balises CSS. Soit vous les ajoutez directement dans le fichier style.css de votre thème, mais les modifications seront supprimées en cas de mise à jour du thème, soit vous utilisez un fichier css à part et vous le référencez dans le fichier index.php. En cas de mise à jour du thème, vous n'aurez qu'à replacer cette référence. C'est cette solution que je vous préconise.

Contenu CSS à ajouter

body {
  text-align: justify; /*Le texte sera aligné pour vos recettes 
		       mais pour tout votre site sauf indications 
		       contraires (plus joli)
		       Contactez-nous si vous ne voulez le faire que 
		       pour les recettes. A supprimer si vous ne 
		       voulez pas de texte justifié.*/
}

.shadow { /*Crée une ombre sous les photos d'illustration*/
  -moz-box-shadow: 2px 2px 5px #888;  
  -webkit-box-shadow: 2px 2px 5px #888;  
  box-shadow:2px 2px 3px #888;
}

#detail { /*Place les détails (temps de préparation, cuisson, 
	  repos, toujours en dessous de la photo et de la 
	  description*/
	clear: both;
	overflow: hidden; /* Précaution pour IE 7 */
}

.lbold { /*Numérotation des indications de préparation en gras 
	 et gris*/
    font-weight: bold;
    color: #6B6B6B;
}

li span { /*Les sous-listes sont elles en noir et normal*/
	font-weight: normal;
	color: black;
}

ol.lbold li { /*Marge*/
	margin: 10px 0px;
}

.printonly { /*Ne pas afficher ce qui est prévu pour l'impression uniquement*/
	display: none;
}

Via un fichier css séparé

Télécharger le fichier de thème style-qrecipewriter.css à cette adresse. (version commentée)

Ensuite, téléchargez ce fichier sur votre serveur dans le dossier de votre thème Wordpress où vous êtes allé comme indiqué précédemment.

Enfin, éditer le fichier header.php et insérez le code suivant juste avant la balise </header> :

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style-qrecipewriter.css" />

Voilà, votre CSS est prêt !

Via l'édition de la feuille de style style.css

Cette méthode alternative vous permet de ne modifier que le fichier style.css de votre thème. Vous devez simplement éditer le fichier style.css présent dans le dossier de votre thème auquel vous avez accédé plus haut, et ensuite ajouter à la fin du fichier le code CSS suivant :

body {
  text-align: justify;
}

.shadow {
  -moz-box-shadow: 2px 2px 5px #888;  
  -webkit-box-shadow: 2px 2px 5px #888;  
  box-shadow:2px 2px 3px #888;
}

#detail {
	clear: both;
	overflow: hidden; /* Précaution pour IE 7 */
}

.lbold {
    font-weight: bold;
    color: #6B6B6B;
}

li span {
	font-weight: normal;
	color: black;
}

ol.lbold li {
	margin: 10px 0px;
}

.printonly {
	display: none;
}

(Ou alors ajouter le code commenté cité plus haut).

Votre feuille de style CSS est maintenant bien configurée.

1.3. Installation de Recipes Printer sur votre serveur

Recipes Printer est un module optionel vous permettant de proposer automatiquement une version imprimable de votre recette pour chaque recette publiée.

1. Première étape : installation du plugin Shortcode Exec PHP

Commencez par télécharger la dernière version de Shortcode Exec PHP. Installez-la sur votre site Wordpress. Puis, dans le panel d'administration, aller dans Outils → Shortcode Exec PHP. Ajouter un shortcode ou modifier celui d'exemple comme ceci (en bas de la page) :

Balise shortcode (entre les 2 crochets) : VERSION_IMPRIMABLE

Contenu du shortcode :

$id=get_the_ID();
echo '<a href="print.php?id='.$id.'" target="_blank"><img src="images/printer.png" alt="VERSION IMPRIMABLE" /></a>';

Puis cliquez sur Save (ou Add si vous en créez un nouveau).

2. Seconde étape : copier les fichiers requis sur le serveur

Télécharger en cliquant ici l'archive contenant l'ensemble des fichiers requis. Décompresser l'archive et copier l'ensemble des fichiers et dossier contenus dans le dossier RecipesPrinter à la racine de votre site wordpress. Si vous avez déjà un dossier images, copiez le contenu du dossier images fournit dans votre dossier images.

Remarque : il doit également se trouver à la racine un fichier nommé wp-blog-header.php. Sur certaines configurations serveur, vous pouvez avoir une erreur vous disant qu'il ne trouve pas ce fichier alors qu'il est bien à la racine. Dans ce cas, il faut ouvrir le fichier print.php fournit, et modifier la première ligne en indiquant le chemin complet menant à ce fichier. Si vous ne savez pas quel est ce chemin, créez un fichier test.php à la racine (au même endroit que les autres fichiers) et mettez-y le code suivant :

<?php
echo $_SERVER["DOCUMENT_ROOT"];
?>

Puis accédez simplement à ce fichier depuis votre ordinateur. Vous n'avez plus qu'à placer l'adresse du dossier indiqué en amont de wp-blog-header.php dans print.php.

Remarque 2 : parfois, vous aurez une page blanche sans erreur. Dans ce cas, faites les modifications ci-dessus et voyez si ça corrige le problème.

2.1. Paramètres généraux

1 : Choisissez le dossier par défaut contenant les images en cliquant sur Modifier. C'est ce dossier qui vous sera toujours proposé quand vous choisirez l'image d'illustration ou les images secondaires.

2 : C'est le dossier temporaire utilisé par le logiciel. Normalement, vous n'avez pas besoin de le modifier.

3 : Inscrivez ici la commande qui lance le navigateur. Ce navigateur sera le seul utilisé par le logiciel quand il en aura besoin. Sous Linux, vous pouvez taper firefox ou bien chromium ou un autre navigateur, selon vos préférences. Inutile normalement d'indiquer l'adresse complète de l'exécutable du moment qu'il est dans un dossier du PATH (/usr/bin, /usr/local/bin). Sinon, tapez l'adresse complète ou cliquez sur "..." pour sélectionner l'exécutable. Sous Windows, cliquez sur "...", et naviguez dans les dossier puis sélectionner l'exécutable .exe du navigateur de votre préférence et cliquer sur "Ouvrir".

4 : C'est le dossier contenant les sauvegardes. Normalement, vous n'avez pas besoin de modifier ce qui est indiqué par défaut. Ce dossier contiendra toutes les sauvegardes de recettes que vous enregistrerez, dans un format que seul QRecipeWriter pourra comprendre.

5 : Votre pseudo Wordpress. Il sera utilisé pour l'aperçu de votre recette uniquement.

6 : Chemin vers les fichiers du dictionnaire nécessaires pour la correction orthographique. Si ce champ est rempli dès le premier lancement, c'est que le logiciel a trouvé pour vous votre dictionnaire français. Sinon, vous devez indiquer le path : cherchez dans votre système un dossier contenant 2 fichiers : un fichier .dic et un fichier .aff, correspondant à votre langue d'écriture. Si vous n'en avez pas, vous pouvez en télécharger à cette adresse.

7 : Éditeur avancé d'images. Si vous êtes sous Linux et que gimp est installé, il vous sera proposé par défaut. Dans tous les cas, vous pouvez le modifier de la même manière que pour le navigateur. L'éditeur avancé est utilisé pour éditer l'image principale.

3.1. Description générale

1 : Inscrivez ici le titre de la recette. [OBLIGATOIRE]

2 : Choisissez le ou la catégorie(s) de votre recette. [OBLIGATOIRE]

3 : Cliquez sur ce bouton pour sélectionner l'image illustrant votre recette, dans le sélectionneur de fichier qui s'affichera. Le fichier image doit être au format JPG avec une extension .jpg (en minuscule). L'image doit avoir une taille suivant le rapport Largeur : Hauteur égal à 100 : 75 (par exemple une image de 1000 x 750 px). [OBLIGATOIRE]

4 : Séléctionnez le temps de préparation de la recette (heures et minutes). [OBLIGATOIRE : au moins l'heure ou les minutes]

5 : Séléctionnez le temps de cuisson de la recette (heures et minutes). [FACULTATIF]

6 : Séléctionnez le temps de repos de la recette (jours, heures et minutes). [FACULTATIF]

7 : Séléctionnez le nombre de personnes pour lesquelles les quantités données dans les ingrédients sont prévues. [OBLIGATOIRE]

8 : Précision sur le nombre de personnes, qui sera indiquée entre parenthèses à côté du nombre de personnes. [FACULTATIF]

9 : Écrivez ici la description de la recette. Elle apparaîtra à côté de la description et le début sera intégré à l'Extrait. L'extrait est utilisé par certains thèmes Wordpress, et est affiché en dessous de la photos dans la liste des articles, donc des recettes dans notre cas. [OBLIGATOIRE]

10 : Écrivez ici la liste des ingrédients. Écrivez chaque ingrédient, par exemple 3 carottes, puis tapez sur Entrée, et inscrivez l'ingrédient suivant. La liste des ingrédients apparaîtra au fur et à mesure dans le champ au-dessus. Vous pouvez aussi utiliser des sous-listes, voir le paragraphe correspondant. [OBLIGATOIRE]

11 : Écriver ici la liste du matériel nécessaire. Comme pour les ingrédients, quand vous tapez sur Entrée, l'élément en cours d'écriture s'ajoute à la liste dans le champ au-dessus. [FACULTATIF]

12 : Écrivez ici la liste des instructions de préparation. Comme précédemment, quand vous appuyez sur Entrée, l'instruction en cours d'écriture s'ajoute dans le champ au-dessus. La liste est cette fois numérotée. Dans ce cas aussi, vous pouvez utiliser les sous-liste, voir le paragraphe correspondant. [OBLIGATOIRE]

13 : Enfin, écrivez la liste des conseils. Comme précédemment, quand vous appuyez sur Entrée, le conseil en cours d'écriture s'ajoute à la liste dans le champ au-dessus. [FACULTATIF]

14 : les outils :

G : mettre en gras, dans le champ de texte sélectionné parmi description, ingrédients, matériel, instructions de préparation et conseils. Si un texte est sélectionné, le texte est mis en gras, sinon les balises sont ajoutées et le curseur est placé entre les 2 balises.
I : mettre en italique. Fonctionne de manière similaire à Gras.
S : souligner le texte. Fonctionne de manière similaire à Gras.
... : commenter dans une liste. Voir le paragraphe correspondant.
Lien : insérer un lien. Voir le paragraphe correspondant.
Img : insérer une image. Voir le paragraphe correspondant.
Vidéo : insérer une vidéo youtube. Voir le paragraphe correspondant.
ABC : correction orthographique. Voir le Paragraphe correspondant.
noPrint : Afficher la sélection en ligne mais ne pas l'imprimer dans Recipes printer (voir paragraphe 1.3). Nécessite que Recipes printer soit activé dans les préférences.
printOnly : Inversement, imprimer la sélection dans Recipes printer mais ne pas l'afficher dans la version en ligne. Nécessite que Recipes printer soit activé dans les préférences.

15 : Boutons pour enregistrer, visualiser un aperçu de la recette, ou envoyer la recette.

16 : Indique l'état du programme.

3.3. Insérer des commentaires dans les listes

Vous pouvez insérer des commentaires à l'intérieur des listes pour les ingrédients, le matériel, les instructions de préparation et les conseils.

Pour cela, placez le curseur dans le champ correspondant, et cliquez sur l'icône "commentaite" (bulle bleue avec ...). L'icône devient alors avec un fond rouge : ceci indique que vous écrivez un ou des commentaire(s). Tant que vous ne re-cliquez pas sur le bouton "commentaire", vous écrivez des commentaires, c'est-à-dire des lignes qui ne seront pas précédées de la puce de la liste. Attention, si vous changez de champ sans désactiver les commentaires, quand vous y reviendrez, ce sera toujours dans les commentaires (le bouton sera rouge). Cliquez sur le bouton pour ne plus écrire de commentaires.

3.5. Insérer un lien

Vous pouvez insérer un lien dans la description, ainsi que dans les champs d'écriture des ingrédients, du matériel, des instructions de préparation ainsi que des conseils.

Pour cela, sélectionner le texte auquel sera ajouté le lien et cliquez sur le bouton "Lien". Dans la fenêtre qui apparaît, choisissez la cible hypertexte du lien. Cliquez sur OK. Le texte sélectionné se verra attribuer des balises <Li> et </Li> de part et d'autre, où i est un numéro entre 1 et 99. L'adresse du lien correspondante est stocké dans le logiciel et sera ajoutée au moment de l'envoi de la recette.

Vous pouvez modifier la cible d'un lien déjà créé. Pour cela, sélectionnez le mot en incluant les 2 balises de lien ouvrante et fermante, et cliquez sur le bouton "Lien". Modifier la cible et cliquez sur "ok". La cible a alors été modifiée.

3.7. Insérer une vidéo youtube dans les instructions de préparation ou dans les conseils

Pour cela, placer le curseur là où la vidéo doit être insérée et cliquer sur le bouton avec l'icône vidéo. Vous pouvez alors coller un lien youtube et modifier quelques paramètres comme la taille de la vidéo. Vous pouvez aussi importer le lien youtube et les paramètres depuis le code html (<iframe...>...</iframe>) fournit par youtube. Si vous voulez supprimer la vidéo, supprimez la balise en entier.

3.9. Édition de l'image principale

Vous pouvez éditer l'image principale grâce au logiciel indiqué dans les options. Pour cela, cliquez sur l'icône à côté du bouton pour sélectionner l'image principale (3). Dès que l'image modifiée sera enregistrée par l'éditeur, elle sera prise en compte par QRecipeWriter.

3.11. Visualiser un aperçu de la recette

Une fois que tous les champs OBLIGATOIRES sont remplis, vous pouvez cliquer sur Aperçu pour visualiser un aperçu de la recette. Dans votre navigateur, vous verrez votre recette dans le contexte du site Conseils en Cuisine !, mais la recette elle-même, en dehors du contexte aura la même apparence sur votre site.

Pour afficher un aperçu, vous pouvez également passer par le menu Recette > Aperçu, ou utiliser le raccourci clavier F6.

3.13. Ouvrir une recette précédemment enregistrée

Pour cela, ouvrez le menu Fichier et sélectionnez Ouvrir une recette existante. Dans la fenêtre qui s'affiche, sélectionnez le fichier .rct qui porte le nom de la sauvegarde que vous avez indiqué lors de l'enregistrement.

Vous pouvez également utiliser le raccourcis clavier Ctrl + O.

3.15. Mises à jour

Pour rechercher si une mise à jour du logiciel est disponible, allez dans Outils > Recherche de mises à jour. Si une mise à jour est disponible, il vous sera proposé de la télécharger directement depuis le logiciel.