GeneratePress 文件

generate_logo_title

The generate_logo_title filter allows you to change the ALT tag of your logo.
Default (string): Your Site Title set in Customizer > Site Identity
Examples
add_filter( 'generate_logo_title', 'tu_change_logo_alt' );
function tu_change_logo_alt() {
return 'Your alt title';
}
Usage
Please refer to the Using Filters article to learn how to use this filter.

generate_page_header_parallax_speed

The generate_page_header_parallax_speed filter allows you to adjust the speed at which the page header parallax script moves your background image.
The default speed is 2, and I wouldn』t suggest going much lower than 1.5. The level of effect is dependent on the height of your image, as well.
Usage
add_filter( 'generate_page_header_parallax_speed', 'tu_adjust_page_header_parallax' );
function tu_adjust_page_header_parallax() {
return 2;
}

Merging the Header/Navigation & Content

One option our Page Header add-on has is the ability to merge your header & navigation with your page header content.
This works great if you』re using the Page Header add-on to add content, but doesn』t help if you』re using a page builder like Elementor or Beaver Builder to build your page and need to achieve the same effect.
Luckily, we can still use the Page Header to achieve this look, even without using the content area in the add-on.
Create a Page Header
The first thing we need to do is create a new Page Header. Go to Pages Headers > Add New and give your Page Header a name.
Enabling content options in the Page Header
Even though we』re not using the content area in the Page Header, we still need to enable all of the options that come with adding content. We can do this by adding an HTML comment into the content textarea like this:

Page Header with faux content
Note: Your Content settings should look exactly like the above. The only two things you need to do is add the empty element and set the container type to full width – nothing else.
Setting the container type
Now we want to set the Container type option (shown in the screenshot above) to Full Width.
Merging our header
Now navigate into the Advanced tab, and enable the merging of the header and your content.
Page Header Merged
The key here is the Place content behind header (sliders etc..) option. This is what will place our header on top of our page we』ve built using our favorite page builder.Then of course you can style your site title and navigation to look good with the design of your page.
Now publish your Page Header.
Applying it
Now that we have our Page Header built, we need to apply it to our pages. We can choose between applying it globally to all of our pages, or applying it to single pages.
To apply it to all of our pages globally, go to Pages Headers > Global Locations and use the dropdown next to Pages to choose our newly created Page Header.
Setting a Page Header for all pages
We can also choose to apply it to a single page. We just need to edit that specific page, and choose our Page Header to display.
Apply Page Header to single page

Changing Navigation Colors

The Colors add-on in GP Premium allows you to change the menu item colors in the customizer.
If you don』t have GP Premium, you can tweak the below CSS to your liking:

/* MENU ITEMS */

.main-navigation {

background-color: #222222;

}

.main-navigation .navigation-search input[type="search"],

.main-navigation .navigation-search input[type="search"]:active {

color: #FFFFFF;

background-color: #1e72bd;

}

.main-navigation .navigation-search input[type="search"]:focus {

color: #FFFFFF;

background-color: #1e72bd;

}

.main-navigation .main-nav ul li a,

.main-navigation .menu-toggle {

color: #FFFFFF;

}

/* SUB-NAVIGATION */

.main-navigation .main-nav ul ul li a {

background: #222222;

color: #FFFFFF;

}

/* MENU ITEM HOVER */

.main-navigation .main-nav ul li:hover > a,

.main-navigation .main-nav ul li:focus > a,

.main-navigation .main-nav ul li.sfHover > a {

color: #FFFFFF;

background-color: #1e72bd;

}

/* SUB-NAVIGATION HOVER */

.main-navigation .main-nav ul ul li:hover > a,

.main-navigation .main-nav ul ul li:focus > a,

.main-navigation .main-nav ul ul li.sfHover > a {

color: #FFFFFF;

background-color: #4f4f4f;

}

/* CURRENT ITEMS */

.main-navigation .main-nav ul li[class*="current-menu-"] > a {

color: #FFFFFF;

background-color: #1e72bd;

}

.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a,

.main-navigation .main-nav ul li[class*="current-menu-"]:focus > a,

.main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {

color: #FFFFFF;

background-color: #1e72bd;

}

/* SUB-NAVIGATION CURRENT ITEMS */

.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {

color: #FFFFFF;

background-color: #4f4f4f;

}

.main-navigation .main-nav ul ul li[class*="current-menu-"]:hover > a,

.main-navigation .main-nav ul ul li[class*="current-menu-"]:focus > a,

.main-navigation .main-nav ul ul li[class*="current-menu-"].sfHover > a {

color: #FFFFFF;

background-color: #4f4f4f;

}

view raw

gistfile1.txt

hosted with ❤ by GitHub

Secondary Navigation Widths & Alignment

