WordPress开发日志：利用Ajax添加文章页自动推送并显示推送结果

智能摘要 AI

百度于2020年12月下线了“普通收录工具-自动推送入口”，导致无法自动将文章推送给百度站长。作者为此重新开发了自动推送功能，前端显示文章是否被收录及推送结果，并设计了UI界面和API接口。UI设计包括未收录、已收录、百度LOGO等元素；API设计分为检查收录和推送文章两部分，分别通过`Check_record.php`和`push_baidu.php`实现。前端使用JavaScript动态修改文本和图片，并通过Ajax请求与后端交互。最终实现了当用户访问文章时，系统自动尝试将其推送给百度站长，并反馈推送结果。

百度于2020年12月12日发送了一则令人叹息的消息提醒：普通收录工具-自动推送入口下线。已经快要一年了，这个工具也没有再次上线。虽然push.js仍然能够访问，但是接口早已关闭，所以已经没什么用。为了再次重现这个功能，并且在前端显示文章是否收录，推送成功，推送失败，我决定利用已有知识，重写自动推送功能，实现访问文章即可自动推送文章到百度站长。

在此之前，我想起了百度站长曾经还有闭站保护功能，不过也是下线，再也没有上线，所以百度的自动推送功能也应该不会再上线。文章最后将会附上本问的源码，有需要的小伙伴可以根据自己网站的情况进行修改。

UI设计

首先我们需要设置一个较为好看的展示UI，这里以我的站点为例：

为了更好地展示，我这里截图就截大一点。

我们需要做的是下面的3个设计，详细列出来方便各位读者阅读：

`未收录`	显示`未收录，正在推送`，推送后返回是否推送成功，并且显示推送加载图
`已收录`	显示`百度已收录`，并且不进行操作
`UI`	`百度LOGO`，`Loading GIf`，`文字回显`

UI设计

API设计

为了维护方便，建议写两个PHP API，一个用来检测收录，一个用来推送：

`Check_record.php`	自定义`BD_Curl`获取记录并返回对应的JSON
`push_baidu.php`	官方提供的`PHP`例子+`JSON`返回

API设计

现在网络上大多数的check_record（检测百度是否收录）大部分已经失效，我们这里自定义一个BD_Curl来获取记录值，对于本地和服务器均有效。为了更直观的展示BD_Curl函数，我单独将它放到了baidu_check.php文件，需要的时候直接include方便程序的编写。

Baidu_check

<?php
header("Content-Type: application/json; charset=utf-8");
$url = (isset($_GET['url']))?$_GET['url']:$_POST['url'];
if(empty($url)) {
	echo json_encode(array('code' => '-1','msg' => '未传入URL'),320);
	exit();
}
$count = baidu_check ($url);
if(!isset($count))  json_encode(array('code'=>0,'msg'=>'查询失败，请重试！'));
if(!$count)  $count = 0;
$result=array(
    'code'=>1,
    'url'=>$url,
    'is_shoulu'=>$count
);
echo json_encode($result,320);


function baidu_check($url){
        $url='https://www.baidu.com/s?ie=utf-8&tn=baidu&wd='.$url;
        $rs=iconv("UTF-8","GB2312//IGNORE",BD_curl($url));//转码
		//var_dump($rs);
		if(!strpos($rs,'没有找到该URL。您可以直接访问') && !strpos($rs,'很抱歉，没有找到与') ){
			return 1;
		}
		else
			return 0;

}

