Erstellen eines einfachen WordPress-Themas. Erstellen einfacher WordPress-Themengruppen für Vorlagen

Um Ihre WordPress-Site zu erstellen, müssen Sie auf jeden Fall ein Thema hinzufügen. Sie werden auch als Vorlagen bezeichnet. Dies ist die Grundlage jeder Webressource.

In diesem Artikel werden die Schritte zum Erstellen einer Vorlage erläutert und das Layout von psd-Dateien beschrieben.

Sie lernen auch die grundlegenden technischen Anforderungen für WordPress-Themes kennen, was eine Vorlage sein muss, damit sie auf dem WordPress-Kern funktioniert. Auf diese Weise können Sie eine Website mit einem eigenen Thema erstellen, das genau Ihren Anforderungen entspricht.

Bitte beachten Sie, dass dieses Tutorial keine Beschreibung zum Hinzufügen eines vorgefertigten Themas enthält. Dies ist ein Handbuch zum Generieren Ihrer eigenen Vorlage. Wenn Sie das Thema heruntergeladen haben und nicht wissen, wie es installiert werden soll, rufen Sie das WordPress-Administrationsfenster im Abschnitt "Darstellung" auf und fügen Sie dort eines der verfügbaren Designs hinzu. Und jetzt schauen wir uns genauer an, was ein Thema ist, wofür es ist und wie man es selbst erstellt.

Zu welchen Zwecken wird ein Thema manuell erstellt?

Ein Thema (Vorlage) ist eine Sammlung von Funktions- und Stildateien, die zusammen das Design einer Ressource definieren. Das Thema hängt davon ab, wie die Site aussehen wird. Daher ist es sehr wichtig, den Prozess der Erstellung einer Vorlage korrekt anzugehen. Viele Leute stellen jetzt die Frage: „Warum ein eigenes Thema erstellen, wenn Sie ein fertiges Thema kostenlos im Internet herunterladen können?“. Dies ist eine logische Frage, auf die es eine umfassende Antwort gibt: "Um die perfekte Vorlage zu erstellen, die Ihren Anforderungen vollständig entspricht."

Wenn Sie ein Design aus einem Verzeichnis kostenloser WordPress-Vorlagen kaufen oder herunterladen, opfern Sie normalerweise die Qualität. In der Regel passen diese Vorlagen nicht für Sie. Aber Sie geben sich ab, ich denke, dass ein oder zwei Nuancen nicht das ganze Bild sind und dass Sie später das Thema bearbeiten werden. Tatsächlich stellt sich jedoch heraus, dass die Website ein unvollendetes Thema enthält, das Ihnen nicht gefällt. Deshalb ist es besser, sofort dein eigenes Ding zu machen. Das Layout mag zwar zunächst kompliziert erscheinen, aber wenn Sie es lernen, können Sie sogar benutzerdefinierte Vorlagen erstellen.

Darüber hinaus fühlen Sie sich nach dem Erstellen einer Vorlage wie ein WordPress-Sanitäter - Sie wissen, was die Site enthält. Verstehe, welche Elemente für was verantwortlich sind. Dann die Seite und Sie werden mit Ihnen sprechen. Machen Sie sich mit WordPress-Tags, -Strukturen und -Schleifen vertraut. Oder vielleicht möchten Sie es professionell machen und Ihren Lebensunterhalt damit verdienen, Vorlagen zu erstellen.

Hier sind die Hauptgründe, warum Sie Ihre eigene Website-Vorlage erstellen sollten:

• erfahren Sie alles über HTML, CSS und ein oder zwei Dinge über PHP.
• sie werden in der Lage sein zu erstellen, weil Webdesign auch eine Kunst ist;
• es wird möglich sein, Geld durch den Verkauf von Themen zu verdienen.
• eine neue Fähigkeit entdecken;
• erstellen Sie ein Design, das zu 100% für Ihre zukünftige Site geeignet ist.

Welche Standards erfüllt das Thema?

Es ist sehr wichtig, die offiziellen Richtlinien zu befolgen, wenn Sie Ihre Vorlage schreiben. Brechen Sie den Code, fügen Sie ein Tag an der falschen Stelle ein und überspringen Sie es - dies kann das Design beschädigen und sein Erscheinungsbild vollständig ruinieren. Sie sollten mit den Regeln zum Schreiben von PHP-Code sowie HTML vertraut sein, wenn Sie mit diesen Sprachen noch nicht vertraut sind. Sie müssen sich auch mit kaskadierenden CSS-Stylesheets befassen. Denken Sie also auch an die Grundlagen - dazu gibt es im Internet viele Informationen. Nun, und die letzte, am wenigsten wichtige Voraussetzung ist, eine Website wie ein Designer und nicht wie ein Schüler zu erstellen, damit Sie ein ernstes Projekt erhalten. Ansonsten macht es keinen Sinn, dieses Geschäft zu übernehmen.

Alle WordPress-Themes werden im Ordner wp-content / theme / gehostet. In diesem Ordner befinden sich weitere Ordner mit separaten Themen, eine Datei mit zusätzlichen Funktionen (functions.php), Stildateien und Bilder. Um Daten zu einem bestimmten Thema zu finden, müssen Sie in das entsprechende Verzeichnis wechseln. Dadurch wird das "Western" -Thema im Ordner "wp-content / theme / vestern /" abgelegt.

Bevor Sie beginnen, sollten Sie sich zumindest die Struktur der vorgefertigten Themen ansehen. Die Standard-WordPress-Site enthält zwei Standardvorlagen, die Sie überprüfen können. Dies ist die Standard- und klassische Vorlage. Öffnen Sie ihre Dateien im gewünschten Verzeichnis auf dem Server und vergleichen Sie ihre Unterschiede.

Sie werden feststellen, dass die Vorlage normalerweise aus drei Dateiformaten besteht:

