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

WordPress开发日志:利用Ajax添加文章页自动推送并显示推送结果插图
百度自动推送下线

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

UI设计

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

WordPress开发日志:利用Ajax添加文章页自动推送并显示推送结果插图2
推送成功UI展示
WordPress开发日志:利用Ajax添加文章页自动推送并显示推送结果插图3
百度已收录UI展示

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

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

未收录显示未收录,正在推送,推送后返回是否推送成功,并且显示推送加载图
已收录显示百度已收录,并且不进行操作
UI百度LOGOLoading 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方便程序的编写。
WordPress开发日志:利用Ajax添加文章页自动推送并显示推送结果插图4
YUN API

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"
}
参数说明
code1为收录,0没有收录
url传入的url
收录JSON

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

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

前端JS编写

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

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

冻手,写起来!

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

JS选择器

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

WordPress开发日志:利用Ajax添加文章页自动推送并显示推送结果插图6
择选择器

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

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

例如下面这个例子:

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

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

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

运行代码后,显示:

WordPress开发日志:利用Ajax添加文章页自动推送并显示推送结果插图7
代码运行

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

W3 School

Ajax请求

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

参数描述
typePOST,GET等方法,默认一般为Get
url必需。规定把请求发送到哪个 URL。
data可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)可选。请求成功时执行的回调函数。
dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。
WordPress开发日志:利用Ajax添加文章页自动推送并显示推送结果插图8

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

<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函数:

WordPress开发日志:利用Ajax添加文章页自动推送并显示推送结果插图9
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开发日志:利用Ajax添加文章页自动推送并显示推送结果插图10

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

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

Push_baidu&Check_record
包含Ajax的例子和API文件
类型: rar 大小: 3KB 提取码: ****