一为主题首页添加横排网址功能

效果图

实现方法

到WP后台 首页布局 👉 添加模块 👉 自定义模块 （需要在搜索模块后面）填入以下代码：

<head>
<style>
:root{--wrapBg:rgba(130,130,130,.15);--cardBg:#fff;--text:#1f2937;--r:10px;--icon:24px;--gap:10px;
--b1:#f9c74f;--b2:#38c172;--b3:#ef4444;--b4:#3b82f6;--b5:#fb923c;--b6:#9333ea;--b7:#14b8a6;--b8:#f97316;--b9:#eab308;--b10:#22c55e;}
.io-black-mode{--wrapBg:rgba(80,80,80,.35);--cardBg:rgba(40,40,40,.85);--text:#f3f4f6;}
.hotbar-grid{display:flex;align-items:center;gap:var(--gap);width:100%;box-sizing:border-box;padding:6px 16px;margin:0 auto;background:var(--wrapBg);border-radius:12px;overflow-x:auto}
.hotbar-grid::-webkit-scrollbar{display:none}
.hotbar-card{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 8px;background:var(--cardBg);border-radius:var(--r);box-sizing:border-box;cursor:pointer;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;transform:translateY(0)}
.hotbar-card:nth-child(1){border:2px solid var(--b1)}
.hotbar-card:nth-child(2){border:2px solid var(--b2)}
.hotbar-card:nth-child(3){border:2px solid var(--b3)}
.hotbar-card:nth-child(4){border:2px solid var(--b4)}
.hotbar-card:nth-child(5){border:2px solid var(--b5)}
.hotbar-card:nth-child(6){border:2px solid var(--b6)}
.hotbar-card:nth-child(7){border:2px solid var(--b7)}
.hotbar-card:nth-child(8){border:2px solid var(--b8)}
.hotbar-card:nth-child(9){border:2px solid var(--b9)}
.hotbar-card:nth-child(10){border:2px solid var(--b10)}
.hotbar-card:hover{background:rgba(99,102,241,.06);transform:translateY(-4px);box-shadow:0 4px 10px rgba(0,0,0,.1)}
.hotbar-card img{width:var(--icon);height:var(--icon);object-fit:contain;display:block}
.hotbar-card .card-name{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;line-height:1}
@media(max-width:768px){.hotbar-grid{display:none!important}}
</style>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded',()=>{
const list=[
{name:'微博热搜榜',icon:'https://example.com/example.png',url:'https://example.com/'},
{name:'抖音热火榜',icon:'https://example.com/example.png',url:'https://example.com/'},
{name:'高考服务区',icon:'https://example.com/example.png',url:'https://example.com/'},
{name:'论坛热聊榜',icon:'https://example.com/example.png',url:'https://example.com/'},
{name:'游戏热搜榜',icon:'https://example.com/example.png',url:'https://example.com/'},
{name:'数码排行榜',icon:'https://example.com/example.png',url:'https://example.com/'},
{name:'影视票房榜',icon:'https://example.com/example.png',url:'https://example.com/'},
{name:'股票涨跌榜',icon:'https://example.com/example.png',url:'https://example.com/'},
{name:'汽车排行榜',icon:'https://example.com/example.png',url:'https://example.com/'},
{name:'热门软件榜',icon:'https://example.com/example.png',url:'https://example.com/'}
];
const html=`<div class="hotbar-grid">${list.map(item=>`<a href="${item.url}" target="_blank" rel="noopener noreferrer" class="hotbar-card"><img src="${item.icon}" alt="${item.name}" ${'on'}error="this.remove()"><span class="card-name">${item.name}</span></a>`).join('')}</div>`;
const frag=document.createRange().createContextualFragment(html);
const mount=document.querySelector('#search,.search-box,.site-search,.header .search');
mount ? mount.parentNode.insertBefore(frag.firstChild,mount.nextSibling) : document.querySelector('header').append(frag.firstChild);
})
</script>
</body>