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

相关推荐

  • WordPress建立数据库连接时出错解决方法。

    在使用WordPress建站时,有时候站点会遇到”建立数据库连接时出错“的报错,整个站点都无法正常访问,如何修复这个错误呢?本文中来分享几个解决方法 方法一:重启数据库 如果你是正常使用网站,在没有进行任何风险操…

    2022年10月25日 wordpress开发
    039
  • 在wordpress网站优化过程中的robots.txt爬虫协议。

    爬虫协议Robots.txt是在网站上找到的第一个文件搜索蜘蛛。它告诉搜索引擎可以抓取哪些页面以及哪些页面无法抓取。 当我们在我们的网站上有错误页面时,或者某些页面不希望蜘蛛抓取时,合理配置的机器人协议可以使蜘…

    2022年6月28日
    0147
  • WordPress禁止通过邮件重置密码方法。

    如果你忘记了自己的管理员密码,最简单的重置方法就是在WordPress登陆界面点击忘记密码,通过发送邮件的方法重置,不过便利的同时也会带来一些弊端,比如恶意点击重置,导致收到骚扰邮件,甚至通过邮件来获取后台,…

    2022年10月25日
    027
  • wordpress自定义字段(1):什么是自定义字段?

    在本文开篇前,我们得首先了解一个概念——wordpress自定义字段。那么,什么是wordpress自定义字段?wordpress自定义字段,就是额外给wordpress文章添加的一个元素,如:产品价格。wordpress自定义字段存放在数据库的…

    2019年10月12日
    0671
  • WordPress为旧文章批量设置特色图。

    文章特色图片是WordPress中非常重要的一个特性,好的特色图能够让网站更加美观,不过一些WordPress用户在刚刚接触时并没有用到特色图像,等到后期想要调整,发现已经有很多文章没有设置特色图了,再一个个添加将是…

    2022年10月25日
    028
  • WordPress禁用头像功能。

    在Wordpress中,默认会开启头像功能,用户可以自定义头像,但是有些情况下我们不需要头像功能,而且在国内的站点,还会拖慢网站的加载速度,这时候我们就可以从wordpress后台禁用头像功能。 打开仪表盘 – 设…

    2022年10月25日
    018
  • WordPress怎样添加站点地图(Sitemap)。

    为了能让搜索引擎更快地收录网站内容,通常我们都会制作网站地图,让爬虫能够更轻松地抓取到网站的最新文章,在本文中我们来分享如何为你的WordPress站点添加站点地图 什么是站点地图 简单来说,站点地图就是一个xm…

    2022年10月25日 wordpress开发
    028
  • 用phpmyadmin从数据库修改WordPress主题。

    使用过Wordpress的朋友都知道,在仪表盘修改主题是非常简单,基本上一键切换,但是有时候会因为主题的错误造成网站后台无法访问,这个时候想要切换主题就要通过其他方法了,今天就介绍下如何使用phpmyadmin数据库修…

    2022年10月25日
    029

联系我们

QQ:951076433

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