Entwickler-Tools | Sitely-Dokumentation

Obwohl Sitely ein Website-Builder ist, der keine Programmierkenntnisse erfordert, wissen wir, dass es Situationen geben kann, in denen wir von Zeit zu Zeit unter die Haube schauen müssen, damit alles richtig funktioniert. Glücklicherweise bewältigt Sitely die häufigsten Situationen mit Leichtigkeit, ohne dass du etwas tun musst. Ein Paradebeispiel ist das Hinzufügen von Google Analytics- oder AdSense-Code zu deiner Website. Normalerweise müsste man den Code manuell direkt in den HTML-Code der Webseite einfügen. In Sitely kannst du diesen Code jedoch über die verschiedenen Optionen für die Website-Einstellungen hinzufügen und Sitely übernimmt das Einfügen an der richtigen Stelle in der HTML-Seite.

Das wahrscheinlichste Szenario, in dem du Code manuell hinzufügen musst, ist normalerweise, wenn du einen Code von einem Drittanbieter erhalten hast. In der Regel erhalten Sie von Drittanbietern von Formularprozessoren Code, um ein Formular auf Ihrer Webseite anzuzeigen. Solche Formulare werden normalerweise auf Remote-Servern erstellt und über einen Code auf Ihrer Website bereitgestellt. Andere Beispiele sind Skripte von Drittanbietern. Dabei handelt es sich um Webanwendungen, die Ihrer Website zusätzliche Funktionen bieten, wie z. B. Buchungssysteme oder Mitgliedschaftsskripte. Wenn Sie diesen Code in Ihre Webseite integrieren müssen, müssen Sie möglicherweise verschiedene Teile des Codes an verschiedenen Stellen der Seite hinzufügen.

In der Regel haben HTML-Seiten einen Kopf- und einen Hauptbereich. Der Kopfbereich einer Seite wird in der Regel für Meta-Informationen wie den Seitentitel, Links zu externen Stylesheets oder extern gehosteten Stylesheets oder Skripten verwendet. Der Hauptbereich ist der Teil des HTML-Codes, der für die Besucher der Website sichtbar ist, wie z. B. Text, Bilder, Grafiken und andere Elemente.

Wenn du einen Code von einem Drittanbieter von gehosteten Diensten oder über ein Skript, das du auf deinem eigenen Server installierst, erwirbst, ist es oft notwendig, den Code in Kopf- und Hauptcode zu unterteilen. Im Allgemeinen wird der Kopfcode verwendet, um extern gehosteten PHP- oder Javascript-Code oder Stylesheets aufzurufen, damit die Inhalte, die deiner Seite im Hauptteil hinzugefügt werden, korrekt angezeigt werden. Der Body-Code ist häufig der Code, den du in die Seite einfügst, um ein Element zu erstellen, das die Besucher der Website sehen und/oder mit dem sie interagieren können. Beispielsweise kannst du ein Mitgliedschaftsskript haben, mit dem sich Besucher in eine Mitglieder-Mailingliste eintragen können. Das Anmeldeformular selbst wird von einem Webserver (entweder deinem eigenen oder dem eines Drittanbieters) bereitgestellt, damit es auf deiner Webseite angezeigt werden kann. Unten findest du ein typisches Beispiel für einen Teil des Head-Codes, der von einem Skript bereitgestellt wird. Sein Zweck ist es, eine Seite vor unbefugtem Zugriff zu schützen.

Darauf kann ein Code folgen, mit dem ein Registrierungsformular erstellt wird, in dem sich Benutzer selbst als Mitglieder registrieren können. Dieser Code würde im Body-Abschnitt der Seite erscheinen.

Du musst nicht verstehen, was diese Code-Schnipsel tun oder wie sie funktionieren. Wichtig ist, dass du weißt, wo du sie in deine Sitely-Seite einfügen musst. Der erste Code wäre der Head-Code. Er muss das erste Element auf der Seite sein, damit das verknüpfte Mitgliedschaftsskript ordnungsgemäß funktioniert. Dieser Code wird über die Schaltfläche „Code“ oben im Seitenbereich von Sitely hinzugefügt. So sieht er aus:

