So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

Überlegungen zum Erstellen einer WordPress-Site von Grund auf neu (kein Code)

In den letzten zehn Jahren habe ich (fast) täglich mit WordPress gearbeitet. Es ist meine bevorzugte Lösung zum Erstellen von Websites für Kunden aller Größen.

Und da ich mehr Erfahrung mit dem beliebten CMS gesammelt habe, habe ich mich dafür ausgesprochen, WordPress-Themes von Grund auf neu zu erstellen. Heutzutage verwende ich ein sehr einfaches, auf Unterstrichen basierendes Startthema. Es ist so eingerichtet, wie es mir gefällt, und hilft mir, schnell neue Projekte zu starten.

Aber wie alles andere im WordPress-Ökosystem gibt es viele Möglichkeiten, wie wir Dinge tun. Der Ansatz, den ich bevorzuge, ist nicht für alle Entwickler. Es ist auch nicht immer die realistischste Lösung für bestimmte Kunden (insbesondere für Kunden mit einem knappen Budget).

Heute möchte ich meine Erfahrungen beim Erstellen einer Website auf eine andere Art und Weise teilen: mithilfe eines WordPress-Plugins für den Seitenersteller und eines ergänzenden „leeren“ Starterthemas. Ich werde die Vor- und Nachteile des Prozesses zusammen mit einigen Tipps erläutern, um das Beste daraus zu machen. Lasst uns beginnen!

Hintergrund des Projekts

Ich wurde von einem lebenslangen Kunden kontaktiert, der eine Neugestaltung der vorherigen HTML-Site wünschte. Sie wollten die Vorteile von WordPress nutzen, hatten aber nicht das Budget für einen vollständigen benutzerdefinierten Build.

Die Idee, ein branchenspezifisches WordPress-Business-Thema zu kaufen, wurde erwähnt. Jetzt ist nichts von Natur aus falsch daran, ein Thema zu kaufen und Inhalte hinzuzufügen. In vielen Fällen wird es gut funktionieren.

Aber es scheint oft zusätzliche Kosten zu geben, die mit der Neugestaltung des Erscheinungsbilds und / oder der Funktionalität verbunden sind, um die Kundenspezifikationen (oder, schlimmer noch, meine Erwartungen) zu erfüllen. Dennoch können Sie viel tun, ohne das Thema, das Budget des Kunden oder beides vollständig zu zerstören.

Vor diesem Hintergrund suchte ich nach einer Alternative. Ich habe kürzlich angefangen, mit Beaver Builder herumzuspielen, einem beliebten Plugin für den WordPress-Seitenersteller (vollständige Offenlegung: Ich werde nicht dafür bezahlt, das zu sagen, es war nur das Tool, das ich verwendet habe. Es gibt andere ähnliche Produkte auf dem Markt, die es wert sind, in Betracht gezogen zu werden).

Sie enthalten ein Framework-Thema (und ein verwandtes untergeordnetes Thema) mit einigen ihrer kommerziellen Pakete, mit denen Sie im Wesentlichen eine vollständige Website (Kopf-, Fuß- und Inhalt) mit einer Kombination aus WordPress Customizer und Page Builder erstellen können.

Wie es funktioniert Lesen Sie weiter, um zu entdecken …

Startpunkt