1. Style.css - Eine Style-Datei, die für das externe Design der Site verantwortlich ist.
2. Functions.php ist eine Funktionsdatei, die Seiten verschiedene Funktionen hinzufügt.
3. Andere PHP-Dateien, die für die Funktionen der Vorlage verantwortlich sind, werden auf der Website angezeigt, Integration des Themas in WordPress. Mit diesen Dateien können Sie das PSD-Layout in eine vollwertige Vorlage übersetzen.

Lassen Sie uns jede dieser Dateien genauer analysieren, um zu verstehen, wie das Layout des WordPress-Themas funktioniert.

Regeln zum Erstellen der Datei style.css

Erstens muss es allen Besonderheiten des CSS-Markups entsprechen. Diese Datei bestimmt, wie Ihre Site aussehen wird. Es funktioniert jedoch nicht, wenn Sie keine Beschreibung der erstellten Vorlage hinzufügen. Dies ist die erste WordPress-Funktion, die beim Portieren eines PSD-Layouts auf die WordPress-Engine berücksichtigt wird. Sie müssen folgende Parameter angeben:

1. Der Name der Vorlage.
2. Die URL, die zum Thema führt.
3. Beschreibung mit Angabe der Hauptmerkmale der Vorlage. Kurz.
4. Name des Autors. In diesem Fall geben Sie Ihren Namen ein.
5. Link zum Autor, also zu Ihnen. Sie können in sozialen Netzwerken einen Link zu Ihrem Profil bereitstellen.
6. Der Name des übergeordneten Themas ist optional.
7. Themenversion. Wenn nur erstellt, dann v. 1.0.
8. Vollständige Beschreibung der Vorlage. Sie können im Detail schreiben.

Um das grundlegendste WordPress-Thema zu erstellen, müssen Sie nur eine bearbeitete Version mit einer einzigen style.css-Datei hinzufügen. Geben Sie in dieser Datei neben der Zeile "Vorlage" den Namen des übergeordneten Themas an. Beispiel: Klassisch, wenn Sie eine Standardvorlage bearbeiten. Jetzt stimmt das erstellte Thema vollständig mit der Classic-Vorlage überein. Daher müssen Sie die Dateien in das Verzeichnis wp-content / theme / classic hochladen.

Auf diese Weise können Sie Ihr erstes, einfachstes Thema erstellen, das ein „Nachkomme“ einer bereits vorbereiteten Vorlage ist. Dies ist jedoch kein vollwertiges Website-Design, sondern nur ein Versuch, es zu erfinden. Sie sollten also weiter recherchieren.

Funktionen der Zusatzfunktionsdatei functions.php

Die Vorlagen verwenden nicht immer die Datei functions.php, aber in den meisten Fällen ist dies erforderlich. Es muss in das Verzeichnis mit dem entsprechenden Thema gestellt werden. Bitte beachten Sie, dass diese Datei bei der Initialisierung des Themas berücksichtigt wird, wenn sie sich im Vorlagenordner befindet. Es funktioniert wie ein Plugin. Und es wird solche Funktionen ausführen, wie Sie es geben.

Der Hauptzweck der Datei functions.php besteht darin, die verfügbaren Anpassungsfunktionen im Administrator für ein bestimmtes Thema zu definieren. Das heißt, alle Funktionen, die Sie in functions.php eingeben, werden im Admin-Bereich oder auf der Seite für den Benutzer angezeigt. In der Regel ändert dies das Farbschema für die WordPress-Site, die Schriftart und vieles mehr. Es gibt jedoch viele Verwendungszwecke für diese Datei. Dies ist jedoch eine ganz andere Geschichte ...

Funktionen von PHP-Vorlagendateien

Die PHP-Dateien sind für einzelne Teile der Website verantwortlich. Sie definieren sowohl die einzelnen Seiten als auch die Überschriften, Kategorien und anderen Abschnitte, die dem Benutzer angezeigt werden. Da Sie jetzt der Ersteller des Themas sind, müssen Sie entscheiden, welche und wie viele Vorlagendateien Sie auswählen möchten. Nach der Auswahl werden neue Funktionen in Ihrem Admin-Bereich angezeigt. Je weniger Dateien Sie auswählen, desto schneller funktioniert die Site, desto weniger Funktionen stehen jedoch zur Verfügung. Überlegen Sie genau, welche Dateien Sie benötigen und auf welche Sie verzichten können.

Wenn Sie Ihrer Site ein minimales Thema hinzufügen oder Ihr psd-Layout ausprobieren möchten, benötigen Sie nur zwei Dateien im Vorlagenverzeichnis:

1. Style.css.
2. Index.php.

Erfahrene Webmaster können die Datei index.php so ändern, dass nur Einstellungen für Fußzeile, Seitenleiste, Suche, Archiv, Kategorien, Seiten usw. vorgenommen werden. Sie sollten jedoch versuchen, eine WordPress-Vorlage zu erstellen, in der sich jede Datei befindet Führen Sie die entsprechende Funktion aus.

Auch wenn Sie nicht versehentlich eine Vorlagendatei angeben, fügt WordPress der Site automatisch eigene Standardeinstellungen hinzu. Wenn Sie beispielsweise keine für Kommentare verantwortliche Datei hinzufügen, findet die Engine ihre Versionen dieser Funktion in den Verzeichnissen, z. B. wp-comment.php. Dann werden "fremde" Kommentare in die Struktur Ihrer Website geschnitten und erfüllen nicht die Vorlagenanforderungen. Um dies zu verhindern, müssen Sie alle Hauptdateien hinzufügen, um die verschiedenen Komponenten der Seite anzuzeigen:

• header.php - verantwortlich für den Site-Header;
• sidebar.php - Seitenleisten;
• footer.php - Ressourcenfußzeile (unterer Teil);
• kommentare.php und Kommentare-Popup.php sind Kommentare.