Secondary navigation layout options can be found in Customize > Layout > Secondary Navigation.
Navigation Width
The Navigation Width option is the outer container of your navigation. This outer container is what your navigation background color or image is applied to.
Setting this to Full will make your background color/image span the entire width of your screen.
Setting it to Contained will contain it to the width of your container, set in Customize > Layout > Container.
Inner Navigation Width
The Inner Navigation Width option refers to the inner container which holds your menu items.
Setting this to Full will make your menu items span the entire width of your screen.
Setting it to Contained will contain your menu items to the width of your container.
Navigation Alignment
You can choose to align your menu items to the left, center or right.

Navigation Widths & Alignment

Navigation layout options for GP can be found in Appearance > Customize > Layout > Primary Navigation.
Navigation Width
The Navigation Width option is the outer container of your navigation. This outer container is what your navigation background color or image is applied to.
Setting this to Full will make your background color/image span the entire width of your screen.
Setting it to Contained will contain it to the width of your container, set in Appearance > Customize > Container.
Inner Navigation Width
The Inner Navigation Width option refers to the inner container which holds your menu items.
Setting this to Full will make your menu items span the entire width of your screen.
Setting it to Contained will contain your menu items to the width of your container.
Navigation Alignment
You can choose to align your menu items to the left, center or right.

Header Widths & Alignment

Header layout options for GP can be found in 「Appearance > Customize > Layout > Header」.
Header Width
The 「Header Width」 option is the outer container of your header. This outer container is what your header background color or image is applied to.
Setting this to 「Full」 will make your background color/image span the entire width of your screen.
Setting it to 「Contained」 will contain it to the width of your container, set in 「Appearance > Customize > Container」.
Inner Header Width
The 「Inner Header Width」 option refers to the inner container which holds the content of your header (site title, logo, widget etc..).
Setting this to 「Full」 will make your header content span the entire width of your screen.
Setting it to 「Contained」 will contain your header content to the width of your container.
Header Alignment
You can choose to align your header content to the left, center or right.

generate_fontawesome_essentials

By default, GeneratePress includes the entire Font Awesome library for you to use.
While this is super useful, it』s a pretty big library.
If you don』t need to use Font Awesome, you can use the generate_fontawesome_essentials filter to make it so only the essential icons for the theme are loaded.
Usage
add_filter( 'generate_fontawesome_essentials', '__return_true' );

Menu Item Height & Width

Note: These options require the Spacing add-on in GP Premium.
We can adjust the width and height of our menu items, as well as the height of our sub-menu items in Customize > Layout > Primary Navigation.
Note that this can be adjusted separately for desktop and mobile by using the toggle buttons.
Menu item size options
 
Width
This option adds the value to the left and right of your menu item item text. 20 = 20px on either side of your text.
Height
This value determines the height of your menu items. 60 = 60px tall.
Sub-Menu Item Height
This value determines the height of your sub-menu items. 10 = 10px on top and bottom of the text.
Sub-Menu Item Width
The sub-menu item width is default at 200px. In some cases you may want to increase the width to keep the text in one line.
Here are a few methods using CSS:
Specify a width:
.main-navigation ul ul {
width: 250px;
}
Auto adjust width to match the longest sub-menu item:
.main-navigation ul ul {
width: auto;
white-space: nowrap;
}
Inherit parent menu item width:
.main-navigation ul ul {
width: 100%;
}

Page Header Content

When no Page Header content is added, only your image (if set) will be displayed on the page.
Once we add content, the image is removed in favor of our content and the page header options will work.
Page Header Content
Automatically add paragraphs
Similar to the option you see in Text widgets, this option will add paragraph tags to your content automatically.
Adding padding
This option will add padding to your page header content. The padding value is taken from your content.
Add background image
Enabling this option will use the image you have set in your Image section (custom image or featured image) and apply it as the background image for your page header area.
Enabling this option will also make the Use background color as overlay and Parallax effect options appear.
Add background image
Use background color as overlay
Requires the Add background image option to be enabled.
Enabling this option will apply the background color you have chosen on top of your background image.
Parallax effect
Requires the Add background image option to be enabled.
Enabling this option will apply a parallax effect (moves as you scroll) to your background image.
Container
Choose whether your page header outer container will be contained or full width.
If you choose full width, the Fullscreen option will be available to you.
Page header container
Inner container
Choose whether your page header inner container will be contained or full width.
Fullscreen
Requires the container type to be set to Full width.
This option will force your page header to take up the entire viewport of your page. If your header is displayed and not merged, the page header will calculate the remaining height below the header and will take up that remaining space.
Vertical center content
Requires the Fullscreen option to be enabled.
This option will align your page header content to the middle of your page header.
Text alignment
Align your page header content to the left, center or right.
Top/bottom & Left/right padding
Set the padding (inner spacing) of your page header element in pixels or percentage.
Colors
Set the background color, text color and link colors for your page header content.