wordpress优化代码

wordpress美化代码

这里选取的例子，便是 WordPress 中比较有名的美化超链接Title效果，一般的 title 效果是把鼠标放到 a 元素中便会显示一个黄底色框，而且是延时显示，这样显然不是一个好的 UE ，所以美化的 Title 便诞生了，在本站现在的主题 Line 的侧边栏中把鼠标放到文章标题便显示文章摘要的功能便是使用美化 Title 的原理做的，之所以选取这个例子，一是该例子中很好的体现了 jQuery 中的 DOM 操作，二是美化 Title 在 WordPress 中比较常用，可以供需要做美化 Title 的人理解其中的原理。同时因为之前对 DOM 和美化 Title 有所研究，因此这篇笔记的内容将会叙述得更加丰富！

美化 Title 的效果很简单，需要的是鼠标移动到超链接的那一刻就出现 Title 提示，当然也可以适当添加一些css作美化之用，以配合自己的主题。

首先写一段 Html 作为演示

<div > <h2>美化Title</h2> <ul> <li><a href=\"#\" title=\"这是Title1\">Title1</a></li> <li><a href=\"#\" title=\"这是Title2\">Title2</a></li> <li><a href=\"#\" title=\"这是Title3\">Title3</a></li> <li><a href=\"#\" title=\"这是Title4\">Title4</a></li> <li><a href=\"#\" title=\"这是Title5\">Title5</a></li> <li><a href=\"#\" title=\"这是Title6\">Title6</a></li> <li><a href=\"#\" title=\"这是Title7\">Title7</a></li> <li><a href=\"#\" title=\"这是Title8\">Title8</a></li> </ul> </div>

 
接着我们需要完成两件事，一是当鼠标滑入超链接时创建一个内容为 title 内容的 div ，而是当鼠标滑出超链接时移除该 div 。

这时显然需要用到 mouse 方法，在这里选用 mouseover 与 mouseout ，或是 mouseenter 与 mouseleave 。说到这里小插一段，科普推广一下上面两组方法的区别：

上面两组方法的功能均是当鼠标悬停在某网页元素上时触发事件，不同的是， mouseover 与 mouseout 会同时绑定到该元素的子元素上，因此如果一个网页元素内有多个子元素时很有可能会发生在元素上一移动鼠标就会触发事件的情况。于是从 jQuery 1.3 开始便增加了两个新的 mouse 方法—— mouseenter 与 mouseleave ，使用 mouseenter 与 mouseleave 并不影响子元素。因为在上面的例子中，选取的网页元素是 a 标签，一般不会有子元素，所以用上面两组方法均可。

回到我们需要完成的第一步——创建 div 。把内容追加到文档中可以使用 append() ，追加的内容为超链接的 title ，可以直接获取 title 属性值，为了使追加的 div 显示在该超链接旁边，还可以使用 css() ，当然在这之前要先设置插入的 div 的 css —— position: absolute; 而第二步从文档中移除元素可以使用 remove() 方法。具体的代码如下：

