分类： note

WordPress引用外链图片无法显示的问题
此文解决我搭了个图床，在文章里引用图片却死活显示不出来的问题。原因跟http和https有关，博客开启ssl后，引用的图片url没有ssl的话，就显示不出，如果不想折腾ssl，就按照以下方法操作。

症状：

在博客文章或者页面引用外链的图片时，图片无法显示，复制图片路径到浏览器打开时，图片可以正常显示。

解决：

插入外链图片时，在图片URL前加上“//images.weserv.nl/?url=”，事例如下：

原路径
```
<img src="https://ygs.im/image.jpg" alt="image">
```
修改后
```
<img src="//images.weserv.nl/?url=https://ygs.im/image.jpg" alt="image">
```
wsrv.nl是一款图片镜像缓存服务，原用于加速（不知道加什么速，反正国内访问会很慢）图片访问，具有全球、缓存、调整大小、开源的属性。个人觉得这个工具可以好好研究一下。
2024年9月3日

WordPress关键词和描述优化

总的来说WordPress对标题没什么特别的SEO处理，主题头部信息也没有keyword和description标签，这样在搜索引擎结果看来，就是把页面所有内容截取一些出来揉成一团，乱糟糟。所以手动优化是很有必要的，这些代码是很久以前，大概有8年了，从一开始弄博客就在用了，发现到现在还是有用的，百度显示的网站描述就是description的内容，工整多了。

而且这段代码分别为不同的页面设置不同的关键词和描述，代码很简单，最复杂的就在文章页面的description，以前折腾的时候发现最后的字符会乱码，所以弄了一下，反正我现在看不懂，意思在就行了。

<?php if(is_front_page()) { ?>
	<meta name="description" content="这里是YGS的个人博客，主要记录生活、发发照片，偶尔做做笔记，甚少分享Wordpress建站相关的、众所周知的小技巧。" />	<meta name="keywords" content="ygs,wordpress,jquery,博客" />
<?php } elseif ( is_tag() ) { ?>
	<meta name="description" content="与<?php single_tag_title(); ?>有关的内容" />
	<meta name="keywords" content="<?php single_tag_title(); ?>" />
<?php } elseif ( is_category() ) { ?>
	<meta name="description" content="与<?php wp_title(''); ?>有关的内容" />
	<meta name="keywords" content="<?php wp_title(''); ?>" />
<?php } elseif ( is_single() ) { $description=mb_substr(strip_tags($post->post_content),0,100,'utf-8'); $description = str_replace(array("\r\n", "\r", "\n"," ",""), "", $description); $keywords=""; $tags=wp_get_post_tags($post->ID); foreach( $tags as $tag ) { $keywords=$keywords.$tag->name.","; } ?>
	<meta name="description" content="<?php echo $description; ?>" />
	<meta name="keywords" content="<?php echo rtrim($keywords,","); ?>" />
<?php } elseif ( is_page() ) { ?>
	<meta name="description" content="<?php bloginfo('description'); ?>" />
	<meta name="keywords" content="ygs,博客" />
<?php } ?>

2019年1月8日

百度抓取诊断出现其他错误

在使用百度得搜索资源平台的网页抓取诊断时发现抓取错误，访问没异常，奇怪啊，代码040是什么飞机？百度不到答案，看了一下抓取详情，返回HTTP头信息都是错的，不完整，很可能是运行环境的问题。

我在另外一个主机上也试一下抓取诊断，正常，发现是PHP的版本不同，出现问题的主机安装的是7.X的，为了验证是否PHP版本有问题，只有把PHP换成5.4，结果你猜怎样？访问错误。

所以重新安装PHP后需要在面板-站点设置那里重新选择一下PHP版本，虽然只有一个版本，也就是更新一下设置的意思。然后运行抓取诊断，嗯，正常了。

2019年1月3日
jQuery Cookie 插件
第一次接触 JavaScript 的 Cookie 是在大三的时候，当时用 WordPress 模仿“最土”的团购模板，也就是美团第一个版本，因为后台的东西不太懂，也不会编插件，于是乎，除了评论表单项目增加了内容外，其余功能一概前台处理。当时连清除浮动也不知道是什么玩意，却糊里糊涂的在 WordPress 上实现了团购功能，当然，没有支付功能，因为，是校内团购，给现金，哈哈。

