WordPress修改古腾堡编辑器默认宽度方法。

对于使用WordPress写博客的人,我们使用最多的就是它的编辑器了,新版的古腾堡编辑器为我们提供了许多特色模块

但是它有一个缺点就是编辑器的宽度并不像经典编辑器那样是全宽的,在很多主题中,后台编辑界面和实际文章页面相比会非常窄,导致前后台排版不一,影响文章的显示效果

在本文中,我们来分享下如何修改古腾堡编辑器的默认宽度

方法一:用插件让古腾堡编辑器变为全宽

如果你希望像经典编辑器那样,使用全宽的模式,可以安装一款叫做 Editor Full Width Gutenberg 的插件,这是一款专门设置古腾堡全宽模式的插件,无选项,安装好即生效

安装后的效果如下图

WordPress修改古腾堡编辑器默认宽度方法。

方法二:代码调整编辑器宽度

有些朋友可能对排版有更高的要求,希望文章保持原本的排版,则可以使用代码来设定古腾堡编辑器的宽度,将其调整为文章页的宽度,使其固定

将下面的代码添加到主题的 functions.php 文件,WordPress修改functions.php教程

function custom_admin_css() {
echo \'<style type=\"text/css\">
/* Main column width */
.wp-block {
    max-width: 720px;
}

/* Width of \"wide\" blocks */
     .wp-block[data-align=\"wide\"] {
     max-width: 1080px;
}

/* Width of \"full-wide\" blocks */
.wp-block[data-align=\"full\"] {
    max-width: none;
}
</style>\';
}
add_action(\'admin_head\', \'custom_admin_css\');

其中第一项720px区域为常规区块的宽度,也是我们主要修改的数值,将其设置为主题文章的实际宽度的像素值即可。第二三项为阔宽和全宽区块的宽度,可按自己的需求进行修改

最后修改的效果如下

网站后台编辑效果

WordPress修改古腾堡编辑器默认宽度方法。

网站前台预览效果

WordPress修改古腾堡编辑器默认宽度方法。

只要你设置相同的像素值,文字几乎都可以对齐,以后编辑时就能看到文章的效果,再也不用担心排版不一致

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/113037.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2022年10月25日 01:33
下一篇 2022年10月25日 01:33

相关推荐

  • 关于博客 域名。

    域名注册好后如何操作 在完成博客的域名注册之后,您需要进行一些关键步骤来确保您的网站正常运行,以下是一些基本的操作步骤。 1. 设置DNS记录 您需要将您的域名解析到您的博客服务器的IP地址,这通常通过修改您的…

    2024年6月14日
    01
  • WordPress修改列表页文章显示数量。

    默认情况下,WordPress会在每个列表页显示10篇文章,很多时候,这个选项是不用修改的 但是有时候我们会遇到一些特殊的情况,比如为了节省性能,我们有时会将每页文章的数量减少;有的时候侧边栏过长的话,则又需要…

    2022年10月25日
    023
  • 为你的WordPress添加图片替换功能 Enable Media Replace。

    在写文章时,我们经常会需要有修改图片的情况,比如上传后发现图片不合适、传错了图片、或者一些过时的图片需要更新,这时候都需要用新的图片替换。但WordPress本身并没有替换功能,想换成新图片,传统的做法是:我…

    2022年10月25日 wordpress开发
    035
  • WordPress添加网站内容复制版权提示。

    在许多网站中,我们会发现如果复制器内容的话,会弹出一个窗口提示转载注明出处,这样就不会有人随意转载,今天就介绍下如何使用一段代码为Wordpress添加复制弹窗提示 首先将如下的代码中copyNoticeString的文字提…

    2022年10月24日
    023
  • WordPress增加安全防护措施以保证站点的安全运行。

    想要一个稳定的WordPress站点,除了要保证网站性能足够外,还要注意的一点就是网站安全,到2019年WordPress已经支撑了全球三分之一的网站,各种黑客针对WordPress的攻击也更加频繁,那么我们要如何保证自己的WordPr…

    2022年10月24日 wordpress开发
    017
  • Elementor设计WordPress网站首页教程。

    当我们使用WordPress制作时,很多人都希望能自己设计网站的首页,比如一些企业、商城类型的网站,一般都需要自己定制首页,在本文我们来教大家如何用Elementor设计网站首页 在教程开始前,请确保你已安装好Elmentor…

    2022年10月25日 wordpress开发
    086
  • WordPress顶部工具栏添加链接方法。

    WordPress的顶部栏是一个非常好的工具,因为它可以显示在网站的前台和后台,尤其对于网站管理者来说,只需要一个点击就能打开顶部栏的链接,非常方便 但是默认情况下,WordPress后台是不能管理顶部栏的链接的,只能…

    2022年10月25日
    025
  • WordPress站内搜索排除指定文章。

    WordPress的站内搜索是一个非常好的工具,可以让访客快速找到自己需要的内容,减少网站的跳出率 不过有时候因为一些原因,我们并不想把某些特定的文章或者页面让访客在网站内搜索到,这个时候就需要将这些文章和页…

    2022年10月25日
    022

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息