如何在OpenCart商店全页面顶部添加带社媒链接的图标？

数据老陈

2026-5-20

嘿，我来帮你搞定OpenCart顶部添加社交媒体图标的需求！不用依赖插件，直接折腾主题模板就能实现全页面顶部显示，还能自定义账号链接，这比用插件灵活多了，而且可控性更强。下面给你两个实用方案，按需选就行：

方案1：直接修改主题头部模板（适合所有OpenCart版本）

这是最直接的方式，毕竟所有页面的头部都来自同一个模板文件，改一次就能全页面生效。

找到头部模板文件
进入你的OpenCart安装目录，找到主题的头部文件：
- 3.x版本路径：catalog/view/theme/你的主题名称/template/common/header.twig
- 2.x及更早版本路径：catalog/view/theme/你的主题名称/template/common/header.tpl

插入社交媒体图标代码
打开这个文件，找到你想放图标的位置（比如logo旁边、导航栏右侧），插入类似下面的代码：

<div class="social-icons">
  <a href="你的Facebook账号链接" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i></a>
  <a href="你的Instagram账号链接" target="_blank" rel="noopener noreferrer"><i class="fa fa-instagram"></i></a>
  <a href="你的Twitter账号链接" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a>
  <!-- 还能加YouTube、LinkedIn这些，对应换图标类名就行 -->
</div>

注意：如果你的主题没自带Font Awesome图标库，得先在<head>标签里加个引入链接（或者下载图标文件放到主题目录）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

加点CSS让图标更好看（可选）
打开主题的CSS文件（路径一般是catalog/view/theme/你的主题名称/stylesheet/stylesheet.css），添加点样式调整布局和颜色：

.social-icons {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-left: 20px; /* 自己根据布局调距离 */
}
.social-icons a {
  color: #333; /* 默认图标颜色 */
  font-size: 20px;
  transition: color 0.3s ease;
}
.social-icons a:hover {
  color: #007bff; /* 鼠标 hover 时的颜色 */
}

方案2：把链接加到后台设置（适合3.x+版本，更易维护）

如果你不想每次改链接都动代码，可以把社交媒体链接加到后台的商店设置里，以后直接在后台改就行：

修改后台设置控制器
打开admin/controller/setting/setting.php，找到index()方法里的设置项区域，添加这段代码：

$data['entry_facebook'] = $this->language->get('entry_facebook');
$data['entry_instagram'] = $this->language->get('entry_instagram');
$data['entry_twitter'] = $this->language->get('entry_twitter');

$data['config_facebook'] = $this->config->get('config_facebook');
$data['config_instagram'] = $this->config->get('config_instagram');
$data['config_twitter'] = $this->config->get('config_twitter');

添加语言提示文本
打开admin/language/en-gb/setting/setting.php，添加对应的语言项：
```
$_['entry_facebook'] = 'Facebook 链接';
$_['entry_instagram'] = 'Instagram 链接';
$_['entry_twitter'] = 'Twitter 链接';
```
如果你用的是中文后台，记得改对应的中文语言文件哦。

修改后台设置模板
打开admin/view/template/setting/setting.twig，找到“商店”选项卡下的合适位置，添加设置输入框：

<div class="form-group">
  <label class="col-sm-2 control-label" for="input-facebook">{{ entry_facebook }}</label>
  <div class="col-sm-10">
    <input type="text" name="config_facebook" value="{{ config_facebook }}" placeholder="https://facebook.com/你的商店账号" class="form-control" />
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label" for="input-instagram">{{ entry_instagram }}</label>
  <div class="col-sm-10">
    <input type="text" name="config_instagram" value="{{ config_instagram }}" placeholder="https://instagram.com/你的商店账号" class="form-control" />
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label" for="input-twitter">{{ entry_twitter }}</label>
  <div class="col-sm-10">
    <input type="text" name="config_twitter" value="{{ config_twitter }}" placeholder="https://twitter.com/你的商店账号" class="form-control" />
  </div>
</div>

在头部模板调用后台设置的变量
回到主题的头部模板header.twig，添加这段代码（位置和方案1一样）：

<div class="social-icons">
  {% if config_facebook %}
    <a href="{{ config_facebook }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i></a>
  {% endif %}
  {% if config_instagram %}
    <a href="{{ config_instagram }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-instagram"></i></a>
  {% endif %}
  {% if config_twitter %}
    <a href="{{ config_twitter }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a>
  {% endif %}
</div>

这样以后你直接在后台「系统->设置->编辑商店」里就能改社交媒体链接，不用碰前端代码了。

小提醒

如果用的是第三方主题，改之前最好备份一下模板文件，免得主题更新把你的修改覆盖了。
要是不想改核心文件（方案2里的admin相关文件），可以用vQmod或者OCmod来做修改，这样系统升级的时候不会受影响。
修改完记得清空后台缓存（「系统->维护->缓存」），不然可能看不到效果哦。

内容的提问来源于stack exchange，提问作者Elijah Adah