Nachdem Sie jede dieser Dateien generiert haben, müssen Sie Daten in die Hauptvorlagendatei index.php eingeben, damit die Site sie anzeigt. Geben Sie dazu in index.php die Tags an, die zu den genannten Dateien führen. Zum Beispiel:

• um eine Site-Header-Datei (header.php) hinzuzufügen, schreiben Sie das Tag

  get_header () tamplate tag;

• für die Fußzeile ist es dasselbe, aber anstelle der Kopfzeile geben Sie die Fußzeile usw. an.

Ein Beispiel für das Einfügen einer der Vorlagendateien in index.php sieht folgendermaßen aus: Sie müssen nach separaten Informationen für jede der angegebenen Schlüsselvorlagendateien suchen. Suchen Sie nach Handbüchern für jede der Dateien sowie nach Beispielen, damit Sie alle in den Vorlagen beschriebenen Funktionen verstehen.

Auswahl der Vorlagenfunktionalität

Mit der Zeit stehen Sie vor dem Dilemma, welche Art von Vorlage Sie auswählen müssen. Der Motor bietet eine Auswahl. Sie können entweder eine Vorlage mit einer verbundenen Vorlagenhierarchie oder ein Layout mit bedingten Tags auswählen.

Die erste Option wurde bereits in Betracht gezogen. Alle PHP-Vorlagendateien sind die Vorlagenhierarchie. Das heißt, wenn Sie den Regeln dieser Hierarchie folgen, generieren Sie nach und nach separate Layoutdateien. Auf diese Weise erstellen Sie eine vollständige Vorlage aus einer Reihe von funktionalen PHP-Komponenten. Die Hierarchie funktioniert in diesem Fall nach dem Prinzip des Ladens bei Bedarf. Wenn Sie beispielsweise eine Kategoriedatei (category.php) haben und der Benutzer diese angefordert hat, wird dieser bestimmte Teil der Site in den Browser geladen. Ist dies nicht der Fall, wird die Vorlagenschlüsseldatei index.php geladen.

Auf diese Weise können Sie das Erscheinungsbild für einzelne Teile der Site mithilfe des Template-Hierarchie-Prinzips ändern. Jede Seite hat eine eigene ID. Fügen Sie die Datei category-6.php zum Verzeichnis mit dem Thema hinzu. Wenn Sie eine Kategorie mit der ID 6 anfordern, wird dieses spezielle Design geöffnet. Wenn es nicht vorhanden ist, bleiben die Einstellungen Standard - index.php wird erweitert.

Manchmal reicht das Prinzip der Vorlagenhierarchie nicht aus, um die bequemste Vorlagenanzeige bereitzustellen. In diesem Fall verwenden Programmierer das zweite Prinzip - sie führen bedingte Tags ein. Diese Tags überprüfen eine Site auf bestimmte Bedingungen. Wenn dies nicht der Fall ist, ändern sie ihr Erscheinungsbild. Das heißt, diese Tags arbeiten nach dem if / else (if / then) -Prinzip. Sie müssen also nicht ein Meer von PHP-Dateien mit der Nummer jeder Kategorie hinzufügen, sondern können die Bedingungen für jede ID einmal schreiben.

Wie ist das Layout eines PSD-Layouts in WordPress

Einige Leute möchten zuerst ein Layout des zukünftigen Designs mit verschiedenen Programmen erstellen und es dann erst auf eine bestimmte Engine übertragen. Dies ist sehr praktisch, da Sie mit einigen Anwendungen ohne Design großartige Designs erstellen können. Wenn Sie bereits eine psd-Datei haben und diese ohne Verwendung von Code für die WordPress-Engine nachholen möchten, können Sie die Hilfe eines der beliebtesten Dienste verwenden.

Bitte beachten Sie, dass dies ein kostenpflichtiger Service ist, sodass die Vorlage nur zur Hälfte von Ihnen stammt. Bestellen Sie diesen Service nur als letzten Ausweg, wenn Ihnen das Layout gut erscheint, Sie aber nicht mehr die Kraft haben, es zu setzen. Es gibt viele Programmierer, die bereit sind, psd zu einem niedrigen Preis und buchstäblich über Nacht auf WordPress zu übertragen.

PSD ist eine Datei aus Photoshop. Es ist wie eine grafische Darstellung Ihres Designs. Um es zu erstellen, müssen Sie HTML-Markup in einem Texteditor hinzufügen. Allmählich ändern Sie jeden Punkt dieses Markups, um das Endergebnis zu erzielen, das im Layout angezeigt wird. Geben Sie sofort die Zentrierung Ihrer Vorlage sowie die Größe der verschiedenen Teile an.

Der nächste Schritt ist das Hinzufügen von Hintergrundbildern. Sie können sie auch selbst mit derselben Photoshop-Anwendung erstellen. Am einfachsten ist es, Hintergrundbilder mit Farbverlauf zu erstellen. Beginnen Sie als Nächstes mit der Erstellung Ihres Logos. Lösen Sie nach und nach alle aufgetretenen Anforderungen. Passen Sie die Kopfzeile, die Fußzeile, die Seitenleiste und alle Teile der Site entsprechend dem erstellten Layout an. Vergessen Sie nicht, wichtige Vorlagendateien zu seinem Verzeichnis hinzuzufügen, damit die Site gemäß Ihren Anforderungen geladen wird.

Nur so können Sie nach und nach die Grundlagen verschiedener Programmiersprachen erlernen und selbstständig lernen, wie eine Website erstellt wird. Niemand sagt, dass Sie heute oder morgen erfolgreich sein werden. Vielleicht brauchen Sie Monate, um alle Funktionen des Layoutprozesses zu verstehen. Aber keine Sorge - manche brauchen Jahre. Jetzt kennen Sie die ungefähre Vorgehensweise zum Erstellen einer Vorlage von Grund auf sowie zum Übertragen des PSD-Layouts in ein vorgefertigtes Thema für eine Internetressource in der WordPress-Engine.

