Share
Vous avez donc créé un thème, un modèle ou une application Web géniaux. Maintenant pour la partie fastidieuse; La documentation. L'écriture du contenu ne sera pas forcément problématique, il s'agira plutôt de créer des fichiers d'aide qui prendront un temps précieux. Markdown, une syntaxe de formatage légère et * vraiment * simple, peut résoudre tout cela pour vous.
Créé par John Gruber, Markdown est une syntaxe de mise en forme de texte qui facilite la création d'éléments HTML de base..
Au lieu d'utiliser des balises HTML (ce qui prend relativement beaucoup de temps à écrire), le travail de Markdown consiste à sortir du processus de votre pensée pour vous permettre de vous concentrer sur le contenu. Parce que la syntaxe est si basique, il est facile à la fois écrire et lis Réduction. Plus loin dans ce didacticiel, nous expliquerons les étapes de la création d'une documentation de thème à l'aide de Markdown. Vous verrez ainsi à quel point il est léger et rapide.!
Une fois que vous avez maîtrisé l'écriture de Markdown, vous aurez besoin d'une sorte d'application d'analyse pour convertir votre markdown en balise HTML..
Le convertisseur Markdown original a été créé en Perl, mais depuis lors, de nombreuses applications (sur plusieurs plates-formes) sont apparues. Examinons certaines des options, à la fois en ligne et exécutées sur votre propre système..
Dingus est une application Web créée par les mêmes personnes que celles qui vous ont apporté Markdown. Il vous suffit de copier et coller votre code Markdown à partir d'un éditeur de texte (ou de le saisir dans la zone de texte). Un clic sur un bouton affichera votre code HTML (ainsi qu'un aperçu). Rien d'extraordinaire, mais un moyen simple de convertir Markdown en HTML.
MarkdownPad est une application Windows géniale qui vous permet de créer facilement des fichiers Markdown (et c'est gratuit!). Elle inclut des fonctionnalités impressionnantes telles que la prévisualisation HTML instantanée, la mise en forme facile avec des raccourcis clavier, la personnalisation CSS, l'exportation HTML et même un mode "sans distraction"..
Mou est une excellente application Mac gratuite qui vous permet d’écrire Markdown de manière simple et esthétique. Il dispose d'excellentes fonctionnalités telles que le style personnalisé, les raccourcis clavier, le code HTML en direct, l'exportation HTML (avec un style CSS en option), l'exportation PDF, la prise en charge de la dictée, etc. Pour ce tutoriel, nous allons utiliser Mou pour créer la documentation de notre thème.
MarkdownNote est une autre excellente application pour écrire Markdown, et l’application iOS est parfaite si vous voulez écrire Markdown à tout moment. Tout comme les autres applications que nous avons couvertes, il dispose de fonctionnalités exceptionnelles, notamment la prévisualisation HTML en direct, les raccourcis clavier et la synchronisation Dropbox..
Jusqu'ici, nous avons décrit Markdown et avons recherché des outils permettant d'écrire Markdown. Créons maintenant une documentation de thème pour un thème inexistant, couvrant ce que vous devriez normalement inclure dans la documentation, la syntaxe de Markdown et les meilleures pratiques..
Au cours des étapes suivantes, nous examinerons Markdown en fonction de nos besoins. Pour un examen plus approfondi de la syntaxe Markdown, consultez Markdown: les entrées et les sorties sur Nettuts.+.
Parce que vous connaissez déjà les entrées et les sorties de votre thème / modèle / application Web, cela peut sembler un peu fastidieux de couvrir les bases. Le but d’un fichier de documentation est de servir de guide aux autres utilisateurs et acheteurs. Il arrive souvent que les utilisateurs aient besoin de connaître l'installation, la personnalisation et certains ajustements, et qu'il vous incombe de les éduquer. Voici ce que nous pourrions vouloir inclure:
N'oubliez pas que la documentation doit être assez simple pour que toute personne disposant des connaissances de base puisse comprendre, mais également comment modifier des fichiers importants. Par exemple, vous ne devez pas nécessairement montrer comment modifier des valeurs CSS spécifiques, mais vous devez indiquer comment accéder à ces fichiers..
Il est temps de passer aux choses amusantes! Allez-y et ouvrez votre éditeur Markdown (je vais utiliser Mou pour Mac). Créez un en-tête pour votre fichier de documentation:
#Theme Documentation
Les éléments de titre peuvent être écrits simplement en ajoutant un à six # devant le contenu. Dans l'exemple ci-dessus, nous avons utilisé un signe # pour créer un h1 élément avec le texte 'Documentation du thème'. Si vous voulez créer un h3 élément, vous écririez ### Rubrique 3.
Créons maintenant une règle horizontale (
***
Une section importante à ajouter dans votre documentation est une section d'informations..
* Nom du thème: * Thème * Auteur: * Suhail Dawood * Créé: * 08/08/2012 * Version: * 1.0.1 *** Merci pour votre achat! Si vous avez des questions sur ce thème, n'hésitez pas à m'envoyer un e-mail à l'adresse **[email protected]** ou à m'envoyer un tweet ** @ tutsplus ** ***
Jetons un coup d'œil à l'équivalent HTML du code Markdown ci-dessus:
Nom du thème: Thème
Auteur: Suhail Dawood
Créé: 08/08/2012
Version: 1.0.1
Merci pour votre achat! Si vous avez des questions sur ce thème, n'hésitez pas à m'envoyer un e-mail à l'adresse [email protected] ou tweet moi @tutsplus
En regardant les deux sources différentes, vous pouvez voir instantanément que Markdown est beaucoup plus intuitif à comprendre et à créer. Au lieu d'avoir constamment à ajouter <'le sable >Markdown vous permet de vous concentrer sur le contenu. Pour accentuer, ajoutez un astérisque avant et après le texte (par exemple. * Texte souligné *). Pour enhardir, ajouter deux astérisques avant et après le texte (par exemple. ** Texte enhardi **). Pour ajouter un saut de ligne, ajoutez simplement deux espaces au point où vous souhaitez insérer un saut de ligne.
Ajoutons maintenant une liste de contenu dans notre fichier Markdown:
## Table des matières 1. Structure HTML 2. Fichiers CSS 3. Fichiers Javascript 4. Fichiers PSD 5. Styles de thème 6. Ajuster le Javascript 7. Ajuster le CSS 8. Compatibilité du navigateur ***
Si nous devions créer ceci en HTML, voici comment cela se présenterait:
Table des matières
- Structure HTML
- Fichiers CSS
- Fichiers Javascript
- Fichiers PSD
- Styles de thème
- Mise au point de Javascript
- Mise au point de CSS
- Compatibilité du navigateur
Au lieu de devoir créer une liste ordonnée et séparer les éléments de la liste, écrivez simplement 1. Premier élément et continuer à ajouter des éléments incrémentés.
Il est important de laisser à vos utilisateurs la manière dont les fichiers du site sont disposés. Puisque nous créons de la documentation pour un thème, nous devons décrire la structure du code HTML du thème. Nous pouvons décrire cela avec le code suivant:
##1. Structure HTML La structure HTML de chaque page est la suivante: * Méta * Lien vers des fichiers CSS * En-tête * Logo * Liens sociaux * Navigation * Contenu principal * Curseur de contenu * Articles * Barre latérale * Recherche * Archives de messages * Liste de diffusion * Lien en Javascript Fichiers * Javascript ***
Simple. Pour créer notre table des matières, nous avons utilisé une liste ordonnée. Dans cette section, nous avons utilisé imbriqué listes non ordonnées. Pour créer une liste non ordonnée dans Markdown, ajoutez simplement un astérisque et un espace avant le texte (par exemple,. * Objet 1). Pour imbriquer des éléments de liste, indentez-les simplement et créez-en un autre..
En particulier dans les thèmes, la documentation CSS est très importante. C'est une bonne idée de décrire les différents fichiers CSS inclus dans le thème, ainsi qu'une brève description de chaque fichier:
## 2. Fichiers CSS Ce thème contient 3 fichiers CSS: * main.css * colors.css * skeleton.css ##### main.css Ce fichier CSS est la feuille de style principale du thème. Il contient toutes les valeurs pour les différents éléments du thème et le jeu de couleurs par défaut. ##### colors.css Ce fichier CSS contient le style de tous les autres jeux de couleurs inclus dans le thème. ##### skeleton.css Ce fichier CSS permet au thème d'être réactif et de s'adapter à différentes tailles d'écran. ***
Veillez à utiliser des en-têtes pour séparer les différentes sections du fichier de documentation. Un fichier de documentation bien conçu entraînera moins d'utilisateurs confus!
Si votre thème comprend des fichiers Javascript, il est conseillé de les décrire au moins dans la documentation:
## 3. Fichiers Javascript Il y a 2 fichiers Javascript dans ce thème: * jquery.js * slider.js ##### jquery.js Ce thème utilise la bibliothèque Javascript de jQuery. ##### slider.js Le curseur de contenu du thème est exécuté sur ce fichier Javascript. Certains paramètres peuvent être modifiés, ils seront abordés dans la section "Tweaking Javascript". ***
Assurez-vous non seulement de lister mais de décrire les fichiers de votre thème. Cela facilitera beaucoup la compréhension du contenu de chaque fichier par l’utilisateur et sa capacité à décider s’il veut ou non y aller..
Même s'il existe une section distincte pour les modèles PSD sur ThemeForest, de nombreux auteurs ont décidé d'inclure les fichiers PSD avec leurs modèles codés pour permettre à l'utilisateur de modifier en toute liberté la conception. Si votre thème contient des fichiers PSD, il peut être judicieux de les décrire comme nous l'avons fait pour tous les autres fichiers:
## 4. Fichiers PSD Ce thème contient 5 fichiers PSD différents: 1. homepage.psd 2. about.psd 3. portfolio.psd 4. blog.psd 5. contact.psd Ces fichiers PSD vous seront utiles si vous souhaitez créer modifications apportées à la conception du thème. Vous pouvez également créer une nouvelle mise en page en utilisant les fichiers PSD existants comme base de travail. ***
Il est recommandé de nommer vos fichiers PSD clairement (par exemple, full-width-page.psd), par opposition à des noms vagues (par exemple, template-003.psd). De cette façon, les utilisateurs peuvent trouver ce dont ils ont besoin sans avoir à ouvrir chaque fichier..
Très probablement, votre thème inclura une sélection de palettes de couleurs parmi lesquelles vos utilisateurs pourront choisir. Si tel est le cas, assurez-vous de décrire comment cela est fait:
## 5. Les styles de thème inclus avec ce thème sont 10 styles de thème différents: 1. Clair 2. Foncé 3. Gris 4. Vert 5. Rouge 6. Orange 7. Bleu 8. Violet 9. Marron 10. Bleu foncé Pour changer ces styles, allez à le backend WordPress, sélectionnez ** Options> Styles ** et sélectionnez le style que vous souhaitez. ***
Dans l'exemple ci-dessus, j'ai répertorié les différents modèles de couleurs inclus dans le thème et expliqué comment les modifier..
Si votre code comprend des fichiers Javascript contenant des paramètres de personnalisation (par exemple, un script de curseur), il serait judicieux de montrer à vos utilisateurs comment manipuler ces valeurs:
## 6. Tweaking Javascript Le curseur de contenu dans le thème est issu de slider.js. Il est possible de modifier quelques valeurs pour modifier l'aspect et la convivialité du curseur. ##### Modification des valeurs Dans slider.js, vous pouvez modifier ces valeurs:auto: true* Boolean: Animer automatiquement, vrai ou faux *vitesse: 1000* Entier: vitesse de la transition, en millisecondes *téléavertisseur: vrai* Boolean: Affiche le téléavertisseur, vrai ou faux *nav: faux* Boolean: Afficher la navigation, vrai ou faux * ***
Le code ci-dessus explique comment un utilisateur peut modifier des valeurs. Pour styler le code, placez le texte approprié dans Mots clés. Des applications telles que Mou ajoutent un style à ces éléments dans l'aperçu en direct et vous pouvez également exporter le code pour conserver le style. Nous parlerons un peu de l'exportation de votre documentation plus tard.
Les fichiers CSS sont très souvent personnalisés par un utilisateur. Ils jugeront certainement utile d’ajouter une section à la documentation indiquant comment accéder aux fichiers CSS afin qu’ils puissent les éditer..
##7. Tweaking CSS Le thème est construit sur un framework responsive, qui permet de voir le contenu de manière optimale sur toutes les tailles d'écran. ##### Changer le CSS Commencez par aller dans le backend de WordPress, ** Thèmes> Thème> Voir la source **. Sélectionnez le fichier * style.css * à afficher et modifiez le code. Ici, vous pouvez changer des choses comme les polices, les tailles, les couleurs, etc. ***
Maintenant que l'utilisateur a accès au fichier CSS, il peut apporter les modifications qu'il souhaite..
C'est une bonne idée d'informer l'utilisateur de tout problème de compatibilité de navigateur:
## 8. Compatibilité de navigateur Ce thème fonctionne bien (-) ou excellent (X) dans les navigateurs suivants: ** IE 6-8 ** - ** IE 9 + ** X ** Chrome ** X ** Firefox ** X ** Safari ** X ** Opera ** X ***
Si vous souhaitez développer cette section, vous pouvez expliquer quelles fonctionnalités du thème souffrent dans certains navigateurs..
Pour compléter notre documentation, nous ajouterons une section pour permettre à nos utilisateurs de savoir comment nous contacter s'ils ont d'autres questions. Ajoutons ce bout de code:
Accentsconagua
