很早以前看到其他博主发过好物的页面，最开始是typecho和hexo，后来终于看到了有大神制作出了WP插件，但是我的初衷是想要一个可以展示闲置物品的页面。

前段时间看钟MM发过一个WP的基于好物改造的设备页面，搜索了几天没搜到，以为她把文章删除了，昨天实在忍不住，就留言问了她，没想到很快回复了，感谢MM。

基于MM提供的代码，经过昨天下午和今天上午的改造，我的闲置物品展示页面“焕旧坊”终于出炉了。整个界面符合我的预期，只剩下填充内容了。

现在放出完整代码，原则上WP都通用，可能样式需要根据自己的主题进行微调，已经努力做了手机和平板的自适应。

整个框架内容是：框架分左右两部分，左部分占宽25%，右部分占宽75%。其中左部分分上下2栏，上栏占高80%，用来显示商品图片，下栏占高20%，用来显示当前状态，已停售字体会自动显示红色，在售中字体会自动显示绿色；右部分分上中下3栏，上栏显示商品名称和官网网址，中栏显示具体描述，下栏显示测评网址和交易二维码。

官网网址Official_URL为空的话文字不显示“官网”两字，测评网址Ceping_URL为空的话显示“暂无测评”，交易二维码qr_code为空的话显示“自用不交易”。代码很简单，里面的汉字通俗易懂，添加和删除商品的话就参照里面提供的代码，都是统一的样式。

以我的PIX主题为例，打开主题目录下的page文件夹，新建huanjiufang.php，输入以下代码：

[reply]