Kategorie:. 4 Kommentare. Veröffentlicht: 24.11.2012.

Hallo, heute habe ich beschlossen, einen Artikel über das Erstellen eines Website-Layouts zu veröffentlichen, den wir dann gestalten und weiterverfolgen werden wordPress-Motor... Wenn Sie die Veröffentlichung dieser Artikel nicht verpassen möchten, abonnieren Sie auf jeden Fall die Blog-Updates, und nach der Veröffentlichung des Artikels werden Sie sofort darüber informiert. Das Erstellen eines PSD-Site-Layouts und das Erstellen einer WordPress-Vorlage ist eigentlich ein sehr einfacher Vorgang, und ich bin sicher, dass Sie meinen Anweisungen folgen und sich eine völlig einzigartige Vorlage erstellen können.

Um eine Vorlage zu erstellen, benötigen wir nicht viel Wissen, Wissen über Html und CSSLesen Sie einfach die Artikel in den Themen dieses Blogs. Achten Sie besonders auf die Verwendung von DIV-Tags und SPAN-Tags.

Lassen Sie uns nun herausfinden, was wir zum Erstellen eines PSD-Layouts benötigen, und dann diese Vorlage für die Site erstellen. Tatsächlich brauchen Sie dafür nicht viel, ein Photoshop-Programm, das im Internet heruntergeladen werden kann. Ich hoffe, dass dies für Sie kein Problem darstellt, und laden Sie die Quellmaterialien dafür herunter.

Außerdem werde ich in Kürze Artikel veröffentlichen, in denen ich darüber sprechen werde, wie Texturen und Hintergründe für die Site erstellt werden. Abonnieren Sie daher Blog-Updates.

Dokumenterstellung.

Beginnen wir nun mit der Erstellung des Layouts und erstellen ein neues Dokument. Wählen Sie die Datei aus - erstellen. Wählen Sie die Abmessungen für das Dokument aus 960 auf 1600 Pixel.

Zeichnen Sie zwei Hilfslinien, links und rechts. Klicken Sie dazu einfach auf die Lineale und zeichnen Sie Linien.

Jetzt müssen wir die Größe der Leinwand ändern. Dafür wählen wir Bildgröße Leinwand und stellen Sie die Leinwandgröße auf 1200 x 1600 Pixel ein. Füllen Sie danach diesen Bereich mit dem Farbeimer-Werkzeug mit Weiß.

Gruppen für die Vorlage.

Jetzt erstellen wir Gruppen für die Site. Erstellen wir Standardgruppen wie in allen Vorlagen: Kopfzeile, Menü, Inhalt, Seitenspalte und Fußzeile der Site. Dies ist sehr einfach. Klicken Sie im Ebenenmenü auf das Ordnerbild. Um die erstellte Gruppe umzubenennen, müssen Sie nur auf den Namen doppelklicken und den gewünschten Namen eingeben.

Site-Header.

Beginnen wir nun mit der Erstellung eines Headers für die Site. Als erstes öffnen Sie eine Textur mit dem Namen "Textur 1"... Und jetzt müssen wir den schwarzen Hintergrund zuschneiden. Dies ist sehr einfach. Wählen Sie das Werkzeug aus "Zauberstab" und klicken Sie auf den schwarzen Hintergrund, klicken Sie nun mit der rechten Maustaste auf den hellen Bereich und wählen Sie den Punkt "Auswahl umkehren".

Der nächste Schritt besteht darin, die Genauigkeit unserer Grenzen festzulegen, die rechte Maustaste auszuwählen und das Element auszuwählen, um die Kante zu verfeinern. Und stellen Sie alle Einstellungen wie im Bild gezeigt ein.

Jetzt wählen wir “ ebenen - neu - In neue Ebene kopieren". Nehmen Sie nun die Ebene mit der Maus und ziehen Sie sie auf unsere Zeichnung.

Der nächste Schritt ist das Umdrehen der Zeichnung. Wählen Sie dazu Bearbeiten-Transformieren-Drehen um 90 Grad gegen den Uhrzeigersinn. Danach müssen Sie durch Drücken der linken Maustaste Ihre Ebene verschieben, wie in der Abbildung unten gezeigt.

Jetzt müssen wir die Sättigung unseres Bildes erhöhen und gehen dazu zur Registerkarte Bilder - Korrektur - Farbton / Sättigung... Jetzt müssen wir die Helligkeit des Bildes auf -100 reduzieren. Und das sollten wir bekommen:

Schreiben wir nun unser Website-Logo. Dazu müssen wir eine neue Schriftart installieren. Ich denke, Sie haben die Quelldatei bereits heruntergeladen und es gibt auch eine Schriftartdatei im Archiv. Als erstes müssen Sie die Schriftart entpacken. Jetzt müssen wir zum Ordner gehen (meistens ist dies das C: / windows - Fonts Drive).
Und kopieren Sie alle Schriftdateien dort. Starten Sie nun das Programm neu und diese Schriftart steht Ihnen zur Verfügung.
Wählen Sie nun das Textwerkzeug und unsere Schriftart, färben Sie Weiß und erstellen Sie ein Logo in der Nähe der linken Hilfslinie. Folgendes habe ich bekommen.

Jetzt erstellen wir ein Menü auf der rechten Seite. Es wird aus drei Hauptpunkten bestehen und dies ist Home, Kontakte und über den Autor. Wählen Sie das Textwerkzeug erneut aus und klicken Sie an der richtigen Stelle darauf. Die Farbe ist weiß und die Schrift ist Wide Latin und die Größe beträgt 18 Pixel.

