- 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文件丢到主题根目录(可自行更改)
- 以上全部正常后可正常生成封面图