WordPress 网站通用图片广告位代码

图片预览

代码部署

将下面html代码添加到合适的位置，修改图片链接和跳转地址

子比主题后台- 外观-小工具-HTML代码 添加下面代码

<style>
    .ad {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 1400px;
    }
    .image-wrapper {
        width: 50%;
        text-align: center;
        margin-bottom: 5px;
    }
    img {
        max-width: 98%;
        height: auto;
    }
  @media only screen and (max-width: 768px) {
  /* 在手机端将排列方式改为单列 */
  .image-wrapper {
    width: 100%;
  }
}
</style>
<div style="display: flex; justify-content: center;">
<div class="ad">
<div class="image-wrapper"><a href="https://hk.yunhaoka.cn/#/pages/micro_store/index?agent_id=dc12f7094c0e2cacb967e505d8255dd7" target="_blank" rel="noopener"><img src="https://pic.aoki.fun/i/05/6642ce110d76d.png" alt="流量卡商城" style="height: 50px;" width="1200"></a>
</div>
<div class="image-wrapper"><a href="#" target="_blank" rel="noopener"><img src="https://pic.aoki.fun/i/05/6642ce110d76d.png" alt="腾讯云" style="height: 50px;" width="1200"></a>         </div>
<div class="image-wrapper"><a href="#" target="_blank" rel="noopener"><img src="https://pic.aoki.fun/i/05/6642ce110d76d.png" alt="广告位3" style="height: 50px;" width="1200"></a>          </div>
<div class="image-wrapper"><a href="#" target="_blank" rel="noopener"><img src="https://pic.aoki.fun/i/05/6642ce110d76d.png" alt="广告位4" style="height: 50px;" width="1200"></a>            </div>
</div>
</div>