来给 WordPress 添加一个书单页面吧

封面来源：和洋折衷ライブラリー | 藤ちょこ（藤原） #pixiv https://www.pixiv.net/artworks/61930743

自从建立博客以来，在下一直喜欢拜访其他大佬的博客，发现很多博客都有书单页面，令在下也很是动心。基于在下贫弱不堪的前端水平，在下开始寻找能够给 WordPress 博客添加一个书单页面的一条龙教程或插件，可惜既没有找到满意的教程，也没有能用的插件，遂决定自己动手制作。

说到书单页面，给在下留下非常深刻印象的还属蝉时雨大佬的作品，其书籍以立体的形式展示而且还带有旋转效果。于是在下决定也给自己来一个这样的书单，然而对于一个发量危急的法学生来说，想实现这个效果可并没有那么简单。好在有其他大佬已经在 CSDN 分享了立体书籍旋转效果的代码，只要拿来作适当修改便是。

模板制作

接下来就开始书单模板的制作了，首先在 Wordpress 主题根目录下把 page.php 复制一份，重命名为 page-book.php ，并把开头的注释改为如下所示。

/**
 * Template Name: 书单模版
 */

这样一来，就能在后台的新建页面界面的模板选项中看到书单模板了。继续在 page-book.php 的注释后添加如下样式代码。当然可以依照个人需要进行微调。

<style>
    .group:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    * html .group {
        height: 1%;
    }

    *:first-child+html .group {
        min-height: 1px;
    }

    body {
        line-height: 1.9em;
        background-color: #0b3065;
        background-size: cover;
        font-family: arial,
        sans-serif;
    }

    .container {
        max-width: 60em;
        margin: 0 auto;
        padding: 0 2em;
    }

    .text.container {
        max-width: 38em;
        text-align: center;
        margin: 50px auto 100px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    }

    a {
        color: #da9803;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    h.main-title {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #fff;
        font-weight: normal;
        margin: 1.25em;
        text-align: center;
        font-size: 2.75em;
        letter-spacing: -1px;
    }

    p {
        margin-bottom: 1em;
        font-size: 1.25em;
    }

    hr {
        margin: 2em 0;
    }

    .book-container {
        width: 100%;
        margin: 0 auto;
        display: block;
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        perspective: 1000px;
    }

    .book {
        z-index: 5;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        -webkit-transition: 0.75s;
        -moz-transition: 0.75s;
        transition: 0.75s;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 33% 0;
        -moz-transform-origin: 33% 0;
        transform-origin: 33% 0;
    }

    .book:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 3px;
        width: 7px;
        background: url(翻页转角处的图片) repeat-y;
        z-index: 20;
        -webkit-transform: translateZ(1px);
    }

    .book:hover {
        -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
        -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
        transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
    }

    .book-cover {
        position: relative;
        z-index: 10;
    }

    .book-cover img {
        vertical-align: bottom;
        max-width: 100%;
        height: auto;
    }

    .book-spine {
        position: absolute;
        color: #fff;
        bottom: 0;
        top: 0;
        width: 10%;
        z-index: 5;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        background: url(书的侧面图片) -64px 0 no-repeat;
        background-size: auto 100%;
        -webkit-transform: rotateY(-90deg) translateX(-100%);
        -moz-transform: rotateY(-90deg) translateX(-100%);
        transform: rotateY(-90deg) translateX(-100%);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .book-spine h {
        display: block;
        width: 100%;
        text-align: left;
        color: #fff;
        position: absolute;
        top: 0;
        left: 19%;
        text-indent: 43px;
        text-transform: uppercase;
        font-family: "league_gothic_condensedRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 2em;
        opacity: 0.75;
        font-weight: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .book-spine:before {
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
    }
</style>

模板使用

一切就绪之后就可以使用模板了，只要在模板当中输入以下 HTML 代码，就能使书籍的封面图获得立体旋转效果了。

<div class="container group" valign="top">
    <a class="book-container">
        <div class="book">
            <div class="book-cover">
                <img src="书籍封面图" alt="" />
            </div>
            <div class="book-spine">
                <h>书脊文字</h>
            </div>
        </div>
    </a>
</div>

此时可以结合使用 <div> 块或是表格来进行排版，添加更多的书籍信息和其他元素，最终打造出书单页面。

虽然这个模板做得十分笨拙，立体旋转效果也不如蝉时雨大佬的书单精致，且存在很多可以优化的地方（例如可以把那一大块 HTML 代码简化成短代码等等），但要比简单粗暴直接放表格陈列好多了。况且也是自己捣鼓的东西，对于在下这个伪程序宅，还是有不小的成就感。