【note】一个wordpress网站头部代码分析--JennyStudio
链接
一看网站排版……就感觉是wordpress做的233
<!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" prefix="og: http://ogp.me/ns#"> <!--[if IE 8]> <html class="ie ie8" prefix="og: http://ogp.me/ns#"> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html lang="zh-CN" prefix="og: http://ogp.me/ns#"> <!--<![endif]-->
IE兼容
在<head>前这几行是专程为兼容不同版本的IE写的，也只有IE支持条件注解CSS。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta>
| 可选属性（表格来自W3C |
值 | 描述 |
| http-equiv |
content-type/expires/refresh…… | 把content属性关联到HTTP头部 |
| name |
author/description/keywords/generator…… |
把content属性关联到一个名称 |
| scheme | some_text |
定义于用于翻译content属性值的格式 |
Content-Type： WEB 服务器告诉浏览器自己响应的对象的类型。例如：Content-Type：application/xml
关于viewport上一篇博文有详讲。
<link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="http://www.becomingjenny.net/xmlrpc.php" />
link rel="profile"
这里是microformat的wiki，然后这里有中文的解释，就是一个关系声明（感觉不重要先就这样orz
link rel="PingBack"
是用来通知网志系统文章被引用情况的一种手段，当你发布的文章包含一系列文章链接，WordPress系统会自动从文章中拣出链接并尝试向这些系统发出Pingback。
有必要了解一些ping、pingback以及trackback之间的区别，这里涉及到一些曝光率和垃圾评论的关系。
Ping：当文章发表时，想要通知的服务器地址，简单说就是通知这些服务器你的博客发表了新文章，叫它们有空过来爬一爬，收录一下你的新文章。
Pingback[广播] ：当你的文章有引用别人的内容时（通常内容里有加上对方的超链接），一旦文章发表后，就会自动启动Pingback功能，这功能会发送一个Ping给对方，会以评论的方式呈现。
Trackback ：根据你文章中自己手动加入的网址，才会发送通知信息到该网站，告知该网站，你参照它网站内容而撰写一篇新的文章。
<link href="/favicon.ico" mce_href="/favicon.ico" rel="bookmark" type="image/x-icon" /> <link href="/favicon.ico" mce_href="/favicon.ico" rel="icon" type="image/x-icon" /> <link href="/favicon.ico" mce_href="/favicon.ico" rel="shortcut icon" />
link href="/favicon.ico"
自定义站点图标，没什么好说的，感觉32×32比较合适。
<!--一些IE的js兼容，就不放代码了--> <!-- This site is optimized with the Yoast WordPress SEO plugin v2.2.1 - https://yoast.com/wordpress/plugins/seo/ --> <link rel="canonical" href="http://www.becomingjenny.net/" />
link rel="canonical"
用来解决由于网址形式不同内容相同而造成的内容重复问题。这个标签对搜索引擎作用非常大，简单的说它可以让搜索引擎只抓取你想要强调的内容。这个和之下的一些代码似乎是用Yoast WordPress SEO plugin实现的
<link rel="alternate" type="application/rss+xml" title="JennyStudio » Feed" href="http://www.becomingjenny.net/feed" /> <link rel="alternate" type="application/rss+xml" title="JennyStudio » 评论Feed" href="http://www.becomingjenny.net/comments/feed" /> <link rel="alternate" type="application/rss+xml" title="JennyStudio » Projects评论Feed" href="http://www.becomingjenny.net/home/feed" />
RSS
wordpress中用于RSS的代码，PHP代码如下，（rel="alternate"等属性全解
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="http://xzl52199.blog.163.com/blog/<?php bloginfo('rss2_url'); ?>" />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/www.becomingjenny.net\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<script src="http://www.becomingjenny.net/wp-includes/js/wp-emoji-release.min.js?ver=4.2.2" type="text/javascript"></script>
script type="test/javascript"
JavaScript，JS真的是看着一个头两个大，觉得很奇怪，度娘一下，emoji是wp的表情js脚本……好像还会引起无限加载问题
wordpress需要的php调用
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/xxx.js"></script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel="stylesheet" id="twentytwelve-fonts-css" href="http://fonts.useso.com/css?family=Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext" type="text/css" media="all">
<link rel="stylesheet" id="twentytwelve-style-css" href="http://www.becomingjenny.net/wp-content/themes/jennyStudio/style.css?ver=4.2.2" type="text/css" media="all"
link rel="stylesheet"
内嵌css样式表与rel调用外部css样式表。
附上php调用css源码
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
总结
其实，wordpress是基于php的，一直在这儿研究html好像并不……不过，做wordpress的大神说html、css、js……这些不懂个70%~80%，wordpress玩转的可能性为零。
html的<head>，原来只觉得要加个<title>，现在发现自己是多么天真，
代码总有自己的意义
link rel="stylesheet"：css必须
http-equiv="Content-Type" http头部关联
name="viewport"：响应不同分辨率设备