「あさま」のあらましシリーズの出力構成です。前回の開発構成は #サービスサイド の構成でしたが、今回は #クライアントサイド の構成になります。とはいえ未だ、ユーザーにとっては「なんのこっちゃ?」の領域です。でもしかし個人的には、ウェブ制作において最も #アーティスティック な工程であると認識しております。(「あさま」開発サイトはこちらです。)
マークアップ
#WordPress の「 #あさま 」テーマの有効化によって出力されるページの構成すなわち #マークアップ を #ワイヤーフレーム 表示にて紹介します。(これをワイヤーフレームと言っていいのか少し不安ですが…ま、だいたいそんなものです。)
タイプに関わらず全てのページは #PHP ソース(./index.php)を一元として成生され、PHPコーディングの支配下にあります。ページタイプに合わせてPHPソース群がパーツとして包括的に運用され一つのページを動的に生成します。以下に、全ページの生成で配置される基本構成(マークアップ)を #ディビジョン の枠にて示し、PHPによる手配と各枠のマークアップを記述します。
PHPロード時にメインオブジェクト’HSTL’で変数’$pageMode’を用意し、ページタイプを’E404’、’HOME’、’FRNT’、’ACHV’、’RSLT’、’SNGL’、’PAGE’、’INDX’の文字列で区分します。そしてページ生成に際し、階層エレメントごとに’role’属性値に階層概念(’class’属性値の’page’や’content’、’column’など)と共に’pageHOME’などと出力します。これにより大枠のタグ名や’id’に頼ることなく、効率的にマークアップの運用が行えると期待します。なお、親テーマの「あさま」を有効化するとページの区分枠表示(ワイヤーフレーム?)になり、マークアップの状態も確認できます。
モードはそれぞれ’E404’(該当ページが無い場合)、’HOME’(ホームページ)、’FRNT’(フロントページ)、’ACHV’(一覧ページ)、’RSLT’(検索結果一覧)、’SNGL’(個別ページ)、’PAGE’(固定ページ)、’INDX’(エッジケースの保険)です。
■テーマの基本PHP3ファイル(’./index.php’)によって出力されるマークアップの区分(実際は下の<body>タグまで)
<html lang=’ja’>
■テーマの基本PHP3ファイル(’./header.php’)によって出力されるマークアップの区分
<head>
htmlファイルのヘッダー情報 : 概ね基本的なメタ情報群を記述する。<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
■パーツPHPファイル(./php-parts/page-header.php)によって出力されるマークアップの区分
<header class=’page’ role=’<?php echo “page”.$theMode; ?>‘>
<article class=’content hustleFlex’ name=’Pennant’ role=’banner’>
ペナント枠 : ページの最上部バーを運用する部位で、ロゴマーク表示域とメニュー領域として「ペナントナビゲーション(pennant_nav)」を割り当てる。外観→メニュー→「位置を管理」タブにて一覧される。</article>
<aside class=’content’ name=’WidgetColumn’ role=’servant’>
ウィジェット枠 : タグクラウドなどのウィジェットを登録する領域として「ヘッダーウィジェットカラム(widget-column-header)」を割り当てる。外観→ウィジェットにて枠が確認できる。</aside>
</header>
■パーツPHPファイル(./php-parts/sticy-menu.php)によって出力されるマークアップの区分
<section class=’sticky’ name=’MainMenuFlop’ role=’pageSticky’>
<nav class=’content menu’ id=’mainMenu’ role=’navigation’>
メニュー枠 : 「あさま(asama)」独自のフローティングメニュー領域にて、上段に「Home」「検索」「メニュー開閉ボタン」、下段にメインメニュー領域として「メインナビゲーション(main_nav)」を割り当てる。外観→メニュー→「位置を管理」タブにて一覧される。</nav>
</section>
<?php if(function_exists(‘yoast_breadcrumb’)): ?>
<aside class=’page’ name=’BreadCrumbList’>
<nav class=’content’ id=’breadcrumbsBlock’ role=’navigation’>
パン屑リスト枠 : プラグイン「Yoast SEO」によるパン屑リストの利用がある場合は、そのページナビゲーション領域を割り当てる。</nav>
<?php else: ?>
</aside>
<aside class=’page’ name=’HeaderNavigation’>
<nav class=’content’ id=’headerMenuBlock’>
メニュー枠 : プラグイン「Yoast SEO」によるパン屑リストの利用がない場合は、メニュー領域として「ヘッダーナビゲーション(header_nav)」を割り当てる。外観→メニュー→「位置を管理」タブにて一覧される。</nav>
</aside>
<?php endif: ?>
■パーツPHPファイル(./php-parts/page-poster.php)によって出力されるマークアップの区分
<aside class=’page’ name=’PagePoster’ role=’<?php echo “page”.$theMode; ?>‘>
<article class=’content headAD’ mane=’HeadAdvertisement’>
広告枠 : バナー広告などの挿入領域(Google AdSenseなどのソースコードを記述する。)</article>
<article class=’content poster’ name=’PosterBord’>
アイコン画像枠 : 「あさま(asama)」はアイコン画像の利用がON(OFFにもできる。)になっています。アイコン画像が登録されていない場合はあさまテーマの画像が表示される。</article>
</aside>
■パーツPHPファイル./php-parts/page-special.php)によって出力されるマークアップの区分
<aside class=’special’ name=’PageSpecial’ role=’<?php echo “page”.$theMode; ?>‘>
<article class=’content’ role=’PageSpecial’>
特別エレメント(緊急情報など一時的な情報を掲載する。)が入る。子テーマのfunction.phpから登録がなければこの領域(asideタグから)は出力されない。</article>
</aside>
■パーツPHPファイル(./php-parts/page-section.php)によって出力されるマークアップの区分
<section class=’page hustleFlex’ role=’<?php echo “page”.$theMode; ?>‘>
<div class=’wraper’ name=’ContentWraper’ role=’wraper’>
■パーツPHPファイル(./php-parts/content-header.php)によって出力されるマークアップの区分
<header class=’content’ name=’headline’ role=’<?php echo “content”.$theMode; ?>‘>
ヘッダー枠 : アーカイブズ一覧(検索結果一覧と404エラーを含む)のタイトルを出力する。シングルページや固定ページではこの内容は空になる。</header>
「./php-parts/content-main.php」によって出力されるマークアップの区分
<main class=’content’ role=’<?php echo “content”.$theMode; ?>‘>
メイン枠 : 全ての投稿(ポストやエントリーとも呼ばれる。)の一覧や個別内容(固定ページを含む)を出力する。■パーツPHPファイル(./php-parts/column-post.php)によって出力されるマークアップの区分
<article id=’post-<?php the_ID(); ?>‘ <?php post_class(‘column hustleFlex’); ?> name=’[ThumbColumn || PostColumn || PageColumn]‘ role=’[column-former || column-asama]‘>
ポスト枠 : 検索結果を含むページタイプ(モード)に合わせて、投稿一覧と個別の投稿、固定ページの内容を出力する。- name属性の値は3種類(ページタイプから割り振られる。)
- ThumbColumn : アーカイブページに複数の投稿を表示するケース
- PostColumn : シングルページに一つの投稿を表示するケース
- PageColumn : 固定ページの内容を表示するケース
- role属性の値は2種類(個テーマのfunction.phpに記述されたあさまテーマの運用開始情報から割り振られる。)
- column-former : アーカイブページに複数の投稿を表示するケース
- column-asama : 固定ページの内容を表示するケース
</article>
■パーツPHPファイル(./php-parts/column-comments.php)によって出力されるマークアップの区分
<article class=’comments’ name=’Comments’>
コメント枠 : 対象は投稿のシングルページだけで、且つ、コメント機能が有効であればコメント一覧と、その下にコメント投稿枠を出力する。コメント一覧と投稿枠の仕様は初期値にて実装する。</article>
<?php endif: ?>
</main>
■パーツPHPファイル(./php-parts/content-footer.php)によって出力されるマークアップの区分
<footer class=’content’ role=’<?php echo “content”.$theMode; ?>‘>
フッター枠 : アーカイブズ一覧では一覧前後へのページネーション、個別ページでは投稿前後へのページネーションを出力する。</footer>
</div>
<?php if ($MD!==’FRNT’ && is_active_sidebar(‘widget-column-main’)): ?>
<aside class=’content’ name=’WidgetColumn’ role=’servant’>
ウィジェット枠 : タグクラウドなどのウィジェットを登録する領域として「メインウィジェットカラム(widget-column-main)」を割り当てる。外観→ウィジェットにて枠が確認できる。■「ホームページ設定」が「固定ページ」にされた場合は、ホームページ(フロントページ)にこの領域(asideタグから)は出力されない。
</aside>
<?php endif: ?>
</section>
■パーツPHPファイル(./php-parts/sticy-arrow.php)によって出力されるマークアップの区分
<section class=’sticky’ name=’ScrollToPagetop’ role=’pageSticky’>
ページトップボタン矢印枠 : ページのトップへスクロールするボタンを表示する。</section>
<div class=’joint’></div>
■’div.joint’は、’section.sticky’の内容をコントロールするために少しだけ存在させるエレメント■パーツPHPファイル(./php-parts/page-footer.php)によって出力されるマークアップの区分
<footer class=’page’ role=’<?php echo “page”.$theMode; ?>‘>
<article class=’content’ name=’FooterMenu’>
メニュー枠 : メニュー領域として「フッターナビゲーション(footer_nav)」を割り当てる。外観→メニュー→「位置を管理」タブにて一覧される。</article>
<aside class=’content’ name=’WidgetColumn’ role=’servant’>
ウィジェット枠 : タグクラウドなどのウィジェットを登録する領域として「フッターウィジェットカラム(widget-column-footer)」を割り当てる。外観→ウィジェットにて枠が確認できる。</aside>
<article class=’content’ name=’Copyright’ role=’copyright’>
コピーライト表記枠 : 著作権の所在について記述する。子テーマのfunction.phpからサイトの著作権情報を登録できる。</article>
</footer>
■テーマの基本PHP3ファイル(’./footer.php’)によって出力されるマークアップの区分(実際は下の</html>タグまで)
<?php wp_footer(); ?>
</body>
</html>
冒頭にも触れましたが、私個人は #ビジュアル や #アニメーション による #デザイン 表現よりもロジカルな区分や階層(ディビジョンと #ヒエラルキー )によるデザイン構成が好きで、その美しくさを希求するものです。だから、ウェブの作業をするときはここの作業がいちばんワクワクします。外見や仕草より骨にエクスタシーを感じるのです。そかさ。