「あさま」のあからさま(function.php)

#Wordpress テーマの導入ではシステム上の機能を有効化したり、カスタマイズしたりすることが導入初期段階で必要になります。今回はhustlemouseの独自テーマ「 #あさま ( #asama )」「 #あさまっこ ( #asamito )」親子テーマの #function.php について紹介します。
初回のあからさまシリーズ投稿では、インストールにおいて障害のあった行きがかり上から、 #プラグイン について紹介しました。しかしながら、導入における #エンジニアリング の観点からいえば、本来の最初の一歩は今回であると考えます。

親テーマ「あさま」のfunction.php

あらましシリーズ(出力設定)で掲示したとおり、親テーマ「あさま」のfunction.phpは実質三行で記述されています。三つの作業をしているということで、メインクラスの #ソース を読み込み、その #インスタンス を生成して、それなる #オブジェクト の初期化を行っています。今後、この三行に変更が加わることはないと思われます。(死守希望です。)

子テーマ「あさまっこ」のfunction.php

実際の「あさま」利用にあたって子テーマ「あさまっこ」を有効化して利用することになります。よって、サイトを構築される初期段階にあっては「あさまっこ」のfunction.phpを変更することになります。これもあらましシリーズ(出力設定)で一度掲示していますが、「コメントを読んでね。」ではあまりにもずさんなので、ここでは個別の設定について紹介しておきます。今投稿の本名となります。

「Visual Studio Code」で開いた「function.php」

まず、あさまっこテーマのfunction.phpの記述実体はつぎのhustle_config() #メソッド ( #関数 )の一つだけになります。

<?php
(中略)
//子テーマは先に読み込まれるので親テーマに関する設定を記述して、親テーマが読み込まれた際に本関数が呼び出される。
function hustle_config(object $obj) {
	(中略)
}

コメントにある通り、先に読み込まれて親テーマ「あさま」が成立した際に呼び出される手筈になっております。呼び出された際に取って返して、親テーマに仕込んであるメソッドを参照し、子テーマ「あさまっこ」のための項目に任意の設定を反映します。

つづいて、それらメソッドについて紹介します。

/*******************************
あさまテーマを運用して投稿を開始した日の値('Y-m-d H:i:s')にて登録する。
各投稿ディビジョンのrole属性値が、開始日以前であれば'column-former'以後であれば'column-asama'となる。
*******************************/
$obj->setAtTheThenePostDate('2022-10-24 19:28:00');

あさまっこ以前以後

あさまっこテーマではテーマ運用の始まった日を指定して、各投稿(ポスト)の #エレメント の #role 属性に以前以後の値を明示的に出力します。
親テーマのメソッドsetAtTheThenePostDate()の参照に、運用開始日の日の値(’Y-m-d H:i:s’形式)文字列をパラメータとして渡します。そして、投稿エレメントを出力の際にそのrole属性に、運用開始日以前であれば’column-former’を、以後であれば’column-asama’と値が出力されます。これでCSSで新旧の投稿にセレクタによる区分が可能になります。
親テーマ「あさま」を有効化した場合は、強制的に独自テーマ開発開始日の’2021-11-15 00:00:00’にに設定されます。

タグクラウド

/*******************************
あさまテーマの独自タグクラウドを利用するかしないかの真偽値にて登録する。
*******************************/
$obj->setHustleTagCloud(true);

あさまっこテーマでは初期状態でヘッダ内にあさま独自の #タグクラウド が挿入されます。
これを非表示とする場合は、親テーマのメソッドsetHustleTagCloud()の参照にパラメータの値を偽(false)とします。
親テーマ「あさま」を有効化した場合は、強制的に真(true)になります。

Googleマップ

/*******************************
Googleマップ利用に必要となる'KEY'と'ID'の連想配列にて登録する(変更不可変数名=>値)
*******************************/
$obj->setGoogleParams(array(
'KEY' => 'XXXXXXXXXXXXXXXX_XXXXXXXX-XXXX',
'ID' => 'XXXXXXXXXXXXXXXX',
));

あさまっこテーマでは #Google_Mapsを利用する #ショートコード ( #shortcode )を準備してあります。
「あさま」のショートコードを利用して、且つ、サイト内で #Google マップを表示する場合は、ここで親テーマのメソッドsetGoogleParams()の参照に、’KEY’と’ID’という名前のキー変数にそれぞれ文字列の値を記述した連想配列をパラメータとして渡します。
利用のための設定については「Google Mapsのディベロッパーサイト」にてご確認ください。
運用設定が終了すれば、それぞれ’KEY’はメニュー「認証情報」における「APIキー」の、’ID’はメニュー「マップ管理」における「Map ID」の設定項目から参照できます。

Webフォント

/*******************************
サイトで利用するWebフォントを連想配列にて登録する。(任意変数名=>URLとパラメータ)
*******************************/
$obj->orderchildFonts(array(
'google_MaterialIcons'=>'https://fonts.googleapis.com/icon?family=Material+Icons',
'google_SourceCodePro'=>'https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
'google_NotoSans'=>'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap',
'google_NotoSansJP'=>'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap',
'google_Quicksand'=>'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap',
'google_KiwiMaru'=>'https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap',
));

あさまっこテーマではGoogleのWebフォント「 #Google_Fonts 」を利用しています。
親テーマのメソッドsetGoogleParams()の参照に、ユニークな名前のキー変数にそれぞれ文字列で参照先URLを記述した連想配列をパラメータとして渡せば、それらフォントが読み込まれます。そのうえで #CSS に記述して利用します。ほかのWebフォントも同様に利用できると予想できます。
この場でなくとも、 #font.css などでフォントを読み込んで利用することも可能です。

