HOW TO USE

Information about WordPress block themes is still scarce in Japan, and block themes are not very popular in Japan, so it may take some time to get used to using them.

For information on how to operate block themes in general, it is a good idea to start by referring to the official Japanese website, books, and information on the Internet.

In the production of “FullSite-Patterner“, I had to redo many unfamiliar tasks at first.
The following points are especially important.

Customizing the template in the editor changes the appearance of the site, but that alone does not actually change the template.

Template changes are saved in the server’s database.
Downloading via FTP thinking that the template has been updated does not back it up.

Here are some ways to get your site changes reflected in your template updates:

Export the template from the editor screen

“Export” is a template download menu that reflects your updates.
However, an error may occur depending on the server environment.

Here are some other methods:

Copy the code to “Theme File Editor”

Display the updated template or template part in the code editor from the “Appearance” – “Editor” menu, and copy the entire code.

Select the updated template or template part from the “Tools” – “Theme File Editor” menu to display the code.

Paste the copied modified code into the template or template part displayed by selecting the “Tools” – “Theme File Editor” menu , and replace the entire contents.

Click the ” Update File ” button to save.

The updated file can also be used as a backup if downloaded via FTP.

Export the updated file using the plugin “Create Block Theme”

When you install the official WordPress plugin “Create Block Theme” , the “Create Block Theme” menu will appear in the “Appearance” menu.

The ” Export ” menu is a template download menu that reflects the updates.
However, an error may occur depending on the server environment.

When creating an original theme, “Create Block Theme” is almost essential.

Select the official WordPress plugin “Create Block Theme” from the “Appearance” menu .

If you click the “Overwrite” menu for the theme , the file updates stored in the database will be overwritten in the template or template parts, and the database will be erased.

In the block theme, unlike the classic theme, the template is not a php file, and the template in the html file has no code in the head.

Since the code in the head is generated by the WordPress system, it is possible to add code in the head using functions.php or plugins.

However, it is difficult to write and operate these files, and there is a risk of failure.

In ” FullSite-Patterner “, the menu for inserting code such as script tag, search engine access analysis, etc. in the head is prepared as follows.

Go to “Appearance” – “Widgets” , insert the “Custom HTML” block in the ” head tag ” item , and paste the code there

In addition to code such as script tags and search engine access analysis, you can also write css styles .

Codes such as tags specified in the widget are inserted in “functions/head-style.php” in the theme folder and inserted in the head of the page.

View the site in your browser and check the page source to see if it was inserted successfully.

Block themes can be customized by specifying the background color of elements such as groups (divs) on the editor screen.

Elements can specify text color, border color, style, etc.

However, it is not possible to specify a background image for the entire site.

There are several ways to achieve this, but in ” FullSite-Patterner “, we have prepared some style setting menus such as specifying the background image of the site as follows.

Upload the image you want to use as the background image, go to “Appearance” – “Widget” , insert the “Custom HTML” block in the “Background image” item , and paste the URL of the image there .

You can specify the background image of the part immediately after the header of the site.

The image URL specified in the widget is inserted in “functions/head-style.php” in the theme folder and inserted in the head of the page.

After filling it out , click the ” Update ” button and the logo will be displayed on the site, so let’s check it.

The data saved in “Appearance” – ” Widgets “ will be saved in the database of the server .

To back up, you need a plugin. The plug-in “Widget Importer & Exporter” is recommended for exporting
and importing widgets .

In addition, ” FullSite-Patterner ” provides a default set of templates, a large number of full-page templates, headers, footers, and block patterns for other parts.
Even if you customize and change the template or template parts, you can restore it from the block pattern at any time.

One of the biggest features of “FullSitePatterner” is that it has a block pattern that can replace the entire page .

Multiple block patterns are provided as template sets (FrontPage,
Single, Index, Page, Search, 404) for various site layouts and designs .

By default, the template set is 1 column, with frame, and with background image (1column-frame-backimg) .

