WebStack 主题是一款十分好用的导航站主题。
在使用过程中发现开启 “主题首页顶部广告位” 功能后，在非移动设备上且启用了广告选项时，显示两列广告内容；第二个广告容器添加了类，确保只在中等和大屏幕上显示广告内容。
然而首页的这两个广告位，因为后台有且仅有一个输入框，所以显示的是同一个广告内容。这样好的广告位置怎么可以浪费呢？
所以调整 “主题首页顶部广告位” 功能。
我是在本地使用 [ WebStack 主题 - V 1.1620 ] 进行调整操作的。
记录如下：
在主题文件夹 inc/frame/config/中找到 framework.config.php 文件，找到 321 行，将
array(
'id' => 'ad_home',
'type' => 'wysiwyg',
'title' => ' 首页顶部广告位内容',
'default' => '<a href="https://www.iowen.cn/wordpress-version-webstack/" target="_blank"><img src="' . get_template_directory_uri() . '/screenshot.jpg" alt=" 广告也精彩" /></a>',
'settings' => array(
'textarea_rows' => 5,
'tinymce' => false,
'media_buttons' => false,
),
'dependency' => array( 'ad_home_s', '==', true )
),替换成：
// 修改首页广告为左右两个
array(
'id' => 'ad_home_left',
'type' => 'wysiwyg',
'title' => ' 首页顶部左侧广告位内容',
'default' => '<a href="https://www.iowen.cn/wordpress-version-webstack/" target="_blank"><img src="' . get_template_directory_uri() . '/screenshot.jpg" alt=" 左侧广告" /></a>',
'settings' => array(
'textarea_rows' => 5,
'tinymce' => false,
'media_buttons' => false,
),
'dependency' => array( 'ad_home_s', '==', true )
),
array(
'id' => 'ad_home_right',
'type' => 'wysiwyg',
'title' => ' 首页顶部右侧广告位内容',
'default' => '<a href="https://www.iowen.cn/wordpress-version-webstack/" target="_blank"><img src="' . get_template_directory_uri() . '/screenshot.jpg" alt=" 右侧广告" /></a>',
'settings' => array(
'textarea_rows' => 5,
'tinymce' => false,
'media_buttons' => false,
),
'dependency' => array( 'ad_home_s', '==', true )
),记得备份、备份、备份，防止出错。
完成修改后，上传替换原文件，刷新后在 WordPress 后台的主题设置中，你就能看到分开的左右两个广告位设置选项了。
接下来就要开始修改 index.php 中的代码，将原来的 ad_home 改为新设置的左右广告位。在主题的根目录找到并打开 index.php，在代码中找到第 30 行的这段代码：
<div class="sites-list" style="margin-bottom: 8.5rem;">
<?php if(!wp_is_mobile() && io_get_option('ad_home_s')) echo '<div class="row"><div class="ad ad-home col-md-6">' . stripslashes( io_get_option('ad_home') ) . '</div><div class="ad ad-home col-md-6 visible-md-block visible-lg-block">' . stripslashes( io_get_option('ad_home') ) . '</div></div>'; ?> 替换成下面这段：
<div class="sites-list" style="margin-bottom: 8.5rem;">
<?php
if(io_get_option('ad_home_s')) {
echo '<div class="row">
<div class="ad ad-home col-md-6">' .
stripslashes( io_get_option('ad_home_left') ) .
'</div>';
// 只在非移动设备上显示第二个广告
if(!wp_is_mobile()) {
echo '<div class="ad ad-home col-md-6 visible-md-block visible-lg-block">' .
stripslashes( io_get_option('ad_home_right') ) .
'</div>';
}
echo '</div>';
}
?> 这段代码做了点调整，主要确保当显示尺寸是中等和大屏幕时，显示两列广告；而在移动设备上只会显示左侧的广告。这么做的目的也是想让广告展示更加的 “灵活”。老样子，记得备份、备份、备份！防止出错！
完成修改后，上传替换原文件。前后台都刷新一下，如果你用了缓存插件，记得清理一下缓存。
以上便是尝试将 WebStack 主题首页顶部广告位调整成两个独立位置的所有内容，本地测试没问题，但是不保证线上也没问题。