CSSの読み込み

/*******************************
サイトで利用するCSSファイルを連想配列にて登録する。(任意変数名=>テーマルートパス)
注意)確実な動作のため、フォント→アニメーション→デザインの順番で読み込まれるように列記する。
*******************************/
$obj->orderEnqueueChildStyles(array(
	//確実な動作のため、フォント→アニメーション→デザインの順番で読み込まれるように列記する。
	'asamito-font'=>'/css/font.css',
	'asamito-animation'=>'/css/asamito_anim.css',
	'asamito-design'=>'/css/asamito.css',
));

あさまっこテーマではfunction.phpでCSSファイルを読み込んで利用します。
通常の #style.css による読み込みでは、 #Javascript でCSSオブジェクトを(読み込みタイミングのためでしょうか?)取得できません。とくにアニメーション運用のためのクラス記述があるCSSはそのオブジェクトの取得が必須ですから、ここで読み込む必要があります。
親テーマのメソッドorderEnqueueChildStyles()の参照に、ユニークな名前のキー変数にそれぞれ文字列でテーマディレクトリからのファイルパスを記述した連想配列をパラメータとして渡せば、それらCSSファイルが読み込まれます。パスについては、あらましシリーズ(開発構成)にて確認してください。
なお配列の記述順に読み込まれますので、注意にあるように「確実な動作のため、フォント→アニメーション→デザインの順番で読み込まれるように列記する。」には配慮しましょう。

著作権情報

/*******************************
著作権情報を登録する。内容はパラグラフタグ内に出力される。
$obj->setTheCopyright()のメソッド参照で、メインオブジェクト(HustleClass)に変数(copyright)が生成され、ソースが格納される。
変数(copyright)が生成されていれば、include/parts/page-special.phpにて以下のエレメントが出力される。
格納されたソースは<?php echo $HSTL->copyright; ?>によって実装される。
<article class='content' name='copyright' role='copyright'>
	<p><?php echo $HSTL->copyright; ?></p>
</article>
表示をしない場合はコードをコメント化するか、「$obj->setTheCopyright('');」と空を渡します。
*******************************/
$obj->setTheCopyright('COPY RIGHT');

あらましシリーズ(出力設定)からPHPソース内コメント記述が変更になってます。

あさまっこテーマではブログサイトの記事についての著作権情報を出力する機能を準備してます。
親テーマのメソッドsetTheCopyright()の参照に、その旨の文字列をパラメータとして渡せば、ページフッタに表示されます。(文字列には #HTML タグの利用が可能です。)
このメソッドが参照された際にメインオブジェクトに変数「copyright」が生成されます。その変数の有無で著作権表示エレメントを出力するしないが判断されます。掲示の必要がない場合はコードをコメント化(もしくは空文字を渡す。)する必要があります。
たとえば本サイトでは「2007.9.5〜 © hustlemouse, all rights reserved. <br>Author : maruhiro (Coded with HTML5 + ES6)±」という記述を渡してます。
親テーマ「あさま」を有効化した場合は、「あさま」と「あさまっこ」親子テーマがオープンソースであることが強制的に表示されますのでご留意ください。

特別エレメント

/*******************************
緊急情報など一時的な情報を掲載するページの特別エレメントに掲示する情報を登録する。
$obj->setThePageSpecial()のメソッド参照で、メインオブジェクト(HustleClass)に変数(pageSpecial)が生成され、ソースが格納される。
変数(pageSpecial)が生成されていれば、include/parts/page-special.phpにて以下のエレメントが出力される。
格納されたソースは<?php echo $HSTL->pageSpecial; ?>によって実装される。
<aside class='special' name='PageSpecial' role='<?php echo "special".$MD; ?>'>
	<article class='content' role='PageSpecial'>
		<?php echo $HSTL->pageSpecial; ?>
	</article>
</aside>
表示をしない場合はコードをコメント化するか、「$obj->setThePageSpecial('');」と空を渡します。
*******************************/
$obj->setThePageSpecial('<p class="message"><span class="attention">THE PAGE SPECIAL!</span></p>');
}

こちらもあらましシリーズ(出力設定)からPHPソース内コメント記述が変更になってます。

あさまっこテーマでは緊急情報など一時的な情報を掲載する機能を準備してます。
「ただいま工事中」などのメッセージをページ階層の特別エレメントに掲示できます。親テーマのメソッドsetThePageSpecial()の参照に、その旨の文字列をパラメータとして渡せば、ページヘッダ(サイトテーマヘッダ画像の下です。)に表示されます。(文字列にはHTMLタグの利用が可能です。)
このメソッドが参照された際にメインオブジェクトに変数「pageSpecial」が生成されます。その変数の有無で特別エレメントを出力するしないが判断されます。掲示の必要がない場合はコードをコメント化(もしくは空文字を渡す。)する必要があります。
親テーマ「あさま」を有効化した場合は、強制的に「THE PAGE SPECIAL!」と表示されますのでご留意ください。

長くなってしまいましたが、主に子テーマ「あさまっこ」のfunction.phpの紹介でした。
うーむ、この投稿の編集に付随して行われた変更が少々多かったと感じましたので、バージョンを0.2.11としてバージョンアップいたします。(ダウンロードページはこちら
また後日、断りもなく(なるたけ入れますが…、)投稿内容に加筆や変更があるやもしれません。ご了承のほどお願いいたします。優柔不断やなあ。そかさ。