GeneratePress 文档

Block Element – Content Template

Starting in GP Premium 2.0, you can create a Content Template in the Block Element module with the help of Dynamic Blocks and Dynamic Data.

You can access it by creating a new block element, then select Content Template under the Element type dropdown menu:

Settings

Templates

Import a template.

Tag name

Select the tag names to apply to the content template.

Apply to

Set the condition which the content template is applied to.

Keep default post container

Keep the default post container so that styles such as content padding set in the customizer would apply.

GenerateBlocks Container Settings

Inline post meta items

Inline the items inside this container. This is useful when adding dynamic data items such as author, post date, categories etc.

Inline alignment

Set the alignment of the inline post meta items.

Block Element – Page Hero

Starting in GP Premium 2.0, you can create a page hero in the Block Element module with the help of Dynamic Blocks and Dynamic Data.

You can access it by creating a new block element, then select Page Hero under the Element type dropdown menu:

Settings

Templates

Import a template.

Quick hook select

Select one of the three common hooks to insert the page hero.

Hook name

Select other hooks that are not listed under quick hook select.

Priority

Set the priority of the page hero. This is useful when there are multiple elements added within the same hook.

Disable title

Remove the default page/post title. This is useful if a title is added using the dynamic data.

Disable featured image

Remove the default featured image on pages/posts with this page hero. This is useful if the featured image is added using the dynamic image block or as a dynamic background image.

Disable primary post meta

Remove the default post meta on pages/posts with this page hero. This is useful if the post meta is added using the dynamic data.

Background image

Set a static background image for the page hero.

GenerateBlocks Container Settings

Inline post meta items

Inline the items inside this container. This is useful when adding dynamic data items such as author, post date, categories etc.

Inline alignment

Set the alignment of the inline post meta items.

Dynamic Blocks

Starting in GP Premium 2.0, there are two dynamic blocks that are available in the Block Elements module.

You can access them by searching keyword GP in the Add Block menu:

Dynamic Image

The GP Dynamic Image block allows you to add a featured image or an author avatar to the Block Elements.

Featured Image

This option outputs the featured image of the chosen condition.

Type

Set the GP dynamic image block type.

Source

Set the source of the featured image. The Next post and Previous post options are main used for the Post Navigation templates.

Image size

Set the size of the featured image. The sizes are defined in the Media settings section of WordPress.

Image width

Set the width of the image in pixel.

Image height

Set the height of the image in pixel.

Link to

Add a link for the dynamic featured image.

Author Avatar

This option outputs the author avatar.

Type

Set the GP dynamic image block type.

Image Size

Set the height and width of the author avatar.

Make image rounded

Make the author avatar into a circular shape.

Dynamic Content

The GP Dynamic Content block allows you to add post content, post excerpt, term description and author description to Block Elements.

Post Content

This option outputs the entire post content.

Post Excerpt

This option outputs the excerpt of the post with excerpt length field.

Term Description

This option outputs term description like category or tag description.

Author Description

This option outputs author description.

generate_mobile_header_logo_output

Note: This filter requires the Menu Plus add-on in GP Premium.

The generate_mobile_header_logo_output filter allows us to alter the HTML of our mobile header logo.

Avoid Lazy Loading

If we want a caching plugin like WPRocket not to lazy load the mobile header logo with a filter, this PHP snippet is required:

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
return $output;
}

$settings = wp_parse_args(
get_option( 'generate_menu_plus_settings', array() ),
generate_menu_plus_get_defaults()
);

return sprintf(
'

',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
);
} );

Setting a Width and Height

If want want to set a specific width and height in the logo HTML output:

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
return $output;
}

$settings = wp_parse_args(
get_option( 'generate_menu_plus_settings', array() ),
generate_menu_plus_get_defaults()
);

return sprintf(
'

',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
);
} );

generate_logo_output

The generate_logo_output filter allows us to alter the HTML of our logo.

Setting a Width and Height

If want want to set a specific width and height in the logo HTML output:

add_filter( 'generate_logo_output','tu_logo_atts', 10, 2 );
function tu_logo_atts( $output, $logo ) {
printf(
'

',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
esc_url( apply_filters( 'generate_logo', $logo ) )
);
}

Adding a New Class

If we want to add a new class to our logo container:

add_filter( 'generate_logo_output', 'tu_logo_class', 10, 3 );
function tu_logo_class( $output, $logo_url, $html_attr ) {
printf(
'

',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
$html_attr
);
}

Open a New Window

If we want our logo to open in a new window:

add_filter( 'generate_logo_output', 'tu_logo_target', 10, 3 );
function tu_logo_target( $output, $logo_url, $html_attr ) {
printf(
'

',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
$html_attr
);
}

Remove the Logo Link

If we don』t want a link surrounding our logo:

add_filter( 'generate_logo_output', 'tu_no_logo_link', 10, 3 );
function tu_no_logo_link( $output, $logo_url, $html_attr ) {
printf(
'

',
$html_attr
);
}

Configuring Autoptimize

Reducing the amount of CSS and JS files being loaded on each page load will make a huge difference to your page speed.

Another perk with Autoptimize is it will bundle the CSS generated by your options in the Customizer into an external file, allowing your browser to cache it.

We suggest selecting these options:

Javascript Options

CSS Options

HTML Options

Extra Options

Removing Emojis

If you don』t use emojis on your site, then there』s really no point in loading the scripts for them.

Autoptimize also has an option for this, which you can find in the Extra tab within their settings. Check the box next to Remove emojis, and you』re good to go!

Removing Query Strings

While this won』t make a noticeable difference in your page speed, it will increase your ranking in speed tests.

One issue with this is it removes the version numbers from your static resources, like CSS and JS files. Those version numbers are there to tell browsers to stop caching the file if the version is updated.

Without the version numbers, browsers won』t release the cache when you update your theme or plugins, which can result in some weirdness until the cache is cleared.

If you』d like to remove query strings, you can use the same Autoptimize plugin we featured above. Click on the Extra tab within the Autoptimize settings, and check the Remove query strings from static resources checkbox.

generate_after_mobile_menu_button

The generate_after_mobile_menu_button hook appears right after the menu-toggle element.

Usage

Please refer to the Using Hooks article to learn how to use this hook.

AMP Compatibility

If you』re looking to use GeneratePress with the official WordPress AMP plugin, you』ll want to install our simple AMP + GeneratePress companion plugin to ensure full compatibility.

Download AMP + GeneratePress

To install this plugin, save the .zip file to your computer and upload it inside your Dashboard in the 「Plugins > Add New > Upload」 area.

This is a feature plugin, meaning it will eventually find it』s way into the theme once it』s stable and we』re confident that AMP is sticking around long-term.

Centering Your Logo In the Navigation

Centering the logo with menu items on both side is super easy with GeneratePress.

First, make sure you are using the Flexbox structure of the theme. This can be checked in Customizer > General.

Then you can either set the navigation location option to float left/right or use the navigation as a header option.

Next, add the CSS here:

@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}

#site-navigation {
margin-left: unset !important;
display: flex;
}

.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}

#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}

/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}
}

generate_menu_bar_items

The generate_menu_bar_items hook allows you to hook non-menu item elements such as buttons, icons and whatever else your design requires. Content added there will automatically display in the navigation and mobile header.

Using a Hook Element

If you have GP Premium, you can use a hook element and add the content like this:

Your icon HTML

Using a Function

If you are using the free GeneratePress theme, you can use the PHP snippet method:

add_action( 'generate_menu_bar_items', function() {
?>

Your icon HTML

<?php
} );