为一为主题首页添加十个方块卡片

效果图

实现方法

到WP后台 **首页布局** 👉 **添加模块** 👉 **自定义模块** 填入以下代码：

<!-- 首页十宫格 -->
<style>
    .custom-container { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; margin: 0 auto; max-width: 100%; justify-content: space-around; }
    .custom-button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; background: rgba(255, 255, 255, 0.3); border-radius: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; cursor: pointer; text-decoration: none; color: #333; flex-grow: 1; flex-basis: calc(10% - 8px); text-align: center; }
    .custom-button:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.5); }
    .custom-button:active { transform: translateY(2px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.7); }
    .custom-button img { width: 30px; height: 30px; margin-bottom: 8px; }
    .custom-button span { font-size: 12px; font-weight: bold; text-align: center; } 
    @media (max-width: 768px) { .custom-button { flex-basis: calc(20% - 8px); }
        .custom-button img { width: 25px; height: 25px; }
        .custom-button span { font-size: 11px; } } 
    @media (max-width: 480px) { .custom-button { flex-basis: calc(20% - 8px); } .custom-button img { width: 20px; height: 20px; } .custom-button span { font-size: 10px; } }
</style>

<!-- 容器（原本的静态按钮将被脚本清空，故此处可保留为空或保留原按钮，脚本会清空后重新生成） -->
<div class="custom-container" id="button-container1"></div>

<script>
    (function() {
        const buttonData1 = [
            { href: "/blog", imgSrc: "/LOGO.png", alt: "我的博客", text: "Blog" },
            { href: "/", imgSrc: "LOGO.png", alt: "描述2", text: "标题2" },
            { href: "/", imgSrc: "/LOGO.png", alt: "描述3", text: "标题3" },
            { href: "/", imgSrc: "LOGO.png", alt: "描述4", text: "标题4" },
            { href: "/", imgSrc: "/LOGO.png", alt: "描述5", text: "标题5" },
            { href: "/", imgSrc: "/LOGO.png", alt: "描述6", text: "标题6" },
            { href: "/", imgSrc: "/LOGO.png", alt: "描述7", text: "标题7" },
            { href: "/", imgSrc: "/LOGO.png", alt: "描述8", text: "标题8" },
            { href: "/", imgSrc: "LOGO.png", alt: "描述9", text: "标题9" },
            { href: "/", imgSrc: "/LOGO.png", alt: "描述10", text: "标题10" }
        ];

        const buttonContainer1 = document.getElementById('button-container1');
        if (!buttonContainer1) return; // 防止容器不存在

        // 清空容器，避免与可能存在的静态按钮重复
        buttonContainer1.innerHTML = '';

        // 动态生成按钮
        buttonData1.forEach(data => {
            const button = document.createElement('a');
            button.href = data.href;
            button.target = "_blank";
            button.rel = "nofollow";
            button.classList.add('custom-button');

            const img = document.createElement('img');
            img.src = data.imgSrc;
            img.alt = data.alt;
            img.loading = "lazy";
            img.width = 30;
            img.height = 30;

            const span = document.createElement('span');
            span.textContent = data.text;

            button.appendChild(img);
            button.appendChild(span);
            buttonContainer1.appendChild(button);
        });
    })();
</script>