Fabian Letscher - Blog + Portfolio » Code http://fabianletscher.de WordPress, Webdesign, HTML5, CSS Sun, 12 Feb 2012 10:52:48 +0000 en hourly 1 WordPress – Fehler bei Paginierung http://fabianletscher.de/wordpress/wordpress-fehler-bei-paginierung.html http://fabianletscher.de/wordpress/wordpress-fehler-bei-paginierung.html#comments Sat, 11 Jul 2009 17:11:17 +0000 Fabian http://fabianletscher.de/?p=317 Folgende Situation: Man möchte auf einer Seite mittels einer Template-Datei eine Liste der aktuellen Posts ausgeben, wie es auch auf der Index-Seite passiert. Angenommen man möchte dann auch noch genau 10 solcher Posts ausgeben. Dann müsste man vor die Loop mithilfe von query_posts dies so bewerkstelligen:

<code>global $posts;
rewind_posts();
query_posts('cat=0&showposts=10');</code>

Dabei sorgt cat=0 dafür, dass aus allen Kategorien die Posts angezeigt werden und showposts=10, dass genau 10 auf der Seite stehen. Wenn mehr als 10 Posts vorhanden sind erscheint eine Seitennavigation. Der Link der Seitennavigation weist dann z.B auf “paged=2″ oder auch “page/2″ hin.

Wenn der Aufruf auf eine nächste Seite keine Änderung bewirkt, liegt das daran, dass die URL nicht in die query miteinbezogen wird. Die Erweiterung paged='.$paged löst das Problem:

<code>query_posts('cat=0&showposts=10&paged='.$paged);</code>
]]> http://fabianletscher.de/wordpress/wordpress-fehler-bei-paginierung.html/feed 0 Das HTML 5 Markup http://fabianletscher.de/html/das-html-5-markup.html http://fabianletscher.de/html/das-html-5-markup.html#comments Fri, 10 Jul 2009 11:35:34 +0000 Fabian http://fabianletscher.de/?p=290 Dies wird eine Artikelserie rund um HTML5 bis hin zu einem WordPress-Theme. Der erste Teil handelt dabei von der Erstellung des HTML5 Markups. Dazu werden die neuen Elemente kurz vorgestellt und natürlich angewendet. In weiteren Folgen geht es dann um die Umsetzung mit CSS, die IE-Optimierung und die Gestaltung als WP-Theme.

  1. Teil: Das HTML 5 Markup
  2. Teil: Erstellung des Stylesheets
  3. Teil: HTML 5 Darstellung im IE

Vorschau: Das Typography Alpha Theme

Template: Typography Alpha

Einführung HTML5

Mit HTML5 sind einige Elemente hinzugekommen, die mehr Semantik in das Webcoding bringen sollen. Daher hier ein kurzer Ausschnitt aus dem “Working Draft” von W3C:

  • section represents a generic document or application
    section. It can be used together with the h1,
    h2, h3, h4, h5, and
    h6 elements to indicate the document structure.

  • article represents an independent piece of content of a
    document, such as a blog entry or newspaper article.

  • aside represents a piece of content that is only slightly
    related to the rest of the page.

  • header represents the header of a section.

  • footer represents a footer for a section and can contain
    information about the author, copyright information, et cetera.

  • nav represents a section of the document intended for
    navigation.

  • dialog can be used to mark up a conversation.

  • figure can be used to associate a caption together with
    some embedded content, such as a graphic or video.

Quelle: W3C

Der Aufbau des Templates

An dieser Stelle möchte ich, bevor mit den neuen Elementen gearbeitet wird, den generellen Aufbau der Seite anhand der neuen Tags zeigen. Dies soll helfen die verschiedenen Schritte besser zu gliedern:
Aufbau des Templates
Hier fällt deutlich auf, dass es sich mit HTML5 um eine Erweiterung handelt, welche stark auf semantischer Ebene abläuft. Vorbei die Zeit der aussagelosen div-Elemente.

Das Markup des Templates

Vorschau: Markup des Templates

Zunächst einmal der Dokumentkopf -kurz Doctype. In HTML5 wurde dieser stark reduziert und ist somit merkbar geworden:

<!doctype html>

Der nächste Schritt ist, wie man am Aufbau erkennen kann, das section-Tag. Dieses gibt eine Gruppierung an des kompletten Seiteninhalts und dient später der Formatierung mittels CSS. Es ersetzt das div-Tag, welches oft die ID “wrap” bekommen hat, um anzuzeigen, dass sich hier drin der Inhalt befindet.

