Lightningテーマのカスタマイズ

2026-01-12 2026-01-12

yasuhiro

Lightningテーマを更にカスタマイズ。プラグイン「VK All in One Expansion Unit」「SearchWP Modal Search Form」を追加。参考サイトの情報を基に子テーマを作成し，functions.phpに関数を書き足して，パンくずリストの表記を変更。ページトップへ戻るボタンも，追加CSSからデザイン変更。

子テーマのfunctions.php

// パンくずリストの先頭のアイコン・表記を変更
function my_vk_breadcrumb_array( $breadcrumb_array ) {
    $breadcrumb_array[0]['icon'] = 'fa-solid fa-location-dot';
    $breadcrumb_array[0]['name'] = 'Blog Home';
    return $breadcrumb_array;
}
add_filter( 'vk_breadcrumb_array', 'my_vk_breadcrumb_array' );

// パンくずリストの先頭のアイコン・表記を変更
function my_vk_breadcrumb_array( $breadcrumb_array ) {
    $breadcrumb_array[0]['icon'] = 'fa-solid fa-location-dot';
    $breadcrumb_array[0]['name'] = 'Blog Home';
    return $breadcrumb_array;
}
add_filter( 'vk_breadcrumb_array', 'my_vk_breadcrumb_array' );

追加CSS

/* ページトップへ戻るボタンのデザイン */
.page_top_btn {
	right: 20px;
	bottom: 20px;
	width: 60px;
	height: 60px;

	background-color: var(--vk-color-primary);
	box-shadow: none;
	border-radius: 50%;

	/* スマホ対策：タップ時のハイライト除去 */
	-webkit-tap-highlight-color: transparent;
}

/* ページトップへ戻るボタンのデザイン */
.page_top_btn {
	right: 20px;
	bottom: 20px;
	width: 60px;
	height: 60px;

	background-color: var(--vk-color-primary);
	box-shadow: none;
	border-radius: 50%;

	/* スマホ対策：タップ時のハイライト除去 */
	-webkit-tap-highlight-color: transparent;
}