【note】一个wordpress网站头部代码分析--JennyStudio

175818_Q2TR_2331171.jpg

链接

一看网站排版……就感觉是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属性关联到一个名称
schemesome_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 &raquo; Feed" href="http://www.becomingjenny.net/feed" />
<link rel="alternate" type="application/rss+xml" title="JennyStudio &raquo; 评论Feed" href="http://www.becomingjenny.net/comments/feed" />
<link rel="alternate" type="application/rss+xml" title="JennyStudio &raquo; 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&amp;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":响应不同分辨率设备




转载于:https://my.oschina.net/sikou/blog/482501

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值