Breadcrumbs v2: add hierarchy, title, and other options.

[sybrew]

From various requests^*1:

1. Allow the selection of a breadcrumb title type: SEO title or Meta Title. I'll mark all titles that do not follow a default method with "discrepancy."

2. Also, allow to select a breadcrumb hierarchy per request type (post type, date, home, etc.): For example, do not use product categories for a product, but do use categories for a post.

These issues are combined because we'd have to implement a new interface for breadcrumbs specifically. Yet, most people would be happy when allowed to toggle the breadcrumb title type already. So, splitting this issue into two might still happen.

^*1:

1. https://wordpress.org/support/topic/use-wordpress-title-instead-of-seo-title-for-breadcrumbs-option/
2. https://wordpress.org/support/topic/use-hooks-filters-to-optimize-the-display-of-breadcrumbs-shortcode/
3. https://wordpress.org/support/topic/breadcrumbs-155/
4. https://wordpress.org/support/topic/suggestions-for-improving-the-plugin-2/
5. https://wordpress.org/support/topic/remove-shop-base-from-tsf-breadcrumbs/

[sybrew]

Users also requested a custom breadcrumb name field for posts and terms.

[sybrew]

"Should we affect only the structured data JSON or the shortcode?"

I'd vote for having them affected both simultaneously; not independently tweakable.

The breadcrumb hierarchy generation is cached. So, once it's done generating for the structured data, we can reuse that for the breadcrumb shortcode. Repeated use of the shortcode would only regenerate the HTML, not the hierarchy, thus avoiding all expensive (database) requests.

The breadcrumb generation is one of the most expensive things TSF does regarding performance. Doubling its impact isn't welcome.

[datgausaigon]

It's nice to hear you implement this feature. Do you plan to publish this feature anytime soon? Love your work ❤️

[sybrew]

I'm still collecting data and planning this feature, and I have other features to attend to, so please do not hold your breath just yet.

[sybrew]

Another user used the breadcrumb shortcode under the title, which wasn't pretty. Removing the current page's breadcrumb fixed that.

Still, we shouldn't remove the current page crumb from the Schema.org output. This must be sieved out during the shortcode generation.

The user also benefited from adding padding-inline-start: 0 and converting the display to a flexbox. The flexbox output helps to break entire crumbs instead of only words.

[datgausaigon]

My best practice when layout and css is set all element padding, margin to 0. I must css for tsf-breadcrumb

.tsf-breadcrumb > ol {
    padding-left: 0;
}

[datgausaigon]

Hi, I have a custom css for tsf-breadcrumb

.tsf-breadcrumb ol, .tsf-breadcrumb li {
    display: inline-block;
}

[datgausaigon]

Hi @sybrew , I have some idea for this issue. Hope this helps you. We should have this options:

• Hide "Home" in Breadcrumbs
• Hide "Shop" in Breadcrumbs with WooCommerce
• Hide "Post Title" in Breadcrumbs
• Display only Primary Term
• Display Root Term > Primary Term
• Display Root Term > Parent Term(s) > Primary Term
• Use Post Title instead of Meta Title

[sybrew]

A user also requested to remove the current post from the breadcrumb.

To do this visually, please use this CSS:

.tsf-breadcrumb .breadcrumb-item:last-child {
    display: none;
}

.tsf-breadcrumb .breadcrumb-item:nth-last-child(2):after {
    display: none;
}

Alternatively, you can use this filter in PHP to account for custom classes:

add_filter(
	'the_seo_framework_breadcrumb_shortcode_css',
	function ( $css, $class ) {

		$css["nav.$class li:last-child"][] = 'display:none';
		$css["nav.$class li:nth-last-child(2):after"][] = 'display:none';

		return $css;
	},
	10,
	2,
);