Lightning のパンくずの HOME の文字を 外観カスタマイズ から変更出来るようにする方法

,

Lightning テーマのパンくずの HOME の文字を 外観カスタマイズ から変更出来るようにする方法です。お客様からのご要望で、ご自身で管理画面から変更したいとのことだったので、サクッとやってみました!

functions.php に追記する内容

子テーマの functions.php にフィルターフックを追加します。

add_filter(
	'vk_breadcrumb_array',
	function( $breadcrumb_array ) {
		$breadcrumb_array[0]['name'] = "ここに外観カスタマイズで設定した値を反映する";
		return $breadcrumb_array;
	}
);

全体としては以下の通りです。

/*-------------------------------------------*/
/* パンくずのHOME部分を書き換える
/*-------------------------------------------*/
function add_breadcrumb_customizer( $wp_customize ) {
	$wp_customize -> add_section( 
		'custom_breadcrumb', 
		array(
			'title' => 'パンくずHOME文字変更',
			'priority' => 9999,
		)
	);
	
	// パンくずHOME文字変更設定
	$wp_customize -> add_setting( 
		'breadcrumb_text', 
		array(
			'default' => 'HOME',
			'transport' => 'refresh'
		)
	);
	$wp_customize -> add_control( 
		'breadcrumb_text', 
		array(
			'section' => 'custom_breadcrumb',
			'settings' => 'breadcrumb_text',
			'label' => 'パンくずHOME文字',
			'type' => 'text',
			'priority' => 1,
		)
	);
}
add_action( 'customize_register', 'add_breadcrumb_customizer' );

// Lightning のパンくずHOMEの文字変更
add_filter(
	'vk_breadcrumb_array',
	function( $breadcrumb_array ) {
		$breadcrumb_array[0]['name'] = get_theme_mod( 'breadcrumb_text', 'HOME' );
		return $breadcrumb_array;
	}
);

完成するとこんな感じです。

Lightning テーマのパンくずの HOME の文字を 外観カスタマイズ から変更出来るようにする方法です。

文字ではなく、家のマークを変える場合は、$breadcrumb_array[0][‘icon’] に Font Awesome で調べた値を入力すれば変更出来ます。参考までに(^_^)

自己紹介

松田 大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です