855 字
4 分钟
【Sakurairo】主题自定义美化其三
2022-08-16
2022-08-17

前言#

这一期我们继续记录主题美化:添加 HTML 编辑器自定义快捷标签按钮、部分内容评论可见、自定义封面 api。


添加自定义快捷标签按钮#

这个功能是我们在编辑文章的时候比较实用的,通过自定义快捷标签按钮添加短代码,效果如下:

screenshot

当然我这是经典编辑器,不保证在古腾堡或者 Markdown 编辑器中可以使用。

我添加这几个都是比较简单的,主题自带的,把下面代码添加到主题目录下的 function.php 中即可:

// 添加 HTML 编辑器自定义快捷标签按钮,请把小括号 QTags.addButton 中的小括号改为中括号 []
add_action('after_wp_tiny_mce', 'my_quicktags');
function my_quicktags($mce_settings)
{
?>
<script type="text/javascript">
QTags.addButton('noways', '禁止内容', '(noway)', '(/noway)');
QTags.addButton('yesitis', '允许内容', '(buy)', '(/buy)');
QTags.addButton('tasks', '任务内容', '(task)', '(/task)');
QTags.addButton('warnings', '警告内容', '(warning)', '(/warning)');
QTags.addButton('soujin', '缩进内容', '(collapse title="', '")缩进内容(/collapse)');
QTags.addButton('pre_codes', '代码块', '<pre><code>', '</code></pre>');
function my_quicktags() {}
</script>
<?php
}

当然你也可以通过这个方式添加你自己的代码。


部分内容评论可见#

有时候我们有些内容只有评论后可见、或是登录可见,主题并没有提供这个功能,这里就写了一个添加到 function.php 里来添加这个功能。使用时只需要这么写(把小括号改为中括号 [] 即可,这里无法演示):

(reply)这里的内容是回复才看到的(/reply)

代码:

// 部分内容评论可见
function reply_to_read($atts, $content = null) {
extract(shortcode_atts(array(
"notice" => '<p class="reply-to-read" style="border-width: 1px 1px 1px 1px;border-color: #F2F2F2;line-height: 150%;"><blockquote><font color="#ff0000"><b>温馨提示</b></font>: 隐藏内容需要<a title="点击进行评论"> 回复评论 </a>后才能查看, 评论后请 <strong><a href="javascript:location.reload()" title="点击刷新"> 刷新!</a></strong>.</blockquote></p>'
), $atts));
$email = null;
$user_ID = (int) wp_get_current_user()->ID;
if ($user_ID > 0) {
$email = get_userdata($user_ID)->user_email;
// 对博主直接显示内容
$admin_email = "hello@example.com"; // 把左面的邮箱换成博主 Email
if ($email == $admin_email) {
return $content;
}
} else if (isset($_COOKIE['comment_author_email_' . COOKIEHASH])) {
$email = str_replace('%40', '@', $_COOKIE['comment_author_email_' . COOKIEHASH]);
} else {
return $notice;
}
if (empty($email)) {
return $notice;
}
global $wpdb;
$post_id = get_the_ID();
$query = "SELECT `comment_ID` FROM {$wpdb->comments} WHERE `comment_post_ID`={$post_id} and `comment_approved`='1' and `comment_author_email`='{$email}' LIMIT 1";
if ($wpdb->get_results($query)) {
return do_shortcode($content);
} else {
return $notice;
}
}
add_shortcode('reply', 'reply_to_read');

自定义封面 api#

我们知道 iro 主题提供了封面可以使用自己的封面 api。我们想自定义切换图片,而图片太多放在本地会使访问速度变慢,于是可以做一个指向 CDN 或者对象存储的 api,返回封面地址即可。

我们写一个 JSON 格式返回的 PHP 代码,代码地址:https://hoyue-1253694730.cos.ap-nanjing.myqcloud.com/imgup/2022/08/imgs.php

我们看到代码中前面写了 get type,因为如果手机端也使用 api 的话会请求 imgs.php?type=mobile,这里可以方便你做不同的图片链接。

api-screenshot

WARNING

同时我们还要在同目录下建立一个 imgs.log 文件来存储图片代号。例如用纯数字,那么 log 里每行都是一个数字,随机会取随机某一行的内容出来。

最后添加好以后在 iro 主页设置中封面设置填写地址就可以了。

当然如果你觉得这个挺麻烦的,你也可以使用别人的 api,这里列几个比较稳定的图片 api:

【Sakurairo】主题自定义美化其三
https://hoyue.fun/sakurairo_3.html
作者
Hoyue
发布于
2022-08-16
最后更新于
2022-08-17
许可协议
CC BY-NC-SA 4.0
评论