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’);


信息提示

警告

成功

错误

半隐藏内容(鼠标悬浮可见)

文章前言

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

文章标题

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

列表

无序列表

  • 项目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] = 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>

本主题使用的插件

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

其他

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