function BD_curl($url, $post=0, $referer=0, $cookie=0, $header=0, $ua=0, $nobaody=0){
    $ch = curl_init();
    $ip = rand(0,255).'.'.rand(0,255).'.'.rand(0,255).'.'.rand(0,255) ;
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    //$httpheader[] = "Host: www.baidu.com";
    //$httpheader[] = "Connection: keep-alive";
    //$httpheader[] = "Upgrade-Insecure-Requests: 1";
    //$httpheader[] = "User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36";
    $httpheader[] = "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8";
    $httpheader[] = "Accept-Encoding: gzip, deflate, sdch, br";
    $httpheader[] = "Accept-Language: zh-CN,zh;q=0.8";
    //$httpheader[] = 'X-FORWARDED-FOR:'.$ip;
    //$httpheader[] = 'CLIENT-IP:'.$ip;
    curl_setopt($ch, CURLOPT_HTTPHEADER, $httpheader);
    if ($post) {
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
    }
    if ($header) {
        curl_setopt($ch, CURLOPT_HEADER, true);
    }
    if ($cookie) {
        curl_setopt($ch, CURLOPT_COOKIE, $cookie);
    }
    if($referer){
        if($referer==1){
            curl_setopt($ch, CURLOPT_REFERER, 'https://music.163.com/outchain/player?type=0&id=2250011882&auto=1');
        }else{
            curl_setopt($ch, CURLOPT_REFERER, $referer);
        }
    }
    if ($ua) {
        curl_setopt($ch, CURLOPT_USERAGENT, $ua);
    }
    else {
        curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1");
    }
    if ($nobaody) {
        curl_setopt($ch, CURLOPT_NOBODY, 1);
    }
    curl_setopt($ch, CURLOPT_TIMEOUT, 3);
    curl_setopt($ch, CURLOPT_ENCODING, "gzip");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $ret = curl_exec($ch);
    //$Headers = curl_getinfo($ch);
    curl_close($ch);
    return $ret;
}

返回查询后的原文本，不会触发百度验证码机制，避免后续的检测收录误判。

Check_record

<?php
header("Content-Type: application/json; charset=utf-8");
$url = (isset($_GET['url']))?$_GET['url']:$_POST['url'];
if(empty($url)) {
	echo json_encode(array('code' => '-1','msg' => '未传入URL'),320);
	exit();
}
$count = baidu_check ($url);
if(!isset($count))  json_encode(array('code'=>0,'msg'=>'查询失败，请重试！'));
if(!$count)  $count = 0;
$result=array(
    'code'=>1,
    'url'=>$url,
    'is_shoulu'=>$count
);
echo json_encode($result,320);

function baidu_check($url){
        $url='https://www.baidu.com/s?ie=utf-8&tn=baidu&wd='.$url;
        $rs=iconv("UTF-8","GB2312//IGNORE",BD_curl($url));//转码
		//var_dump($rs);
		if(!strpos($rs,'没有找到该URL。您可以直接访问') && !strpos($rs,'很抱歉，没有找到与') ){
			return 1;
		}
		else
			return 0;
	
}

显示JSON格式的字符串，便于后续通过Ajax请求获取返回值，达到修改前端页面的效果

{
    "code":1,
    "url":"http://127.0.0.1/1.html",
    "is_shoulu":0
}

参数	说明
code	状态
url	传入的url
is_shoulu	返回是否收录

JSON说明

Push_baidu

<?php
header('Content-type: application/json');
$url = (isset($_GET['url']))?$_GET['url']:$_POST['url'];
if(empty($url)) {
	echo json_encode(array('code' => '-1','msg' => '未传入URL'),320);
	exit();
}
$api = 'http://data.zz.baidu.com/urls?site=https://blog.eswlnk.com&token=DaH9k9aKtitF9qtU';
$ch = curl_init();
$options =  array(
    CURLOPT_URL => $api,
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POSTFIELDS => $url,
    CURLOPT_HTTPHEADER => array('Content-Type: text/plain'),
);
curl_setopt_array($ch, $options);
$result = curl_exec($ch);
$result = json_decode($result,true);
	if($result["success"])
		$status=1;//提交成功
	else
		$status=0;//提交失败
$result=array(
    'code'=>$status,
    'url'=>$url,
);
echo json_encode($result,320);

同样也显示JSON字符串，便于后续的Ajax请求，以下是该PHP显示的JSON：

{
    "code":0,
    "url":"http://127.0.0.1/1.html"
}

参数	说明
code	`1`为收录，`0`没有收录
url	传入的url

收录JSON

同样地，你也可以选择使用file_get_contents()函数来获取查询是否收录，不过我并不推荐选择使用这种办法。

