Never Touch Code Again Filament.io, pour les non-développeurs partout

Si vous avez déjà essayé de coller manuellement un extrait de code tel que le code de suivi Google Analytics sur votre site Web en fouillant dans les fichiers de modèles PHP, vous saurez à quel point il peut être intimidant. Filament.io le rend aussi simple que glisser-déposer. Au moins, c'est la promesse.

Commencer

Rendez-vous sur filament.io et cliquez sur le bouton d'inscription. Vous devrez créer un identifiant, mais les comptes Facebook et Google peuvent être utilisés pour un accès rapide à l'aide d'un seul bouton. Ensuite, vous devrez entrer le domaine sur lequel vous l'utiliserez - vous pourrez en ajouter d'autres plus tard..

Si vous utilisez WordPress, cela sera détecté lors de l’analyse du site. Nous vous suggérons d’installer le plug-in fourni, car il vous permet de contrôler plus précisément le type de pages contenant la fonctionnalité de filament (telles que les publications uniquement et non statiques). pages).

À l'étape suivante, l'écran d'inscription au Filament vous donnera un court extrait de code JavaScript - collez-le dans la page des paramètres du plug-in. C'est peut-être le dernier morceau de code JavaScript dont vous aurez besoin! Vous pouvez utiliser Filament sans le plugin, mais vous n'aurez pas autant d'options pour filtrer où les scripts sont affichés.

Ajout d'applications

L'outil Filament Screen est un aperçu en direct de votre site qui vous permet de concevoir visuellement l'endroit où vous souhaitez que les applications aillent. Commencez par ajouter un bel ensemble de boutons sociaux appelé Flare. Dans l'aperçu du site, accédez à un message..

Dans la barre latérale, appuyez sur Nouveau pour ouvrir les options Flare. Flare est un ensemble personnalisé de boutons de partage personnalisés et plus jolis que les boutons standard fournis par le réseau que vous voyez probablement sur le côté de cet article. Un logo de marque est inclus et peut être supprimé en achetant une licence premium pour le plugin..

Enregistrez les paramètres, puis faites glisser le nouveau module Flare sur votre site. Un ensemble initial d’options de filtrage s’affichera. Allez-y et ajoutez-le à Tous mes messages.

Vous aurez ensuite un autre ensemble de filtres à personnaliser. ceux-ci sont activés par le plugin WordPress. En tant que développeur, je suis habitué à entourer les scripts de diverses clauses PHP if (vous ne savez pas exactement ce que c'est? Lisez notre Guide du débutant PHP), mais je peux vraiment apprécier la puissance de ces filtres pour ceux qui n'ont pas le savoir-faire de la détection de type de page WordPress.

Sur le plan technique, le plugin WordPress ajoute à votre sortie de page un ensemble de balises méta qui indiquent à Filament de quel type de page il s'agit; l'initialiseur Javascript de Filament le détecte ensuite et injecte les scripts souhaités sur cette page en fonction de vos filtres établis. Il ne manipule pas les scripts autrement: il les injecte simplement dans la page.

Vous devrez cliquer Publier avant que les modifications ne soient envoyées sur votre site, elles peuvent parfois prendre quelques minutes, alors ne paniquez pas si elles ne sont pas immédiatement visibles..

Clique sur le Tableau de bord lien pour ajouter plus d'applications, ou vous pouvez créer des unités Flare supplémentaires (si, par exemple, vous vouliez un design spécifique ou plus de boutons sur la page d'accueil).

Au moment de la rédaction de cet article, 6 applications au total sont disponibles:

• Éclater, un plugin de bookmarking social.
• Lierre, qui permet aux utilisateurs de partager facilement des citations qu'ils soulignent de vos articles.
• Passeport, une manière intéressante de mettre en valeur l'ensemble de votre profil social personnel (oui, je réalise que cela sonne un peu centré sur le social pour le moment)
• MailChimp est un abonnement à l'excellent service de liste de diffusion (qui est d'ailleurs gratuit pour un maximum de 12 000 courriels par mois et 2 000 abonnés)
• Google Analytics devrait être familier à quiconque avec un site Web; Ryan a créé ce formidable guide pour débutants permettant de comprendre vos données d'analyse..
• finalement, CodeDrop vous permet de gérer tout autre extrait de code que vous avez reçu ailleurs.

Dans le tableau de bord, cliquez sur lancement. Notez le menu déroulant pour sélectionner des sites - vous pouvez gérer plusieurs sites Web à partir d'un seul compte..

Est-il bon?

L'outil de mise en page visuel est étonnamment efficace, évitant ainsi d'avoir à chercher manuellement le positionnement exact. Si vous n'êtes pas sûr de pouvoir éditer des fichiers de thème, vous économiserez des vies. Mais cela ne peut fonctionner que dans les limites de votre thème existant. Il s'aligne automatiquement sur les éléments trouvés sur la page, mais il ne peut par exemple pas créer de nouvelle colonne pour un widget si votre thème ne comporte qu'une colonne..

Il arrive également que des erreurs se produisent, car votre page comportera inévitablement des éléments dynamiques tels que des curseurs; ou votre thème CSS peut interférer avec le widget. Vous devrez peut-être jouer - mais dans la plupart des cas, cela fonctionne bien.

Même en tant que développeur Web, j'apprécie la facilité d'utilisation et la gestion centrale des scripts. Mes fichiers de pied de page sont généralement pleins de code pour la sortie de scripts uniquement sur une page donnée. Cela facilite cette tâche ridicule, en nettoyant les fichiers de thème..

Le choix des applications est actuellement plutôt limité, bien que vous puissiez bien sûr toujours ajouter vos propres ajouts de code simples via le module CodeDrop - et d'autres applications sont promises. Je souhaite que cette fonctionnalité soit incluse par défaut dans WordPress. Malgré toutes les avancées en matière de personnalisation du thème, il nous reste à utiliser l’édition de modèles PHP géniaux pour ajouter des extraits JavaScript. Pour le moment, Filament.io comble un manque de fonctionnalités dont beaucoup d'entre nous ne savions même pas l'existence. Avez-vous essayé? Dites-nous vos pensées.

En savoir plus sur: JavaScript, Wordpress.