WordPressテーマ「あさま」のマークアップ構成

Title in English : Markup composition of WordPress theme ‘asama’

2022年!新年あけましておめでとうございます。昨年同様に新型コロナ禍にあり、皆様にはご無事にお過ごしでございましょうか。大禍なきことを祈るばかりです。

毎年のことながら、自発的に取り組んでいるプロジェクトの紹介にて「ああ、とりま元気なのね。」と思っていただくための身勝手な近況報告をさせていただきます。

このところ、WordPressのテーマを独自に開発しております。まだまだ始めたばかりなのですが、とりあえずマークアップの構成は概ね固まりました。個人的には’Marckup Art’と了解しておりますが、知識のない方には「なんのこっちゃ?」と思われるでしょう。コンセプチャルな現代美術などと同じかと思います。

「確立された技術の範疇で効果的に情報やあまねく事象を構成し、然る体系から創出される任意の概念に繋げる。」というのは芸術そのものであると考えるので、技術的な理解があれば、こっちの方が易しいと思うのです。如何ですかね?

あれ?柄にもなく新年から難しそうな話に…しませんよ。ともあれひとつ、アートと思ってご高覧いただければ幸いです。

テーマアイコン(Theme icon)

開発を始めたころに北陸新幹線の特急あさま号を利用する機会があったので、そこからテーマを命名しました。テーマアイコンは昔の特急あさま号のプレートを意識して、あさま山の山体曲線を背景としました。

テーマのページ構造(Page structure of theme) ver. 0.5.1

全ページタイプは一元のPHPソース(./index.php)単独にて成立することを目標に開発され、パーツのPHPソース群が包括的に運用されます。

独自に変数’$pageMode’を用意しページタイプを’E404’、’HOME’、’FRNT’、’ACHV’、’RSLT’、’SNGL’、’PAGE’、’INDX’のモードに区分して、階層エレメント毎に’role’属性の値に’pageHOME’などが出力されます。これにより大枠の’id’や’class’に頼ることなく、効率的にマークアップの運用が行えると期待します。

モードはそれぞれ’E404’(該当ページが無い場合)、’HOME’(ホームページ)、’FRNT’(フロントページ)、’ACHV’(一覧ページ)、’RSLT’(検索結果一覧)、’SNGL’(個別ページ)、’PAGE’(固定ページ)、’INDX’(エッジケースの保険)です。

■テーマの基本PHP3ファイル(’./index.php’,’./header.php’,’./footer.php’)によって出力されるマークアップの区分

<html lang=’ja’>

<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-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; ?>‘>

ヘッダー枠:アーカイブズ一覧(検索結果一覧を含む)のタイトルを出力する。

</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’>

ポスト枠:検索結果を含むページタイプ(モード)に合わせて、投稿一覧と個別の投稿、固定ページの内容を出力する。

</article>

</main>

■パーツPHPファイル(./php-parts/content-footer.php)によって出力されるマークアップの区分

<footer class=’content’ role=’<?php echo “content”.$theMode; ?>‘>

フッター枠:アーカイブズ一覧では一覧前後へのページネーション、個別ページでは投稿前後へのページネーションを出力する。

</footer>

</div>

<aside class=’content’ name=’WidgetColumn’ role=’servant’>

ウィジェット枠:タグクラウドなどのウィジェットを登録する領域「メインウィジェットカラム(widget-column-main)」を割り当てる。

</aside>

</section>

■パーツPHPファイル(./php-parts/sticy-arrow.php)によって出力されるマークアップの区分

<section class=’sticky’ name=’ScrollToPagetop’ role=’pageSticky’>

ページトップボタン矢印枠:ページのトップへスクロールするボタンを表示する。

</section>

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

コピーライト表記枠:著作権の所在について記述する。

</article>

</footer>

<?php wp_footer(); ?>

</body>

</html/>

ありがとうございました。

最後に、皆様にとって、できれば世界中の人にとって、健やかで安らかな年になることを祈っております。…一応いつもの、そかさ。

「WordPressテーマ「あさま」のマークアップ構成」への1件のフィードバック

  1. あけましておめでとうございます。
    「あさま」、いいですね。
    新幹線にはヘッドマークが無く味気ないのですが、
    在来特急『あさま』498系や189系には似合ったヘッドマークがありました。
    懐かしいです。
    おじさんですね。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください