Arkhe ver.1.4 アップデート情報

2021年4月10日2021年5月17日

アップデート

テーマ本体

WordPressテーマ「Arkhe ( アルケー )」の ver.1.4.0 をリリースしました。

重要なアップデート内容

投稿リストに表示されるメタ情報を出力する部分のコード構成を再整理しました。
- post_list/item/meta.phpの中身が大幅に変更されており、各メタ情報をプラガブル関数で出力するように調整しました。
- p-postList__cat → p-postList__categoryにクラス名を変更しています。
u-fullheightというユーティリティクラスを追加しました。

その他、軽微なコード整理
追加アップデート情報【ver.1.4.1】
- ドロワーメニューが長い時にスクロールできない不具合を修正しました。
- その他、軽微なコード修正
追加アップデート情報【ver.1.4.2】
- 検索結果ページのタイトルに不要な()が出力されてしまうことがある不具合を修正しました。
- .u-obf-系のCSSプロパティの一部にimportantをつけました。

変更のあったファイル一覧

今回のアップデートでは、重要なテンプレートファイルにも変更があります。

/template-parts/post_list/item/meta.php : 編集
/inc/parts.php : 関数を追加
/footer.php : 軽微なコード整理

変更内容の詳細

`meta.php`の変更内容

Before:

<?php
/**
 * 投稿リストに表示されるメタデータ
 */
$setting = Arkhe::get_setting();

// 投稿データ
$the_id    = isset( $args['post_id'] ) ? $args['post_id'] : get_the_ID();
$author_id = isset( $args['author_id'] ) ? $args['author_id'] : 0;
$date      = isset( $args['date'] ) ? $args['date'] : null;
$modified  = isset( $args['modified'] ) ? $args['modified'] : null;

// リスト用の設定データ
$show_cat      = isset( $args['show_cat'] ) ? $args['show_cat'] : $setting['show_list_cat'];
$show_date     = isset( $args['show_date'] ) ? $args['show_date'] : $setting['show_list_date'];
$show_modified = isset( $args['show_modified'] ) ? $args['show_modified'] : $setting['show_list_mod'];
$show_author   = isset( $args['show_author'] ) ? $args['show_author'] : $setting['show_list_author'];

// 更新日は、公開日より遅い場合だけ表示
if ( $show_modified && $show_date ) {
	$show_modified = ( $date < $modified ) ? $show_modified : false;
}

// カテゴリーデータ
$cat_data = get_the_category( $the_id );
$cat_data = empty( $cat_data ) ? null : $cat_data[0];

// 著者データ
$author_data = $show_author ? get_userdata( $author_id ) : null;

?>
<div class="p-postList__meta c-postMetas u-flex--aicw">
	<?php if ( $show_date || $show_modified ) : ?>
		<div class="p-postList__times c-postTimes u-color-thin u-flex--aic">
			<?php
				if ( $show_date && $date ) :
					ark_the__postdate( $date, 'posted' );
				endif;
				if ( $show_modified && $modified ) :
					ark_the__postdate( $modified, 'modified' );
				endif;
			?>
		</div>
	<?php endif; ?>
	<?php if ( $show_cat && $cat_data ) : ?>
		<div class="p-postList__cat u-color-thin u-flex--aic" data-cat-id="<?php echo esc_attr( $cat_data->term_id ); ?>">
		<i class="c-postMetas__icon arkhe-icon-folder" role="img" aria-hidden="true"></i>
		<?php echo esc_html( $cat_data->name ); ?></div>
	<?php endif; ?>
	<?php if ( $author_data ) : ?>
		<div class="p-postList__author c-postAuthor u-flex--aic">
			<figure class="c-postAuthor__figure">
				<?php echo get_avatar( $author_id, 100, '', '' ); ?>
			</figure>
			<span class="c-postAuthor__name u-color-thin"><?php echo esc_html( $author_data->display_name ); ?></span>
		</div>
	<?php endif; ?>
</div>

After:

<?php
/**
 * 投稿リストに表示されるメタデータ
 */
$setting = Arkhe::get_setting();