<?php
/*
    Template Name: 焕旧坊
*/
get_header();
?>
<style>
    body {
        display: flex;
        flex-direction: column;
    }
   .item-border-shadow {
        border-radius: 12px;
        border: 1px solid #000;
        overflow: hidden;
        box-shadow: 0 8px 16px -4px #2c2d300;
    }
   .equipment-item-content {
        display: flex;
        flex-direction: column;
        margin: 0 -8px;
        flex: 1;
        max-width: 100vw;
    }
   .equipment-item-content-item {
        width: 97%;
        border-radius: 12px;
        border: 1px solid #000;
        overflow: hidden;
        margin: 8px 12px;
        background: #fff;
        box-shadow: 0 8px 16px -4px #2c2d300;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border: 1px solid #000;
    }
   .equipment-item-content-item-cover {
        width: 25%;
        height: 200px;
        position: relative;
    }
   .equipment-item-content-item-cover-top {
        height: 80%;
        background: #f7f7f9;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        object-fit: cover;
       .item-border-shadow;
    }
    img.equipment-item-content-item-image {
        height: 100%;
        width: auto;
        max-width: 100%;
        max-height: 100%;
    }
   .equipment-item-content-item-cover-bottom {
        height: 20%;
        background-color: #f7f7f9;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
   .equipment-item-content-item-info {
        padding: 8px 16px 16px 16px;
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: auto;
        width: 75%;
        box-sizing: border-box;
        border-left: 1px solid #000;
    }
   .equipment-item-content-item-name {
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        width: fit-content;
    }
   .equipment-item-content-item-name:hover {
        color: #425AEF;
    }
   .equipment-item-content-item-description {
        line-height: 30px;
        color: rgba(60, 60, 67, 0.8);
        height: 90px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 14px;
    }
   .equipment-item-content-item-toolbar {
        display: flex;
        justify-content: space-between;
        margin-top: auto;
    }
    @media (max-width: 768px) {
       .equipment-item-content-item-info-borderless {
            border-left: none;
        }
    }
   .button-small {
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
<div class="equipment-item-content">
    <?php
    $products = [
        [
            'image' => '商品1图片地址',
            'name' => '商品1名称',
            'description' => '商品1描述',
            'status' => '商品2状态，写已停售或在售中，已停售文字自动红色，在售中文字自动绿色',
            'qr_code' => '商品1交易二维码图片地址，我的是闲鱼',//
            'Ceping_URL' => '商品1测评地址，没有留空',
            'Official_URL' => '商品1官方网站',
        ],
        [
            'image' => '商品2图片地址',
            'name' => '商品2名称',
            'description' => '商品2描述',
            'status' => '商品2状态，写已停售或在售中，已停售文字自动红色，在售中文字自动绿色',
            'qr_code' => '商品2交易二维码图片地址，我的是闲鱼',//
            'Ceping_URL' => '商品2测评地址，没有留空',
            'Official_URL' => '商品2官方网站',
        ],        
    ];

    if (!empty($products)) {
        foreach ($products as $product) {
            $isMobile = false;
            $classInfo = $isMobile? 'equipment-item-content-item-info equipment-item-content-item-info-borderless' : 'equipment-item-content-item-info';
           ?>
            <div class="equipment-item-content-item">
                <div class="equipment-item-content-item-cover">
                    <div class="equipment-item-content-item-cover-top">
                        <img class="equipment-item-content-item-image" alt="<?php echo $product['name'];?>" src="<?php echo $product['image'];?>">
                    </div>
                    <div class="equipment-item-content-item-cover-bottom">
                        <span style="font-size:15px; color: <?php echo $product['status'] === '已停售'? 'red' : 'green';?>; font-weight: normal;"><?php echo $product['status'];?></span>
                    </div>
                </div>
                <div class="<?php echo $classInfo;?>">
                    <div class="equipment-item-content-item-name">
                        <?php echo $product['name'];?>
                        <?php if ($product['Official_URL']) {?>
                            <a href="<?php echo $product['Official_URL'];?>" style="text-decoration: none;" target="_blank">
                                <input class="button-primary button-small" type="button" value="官网">
                            </a>
                        <?php }?>
                    </div>
                    <div class="equipment-item-content-item-description"><?php echo $product['description'];?></div>
                    <div class="equipment-item-content-item-toolbar">
                        <?php if ($product['Ceping_URL']) {?>
                            <a href="<?php echo $product['Ceping_URL'];?>" style="text-decoration: none;" target="_blank">
                                <input class="button-primary button-small" type="button" value="测评">
                            </a>
                        <?php } else {?>
                            <input class="button-primary button-small" type="button" value="暂无测评">
                        <?php }?>
                        <input class="button-primary button-small" type="button" value="<?php echo empty($product['qr_code'])? '自用不交易' : '去闲鱼交易'?>" onmouseover="<?php echo empty($product['qr_code'])? '' : 'showQRCode(\''. $product['qr_code']. '\', \''. $product['name']. '\')';?>">
                    </div>
                </div>
            </div>
            <?php
        }
    } else {
       ?>
        <div style="text-align: center;">
            <p>目前没有任何焕旧商品数据。</p>
        </div>
        <?php
    }
   ?>
</div>

<script>
    function showQRCode(qrCodeFileName, productName) {
        if (!qrCodeFileName || typeof qrCodeFileName!== 'string') {
            return;
        }
        var qrCodeDiv = document.createElement('div');
        qrCodeDiv.style.position = 'fixed';
        qrCodeDiv.style.top = '50%';
        qrCodeDiv.style.left = '50%';
        qrCodeDiv.style.transform = 'translate(-50%, -50%)';
        qrCodeDiv.innerHTML = `<img src="${qrCodeFileName}" alt="商品二维码"><br><span style="color: red; font-weight: bold; display:block; text-align:center;">准备和似水流年交易的商品：${productName}</span>`;
        document.body.appendChild(qrCodeDiv);
        document.addEventListener('mouseout', function(event) {
            if (!qrCodeDiv.contains(event.relatedTarget)) {
                document.body.removeChild(qrCodeDiv);
            }
        });
    }
</script>

<?php
get_footer();
?>

[/reply]

然后WP后台新建页面，连接随便取，模板选择焕旧坊（名字改成其他也可以，上面代码的前几行记得修改相应名称）。

PC电脑演示：

手机模拟演示：

平板模拟演示：