<section id="wrap">
...
</section>

Die meisten section-Elemente haben zwei zugehörige Kind-Elemente: header und footer. Diese beiden semantischen Tags dienen dazu Überschriften und Meta-Informationen anzusammeln. In meinem Beispiel hat der section Bereich allerdings nur einen header:

<header>
	<a href="/" title="Home"><h1>Typography alpha</h1></a>
	<nav>
	<h3>Pages</h3>
	<ul>
		<li><a href="#" class="active">Home</a></li>
		<li><a href="#">Contact</a></li>
                  ....
	</ul>
	</nav>
</header>

Hier fällt schon eine weitere HTML5-Neuerung auf: Das Hyperlink-Element a darf nun auch um Block-Elemente wie h1 gesetzt werden.
Weiter geht es mit nav für die Navigationsbereiche einer Webseite. Weiterhin bleibt bestehen, dass Listen sich am besten eignen für die Auflistung der verschiedenen Navigationslinks.

<aside>
	<header>
	<h2>Sidebar</h2>
	</header>
	<form method="get" id="searchform" action="/">

	<h3>Search</h3>
		<fieldset>
                   ...
		</fieldset>

	</form>

	<nav>
	<h3>Categories</h3>
	<ul>
		<li><a href="#">Web <span>(9)</span></a></li>
		<li><a href="#">Economy <span>(9)</span></a></li>
		...
	</ul>
	</nav>
	...
	<hr class="invisible" />
</aside>

Eine Sidebar lässt sich nun wunderbar mit aside auszeichnen. Diese bekommt ebenfalls ein header-Element, in welchen die Funktion mittels einer Überschrift h2 dargestellt wird. Die Sidebar kann nun weitere Elemente enthalten, wie ein Suchfeld, eine zweite Navigation und natürlich noch einiges mehr.

<section id="content">
	<header>
		<h2>Blog</h2>
	</header>
...
	<footer>
	<hr />
	<p>Hier können weitere Meta-Informationen stehen</p>
	</footer>
</section>

Nun beginnt ein weiterer gruppierter Bereich, der für den Inhalt des Blogs steht. Dieser section-Tag wird später die einzelnen Blogbeiträge enthalten. Ausgezeichnet wurde dieser Bereich wieder mit einem header und einem footer.

Nun folgen die einzelnen Beiträge, die mit dem article-Element ausgezeichnet werden:

<article>
	<header>
		<h3><a href="#" title="The first entry">The first entry</a></h3>
			<a class="speak" title="Speak?" href="#">2</a>
	</header>
			<p>Hier wÃ&frac14;rde der Blogbeitrag stehen</p>
	<footer>
			<small class="meta">→ Category: <a href="#" title="Kategorie">Music</a></small>
			<hr class="invisible" />
	</footer>
</article>

Das article-Element repräsentiert einen logischen zusammenhängenden Beitrag, welcher genauso mit header und footer ausgezeichnet werden kann. Wie man sieht benutze ich im footer auch ein hr, was in HTML5 der Bedeutung eine thematischen Abschlusses entspricht.

Das Markup ist somit fertig und valide. Allerdings habe ich die neuen Elemente nach meinem eigenen Ermessen verwendet und entsprechen somit dessen was ich als logisch empfinde. Der Validator überprüft letztlich die Syntax und keine Logik!

]]> http://fabianletscher.de/html/das-html-5-markup.html/feed 0 WordPress: wp_enqueue_style http://fabianletscher.de/wordpress/wordpress-wp_enqueue_style.html http://fabianletscher.de/wordpress/wordpress-wp_enqueue_style.html#comments Wed, 08 Jul 2009 10:01:31 +0000 Fabian http://fabianletscher.de/?p=246 Mit wp_enqueue_style lässt sich relativ einfach ein Stylesheet einbinden. Das besondere hierbei ist, dass ein Stylesheet genau einmal eingefügt wird. Dies beugt vor, dass dasselbe Stylesheet mehrere Male geladen wird.

Aufbau:

[siehe auch: WP Codex (engl.)]

