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博客教程:从安装到发布,一步步教你如何创建和管理自己的博客。 WordPress博客程序简介 WordPress是一款开源的内容管理系统(CMS),使用PHP语言编写,基于MySQL数据库,它可以帮助用户轻松创建和管理博…

    2024年7月1日
    00
  • WordPress 去掉留言中的网址字段。

    默认情况下,WordPress留言系统允许访客在留言时填写自己的网站地址,但是这个功能经常被一些人利用来发布垃圾留言推广自己的网站,给我们带来很多困扰,在本文中我们来分享下如何去掉WordPress留言中的网站地址 方…

    2022年10月25日
    027
  • 定制自己的WordPress文章编辑界面。

    在Wordpress后台文章编辑界面,为了适应不同类型的网站人群,默认会有许多选项,比如文章形式、特色图、标签等,尤其是安装了一些功能性的插件,会变得更加多。但是有时候这些功能我们平时是用不到的,使用起来会更…

    2022年10月24日 wordpress开发
    033
  • 通过代码实现wordpress静态文件分离到阿里云oss的方法

    我们平时做wordpress网站基本都会做动静分离,把静态文件比如图片、css、js等文件放到对象存储中,这样可以大量节省网站服务器带宽,同时对静态文件做cdn加速来实现网站速度提升。 比如我们的这个网站,在未做动静…

    2024年6月26日 wordpress开发
    010
  • SEOPress设置Twitter分享大缩略图效果。

    在前段时间我们曾向大家介绍过SEOPress这款新的WordPress SEO插件,它非常好的一点就是可以为社交分享生成缩略图,不过在Twitter中默认是采用小型缩略图,看起来不是很漂亮,在本文中我们将教大家怎样在SEOPress中…

    2022年10月25日
    026
  • WordPress设置浏览器缓存方法。

    在使用GTmetrix等测速工具对WordPress网站进行速度检测时,大部分网站都会遇到一个叫做Leverage browser caching问题,影响网站速度评分,其实这个参数就是浏览器缓存的问题,因为我们并没有对这个参数进行优化,在…

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

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

    2022年10月25日 wordpress开发
    033
  • 零基础,小白WordPress建站完整教程。

    假如你是一个菜鸟,也能从0开始,10分钟学会搭建(wordpress,Dede,Discuz!..)网站。 1准备材料 【域名】网址就相当于家的住址,记住和找到家的位置。可在阿里云,新网,爱名网或其它IDC商购买注册。 【空间和数据…

    2022年7月3日 建站资讯
    0758

联系我们

QQ:951076433

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