Entwicklertools

Obwohl Sitely ein Website-Baukasten ist, der keine Programmierkenntnisse erfordert, wissen wir, dass es Situationen geben kann, in denen man hin und wieder unter die Haube schauen muss, damit alles korrekt funktioniert. Zum Glück bewältigt Sitely die gängigsten Fälle mühelos – ohne dass Sie etwas tun müssen. Ein gutes Beispiel ist das Hinzufügen von Google-Analytics- oder AdSense-Code zu Ihrer Website. Normalerweise müsste man den Code manuell direkt in das HTML der Webseite einfügen. In Sitely können Sie diesen Code jedoch über die verschiedenen Website-Einstellungen hinzufügen; Sitely fügt ihn dann automatisch an der richtigen Stelle in der HTML-Seite ein..

Das wahrscheinlichste Szenario, in dem Sie selbst manuell Code einfügen müssen, ist, wenn Ihnen ein Drittanbieter einen Code-Schnipsel bereitgestellt hat. Typischerweise liefern externe Formular-Dienste Code, um ein Formular auf Ihrer Webseite anzuzeigen. Solche Formulare werden in der Regel auf entfernten Servern erstellt und per Code in Ihre Website eingebunden. Weitere Beispiele sind Drittanbieter-Skripte. Diese Webanwendungen verleihen Ihrer Website zusätzliche Funktionen, etwa Buchungssysteme oder Mitgliedschafts-Skripte. Wenn Sie solchen Code in Ihre Webseite integrieren, kann es erforderlich sein, verschiedene Teile des Codes an unterschiedlichen Stellen der Seite einzufügen. 

Typischerweise besitzen HTML-Seiten einen Head-Bereich und einen Body-Bereich. Der Head-Bereich einer Seite wird meist für Metainformationen genutzt, etwa den Seitentitel, Verweise auf externe Stylesheets oder extern gehostete Stylesheets oder Skripte. Der Body-Bereich ist der Teil des HTML, der für Besucher sichtbar ist, also Text, Bilder, Grafiken und andere Elemente. 

Wenn Sie Code erhalten – sei es von einem Drittanbieter für gehostete Dienste oder von einem Skript, das Sie auf Ihrem eigenen Server installieren –, muss dieser Code oft in Head- und Body-Code aufgeteilt werden. Als Faustregel gilt: Code für den Head-Bereich ruft extern gehosteten PHP- oder JavaScript-Code oder Stylesheets auf, um den Inhalt korrekt darzustellen, der im Body-Bereich Ihrer Seite hinzugefügt wird. Der Body-Code ist meist der Code, den Sie in die Seite einfügen, um ein Element zu erzeugen, das Besucher sehen und/oder mit dem sie interagieren können. Beispielsweise könnten Sie ein Mitgliedschafts-Skript verwenden, mit dem Besucher sich in eine Mitglieder-Mailingliste eintragen. Das Anmeldeformular selbst wird von einem Webserver (entweder Ihrem eigenen oder einem von Dritten) bereitgestellt, damit es in Ihrer Webseite angezeigt werden kann. Unten sehen Sie ein typisches Beispiel für Head-Code, der von einem Skript bereitgestellt wird. Sein Zweck ist es, eine Seite vor unbefugtem Zugriff zu schützen.

Daran kann sich ein Code-Abschnitt anschließen, der ein Registrierungsformular erzeugt, über das sich Nutzer selbst als Mitglieder registrieren können. Dieser Code würde im Body-Bereich der Seite erscheinen.

Sie müssen nicht verstehen, was diese Codeschnipsel genau tun oder wie sie funktionieren. Wichtig ist, zu wissen, wo Sie sie in Ihrer Sitely-Seite einfügen. Der erste Code wäre der Head-Code. Er muss das Erste auf der Seite sein, damit das verknüpfte Mitgliedschafts-Skript korrekt funktioniert. Dies fügen Sie über die Schaltfläche Code ein, die sich oben im Seiten-Panel in Sitely befindet. So sieht das aus:

