【続】WordPress3.3のデフォルトテーマの構成を理解する

この記事が良ければ、ぜひシェアお願いします

WordPress3.3のデフォルトテーマである『TwentyEleven』について、構成されているファイルについては分かったかと思います。では、実際に目に見える『TwentyEleven』がどのようにCSSでデザイン形成されているのか、見てみたいと思います。

『TwentyEleven』のデザイン構成を知る

WordPressにアクセスするときは、基本的にはindex.phpへのアクセスとなります。(もし、home.phpがあれば、そちらが優先されます。)そのindex.phpにアクセスした時に表示されるページは、全てのテンプレートを読み込んでいる訳ではありません。そのページを表示するのに必要はテンプレートを読み込んで、それぞれの要素を表示しています。

<?php get_header(); ?>

		<div id="primary">
			<div id="content" role="main">

			<?php if ( have_posts() ) : ?>

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

				<?php /* Start the Loop */ ?>
				<?php while ( have_posts() ) : the_post(); ?>

					<?php get_template_part( 'content', get_post_format() ); ?>

				<?php endwhile; ?>

				<?php twentyeleven_content_nav( 'nav-below' ); ?>

			<?php else : ?>

				<article id="post-0" class="post no-results not-found">
					<header class="entry-header">
						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
						<?php get_search_form(); ?>
					</div><!-- .entry-content -->
				</article><!-- #post-0 -->

			<?php endif; ?>

			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>


見てもらうと、HTML5から採用されているマークアップである『header』や『footer』が使われていることや、それぞれのレイアウトや旧態依然のTABLEタグはどこ吹く風、div要素でのCSS指定が基本的になっています。CSSは、『セレクタ』や『クラス』、『要素』も色々と役割が違うので、その差をマスターするのは長い道ではあるのですが(そんな私も汗だくですが)、CSSでレイアウトを制御しています。

また、HTML5からはrole属性が使えることになっていますが、その名の通り、そのマークアップがどんな役割を果たしているのかを示すための属性となっています。role属性について、下記サイトを参考にさせて頂きましたが、適切にそのサイトの構成をロボットに理解してもらうために設定しておいた方が良さそうでしょう。

role=”banner”
ドキュメントからの引用ですが、大見出し(標題)またはウェブサイトのタイトルを含むリージョンなので、ヘッダーに使うのが適していると思います。そのため、&#60div id=”header” role=”banner”&#62や&#60header role=”banner”&#62で使います。

role=”complementary”
ドキュメントからの引用ですが、メインのコンテンツから切り離しても意味を持つ、文書の補足的なセクションですので、サブメニューで使うのが適しているかと思います。HTML5では&#60aside&#62がありますので、&#60aside role=”complementary”&#62

role=”contentinfo”
ドキュメントからの引用ですが、親の文書に適用されるメタデータ。例えば、脚注、著作権の記載、プライバシーポリシーへのリンクが、これに当てはまる。ですので、フッターで使うのが適しているかと思います。そのため、&#60div id=”footer” role=”contentinfo”&#62や&#60footer role=”contentinfo”&#62で使います。

role=”main”
値の名称からも想像できるかと思いますが、メインのコンテンツで使われます。HTML4.01/XHTML1.0でもHTML5でもdiv要素で使うことになるかと思います。

role=”navigation”
ドキュメントからの引用ですが、ナビゲーション要素(通常はリンク)の集合ですので、グローバルナビゲーションなどに使うことになると思います。そのため、&#60ul role=”navigation”&#62や&#60nav role=”navigation”&#62で使います。

role=”search”
検索ツールでので、form要素などに使うことになるかと思います。

>レイアウトで使うランドマークのrole属性【アクセシビリティ】【WAI-ARIA】 | E-riverstyle Design

どのテンプレートを呼び出しているのか

index.phpで、どのテンプレートを呼び出しているのか、関係しているコードを一部抜粋して書いてみたいと思います。

「カスタマイズするならこれだ!」と言わせしめるぐらいの”functions.php”は、作成しておけば自動的に読み込まれますので、アドオンしておきたい関数などはここに書いておくと良いと思います。また、index.phpでは、header.phpやcontent.php、sidebar.phpなどが読み込まれるようにPHPで書いてあります。

こうやって見ると、どのような内容を表示するかはテンプレートで指定するも、レイアウトはCSSで指定しているので、従来までのWEBデザイナーとプログラマーの境界線も薄れてきているような気がしますね。どちらもできないといけない…さらにハードルが上がるのはしんどいことですが(^^;

次回はレイアウトをどう指定しているのかを、見ていきたいと思います。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク