1. PARK博客首页
  2. Google SEO教程

WP中没有阔宽和全宽的选项怎么办?古腾堡编辑器指南

在默认情况下,WP的古腾堡编辑器是支持阔宽和全款功能的。但是由于部分模板会有限制,所以会出现没有阔宽和全宽的选项的选项。

今天就给大家来解决这个问题。

阔宽和全宽是什么?

  • 阔宽:指的是沾满父级容器的整个宽度。举个例子,比如你的网站主体部分有设置过固定宽度(比如1200像素)那么,图片选择阔宽模式,就会占满整个1200像素的宽度。
  • 全宽:指的是区块(比如图片、文字等)占满整个窗口屏幕的宽度。它不会收到模板宽度的限制,是更具浏览器窗口大小来决定的。

如何让WP显示阔宽和全宽按钮?

这个需要你修改你的功能文件(functions.php):

进入WP后台 > 外观 > 主题编辑器 > 左侧找到 functions.php文件

在最底下添加这样一段代码:

/**
 * Add Theme Support for wide and full-width images.
 *
 * Add this to your theme's functions.php, or wherever else 
 * you are adding your add_theme_support() functions.
 * 
 * @action after_setup_theme
 */
function jr3_theme_setup() {
     add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'jr3_theme_setup' );

加入之后,点击保存。再次回到编辑页面,刷新后就可以看到每个区块都有了阔宽和全宽的功能。

使用了全宽和阔宽功能后页面没有变化怎么办?

这就说明你的模板主题对阔宽和全宽是没有进行过定义、或者是定义过但是产生了CSS样式冲突。你需要自定义CSS才可以。

你可以在自己的Style.css文件中,或者是自己的主题管理添加自定义css的区域加入如下样式代码:

.alignwide {
  /* Set these margins to work with your own theme. */
  margin-left: -80px;
  margin-right: -80px;
  max-width: 100vw;
}

.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 100vw;
}

.alignfull img {
  width: 100vw;
}

之后,并且在需要全宽和阔宽的区块中加入额外的CSS类就可以:

WP中没有阔宽和全宽的选项怎么办?古腾堡编辑器指南

现在你学会了吗?

更多关于Wordpress的知识,推荐阅读:

原创文章,作者:Park 专注谷歌SEO,如若转载,请注明出处:https://park.mobayke.com/tools/wide-full-wp.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

分享本页
返回顶部