手把手教你,如何让你的WordPress用上必应(Bing)每日一图

必应每日美图

使用过Bing搜索的人都知道。Bing每日一图非常棒,Bing搜索背景图片每天都会更新,非常清晰而且精致,用来做背景图片着这在网站中引用会给网站增色不少,那么我们能不能在WordPress中使用Bing搜索的每日一图吗?答案当然是可以的,而且效果非常好,访问速度也很快。下面稍微简单的给大家介绍这个方法:

第一步:新建文件夹

为什么要新建一个文件夹呢?后续再告诉您。至于文件夹名称呢,建议使用以下格式:

{your name}-bing-hp-image-archive

第二步:在新建的文件夹中,新建一个和文件夹同名的php文件(即后缀名是.php)

也就是把新建的php文件,命名为:{your name}-bing-hp-image-archive.php

第三步:给新建的php文件中,coding(添加代码)

用任意一款您熟悉的文本编辑器,打开我们刚新建的php文件{your name}-bing-hp-image-archive.php,添加如下代码:

<?php
/**
 * @package {Your_Name}_Bing_HP_Image_Archive
 * @version 1.0.0
 */
/**
 * Plugin Name: {Your Name}'s Bing HP Image Archive
 * Description: Change the background of your wordpress to the image which provided by <a href="https://www.bing.com/">Bing</a>.
 * Version: 1.0.0
 * Author: Joytou Wu
 */

const {YOUR_NAME}_BING_HP_IMAGE_ARCHIIVE_OPTIONS = array(
			[
				'id' => 'opacity',
				'name' => 'Opacity',
				'default_value' => 1,
				'type' => 'number',
				'key_value_binding' => [
					'step' => '0.01',
					'min' => '0',
					'max' => '1',
				]
			],
			[
				'id' => 'interface_domain_name',
				'name' => 'Interface Domain Name',
				'default_value' => 'https://www.bing.com',
				'type' => 'url',
				'key_value_binding' => []
			],
			[
				'id' => 'blur',
				'name' => 'Blur',
				'default_value' => 10,
				'type' => 'number',
				'key_value_binding' => []
			],
			[
				'id' => 'brightness',
				'name' => 'Brightness',
				'default_value' => 100,
				'type' => 'number',
				'key_value_binding' => [
					'min' => '0',
					'max' => '200',
				]
			],
			[
				'id' => 'contrast',
				'name' => 'Contrast',
				'default_value' => 100,
				'type' => 'number',
				'key_value_binding' => [
					'min' => '0',
					'max' => '200',
				]
			],
			[
				'id' => 'grayscale',
				'name' => 'Gray Scale',
				'default_value' => 0,
				'type' => 'number',
				'key_value_binding' => [
					'min' => '0',
					'max' => '100',
				]
			],
			[
				'id' => 'hue_rotate',
				'name' => 'Hue Rotate',
				'default_value' => 0,
				'type' => 'number',
				'key_value_binding' => [
					'min' => '0',
					'max' => '360',
				]
			],
			[
				'id' => 'invert',
				'name' => 'Invert',
				'default_value' => 0,
				'type' => 'number',
				'key_value_binding' => [
					'min' => '0',
					'max' => '100',
				]
			],
			[
				'id' => 'saturate',
				'name' => 'Saturate',
				'default_value' => 100,
				'type' => 'number',
				'key_value_binding' => [
					'min' => '0',
					'max' => '200',
				]
			],
			[
				'id' => 'sepia',
				'name' => 'Sepia',
				'default_value' => 0,
				'type' => 'number',
				'key_value_binding' => [
					'min' => '0',
					'max' => '100',
				]
			],
			
);

if(isset($_POST['{your_name}_bing_hp_image_archive_plugin_options'])){
	${your_name}_bing_hp_image_archive_plugin_options = array();
	foreach({YOUR_NAME}_BING_HP_IMAGE_ARCHIIVE_OPTIONS as $option){
		${your_name}_bing_hp_image_archive_plugin_options[$option['id']] = $_POST['{your_name}_bing_hp_image_archive_plugin_options'][$option['id']];
	}
	update_option('{your_name}_bing_hp_image_archive_plugin_options', ${your_name}_bing_hp_image_archive_plugin_options);
	unset(${your_name}_bing_hp_image_archive_plugin_options);
	{your_name}_bing_hp_image_archive_add_settings_error('myUniqueIdentifyer',esc_attr('settings_updated'),'设置已保存。','updated');
}

//自定义add_settings_error函数
function {your_name}_bing_hp_image_archive_add_settings_error( $setting, $code, $message, $type = 'error' ) {
	global $wp_settings_errors;

	$wp_settings_errors[] = array(
		'setting' => $setting,
		'code'	=> $code,
		'message' => $message,
		'type'	=> $type
	);
}