完成API后，我们的工作基本上就完成一大半了，接下来我们开始处理前端的JS文件。

前端JS编写

JS文件需要实现以下功能：

动态修改文本状态
动态修改图片
Ajax请求

冻手，写起来！

JS选择器

在这个操作之前，我们需要先了解JS的选择器： jQuery DOM

这里我们为了方便，引入jQuery.js，方便选择元素和Ajax请求。

我推荐使用document.getElementById和$("id")通过标签的id来获取标签，获取到后，我们就可以修改标签内的属性，例如src、style等等。

例如下面这个例子：

<p id="id03">Hello Shanghai!</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("id03");
document.getElementById("demo").innerHTML = "段落 id03 的文本是：" + myElement.innerHTML;
</script>

运行代码后，显示：

如果你有一定的编程基础，理解还是很容易的，实在不懂的话，可以到W3 School学习学习

W3 School

Ajax请求

前端想要实现本章的查询效果，就需要ajax请求，所以在编写之前，我们需要先来了解一下Ajax请求。

参数	描述
type	POST,GET等方法，默认一般为Get
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

例如下面一个简单的例子：

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax
(
{ 
  url:"/jquery/test1.txt",
}
);
  $("#myDiv").html(htmlobj.responseText);
  });
});
</script>
</head>
<body>

<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>

</body>

了解完基础的Ajax后，我们就可以开始编写JS文件。

动态修改文本状态

我们需要挑选需要的标签，例如本站的my_a （<a>标签）和 my_gif (<img>标签)，并编写对应的js函数：

document.getElementById("my_a").innerHTML = "Text";

动态修改图片

function change_to_loading(){
	var obj=document.getElementById("my_gif");
	obj.src="https://xxxx/shoulu_loading.gif";
}
function change_to_ico(){
	var obj=document.getElementById("my_gif");
	obj.src="https://cccc/baidu.ico";
}

Ajax请求

编写ajax请求，这部分相对来说也就比较简单了，我这里就举几个例子：

url：请求API接口路径
data：传入的URL数据
cache：是否缓存
async：是否同步
success：成功回传
dataType：数据类型，默认自动选择

function su_ajax(message){
console.log(typeof message);
  if(message['is_shoulu']==0)//没有收录
	{//提交
	var n = document.getElementById("my_a");
	n.innerHTML = "未收录，正在推送";
	change_to_loading();
		$.ajax
		({
		url: 'xxx.php',//推送php文件
		data: {"url":window.location.href},
		cache : false,
		async : true,
		success:function (message) 
		{
		   tuisong(message);
		},
		dataType: "json"
		});
	}
}

function tuisong(message){
sleep(3000).then(() => {
if(message["code"]!=0)//推送成功
{
	document.getElementById("my_a").innerHTML = "推送成功";
}
else
	document.getElementById("my_a").innerHTML = "推送失败";
change_to_ico();
})
}

效果展示

完成上述操作后，本次的wordpress的二次开发就完成了，如果您能够看到这里，请给自己点个赞，我十分欣赏、佩服你的决心和耐心.

我们欢迎志同道合或者聊天吹水的您加入我们！

Push_baidu&Check_record

包含Ajax的例子和API文件

类型： rar 大小： 3KB 提取码： ****

WordPress开发日志：利用Ajax添加文章页自动推送并显示推送结果

UI设计

API设计

Baidu_check

Check_record

Push_baidu

前端JS编写

JS选择器

Ajax请求

动态修改文本状态

动态修改图片

Ajax请求

效果展示

评论 (1)

Eswlnk

随便看看

文章目录

专题展示

WordPress⁵³

工程实践³⁷

WordPress开发日志：利用Ajax添加文章页自动推送并显示推送结果

UI设计

API设计

Baidu_check

Check_record

Push_baidu

前端JS编写

JS选择器

Ajax请求

动态修改文本状态

动态修改图片

Ajax请求

效果展示

评论 (1)

猜你喜欢

Eswlnk

随便看看

文章目录

专题展示

WordPress53

工程实践37

热门标签

WordPress⁵³

工程实践³⁷