Die ersten Schritte in diesem Prozess sind jedem bekannt, der eine WordPress-Site erstellt hat:

  • Erstellen Sie eine neue WordPress-Installation.
  • Installieren und aktivieren Sie das Thema.
  • Installieren und aktivieren Sie das Seitengenerator-Plugin.
  • Von dort erhalten Sie ein im Wesentlichen leeres Whiteboard. Tatsächlich unterscheidet es sich nicht wesentlich von dem, was ich sehe, wenn ich mein eigenes, auf Unterstrichen basierendes Startthema aktiviere.

    Dies hat den Vorteil, dass das Thema nicht viele vorgefasste Vorstellungen darüber hat, was Sie erstellen möchten. Dies bedeutet, dass ein Designer theoretisch ein Designmodell erstellen und es dann zum Leben erwecken kann. Solange Sie verstehen, was das Thema kann und was nicht.

    Aber wie wir sehen werden, gibt es einige Optionen für diejenigen, die etwas Klügeres wollen.

    Das Thema, bevor Änderungen vorgenommen werden.

    Verwenden von WordPress Customizer

    WordPress Customizer ist ein internes Tool, mit dem Sie verschiedene Einstellungen für das Thema anpassen und die Ergebnisse in Echtzeit anzeigen können. Ziel war es, im Gegensatz zu Optionsfeldern eine universelle Benutzeroberfläche für die Themeneinstellungen bereitzustellen, da viele Themen implementiert wurden.

    Hier nutzt das Beaver Builder-Thema den Customizer und bietet viele Optionen. Unter den Highlights:

    Voreinstellungen

    Wählen Sie aus einer Auswahl vorgefertigter Farbschemata. Diese Stile können durch andere Anpassungs- oder CSS-Optionen ersetzt werden.

    Thematische Voreinstellungen.

    Header

    Hier finden Sie verschiedene Einstellungen für Design, Platzierung des Logos und Navigation. Eine Option für einen “klebrigen” Header ist enthalten, was eine nette Geste ist. Die Projekte decken mehrere gängige Szenarien ab.

    Themen-Header-Einstellungen.

    Inhalt

    Wählen Sie Hintergrundfarben und Seitenlayouts für Ihr Blog, Ihren einzelnen Beitrag, Ihr Beitragsarchiv und Ihre WooCommerce-Vorlagen.

    Fusszeile

    In der Fußzeile der Website können Widgets für verschiedene Arten von Inhalten entworfen und hinzugefügt werden. Standardmäßig gibt es hier einige Einschränkungen. Sie wollten beispielsweise eingebettete Links zu Social Media-Profilen im Fußzeilen-Widget-Bereich platzieren (diese werden so eingestellt, dass sie unter den Widgets angezeigt werden), was nicht unterstützt wird. Glücklicherweise hat ein Code-Snippet, das ich gefunden habe, dies durch einen WordPress-Passcode ermöglicht.

    Definieren der Fußzeile des Themas.

    Code

    Wenn Sie CSS, JavaScript oder anderen spezifischen Code in Ihre Website einfügen möchten, können Sie dies hier tun. Dies kann nützlich sein, wenn Sie Google Analytics oder den Pixel-Tracking-Code hinzufügen möchten.

    Das Urteil

    Insgesamt hatte der Customizer genügend Optionen, um das grundlegende Erscheinungsbild meiner Website zu erstellen. Es ist nicht so robust wie ich es von einem benutzerdefinierten Thema gewohnt bin, aber hoffentlich. Der Hauptpunkt hierbei ist die schnelle Entwicklung und Code-Prävention.

    Das Beaver Builder-Thema hat genau das getan, da ich in einer halben Stunde die gewünschten Dinge definieren konnte. Jede Behinderung ist der Preis, den Sie mit einem Projekt mit niedrigerem Budget zahlen.

    Konstruktionsseiten

    Ich werde aus zwei Gründen nicht viel Zeit damit verbringen, hier ins Detail zu gehen. Erstens waren meine Bedürfnisse für die verschiedenen Seiten der Site nicht sehr kompliziert. Zweitens ist der Seitenersteller selbst dem Thema untergeordnet. Es gibt jedoch noch einige erwähnenswerte Elemente.

    Die Homepage wurde schnell erstellt, nicht von Grund auf neu. Meinem Kunden gefiel eine der vorgefertigten Seitenvorlagen von Beaver Builder. Das Einrichten war nur eine Frage des Importierens des Modells und des anschließenden Hackens, um die Dinge anzupassen, die wir behalten wollten, und um die Dinge zu entfernen, die wir nicht getan haben. Zusätzlich wurden einige zusätzliche Module über den Seitengenerator hinzugefügt. Funktionen wie hintere Karussells und Scrolling-Animationen verleihen etwas Persönlichkeit.

    Die sekundären Seiten waren sehr einfach. Ich habe ein Seitentitelmodul erstellt, das einen fotografischen Hintergrund verwendet, und es für die wiederholte Verwendung auf anderen Seiten gespeichert. Von da an ging es nur noch darum, den Rest des Inhalts hinzuzufügen und ihn gut zu formatieren.

    Das einzige Problem, das ich hatte, war die Integration von Schwerkraftformen. Da der Seitenersteller weder den WordPress Gutenberg Block Editor noch den Classic Editor (der das beliebte Formular-Plugin unterstützt) verwendet, musste ich einen Passcode manuell in ein Texteditor-Modul eingeben. Dies war kein großes Problem, aber es könnte für einen Kunden schwierig sein, der mit dem Prozess nicht vertraut ist.

    Überlegungen zum Erstellen einer WordPress-Website von Grund auf neu (kein Code) 1

    Das Urteil

    Der Aufbau der Seite war mehr oder weniger wie erwartet. Benutzerfreundlichkeit ist das Verkaufsargument dieses Zubehörs und passt perfekt. Mehrere Module konnten einfach per Drag & Drop auf die Seite gezogen und mehrspaltige Layouts einfach konfiguriert werden. Alles war reaktionsschnell und kann auch speziell an die Bildschirmgröße angepasst werden.

    Die Anzahl der enthaltenen Module war solide und deckte fast alles ab, was das Projekt benötigte. Wenn einige komplexere Funktionen benötigt werden, stehen mehrere Plugin-Pakete von Drittanbietern zur Verfügung, die helfen können.

    Allgemeine Eindrücke

    Insgesamt muss ich sagen, dass dies eine bessere Erfahrung war als normalerweise mit zuvor erstellten Themen. Die Tatsache, dass ich von etwas Grundlegendem ausgehen und etwas erstellen konnte, um die Anforderungen des Projekts zu erfüllen, entsprach eher meinem bevorzugten Workflow.

    Ehrlich gesagt musste ich ein paar zusätzliche Codebits implementieren, um alles zu erreichen, was ich wollte. Der oben genannte Zugangscode für Links zu Social Media-Profilen und ein wenig zusätzliches JavaScript haben mir geholfen, die Website zu vervollständigen. Beide wurden über die Datei functions.php des untergeordneten Themas in die Warteschlange gestellt, sodass sie bei zukünftigen Themenaktualisierungen nicht ersetzt werden konnten.

    Ich dachte, dies sei eine praktikable Option für einfache Projekte. Es gibt einige Szenarien, z. B. die Verwendung benutzerdefinierter Felder oder bedingter Inhalte, in denen die Verwendung eines vollständigen benutzerdefinierten Themas möglicherweise sinnvoller ist. Diese Arten von Ressourcen bieten jedoch häufig größere Budgets.

    Wenn Sie also ein Entwickler sind, der schnell eine billige neue Website entwickeln möchte, aber ohne die Fallstricke eines Drittanbieter-Themas, ist dies möglicherweise der richtige Weg. Bestätige einfach, dass du innerhalb der Parameter dessen leben musst, was da ist. Andernfalls wird es Zeit, diesen Code-Editor zu aktivieren.

    * Hinweis: Die Bilder in diesem Beitrag dienen nur zur Veranschaulichung: Sie spiegeln nicht das tatsächlich beschriebene Projekt wider.