言归正传，那时候的团购网站基本都一个样，首页会显示一个提示框，右上角有关闭按钮，我要实现的就是关闭然后不再显示的功能，我就想到了用 Cookie 来记住这个动作。现在我看回当时的代码，我看不明白了…
```
function turnoff(obj) {
	var the_date = new Date("December 21, 2012");
	var the_cookie_date = the_date.toUTCString();
	document.cookie = "guide_status=guide_close;expires=" + the_cookie_date;
	document.getElementById(obj).style.display = "none";
}
function readcookie(the_info) {
	var the_cookie = document.cookie;
	var the_cookie = unescape(the_cookie);
	var pair_cookie = the_cookie.split(";");
	var property_value = "";
	for (loop = 0; loop < pair_cookie.length; loop++) {
		property_value = pair_cookie[loop];
		var broken_info = property_value.split("=");
		var the_property = broken_info[0];
		var the_value = broken_info[1];
		the_info[the_property] = the_value;
		if (the_info[the_property] == "guide_close") document.getElementById('guidebar').style.display = "none";
	}
}
var cookie_information = new Array(); 
```
学习 JavaScript 可以扎实基础，使用 jQuery 可以简单快速实现功能。于是乎，我现在使用 jQuery 的 Cookie 插件，实现记住显示隐藏边栏的功能。这个插件两年前，我就使用过，也是实现相同的功能，我翻回当时的代码，稍作修改，就可以工作了。当我想把代码改得更完美的时候，问题却出来了，我花了一个下午的时间来调，一直找不到原因，甚至我把代码重写也不能正常使用…这是闹哪样，搞得我脖子都酸痛了。后来，在下班前糊里糊涂又搞好了，原因是，变量赋值问题，我现在说不出具体的，日后再说吧。上一下代码。
```
$(function() {
	$('.sidebar-switch a').click(function() {
		if ($('#sidebar').is(':visible')) {
			$.cookie('sidebar', 'hide');
			$('#sidebar').fadeOut().parent().animate({width: "640px"},600).removeClass('container-wide');
			$(".sidebar-switch a").text("SidebarOFF");
		}
		else {
			$.cookie('sidebar', 'show');
			$('#sidebar').fadeIn().parent().animate({width: "840px"},600);
			$(".sidebar-switch a").text("SidebarON");
		};
	});
	var thesidebar = $.cookie("sidebar");
	if (thesidebar == "show") {
		$('#sidebar').show().parent().addClass('container-wide');
		$(".sidebar-switch a").text("SidebarON");     
	}
}); 
```
由于模板结构不同，HTML 、CSS、jQuery 都要作改动才能使用。

言归正传，jQuery Cookie 插件的使用方法。插件主页：http://plugins.jquery.com/cookie/，使用前加载像加载 jQuery 一样加载插件是必须的。

创建 cookie:
```
$.cookie('the_cookie', 'the_value');
```
创建临时 cookie, 7 天之后过期:
```
$.cookie('the_cookie', 'the_value', { expires: 7 });
```
创建临时 cookie, 7 天之后过期，并且作用于整个站点的:
```
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
```
读取 cookie:
```
$.cookie('the_cookie'); // => "the_value" $.cookie('not_existing'); // => undefined
```
读取所有 cookies:
```
$.cookie(); // => { "the_cookie": "the_value", "...remaining": "cookies" }
```
删除 cookie:
```
// 存在 Cookie 返回 true, 否则返回 false... $.removeCookie('the_cookie'); 
// 写法跟上面一样... $.removeCookie('the_cookie', { path: '/' });
```
2013年12月15日
WordPress 显示同分类下的上一篇、下一篇链接方法
一直有使用上下篇的链接，一直都发现默认是把全分类文章按发表的时间先后来确定链接，就是一直没有把这个修改成想要的统一分类下的文章链接，今天终于把它修改好了。

