求助：如何在WordPress Elementor中自定义添加元素（RealHomes主题）

核心原因 #

你遇到的编辑选项受限问题，是因为目标小部件是RealHomes主题专属定制的Elementor小部件，而非Elementor原生组件，默认编辑权限有限，且直接修改主题源文件会导致更新后修改丢失。以下是几种安全可行的解决方法：

方法1：用Elementor原生组件组合替代（最快实现） #

如果无需修改原小部件内部结构，仅需添加额外元素：

• 使用Elementor的Inner Section小部件，将原RealHomes小部件与你需要的Image/Text/HTML小部件放在同一区块的不同列中，调整列宽、间距和样式，保证视觉统一。
• 若要在原小部件内部插入内容，可在原小部件的上方/下方添加自定义HTML小部件，通过CSS调整位置（比如用position: absolute定位到目标区域）。

方法2：自定义CSS/JS快速添加轻量元素 #

适合添加图标、短文本这类简单内容：

1. CSS添加图标/文本
   选中目标小部件，在Advanced > Custom CSS中插入代码（替换your-widget-class为小部件实际CSS类，可通过浏览器开发者工具查看）：

   /* 在指定元素后添加文本 */
   .your-widget-class .inner-element::after {
     content: "自定义文本";
     color: #333;
     margin-left: 10px;
   }
   /* 在小部件前添加图片 */
   .your-widget-class::before {
     content: url("你的图片地址");
     display: inline-block;
     width: 20px;
     height: 20px;
     margin-right: 8px;
   }
   

2. JS添加动态内容
   进入外观 > 自定义 > 额外JS，插入代码：

   // 在小部件末尾追加自定义内容
   document.querySelector('.your-widget-class').insertAdjacentHTML('beforeend', `
     <div class="custom-content">
       <img src="你的图片地址" alt="自定义图片">
       <p>你的自定义文本</p>
     </div>
   `);
   

方法3：子主题修改小部件源文件（深度定制） #

为避免主题更新丢失修改，必须通过子主题操作：

1. 安装并激活Child Theme Configurator插件，一键生成RealHomes子主题。
2. 在原主题目录找到目标小部件文件，路径通常为realhomes/includes/elementor-widgets/[widget-name].php。
3. 在子主题中创建相同路径（如realhomes-child/includes/elementor-widgets/），将原文件复制到该路径。
4. 打开复制后的PHP文件，找到渲染内容的render()方法，插入自定义HTML代码：

   public function render() {
       // 原主题渲染代码...
       
       // 添加自定义内容
       echo '<div class="rh-custom-widget-content">
               <img src="'.get_stylesheet_directory_uri().'/assets/images/custom-img.png" alt="自定义图片">
               <p>这里是自定义文本</p>
             </div>';
   }
   

方法4：利用主题钩子扩展（最安全的深度定制） #

RealHomes主题可能为Elementor小部件提供了专属钩子，可通过子主题的functions.php添加代码：

// 假设目标小部件的钩子为rh_elementor_widget_[widget-slug]_before_render
add_action('rh_elementor_widget_property_features_before_render', 'add_custom_content_to_property_widget');
function add_custom_content_to_property_widget() {
    echo '<div class="custom-widget-block">
            <h4>自定义标题</h4>
            <p>自定义描述文本</p>
          </div>';
}

若不确定钩子名称，可查看主题includes/elementor-widgets/目录下的对应文件，搜索do_action关键词找到可用钩子。

内容的提问来源于stack exchange，提问作者Manav Mehta