Erstellen Sie eine neue Ebene. Jetzt nehmen wir das Werkzeug "geradliniges Lasso" und wählen die Schaltfläche um eine der Beschriftungen.

Und füllen Sie den ausgewählten Bereich mit der Farbe 2A2A2A. Ändern Sie nun die Reihenfolge der Ebenen und übertragen Sie die Ebene mit der Beschriftung über die Ebene mit der Füllung.

Der Hauptinhalt der Website.

Und jetzt haben wir eine Menüschaltfläche, nachdem wir darauf geklickt haben. Jetzt müssen wir zum Inhaltsordner gehen und eine neue Ebene darin erstellen.

Wir öffnen bild 3 und platzieren Sie es unter allen Schichten. Mit Hilfe der Transformation vergrößern wir das Bild, bis es den gesamten Raum ausfüllt.

Passen Sie nun die Helligkeit und den Kontrast der Textur an. Drücken Sie dazu die Tasten Strg + Umschalt + U.... Wählen Sie Bild - Korrektur - Kurven.

Wir stellen die Einstellungen wie im Bild ein.

Erstellen Sie eine neue Ebene und jetzt wählen wir den Inhaltsbereich mit Ihnen aus. Der Inhaltsbereich ist weiß und 660 x 1200 Pixel groß. Wählen Sie dazu das Werkzeug "Rechteckiger Bereich und Stil - Proportionen" aus, in das Sie die Abmessungen des Felds eingeben müssen, und füllen Sie das Feld dann mit dem Werkzeug "Füllen".

Jetzt müssen wir einen Strich für unser Feld setzen. Wählen Sie die Ebene aus, auf der sich unser Bild befindet, und klicken Sie auf die Schaltfläche "Ebenenstil hinzufügen". Wählen Sie im Dropdown-Menü die Option "Strich".

Und stellen Sie die folgenden Einstellungen ein - Dicke 1 Pixel und Farbe c8c7c7.

Jetzt öffnest du bild 4Wenn wir die Skalierung verwenden, reduzieren wir die Größe. Sie sollte etwa zehn Pixel größer sein als das weiße Feld rechts und links. Oben und unten müssen Sie 50-60 Pixel einrücken.

Jetzt drücken wir die Tastenkombinationen Strg + Umschalt + U. um die Textur zu entsättigen und die Helligkeit mithilfe von Kurven anzupassen. Einstellungen wie im Bild.

Wählen Sie die Ebene mit unserer weißen Leinwand aus, klicken Sie mit der rechten Maustaste und wählen Sie das Element " Pixel auswählen».

Wählen Sie nun die graue Ebene und klicken Sie auf auswahl - Änderung - Komprimierungund stellen Sie ein, dass es um drei Pixel verkleinert wird. Danach müssen wir unsere Auswahl umkehren, wir haben dies bereits getan, und es ist einfach, dies zu tun, wählen Sie Auswahl-Inversion, Drücken Sie den Knopf Del... Folgendes sollten wir bekommen:

Erstellen Sie nun eine Maske für dieselbe graue Ebene.

Wählen Sie einen Schwarzweißverlauf und klicken Sie mit der linken Maustaste, um von der Mitte zum Ende der Seite zu zeichnen und so den Übergang zu glätten.

Jetzt erstellen wir die Seitennavigationsschaltflächen. Dazu müssen wir nur ein schwarzes Rechteck zeichnen. Sie können die Größe nach eigenem Ermessen auswählen. Außerdem müssen Sie in jeder Schaltfläche den Namen der Seiten registrieren. Verwenden Sie für die Beschriftungen die Schriftart Times New Roman und Größe 18 Pixel.

Öffnen wir nun ein Bild mit Symbolen und fügen sie der gegenüberliegenden Seite des Hauptmenüs hinzu. Jetzt müssen wir den Inhalt auf beiden Seiten um zwanzig Pixel einrücken. Jetzt müssen wir unserem ersten Artikel einen Titel hinzufügen, die Textfarbe ist schwarz. Für das Datum und die Anzahl der Kommentare habe ich die Farbe cb8154 verwendet.

Zeichnen Sie nun eine Linie, um den Titel vom Hauptinhalt der Site zu trennen. Um eine gerade Linie zu zeichnen, müssen Sie das Bleistiftwerkzeug auswählen und die Umschalttaste gedrückt halten und eine Linie zeichnen, indem Sie am Anfang drücken und bis zum Ende der Linie zeichnen.

Jetzt müssen wir einen Platz für die Vorschau erstellen. Um dies zu tun, erstellen Sie ein Rechteck mit den Abmessungen, die wir benötigen. Ich habe beschlossen, 165 x 165 Pixel zu erstellen und es mit Schwarz zu füllen. Wenden Sie Einstellungen darauf an: Strich und Schatten.

Schlaganfall.

Schatten.

Fügen wir nun freien Text hinzu. Folgendes sollten wir bekommen:

Nach dem Ende der Artikel müssen Sie nun die 30 Pixel und die graue Farbe (СССССС) trennen. Zeichnen Sie dann vier 32 x 32 Pixel große Quadrate und füllen Sie sie mit rotem 8E0A13.

Suchformular zeichnen.

Dazu müssen wir nur einen rechteckigen Bereich mit weißer Farbe zeichnen und einen inneren Schatten darauf anwenden.

Jetzt zeichnen wir einen roten Knopf der gleichen Größe 32 x 32 und rot und geben das Wort „ Suche».

Seitenleiste.

Zeichnen Sie auf einer neuen Ebene ein Rechteck mit einer Breite von 270 Pixel und füllen Sie es mit 1F1F1F-Farbe. Wir fügen auch einen Titel hinzu, der 270 Pixel breit und 25 Pixel hoch ist und mit Schwarz gefüllt ist.