Im Beispiel unseres Membership-Skripts würden wir den Head-Code in das Feld mit dem Titel ‘PHP before HTML’ kopieren und einfügen. Der Grund: Die Seite muss eine PHP-Seite sein, damit dieses Skript funktioniert. Daher muss die Seite als Erstes diesen PHP-Code ausführen, bevor sie irgendetwas anderes tut (HINWEIS: Der Seitenname muss vor der Veröffentlichung auf die Dateiendung .php geändert werden). Wäre der Head-Code reines HTML, würden Sie ihn in das Feld mit dem Titel ‘Code for HTML.

Der nächste Code-Abschnitt, den wir der Seite hinzufügen möchten, ist der Code, der das Registrierungsformular des Skripts anzeigt. Dieser wird über das Element ‘Embed’ in den Body unserer Seite eingefügt. Dadurch entsteht auf der Sitely-Canvas ein leeres Feld, das Sie dort positionieren können, wo das Registrierungsformular erscheinen soll. Mit dem ausgewählten Embed-Feld wechseln Sie anschließend zum Stil-Panel und fügen Ihren Codeschnipsel ein. Die Option sieht so aus:

Wenn sich der Code voraussichtlich vertikal ausdehnt, setzen Sie unbedingt das Häkchen bei ‘content expands vertically’. Klicken Sie nach dem Hinzufügen oder Bearbeiten von Code immer auf die Schaltfläche Speichern/Aktualisieren. Befindet sich Ihr Skript auf einem Live-Server, wird es möglicherweise auf der Seite angezeigt. Manche Inhalte zeigen allerdings erst dann eine Vorschau, wenn sie online veröffentlicht wurden.

Websiteweite Entwicklertools

Zusätzlich zu den oben beschriebenen seitenbezogenen Optionen können Sie über die Entwickler-Option im Einstellungs-Panel auch websiteweite Entwickler-Elemente zu Ihrer Website hinzufügen. Hier können Sie die Ausgabeverzeichnisse für die verschiedenen Elemente festlegen, die Sie Ihrer Seite hinzufügen, einschließlich Stylesheets (CSS) und JavaScript-Dateien (JS). Außerdem können Sie benutzerdefinierte Dateien hinzufügen – entweder von Ihrer Festplatte oder über verlinkte, gehostete Ressourcen. 

Diese Optionen sind hilfreich, wenn Ihr Embed-Code Links zu Stylesheets oder Code enthält, den Sie als Teil Ihrer Website hosten müssen. Ein typisches Beispiel ist die Nutzung von Inhalten von Websites wie CodePen. Häufig ist der Code in drei Abschnitte aufgeteilt – das HTML zum Einbetten in die Seite, das CSS zum Gestalten des Inhalts und das JS, damit alles funktioniert. Diese Teile können jeweils in eigene Dateien kopiert und in Ihr Sitely-Projekt eingebunden werden.

Neben einzelnen Dateien können Sie über das Entwickler-Options-Panel auch HTML-Code im Head-Bereich all Ihrer Webseiten hinzufügen. Scrollen Sie einfach im Panel nach unten, um das Codefeld zu sehen.

Denken Sie daran: Jeglicher Code, den Sie in dieses Feld einfügen, wird in den Head-Bereich aller Seiten Ihrer Website übernommen.

Hinweis zur Vorsicht: Das Arbeiten mit Code ohne oder mit nur wenig Erfahrung kann Probleme mit Ihrer Webseite verursachen. Zwar kommt Sitely mit diesen Entwickler-Optionen sehr gut zurecht, dennoch besteht immer das Risiko von Code-Konflikten, die zu Fehlfunktionen Ihrer Website führen können. Nutzen Sie diese Optionen daher mit Bedacht und testen Sie immer, bevor Sie live gehen. Für Code, der auf einem Server getestet werden muss, veröffentlichen Sie am besten zunächst in einen Test-Ordner auf Ihrem Server, bevor Sie Ihre neue Site in die große weite Welt entlassen.