$(function(){ //为提示框预设一定的top和left值，以免提示框与超链接的距离太近 var x = 15; var y = 15; $(\"#newtitle a\").mouseenter(function(e){ //记录title，以便下面清空title后能重新获取title的值 this.myTitle = this.title; this.title = \"\"; var beatitle = \"<div id=\'beatitle\'>\"+this.myTitle+\"</div>\"; $(\"#newtitle\").append(beatitle); $(\"#beatitle\") .css({ \"opacity\":\"0.6\", \"top\": (e.pageY+y) + \"px\", \"left\": (e.pageX+x) + \"px\" }).show(\"fast\"); }).mouseleave(function(){ this.title = this.myTitle; $(\"#beatitle\").remove(); }); })

 
这时美化 Title 的效果基本已经完成了，只要使用 mousemove() 方法使美化的 Title 跟着鼠标移动，同时可以加一段小代码使美化 Title 中显示超链接的 URL ，这个可以根据个人喜好加进去，本人个人对这个效果无爱了，喜欢的童鞋可以使用下面的完整代码！

$(function(){ var x = 15; var y = 15; //为提示框预设一定的top和left值，以免提示框与超链接的距离太近 $(\"#newtitle a\").mouseenter(function(e){ //记录title，以便下面清空title后能重新获取title的值 this.myTitle = this.title; this.myHref = this.href; this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+\"...\" : this.myHref); this.title = \"\"; var beatitle = \"<div id=\'beatitle\'>\"+this.myTitle+\"<span>\"+this.myHref+\"</span>\"+\"</div>\"; $(\"#newtitle\").append(beatitle); $(\"#beatitle\") .css({ \"opacity\":\"0.6\", \"top\": (e.pageY+y) + \"px\", \"left\": (e.pageX+x) + \"px\" }).show(\"fast\"); }).mouseleave(function(){ this.title = this.myTitle; $(\"#beatitle\").remove(); }).mousemove(function(e){ $(\"#beatitle\") .css({ \"top\": (e.pageY+y)+\"px\", \"left\": (e.pageX+x)+\"px\" }); }); })

具体的效果也可以看demo 噢！

最后附上 css ，各位童鞋可以根据自己的主题修改！

body {font-size: 12pt; color: #99CC33; } h2 {font-size: 14pt; } ul {list-style: none; padding: 0 0 0 10px;} ul li {margin-bottom: 5px; } a {text-decoration: none; color: #99CC33; } #beatitle {position: absolute; z-index: 1000; max-width: 260px; width: auto !important; width: 220px; background: #000; text-align: left; padding: 5px; min-height: 1em; } #beatitle span {display: block; color: #FF9900; }

 
相信各位童鞋看了上面的原理和代码应该也猜到我的侧边栏里的摘要提示是怎么做的了！就是在超链接的 title 中添加内容截断了，这里跟大家分享我的截断代码，有兴趣的果断折腾吧！

复制代码 代码如下:
<?php echo mb_strimwidth(strip_tags(apply_filters(\'the_content\', $post->post_content)), 0, 240,\'...\'); ?>\">
好了，我们再来更加完整地总结一下实现title提示的核心代码： /* 调用示例： $(document).ready(function(){ $(\'.quicktip\').quberTip({ speed:200 }); }); <a href=\'\' class=\'quicktip\' title=\'Information about this link\'>desktop publishing</a> */ jQuery.fn.quberTip = function (options) { var defaults = { speed: 500, xOffset: 10, yOffset: 10 }; var options = $.extend(defaults, options); return this.each(function () { var $this = jQuery(this); if ($this.attr(\'title\') != undefined) { //Pass the title to a variable and then remove it from DOM if ($this.attr(\'title\') != \'\') { var tipTitle = ($this.attr(\'title\')); } else { var tipTitle = \'QuberTip\'; } //Remove title attribute $this.removeAttr(\'title\'); $(this).hover(function (e) { // $(this).css(\'cursor\', \'pointer\'); $(\"body\").append(\"<div id=\'tooltip\'>\" + tipTitle + \"</div>\"); $(\"#tooltip\").css({ \"position\": \"absolute\", \"z-index\": \"9999\", \"background\": \"#D3DDF5\", \"background-image\": \"url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)\", \"padding\": \"5px\", \"opacity\": \"0.9\", \"border\": \"1px solid #A3C0E8\", \"-moz-border-radius\": \"3px\", \"border-radius\": \"3px\", \"-webkit-border-radius\": \"3px\", \"font-weight\": \"normal\", \"font-size\": \"12px\", \"display\": \"none\" }); $(\"#tooltip\") .css(\"top\", (e.pageY + defaults.xOffset) + \"px\") .css(\"left\", (e.pageX + defaults.yOffset) + \"px\") .fadeIn(options.speed); }, function () { //Remove the tooltip from the DOM $(\"#tooltip\").remove(); }); $(this).mousemove(function (e) { $(\"#tooltip\") .css(\"top\", (e.pageY + defaults.xOffset) + \"px\") .css(\"left\", (e.pageX + defaults.yOffset) + \"px\"); }); } }); };

wordpress终极优化

WordPress性能优化加速五大方法:
WordPress性能优化方法一：选择稳定可靠的主机空间

1、物理方面：优化Wordpress的性能前提条件就是有一个稳定安全、网络环境可靠的主机空间，一个经常宕机、机房断网、部分地区无法访问的主机空间还是趁早换一家吧，这样的主机空间即便再怎么优化也是“白搭”。
2、软件方面：选择Linux服务器作为Wordpress的运行环境。用Windows服务器来跑Wordpress这种情况多见于国内的空间商，之前部落博客就是放在Windows服务器导致的问题非常多，而且效率没有Linux高。
3、Web服务器：Nginx、Apache视情况而定。现在不少人认为Nginx相对于Apache有资源消耗少、处理静态页面吞吐量强的优势，但Apache也有着稳定、使用方便的优势，这两个Web引擎可以视个人情况而定。
WordPress性能优化方法二：优化服务器性能提升工作效率

1、高效率的HHvm：如果你愿意折腾，可以尽量选择HHvm。HHVM是一个强大的可以用于替代PHP的建站环境，实际测试它比PHP执行效率快过9倍，效果对比：配置Nginx前端Apache后端服务器LNMPA-与LNMP,HHVM性能比拼 。HHvm相关的使用教程：
1、HHvm Apache 2.4 Nginx建站环境搭建方法安装运行WordPress博客 2、Lighttpd与HHVM快速搭建方法-让小内存VPS主机体验极致PHP性能 3、HHVM安装使用教程-高效的PHP运行环境提升PHP性能9倍以上
2、Memcached缓存加速：Memcached是一个高性能的分布式内存对象缓存系统，通过在内存中缓存数据和对象来减少读取数据库的次数，从而提高动态、数据库驱动网站的速度。Memcached对于减少MysqL数据查询压力非常有帮助。
1、用Varnish和Memcached缓存给WordPress网站提速-内存级加速 2、WDCP,LNMP安装PHP缓存加速扩展eAccelerator,xcache和memcached 3、WP Super cache启用Memcached内存缓存加速及其效果分析
3、 服务器加速模块：安装使用服务器加速模块可以在一定的程度上加快服务器运行的效率，就好像给发动机加上了“润滑油”，硬件还是原来的硬件，但是速度快了不少。
WordPress性能优化方法三：使用缓存加快响应速度

1、此处说的缓存是Web缓存，将需要频繁访问的Web页面和对象保存在硬盘或者内存上，当再次访问这些对象的时候加快了速度，它可以大大节省服务器资源。
2、Wordpress有很多的缓存插件，不同的插件会有不同的使用效果。
3、除了使用Wordpress缓存插件来达到缓存加速的效果外，我们还可以让Web服务器实现缓存，从理论上讲服务器缓存加速效果要好于Wordpress本身的缓存。
WordPress性能优化方法四：使用全站CDN和静态文件加速

1、实现全站CDN加速，网站的静态程度高的效果会更好。