EXTATIC, votre nouveau template WordPress
Publié le 24/02/16 dans EXTATIC.
EXTATIC, votre nouveau template WordPress
La nouvelle version du template EXTATIC est disponible en téléchargement.
Mise à jour du 01/03/16 :
Le template supporte la pagination des commentaires et l’utilisation d’une lightbox pour certains visuels.
Pour utiliser cette nouvelle fonctionnalité, rien de plus simple. Il vous suffit de mettre votre balise
<img> entre les balises <figure class="lightbox"> </figure>. Le script permettra à l’utilisateur de cliquer sur l’image pour mieux la visualiser.
Après quelques jours de développement et une bonne phase de recette, le template EXTATIC pour WordPress est enfin disponible.
Il n’est pas – encore – parfait et il nécessitera sûrement une ou deux mises à jour, mais il répond entièrement à mes besoins et c’était surtout un excellent exercice pour ne pas perdre la main et découvrir de nouvelles fonctionnalités!
Envie de le télécharger? Rien de plus simple, cliquez sur cette icone :
Un nouveau template?
EXTATIC est un template responsive, développé spécifiquement pour la plateforme WordPress (à partir de la version 4) et compatible avec la plupart des navigateurs récentes.
Pour quelle utilisation?
EXTATIC est libre de droit. Vous pouvez le télécharger, le modifier, l’installer, l’étudier… Tout ce qui vous passe par la tête.
Je pars du principe que je pose souvent des questions sur des sites de développement quand je ne trouve pas de solution à mes problèmes. Il est donc normal que je partage ce que j’ai appris et les conseils que j’ai reçus.
En d’autres mots, si ce thème vous plaît, vous pouvez le garder.
Il est à vous.
Quelles sont ses fonctionnalités?
EXTATIC propose une arborescence de thème WordPress classique et se présente de la façon suivante :
Arborescence :
header.php
Rien de particulier ici, il s’agit principalement du contenu de la balise <head> </head>.
menu.php
Le menu est appelé au sein de chaque template de page.
Nous avons le logo du site qui renvoie à la page d’accueil et un formulaire de recherche qui s’étend lorsque l’utilisateur l’utilise.
footer.php
Le footer est également appelé au sein de chaque template de page. Il est découpé en deux parties :
Il comporte un pre-footer qui affiche le dernier tweet du compte Twitter auquel il est lié.
<div id="lastTweet">
<a class="twitter-timeline" data-widget-id="352440751034101760" data-theme="ligth" data-chrome="noheader nofooter noborders noscrollbar transparent" data-tweet-limit="1"></a>
<script>
!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");
</script>
</div>
Pour lier ce code à votre compte Twitter, vous devez remplacer la valeur de l’attribut data-widget-id par votre identifiant.
Si vous ne connaissez pas votre identifiant, vous devez créer un widget Twitter depuis votre compte et remplacer le code ci-dessus par celui qui sera généré.
Pour ce faire, rien de plus simple :
Rendez-vous sur la page de Paramètres de votre compte Twitter en vous étant au préalable identifié(e) (vous pouvez aussi cliquer sur votre image de profil dans la barre d’administration, puis sur Paramètres). Ensuite, dans le menu de gauche, cliquez sur « Widgets », l’avant dernier onglet.
Si c’est votre premier widget, cliquez sur « Créer un widget » en haut à droite. Modifiez les paramètres selon vos besoins, et à nouveau, cliquez sur « Créer un widget ».
Paramètres > Widgets (onglet) > Créer un widget > Créer un widget
La page se rafraîchit et en dessous de la timeline (l’encadré avec tous vos tweets), vous aurez un code généré. C’est dans ce code que vous trouverez votre data-widget-id.
Si ce n’est pas votre premier widget, cliquez sur « Éditer ». Le code se trouve en dessous de la timeline.
Bien sûr, vous pouvez remplacer l’ensemble du code du template par celui de Twitter si vous le souhaitez, mais vous pourriez avoir quelques surprises : le code du template EXTATIC n’affiche que le dernier tweet, et il est parfaitement adapté au fond coloré.
La deuxième partie du footer est plus classique avec un découpage en trois parties :
- L’affichage automatique des catégories de votre blog, ou sitemap.
- La liste des différents sites et applications sur lesquels vous êtes présents.
- La liste des différentes façons de vous contacter.
Enfin, nous avons le copyright du site avec l’affichage de l’année de création du site et de l’année en cours, ainsi qu’une mention sur l’auteur du template, que vous pouvez modifier.
JavaScript
Le footer contient aussi les différents scripts JS nécessaires au bon fonctionnement du thème. Nous avons dans l’ordre :
- Script qui gère l’affichage de la vignette de l’article en plein écran et le décalage du contenu pour les template
single.phpetpage.php. - Script qui gère la mise en place de la vignette en background de la balise
<h2>. - Script qui ajoute une fonction Lightbox aux images intégrées entre les balises
<figure class="lightbox"> </figure>. - Script qui affiche un bouton permettant de revenir en haut de page quand l’utilisateur a dépassé la ligne de flottaison de la page.
- Script Google Analytics qui permet de suivre l’utilisation de votre site. Pour que ce script soit fonctionnel, vous devez remplacer la valeur
'identifiant'par votre identifiant Google Analytics.
Javascript:Lightbox
Voici un exemple de Lightbox :
index.php
L’index est la page par défaut, celle qui est chargée lorsque l’utilisateur entre l’adresse de votre site dans son navigateur. Il affiche les articles sous forme de vignettes (preview), avec un titre, la catégorie de publication et la date.
Pour certains articles, il est possible de rajouter un champ personnalisé qui apparaîtra dans la preview.
Vous pouvez directement paramétrer dans WordPress le nombre d’articles que vous souhaitez afficher par page.
En bas de page, les boutons de navigation précédent et suivant sont affichés.
search.php
Cette page est très similaire à la page index.php et affiche un rendu semblable, à ceci près que si la recherche ne donne pas de résultat, nous proposons à l’utilisateur du site de découvrir les derniers articles publiés.
Les mots clés inscrits dans la barre de recherche sont gardés au chargement de cette page. De plus, une animation de rétrécissement de la barre de recherche est jouée pour répondre à l’agrandissement de celle-ci lorsque l’utilisateur inscrit des mots clés.
single.php
Cette page affiche en pleine page la vignette de l’article, que nous avions découvert en preview de la page index.php. Le contenu de l’article vient recouvrir cette vignette dès lors que l’utilisateur fait défiler la page.
En fin d’article, nous retrouvons un encadré qui recense les 3 derniers articles issus de la même catégorie que l’article affiché.
page.php
Cette page est très similaire à la page single.php, à ceci près qu’elle n’affiche pas en fin d’article les articles similaires mais les derniers articles publiés.
comments.php
Il s’agit du template dédié aux formulaires qui permettent d’écrire des commentaires. C’est dans ce template que vous pouvez changer la terminologie et les balises de mise en page des formulaires.
404.php
C’est le template de la page qui s’affiche quand l’utilisateur n’est pas arrivé sur la page qu’il recherchait, soit parce que celle-ci a été déplacée, qu’elle n’existe plus, ou parce que l’adresse entrée est erronée.
En bas de page, les 3 derniers articles sont affichés afin d’inciter l’utilisateur à rester sur votre site et découvrir différents articles.
functions.php
Il ne s’agit pas d’un template de page, mais il permet d’ajouter des fonctionnalités à votre template.
Chaque fonctionnalité est entourée par des balises PHP de la façon suivante : <?php fonctionnalité ?>.
Liste des fonctionnalités, dans l’ordre :
- Désactivation de la barre d’administration WordPress.
- Activation des vignettes pour les articles.
- Modification de l’affichage des commentaires.
- Modification de l’ordre d’affichage des formulaires de commentaire : la zone d’écriture du commentaire prend place après les champs Nom, Adresse de contact et Site internet.
- Mise en place d’un gravatar par défaut reprenant le thème du site.
- Mise en place du shortcode
http://extatic.net/wp-content/themes/extaticqui permet d’utiliser le lien relatif du dossier du thème pour insérer des images directement dans un article sans en écrire le lien absolu (ce qui est utile pour des icônes souvent utilisées, par exemple).
Feuilles de style :
style.css
La mise en page du template est entièrement rédigée dans cette feuille de style. La majorité du code est présenté sous différentes rubriques, aussi appelées regions, ce qui permet d’ouvrir et de fermer des pans de code par thématique, comme par exemple en fonction d’une page type ou d’une fonctionnalité donnée.
/* #region index.php */
tag {
propriété: valeur;
}
/* endregion */
minStyle.css
Le préfixe min indique qu’il s’agit de la version minifiée de style.css. Si vous voulez faire des modifications dans la mise en page, faites les dans style.css, puis utilisez un minifier (compresseur) pour réduire le poids du code. Cette étape est très importante puisqu’elle permet d’optimiser le temps de chargement de votre page.
content.css
C’est dans cette feuille de style que se trouve la mise en page du contenu des articles, autrement dit, ce que vous rédigez lorsque vous créez un article sous WordPress. Ses fonctionnalités ne doivent pas modifier l’affichage du template.
Feuille de style content.css :
Snippet :
<code> </code>
Usage : formater un mot ou un ensemble (inline) de mot sous forme de code.
Ce texte est formaté
<pre> </pre>
Usage : formater du code sur plusieurs lignes, en respectant les sauts de ligne, les espaces et les tabulations.
Il y a trois formatages différents :
Formatage de code générique <pre>Code générique</pre>
Code générique
Formatage pour mettre en avant du code recommandé <pre class="valid">Code recommandé</pre>
Code recommandé
Formatage pour mettre en avant du code non recommandé <pre class="error">Code non recommandé</pre>
Code non recommandé
<span class="path"> </span>
Usage : permet de mettre en avant le fil d’Ariane pour accéder à un fichier ou à une fonctionnalité d’un programme.
Dossier X > Dossier Y > Fichier Z
<span class="key"> </span>
Usage : permet de mettre en avant différentes touches du clavier, notamment lorsque l’on indique des raccourcis.
A noter : il y a un effet particulier au survol de la souris.
Vous appréciez cette page? N’hésitez pas à la mettre dans vos favoris grâce à ce raccourci : CTRL + D
<span class="highlight"> </span>
Usage : permet de mettre en avant du texte.
Ce texte est mis en avant.
D’autres fonctionnalités existent déjà et de nouvelles seront sûrement ajoutées. N’hésitez pas à les découvrir.
Ressources visuelles
Toutes les ressources visuelles sont en .png et ont été optimisées en poids afin d’être chargées le plus rapidement possible et minimiser l’impact sur la bande passante. Elles sont visibles dans le dossier design à la racine du template.
Écrire un commentaire