Berühren Sie den Code nie mehr Filament.io, für Nicht-Entwickler überall

Wenn Sie jemals versucht haben, einen Code-Snippet wie Google Analytics-Tracking-Code manuell in Ihre Website einzufügen, indem Sie in PHP-Vorlagendateien graben, wissen Sie, wie erschreckend dies sein kann. Filament.io macht es so einfach wie Ziehen und Ablegen. Zumindest ist das das Versprechen.

Fertig machen

Gehen Sie zu filament.io und drücken Sie die Anmeldeschaltfläche. Sie müssen ein Login erstellen, aber Facebook- und Google-Konten können für den schnellen Zugriff auf eine Schaltfläche verwendet werden. Als Nächstes müssen Sie die Domäne eingeben, unter der Sie sie verwenden. Sie können später weitere hinzufügen.

Wenn Sie WordPress ausführen, wird dies beim Scannen der Site erkannt. Es wird empfohlen, das mitgelieferte Plugin zu installieren, da Sie damit genauer steuern können, für welchen Seitentyp die Filament-Funktion verwendet wird (z. B. nur Beiträge und nicht statisch) Seiten).

Im nächsten Schritt erhalten Sie auf dem Filament-Anmeldebildschirm einen kurzen JavaScript-Ausschnitt - fügen Sie diesen in die Plugin-Einstellungsseite ein. Es könnte das letzte bisschen JavaScript-Code sein, das Sie jemals brauchen werden! Sie können Filament auch ohne das Plugin verwenden, aber Sie haben nicht so viele Optionen, um zu filtern, wo Skripts angezeigt werden.

Apps hinzufügen

Das Filament-Bildschirm-Tool ist eine Live-Vorschau Ihrer Website, mit der Sie visuell entwerfen können, wo Ihre Apps gespeichert werden sollen. Beginnen Sie mit dem Hinzufügen eines schönen Satzes sozialer Schaltflächen namens Flare. Navigieren Sie in der Site-Vorschau zu einem Beitrag.

Klicken Sie in der Seitenleiste auf Neu um die Flare-Optionen zu öffnen. Flare ist ein reizvoller, benutzerdefinierter Satz von Share-Schaltflächen, der viel besser aussieht als die vom Netzwerk bereitgestellten Standardschaltflächen, die Sie wahrscheinlich auf der Seite dieses Artikels sehen. Ein Markenlogo ist enthalten, das durch den Kauf einer Premium-Lizenz für das Plugin entfernt werden kann.

Speichern Sie die Einstellungen und ziehen Sie das neue Flare-Modul auf Ihre Site. Ein erster Satz von Filteroptionen wird angezeigt. Fahren Sie fort und fügen Sie es hinzu Alle meine Beiträge.

Sie haben dann einen weiteren Satz Filter zum Anpassen. Diese werden durch das WordPress-Plugin aktiviert. Als Entwickler bin ich daran gewöhnt, Skripts in verschiedenen PHP-if-Klauseln zu verwenden (nicht sicher, was diese sind? Lesen Sie unseren PHP-Einsteigerleitfaden), aber ich kann die Leistungsfähigkeit dieser Filter für Benutzer ohne das Know-how der WordPress-Seitentyperkennung wirklich zu schätzen wissen.

Auf technischer Ebene fügt das WordPress-Plugin Ihrer Seitenausgabe eine Reihe von Meta-Tags hinzu, die Filament mitteilen, um welche Art von Seite es sich handelt. Der Filament-Javascript-Initialisierer erkennt dies und fügt die gewünschten Skripts auf dieser bestimmten Seite gemäß Ihren festgelegten Filtern ein. Die Skripte werden auf keine andere Weise bearbeitet, sondern nur auf der Seite eingefügt.

Sie müssen klicken Veröffentlichen Bevor Änderungen an Ihre Site gesendet werden, kann es einige Minuten dauern, bis sie angezeigt werden. Machen Sie sich also keine Panik, wenn sie nicht sofort sichtbar ist.

Klicke auf das Instrumententafel Verknüpfung, um weitere Apps hinzuzufügen, oder Sie können zusätzliche Flare-Einheiten erstellen (wenn Sie beispielsweise ein bestimmtes Design oder mehr Schaltflächen auf der Startseite wünschen).

Zum Zeitpunkt des Schreibens sind insgesamt 6 Apps verfügbar:

• Flare, ein Social-Bookmarking-Plugin.
• Efeu, So können Benutzer Angebote, die sie aus Ihren Artikeln hervorheben, problemlos freigeben.
• Reisepass, eine interessante Möglichkeit, Ihr gesamtes persönliches soziales Profil hervorzuheben (ja, ich merke, dass dies im Moment etwas sozialzentrisch klingt)
• MailChimp ist ein Abonnement für den hervorragenden Mailinglistendienst (der übrigens für bis zu 12.000 E-Mails pro Monat und 2.000 Abonnenten kostenlos ist).
• Google Analytics sollte jedem mit einer Website bekannt sein; Ryan hat diesen großartigen Einsteiger-Leitfaden zum Verständnis Ihrer Analysedaten erstellt.
• Endlich, CodeDrop können Sie alle anderen Codefragmente verwalten, die Sie an anderer Stelle erhalten haben.

Klicken Sie im Dashboard auf Starten. Beachten Sie die Dropdown-Liste zum Auswählen von Websites. Sie können mehrere Websites von einem einzigen Konto aus verwalten.

Taugt es etwas?

Das visuelle Layout-Tool ist überraschend effektiv und vermeidet die Mühe, manuell die exakte Positionierung herauszufinden. Wenn Sie nicht sicher sind, Themendateien zu bearbeiten, ist dies ein Lebensretter. Es kann jedoch nur innerhalb der Grenzen Ihres vorhandenen Themas funktionieren. Sie fängt automatisch alle auf der Seite gefundenen Elemente ein, kann jedoch keine neue Spalte für ein Widget erstellen, wenn Ihr Design nur eine Spalte enthält.

Manchmal werden auch Fehler gemacht, da Ihre Seite zwangsläufig auch dynamische Elemente wie Schieberegler enthält. oder Ihr Theme-CSS kann das Widget beeinträchtigen. Möglicherweise müssen Sie herumspielen, aber meistens funktioniert es gut.

Auch als Web-Entwickler schätze ich die einfache Bedienung und die zentrale Skriptverwaltung. Meine Fußzeilendateien sind normalerweise voll mit Code, um Skripts nur auf einer bestimmten Seite auszugeben. Dies macht das Aufräumen von Themendateien lächerlich.

Die Auswahl an Apps ist derzeit eher begrenzt, Sie können jedoch natürlich auch einfache, einfache Code-Ergänzungen über das CodeDrop-Modul hinzufügen - und weitere Apps werden versprochen. Ich wünsche mir, dass diese Funktionalität standardmäßig in WordPress enthalten ist. Für alle Fortschritte bei der Anpassung des Designs bleibt die Verwendung von arkaner PHP-Template-Bearbeitung zum Hinzufügen von JavaScript-Snippets übrig. Im Moment füllt Filament.io eine dringend benötigte Lücke in der Funktionalität, von der viele von uns nie wussten, dass sie existiert. Hast du es probiert? Erzähl uns deine Gedanken.

Erfahren Sie mehr über: JavaScript, Wordpress.