Jetzt müssen wir Kategorien für den Blog schreiben. Text in Times New Roman Schriftart, 16 Pixel groß. Sie müssen jedem Menüpunkt ein Bild hinzufügen. Wir wählen " Beliebige Figur"Und wählen Sie die Form des Rasterpunkts" Ornament 4Und fülle es mit 818181.

Fußzeile der Site.

Wir werden uns nicht zu sehr mit der Fußzeile beschäftigen. Füllen Sie einfach das gesamte Feld mit Schwarz und fügen Sie ein Menü mit Times New Roman-Schrift, 18 Pixel Größe und E6E6E6-Farbe hinzu.

Wenn Sie eine Vorlage herunterladen möchten, die sich herausgestellt hat, klicken Sie auf die Schaltfläche, und ein Download-Link steht Ihnen zur Verfügung. Damit ist der Artikel abgeschlossen, und ich denke, Sie wissen jetzt, dass der erste Schritt zum Erstellen einer WordPress-Vorlage darin besteht, ein PSD-Site-Layout zu erstellen.

In diesem Artikel erfahren Sie, wie Sie das einfachste WordPress-Thema erstellen. Obwohl der Kodex eine ausführliche Dokumentation zu diesem Thema enthält, erscheint er mir als Anfänger ein wenig entmutigend. Daher werde ich Ihnen in diesem "Tutorial" erklären, wie WordPress-Themes funktionieren, und Ihnen zeigen, wie Sie eine rohe HTML-Vorlage für sie anpassen. Dies erfordert keine PHP-Kenntnisse von Ihnen, aber es ist gut, wenn Sie Photoshop und CSS kennen, um ein Design zu erstellen.

1. Frontend-Blog

Bevor wir anfangen, werfen wir einen Blick auf das Standard-WordPress-Theme und verstehen, woraus es besteht. Markieren wir die Elemente (Kopfzeile, Titel des Beitrags, Suchformular, Navigation, Fußzeile usw.).

Standard-Startseite ( index.php)

Standard Single ( single.php)

2. Photoshop-Layouts

Entwerfen Sie anhand des Erscheinungsbilds eines Standardthemas Photoshop-Layouts für Ihr Blog. In diesem Beispiel verwende ich GlossyBlue, eines meiner kostenlosen Themen. Laden Sie demo.zip herunter, um die fertige Photoshop-Datei anzuzeigen.

3. HTML und CSS

Wenn das PSD-Design fertig ist, erstellen Sie für jede Seite eine HTML + CSS-Vorlage. Befolgen Sie die Schritte dieser Anleitung, um meine GlossyBlue-HTML-Dateien von zu verwenden demo.zip... Nach dem Auspacken des Archivs sehen Sie index.html, single.htmlund page.html... Als nächstes werde ich sie verwenden, um sie in eine Vorlage zu verwandeln.

Warum zuerst statisches HTML erstellen? Dies ist hauptsächlich notwendig, weil es den Entwicklungsprozess erheblich vereinfacht. Normalerweise erstelle ich für jede Vorlage eine HTML-Datei und überprüfe deren Gültigkeit (HTML- und CSS-Markup) in allen Browsern. Danach müssen Sie nur noch den WordPress-Code ausschneiden und einfügen. Sie müssen sich also keine Gedanken über HTML- oder CSS-Fehler machen.

4. Wie das WordPress-Theme funktioniert

Wenn Sie zum Standard-Themenordner wechseln ( wp-content / themen / default) sehen Sie viele PHP-Dateien (sogenannte Template-Dateien) und eine Datei style.css... WordPress verwendet normalerweise mehrere Vorlagendateien ( index.php , header.php, sidebar.php,und footer.php).

Weitere Details im Codex: "Site Architecture" und "Template Hierarchy".

5. Doppelte Vorlagendateien

Kopieren Sie den HTML-Ordner von GlossyBlue in den Ordner wp-content / themen... Danach gehen Sie in das Standard-Themenverzeichnis und kopieren kommentare.php und searchform.php in Ordner glänzend blau.

6. Style.css

Gehen Sie zum Standard-Themenordner und öffnen Sie die Datei style.css... Kopieren Sie den am Anfang der Datei auskommentierten Text und fügen Sie ihn ein style.css GlossyBlue-Themen. Sie können den Titel und die Autoreninformationen ändern, wenn Sie möchten.

7. Dateien teilen

Jetzt müssen wir herausfinden, wo HTML-Dateien in Teile aufgeteilt werden sollen: header.php, sidebar.php und footer.php... Der Screenshot unten zeigt eine vereinfachte Version meiner Indexdatei sowie das Prinzip ihrer Aufteilung.

8. Header.php

Entdecken index.html... Sie müssen den Abschnitt von oben bis zum Ende ausschneiden, in eine neue PHP-Datei einfügen und unter speichern header.php.
Gehen Sie zum Standard-Themenordner und öffnen Sie neu header.php... Kopieren und ersetzen Sie die Tags dort, wo der PHP-Code dies erfordert: Titel, Link, Stylesheets, h1 und div class \u003d description.

Navigationsmenü (wp_list_pages) Tags ersetzen li beim ul id \u003d nav auf ;

9. Sidebar.php

Zurückkommen zu index.htmlSchneiden Sie den Code dort ab, wo er beginnt formular-ID \u003d Suchformular und bevor das Tag geschlossen wird div id \u003d Seitenleiste, lege es in eine neue PHP-Datei und speichere als sidebar.php.

• Ersetzen formular-ID \u003d Suchformular mit allen Inhalten auf.
• Tags ersetzen li Kategorien auf
• Tags ersetzen li Archive auf

10. Footer.php

Zurückkommen zu index.html... Extrahieren Sie von dort den Code aus div id \u003d Fußzeile inklusive mit div tag id \u003d footer bis zum ende / html dann neu einlegen footer.php.

Neueste Einträge Hier habe ich query_post verwendet, um die 5 neuesten Blog-Beiträge anzuzeigen.

