改造流程：
一、改造主题设置选项卡
找到自己主题设置选项卡PHP文件，本站的就是options.php，然后在相应的选项卡后添加自己的栏目（每个人主题不一样，函数也不一样，请根据自己主题的选项卡函数进行配置，只提供代码例子作为思路，基本大同小异），总共添加五个选项：
参考代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
//封面设置
$options[] = array(
'name' => __( '封面设置', 'tt' ),
'type' => 'heading'
);
// 文章页底部生成封面按钮
$options[] = array(
'name' => __( '分享封面', 'tt' ),
'desc' => __( '开启后将在文章页底部显示[生成封面]按钮,关闭后以下功能全不可用', 'tt' ),
'id' => 'share_bigger_img',
'std' => true,
'type' => 'checkbox'
);
$options[] = array(
'name' => __( 'LOGO', 'tt' ),
'desc' => __( '上传一张显示在封面底部的LOGO', 'tt' ),
'id' => 'bigger_logo',
'std' => '',
'type' => 'upload'
);
$options[] = array(
'name' => __( '描述', 'tt' ),
'desc' => __( '显示在LOGO下方的一句话描述', 'tt' ),
'id' => 'bigger_desc',
'std' => '',
'type' => 'text'
);
$options[] = array(
'name' => __( '右下角二维码', 'tt' ),
'desc' => __( '开启后将再封面图的右下角现在当前文章的二维码', 'tt' ),
'id' => 'share_bigger_img_qrcode',
'std' => false,
'type' => 'checkbox'
);
$options[] = array(
'name' => __( '处理方式', 'tt' ),
'id' => 'thumbnail_handle',
'std' => '',
'type' => 'select',
'options' => array(
'local_1' => __('timthumb.php', 'tt'),
'cdn_http' => __('内置裁切', 'tt'),
'cdn_https' => __('输出原图', 'tt')
)
);
|
需要最重要的注意的是自己主题的函数调用名（模版不同，函数不同，有些是默认的，有些已改变，需要自己去了解自己模版的函数是什么），心动的设置项调用名为：tt_get_option("ID")，这里需要敲黑板，重点事项！上方代码设置项中我们可以看到自己定义的ID，那么这里调用tt_get_option函数中的ID即为此ID，例如我要调用LOGO这个函数，那么代码为：
|
1
|
tt_get_option("bigger_logo")
|
至此，我们的准备工作OK了，有人可能要提问了，说为什么要加这个功能？如果在不是特别需要该功能情况下想关闭生成封面，你是不是需要一个开关来决定此功能OFF/ON？好了废话不多说，我们继续进入正题！
二、改造文章页底部
我们找到自己主题的文章页脚PHP，找到与之相等的按钮旁新增一个按钮，注意啦，这里就要用到配置项来决定该按钮是否显示了，具体参考代码：
|
1
2
3
|
<?php if (tt_get_option('share_bigger_img', true)) { ?>
<a class="btn-bigger-cover" data-module="miPopup" data-selector="#bigger-cover" href="javascript:;"><i class="tico tico-paper-plane"></i><span>生成封面</span></a>
<?php } ?>
|
这样只有在后台勾选了分享封面选项才会显示该按钮
好了，按钮我们至此就添加完毕！但是！！底部还没有改造完毕，还需要添加一个模态蒙版（需要Bootstrap支持），具体的模态窗口写法请自行百度学习参考（包括CSS），如果这个还要我说，我也无能为力，以下提供两个心动已做好的
DIV例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<div class="row">
<div class="bigger-image col-xs-12 col-sm-6 col-md-6">
<?php
$bigger_cover = get_post_meta( get_the_ID(), 'bigger_cover', true );
if( $bigger_cover ){
?>
<img src="<?php echo $bigger_cover ?>" alt="<?php the_title(); ?> 封面">
<?php }else{ ?>
<img class="load_bigger_img" data-nonce="<?php echo wp_create_nonce('mi-create-bigger-image-'.$postdata->ID );?>" data-id="<?php echo $postdata->ID; ?>" data-action="create-bigger-image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="<?php the_title(); ?> 封面">
<div class="image-loading"><i></i></div>
<?php } ?>
</div>
<div class="bigger-share col-xs-12 col-sm-6 col-md-6">
<div class="share-btns">
<h3><span>分享本文封面</span></h3>
<p class="text-center">
<a href="<?php echo get_post_meta( get_the_ID(), 'bigger_cover_share', true ); ?>" class="btn btn-primary bigger_share"><i class="fa fa-weibo"></i> 分享到微博</a>
<a href="<?php echo $bigger_cover; ?>" download="<?php the_title();?>-Bigger-cover" class="btn btn-primary bigger_down"><i class="icons icon-cloud-download"></i> 下载封面</a></a>
</p>
</div>
</div>
<div class="btn-close"> <i class="tico tico-close"></i> </div>
</div>
|
到这一步完成后，我们需要的是添加JS代码使用Ajax来向后端function中提交数据进行处理，默认我们的WP系统已带ajax的处理方式，所以我们不用过于担心，将以下JS代码添加至主题主要加载JS的尾部：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$(document).on('click touchstart', '.btn-bigger-cover', function (event) {
event.preventDefault();
var bigger_cover = $('#bigger-cover img');
if (bigger_cover.hasClass('load_bigger_img')) {
$.ajax({
url: "\/wp-admin\/admin-ajax.php",
type: 'POST',
dataType: 'json',
data: bigger_cover.data(),
}).done(function (data) {
if (data.s == 200) {
bigger_cover.attr('src', data.src);
$('.bigger_share').attr('href', data.share);
$('.bigger_down').attr('href', data.src);
bigger_cover.removeClass('load_bigger_img');
$('.image-loading').remove()
} else {
mi_prompt('error', data.m)
}
}).fail(function () {
mi_prompt('error', '网络错误，请稍后再试！')
})
}
});
|
嗯，做到这一步了？不错，现在证明你已完成了50%，因为前端部分已经全部完毕，现在我们需要的是后端的代码添加了。
三、后端函数添加
由于此部分函数数据较大，不方便贴到文章中，请在文末购买后下载，并将下载后文件cover.php中的内容添加到自己主题function.php的?>前或者直接上传cover.php到主题目录中，在function.php中底部引入cover.php即可。
正常的将cover.php中的内容添加后，需要处理最后几处重点事项（所有文件已打包到压缩包中）：
- 注意函数中的
tt_get_option("ID")的调用，替换为自己的 - 注意函数中调用的字体文件，修改为自己的路径（font文件夹）
- 注意函数中几个关联PHP（例如分享PHP）的路径更改为自己的（share文件夹）
- 注意timthumb.php文件丢到主题根目录（可自行更改）
- 以上全部正常后可正常生成封面图
文件下载 https://pan.baidu.com/s/1rVdOQjI8f_vxwVmBSbn1EA
原文 http://www.jpzyfx.com/22764.html