要想很好的理解这一原理，先来学习一下Wordpress的上一篇、下一篇的函数格式：
```
<?php previous_post_link($format, $link, $in_same_cat = false, $excluded_categories = ''); ?>
<?php next_post_link($format, $in_same_cat = false, $excluded_categories = ''); ?>
```
说明：

$format：格式化被显示的字符串，缺省值是 « %link，第二个函数缺省值是 %link »。
$link：被显示的字符串，缺省值是上一篇或下一篇的 $title，也可以设置为其它你想显示的字符串。
$in_same_cat ：表示是显式同一类别下的文章还是不区分类别的文章，缺省值 false 表示不区分类别，只以发帖的时间先后来确定。
$excluded_categories：表示在显示上一篇或下一篇时是否排除掉某分类，缺省不排除，如果排除，把分类ID列在此处，以英文逗号分隔。

于是大家都看出来了，实现同分类下的上一篇、下一篇链接，只要在上面的基础上添加一个判断：true，当同分类下存在文章时就显示出来。
```
<?php if (get_previous_post()) { previous_post_link('上一篇: %link','%title',true);} else { echo "没有了，已经是最后文章";} ?>
<?php if (get_next_post()) { next_post_link('上一篇: %link','%title',true);} else { echo "没有了，已经是最新文章";} ?>
```
但是这里也有一个问题就是当指定了同分类下的上一篇、下一篇时，会依然显示空白，而不是输出代码中的“已经是最后文章”，所以我们还需要给特定的分类下指定ID就行了。代码如下：
```
<?php
$categories = get_the_category();
$categoryIDS = array();
foreach ($categories as $category) {
array_push($categoryIDS, $category->term_id);
}
$categoryIDS = implode(",", $categoryIDS);
?>
<?php if (get_previous_post($categoryIDS)) { previous_post_link(‘上一篇: %link’,'%title’,true);} else { echo “没有了，已经是最后文章”;} ?>
<?php if (get_next_post($categoryIDS)) { next_post_link(‘上一篇: %link’,'%title’,true);} else { echo “没有了，已经是最新文章”;} ?> 
```
2013年4月27日
WordPress 如何调用 jQuery 库
本文中将讲解调用 jQuery 的几种方法，当然都是针对 WordPress 的，请自行按喜好进行选择：
WP 的 jQuery 和原版唯一的不同, 就是在最后一行加了
```
jQuery.noConflict(); 
```
这个 noConflict() 就是为了与其它的 library 兼容性, 如: Prototype, MooTools, 或 YUI.
第一种方法，直接在网上搜索到的 jQuery 特效，然后对其进行直接调用：
```
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jQuery.js"></script>
```
2.使用 Google 的 API 库进行调用，貌似很多 jQuery 都是这样调用的，很多插件通过 Google API 替换了 WP 默认的 jQuery，利用谷歌强大的服务器来加快其调用加载速度。
```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.2.3/jQuery.min.js">
```
3.直接调用 WordPress 自带的 jQuery 库：
```
<?php wp_enqueue_script('jQuery'); ?>
```
但要注意的是：此句必需加在 wp_head(); 的前面！
并且在js文件中的写法是:
```
jQuery(document).ready(function($) { … }); 
```
这样 jQuery() 包里的所有 $() 才能被正确识别.
当然也可以使用以下方法，将：
```
$(document).ready(function() { … });
```
修改为：
```
jQuery(document).ready(function($) { … });
```
2013年3月15日
工具：透明化桌面窗口的小工具 Vitrite

使用非常简单，切换到想要透明化的窗口使用组合键 Ctrl+Shift+上排数字键（英文区域上方），透明度由1到0递减。

这软件非常简单，运行了只在托盘显示图标，尽管你多手点开开，也只是看到一堆英文说明而已，简单到甚至没有截图。

2013年3月14日
Cookie 在前端开发中的一些事

Cookie 操作在前端开发过程中会经常遇到。

Cookie 的属性

除了 name（名）和 value（值）， Cookie 还有以下一些可选属性，用来控制 Cookie 的有效期，作用域，安全性等：

