主题-wordpress-Giligili主题-使用教程

Giligili主题使用教程

安装环境要求

PHP5.6+，wordpress4.8+。

主题安装&&更新

获取主题后，直接在wordpress后台“外观->主题”中上传压缩包进行安装即可，此后每次主题更新可在wordpress后台“仪表盘->更新”中获得通知。

主题功能配置

主题安装成功后，首先需要进入wordpress后台“Giligili”中进行相关功能的配置。

添加菜单

进入WordPress后台，外观->菜单，如果没有建立菜单需要新建一个菜单，否则菜单的样式可能会出问题。可将内容添加到菜单。其中需要注意的是，本主题支持2级菜单，如果为2级菜单，其1级菜单需要是自定义链接，URL链接为空。

添加菜单小图标

进入WordPress后台，“Giligili->自选图标”，自己挑选喜欢的图标。然后再在菜单标题中添加对应的<i class=’giligili giligili-***’></i>+菜单标题名称即可（建议在</i>后面加个空格，更美观些，此处单引号为英文引号，请注意）。

发布说说

进入WordPress后台，“说说->新建说说”，即可发布一条说说。前台只显示说说内容，不显示标题，说说理论上可以不写标题，但是我不保证不会有什么问题出现2333

短代码

为了方便使用，GiliGili 1.3版本加入了较多短代码功能，用户可以在文本编辑模式下，点击相应按钮进行快捷插入，也可以直接在可视化界面选择对应功能按钮进行插入。

短代码及其对应效果分别如下：(【】替换为[])

插入代码：
【gilicode language="php"】add_action('media_buttons_context','fa_smilies_custom_button'); 【/gilicode】

文章内链：（在一篇文章中如果想引用本站其他文章的时候使用）
【giligili_post ids="2518"】
其中，2518是文章id，为了方便查看，我在文章->所有文章中添加了一列，用于显示文章id，所以只需查阅该列表即可获得文章id。

提示：
【info]信息提示【/info】
【warn]警告【/warn】
【success]成功【/success】 
【error]错误【/error】

其他：
【hide]半隐藏内容（鼠标悬浮可见）【/hide】 
【gp】 
【gr】
add_action(‘media_buttons_context’,’fa_smilies_custom_button’);

WordPress响应式二次元主题Giligili

很久之前就想写一套二次元主题，之前的Memory其实初期是有二次元的影子的，但后来还是把这种风格砍了，于是就有了重写一款完全二次元风格的主题。在这样的背景下，这款主题——Giligili就诞生了。 不得不说，写主题真的是一件非常累人的事情，不过在这过程也学到了不少。从刚开始写Memory的一脸懵逼到 […]

文章前言

本主题添加了文章前言的功能，使用者可以在文章编辑页，文章编辑区域的下方找到前言编辑区，如果不填则默认无前言。

文章标题

文章标题建议从三级标题开始使用。

列表

无序列表

• 项目1
• 项目2
• 项目3

有序列表

1. 项目1
2. 项目2
3. 项目3

插入代码

在可视化编辑模式下，可点击“插入代码”按钮插入代码，在文本编辑模式下，可点击“giligili_code”按钮快捷插入代码。

注意：这里插入html代码的时候，请先到html转义工具将代码进行转义之后再插入代码。

代码demo如下：

p { color: red }

链接

主题支持三种链接样式，具体为：普通链接、无修饰链接、链接。他们的代码分别如下：

<a href="链接地址">普通链接</a>
<a class="no-des" href="链接地址">无修饰链接</a>
<a class="at" href="链接地址">链接</a>

在文本编辑模式中，普通链接可点击“link”按钮添加，无修饰链接可点击“no_des_link”按钮添加，at链接可点击“at_link”按钮添加。

创建归档、友链页面

主题在启用时会自动创建归档、友链的页面，您可以在wordpress后台“页面”中看到他们。当然您也可以通过创建普通页面，然后模板选择 归档/友链 从而创建这些页面。

添加友链

友链的添加，需要在wordpress后台“链接”一栏中添加相关链接，必填项为名称、Web地址、图像描述（即对博客的描述）。友链的图像由如下规则决定，优先级依次降低：
1. 如果在高级->备注中填写了友链的邮箱地址，则默认使用其gravatar头像；
2. 如果在高级->图像地址中填写了友链的图像地址，则使用其提供的图像地址作为图像来源。
3. 如果上面两项均未填写，则使用默认图片。

小工具

目前主题有4个附带的小工具，可在wordpress后台“外观->小工具”中将自己需要的小工具拖到左侧和右侧的侧边栏中进行使用。其中需要注意的是，小工具的图标需要进入WordPress后台，“Giligili->自选图标”，自己挑选喜欢的图标。填写时候应填写giligili-****(****为图标名)。

