あさまテーマのマーク

「あさま」のあらまし(出力構成)

「あさま」のあらましシリーズの出力構成です。前回の開発構成は #サービスサイド の構成でしたが、今回は #クライアントサイド の構成になります。とはいえ未だ、ユーザーにとっては「なんのこっちゃ?」の領域です。でもしかし個人的には、ウェブ制作において最も #アーティスティック な工程であると認識しております。(「あさま」開発サイトはこちらです。)

マークアップ

#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種類(ページタイプから割り振られる。)
  1. ThumbColumn : アーカイブページに複数の投稿を表示するケース
  2. PostColumn : シングルページに一つの投稿を表示するケース
  3. PageColumn : 固定ページの内容を表示するケース
role属性の値は2種類(個テーマのfunction.phpに記述されたあさまテーマの運用開始情報から割り振られる。)
  1. column-former : アーカイブページに複数の投稿を表示するケース
  2. column-asama : 固定ページの内容を表示するケース

</article>

if(comments_open()): ?>

■パーツ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>

冒頭にも触れましたが、私個人は #ビジュアル や #アニメーション による #デザイン 表現よりもロジカルな区分や階層(ディビジョンと #ヒエラルキー )によるデザイン構成が好きで、その美しくさを希求するものです。だから、ウェブの作業をするときはここの作業がいちばんワクワクします。外見や仕草より骨にエクスタシーを感じるのです。そかさ。