expires属性

指定了 Cookie 的生存期，默认情况下 Cookie 是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户退出浏览器后这些值也会丢失，如果想让 Cookie 存在一段时间，就要为 expires 属性设置为未来的一个用毫秒数表示的过期日期或时间点，expires 默认为设置的 expires 的当前时间。现在已经被 max-age 属性所取代，max-age 用秒来设置 Cookie 的生存期。

如果 max-age 属性为正数，则表示该 Cookie 会在 max-age 秒之后自动失效。浏览器会将 max-age 为正数的 Cookie 持久化，即写到对应的 Cookie 文件中。无论客户关闭了浏览器还是电脑，只要还在max-age秒之前，登录网站时该 Cookie 仍然有效。

如果 max-age 为负数，则表示该 Cookie 仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该 Cookie 即失效。max-age 为负数的 Cookie ，为临时性 Cookie ，不会被持久化，不会被写到 Cookie 文件中。 Cookie 信息保存在浏览器内存中，因此关闭浏览器该 Cookie 就消失了。 Cookie 默认的 max-age 值为-1。

如果 max-age 为0，则表示删除该 Cookie 。 Cookie 机制没有提供删除 Cookie 的方法，因此通过设置该 Cookie 即时失效实现删除 Cookie 的效果。失效的 Cookie 会被浏览器从 Cookie 文件或者内存中删除。

如果不设置 expires 或者 max-age 这个 Cookie 默认是 Session 的，也就是关闭浏览器该 Cookie 就消失了。

这里要说明一下：Session 的 Cookie 在 IE6 下，如果用户实在网页上跳转打开页面或新开窗口（包括 target=”_blank”，鼠标右键新开窗口），都是在同一个 Session 内。如果用户新开浏览器程序或者说是进程再打开当前的页面就不是同一个Session。其他浏览器只要你 Session 存在，还是同一个 Session， Cookie 还能共享。在前段时间的项目中 IE6 下吃了很大一个亏。

Domain 属性

Domain 属性可以使多个 WEB 服务器共享 Cookie 。Domain 属性的默认值是创建 Cookie 的网页所在服务器的主机名。不能将一个 Cookie 的域设置成服务器所在的域之外的域。

例如让位于a.sodao.com的服务器能够读取b.sodao.com设置的 Cookie 值。如果b.sodao.com的页面创建的 Cookie 把它的 Path 属性设置为“/”，把Domain 属性设置成“.sodao.com”，那么所有位于b.sodao.com的网页和所有位于a.sodao.com的网页，以及位于sodao.com域的其他服务器上的网页都可以访问这个 Cookie 。

Path 属性

它指定与 Cookie 关联在一起的网页。在默认的情况下 Cookie 会与创建它的网页，该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联

Secure 属性

它是一个布尔值，指定在网络上如何传输 Cookie ，默认是不安全的，通过一个普通的http连接传输；

HttpOnly 属性

HttpOnly 属性限制了 Cookie 对 HTTP 请求的作用范围。特别的，该属性指示用户代理忽略那些通过“非 HTTP” 方式对 Cookie 的访问（比如浏览器暴露给 js 的接口）。注意 HttpOnly 属性和 Secure 属性相互独立：一个 Cookie 既可以是 HttpOnly 的也可以有 Secure 属性。

Cookie 的传输

浏览器将 Cookie 信息以 name-value 对的形式存储于本地，每当请求新文档时，浏览器将发送 Cookie ，目的是让 Server 可以通过HTTP请求追踪客户。所以从WEB性能的角度来说我们要尽量的减小 Cookie ，以达到传输性能的最大化。

Cookie 的编码和解码

由于 Cookie 的名/值中的值不允许包含分号，逗号和空格符，为了最大化用户代理和服务器的兼容性，任何被存储为 Cookie 值的数据都应该被编码，例如用我们前端熟知的 js 全局函数 encodeURIComponent 编码和 decodeURIComponent 解码。

Cookie 作为客户端存储

