960Pixels netpress wordpress, tutoriale, grid960, photoshop itd…

Zastanawiałem się ostatnio jak powinna wyglądać wzorowa struktura danego posta uwzględniając przy tym tagi html5. Podstawowym markupem, który zamierzam używać w loopie nie jest ani lista, ani milion divów umieszczonych jeden pod drugim.

Ostatnimi czasy staram się pisać markup w ten sposób, by był on w miarę wielokrotnego użytku – chcąc zmaksymalizować swoją efektywność przy jednoczesnej optymalizacji swojego czasu pracy.
O to chyba chodzi w tej naszej ukochanej semantyce :)? Za każdym razem staram się skupić na danym elemencie strony, napisać go jak najlepiej by później móc go swobodnie wykorzystywać w innych projektach, wszakże html to w końcu struktura, a za prezentację treści odpowiada CSS. Poniżej prezentuję swój światopogląd na strukturę widoku postów w WordPressowym Loopie.

			<article class="post">
				<header class="post-header">
					<hgroup class="post-title">
						<h1><?php edit_post_link( $link, '(', ')', $id ); ?> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"><?php the_title(); ?></a></h1>
					</hgroup>
				</header>
				<section class="post-body">
					<figure>
						<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"><?php the_post_thumbnail(); ?></a>
					</figure>
					<?php the_content( "Czytaj dalej... <strong>&raquo;</strong>", $strip_teaser, $more_file ); ?>
				</section>
				<footer class="post-footer">
					<p class="datetime"><time datetime="<?php the_time('c'); ?>"><?php the_time('j F, Y'); ?></time></p>
				</footer>
			</article>

Powyższy markup wydaje mi się w miarę odpowiedni, a użycie tagów – sensowne. Prezentujemy w końcu treść artykułu – stąd tag article.

Nasz artykuł ma nagłówek – użycie taga header – logiczne. Kwestią sporną wydaje się użycie hgroup w momencie, gdy mamy tam zagnieżdżony tylko h1 – po prostu nieraz pod h1 jest od razu h2 – stąd grupowanie nagłówków.

Sekcją oddzielone zostało ciało artykułu – czyli tekst. Jako, że posty z reguły opatrzone są obrazkami znalazł się tam tag figure. No i dalej nasz ukochany the_content();. Później zamknięcie artykułu, czyli stopka (footer), a w niej data – umieszczona w paragrafie. Datę zdecydowałem również podawać w przeznaczonych do tego znacznikach, czyli time.

Powyższy kod wykorzystuję już bodajże po raz czwarty w swoich projektach – spisuje się znakomicie a odpowiednia ilość tagów pozwala na w miarę swobodne ostylowanie treści bez konieczności dodawania kolejnych znaczników. Słowem na zakończenie – nie pisałem tutaj dosyć długo – jako, że ostatnio mam troszkę więcej wolnego czasu postaram się nadrobić ostatnie tygodnie.