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主题做网站时,经常会需要去掉一些的元素,比如不需要的模块、影响美观的元素等。 如果主题作者已经做了相关功能的话那么还好,将对应的选项关闭即可;但实际情况可能是,很多主题不会将每个模块都…

    2022年10月25日 wordpress开发
    015
  • 如何隐藏WordPress主题或插件的更新提示。

    平常在维护WordPress时,有时候会因为一些错误或者兼容性等问题,我们不能马上升级主题或插件到最新的版本,需要保持旧版本,但是这时候会有一个问题就是每次点开后台都会看到非常显眼的小红点,影响后台体验 在本…

    2022年10月24日
    020
  • WordPress怎样删除特定主题或插件翻译。

    在使用WordPress搭建中文站点时,有时候会发现一些主题或者插件翻译不准确,尤其是后台翻译,有些翻译也并没有太多校对,虽然没有什么大的问题,但是有些词汇对于不熟悉的人来说还是会容易产生一些误导的,在本文中…

    2022年10月25日
    021
  • WordPress修改代码常用的6种方法。

    在使用Wordpress做网站时,难免会遇到需要修改代码的情况,比如添加统计、修改样式等,今天本文为大家介绍下WordPress修改代码常用的6种方法 主题自带的代码功能 在很多主题中都提供了添加样式代码的功能,尤其是付…

    2022年10月25日 wordpress开发
    033
  • WordPress多媒体缩略图设置

    在Wordpress还没有缩略图功能的时候,模板开发的同学,基本都是用代码,直接调用文章第一张图片作为栏目列表缩略图。如果现在旧的模板,还没有更新,应还会保留着这个功能。但这个功能有个缺点就是调用原图作为缩略…

    2019年10月30日
    0361
  • 我来说说php网站如何绑定一级域名到子目录。

    在当今的互联网时代,拥有一个自己的网站已经成为了许多企业和个人的需求,而域名作为网站的标识,也成为了网站的重要组成部分,有时候,我们可能会遇到需要将一级域名绑定到子目录的情况,例如我们希望将www.examp…

    2024年6月29日
    00
  • 查看WordPress主题和插件的4种方法。

    有时候,我们看到一些比较漂亮的Wordpress站点,就想知道它们使用的什么主题,或者插件,但是大部分的网站都会将底部的主题链接去除,那么我们有什么办法能够获取主题呢,其实方法很多,下面就给大家介绍下查看Word…

    2022年10月25日 wordpress开发
    033

联系我们

QQ:951076433

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