前面说了每当请求新文档时，浏览器将发送 Cookie 到服务器，导致WEB性能下降。所以不建议将 Cookie 作为客户端存储一种实现方案，替代方案参见：JavaScript 本地存储实践（html5 的 localStorage 和 ie 的 userData）等。

同名的 Cookie

同名的 Cookie ，不同的 Domain 或不同的 Path ，属不同的 Cookie ；同名的 Cookie ，相同的 Domain 且相同的 Path ，不同的 expires，属同一个 Cookie 。

2012年10月14日
清除浮动的一些方法
浮动的元素不在文档流占据空间，如下图所示，里面的方框分别左右浮动，容器并没有被撑开。IE6 除外，但也有需要清除的时候。

我说 IE6 除外只是因为此框框在 IE6 表现正常，并没受浮动影响，至于真相是什么，还有待考究。

HTML结构
```
<div id='container'>
	<div id='left'>填充文字</div>
	<div id='right'>填充文字</div>
</div>
```
解决方法
1.添加额外标签
在容器末尾添加<div style=”clear:both”></div>从而将容器撑开，但这样会添加额外的标签。
Demo

2.浮动容器
将容器 #container 添加 float:left，虽然这样能产生想要的效果，但是下一个元素会受到这个浮动元素的影响。
Demo

3.使用 overflow 属性
应用值为 hidden 或 auto 的 overflow 属性有一个有用的副作用，会自动地清理包含的任何浮动元素。
Demo

4.使用 :after 伪类(IE6无效)
使用 :after 在容器末尾添加新的内容并清除内容浮动。
```
#container{
	display: inline-block; /*ie for mac*/
}
#container:after{
	content:".";         /*额外的东西越小越好，此处添加一个点*/
	display:block;       /*这是必须的*/
	clear:both;          /*这是必须的*/
	visibility:hidden;   /*隐藏所添加的内容*/
	height:0;            /*不占用空间*/
}
```
5.其他
IE6 在有些情况下使用以上方法并没有清除浮动，而 IE 很多奇怪的渲染问题可以通过赋予其 layout 得到解决，或者叫触发 IE 的 layout 属性，例如添加 CSS 的 zoom:1，_height:1%，至于什么是 layout ，我也不太懂，可以搜索一下。

欢迎探讨~
2010年8月20日

改进版简单的 jQuery 前台评论表单验证

昨天说过要在家里等考试，旅游也去不了，而今天我决定要去旅游，估计周末也不会考试滴~

与之前简单的 jQuery 前台评论表单验证不同在于这个代码是当文本框失去焦点时验证，也就是填完一个框到下一个框时就验证，也是很轻量的。

jQuery(function(){
	$('#commentform :input').blur(function(){ //当表单里的输入框失去焦点时
		if($(this).is('#author')){
			if(this.value==""){
				//这里添加了一个 CSS 类 onError ，需要在 CSS 里面添加，我只设置了背景颜色
				//其最大作用还是辅助判断是否发生错误，有错误则存在 onError 类
				$(this).addClass("onError"); 
			}else{
				$(this).removeClass("onError");
			}
		}
		if($(this).is('#email')){
			if(this.value=="" || !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test(this.value)){
				$(this).addClass("onError");
			}else{
				$(this).removeClass("onError");
			}
		}
		if($(this).is('#url')){
			if(this.value!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test(this.value)){
				$(this).addClass("onError");
			}else{
				$(this).removeClass("onError");
			}
		}
		if($(this).is('#comment:first')){
			if(this.value==""){
				$(this).addClass("onError");
			}else{
				$(this).removeClass("onError");
			}
		}
	});
	$('#submit').click(function(){
		$('#commentform :input').trigger('blur'); 		//提交时再全局验证
		var numError=$('#commentform .onError').length; //判断 onError 类是否存在
		if(numError){ 									//存在则禁止提交
			return false;
		}
	});
});

2010年8月14日

分类： note

Cookie 的属性

expires属性

Domain 属性

Path 属性

Secure 属性

HttpOnly 属性

Cookie 的传输

Cookie 的编码和解码

Cookie 作为客户端存储

同名的 Cookie