This section explains how to replace the entire page with another layout or design.

The above is the operation to replace the default setting of 1 column, with frame, with background image (1column-frame-backimg) to 2 columns, with left sidebar, with frame, without background image (FrontPage-2column-L-frame-noimg). to hold.

From the “Appearance” – “Editor” menu , open the template you want to change.
Here it is the ” front page “.

Click the “List display” icon (three horizontal lines) on the upper left to display the list for easier understanding.

The entire page is a “group” block , and it is locked to prevent movement to prevent display collapse .
But it can be deleted .

Click the three vertical dots to display the menu for operating the block, and there is a “Delete” menu at the bottom .

It is also possible to insert the replacement block pattern after deleting it first .

On the other hand, if you want to put it in the same hierarchy, insert it first and then delete the block before replacement .

Here, we removed the entire page block earlier. Now there is only an
empty paragraph .

To insert a block pattern into an empty paragraph, click the “+” mark on the right side of the paragraph on the main screen.

You can search for the block pattern to be inserted on the screen below, but if you click the ” Show All ” button for the blocks and patterns, the “Block” and “Pattern” menus will be displayed on the left.

Page-wide block patterns, theme-specific headers, footers, and other parts can be found under Patterns .

Patterns are categorized by categories such as “header” and “button”.

The entire page is classified as a template set for each layout and design, so that one template set will be in one category.

Select 2 columns, left sidebar, framed, or no background image ( FrontPage-2column-L-frame-noimg ) from the dropdown menu .

Full page thumbnails are displayed for each page, such as FrontPage, Single, and Index.

Beneath the thumbnail, you’ll see a block pattern label beginning with the page type .
The image above is ” FrontPage-2column-L-frame-noimg “.

In the selected state, it is displayed surrounded by a blue line as shown in the image above.

When clicked, the block pattern will be inserted in the location selected with the “+” button earlier.

Click the “Save” button at the top right of the editor screen to insert the block pattern for the entire page and save the replaced template.

When you display the site and check it, it has been changed to 2 columns, left sidebar, frame, and no background image (FrontPage-2column-L-frame-noimg).

To replace the entire site, do the same for each FrontPage, Single, Index page.

” FullSitePatterner ” provides various block patterns such as headers, footers, buttons and boxes .

Here, we will explain how to replace the header from the theme-specific default setting (header-navbar) to the WordPress default navigation (header-WP-navigation: design is customized) .

Open the page with the header you want to change from the Appearance – Editor menu .
Here it is the ” front page “.

Since it is related to the structure and design of the page, it is better to insert it first and then delete the block before replacement when inserting it in the same hierarchy as before replacement so that mistakes such as display collapse do not occur . I think.

Here, the header after replacement is inserted before the header before replacement .
Since the header before replacement will be deleted eventually, it does not matter whether it is before or after .

When you add a block, an empty paragraph is displayed, and to insert the block pattern here, click the “+” mark on the right side of the paragraph.

You can search for the header to be inserted on the screen above, but if you click the ” Show All ” button for blocks and patterns, the “Blocks” and “Patterns” menu will be displayed on the left.

Theme-specific headers, footers, and other parts can be found under Patterns .
Patterns are categorized by categories such as “header” and “button”.

Select a header category from the drop-down menu and click the thumbnail-displayed header after replacement to insert the block pattern in the location selected with the “+” button earlier .

There is also a header before replacement , so the header is duplicated.

Delete the header before replacement.
To avoid display collapse, it is locked to prohibit movement , but it can be deleted .

Click the three vertical dots to display the menu for operating the block, and there is a “Delete” menu at the bottom .

After deleting the header before replacement, the replacement of the header is completed as shown below.

Click the “Save” button at the top right of the editor screen to insert the block pattern for the entire page and save the replaced template.

View the site and check, the header has changed.
Although it is difficult to understand in the screen below, the hamburger menu displayed on smartphones is particularly different.