在 wordpress 中显示自定义图像大小

Question

在functions.php我有，

function university_features() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_image_size('professorLandscape', 400, 260, true);
add_image_size('professorPortrait', 480, 650, true);
add_image_size('pageBanner', 1500, 350, true);
}
add_action('after_setup_theme', 'university_features');

在 single-professor.php 中，我有：

<div class="one-third">
    <?php the_post_thumbnail('professorPotrait'); ?>
 </div>

但图像大小不会改变。 但是，如果我把默认大小的“缩略图”或任何其他这样的：

    <div class="one-third">
      <?php the_post_thumbnail('thumbnail'); ?>
    </div>

有用。 可能是什么问题？ 我正在本地主机上工作。

Answer 1

我检查了您的代码，似乎一切正常。 我认为您在设置新的图像尺寸后没有重新生成这些图像。 您可以尝试上传新图片并检查； 确保您上传了超过480px X 650px的大尺寸以进行检查，因为如果您上传的图片大于该尺寸，WordPress 会裁剪图像。 对于您已经在管理面板中上传的现有图像，您可以使用第三方插件，如“重新生成缩略图”，我已经检查过 这个插件，如果你愿意，你可以试试这个。 希望它会奏效。

Answer 2

尝试在管理面板中编辑默认图像大小

而不是添加了 post_thumbnail 自定义类。

使用默认的并在 wordpress 管理面板中编辑它们

wordpress 图片的默认值是

• 缩略图大小（150 x 150 像素）

• 中等尺寸（最大 300 x 300 像素）

• 大尺寸（最大 1024 x 1024 像素）

• 全尺寸（上传图片的原始尺寸）

根据https://enginescout.com.au/wordpress-image-sizes/

    <div class="one-third">
        <?php the_post_thumbnail('medium'); ?>
     </div>

1. 转到您的 WordPress 仪表板并登录。
2. 在设置菜单中选择媒体。 在媒体设置中更改宽度和高度尺寸以满足您的需要。
3. 单击保存更改以确认您的更改。

通过视觉作曲家查看此示例https://visualcomposer.com/blog/wordpress-image-sizes-guide/#sharing-wordpress-default-image-sizes

另一种可能的解决方案是您可以为帖子本身添加一个蒙版，这样图像本身将被锁定到蒙版的某个宽度和高度，例如 100vh 和 100vw

查看 Material Design bootstrap5 中的示例，您可以通过在主题中使用它们的样式来应用相同的东西，或者重新创建另一个类似的东西https://mdbootstrap.com/docs/standard/content-styles/masks/

代码示例

<div class="bg-image">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
  <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>