Rör aldrig igen kod: Filament.io, för icke-utvecklare överallt

Annons

Om du någonsin har försökt klistra in ett kodavsnitt som Google Analytics-spårningskod manuellt på din webbplats genom att gräva i PHP-mallfiler, vet du hur skrämmande det kan vara. Filament.io gör det så enkelt som att dra och släppa. Åtminstone är det löfte.

Komma igång

Gå över till filament.io och tryck på registreringsknappen. Du måste skapa en inloggning, men Facebook- och Google-konton kan användas för snabb åtkomst med en knapp. Nästa måste du ange domänen som du använder den på - du kan lägga till mer senare.

Om du kör WordPress, kommer det att upptäckas när det skannar webbplatsen, och det föreslås att du installerar den medföljande plugin som det ger dig finare kontroll över vilken typ av sidor som innehåller filamentfunktionaliteten (t.ex. bara inlägg och inte statisk) sidor).

I nästa steg kommer Filament-registreringsskärmen att ge dig ett kort JavaScript-kod - klistra in det här på inställningssidan för plugin. Det kan vara den sista biten av JavaScript-kod du någonsin behöver! Du kan använda Filament utan plugin, men du har inte så många alternativ att filtrera där skript visas.

Lägga till appar

Filamentskärmverktyget är en direkt förhandsvisning av din webbplats så att du kan utforma visuellt vart du vill att appar ska gå. Börja med att lägga till en fin uppsättning sociala knappar som heter Flare. Navigera till ett inlägg i förhandsgranskningen av webbplatsen.

Tryck från sidofältet Ny för att öppna Flare-alternativen. Flare är en förtjusande anpassad uppsättning delningsknappar som ser mycket trevligare ut än de standardknappar som du levererar med nätverket som du förmodligen ser på sidan av denna artikel. En märkeslogo ingår som kan tas bort genom att köpa en premiumlicens för plugin.

Spara inställningarna och dra och släpp sedan den nya Flare-modulen på din webbplats. En första uppsättning filteralternativ kommer då att dyka upp. Gå vidare och lägg till den Alla mina inlägg.

Du kommer då att ha en annan uppsättning filter att anpassa; dessa aktiveras av WordPress-plugin. Som utvecklare är jag van vid att omge skript i olika PHP om klausuler (Är du inte säker på vad det här är? Läs vår PHP nybörjarguide Lär dig att bygga med PHP: En kraschkursPHP är det språk som Facebook och Wikipedia använder för att betjäna miljarder förfrågningar dagligen; de-facto-språket som används för att lära människor webbprogrammering. Det är vackert enkelt, men briljant kraftfullt. Läs mer ), men jag kan verkligen uppskatta kraften i dessa filter för de utan kunskapen om WordPress-sidtypsdetektering.

På teknisk nivå lägger WordPress-plugin till en uppsättning metataggar till din sidoutput som säger Filament vilken typ av sida det är; Filament Javascript-initialiseraren upptäcker sedan det och injicerar de skript du vill ha på den specifika sidan enligt dina etablerade filter. Det manipulerar inte skripten på något annat sätt - bara sprutar in dem på sidan.

Du måste klicka Publicera innan ändringar skickas ut till din webbplats och det kan ta några minuter att dyka upp, så få inte panik om den inte är synlig omedelbart.

Klicka på instrumentbräda länk för att lägga till fler appar, eller så kan du skapa ytterligare Flare-enheter (om du till exempel ville ha en specifik design eller fler knappar på hemsidan).

I skrivande stund finns det totalt 6 appar tillgängliga:

• Blossa, ett socialt bokmärke plugin.
• Murgröna, som gör det möjligt för användare att enkelt dela citat som de markerar från dina artiklar.
• Pass, ett intressant sätt att lyfta fram all din personliga sociala profil (ja, jag inser att det här låter lite socialt centralt för tillfället)
• MailChimp är ett abonnemang för den utmärkta postlistningstjänsten (som förresten är gratis för upp till 12 000 e-postmeddelanden per månad och 2 000 prenumeranter)
• Google Analytics bör vara bekant för alla med en webbplats; Ryan skapade denna fantastiska nybörjarguide Din guide till Google AnalyticsHar du någon aning om var dina besökare kommer ifrån, vilka webbläsare de flesta använder, vilka sökmotorer de använder eller vilka av dina sidor är de mest populära? Läs mer för att förstå dina analysdata.
• Till sist, CodeDrop låter dig hantera alla andra kodavsnitt som du har fått någon annanstans.

Klicka på knappen från instrumentpanelen Lansera. Lägg märke till rullgardinsmenyn för att välja webbplatser - du kan hantera flera webbplatser från ett enda konto.

Är det bra?

Det visuella layoutverktyget är förvånansvärt effektivt och undviker besväret med att försöka räkna ut exakt rätt positionering manuellt. Om du inte är säker på att redigera temafiler är det en livräddare. Men det kan bara fungera inom ramen för ditt befintliga tema. Den knäpper automatiskt till alla element som den hittar på sidan, men det kan till exempel inte skapa en ny kolumn för en widget om ditt tema bara har en kolumn.

Det blir också fel ibland, eftersom det oundvikligen kommer att ha din sida också med dynamiska element som reglage. eller ditt tema CSS kan störa widgeten. Du kanske måste spela - men för det mesta fungerar det bra.

Även som webbutvecklare uppskattar jag användarvänligheten och central skripthantering. Mina sidfotfiler är vanligtvis fulla av kod för att mata ut skript bara på en viss sida - det gör det löjligt enkelt, att rensa upp temafiler.

Valet av appar är för närvarande ganska begränsat, men naturligtvis kan du alltid lägga till dina egna enkla kodtillägg genom CodeDrop-modulen - och det finns fler appar lovade. Jag tycker att jag önskar att den här funktionen ingick som standard med WordPress - för alla framsteg i temaanpassning, har vi fortfarande kvar med användning av arcane PHP-mallredigering för att lägga till JavaScript utdrag. För tillfället fyller Filament.io ett hårt nödvändigt hål i funktionalitet som många av oss aldrig ens visste att det fanns. Har du tagit det? Berätta för oss dina tankar.