<code><?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ) ?></code>

  • $handle ist ein String und gibt den Namen des Stylesheets wieder. Beispiel: ‘print’
    Ein Name muss angegeben werden.

  • $src ist die URL vom Hauptverzeichnis ausgehend. Beispiel: ‘/wp-content/themes/my_theme/print.css’
    Keine Angabe notwenig. Default-Wert: false

  • $deps ist ein array() was Abhängigkeiten mit anderen Stylesheets betont. Beispiel: array(‘print’, ‘style’)
    Es ist keine Angabe notwendig. Falls man jedoch eine macht, sollte klar sein, dass das Stylesheet vorher auch mithilfe von wp_enqueue_style geladen wird. Im Beispiel würde das bedeuten: Wenn print.css und style.css geladen sind, wird dieses Stylesheet auch geladen

  • $ver ist die String-Angabe einer Version. Beispiel: ’1.0′
    Keine Angabe notwendig, Default-Wert: false.

  • $mediaString für das Ausgabemedium. Beispiel: ‘print’
    Keine Angabe notwendig, Default-Wert: false

Anwendung

Manchmal ist es sinnvoll, ein Stylesheet nur für bestimmte Seiten zu laden. Will man beispielsweise auf allen Seiten und immer dann wenn Kommentare erlaubt sind, dass ein Stylesheet namens “forms.css”eingebunden wird, so könnte man folgendes tun:

<code>
if (comments_open() ) {
        wp_enqueue_style('forms', '/wp-content/themes/wp_theme/forms.css', array() , false , 'screen' );
}
if (is_page() ) {
        wp_enqueue_style('forms', '/wp-content/themes/wp_theme/forms.css', array() , false , 'screen' );
}
</code>

Nun könnte ja auf einer Seite (is_page) auch die Kommentarfunktion erlaubt sein (comments_open), dann wird die forms.css allerdings nicht zweimal geladen – was ja unnötig wäre – sondern genau einmal.

]]> http://fabianletscher.de/wordpress/wordpress-wp_enqueue_style.html/feed 0 Dynamische 404er Seiten http://fabianletscher.de/tipps/dynamische-404er-seiten.html http://fabianletscher.de/tipps/dynamische-404er-seiten.html#comments Mon, 25 May 2009 14:56:04 +0000 Fabian http://fabianletscher.de/?p=114 Gestern habe ich von meiner neuen 404er-Fehlerseite berichtet. Heute gibt es eine ausführliche Anleitung zu dem “Vorschläge”-Prinzip. Doch zunächst noch einmal, was geleistet werden soll:

Was soll geleistet werden?

Falls ein Nutzer die Adresse einer bestimmten Seite falsch in Erinnerung hat, sollen beim Erscheinen der Fehlerseiten mögliche Kandidaten als Vorschläge erscheinen. Diese sollen einen Hyperlink herausgeben zum gewünschten Artikel oder Seite. Die Datenbank soll dabei durchsucht werden. Das zur Suche verwendete Stichwort ist im Falle einer Trennung mit Backslash (“/”) das zuletzt verwendete Wort, bei einer Trennung mit Punkt (z.B. bei einer Dateiangabe wie .html oder .jpg) das Wort vor dem Punkt.

Die Umsetzung

Im folgenden Teil wird zunächst die aktuelle Adresse ausgelesen. Dann wird sie in ein Array gepackt welches nach “/” abgetrennt wird. Es wird das letzte Wort ermittelt nach einem Backslash. Falls kein Wort mehr dort steht wird das Wort davor weiterverarbeitet.
Dann kommt eine Untersuchung auf Datei-Endungen. Es wird wieder das Wort getrennt, bei einem Punkt. Das Wort vor dem Punkt ist ausschlaggebend und wird als Suchwort benutzt. In dem Array $liste2 befindet sich das Suchwort an “Platz” Null.

<code>
<?php $string = $_SERVER['REQUEST_URI'];
		$liste = explode("/",$string);
		$count = (count($liste)-1);
		if ($liste[$count] == "") {$string2 = $liste[($count-1)];} else {$string2 = $liste[$count];}
		$liste2 = explode(".",$string2);
		// Bis hierin wird der letzte Begriff ausgewählt, welcher in der Adresszeile steht, da dieser höchst wahrscheinlich sinnvoll ist.
</code>

Nun geht es weiter mit der Suchanfrage auf die Datenbank. Es wird dabei im Titel und in einem “Post” selbst nach dem Begriff gesucht. Es muss sich um eine Seite oder ein Artikel handeln und darf kein Entwurf sein. Letztlich wird ein Link in einer ungeordneten List ausgegeben. Falls keine Ergebnisse gefunden wurden, erscheint eine Mitteilung.

