Share
In dieser sechsteiligen Einsteiger-zu-Master-Serie werden wir die erweiterten Funktionen von WordPress verwenden, um ein eigenes Portfolio und einen eigenen Blog zu erstellen, der eine Optionsseite, mehrere Stile und Unterstützung für die neuen Funktionen von WordPress 2.7 enthält. Heute binden wir alles zusammen.
Im letzten Teil der WordPress-Woche erstellen wir ein grundlegendes benutzerdefiniertes Widget, bevor wir es beenden Innovation ein bisschen plastische Chirurgie mit einem alternativen Farbschema.
Es gibt noch einige Textelemente, die wir noch nicht gestaltet haben und daher nicht richtig aussehen, z. B. Bildunterschriften, Blockquote, Vor, Code und Adresse.
Fügen Sie Folgendes zu hinzu style.css:
p.wp-caption-text font-size: 0.8em; Schriftstil: kursiv; blockquote font-size: 0.9em; Marge: 15px 0 15px 15px; Polsterung: 0 15px; pre font-family: "Courier New", Courier, Monospace; Schriftgröße: 0.9em; Marge: 10px 0 20px 0; code background-color: #efefef; Farbe: # 000; Schriftfamilie: "Courier New", Courier, Monospace; Schriftgröße: 1em; Marge: 0 3px; Polsterung: 0 3px; adresse font-size: 0.9em; Schriftfamilie: Georgia, "Times New Roman", Times, Serife; Zeilenhöhe: 1.5em; Rand unten: 15px;
Und das in deepblue.css:
p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed;
Wir werden ein Widget erstellen (unten), das die fünf neuesten Blogbeiträge anzeigt - wobei das erste angezeigte Bild für den Beitrag in der Größe verändert und als Vorschaubild verwendet wird.
Es ist für die Verwendung im Widgetbereich der Homepage vorgesehen.
Das Widget ist im Wesentlichen eine benutzerdefinierte WordPress-Schleife, die von einer Funktion aufgerufen wird, die es in ein Widget verwandelt.
In der / inc / Ordner erstellen Sie eine Datei mit dem Namen bloglist-widget.php und starte es mit folgendem:
Von dem Blog
Die gesamte Schleife wird in eine neue Funktion eingebunden Recentblogposts () (Sie können es nennen, wie Sie möchten). In den nächsten zwei Zeilen registrieren wir zwei Objekte als 'global' - so können wir auf die Datenbank von WordPress zugreifen ($ wpdb) und post ($ post) Klassen innerhalb des Widgets. Daran schließen wir die var.php Datei.
Nächster:
Eine normale benutzerdefinierte Schleife, mit Ausnahme der Portfolio-Kategorie, ist auf fünf Stellen beschränkt caller_get_posts = 1 ist ein neuer Parameter in WP 2.7, der die Schleife so setzt, dass alte 'Stickied'-Beiträge ignoriert werden.
Jetzt wird es interessant:
Accentsconagua
Beiträge. "WO post_parent = '". $ post-> ID. "'AND post_type =' Anhang 'ORDER BY' post_date 'ASC LIMIT 0,1"; $ post_attachments = $ wpdb-> get_results ("$ queryattach"); if ($ post_attachments) $ image = $ post_attachments [0] -> guid; ?> Der obige Code durchsucht die Datenbank, um die URL des zuerst angefügten Bildes für den aktuellen Beitrag abzurufen, und platziert sie darin $ image. Beachten Sie, dass das Bild sein muss angegriffen und nicht woanders verlinkt.
Siehe einen anderen Beitrag, den ich mit diesem Code im ThemeForest-Blog geschrieben habe: "Bildgrößenanpassung mit WordPress".
; ?>/inc/thumb.php? src =<?php echo $image; ?>& w = 50 & h = 50 )
Wenn ein zugeordnetes Bild gefunden wurde, wird es durch das TimThumb-Skript mit einer Größe von 50 x 50 Pixeln analysiert. Der Beitragstitel und das Datum werden ebenfalls angezeigt.
Die Schleife und Funktion sind dann geschlossen:
Als Nächstes wird das Widget mit der Vorlage kompatibel gemacht, indem es in die Vorlage eingefügt wird $ before_widget und $ after_widget Tags, die in der Vorlage definiert sind:
Endlich, das register_sidebar_widget () Funktion wird verwendet, um das Widget im Dashboard zu registrieren. "Recent Blog Posts" ist der Name des Widgets, das im Dashboard verwendet wird.
Innerhalb Functions.php Fügen Sie Folgendes hinzu, um das neue Widget in die Vorlage aufzunehmen:
include (TEMPLATEPATH. "/inc/bloglist-widget.php");
Öffnen Sie im Dashboard Darstellung -> Widgets, und löschen Sie die 'Recent Blog Posts'. (nicht zu verwechseln mit dem WordPress-Standard "Recent Posts") Widget in den Bereich "Homepage Bottom":
Das Styling ist ziemlich einfach. Das Bild wird zur Seite verschoben und die Größe und das Gewicht des Textes werden geändert. Fügen Sie dies zu style.css:
ul.bloglist margin: 0; ul.bloglist li clear: both; Schriftgröße: 1em; Zeilenhöhe: 1.3em; Listenstil: keine; Rand unten: 17px; Überlauf versteckt; ul.bloglist li img border: keine; Schwimmer: links; Rand rechts: 7px; ul.bloglist li .posttitle, ul.bloglist li .postdate display: block; Schriftgröße: 0.9em; ul.bloglist li .posttitle font-weight: bold; Rand oben: 2px; ul.bloglist li .postdate font-size: 0.8em; Schriftstil: kursiv; Schriftgewicht: normal; ul.bloglist li a: link, ul.bloglist li a: besuchte display: block; Polsterung: 2px; Überlauf versteckt; ul.bloglist li a: hover, ul.bloglist li a: aktiv, ul.bloglist li a: focus text-decoration: none;
Und fügen Sie den Links etwas Farbe hinzu, wenn Sie sie darin schweben deepblue.css:
ul.bloglist li a: link, ul.bloglist li a: besucht color: # 333; ul.bloglist li a: hover, ul.bloglist li a: aktiv, ul.bloglist li a: focus background-color: # e3e8ed;
Das ist es! Wie Sie gelernt haben, erstellen Sie ein sehr Das grundlegende Widget ist so einfach wie das Einbinden einer normalen benutzerdefinierten Schleife in eine Widget-Funktion. :)
Zunächst möchte ich mich entschuldigen, dass wir den letzten Teil der Serie im Umgang mit den Problemen des Internet Explorer verderben müssen. Aber es ist ein Browser, der immer noch recht häufig verwendet wird, und es ist unsere Pflicht, den bösen Menschen, die ihn benutzen, zu helfen.
Wir beschäftigen uns zuerst mit IE7 und dann mit den Problemen von IE6.
In der / inc / Ordner erstellen Sie einen neuen Ordner mit dem Namen / css / und darin zwei Dateien: ie.css und ie6.css. Diese beiden Dateien werden im Header einer IE-Bedingungsanweisung enthalten. Fügen Sie Folgendes direkt hinzu, bevor die jQuery-Javascript-Dateien in der Datei enthalten sind Abschnitt von header.php:
Diese IE-Bedingungsanweisungen stellen sicher, dass die ie.css Die Datei ist nur in Versionen von Internet Explorer unter IE8 enthalten. und ie6.css wird auch in Versionen unter IE7 verwendet.
Das erste Problem liegt im Kommentarbereich, wo IE7 die Schriftgrößen nicht wie andere Browser zu behandeln scheint und jeder Thread-Kommentar kleiner wird als der übergeordnete Kommentar:
Fügen Sie folgendes in hinzu ie.css So legen Sie die Schriftgröße in Kommentaren in Pixel fest (im Gegensatz zu den Ems, die im Haupt-Stylesheet verwendet werden):
.Kommentarliste cite, .com-Objektliste span font-size: 14px; Schwimmer: links; Polsterung rechts: 4px; .com-Liste p font-size: 13px; Zeilenhöhe: 16px; .commentmetadata Schriftgröße: 13px; Zeilenhöhe: 14px; .commentlist .reply font-size: 13px;
Noch ein Problem: Das Suchformular und die Kopfzeilen in der Seitenleiste haben entschieden, dass sie lieber einen 15px-Text-Einzug möchten:
Füge einfach folgendes hinzu, um es zurückzudrängen:
#sidebar ul li * text-indent: -15px; #sidebar ul li ul * text-indent: 0;
Nun zu den IE6-Ausgaben. Das erste und offensichtlichste ist, dass der Hintergrund der Navigationsleiste nicht funktioniert, da es sich um eine transparente PNG-Datei handelt:
Es gibt mehrere IE6-PNG-Korrekturen. Ich verwende DD_belatedPNG. Speichern Sie die JS-Datei in der / inc / Mappe.
Direkt unter Ihren anderen IE-Bedingungsanweisungen in header.php hinzufügen: (Achten Sie darauf, den Namen der JS-Datei zu bearbeiten, wenn Sie keinen Namen haben DD_belatedPNG_0.0.7a-min.js)
Innerhalb DD_belatedPNG.fix () Wir führen zwei Argumente. Dies sind einfach die CSS-Selektoren der Elemente, auf die der PNG-Fix angewendet werden soll.
Hinzufügen ie6.css Um ein paar Probleme mit dem Widgetbereich der Homepage zu beheben, sind wir fertig:
.Extras Anzeige: Inline; ul.bloglist li a: hover, ul.bloglist li a: aktiv, ul.bloglist li a: fokus hintergrund: keine; Cursor: Zeiger; Textdekoration: Unterstrichen; ul.bloglist li width: 300px; ul.twitter li.twitter-item float: left; Breite: 260px;
Wir haben uns bemüht, die Farbstile vom Rest unseres CSS zu trennen, um die Erstellung alternativer Farbschemas auf der Optionsseite zu vereinfachen. In diesem letzten Abschnitt der Serie, Innovation geht unter dem Messer mit dem Redspace planen:
In der / Stile / Erstellen Sie einen neuen Ordner mit dem Namen / redspace / und drinnen, kopiere in search.png und bullet.gif Dateien aus dem /tiefes Blau/ Mappe.
Machen Sie auch eine Kopie von deepblue.css wie redspace.css.
Speichern Sie die folgenden drei Bilder in der / redspace / Ordner als bg.jpg, trans.png und transred.png beziehungsweise:
Es ist jetzt so einfach wie das Austauschen der blauen Farbcodes durch rote redspace.css:
/ * Innovation red style - redspace.css * / body background: URL ("redspace / bg.jpg") repeat-x # 140a05 0 oben; Farbe: # 333; a: link, a: besuchte color: # 941919; #head h1 color: #fff; #head h3 color: # c4acaa; #nav background: url ("redspace / trans.png") wiederholen; Grenze: 1px fest # 5b2022; #nav ul li a: link, #nav ul li a: besuchte color: # b99e94; #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: besuchte background: url ("redspace / transred.png") repeat; Farbe: # cdb9b2; #nav ul li a: hover, #nav ul li a: aktiv, #nav ul li a: focus color: # cdb9b2; #content Hintergrundfarbe: # f9f9f3; Grenze: 1px fest # 5b2022; Rand oben: keine; .work a: link img, .work a: besuchte img border: 5px solid # f2e9ea; .work a: hover img, .work a: aktiv img, .work a: focus img border: 5px fest # 8d4846; .work a: link, .work a: besuchte color: # 333; ul.twitter li.twitter-item background-color: # f6f5ed; Grenze: 1px fest # eae9de; .flickr a: link img, .flickr a: besuchte img border: 3px solid # f2e9ea; .flickr a: hover img, .flickr a: aktiv img, .flick a: focus img border: 3px fest # 8d4846; .blogpost, .worksearch border-bottom: 1px solid # e8e3c8; h2 a: link, h2 a: besuchte color: # 333; ul.meta li border-left: 1px solid # e3e8ed; #sidebar ul li # Suchformular #s background: url ("redspace / search.png") no-repeat right # f6f6ec; Grenze: 1px fest # E8E3C8; #sidebar ul li # Suchformular #s: focus border: 1px solid # dad4b6; #sidebar ul li ul Hintergrundfarbe: # f6f6ec; Grenze: 1px fest # E8E3C8; #sidebar ul li ul li list-style: url ("redspace / bullet.gif"); #sidebar ul li a: link, #sidebar ul li a: besuchte color: # 333; p.footer color: # 554740; p.footer a: link, p.footer a: besuchte color: # 554740; Rand unten: 1px gestrichelt; p.footer a: hover border-bottom: 1px solide; Textdekoration: keine; / * Kommentarliste * / .commentlist li .avatar border: 2px solid # f2e9ea; .com-Liste zitieren a: link, .com-Liste zitieren a: besucht color: # 333; .commentlist .commentmetadata a: link: first-child, .commentlist .commentmetadata a: besucht: first-child color: # 333; .thread-alt Hintergrundfarbe: # F6F6EC; .thread-even Hintergrundfarbe: # F9F9F3; .depth-1 border: 1px fest # E8E3C8; .even, .alt border-left: 1px solid # E8E3C8; Eingabe, Textbereich Hintergrundfarbe: # F6F6EC; Grenze: 1px fest # E8E3C8; input: focus, textarea: focus border: 1px fest # dad4b6; p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed; ul.bloglist li a: link, ul.bloglist li a: besucht color: # 333; ul.bloglist li a: hover, ul.bloglist li a: aktiv, ul.bloglist li a: focus hintergrundfarbe: # f2e9ea; Öffnen Sie im Dashboard die Seite mit den Innovationsoptionen und wählen Sie redspace.css von der Option "Farbschema" - Die Seite hat bereits das gescannt / Stile / Ordner und listet die .css-Dateien dort auf.
Klicken Sie auf "Anwenden" und wir sind fertig!
In dieser Serie haben Sie eine Reihe von Fähigkeiten erworben, die Sie benötigen, um alle Arten von Websites mit dem WordPress-System zu betreiben. Die meisten Innovation-Dateien können in Ihren neuen Projekten wiederverwendet werden, um Ihren Entwicklungsprozess zu beschleunigen.
Laden Sie die Quelldateien von diesem Teil herunter, und es gibt ein zusätzliches (grundlegenderes) Farbschema - SoftLight:
Benötigen Sie Hilfe bei der Innovation? Möchten Sie Ihre neuen Farbschemas teilen? Gehen Sie zu danharper.me/innovation/ und klicken Sie auf den Link Foren.
Vielen Dank fürs Lesen und ich hoffe wirklich, dass Sie diese Serie für nützlich gehalten haben!
- Dan
Liebendes WordPress? Brauche mehr? Ich habe eine kurze Zusammenfassung meiner bevorzugten WordPress-Ressourcen zusammengestellt.
Im Laufe des Buches werden Sie DREI WordPress-Themes, einen Blog, eine Portfolio-Site und eine allgemeine Site mit Menüs und Untermenüs erstellen. Jedes Thema zeigt verschiedene Aspekte des WordPress-Themings.
Weiterlesen
Sie haben gefragt und wir haben geantwortet! Aufgrund der großen Nachfrage starten wir eine neue Videoserie, die neben den "Diving into PHP" Screencasts läuft. Es ist unsere Hoffnung, dass diese beiden Serien, die Rücken an Rücken betrachtet werden, Sie zu einem dynamischen PHP / WordPress-Designer machen werden.
Besuchen Sie die Serie
Theme-Entwicklung, der Kodex ist eine klare und gut geschriebene Dokumentation. Wenn Sie von den Erstellern von WordPress stammen, können Sie den Anweisungen nicht folgen.
Besuchen Sie den Codex
Eine Video-Screencast-Serie zu Designing for WordPress. Es handelt sich um eine dreiteilige Serie, die das Herunterladen und Installieren von WordPress auf einem Server bis hin zu einem vollständigen Thema abdeckt.
Besuchen Sie die Serie
Ihre visuelle Ressource für alle Dinge WordPress.
Besucherseite
Ich werde Ihnen zeigen, wie Sie ein WordPress-Theme in diesen 3 Teilen der Tutorialserie von Grund auf erstellen. Ich werde mich mit der Strukturierung beschäftigen, in Photoshop entwerfen, in Scheiben schneiden, in vollständig css-basierte HTML-Dateien programmieren und schließlich die WordPress-Implementierung durchführen.
Besuchen Sie die Serie
Offensichtlich, aber wenn Sie zusätzliche WordPress-Lektüre benötigen, lesen Sie die vorherigen Tutorials durch!
Besucherseite
Das Tolle an WordPress ist, dass es nicht die Anzeige von Inhalten einschränkt, sondern ein "Framework" von Möglichkeiten bietet. Noch besser ist es möglich, die Anzeige entsprechend dem Inhalt zu ändern.
Tutorial besuchen
Die Flexibilität, die die WordPress-Engine bietet, ist phänomenal: Sie können alles veröffentlichen, vom einfachen Blog bis zum Forum, vom Web-Showcase bis zur CMS-Website für Unternehmen! Hier werfen wir einen Blick auf einige der großartigen Möglichkeiten, mit denen WordPress bisher eingesetzt wurde.
Artikel besuchen
Wir schauen uns an, wie ein beliebtes Premium-WordPress-Theme die erweiterten Funktionen von WordPress nutzt, um eine Vorlage zu erstellen, die wirklich das Potenzial von WordPress übertrifft!
Artikel besuchen
WordPress ist bekannt für seine erstaunliche Sammlung an kostenlosen Plugins. Es gibt für fast jeden Bedarf eine, von der Sie denken können, von der Sicherung Ihrer WordPress-Installation über die Frage nach einer Tasse Kaffee bis hin zur Bekämpfung von Spam.
Artikel besuchen
In diesem Tutorial wird die Implementierung eines Wordpress-Plugins beschrieben. Das Plugin stellt eine Verbindung zu einer externen OSCommerce-Datenbank her und zeigt zufällige Produkte auf Ihrer Wordpress-Site an. Es implementiert auch eine Konfigurationsseite für das Wordpress-Administrationsfenster.
Tutorial besuchen
"WordPress-Hacks" umfasst die Welt von WordPress, einschließlich der neuesten WordPress-Hacks, Neuigkeiten, Tipps, Tricks und Anleitungen der beliebten Open-Source-Blogging-Software.
Besucherseite
Ein neues Blog, in dem Antworten auf WordPress-Fragen gepostet werden, und schnelle, aber sehr nützliche Rezepte zu meiner bevorzugten Blogging-Plattform.
Besucherseite
Der erste Schritt zum Erfolg besteht darin, zu erkennen, dass das Problem, das Sie von einem anderen haben, schon einmal vorgekommen ist. Eine einfache Google-Suche bietet Ihnen eine Lösung für die meisten Hindernisse auf der Straße, auf die Sie bei der Entwicklung für WordPress stoßen.
Besucherseite