"Neueste Kommentare" Vom Plugin generierte "Letzte Kommentare" (im Themenordner enthalten)

11. Index.php

Jetzt in deinem index.html sollte nur bleiben div id \u003d Inhalt... Speichern Sie die Datei unter index.php... Geben Sie die Zeilen ein: get_header, get_sidebarund get_footer in der Reihenfolge, in der sie im Muster erscheinen.

12. Analysieren Sie den Zyklus

Die Schleife zeigt Blogeinträge nacheinander basierend auf Ihren Einstellungen an. Der Screenshot unten zeigt, wie es funktioniert. Zunächst prüft die Schleife, ob Datensätze vorhanden sind, und gibt eine Nachricht aus, wenn sie keine findet "Nicht gefunden".

13. Kopieren eines Zyklus

Gehen Sie zum Standard-Themenverzeichnis und öffnen Sie es index.php... Kopieren Sie die Schleife aus dem Standard index.php in deinem - zwischen div id \u003d content ../ div... Ersetzen Sie danach den statischen Text durch die WordPress-Vorlagen-Tags: Post-Datum, Titel, Kategorie, Kommentare, nächster und vorheriger Link.

14. Themenvorschau

Herzliche Glückwünsche! Sie haben den öffentlichen Teil (den Hauptteil der Vorlage) erstellt. Gehen Sie nun zum Admin-Bereich und zum Lesezeichen Designsollten Sie ein GlossyBlue-Thema sehen. Aktivieren Sie es und gehen Sie zum öffentlichen Bereich, um das Ergebnis in Aktion zu sehen.

15. Single.php

Es ist Zeit, eine Vorlage zu erstellen single.php... Wenn Sie möchten, können Sie die Schritte wiederholen und den Code aus dem Standardthema übertragen. Aber es scheint mir einfacher, das gerade Geschaffene zu verwenden index.phpindem Sie es als speichern single.php... Entdecken single.php aus dem Standardthema und kopieren Sie die Vorlagen-Tags, wo Sie möchten. Als nächstes verbinden comment_template... Der folgende Screenshot zeigt die Änderungen, die ich vorgenommen habe:

16. Page.php

Jetzt neu single.php mit Titel speichern page.php... Postdatum, Kommentarformular, nächste / vorherige Links entfernen. Das ist alles - deine Vorlage. page.phpbereit .

17. HTML-Dateien entfernen

Löschen Sie alle HTML-Dateien aus dem Ordner glänzend blau(Wir werden sie nicht mehr brauchen). Dies ist technisch genug, um ein grundlegendes WordPress-Theme zu erstellen. Möglicherweise haben Sie bemerkt, dass das Standarddesign mehr PHP-Dateien enthält. Tatsächlich brauchen Sie sie nicht wirklich, wenn Sie ein einfaches Thema benötigen. Zum Beispiel, wenn search.php oder 404.php wird nicht im Theme-Ordner sein, wird WordPress automatisch verwenden index.php um die Seite anzuzeigen. Weitere Informationen finden Sie in der Vorlagenhierarchie.

18. WordPress-Seitenvorlage

Ein letztes Beispiel: Ich zeige Ihnen, wie Sie mithilfe einer Seitenvorlage eine Archivseite erstellen, die eine Liste aller Beiträge in Ihrem Blog enthält (praktisch für eine Sitemap). Kopieren archives.php aus dem Standard-Themenordner. Entfernen Sie unnötigen Code und Sie erhalten ungefähr Folgendes:

Kostenlose PSD-Website-Vorlagen sind nützlich für die Einrichtung von Unternehmen, Portfolios und anderen Arten von Websites. Sie sind überall im Internet zu finden. Um nicht zu sagen, dass die meisten von ihnen hässlich sind, aber selten werden Sie tatsächlich etwas finden, das Ihre Standards übertreffen würde. Da Adobe Photoshop eines dieser „einfach zu verwendenden, schwer zu beherrschenden“ Programme ist, entscheiden sich viele Anfänger und Profis für PSD-Vorlagen für ihre erste Website. Dies liegt daran, dass PSD-Webvorlagen einfach einzurichten, zu bearbeiten und zu verwenden sind. Sie müssen diese Webvorlagen jedoch aus zuverlässigen Quellen beziehen. Es ist einfach, sich in ein Webvorlagen-Design zu verlieben, es mit Spannung herunterzuladen und in Photoshop auszupacken, nur um festzustellen, dass es ein völliges Durcheinander ist und Sie sich nicht darin zurechtfinden.

Gute Webvorlagen sind ästhetisch ansprechend und beruhigen die Augen. Auf der anderen Seite kombinieren großartige Webvorlagen diese Art von Schönheit mit Benutzerfreundlichkeit, um die besten auffälligen und benutzerfreundlichen Vorlagen zu erstellen.

Unabhängig davon, ob Sie eine Portfolio-Webvorlage, eine persönliche Blog-Vorlage, eine E-Commerce-Vorlage oder eine Restaurantvorlage wünschen, finden Sie diese Liste der besten kostenlosen PSD-Vorlagen sehr hilfreich.

UNBEGRENZTE DOWNLOADS: Über 500.000 Website-Vorlagen und Design-Assets

Alle benötigten Website-Vorlagen und viele andere Designelemente stehen für ein monatliches Abonnement von Envato Elements zur Verfügung. Das Abonnement kostet 29 US-Dollar pro Monat und gibt Ihnen unbegrenzter Zugangzu einer riesigen und wachsenden Bibliothek von 500,000+ artikel, die so oft heruntergeladen werden können, wie Sie möchten (auch Fotos auf Lager)!

JETZT DOWNLOADEN

