Einleitung

Frontend-Entwicklung profitiert enorm von KI: Komponenten generieren, CSS schreiben, Responsive Layouts designen, Accessibility prüfen – alles Aufgaben, bei denen AI Zeit spart und Qualität steigert. Hier sind 12 Prompts für die wichtigsten Frontend-Aufgaben.

Dennoch sollte man die Limitierungen im Blick behalten.

Inhaltsverzeichnis

1. Prompt 1: React/Vue Komponente generieren
2. Prompt 2: CSS von Design zu Code
3. Prompt 3: Responsive Layout
4. Prompt 4: Accessibility Audit
5. Prompt 5: CSS Animationen
6. Prompt 6: Formulare mit Validierung
7. Prompt 7: State Management
8. Prompt 8: Frontend Performance
9. Prompt 9: Design System / Component Library
10. Prompt 10: Tailwind CSS Patterns
11. Prompt 11: Frontend Testing
12. Prompt 12: Framework-Migration
13. Tool-Empfehlungen
14. FAQ

Ebenso hilfreich ist ein strukturierter Ansatz bei der Umsetzung.

Prompt 1: React/Vue Komponente generieren

Allerdings gibt es einige wichtige Unterschiede zu beachten.

Erstelle eine [React / Vue 3] Komponente:

Komponente: [z.B. "DataTable mit Sortierung, Filter, Pagination"]
Styling: [Tailwind CSS / CSS Modules / styled-components]
TypeScript: Ja

Anforderungen:
1. Props mit TypeScript Interface (alle Typen korrekt)
2. Keyboard-Navigation (Tab, Enter, Escape)
3. ARIA-Attribute für Accessibility
4. Loading State (Skeleton)
5. Empty State (keine Daten)
6. Error State (Fehler bei Datenladen)
7. Responsive (Mobile: Cards statt Tabelle)
8. Sortierbar per Klick auf Header
9. Filter-Input mit Debounce (300ms)
10. Pagination (10/25/50 pro Seite)

Liefere:
- Komponente (TypeScript)
- Types/Interfaces
- Storybook Story
- Unit Test (Testing Library)

Deshalb empfiehlt es sich, den Prompt schrittweise zu verfeinern.

Vor allem in der Praxis hat sich dieser Workflow bewährt.

Prompt 2: CSS von Design zu Code

Ebenso wichtig ist es, die Best Practices zu kennen.

Konvertiere dieses UI-Design zu CSS/HTML:

