跟随旧WordPress视频教程遇文章图片样式失效，寻求解决方案

嘿，我来帮你捋清楚这个WordPress图片的问题！结合你说的情况，咱们分两步来解决：

一、先搞定CSS样式不生效的问题 #

你修改.post-image img没效果，大概率是这几个原因：

• 选择器没匹配对：不同主题的图片类名可能不一样！打开浏览器开发者工具（按F12），选中你的文章图片，看看它实际的父元素类名和自身类名（比如可能是.entry-content img或者.wp-block-image img）。把CSS改成对应正确的选择器，比如：

  .entry-content img {
      height: auto;
      max-width: 100%; /* 一定要加这个，限制图片不超出容器宽度 */
  }
  

• 样式被优先级更高的代码覆盖了：如果确认选择器对，但还是没效果，可以临时加!important测试（尽量少用，找到冲突源后再优化）：

  .post-image img {
      height: auto !important;
      max-width: 100% !important;
  }
  

• 缓存搞的鬼：WordPress缓存插件、浏览器缓存都可能让新样式不生效。按Ctrl+F5强制刷新浏览器，或者暂时关闭缓存插件试试。

二、用add_image_size自定义图片尺寸 #

你提到在functions.php里加了add_image_size但没写完，正确的操作流程是这样的：

1. 完整添加自定义尺寸代码：在主题的functions.php末尾添加（注意别写错语法）：

   // 注册自定义文章图片尺寸
   function my_custom_image_sizes() {
       // 参数：尺寸名称、宽度、高度、是否裁剪（true=硬裁剪，false=按比例缩放）
       add_image_size( 'singlepost-thumb', 1024, 683, false ); 
   }
   add_action( 'after_setup_theme', 'my_custom_image_sizes' );
   

2. 生成旧图片的缩略图：这个函数只对新增的图片生效，之前上传的图片需要用「Regenerate Thumbnails」插件批量生成新尺寸的缩略图。
3. 在模板里调用自定义尺寸：找到主题的文章模板（比如single.php），找到显示图片的代码，把它改成调用你自定义的尺寸：

   the_post_thumbnail( 'singlepost-thumb' );
   

   如果你用的是古腾堡编辑器，插入图片后直接在右侧面板选择「singlepost-thumb」尺寸就行。

额外小提醒 #

• 也可以直接在WordPress后台「设置→媒体」里调整默认的大中小图片尺寸，但自定义尺寸更灵活适配你的需求。
• 如果是主题自带的图片样式，尽量不要直接修改主题的style.css，用子主题的style.css或者自定义CSS面板添加样式，避免主题更新后丢失修改。

内容的提问来源于stack exchange，提问作者F.Corona