最新公告
  • 欢迎您光临青柠网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • WordPress修改古腾堡编辑器默认宽度方法

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

    正文概述 Supreme   2020-07-28   20

    对于使用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修改古腾堡编辑器默认宽度方法

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

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.qn158.com",如遇到无法解压的请联系管理员!
    8.有关本站的所有问题最终解释权归网站主办方所有!

    青柠素材资源网 » WordPress修改古腾堡编辑器默认宽度方法
    • 17会员总数(位)
    • 10167资源总数(个)
    • 1722本周发布(个)
    • 0 今日发布(个)
    • 134稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情