为WordPress添加Live2D看板娘

看板娘太可爱力!


<script src="https://cdn.jsdelivr.net/gh/inGeoscience/Live2Dgithub/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({ 
"model": { "jsonPath":"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
"display": { "position": "right", "width": 100, "height": 200, "hOffset": 0, "vOffset": 0 }, 
"mobile": { "show": true, "scale": 0.5 },
"react": { "opacityDefault": 1, "opacityOnHover": 0.2 } 
});
</script>

进入主题管理后台,在</body>之前添加以上代码

https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
//这一段可以替换为自己的模型

Tip:
使用max-width可以整体放大或缩小看板娘。

<canvas id="live2dcanvas"></canvas>的CSS在L2Dwidget.0.min.js.map和L2Dwidget.0.min.js力更改。

vOffset 为 CSS中的 buttom
hOffset 为 CSS中的 right
width 为CSS中的 width ,实际上会被放大为两倍
height 为CSS中的 height,实际上会被放大为两倍
<script src="https://cdn.jsdelivr.net/gh/inGeoscience/Live2Dgithub/live2dw/lib/L2Dwidget.min.js"></script>
<script>  
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        /* 
    L2Dwidget.init({ 
    "model": { "jsonPath":"https://cdn.jsdelivr.net/gh/inGeoscience/Live2DModels/model/dollsfrontline/kp31_310/destroy/model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
 "display": { "position": "right", "width": 75, "height": 150, "hOffset": 0, "vOffset": -30 }, 
 "mobile": { "show": true, "scale": 0.5 },
 "react": { "opacityDefault": 1, "opacityOnHover": 0.2 } 
 });
 */
        } 
        
else {
    L2Dwidget.init({ 
    "model": { "jsonPath":"https://cdn.jsdelivr.net/gh/inGeoscience/Live2DModels/model/dollsfrontline/kp31_310/destroy/model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
 "display": { "position": "right", "width": 150, "height": 300, "hOffset": 0, "vOffset": -70 }, 
 "mobile": { "show": true, "scale": 0.5 },
 "react": { "opacityDefault": 1, "opacityOnHover": 0.2 } 
 });
        }
        </script>

guest
0 Comments
Inline Feedbacks
View all comments