Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
改造流程：
一、改造主题设置选项卡
找到自己主题设置选项卡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