Hinweis: Der folgende Artikel hilft Ihnen dabei: TechCrunch mit WordPress neu erstellen: Eine 30-minütige Herausforderung
Wenn es um Vielseitigkeit und Benutzerfreundlichkeit geht, ist WordPress erstaunlich. Um es auf die Probe zu stellen, habe ich versucht, das nachzubilden TechCrunch-Website unter Verwendung der Standardeinstellung Blockthema 2023 und keine Plugins. Hier ist meine Erfahrung.
Die Herausforderung
Mit einer leeren WordPress-Website zu meiner Linken und TechCrunch zu meiner Rechten war es mein Ziel, das Design der renommierten Website in nur einer halben Stunde so genau wie möglich nachzubilden. Obwohl ich der Einfachheit halber meine leere Website vorab mit ein paar Beiträgen gefüllt hatte, war die vor mir liegende Aufgabe immer noch monumental.
Die Schritte
- Designansatz: Meine primäre Designstrategie bestand darin, Spalten auf der Startseite und dann den Abfrageschleifenblock zu verwenden, um die Beiträge einzubinden. Aufgrund der Zeitbeschränkungen wollte ich ein Layout nachbilden, bei dem sich die Beitragsdetails links und das vorgestellte Bild rechts befinden.
- Erstellen einer Sticky-Navigation: Der erste Schritt bestand darin, die Navigation klebrig zu machen. Ein entscheidender Aspekt, den es zu verstehen gilt, ist, dass Klebrigkeit nur innerhalb eines Behälters angewendet werden kann. Durch die Gruppierung des Inhalts innerhalb der Spalte habe ich eine Sticky-Navigation erreicht, ähnlich der auf TechCrunch.
- Einbinden von Beitragsdetails: Mithilfe des Abfrageschleifenblocks habe ich Beitragsdetails hinzugefügt. In WordPress 6.3 können Sie das Seitenverhältnis Ihrer vorgestellten Bilder im Abfrageschleifenblock festlegen und so die Konsistenz unabhängig von den ursprünglichen Bildproportionen gewährleisten.
- Stil und Formatierung: Die Postästhetik ist von entscheidender Bedeutung. Ich habe die Schriftgrößen angepasst, Veröffentlichungsdaten, Autoren und Kategorien hinzugefügt. Der Schlüssel bestand darin, sicherzustellen, dass jedes Element nicht nur die Essenz von TechCrunch einfängt, sondern auch optisch ansprechend ist.
- Letzter Schliff: Zu guter Letzt habe ich etwas Polsterung für ein ordentliches Layout hinzugefügt. Durch den Zugriff auf die Option „Site bearbeiten“ konnte ich außerdem Elemente verfeinern, Spaltengrößen anpassen und die Reaktionsfähigkeit sicherstellen.
Ergebnis
Das Endergebnis? Eine WordPress-Site, die bemerkenswert an TechCrunch erinnert, komplett mit Sticky-Navigation, maßgeschneiderten Beitragslayouts und benutzerdefinierten globalen Stilen.
Abschluss
Obwohl ich aus Zeitgründen möglicherweise keine pixelgenaue Genauigkeit erreicht habe, zeigte die Übung die Leistungsfähigkeit und Flexibilität von WordPress. Egal, ob Sie ein Anfänger oder ein erfahrener Entwickler sind, die Plattform bietet Tools, mit denen Sie Ihre Vision schnell zum Leben erwecken können. Meine 30-minütige Challenge war ein Beweis dafür.