// 投稿データ
$the_id    = isset( $args['post_id'] ) ? $args['post_id'] : get_the_ID();
$author_id = isset( $args['author_id'] ) ? $args['author_id'] : 0;
$date      = isset( $args['date'] ) ? $args['date'] : null;
$modified  = isset( $args['modified'] ) ? $args['modified'] : null;

// リストの表示設定データ
$show_date     = isset( $args['show_date'] ) ? $args['show_date'] : $setting['show_list_date'];
$show_modified = isset( $args['show_modified'] ) ? $args['show_modified'] : $setting['show_list_mod'];
$show_cat      = isset( $args['show_cat'] ) ? $args['show_cat'] : $setting['show_list_cat'];
$show_author   = isset( $args['show_author'] ) ? $args['show_author'] : $setting['show_list_author'];

?>
<div class="p-postList__meta c-postMetas u-flex--aicw">
	<?php ark_the__post_list_times( $show_date, $show_modified, $date, $modified ); ?>
	<?php if ( $show_cat ) ark_the__post_list_category( $the_id ); ?>
	<?php if ( $show_author ) ark_the__post_list_author( $author_id ); ?>
</div>

`parts.php`の変更内容

以下のコードを追加しています。

<?php
/**
 * 投稿リスト用の日付
 */
if ( ! function_exists( 'ark_the__post_list_times' ) ) {
	function ark_the__post_list_times( $show_date, $show_modified, $date, $modified ) {

		$date     = $show_date ? $date : null;
		$modified = $show_modified ? $modified : null;

		// どっちも非表示の場合
		if ( ! $date && ! $modified ) return;

		// 両方表示する設定の場合、更新日は公開日より遅い場合だけ表示
		if ( $date && $modified ) {
			$modified = ( $date < $modified ) ? $modified : null;
		}
	?>
		<div class="p-postList__times c-postTimes u-color-thin u-flex--aic">
			<?php
				if ( $date ) ark_the__postdate( $date, 'posted' );
				if ( $modified ) ark_the__postdate( $modified, 'modified' );
			?>
		</div>
	<?php
	}
}


/**
 * 投稿リスト用のカテゴリー
 */
if ( ! function_exists( 'ark_the__post_list_category' ) ) {
	function ark_the__post_list_category( $post_id ) {
		$categories = get_the_category( $post_id );
		if ( empty( $categories ) ) return;

		$cat = $categories[0];
	?>
		<div class="p-postList__category u-color-thin u-flex--aic">
			<i class="c-postMetas__icon arkhe-icon-folder" role="img" aria-hidden="true"></i>
			<span data-cat-id="<?php echo esc_attr( $cat->term_id ); ?>"><?php echo esc_html( $cat->name ); ?></span>
		</div>
	<?php
	}
}


/**
 * 投稿リスト用の著者情報
 */
if ( ! function_exists( 'ark_the__post_list_author' ) ) {
	function ark_the__post_list_author( $author_id ) {
		$author_data = get_userdata( $author_id );
		if ( empty( $author_data ) ) return;
	?>
		<div class="p-postList__author c-postAuthor u-flex--aic">
			<figure class="c-postAuthor__figure">
				<?php echo get_avatar( $author_id, 100, '', '' ); ?>
			</figure>
			<span class="c-postAuthor__name u-color-thin"><?php echo esc_html( $author_data->display_name ); ?></span>
		</div>
	<?php
	}
}

`u-fullheight`について

このクラスに対するCSSの内容は次のようになっています。

.u-fullheight {
    height: calc(100vh - var(--ark-offset_y, 0px)) !important;
}

--ark-offset_yには、追従ヘッダー分などの高さがJS側からセットされるようになっています。（このCSS変数自体は前からあります。）

そういった画面上部に固定されている要素の高さを差し引いた「表示領域いっぱいの高さ」を簡単にセットすることができるようなユーティリティクラスとなっています。

例えば、フロント固定ページの最初に配置するカバーブロックなどに指定すると、画面いっぱいのファーストビューとして使用することができます。

URL Copied!

変更内容の詳細

meta.phpの変更内容

parts.phpの変更内容

u-fullheightについて

`meta.php`の変更内容

`parts.php`の変更内容

`u-fullheight`について