Share
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. Beim Schreiben dieses Tutorials war es schwer zu erklären, was los ist… Aber der beste Weg ist der folgende: Der Beitrag wird in der Schleife entsprechend seinem Inhalt - oder je nach Kontext - angezeigt. So oder so, es enthält bestimmte Dateien, die der Kategorie des Beitrags entsprechen.
In diesem Lernprogramm wird davon ausgegangen, dass auf einem Server eine WordPress-Engine ausgeführt wird, auf die Sie zugreifen können, um Dateien hochzuladen, Dateien herunterzuladen und zu durchsuchen. Wenn Sie einen lokalen Server auf Ihrem Computer mit einer WordPress-Installation ausführen möchten, finden Sie hier ein Tutorial für Windows und hier für OS X.
Lassen Sie mich etwas ausführlicher beschreiben, was wir tun werden. Viele WordPress-Sites sind heutzutage mehr als nur ein Blog. Für diejenigen, die ein Blog, ein News-System und ein Portfolio integrieren, gibt es viele Möglichkeiten, zwischen diesen Posts zu unterscheiden. Zunächst einmal ist die Menge an Metainformationen, die WordPress jedem Beitrag hinzufügt, monumental. Datumsangaben, Kategorien, benutzerdefinierte Felder, Optionen, Tags, Anzahl der Tags usw. Es geht weiter. Wenn Sie eines davon auswählen, können Sie WordPress so anpassen, dass bestimmte Dinge angezeigt werden, auch wenn sich der Kontext ändert (d. H. Anderer Kategoriename, anderes Tag usw.). Die Methode, die ich im Begriff bin, Figuren auszubilden, wenn eine bestimmte Kategorie einem bestimmten Beitrag zugeordnet ist, und dann eine andere Datei entsprechend einfügen. Kontextuell! Wenn die Kontext ist von einem Blog, es wie ein Blogbeitrag anzeigen! Wenn die Kontext ist von einem Portfolioelement, zeigen Sie es wie ein Portfolioelement an! Und so weiter und so fort. Du verstehst es. Lass uns gehen!
Ich habe ein paar Dateien vorbereitet; style.css, index.php und einige Bilder (Danke an TUTs Seiten!). Wir werden darauf aufbauen, um unser Endprodukt zu entwickeln. Laden Sie sie herunter und legen Sie den Ordner im Ordner "wp-content / themes" ab. Gehen Sie jetzt zum WordPress-Dashboard, klicken Sie auf "Design" oder "Präsentation", wenn Sie noch in der Steinzeit leben, und wählen Sie das Thema "Kontextdateien" aus. Großartig! Jetzt ist es aktiviert, wir können in die Bearbeitung der Dateien eintauchen und mit dem Tutorial weitermachen.
Damit die Methode funktionieren kann, muss eine Gruppe von Beiträgen eine bestimmte Kategorie haben. Dazu habe ich ein paar von ihnen mit der Kategorie "Blog" und einige mit "itsNews" versehen und den Rest der Gruppe ohne bestimmte Kategorien überlassen. Stellen Sie sicher, dass Sie dies tun, oder Ihre Ergebnisse werden nicht zu unterschiedlich sein. Stellen Sie also sicher, dass Ihre Beiträge (zumindest für dieses Lernprogramm) auf eine bestimmte Weise gruppiert sind. Es ist lebenswichtig!
Die Funktionsweise, die beschreibt, was passiert, hängt von der Kategorie ab. Für den Code der Schleife ist eine bestimmte Datei enthalten. Die Hierarchie sieht so aus:
Ein Blog-Post wird am Ende so aussehen:
Ein Nachrichtenelement wird folgendermaßen angezeigt:
Und alle anderen Beiträge oder Portfolioelemente werden diesem ähneln:
Beachten Sie die kleinen Wasserzeichen oben rechts in jedem Beitrag? Das ist der Beweis, dass unser System funktionieren wird!
Sowieso. Zwischen den Body-Tags benötigen wir einen Header und eine Schleife. Füge das hinzu:
"title =" Home ">
Als nächstes müssen wir die Kategorie für jeden Beitrag abrufen. Dies verwendet einige Custom WordPress / PHP-Syntax. Normalerweise können Sie für den Wert get_the_category verwenden, aber Sie können über diese Methode JEDE Kategorieinformationen abrufen (geht unter oder ersetzt den Kommentar in PHP):
foreach ((get_the_category ()) als $ category) $ categoryName = $ category-> cat_name. ";
Jetzt müssen wir diesen Wert mit einem Wert vergleichen. Wenn Sie Ihre Kategorien "Blog" oder "theirNews" genannt haben, können wir die $ categoryName -Variable jetzt mit genau diesen Namen / Werten vergleichen. Denken Sie daran, dass sich dies in der Schleife befindet, so dass diese Prüfung für jeden einzelnen Beitrag durchgeführt wird.
if ($ categoryName == 'Blog') include (TEMPLATEPATH. '/ blogTemplate.php'); elseif ($ categoryName == 'theirNews') include (TEMPLATEPATH. '/ newsTemplate.php'); else (include (TEMPLATEPATH. '/ portfolioTemplate.php'));
Jede Zeile der 3 oben ist relativ gleich. Das PHP '==' bedeutet 'ist gleich'. Es ist zwei =, weil, wenn nur eins verwendet wird, eine Variable definiert wird. Nicht was wir wollen If, elseif und else sind einige bedingte PHP-Tags. Sie können mehrere elseif-Anweisungen verwenden, wenn Sie mehr als drei Dateien haben möchten!
Nachdem PHP fertig ist, können wir jetzt die eigentlichen Dateien erstellen, die oben enthalten sind. Das Interessante an dieser Vorlage ist, dass Sie die gesamte Schleife, Kategorie und alle innerhalb eines Satzes von PHP-Tags behalten können. Effizienz!
Diese Dateien sind im Grunde das, was in die Schleife geht, bestehend aus Schleifenvorlagetags. So können wir jede Kategorie mit dem oberen rechten Wasserzeichen zuweisen. Für jede andere Kategoriedatei wird eine andere Klasse verwendet. Ansonsten ist dies alles grundlegende WordPress-Material. Erstellen Sie im Designordner eine neue Datei mit dem Namen 'blogTemplate.php' und füllen Sie sie mit PHP-Güte!
"title ="">
Geschrieben von | abgelegt unter
"> Lesen Sie mehr | |
Nur eine Sache zu beachten. Ich weiß, dass es aus SEO-Gründen sehr schlechte Praxis ist, aber the_content (") hat die 2, so dass kein" Read more "angezeigt wird. Der" Read More "-Link in postMetaData macht das wieder wett!
Das ist ziemlich minimalistisch. Die Kopfzeile ist auch kleiner!
Besuchen Sie Source |
Schließlich die letzte Untervorlagendatei.
; ?>/images/portfolio.png )
"title ="">
"> Projekt anzeigen
Und das ist alles, was Sie für PHP / HTML benötigen! Wenn Sie Ihre WordPress-Seite laden, sieht sie jetzt etwa wie folgt aus:
Beachten Sie, dass Sie die Unterschiede bereits in jedem Beitrag sehen können!
Jetzt schön machen! Wir beginnen mit einem Standardcode. Hiermit legen Sie einen Basis-Look fest, entfernen Sie Dinge, die wir nicht möchten, und gestalten Sie allgemeine Tags (z. B. Kopfzeilen usw.)..
eine Textdekoration: keine; Farbe: # b93a00; * Marge: 0; Polsterung: 0; body background: # 000; Farbe: # 5b5b5b; Schriftfamilie: "Lucida Grande", Lucida, Verdana, serifenlos; Schriftgröße: 75%; h1, h2, h3, h1a, h2a, h3a Schriftfamilie: "Trebuchet MS", Arial, Helvetica; Farbe: #fff; Buchstabenabstand: -2px; Textdekoration: keine; h1 a: hover, h2 a: hover, h3 a: hover color: # 8b8b8b; h2 font-size: 35px; Rand unten: 10px; h3 font-size: 20px; Farbe: # a8a8a8; Buchstabenabstand: -1px; Polsterung unten: 20px;
Nun brauchen wir eine Struktur für unsere Seite.
#wrapper margin: 0 auto; Breite: 500px; Schriftgröße: 11px; #header height: 150px; Schriftfamilie: Georgia, Times New Roman, Times, Serife; Rand unten: 1px fest; Rahmenfarbe: # 222; #content padding-top: 20px; .post margin-bottom: 40px; min-Höhe: 150px;
Als nächstes fügen wir die kleinen Blackground-Wasserzeichen hinzu:
.blog hintergrund: url (images / blogbg.png) no-repeat oben rechts; .portfolio background: url (images / portfoliobg.png) no-repeat oben rechts; min-Höhe: 150px; .news background: url (images / newsbg.png) no-repeat oben rechts; Polsterung rechts: 100px;
Unser Thema nimmt Gestalt an! Alles, was übrig bleibt, ist etwas Bildgestaltung und die Gestaltung von postMetaData!
#header h1 font-size: 50px; Polsterauflage: 30px; #header p.description font-style: italic; Schriftgröße: 16px; .post img float: left; Polsterung rechts: 10px; Polsterung unten: 20px; .post p padding-bottom: 15px; .postInfo padding: 10px; .postMetaData padding: 10px; Hintergrund: # 141414; Marge: 10px 0; Breite: 480px; Bildschirmsperre; Lösche beide; .postMetaData a color: # 06f;
Der letzte Code-Abschnitt, der benötigt wird, sollte Ihr Design jetzt vollständig aussehen! In diesem Tutorial lernen Sie einige Dinge. Eine vielseitige Methode zum Abrufen von Kategorieninformationen, wie diese in Verbindung mit bedingten Tags verwendet werden können, und zum Gruppieren von PHP!
Letzte Woche habe ich euch alle dazu gebracht, ein ordentlich aussehendes Dashboard / Desktop zu erstellen. Ihr Jungs werdet total flip sein, wenn ihr hört, was in diesem vollgepackten Tutorial ist! Konzentrieren Sie sich mehr auf das Dashboard (ich schwöre, es ist cooler, als es sich anhört und viel Code erfordert), und ich werde sogar einen Stack erstellen (getrennt vom Dock, sorry, dass jqDock nicht eingebettet ist
Weiterlesen
jQuery fügt Ihren Websites jede Menge coole Funktionen hinzu. Es kann eine Reihe von Dingen tun, von der Animation bis zum AJAX. Es ist normalerweise verpönt, sich bei der Gestaltung Ihrer Websites stark auf jQuery zu verlassen, aber es macht Spaß, ab und zu wild zu werden. In diesem Tutorial zeige ich Ihnen, wie Sie mit jQuery ein vollständig codiertes Dashboard erstellen, genau wie Leopard! Dies kann hilfreich sein, wenn Sie eine Vielzahl von Gadgets oder Widgets ausblenden, für die Sie keinen Platz haben!
Weiterlesen
CSSEdit ist eine weitere fantastische Web-Entwickler-App, die Apples WebKit in die Hand nimmt, um ein fantastisches visuelles CSS-Bearbeitungserlebnis in Echtzeit zu bieten. Aber das ist es gerade! Die Leute kennen es nur als visuellen CSS-Editor, wenn es tatsächlich viel mehr ist! Ich benutze diese 5 fantastischen Tipps, um meine Arbeit schnell und reibungslos zu gestalten.
Weiterlesen
in Arbeiten mit CMS von Harley
WP_Query ist ein leistungsfähiges Werkzeug, um zu kontrollieren, was aus Ihrer Schleife kommt. Heute werde ich Ihnen zeigen, wie Sie damit ein Zeitungsdesign mit drei Spalten erstellen können, das alle Ihre wichtigsten Blogbeiträge in der Hauptspalte und neben einer Reihe von Beiträgen mit einer bestimmten Kategorie enthält. Wir werden die verwenden 960 CSS-Framework Für das grundlegende Layout und das Zurücksetzen unseres Themas wird eine Menge Arbeit abgehängt, was benötigt wird!
Weiterlesen
Accentsconagua
; ?>/images/portfolio.png )