WordPress 添加海报共享功用

如题，该功用首要用于生成一份海报页面，具体闪现作用如下：

代码参阅自精品资源共享博客，原代码存在一些问题引起增加后不能正常运用，自己对代码做了些简略调整，具体调整内容如下：

• 中心代码打包至 poster 文件夹，便利调用及维护
• 更改上传目录为 upload/posterimg （原代码将海报直接上传到媒体库并与文章相关联，而且每次都会生成新的海报，时刻长了会引起媒体库臃肿，堆积大量无用文件）
• 调整前段闪现款式（新的款式更美观）
• 还有一些其他的。。。（我也忘了具体是什么了☹）

运用前请留心：

• PHP 必需敞开 GD 库，绘制海报图片要用到。敞开方法看这儿>>>PHP 怎么敞开 GD 库？
• 必需引入 jQuery ，javascript 中 AJAX 提交到 admin-ajax.php 处置要用到

好了，下面简略说下运用方法。

single.php 文件批改

在single.php 文件中适合位置增加如下代码（前端按钮）：

<a class=\"btn-bigger-cover\" data-nonce=\"ID );?>\" data-id=\"ID; ?>\" data-action=\"create-bigger-image\" id=\"bigger-cover\" href=\"javascript:;\"> 生成海报

footer.php 文件批改

在footer.php 文件中增加如下代码（前端弹窗）：

functions.php 文件批改

在footer.php 文件中增加如下代码（海报生成）：

生成海报失利的缘由

假设海报生成失利了，或许是下面这段 js 代码中途径的问题，默许是没有将 WordPress 设备到子目录的方式，将其批改为你网站的 admin-ajax.php 文件位置应该就能够了。

/** 
  * @name 生成共享海报
  * @author 蝈蝈要安静 | 一个不学无数的伪程序员（修订）
  * @url https://blog.quietguoguo.com 
  * @version 2019年03月19日修订版
  */
//提交到wordpress自带的ajax处置
$(document).on(\'click touchstart\', \'.btn-bigger-cover\', function (event) {
    event.preventDefault();
    var bigger_cover = $(\'.poster-image img\'),
        btn_bigger_cover = $(\'#bigger-cover\');
    if (bigger_cover.hasClass(\'load-poster-img\')) {
        $.ajax({
			//url: jsui.ajax_url,
			url: \'\\/wp-admin\\/admin-ajax.php\',    // 这中心改成自己的 admin-ajax.php 地址
            type: \'POST\',
            dataType: \'json\',
            data: btn_bigger_cover.data(),
        }).done(function (data) {
            if (data.s == 200) {
                bigger_cover.attr(\'src\', data.src);
                $(\'.poster-share-weibo\').attr(\'href\', data.share_weibo);
				$(\'.poster-share-qzone\').attr(\'href\', data.share_qzone);
				$(\'.poster-share-qq\').attr(\'href\', data.share_qq);
				$(\'.poster-share-renren\').attr(\'href\', data.share_renren);
                $(\'.poster-down\').attr(\'href\', data.src);
                bigger_cover.removeClass(\'load-poster-img\');
                $(\'.image-loading\').remove();
            } else {
                alert( data.m );
            }
        }).fail(function () {
            alert(\'Error：网络错误，请稍后再试！\');
        })
    }
    $(\'.poster-share\').css({\'opacity\':\'1\',\'visibility\':\'inherit\'});   

});
//封闭窗口
$(document).on(\'click touchstart\',\'.poster-close\',function() {
    $(\'.poster-share\').css({\'opacity\':\'0\',\'visibility\':\'hidden\'}); 
});

假设按以上步骤设置正确了 ，那么你的主题应该从前完成了海报共享的功用。

假设你是的主题运用了 OptionsFrameWork 结构建立的后台设置面板，那么下面的步骤将有助于你生成一些后台操控按钮。

options.php 文件批改

将以下代码增加到主题 options.php 文件中去（部分主题或许不叫这名）：

//蝈蝈海报
$options[] = array(
    \'name\' => __( \'蝈蝈海报\', \'QGG\' ),
    \'type\' => \'heading\'
);
// 共享海报 
$options[] = array(
    \'name\' => __(\'海报功用敞开\', \'QGG\'),
    \'id\' => \'poster_share_open\',
    \'std\' => true,
    \'desc\' => __(\'敞开\', \'QGG\'),
    \'type\' => \'checkbox\');
$options[] = array(
    \'name\' => __( \'默许头部大图\', \'QGG\' ),
    \'desc\' => __( \'上传一张闪现在封面顶部的大图\', \'QGG\' ),
    \'id\' => \'poster_default_img\',
    \'std\' => \'\',
    \'type\' => \'upload\'
);
$options[] = array(
    \'name\' => __( \'左下角LOGO\', \'QGG\' ),
    \'desc\' => __( \'上传一张闪现在封面底部的LOGO\', \'QGG\' ),
    \'id\' => \'poster_logo\',
    \'std\' => \'\',
    \'type\' => \'upload\'
);
$options[] = array(
    \'name\' => __( \'网站宣传语\', \'QGG\' ),
    \'desc\' => __( \'闪现在LOGO下方的一句宣传语\', \'QGG\' ),
    \'id\' => \'poster_desc\',
    \'std\' => \'\',
    \'type\' => \'text\'
);
$options[] = array(
    \'name\' => __( \'右下角二维码\', \'QGG\' ),
    \'desc\' => __( \'敞开后将再封面图的右下角现在当前文章的二维码\', \'QGG\' ),
    \'id\' => \'share_poster_img_qrcode\',
    \'std\' => false,
    \'type\' => \'checkbox\'
);

single.php 文件调整

将 single.php 文件中的调用代码调整为如下代码：

    

        <a class=\"btn-bigger-cover\" data-nonce=\"ID );?>\" data-id=\"ID; ?>\" data-action=\"create-bigger-image\" id=\"bigger-cover\" href=\"javascript:;\"> 生成海报
    

poster.php 文件调整

取消 poster.php 文件中如下代码的注释（大约在342行位置）：

// 获取海报底部二维码图片
//if(QGG_Options(\'share_poster_img_qrcode\')){
$qrcode_img = get_template_directory_uri().\'/poster/functions/qrcode.php?data=\'.get_the_permalink($post_id);
//}else{
//$qrcode_img = NULL;
//}

应该就这些了，其他问题留言吧。