Adding Breadcrumbs with GeneratePress and GenerateBlocks Tutorial

This tutorial introduces the use of GeneratePress respond in singing GenerateBlocksThe Block Hook element makes it easy to add breadcrumb navigation to your website and improve page navigation. The example uses the Yoast SEO The plugin's breadcrumb feature, the method applies to other SEO plugins (e.g. Rank Math) by simply replacing the corresponding shortcode.

I. Preparatory work

Make sure that the Yoast SEO plugin is installed and enabled (or another breadcrumb-enabled SEO plugin) and the breadcrumb feature is turned on.

Second, create a new element and add breadcrumbs short code

• Go to the backend "Appearance → Elements" and click "Add New Element".

• Element type selection Hook
• The hook name is set to before_entry_titlei.e. show breadcrumbs before the title of the article

• Add Shortcode Block

• Paste Yoast SEO in shortcut block crumbShort code:[wpseo_breadcrumb] (For other plug-ins, please use the corresponding short code)
• Select the display location to be the All Posts page and click Publish

III. Styling breadcrumbs (optional)

Add a new container block, drag the shortcut block into the container and make sure the container wraps the shortcut block

Adjust the breadcrumb appearance using the container block style:

• Change text color (e.g. blue)
• Modify link color (e.g. pink)

• Set background color (e.g. gray)

• Adjust the inner margin (Padding), it is recommended to standardize it to 5px.

• Add bottom outer margin (Margin) to increase spacing between breadcrumbs and headings

Effect Preview:

Fourth, add breadcrumbs in the page banner (Page Hero)

• Sets the previously created breadcrumb element to draft status

• Open single post page banner element (Single Post Hero)

• Add a shortcut block inside the banner and paste the breadcrumb shortcode
• Move the shortcut block above the title

• Save the update and refresh the page to see the breadcrumbs displayed in the page banner

summarize

utilization GeneratePress respond in singing GenerateBlocks Block Hook function, add thecrumbThe navigation is simple and flexible, and the style can be freely adjusted. Combined with SEO plugin short code, it can realize efficient navigation effect improvement.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off