在古腾堡全屏模式下替换 WordPress 图标

重要:本文最后更新于2022-10-31 10:01:13,某些文章具有时效性,若有错误或已失效,请在下方留言或联系九月网

首先,让我向你们展示一下 WordPress 图标是什么意思。你可以在屏幕的左上角找到它。

在古腾堡全屏模式下替换 WordPress 图标

你可能会注意到我使用了我的自定义照片,但如果你愿意,你可以使用 SVG 图标。

如果你正在寻找一些挂钩此图标的方法,我现在会让你失望。没有钩子,但你可以使用 CSS 轻松完成。

/* hides the logo */
body.is-fullscreen-mode .edit-post-header a.components-button.has-icon svg{
	display: none;
}
/* adds a custom image */
body.is-fullscreen-mode .edit-post-header a.components-button.has-icon:before{
	background-image: url( 'YOUR IMAGE URL' );
	background-size: cover;
	/* you can the image paddings with the parameters below*/
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
}

还有一件事,以防你不知道在哪里添加 CSS。

它可以很容易地用admin_head钩子插入。

add_action( 'admin_head', 'misha_custom_fullscreeneditor_logo' );

function misha_custom_fullscreeneditor_logo(){

	// it is not a necessary thing but it prevents this CSS to be added on every WordPress admin page
	$screen = get_current_screen();
	if( ! $screen->is_block_editor ) {
		return;
	}

	echo '
	HERE
	';

}

admin_head片段可能会转到你当前或子主题functions.php文件或自定义插件。

body.is-fullscreen-mode .edit-post-header a.components-button.has-icon svg,
body.is-fullscreen-mode .edit-site-navigation-toggle button.components-button.has-icon svg{
	display: none;
}

body.is-fullscreen-mode .edit-post-header a.components-button.has-icon:before,
body.is-fullscreen-mode .edit-site-navigation-toggle button.components-button.has-icon:before{
	background-image: url( 'YOUR IMAGE URL' );
	background-size: cover;
}
在古腾堡全屏模式下替换 WordPress 图标

给TA打赏
共{{data.count}}人
人已打赏
WordPress

WordPress插件配置自定义更新

2022-10-28 0:00:00

WordPress

在 WordPress 后台中创建 Datepicker 字段

2022-11-2 0:00:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索