Elementor 如何插入麵包屑 breadcrumbs

兩種做法，比較簡單的是使用【Yoast SEO 外掛】，將麵包屑設定打開後就能在 Elementor 的編輯器裏找到 breadcrumbs 元件，直接拉進去想放的位置就可以了。

第二個方法比較麻煩一點，好處是不用被 SEO 外掛綁住，我一直喜歡用專門的麵包屑外掛【Breadcrumb NavXT】

安裝這款外掛後，還需要安裝【Code Snippets】這款外掛來製作短代碼。

在【Code Snippets】中新增 PHP 語法：

add_shortcode('shortcode_breadcrumbs', function () {
	$out = '';

	if (function_exists('bcn_display')) {
		ob_start(); // 開始緩衝輸出
		?>
		<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
			<?php bcn_display(); ?>
		</div>
		<?php
		$out = ob_get_clean(); // 獲取並清除緩衝區的內容
	}

	return $out;
});

使用輸出緩衝函數 ob_start() 和 ob_get_clean()，用來捕獲 bcn_display() 函數的輸出並將其儲存在 $out 中。

新增完成後，就可以使用短代碼[shortcode_breadcrumbs]插入到 Elementor 的頁面想放置的區塊中，就會生成  Breadcrumb NavXT 所產生的麵包屑路徑喽。