<code>
//Nun soll die Suche gestartet werden!
$abfrage = "SELECT * FROM $wpdb->posts WHERE (post_content LIKE '%".addslashes(strip_tags($liste2[0]))."%' OR post_title LIKE '%".addslashes(strip_tags($liste2[0]))."%') AND (post_type = 'page' OR post_type = 'post') AND NOT(post_status = 'draft') GROUP BY post_title ASC";
$posts = $wpdb->get_results($abfrage);?>
<?php if (!empty($posts)) { ?>
<p><em>Hier könnte was passendes dabei sein:</em></p>
<ul>
	<?php foreach($posts as $the_post) { ?>
  	<?php $post = get_postdata($the_post->ID); ?>
	<li>
	<a href="<?php echo get_permalink($post['ID']); ?>" title="<?php echo $post['Title']; ?>">
	<?php echo $post['Title']; ?></a>
      	</li> <?php } ?>
</ul>

		<?php } else { ?>
		<p><em>Leider konnten keine möglichen Ergebnisse angezeigt werden! Benutze bitte die Suche und achte auf die Rechtschreibung!</em></p>
		<?php } ?>

</code>

Bei der Suchanfrage ist dem ein oder anderen vielleicht aufgefallen, dass es nicht die übliche Anfrage ist. Diese Version lässt es offen welches Präfix man für seine Tabellen benutzt. Bei der herkömmlichen Methode muss man das mitangeben. Somit ist diese Version unabhängig von der WP-Installation. Diese Art der Abfrage habe ich auf i-jeriko gefunden als ich nach einer Möglichkeit gesucht habe die letzten WordPress-Kommentare anzuzeigen.

Was gibt es noch zu bemängeln?

Ja – Es ist nicht perfekt! Vieles bleibt bei dieser Art unberücksichtigt. Zum einen muss der Nutzer bereitwillig die vollständige Adresse eintippen (die jedoch nicht existiert). Er darf dabei keine Rechtschreibfehler machen (sofern ich nicht selbst welche dabei habe). Dies wird in den wenigsten Fällen der Fall sein, da wenn man sich schon eine Adresse merkt, dann wird man sie höchstens falsch schreiben. Zudem wird es bei WP-Blogs dann schwierig, wenn sowieso keine sprechenden URLs verwendet werden.
Keine sinnvollen Ergebnisse erhält man bei einer Angabe wie “/die/”, da dies letztlich wohl alle Beiträge anzeigt. Die Sortierung ist auch nicht gerade ausgefeilt. Es wird nicht nach Priorität ausgegeben sondern alphabetisch. Somit könnte ein wesentlich besserer Artikel weiter unten stehen und ein unpassender ganz vorne. Jedoch ist es schwierig dies umzusetzen. Man könnte gegebenenfalls die Häufigkeit der Suchwörter als Merkmal benutzen, ob aber dies wirklich viel effektiver ist, bezweifle ich noch.

Weitere Tipps, Kritik und Ideen werden gern angenommen.

]]> http://fabianletscher.de/tipps/dynamische-404er-seiten.html/feed 0 WordPress und die Conditional Tags http://fabianletscher.de/tipps/wordpress-und-die-conditional-tags.html http://fabianletscher.de/tipps/wordpress-und-die-conditional-tags.html#comments Thu, 14 May 2009 12:24:48 +0000 Fabian http://fabianletscher.de/?p=45 Das Wort Kondition kommt aus dem lateinischen condicio und bedeutet so viel wie Bedingung. Also geht es hier um Bedingungen! Bei der Gestaltung eines Themes benötigt man solche Bedingungen häufig, da sie zumal auf der Seite des Servers ausgeführt werden und damit den Inhalt dynamisch anpassen.

Hier findet man auch genug solcher Bedingungen. Ich habe mich beispielsweise dafür entschieden, die Sidebar so zu gestalten, dass bei einem Artikel die Informationen über den Autor, die Kategorie und Datum der Veröffentlichung in dieser erscheinen. Dies gestaltet sich mit den Conditional Tags sehr einfach:

<code>
<?php if (is_single () ) {
      //Hier erscheint die Anweisung, wenn es ein Artikel ist
   }
</code>

Dies ist beliebig erweiterbar. Statt “single” kann man, wie die Dokumentation zeigt, eine Vielzahl anderer Bedingungen aufstellen. Es erlaubt einem auch den Titel der Webseite speziell anzupassen und findet in vielen Formen eine Anwendung.

]]> http://fabianletscher.de/tipps/wordpress-und-die-conditional-tags.html/feed 0