音乐小工具

进入wordpress后台“外观->小工具”，添加“自定义html”小工具即可，代码示范如下：

<script src="//cdn.bootcss.com/aplayer/1.5.8/APlayer.min.js"></script>
<div id="aplayer1" class="aplayer"></div>
<script>var ap = new APlayer({
    element: document.getElementById('aplayer1'),
		autoplay: false,
    music: {
        title: '红昭愿',
        author: '圈9、齐奕同、董子龙',
        url: 'https://shawnzeng.com/wp-content/uploads/2019/01/红昭愿.mp3',
        pic: 'https://shawnzeng.com/wp-content/uploads/2017/10/音阙诗听.jpg'
    }
});</script>

恋爱天数小工具

有好多同学有问恋爱天数的小工具，我这次就加上代码吧。

进入wordpress后台“外观->小工具”，添加“自定义html”小工具即可，代码示范如下。需要把对应图片链接替换成自己的，另外恋爱日期要比实际日期提前1个月。

<div style=”text-align: center;”>
<img src=”https://shawnzeng.com/wp-content/uploads/2018/07/IMG_1974.jpg” style=”width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;”/><i class=”giligili giligili-heart-o throb” style=”color:red”></i><img src=”https://shawnzeng.com/wp-content/uploads/2018/07/IMG_1970.jpg” style=”width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;”/><br/>
<span id=”htmer_time”></span>
</div>
<script type=”text/javascript” language=”javascript”>
function setTime() {
var create_time = Math.round(new Date(Date.UTC(2018, 03, 08, 9, 21, 0)).getTime() / 1000);
var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
currentTime = secondToDate((timestamp – create_time));
currentTimeHtml = currentTime[0] + ‘ 年 ‘ + currentTime[1] + ‘ 天 ‘
+ currentTime[2] + ‘ 时 ‘ + currentTime[3] + ‘ 分 ‘ + currentTime[4]
+ ‘ 秒’;
document.getElementById(“htmer_time”).innerHTML = currentTimeHtml;
}
function secondToDate(second) {
if (!second) {
return 0;
}
var time = new Array(0, 0, 0, 0, 0);
if (second >= 365 * 24 * 3600) {
time[0] = parseI<div style="text-align: center;">
<img src="https://shawnzeng.com/wp-content/uploads/2018/07/IMG_1974.jpg" style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"/><i class="giligili giligili-heart-o throb" style="color:red"></i><img src="https://shawnzeng.com/wp-content/uploads/2018/07/IMG_1970.jpg" style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"/><br/>
<span id="htmer_time"></span>
</div>
<script type="text/javascript" language="javascript">
function setTime() {
var create_time = Math.round(new Date(Date.UTC(2018, 03, 08, 9, 21, 0)).getTime() / 1000);
var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
currentTime = secondToDate((timestamp - create_time));
currentTimeHtml = currentTime[0] + ' 年 ' + currentTime[1] + ' 天 '
+ currentTime[2] + ' 时 ' + currentTime[3] + ' 分 ' + currentTime[4]
+ ' 秒';
document.getElementById("htmer_time").innerHTML = currentTimeHtml;
}
function secondToDate(second) {
if (!second) {
return 0;
}
var time = new Array(0, 0, 0, 0, 0);
if (second >= 365 * 24 * 3600) {
time[0] = parseInt(second / (365 * 24 * 3600));
second %= 365 * 24 * 3600;
}
if (second >= 24 * 3600) {
time[1] = parseInt(second / (24 * 3600));
second %= 24 * 3600;
}
if (second >= 3600) {
time[2] = parseInt(second / 3600);
second %= 3600;
}
if (second >= 60) {
time[3] = parseInt(second / 60);
second %= 60;
}
if (second > 0) {
time[4] = second;
}
return time;
}
setInterval(setTime, 1000);
</script>nt(second / (365 * 24 * 3600));
second %= 365 * 24 * 3600;
}
if (second >= 24 * 3600) {
time[1] = parseInt(second / (24 * 3600));
second %= 24 * 3600;
}
if (second >= 3600) {
time[2] = parseInt(second / 3600);
second %= 3600;
}
if (second >= 60) {
time[3] = parseInt(second / 60);
second %= 60;
}
if (second > 0) {
time[4] = second;
}
return time;
}
setInterval(setTime, 1000);
</script>

本主题使用的插件

本主题没有依赖任何插件，不过我可以推荐些在使用的插件：IP Blacklist Cloud、WP Statistics、WP User Avatar。有需要的同学可以自行下载。

其他

主题还有一些其他特色功能，请自行探索

主题下载：https://shawnzeng.com/