Raak nooit opnieuw Code aan Filament.io, voor niet-ontwikkelaars overal

Als u ooit hebt geprobeerd handmatig een codefragment zoals de Google Analytics-trackingcode op uw website te plakken door in PHP-sjabloonbestanden te graven, weet u hoe moeilijk het kan zijn. Filament.io maakt het zo simpel als slepen en neerzetten. Tenminste, dat is de belofte.

Ermee beginnen

Ga naar filament.io en klik op de aanmeldknop. U moet een aanmelding maken, maar Facebook- en Google-accounts kunnen worden gebruikt voor snelle toegang met één knop. Vervolgens moet u het domein invoeren waar u het op gaat gebruiken - u kunt later meer toevoegen.

Als u WordPress gebruikt, wordt dit gedetecteerd wanneer het de site scant en wordt u aangeraden de meegeleverde plug-in te installeren, omdat u daardoor meer controle hebt over welk type pagina's de filamentfunctionaliteit bevat (zoals alleen berichten en niet statisch pagina's).

Bij de volgende stap krijgt u een kort JavaScript-fragment te zien op het scherm Filament - plak dit in de pagina met plugin-instellingen. Het is misschien het laatste stukje JavaScript-code dat je ooit nodig zult hebben! U kunt Filament gebruiken zonder de plug-in, maar u zult niet zoveel opties hebben om te filteren waar scripts worden weergegeven.

Apps toevoegen

De Filament-schermtool is een live voorvertoning van uw site, zodat u visueel kunt ontwerpen waar u wilt dat apps naartoe gaan. Begin met het toevoegen van een leuke set sociale knoppen genaamd Flare. Ga in het sitepreview naar een bericht.

Tik in de zijbalk nieuwe om de Flare-opties te openen. Flare is een heerlijke set aangepaste knoppen die er leuker uitziet dan de standaard netwerk-knoppen die je waarschijnlijk aan de zijkant van dit artikel ziet. Er is een logo van het merk meegeleverd dat kan worden verwijderd door een premiumlicentie voor de plug-in te kopen.

Sla de instellingen op en sleep de nieuwe Flare-module naar uw site. Een eerste reeks filteropties verschijnt dan. Ga je gang en voeg het toe Al mijn berichten.

Je hebt dan nog een reeks filters om aan te passen; deze worden ingeschakeld door de plug-in WordPress. Als ontwikkelaar ben ik gewend aan omringende scripts in verschillende PHP if-clausules (Weet niet zeker wat dit zijn? Lees onze PHP-beginnersgids), maar ik kan de kracht van deze filters enorm waarderen voor mensen zonder de knowhow van WordPress-paginatype detectie.

Op technisch niveau voegt de plug-in WordPress een reeks metatags toe aan uw pagina-uitvoer, die Filament vertellen wat voor soort pagina het is; de Filament Javascript-initializer detecteert vervolgens dat en injecteert de gewenste scripts op die specifieke pagina volgens uw bestaande filters. Het manipuleert de scripts niet op een andere manier - injecteert ze gewoon naar de pagina.

U moet klikken Publiceren voordat er wijzigingen naar uw site worden verzonden en het kan enkele minuten duren voordat ze worden weergegeven, dus raak niet in paniek als deze niet meteen zichtbaar is.

Klik op de Dashboard koppeling om meer apps toe te voegen, of u kunt extra Flare-eenheden maken (als u bijvoorbeeld een specifiek ontwerp of meer knoppen op de startpagina wilde).

Op het moment van schrijven zijn er 6 apps beschikbaar:

• Gloed, een plug-in voor social bookmarking.
• Klimop, waarmee gebruikers eenvoudig offertes kunnen delen die ze uit uw artikelen benadrukken.
• Paspoort, een interessante manier om al je persoonlijke sociale profiel te benadrukken (ja, ik realiseer me dat dit op dit moment een beetje sociaal-centraal klinkt)
• MailChimp is een abonnement op de uitstekende mailinglijst-service (die overigens gratis is voor maximaal 12.000 e-mails per maand en 2.000 abonnees)
• Google Analytics moet bekend zijn bij iedereen met een website; Ryan heeft deze geweldige handleiding voor beginners gemaakt om je analysegegevens te begrijpen.
• Tenslotte, CodeDrop kunt u andere codefragmenten beheren die u elders heeft gekregen.

Klik op het dashboard Lancering. Let op de vervolgkeuzelijst voor het selecteren van sites: u kunt meerdere websites beheren vanuit één account.

Is het goed??

De visuele lay-outtool is verrassend effectief en vermijdt het gedoe om te proberen precies de juiste positionering handmatig te bepalen. Als u niet zeker bent van het bewerken van themabestanden, is het een reddingsvest voor het leven. Maar het kan alleen binnen de grenzen van uw bestaande thema werken. Het klikt automatisch naar alle elementen die het op de pagina vindt, maar het kan bijvoorbeeld geen nieuwe kolom voor een widget maken als uw thema slechts één kolom heeft.

Soms krijgt het ook iets mis, want onvermijdelijk heeft uw pagina ook dynamische elementen zoals schuifregelaars; of je thema-CSS kan interfereren met de widget. Je moet misschien spelen - maar voor het grootste deel werkt het goed.

Zelfs als webontwikkelaar, waardeer ik het gebruiksgemak en centraal scriptbeheer. Mijn footer-bestanden bevatten meestal alleen code op scripts die op een bepaalde pagina worden uitgevoerd - dit maakt belachelijk eenvoudig, het opruimen van themabestanden.

De selectie van apps is momenteel beperkt, hoewel je natuurlijk altijd je eigen eenvoudige codeaanvullingen kunt toevoegen via de CodeDrop-module - en er worden meer apps beloofd. Ik zou willen dat deze functionaliteit standaard bij WordPress werd geleverd - voor alle vooruitgang in het aanpassen van thema's blijven we nog steeds met het gebruik van geheimzinnige PHP-sjabloonbewerking JavaScript-fragmenten toevoegen. Voor nu vult Filament.io een broodnodig gat in functionaliteit waarvan velen van ons het bestaan ​​nooit wisten. Heb je het geprobeerd? Vertel ons je gedachten.

Ontdek meer over: JavaScript, Wordpress.