Beschreibung des Designs:
[z.B. "Hero Section: Großes Hintergrundbild, zentrierter Text (Heading + Subheading + CTA Button), 
Gradient-Overlay von schwarz-transparent nach transparent, 100vh Höhe"]

Styling-Ansatz: [Tailwind / CSS / SCSS]

Vorgaben:
- Schriftart: Inter (Headings: 700, Body: 400)
- Farben: Primary #2563eb, Background #0f172a, Text #f8fafc
- Spacing: 8px Grid System
- Border Radius: 8px (Buttons), 16px (Cards)
- Schatten: Subtil (0 4px 6px rgba(0,0,0,0.1))

Output:
1. Semantisches HTML (section, article, nav – keine div-Suppe)
2. CSS mit Custom Properties für Farben/Spacing
3. Responsive Breakpoints (sm: 640px, md: 768px, lg: 1024px)
4. Dark Mode Variante
5. Hover/Focus States für alle interaktiven Elemente

Dementsprechend ist eine manuelle Überprüfung empfehlenswert.

Insbesondere für fortgeschrittene Projekte ist das relevant.

Prompt 3: Responsive Layout

Natürlich gibt es dabei verschiedene Herangehensweisen.

Erstelle ein responsives Layout:

Layout: [z.B. "Dashboard mit Sidebar, Header, Main Content, Widget Grid"]
Styling: [Tailwind / CSS Grid + Flexbox]

Breakpoints:
- Mobile (< 640px): Stack-Layout, Sidebar als Hamburger Menu
- Tablet (640-1024px): Sidebar collapsed (Icons only), 2-Column Grid
- Desktop (> 1024px): Sidebar expanded, 3-Column Grid

Anforderungen:
1. CSS Grid für das Hauptlayout
2. Flexbox für Navigation Items
3. Container Queries für Widgets (unabhängig vom Viewport)
4. Sticky Header und Sidebar
5. Smooth Transitions beim Breakpoint-Wechsel
6. Touch-freundliche Targets (min. 44x44px auf Mobile)
7. Fluid Typography (clamp() für Schriftgrößen)
8. Aspect-Ratio für Bilder/Videos

Darüber hinaus lässt sich das Beispiel leicht erweitern.

Im Grunde sparst du dadurch langfristig viel Zeit.

Prompt 4: Accessibility Audit

Dabei spielen mehrere Faktoren eine wichtige Rolle.

Führe ein Accessibility Audit (WCAG 2.1 AA) durch:

```html
[HTML/JSX Code hier einfügen]
```

Prüfe:
1. **Semantik**: Korrekte HTML-Elemente (button statt div, nav statt div)
2. **Bilder**: Alt-Texte vorhanden und beschreibend
3. **Kontrast**: Farbkontrast mindestens 4.5:1 (Text) / 3:1 (große Text)
4. **Keyboard**: Alle Funktionen per Keyboard erreichbar
5. **Focus**: Sichtbarer Focus-Indikator, logische Tab-Reihenfolge
6. **ARIA**: Korrekte Roles, Labels, Live-Regions
7. **Formulare**: Labels mit for/id verknüpft, Error-Messages verlinkt
8. **Motion**: prefers-reduced-motion respektiert
9. **Screen Reader**: Sinnvolle Lesereihenfolge, Skip Links

Für jedes Problem:
- WCAG Kriterium (z.B. "1.1.1 Non-text Content")
- Schweregrad (A / AA / AAA)
- Aktueller Code → korrigierter Code

Allerdings gibt es dabei einige Punkte, die du beachten solltest.

Prompt 5: CSS Animationen

Außerdem gibt es hilfreiche Tools, die dich dabei unterstützen.

Erstelle CSS Animationen:

Gewünschte Animation: [z.B. "Card-Hover: leichtes Lift (translateY) + Schatten-Vergrößerung, 
Fade-In beim Scrollen, Loading Spinner, Skeleton Shimmer"]

Erstelle:
1. @keyframes Definition
2. Animation Properties (duration, timing-function, delay)
3. Trigger: [hover / scroll / page-load / state-change]
4. Performance: Nur transform und opacity animieren (GPU-beschleunigt)
5. prefers-reduced-motion: Animationen reduzieren/deaktivieren
6. Tailwind-Version (falls Tailwind genutzt)
7. Framer Motion / React Spring Alternative (falls React)

Best Practices:
- Dauer: 200-500ms für UI (nicht zu langsam)
- Easing: ease-out für Einblendungen, ease-in für Ausblendungen
- Keine Layout-Shifts durch Animationen (CLS = 0)

Tatsächlich lässt sich dieser Code direkt in dein Projekt übernehmen.

Zudem lassen sich die Ergebnisse auch auf andere Projekte übertragen.

Prompt 6: Formulare mit Validierung

Insbesondere für den Einstieg sind die folgenden Informationen hilfreich.

Erstelle ein Formular mit vollständiger Validierung:

Framework: [React + React Hook Form / Vue + VeeValidate]
Felder:
- [z.B. "Name (required, min 2 Zeichen)"]
- [z.B. "E-Mail (required, valid format)"]
- [z.B. "Passwort (min 8, Groß+Klein+Zahl+Sonderzeichen)"]
- [z.B. "Passwort bestätigen (muss übereinstimmen)"]
- [z.B. "Geburtsdatum (required, über 18)"]

Anforderungen:
1. Client-Side Validation (Zod / Yup Schema)
2. Inline Error Messages (unter dem Feld, rot)
3. Live-Validierung (nach erstem Submit, dann bei Änderung)
4. Disable Submit bei Fehlern
5. Loading State beim Absenden
6. Server Error Handling (z.B. "E-Mail existiert bereits")
7. Accessible: Labels, aria-describedby für Fehlermeldungen
8. Autofill-freundlich (autocomplete Attribute)
9. Responsive Design (Mobile: Single Column)

Ebenfalls sinnvoll ist es, verschiedene Varianten auszuprobieren.

Hierbei hilft es, von konkreten Beispielen auszugehen.

Prompt 7: State Management

Weiterhin ist es wichtig, die Grundlagen zu verstehen.

Implementiere State Management für meine App:

Framework: [React / Vue]
Aktuelle Situation: [z.B. "Props drilling über 5 Ebenen, 
useState überall, kein klares Pattern"]

Daten die gemanaged werden müssen:
- [z.B. "User Session (auth state, profile)"]
- [z.B. "Server Data (users list, projects, tasks)"]
- [z.B. "UI State (sidebar open, modal visible, theme)"]
- [z.B. "Form State (mehrstufiges Formular)"]

Empfehle und implementiere:
1. Welcher State gehört wohin? (Server State vs. Client State)
2. Server State: TanStack Query (React Query) / SWR
3. Global Client State: Zustand / Jotai / Pinia
4. Local State: useState / useReducer
5. URL State: nuqs / next-query-params

Für jede Lösung:
- Store/Hook Definition
- Verwendung in Komponenten
- TypeScript Types
- DevTools Integration

Somit sparst du Zeit und erhältst qualitativ hochwertigeren Output.

Grundsätzlich empfiehlt es sich, schrittweise vorzugehen.

Prompt 8: Frontend Performance

Im Folgenden findest du alle wichtigen Details dazu.

Optimiere die Performance meiner Frontend-App:

Framework: [Next.js / Nuxt / Vite + React]
Aktuelle Probleme: [z.B. "LCP 4.2s, CLS 0.15, Bundle 2MB"]

Analysiere und optimiere:
1. **Core Web Vitals**:
   - LCP (Largest Contentful Paint): Ziel < 2.5s
   - FID/INP (Interaction to Next Paint): Ziel < 200ms
   - CLS (Cumulative Layout Shift): Ziel < 0.1

2. **Bundle Size**:
   - Code Splitting (dynamic imports, route-based)
   - Tree Shaking prüfen
   - Große Dependencies ersetzen (moment → dayjs, lodash → lodash-es)
   - Bundle Analyzer Konfiguration

3. **Bilder**:
   - Next/Image oder @nuxt/image
   - WebP/AVIF Format
   - Responsive srcset
   - Lazy Loading (below-the-fold)

4. **Rendering**:
   - SSR vs SSG vs ISR (was für welche Seite)
   - React.memo / useMemo / useCallback (nur wo nötig!)
   - Virtualisierung für lange Listen (TanStack Virtual)

5. **Caching**:
   - Service Worker
   - HTTP Cache Headers
   - stale-while-revalidate

Ebenfalls empfehlenswert ist eine regelmäßige Überprüfung der Ergebnisse.

Prompt 9: Design System / Component Library

Somit kannst du direkt mit der Umsetzung beginnen.

Erstelle die Basis für ein Design System:

Projekt: [z.B. "SaaS App, Multi-Brand fähig"]
Styling: [Tailwind + CVA / CSS Custom Properties / Styled Components]

Erstelle:
1. **Design Tokens**:
   - Farben (Primary, Secondary, Neutral, Success, Warning, Error)
   - Typography Scale (6 Größen)
   - Spacing Scale (4px Grid: 0.5, 1, 2, 3, 4, 6, 8, 12, 16)
   - Border Radius (sm, md, lg, full)
   - Shadows (sm, md, lg)

2. **Base Components**:
   - Button (Primary, Secondary, Ghost, Destructive + Sizes)
   - Input (Text, Password, Search + States)
   - Badge (Status-Farben)
   - Card (Standard, Interactive)
   - Modal/Dialog

3. **Für jede Komponente**:
   - TypeScript Props Interface
   - Variants (Class Variance Authority / clsx)
   - Storybook Story
   - Accessibility (ARIA)
   - Dark Mode Support

Im Grunde funktioniert dieser Ansatz mit allen gängigen AI-Tools.

Dabei ist der folgende Punkt besonders wichtig.

Prompt 10: Tailwind CSS Patterns

Im Grunde vereinfacht dieser Ansatz den gesamten Workflow erheblich.

Erstelle diese UI-Elemente mit Tailwind CSS:

Element: [z.B. "Pricing Table mit 3 Plans, Feature-Vergleich, 
hervorgehobener 'Popular' Plan, Toggle Monthly/Yearly"]

Anforderungen:
1. Nur Tailwind-Klassen (kein custom CSS)
2. Responsive (Mobile: Stack, Desktop: Side-by-Side)
3. Dark Mode (dark: Varianten)
4. Hover/Focus States
5. Tailwind Config Erweiterungen wo nötig
6. cn() / clsx für bedingte Klassen
7. Performance: Keine unnötig langen Klassenlisten

Auch:
- tailwind.config.ts Anpassungen (Theme Extend)
- Reusable @apply Styles nur für wirklich häufige Patterns
- Tailwind Plugins empfehlen (@tailwindcss/typography, etc.)

Folglich erhältst du mit diesem Ansatz deutlich bessere Resultate.

Darüber hinaus solltest du diesen Aspekt berücksichtigen.

Prompt 11: Frontend Testing

Ebenfalls relevant sind die praktischen Anwendungsbeispiele.

Erstelle Tests für meine Frontend-Komponente:

```
[Komponenten-Code hier einfügen]
```

Testing Tools: [Vitest + Testing Library / Jest + Enzyme / Playwright]

Erstelle:
1. **Unit Tests** (Testing Library):
   - Rendering (alle States: default, loading, error, empty)
   - User Interactions (click, type, select)
   - Props-Varianten
   - Callback-Aufrufe (onClick, onChange, onSubmit)
   - Keyboard Navigation

2. **Integration Tests**:
   - Formular: Ausfüllen → Validierung → Submit
   - Data Fetching: Loading → Success / Error
   - Navigation: Router-Interaktion

3. **E2E Tests** (Playwright):
   - Happy Path (User Story komplett)
   - Error Scenarios
   - Mobile vs Desktop

Best Practices:
- Teste Verhalten, nicht Implementierung
- getByRole vor getByTestId
- Keine Snapshot Tests (zu fragil)

Weiterhin ist es ratsam, die Ergebnisse immer kritisch zu prüfen.

Tatsächlich zeigt die Praxis, dass dieser Ansatz sehr effektiv ist.

Prompt 12: Framework-Migration

Deshalb lohnt es sich, dieses Thema genauer zu betrachten.

Plane eine Frontend-Framework-Migration:

Von: [z.B. "Create React App + Redux + CSS Modules"]
Nach: [z.B. "Next.js 14 + Zustand + Tailwind"]

Aktuelles Projekt:
- [z.B. "45 Komponenten, 12 Seiten, REST API"]
- [z.B. "Jest Tests vorhanden"]
- [z.B. "Team: 3 Frontend Devs"]

Erstelle:
1. **Migration-Strategie**: Big Bang vs. Strangler Fig vs. Parallel
2. **Schritt-für-Schritt Plan**: Phase 1 → Phase N
3. **Komponenten-Mapping**: Alt → Neu
4. **State Migration**: Redux Store → Zustand Stores
5. **Routing Migration**: React Router → Next.js App Router
6. **Styling Migration**: CSS Modules → Tailwind
7. **API Layer**: fetch Calls → Server Components / Server Actions
8. **Risiken & Mitigations**
9. **Zeitschätzung** pro Phase
10. **Rollback-Plan** falls etwas schiefgeht

Dementsprechend solltest du die einzelnen Schritte sorgfältig abarbeiten.

Tool-Empfehlungen

Grundsätzlich gibt es dabei einige Punkte zu beachten.

Zusätzlich gibt es einige bewährte Tipps für den Alltag.

FAQ

Kann AI ganze UIs generieren?

Zusammenfassend lässt sich sagen, dass dies ein zentraler Aspekt ist.

Ja, Tools wie v0.dev und bolt.new generieren funktionale React-Komponenten aus Textbeschreibungen. Qualität für Prototypen: sehr gut. Für Production: Anpassungen an Design System, Accessibility und Edge Cases nötig.

React oder Vue in 2026?

Vor allem für den praktischen Einsatz sind diese Informationen wertvoll.

React hat das größere Ökosystem und mehr AI-Training-Daten (bessere Code-Generierung). Vue ist einfacher zu lernen und hat die bessere DX. Für neue Projekte: Next.js (React) oder Nuxt (Vue) – beides exzellent.

Tailwind oder klassisches CSS?

Tatsächlich ist dieser Bereich besonders wichtig für Entwickler.

Tailwind ist der Standard für AI-generiertes Frontend. AI generiert Tailwind-Klassen mit extrem hoher Qualität. Für AI-gestütztes Styling ist Tailwind klar die beste Wahl.

Wie groß sollte mein Bundle sein?

Dennoch solltest du einige Besonderheiten beachten.

Ziel für initialen JS-Load: unter 100KB (gzipped). Total Bundle unter 300KB. Next.js mit Code Splitting erreicht das automatisch. Nutze next/dynamic für schwere Komponenten (Charts, Editoren).

Im Folgenden gehe ich auf die wichtigsten Details ein.

Verwandte Artikel:

• Die besten VS Code Extensions für AI Coding
• Zusätzlich Clean Code mit AI schreiben
• Prompt Engineering für Entwickler

Deshalb ist es wichtig, diesen Abschnitt aufmerksam zu lesen.

Zuletzt aktualisiert: März 2026

Der Beitrag AI für Frontend-Entwicklung erschien zuerst auf MetinCelik.de.

Code-Blöcke werden mit <pre lang=“LANGUAGE“ line=“1″> und </pre> definiert. Der Platzhalter LANGUAGE soll durch die unterstützte Programmiersprachen ersetzt werden. Weiter unten finden Sie eine vollständige Liste der unterstützten Sprachen. Das Zeieleattribut ist optional wählbar.

Beispiele

Beispiel 1: PHP, keine Zeilennummer

<pre lang=“php“>
<div id=“foo“>
<?php
function foo() {
echo „Hello World!\\n“;
}
?>
</div>
</pre>

Ansicht mit WP-Syntax:

<div id="foo">
<?php
  function foo() {
    echo "Hello World!\\n";
  }
?>
</div>

Beispiel 2: Java, mit Zeilennummern ab Zeile 1

<pre lang=“java“ line=“1″>
public class Hello {
public static void main(String[] args) {
System.out.println(„Hello World!“);
}
}
</pre>

Ansicht mit WP-Syntax:

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

Unterstützte Programmiersprachen:

Die folgende Sprachen werden im Attribut lang unterstützt:

abap, actionscript, actionscript3, ada, apache, applescript, aptsources, asm, asp, autoit, avisynth, bash, bf, bibtex, blitzbasic, bnf, boo, c, cmac, caddcl, cadlisp, cil, cfdg, cfm, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, z80

Author Homepage: http://ryan.mcgeary.org
Plugin Homepage: http://wordpress.org/extend/plugins/wp-syntax/

Was ist Syntaxhervorhebung?

Das sagt Wikipedia:

Syntaxhervorhebung (eng. syntax highlighting) bezeichnet die Möglichkeit eines Computerprogrammes, bestimmte Wörter und Zeichenkombinationen in einem Text abhängig von ihrer Bedeutung in unterschiedlichen Farben, Schriftarten und -stilen darzustellen. Syntaxhervorhebung wird vor allem in Texteditoren zur Bearbeitung von ausgezeichneten Dokumenten, Programm-Quelltexten und Konfigurationsdateien eingesetzt. Hervorgehoben werden dabei Schlüsselwörter und andere Sprachelemente.

Syntaxhervorhebung verbessert die Lesbarkeit von Texten: Strukturen im Text sind leichter zu erkennen, das „Querlesen“ wird vereinfacht, Kommentare erscheinen abgesetzt vom eigentlichen Code und Tippfehler fallen schneller auf, da in vielen Fällen ein Tippfehler zu einer veränderten Darstellung führt.

Die Syntaxhervorhebung gehört heutzutage zur Standardfunktionalität vieler integrierter Entwicklungsumgebungen und Texteditoren.

Der Beitrag WordPress Plugin WP-Syntax erschien zuerst auf MetinCelik.de.

Eine Möglichkeit wäre ein Quelltext eines Programms oder einer Webseite anschauen im Texteditor anschauen. Die Variablennamen oder Schlüsselwörter aus dem Quelltext in eine Suchmaschine eingeben, denn meistens wird man im Internet fündig. Man kann selbst im Quelltext die Variablen und Werte verändern bzw. versuchen die Funktionen zu erweitern. Oder man sucht sich ein Programmierbuch oder Tutorial aus dem Internet und schreibt einfache Programme, wie ein „Hallo World“ Anwendung. Um Veränderungen im Quelltext der Programme durchzuführen können, sollte man kleine Anwendungen, wie z.B den Texteditor oder Taschenrechner auswählen. Hier sollte der Quelltext mit Dokumentation vorhanden sein. Es gibt einige Opensource Texteditoren wie z.B. Notepad 2 oder Notepad++ im Internet. Man sollte selbst Anwendungen ausdenken, die einem die Arbeit am PC erleichtern würden, oder ein Spiel, wie z.B Hangman oder TicTacToe. Man sollte sich selbst Gedanken machen, wie die Funktionsweise dieser Anwendungen sein kann und schrittweise die Funktionen der Anwendungen schreiben. Nach und nach wird man ein paar Schritte überspringen können, weil man fertige Codeteile in anderen Programmen verwenden wird, nennt man auch „Copy&Paste“ oder sich Hilfe aus fertigen Frameworks holt. Frameworks sind eine Ansammlung von Codefragmenten zu bestimmten Bereichen.

Zweitens man nimmt sich ein Buch oder ein EBook, wie z.B. die kostenlosen EBooks von Galileo Computing, und arbeitet die einzeln Kapiteln ab und schreibt den Code aus diesen Büchern ab. Das wird recht trocken sein.

Drittens man besucht einen Lehrgang an der VHS oder man kann den Ausbildungsberuf Fachinformatiker Fachrichtung Anwendungsprogrammierung erlernen oder man studiert Informatik an der Universität. Dann hat man den Vorteil, dass man einen direkten Ansprechpartner hat, der einen bei Problemen weiterhelfen kann.

Die dritte Variante ist die Beste, man lernt nicht nur Leute kennen, sondern Leute die das selbe tun und gleich einem Helfen können. In einer Gemeinschaft lässt sich immer einfach lernen.

Der Beitrag How To: Wie lernt man programmieren? erschien zuerst auf MetinCelik.de.

Website Templates
websitetemplates.bz – Website Templates
templatesfactory.net – Professional Website Templates
hosterio.com – Web Designing

Wallpapers
iPhone-Wallpapers.org
Wallpapers.NET
ipodtouchwallpapers.us – iPod Touch Wallpapers
wallpaperstock.net – for fresh desktops
wallpaperscipt.com

Jobs
jobs.webdesignerwall.com – Design jobs on the wall
searchwebjobs.com – A Job Board For Creative & Tech Pros
9xhtml.com – PSD To HTML Service

Der Beitrag CSS Links erschien zuerst auf MetinCelik.de.

Nein, es handelt sich nicht um das oben beschriebene Wordbook. Wordbook ist ein WordPress Plugin, dessen Funktion ist es automatisch WordPress Beiträge auf www.facebook.com weiterzuleiten. Ein fantastisch kostenloses WP Plugin, welches sehr einfach und automatisch auf dieser Seite installiert wurde und es funktioniert bisher einwandfrei mit WP 2.8.3.

Plugin Link: http://wordpress.org/extend/plugins/wordbook/

Der Beitrag Ein weiteres hilfreiches WordPress Plugin mit dem Namen Wordbook erschien zuerst auf MetinCelik.de.

\YourTheme\images\*.*

Um die Merkmale für Webdesign und Schriftarten deines WordPress Themes zu editieren, werden wir dies in einem globalen StyleSheet Datei abspeichern. Dazu erstelle eine Datei mit dem Namen style.css in dem Theme Ordner und öffne es in einem Editor. Am besten wählt man hier ein Quellcode-Editor.

Nun braucht das WordPress Theme einen Namen und natürlich weitere Informationen, welche dann im Admin-Auswahlfenster für die Themes erscheinen sollen. Diese Informationen werden am Anfang des StyleSheetsdatei erwartet: Name, Url, Beschreibung, Version, Author des Themes und die URL des Author

Es müssen folgende Einträge vorhanden sein:

/*
Theme Name: My First Theme
Theme URI: http://www.mywebsite.com/myfirsttheme.html
Description: My First Theme for WordPress
Version: 1.0
Author: Your Name
Author URI: http://www.mywebsite.com/
*/

Später wird diese Datei (style.css) im Kopfbereich des HTML-Quelltextes verbunden, indem wir diese Zeile anwenden werden:

Der Beitrag WordPress Theme Tutorial – Teil 3 – Die Bilder und das Stylesheet erschien zuerst auf MetinCelik.de.

Erstellen sie nun ein neuen Ordner für Ihr WordPress Theme und wir geben den Namen „MyFirstTheme“.

Und erstellen sie diese Dateien mit leeren Inhalt:
– index.php
– style.css
– header.php
– footer.php
– search.php
– comment.php
– single.php
– page.php
– sidebar.php

Der Beitrag WordPress Theme Tutorial – Teil 2 – Erstelle ein neue WordPress Theme erschien zuerst auf MetinCelik.de.

Einzurichten einer lokalen Installation auf Windows: http://wpcandy.com/articles/tutorials/how-to-setup-wordpress-locally-on-windows.html

Einzurichten einer lokalen Installation auf Mac Os X: http://wpcandy.com/articles/tutorials/setup-wordpress-locally-on-mac-os-x.html

Der Beitrag WordPress Theme Tutorial – Teil 1 – Installiere WordPress auf lokalem PC erschien zuerst auf MetinCelik.de.

Teil 1 – Installiere WordPress auf lokalem PC.
Teil 2 – Erstelle ein neues WordPress Theme;
Teil 3 – Die Bilder und das Stylesheet;
Teil 4 – Erstelle den Kopfbereich;
Teil 5 – Seitentitel;
Teil 6 – Stylesheet URL;
Teil 7 – RSS URL;
Teil 8 – Seitentitel;
Teil 9 – Navigationslinks;
Teil 10 – Erstelle die Navigationsbereich;
Teil 11 – Die Suche;
Teil 12 – Platzhalter für Werbebanner;
Teil 13 – Dynamische Kategorien;
Teil 14 – Tag;
Teil 15 – Blogroll – Lesezeichen;
Teil 16 – Erstelle die Homepage;
Teil 17 – Die Schleife;
Teil 18 – Inhalt;
Teil 19 – Archive, Suche & Einzelner Artikel;
Teil 20 – Feste Seiten;
Teil 21 – 404 Seite;
Teil 22 – Fußbereich;
Teil 23 – Aktivieren des WordPress Themes;
Teil 24 – Testen: Validieren, …;

Das eine oder andere Punkt werde ich noch dazwischen schieben.

Der Beitrag WordPress Theme Tutorial – Teil 0 – Erstellen eines WordPress Theme erschien zuerst auf MetinCelik.de.