Wenn Sie das Design fertig haben, ist es an der Zeit, es auf eine Weise zu präsentieren, die alle inspiriert. Sie können zwar einen einfachen Screenshot verwenden, aber mit einer PSD-Website-Vorlage können Sie die Dinge auch in einem völlig neuen Ausmaß gestalten. Dieses spezielle Paket enthält sieben verschiedene Stile, die Sie zu Ihrem Vorteil nutzen können. Von iMac, Macbook und einer einzelnen Seite bis hin zu zwei iPhones und zugeschnittenen Macbooks stehen Ihnen die Optionen zur Verfügung. Sie können den Hintergrund auch bearbeiten, indem Sie ihn transparent halten oder Farbe oder sogar Bild hinzufügen. Machen Sie die Dinge so, wie Sie es möchten, und präsentieren Sie Ihre Arbeiten im bestmöglichen Licht.

Weitere Infos / Download

Super minimale, saubere und auffällige Gerätemodelle, mit denen Sie die Flexibilität Ihrer Website anzeigen können. Das Kit enthält zwölf verschiedene Variationen, jede originell, kreativ und aufmerksamkeitsstark. Außerdem können Sie zwischen Macbook, iPad und iPhone wählen. Ziehen Sie Ihre Motive einfach per Drag & Drop und lassen Sie sie sofort von der gewünschten Vorlage anzeigen. Weitere Extras sind elf Schattenüberlagerungen, ein anpassbarer Hintergrund und sechs Hauptfarboptionen. Sie haben jetzt eine Komplettlösung für eine Präsentation, die Sie begeistern wird. Wenn es Ihre Sache ist, die Dinge einfach und minimal zu halten, ist dieses Modellpaket perfekt für Sie.

Weitere Infos / Download

Eine atemberaubende, moderne und benutzerfreundliche Website-Modellvorlage mit sechs verschiedenen isometrischen Ansichten. Wenn dies der Präsentationsstil ist, den Sie für Ihre Online-Präsenz verwenden möchten, können Sie dies in kürzester Zeit tun. Sie müssen nicht unzählige Stunden damit verbringen, wie Sie Ihre Arbeit präsentieren möchten, wenn eine Vorlage dies mit einem Fingerschnipp möglich macht. Schieben Sie einfach Ihre Designs ein und das war's auch schon. Sie können mehrere Seitenlayouts hinzufügen, um Ihre gesamte Website zu präsentieren und den Hintergrund zu bearbeiten. Kurz gesagt, das Endprodukt wird ein echtes Meisterwerk sein und Ihnen helfen, neue Kunden zu gewinnen.

Weitere Infos / Download

Eine vollständige Sammlung verschiedener Website-Modelle mit verschiedenen Geräten. Sie können jetzt die Flexibilität Ihrer Seite auf iPhones, iMacs, Macbooks und iPads steigern. Außerdem finden Sie vierzehn verschiedene PSD-Szenen mit einer Größe von 4000 x 2500 Pixel. Sie können diese für alle Arten von Präsentationen verwenden, die über das Schaufenster des Website-Designs hinausgehen. Weitere Funktionen sind Schatten- und Lichtanpassung, intelligente Objekte (einfach per Drag & Drop), 50% Zoom und mehr. Sie können auch die Hintergrundfarbe ändern und sehr detaillierte Anpassungen vornehmen. Dank der superschnellen Bearbeitung und Verbesserung stehen Ihnen innerhalb weniger Minuten mehrere verschiedene Präsentationen zur Verfügung.

Eine weitere fantastische Alternative zu allen anderen Website-Modellvorlagen, bei denen Sie nach einem Gerät suchen, mit dem Sie Ihr Design anzeigen können. In diesem Fall sind im Kit zwölf verschiedene PSD-Dateien mit den Abmessungen 4000 x 2500 px enthalten. Objekte und Schatten werden für eine fehlerfreie Bearbeitung getrennt. Denken Sie daran, dass dieses Paket von Modellen Anweisungen enthält, die Ihnen auf Ihrem Weg zur Realisierung einer auffälligen und fotorealistischen Darstellung Ihres Seitendesigns helfen. Dank der intelligenten Objektebenen müssen Sie nicht viel Zeit und Energie in die Aktivierung dieser Modelllayouts investieren. Schieben Sie einfach Ihr Bild hinein und sehen Sie es sofort in Aktion.

Avire

Avire ist eine hochgradig anpassbare einseitige Vorlage mit einem flachen Design. Es ist einfach zu verwenden und an Ihre Bedürfnisse anzupassen. Mit ein paar Änderungen hier und da kann es definitiv alle Ihre Anforderungen erfüllen.

Herunterladen

Hexal

Hexal ist eine einzigartige Portfolio-Vorlage, die Ihren Website-Besuchern garantiert bleibende Eindrücke hinterlässt. Es ist definitiv perfekt für Webdesigner, Grafikdesigner und alle, die kreativ sind.

Strukturiertes Design

Sie können diese kostenlose PSD-Datei sowohl für persönliche als auch für kommerzielle Zwecke verwenden. Es handelt sich um eine einseitige Portfolio-Webvorlage, die sich an kreative Menschen richtet.

Herunterladen

Schalter

Switch ist eine Bootstrap 3D-Mehrzweck-Webvorlage, die bedeutet, dass sie zu dem werden kann, was Sie möchten! Es dient als großartige einseitige Vorlage, die verschiedene Lösungen für alle Ihre Anforderungen bietet.

Herunterladen

Kappe

Kappe ist eine kreative Mehrzweck-Webvorlage. Mit seinem gitterbasierten Design können Sie mit wenigen Mausklicks in ein persönliches Blog oder eine Geschäftswebseite konvertieren.

Herunterladen

Benachrichtigen

Benachrichtigen ist die beste App-Landingpage im Web. Das schlanke und moderne Design sorgt dafür, dass Ihre Botschaft so vermittelt wird, wie Sie es sich vorgestellt haben.