Im Beispiel unseres Mitgliedschaftsskripts würden wir den Kopfzeilencode kopieren und in das Feld mit dem Titel „PHP vor HTML“ einfügen. Der Grund dafür ist, dass die Seite eine PHP-Seite sein muss, damit dieses Skript funktioniert. Daher muss die Seite als erstes diesen PHP-Code ausführen, bevor sie irgendetwas anderes tut (ANMERKUNG: Der Seitenname muss vor der Veröffentlichung geändert werden, um eine PHP-Erweiterung zu erhalten). Wenn der Kopfcode reines HTML wäre, würden Sie ihn in das Feld „Code für HTML“ einfügen.

Der nächste Code, den wir der Seite hinzufügen möchten, ist der Code, der das Registrierungsformular aus dem Skript anzeigt. Dieser wird mit dem Element „Einbetten“ in den Hauptteil unserer Seite eingefügt. Dadurch wird auf der Sitely-Leinwand ein leeres Feld erstellt, das du an der Stelle positionieren kannst, an der das Registrierungsformular angezeigt werden soll. Wenn das Einbettungsfeld ausgewählt ist, wechselst du zum Stil-Panel und fügst deinen Code-Schnipsel hinzu. Die Option sieht wie folgt aus:

Wenn der Code wahrscheinlich vertikal erweitert wird, stelle sicher, dass du das Kontrollkästchen „Inhalt wird vertikal erweitert“ aktivierst. Klicke nach dem Hinzufügen oder Bearbeiten von Code immer auf die Schaltfläche „Speichern/Aktualisieren“. Wenn sich dein Skript auf einem Live-Server befindet, wird es möglicherweise auf der Seite angezeigt. Bei einigen Inhalten wird jedoch erst dann eine Vorschau angezeigt, wenn sie online veröffentlicht werden.

Entwicklungswerkzeuge für die gesamte Website

Zusätzlich zu den oben beschriebenen seitenspezifischen Optionen kannst du über die Option „Entwickler“ im Einstellungsbereich auch entwicklerbezogene Elemente für die gesamte Website zu deiner Website hinzufügen. Hier kannst du die Ausgabeordner für die verschiedenen Elemente angeben, die du zu deiner Seite hinzufügst, einschließlich Stylesheets (CSS) und JavaScript-Dateien (JS). Darüber hinaus kannst du benutzerdefinierte Dateien hinzufügen, entweder von deiner Festplatte oder von verlinkten gehosteten Ressourcen.

Zusätzlich zu einzelnen Dateien kannst du auch HTML-Code im Head-Bereich all deiner Webseiten über das Entwickleroptionen-Panel hinzufügen. Scrolle einfach im Panel nach unten, um das Code-Feld zu sehen

Diese Optionen sind nützlich, wenn einige deiner Einbettungscodes Links zu Stylesheets oder Code enthalten, den du als Teil deiner Website hosten musst. Ein typisches Beispiel für eine Situation, in der diese Optionen nützlich sein können, ist die Verwendung von Inhalten von Websites wie codepen. Beispielsweise kann es sein, dass du mit Code konfrontiert wirst, der in drei separate Abschnitte unterteilt ist: HTML zum Einbetten in die Seite, CSS zum Gestalten des Inhalts und JS, damit alles funktioniert. Diese können alle kopiert und in einzelne Dateien eingefügt und als Teil deines Sitely-Projekts eingebunden werden.

Denke daran, dass jeder Code, den du in dieses Feld einfügst, zum Head-Bereich aller Seiten deiner Website hinzugefügt wird.

Eine Anmerkung zur Vorsicht: Wenn du dich mit wenig oder keiner Erfahrung in den Code vertiefst, kann dies zu Problemen mit deiner Webseite führen. Obwohl Sitely mit diesen Entwickleroptionen recht gut umgehen kann, besteht immer das Risiko von Codekonflikten, die zu Fehlfunktionen deiner Website führen können. Verwende diese Optionen mit Bedacht und teste immer, bevor du sie live schaltest. Bei Code, der auf einem Server getestet werden muss, ist es am besten, ihn in einem Testordner auf deinem Server zu veröffentlichen, bevor du deine neue Website in die große weite Welt schickst