WordPress block template function - area where Gutenberg block template can be attached [video]

Bottom and Collapse Menu Block Template Create Instance Video Tutorial

The above video tutorial is an example creation tutorial of using wordpress Gutenberg editor to create the bottom block template and navigation pull-down fold menu area from scratch

Please refer to the following graphical tutorial instructions for the mount after creation

WordPress Gutenberg themed block template, independent block template mount

What is the specific use of block templates?

The WordPress block theme contains a block template, which is provided by the WEB theme park.

In the development based on WordPress Gutenberg, the function of freely editable content of Gutenberg editor is the core function of the whole theme, but the area where Gutenberg editor can edit is limited to articles and pages, and other places cannot use this function.

For example, the category directory and the bottom are traditional lists and bottom presets in classic WordPress themes. They are both structures created by the theme author to replace text, picture list modes, etc. They are relatively fixed and cannot add new typography according to their own needs.

Therefore, we have developed the function of customizing article types based on WordPress and launched the block template function, so that more regions can be mounted using Gutenberg editor.

The following are the operation steps.

First, you need to create a WordPress Gutenberg block template and a way to import block templates

Block templates are the same as creating ordinary pages,

However, it should be noted that, unlike ordinary page integrity, block templates generally create content in an area Therefore, you should be careful not to create in the normal page complete mode.

Enter the block template and you can see the following figure. You can view all and create new block templates:

The editing of block templates is the same as that of ordinary pages and articles, but the blocks created here are only mounted in an area, such as the bottom block template:

As can be seen from the figure above, we use this block template to create an area. If you have seen the demo, this area is mounted at the bottom, so we only need to create which part at the bottom.

We can also provide separate import of block templates. You can download the import file of the block template, and then import it from the default import tool of WordPress.

After importing, you can see that these block templates are displayed in your background.

The block template can be imported separately or through reusable blocks:

After importing, you need to create a new block template, and then insert the reusable block into the block for editing and saving. Both methods are very fast.

be careful:

Import from WordPress tool. Generally, we provide multiple block template collection import

Import from reusable blocks is a single block import

Here you can select the import method according to your own needs.

Attach the block template to the bottom of the web page

The bottom of the page is now a block template edited by Gutenberg editor in the block theme of the WEB theme park, instead of the fixed preset.

The mounting method is set in the background of your website: appearance – customization – bottom of the website:

Enter the bottom setting and select:

The bottom is attached to the block template.

Mount the block template to the top of the category directory

A classified directory is a list of articles. We can use a classified directory to create product lists, news lists, download lists, case article lists, video lists, and so on. Generally speaking, a classified directory is an ordinary list. Generally, a list is a fixed mode selection, and there cannot be too much content that can be customized.

Therefore, the block template we developed can be attached to the top of the classified directory list, which can greatly enrich the list presentation and realize some functions that were previously unattainable.

Taking the news block as an example, we attach a slide and a hot news at the top:

In this way, we can attach the content that needs to be displayed to customers to the top. The setting method is as follows:

Enter the article category directory and find the category of the news center for editing:

We can see the settings in the above figure. In the top mount area, we attach the news top template. The news top template calls a list of articles, which is also the content of the news center, and only the top articles are displayed.

In order to make the top mounted articles not duplicate the list articles in the normal classified directory, we checked the "Exclude top articles" option, so that the articles displayed in the top block of the news will not be displayed in the normal list again.

The level of the template attached to the classification directory is: current settings for classification>parent classification>default settings

In other words, the subcategories under this directory will inherit the settings of the parent classification by default, so we only need to set the parent once.

If there are two subcategories of company news and industry news under the news center, we only need to set the parent of the news center, and the two subcategories will automatically be the same as the parent of the news center, without repeated settings.

The default settings are in Topic Options Classification and Filtering. You can set the overall default mount template and other options. If neither parent nor subset is set, the default settings will be used.

In addition, the following are the product center mounts:

As you can see, the product center has attached a slide and icon block to select product categories, which is also the requirement of many customers for product classification before, and can now be easily realized.

Attach the block template to the navigation menu

The navigation menu we developed before has a large folding menu, which is very important for the users with too many products. We can directly display the product classification level in the menu.

However, in general, only one folding menu is allowed. In addition, because of the fixed characteristics of the menu, we have developed a block template that can be attached to the navigation menu. Now each navigation item can attach a block template, as shown below:

As shown in the above figure, the block template is attached to the navigation submenu and displayed in the drop-down menu. You can make any layout without being restricted by the previous menu frame.

Attaching the block template to the navigation menu is also very simple:

The block template we developed supports direct display in the menu, so you can attach the block template to the navigation just like other content,

Block templates support mounting to Layer 2 and Layer 3. Mounting to Layer 3 will implement a drop-down switch menu. Please refer to this tutorial for specific use: Wordpress navigation drop-down switch multiple content - use of block template

Mount the block template to the top of the article

The block template can also be attached at the top of the article. For example, we attach the product classification and slide to the top of the product details:

The way to mount is in the article editor:

The function of the global default mount template here is in the topic options - classification and filtering: select the options of ordinary articles and the block template attached at the top of the page. After selection, articles and pages in ordinary mode will display the attached block template by default. You can choose to force unmount in some places you do not want to display.

Attach the block template to the gadget sidebar

The block template can also be attached to the sidebar gadget in the two column mode, with the following effects:

The form block in the red box is output using a gadget

The widget can easily output the created block template to the sidebar by selecting the block template.

The above is the region and method that can be attached to the output block template. With this method, you can create a very rich layout into some previously relatively fixed regions.