• Get started with WordPress block themes

    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.

  • Describe the tag in the head (set from Appearance – Widget)

    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.

  • Background image/background color settings (set from Appearance – Widget)

    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 .

  • Shortcode (requires plugin FullSite-Patterner-seo)

    Shortcodes can be included in the theme body file, but in WordPress official themes, it is not recommended to include shortcodes and SEO functions in the theme body.

    Therefore, it is prepared separately as a plug-in.

    “FullSite-Patterner” uses shortcodes for breadcrumbs

    Breadcrumbs are realized by breadcrumb.php of plug-in “FullSite-Patterner-seo” .

    We also have a block pattern (breadcrumb-with-plugin) with the following shortcode in advance .

      [myphp file='breadcrumb']    

    Shortcode.php of the plug-in “FullSite-Patterner-seo” reads the PHP file with the shortcode .

    A short code that is convenient for site management is also set

    In shortcode.php , the following shortcodes are also set so that they can be used freely.

    short codeSettingsExample of use
    homeurlSite top page URLhttps://full-site-patterner.com/en/category
    imgurlassets/img directory in theme folderhttps://full-site-patterner.com/en/wp-content/themes/fullsite-patterner /assets/images /image001.jpg
    bloginfo_nameSite (blog) name©FullSite-Patterner – WordPress block theme with full site editing All rights reserved.
  • Template list (1 column, with frame, with background image)

    FullSite-Patterner comes preconfigured with templates for the entire page as rich block patterns.

    The block pattern, which is a template for the entire page, has various sets such as 1 column, 2 columns (left and right sidebars), with or without a frame that wraps the content, with or without a background image, and others.
    (e.g. 1column-frame-backimg, 2-column-r-noframe-noimg)

    Each set includes Front-Page and each template below.
    When inserting a block pattern, select a set such as 1column-frame-backimg, 2-column-r-noframe-noimg, and select Front-Page, Single, Index, Page, Search, 404, etc. , can be replaced.







  • Template block structure common to pages

    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.

  • Template replacement for the entire page (select from block patterns)

    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.

  • How to replace and customize headers and footers

    ” 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.

  • How to set up and use breadcrumbs

    The following php files are involved in displaying breadcrumbs with the plug-in “FullSite-Patterner” .

    shortcode.php places a block of shortcodes at the display location of each page where you want to display breadcrumbs, and loads the php file .

    breadcrumb.php generates and outputs a breadcrumb list with text surrounded by simple p tags .

    shortcode.phpShortcode setting for displaying breadcrumbs 
    breadcrumb.phpPerform processing to display 
    breadcrumbs .

    Generated Breadcrumb

    Title of individual page
    top page (link to URL) > Title of category page, etc. (link to URL) > Title of individual page

    Title of category page
    top page (link to URL) > Title of category page, etc.

    Fixed page, search result page, 404 page, etc.
    Top page title (link to URL) > Page title

    View breadcrumbs

    For breadcrumbs, you need to insert a php file call shortcode on each page where you want it to appear .
    A block pattern (breadcrumb-with-plugin) is also available.

    Insert the block where you want it to appear on the page.

    A blank paragraph is inserted , click the “+” mark on the right and select the block.

    Select the “Shortcode” block from “Blocks” on the left menu and insert it .

    Here is the php program call code .

      [myphp file='breadcrumb']    

    Click the “Save” button in the upper right and refresh the page to see the breadcrumbs.

    Alternatively, if you select and insert a block pattern (breadcrumb-with-plugin) with a shortcode from ” Pattern” on the left menu instead of the “Shortcode” block , you will get the same editing result.

  • Register custom block pattern (Register from Appearance – Widget)

    ” FullSIte-Ptterner ” allows users to register their own block patterns without using plug-ins .

    However, the number of registrations that can be registered is set for each free theme and paid theme .

    Block patterns can be registered in the “Appearance” – “Widget” menu.

    The user’s original pattern registered in the “My block pattern” category is registered as a set of title and code .

    Click the “+” button on the registration screen and insert blocks to create your own pattern.

    As shown in the figure below, you can also select the “Custom HTML” block and register it by writing everything in the html tag code.

    You can also insert headings, images, paragraphs, tables, post titles, latest posts, latest comments and other blocks as shown below .

    Each time you register a user-specific title and user-specific pattern, click the “Update” button at the top right of the screen to save it.

    Registered user-specific patterns are saved in the server database as widget data .

    When using a registered original pattern, it will be displayed in the “My block pattern” category in “Pattern” on the left side menu and can be selected by inserting a block pattern.