//启用插件
function {your_name}_bing_hp_image_archive_default_options(){
	// 获取选项
	$default = get_option('{your_name}_bing_hp_image_archive_plugin_options');
	if($default == '') {
		// 设置默认数据
		$default = array();
		foreach({YOUR_NAME}_BING_HP_IMAGE_ARCHIIVE_OPTIONS as $option){
			$default[$option['id']] = $option['default_value'];
		}
		//更新选项
		update_option('{your_name}_bing_hp_image_archive_plugin_options', $default);
	}
}
register_activation_hook( __FILE__, '{your_name}_bing_hp_image_archive_default_options' );

//停用插件
function {your_name}_bing_hp_image_archive_stop_option(){
	$option = get_option('{your_name}_bing_hp_image_archive_plugin_options');
	if ($option['Delete']) {
		delete_option("{your_name}_bing_hp_image_archive_plugin_options");
	}
}
register_deactivation_hook(__FILE__, '{your_name}_bing_hp_image_archive_stop_option');

//渲染配置页面布局
function {your_name}_bing_hp_image_archive_render_plugin_settings_page(){
	?>
	<h2>必应每日图片配置</h2>
    <form action="options-general.php?page=hp-image" method="post">
	<?php 
		settings_fields( '{your_name}_bing_hp_image_archive_plugin_options' );
		do_settings_sections( '{your_name}_bing_hp_image_archive_plugin' );
	?>
		<input name="submit" class="button button-primary" type="submit" value="<?php esc_attr_e( 'Save' ); ?>" />
	</form>
	<?php 
}

//添加配置页面
function {your_name}_bing_hp_image_archive_add_settings_page() {
	add_options_page( '必应每日图片配置', '必应每日图片', 'manage_options', 'hp-image', '{your_name}_bing_hp_image_archive_render_plugin_settings_page' );
}
add_action( 'admin_menu', '{your_name}_bing_hp_image_archive_add_settings_page' );

//验证提交字段
function {your_name}_bing_hp_image_archive_plugin_options_validate( $input ) {
	foreach({YOUR_NAME}_BING_HP_IMAGE_ARCHIIVE_OPTIONS as $option){
		$newinput[$option['id']] = trim( $input[$option['id']] );
	}
	return $newinput;
}

//渲染副标题
function {your_name}_bing_hp_image_archive_plugin_section_text() {
	echo '<p>Test sub title</p>';
	var_dump(get_option('{your_name}_bing_hp_image_archive_plugin_options'));
}

foreach({YOUR_NAME}_BING_HP_IMAGE_ARCHIIVE_OPTIONS as $option){
	//如果不存在配置项,则初始化配置项
	if(!isset(get_option('{your_name}_bing_hp_image_archive_plugin_options')[$option['id']])){
		$default = get_option('{your_name}_bing_hp_image_archive_plugin_options');
		$default[$option['id']] = $option['default_value'];
		update_option('{your_name}_bing_hp_image_archive_plugin_options', $default);
	}
	$key_value_binding = '';
	foreach($option['key_value_binding'] as $k=>$v){
		$key_value_binding .= "{$k}=\"{$v}\" ";
	}
	eval("function {your_name}_bing_hp_image_archive_plugin_setting_" . $option['id'] . "(){
			\$storage_options = get_option( '{your_name}_bing_hp_image_archive_plugin_options' );
			echo '<input id=\"{your_name}_bing_hp_image_archive_plugin_setting_" . $option['id'] . "\" name=\"{your_name}_bing_hp_image_archive_plugin_options[" . $option['id'] . "]\" type=\"" . $option['type'] . "\" value=\"'.esc_attr(\$storage_options['" . $option['id'] . "']).'\" " . $key_value_binding . "/>';
		}");
}

//注册配置
function {your_name}_bing_hp_image_archive_register_settings() {
	register_setting( '{your_name}_bing_hp_image_archive_plugin_options', '{your_name}_bing_hp_image_archive_plugin_options', '{your_name}_bing_hp_image_archive_plugin_options_validate' );
	
	add_settings_section( 'api_settings', 'Settings', '{your_name}_bing_hp_image_archive_plugin_section_text', '{your_name}_bing_hp_image_archive_plugin' );
	
	foreach({YOUR_NAME}_BING_HP_IMAGE_ARCHIIVE_OPTIONS as $option){
		add_settings_field( '{your_name}_bing_hp_image_archive_plugin_setting_'.$option['id'], $option['name'], '{your_name}_bing_hp_image_archive_plugin_setting_'.$option['id'], '{your_name}_bing_hp_image_archive_plugin', 'api_settings' );
	}
}
add_action( 'admin_init', '{your_name}_bing_hp_image_archive_register_settings' );

