- A+
改造流程：
一、改造主题设置选项卡
找到自己主题设置选项卡PHP文件，本站的就是options.php，然后在相应的选项卡后添加自己的栏目（每个人主题不一样，函数也不一样，请根据自己主题的选项卡函数进行配置，只提供代码例子作为思路，基本大同小异），总共添加五个选项：
参考代码如下：
-
//封面设置$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这个函数，那么代码为：
-
tt_get_option("bigger_logo")
至此，我们的准备工作OK了，有人可能要提问了，说为什么要加这个功能？如果在不是特别需要该功能情况下想关闭生成封面，你是不是需要一个开关来决定此功能OFF/ON？好了废话不多说，我们继续进入正题！
二、改造文章页底部
我们找到自己主题的文章页脚PHP，找到与之相等的按钮旁新增一个按钮，注意啦，这里就要用到配置项来决定该按钮是否显示了，具体参考代码：
-
<?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例子：
-
<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的尾部：
-
$(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文件丢到主题根目录（可自行更改）
- 以上全部正常后可正常生成封面图