//头部css样式
function {your_name}_bing_hp_image_archive_css(){
	$blur = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['blur']);
	$opacity = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['opacity']);
	$brightness = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['brightness']);
	$contrast = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['contrast']);
	$grayscale = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['grayscale']);
	$hue_rotate = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['hue_rotate']);
	$invert = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['invert']);
	$saturate = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['saturate']);
	$sepia = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['sepia']);
	echo "
		<style type='text/css'>
			body,.glass {
				height:100%;}.glass{
				background: url('".get_bing_img_cache()."');
				background-repeat: no-repeat;
				background-position: center center;
				background-attachment: fixed;
				background-size: cover;
			}
			.glass{
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				-webkit-filter: blur({$blur}px) brightness({$brightness}%) contrast({$contrast}%) grayscale({$grayscale}%) hue-rotate({$hue_rotate}deg) invert({$invert}%) saturate({$saturate}%) sepia({$sepia}%);
				-moz-filter: blur({$blur}px) brightness({$brightness}%) contrast({$contrast}%) grayscale({$grayscale}%) hue-rotate({$hue_rotate}deg) invert({$invert}%) saturate({$saturate}%) sepia({$sepia}%);
				-ms-filter: blur({$blur}px) brightness({$brightness}%) contrast({$contrast}%) grayscale({$grayscale}%) hue-rotate({$hue_rotate}deg) invert({$invert}%) saturate({$saturate}%) sepia({$sepia}%);
				-o-filter: blur({$blur}px) brightness({$brightness}%) contrast({$contrast}%) grayscale({$grayscale}%) hue-rotate({$hue_rotate}deg) invert({$invert}%) saturate({$saturate}%) sepia({$sepia}%);
				filter: blur({$blur}px) brightness({$brightness}%) contrast({$contrast}%) grayscale({$grayscale}%) hue-rotate({$hue_rotate}deg) invert({$invert}%) saturate({$saturate}%) sepia({$sepia}%);
				filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius={$blur}, MakeShadow=false) progid:DXImageTransform.Microsoft.BasicImage(brightness={$brightness}, contrast={$contrast}, grayscale={$grayscale}, hue-rotate={$hue_rotate}deg, invert={$invert}, saturate={$saturate}, sepia={$sepia});
				opacity:{$opacity};
				z-index:0;
			}
			.content{
				position:absolute;
				z-index:10;
			}
		</style>
	";
}

//根据api获取必应每日图片的地址
function {your_name}_bing_hp_image_archive_url(){
	$ws = esc_attr(get_option('{your_name}_bing_hp_image_archive_plugin_options')['interface_domain_name']);
	return $ws.json_decode(file_get_contents($ws.'/HPImageArchive.aspx?format=js&cc=zh&idx=0&n=1'),true)['images'][0]['url'];
}

//获取并存储图片
function get_bing_img_cache()
{
	// 获取 wp 路径
	$imgDir = wp_upload_dir();
	$bingDir = $imgDir['basedir'].'/bing';
	if (!file_exists($bingDir)) {
		mkdir($bingDir, 0755);
	}
	$today = md5(mktime(0,0,0,date('m'),date('d'),date('Y')));
	// 是否存在今日图片
	if (!file_exists($bingDir.'/'.$today.'.jpg')) {
		if ($dh = opendir($bingDir)){
			while (($file = readdir($dh)) !== false){
				if($file!=='.' && $file!=='..'){
					unlink($bingDir.'/'.$file);
				}
			}
			closedir($dh);
		}
		$content = file_get_contents({your_name}_bing_hp_image_archive_url());
		file_put_contents($bingDir.'/'.$today.'.jpg', $content); // 写入今天的
		$src = $imgDir['baseurl'].'/bing/'.$today.'.jpg';
	} else {
		// 存在
		$src = $imgDir['baseurl'].'/bing/'.$today.'.jpg';
	}
	return $src;
}

//尾部js脚本
function {your_name}_bing_hp_image_archive_load_script(){
	echo "
		<script>
			(function(){
				let body = document.querySelector('body');
				body.innerHTML=<div class='glass'></div><div class='content'>+body.innerHTML+</div>;
			})();
		</script>
	";
}

add_action('wp_head', '{your_name}_bing_hp_image_archive_css');
add_action('wp_footer', '{your_name}_bing_hp_image_archive_load_script');

以上所有内容(包括文件夹/文件名称、代码)中,您需要修改/替换部分字符,才能保证正常运行。

这里假设您叫”example me”,那么:

  • {your name}替换为example me
  • {Your Name}替换为Example Me
  • {YOUR NAME}替换为EXAMPLE ME
  • {your_name}替换为example_me
  • {Your_Name}替换为Example_Me
  • {YOUR_NAME}替换为EXAMPLE_ME
  • {your-name}替换为example-me
  • {Your-Name}替换为Example-Me
  • {YOUR-NAME}替换为EXAMPLE-ME

第四步:打包并上传

利用任意一款您最熟悉的压缩包工具,把以上的文件夹打包压缩成zip压缩包。

打开您的WordPress后台并登录,进入插件 -> 安装插件 -> 上传插件 -> 选择刚才您打包的压缩包 -> 现在安装 -> 等待… -> 启用插件。

至此,所有步骤您已完成。现在可以开始享受您的WordPress可以和Bing拥有一样的背景图片。至于插件的设置/配置,位于 设置 -> {Your Name} Bing HP Image Archive。具体每一项设置,如果不懂的话,可以百度必应或者谷歌,或者其它您熟悉的搜索引擎进行搜索。

留下评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

%d 博主赞过: