生活或许总有遗憾,但未来依旧美好。
欢迎访问...
Tag

Tag: 主题

我的图片站下载流量一直很紧,随时欠下七牛一笔钱跑路的节奏。尤其是我不喜欢给网站图片添加太多分页,点一下看一张那种实在是憋屈。 套图分类是重灾区,因为每篇文章都有几十张图片,一个IP就带走我不少流量了。必须给它加延迟加载,拉下时再加载图片节省流量。  原谅我现在还没搞好代码高亮,凑合看看先。 先上Demo:美女纹身艺术照 @全过程 步骤1、引用jQuery.js,一般主题都有。如果没有,直接用度娘CDN的好了,要加在后面那些JS之前 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> 步骤2、下载jquery.lazyload.min,如果下载后文件名有变,请重命名回jquery.lazyload.min.js,放置到主题的js文件夹里 步骤3、在页脚加入以下代码: <!--图片懒加载--> <script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.min.js"></script> <script type="text/javascript"> $(function() { jQuery("img").lazyload({ effect : "fadeIn", failure_limit : 10 }); }); $(function() { $("img:below-the-fold").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},2000); }); </script> <!--图片懒加载end--> 步骤4、修改主题的function.php,在底部的 ?> 之前添加以下代码,并找一个好看的加载gif,命名为loading.gif,丢进主题的images'文件夹里 //图片懒加载 function add_image_placeholders( $content ) { if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) ) return $content; if ( false !== strpos( $content, 'data-original' ) ) return $content; $placeholder_image = apply_filters( 'lazyload_images_placeholder_image', get_template_directory_uri() . '/images/loading.gif' ); $content = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="" data-original=""${3}><noscript><img${1}src=""${3}></noscript>', $placeholder_image ), $content ); return $content; } add_filter( 'the_content', 'add_image_placeholders', 99 ); 观察下源代码,图片不再是src直接输出了,而是放置在data-original里了。   补充说明: effect : "fadeIn", 加一个淡入的特效 failure_limit : 10 });…

wordpress上传文件,如果文件名重复的话,会覆盖原文件,而中文名称的文件则会出现乱码,对于同一天上传文件较多的站点,手动修改显然很麻烦。百度有很多方法是通过修改程序源文件实现的,对于wordpress的更新速度,相当不方便。 下面介绍的方法是通过在当前主题的functions.php文件里添加相关函数代码实现。缺点是每次更换主题的时候都要重新添加一次,适合不常更换主题模板的站点;优点当然是不受wordpress程序更新的影响! 把下面的代码添加至当前主题functions.php文件:(添加在第一行的<?php下面) function rename_filename($filename) { $info = pathinfo($filename); $ext = empty($info['extension']) ? '' : '.' . $info['extension']; $name = basename($filename, $ext); return substr(md5($name), 0, 10) . $ext; } add_filter('sanitize_file_name', 'rename_filename', 10); 以上代码可以实现文件名称在上传过程中自动重命名,新的名称规则是由系统自动生成的一个32位的MD5加密文件名,由于默认生成的32位文件名有点长,所以使用substr(md5($name), 0, 10) 截断将其设置为10位。 生成的文件名称如:2ba0b99abec8c19b66d7.jpg 修改前:http://s.kouss.com/wp-content/uploads/2015/09/QQ截图20150908144739.png 修改后:http://s.kouss.com/wp-content/uploads/2015/09/45c4c.png

国人原创宽屏双栏wordpress博客主题下载:Frontopen 是一款非常精美的wordpress主题,风格简洁,以橙色为主打色,功能强大,支持IE6以及各种主流游览器,后台强大,扁平化设计,响应式界面,SEO优化,主题整体非常强大! 主题特色 采用现在流行的扁平化页面风格设计,更美观 响应式网页前端构架,在任何设备上都能获得完美的体验 页面采用最简风格设计,图片素材少加载速度快 网页跟随屏幕大小自动拉伸填充,视野更开阔、更宽敞 优秀的后台功能设置面板,无需修改主题代码 主题不依赖任何插件功能,可以随意选择插件 推广优化更轻松,页面内容结构遵循seo标准 捐赠功能,让喜欢你博客的人们帮助你 浏览器支持IE+以及各大主流浏览器 持续更新维护,并按照反馈需求对功能进行调整 [button class="demo" size="lg或sm或xs" href="http://www.frontopen.com/" title="预览"]预览地址[/button]    [button class="download" size="lg或sm或xs" href="http://www.frontopen.com/1378.html" title="下载页面"]下载页面[/button]

下班抽空写的,不会很详细。如果没改过WordPress代码的朋友,可能看完了也不知道从哪里下手。插件的标题都是链接到它们开发者那里的,可以从他们那里获得更详尽的帮助,我只是提供个思路给大家。 方案一:使用缩略图插件WP-Thumbnails 插件原理是每打开一篇文章生成相应的缩略图,所以安装插件后再访问网站,插件就会自动生成缩略图。 使用方法很简单,启用插件后,进入设置——WP-Thumbnails,如图选择自动下载外链图片到本地。 然后找到首页缩略图的设置,填好生成缩略图的尺寸,靠左还是靠右显示,更新设置就可以把下面那行代码插入你模版需要放置缩略图的地方了。   另外这个插件不仅仅是文章列表缩略图,还有其他缩略图甚至是摘要截取,你们慢慢发掘和使用,这里不多讲。如果不知道缩略图那段代码在哪里添加的,可以用谷歌或者火狐浏览器的审查元素去找。 这个插件的缺点:1、新浪sae那些没有写入权限的服务器不能用。2、它是先下载外链图片到服务器,然后再生成缩略图的,会占用一些服务器负担和空间,但是这个几乎可以忽略不计。3、可以设置全局缺省图。4、当图片地址大写,或者不是JPG结尾的图片地址,插件会显示缺省图。 方案二:七牛镜像存储插件 其实很多人用七牛插件的,它可以将WordPress 的静态资源镜像到七牛。还可以修改站点默认的上传路径,把多媒体直接上传到七牛而不是小的可怜的服务器。本站使用了七牛+WP Super Cache来CDN加速,效果也还可以。 我们看到七牛插件的设置,首先你要去注册个七牛账号,传送门:登陆七牛开发者平台。 新建一个空间 获得七牛域名 以及AK/SK,上面那些在后台插件需要用到 上面得到的东西,在后台启用插件后就要填写进去了 终于回到正题,就是这里启用缩略图 *启动高级缩略图功能之后,文章获取缩略图的顺序为: 特色图片 > 标签缩略图 > 第一张图片 > 分类缩略图 > 默认缩略图。 调用的代码是:<?php wpjam_post_thumbnail(array(240,132),$crop=0);?> (已包含img标签) 这个插件的缺点:如果没接触过七牛这类东西的朋友设置起来可能有点困难,设置出错导致图片无法显示等。如果你单纯想调用外链图片做缩略图,不考虑外链图片大小的可以不理上面那一些注册步骤,只需启用插件,勾上缩略图,调用缩略图就可以了。 方案三:代码调用第一张图作为缩略图 这类的代码百度一下会有很多,下面那段测试过OK的,拿来介绍给大家。 1、在主题文件夹下的functions.php添加代码 <span class="com">//缩略图</span> <span class="kwd">function</span><span class="pln"> catch_that_image</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">global</span><span class="pln"> $post</span><span class="pun">,</span><span class="pln"> $posts</span><span class="pun">;</span> <span class="pln"> $first_img </span><span class="pun">=</span> <span class="str">''</span><span class="pun">;</span> <span class="pln"> ob_start</span><span class="pun">();</span> <span class="pln"> ob_end_clean</span><span class="pun">();</span> <span class="pln"> $output </span><span class="pun">=</span><span class="pln"> preg_match_all</span><span class="pun">(</span><span class="str">'/<img.+src=[\'"]([^\'"]+)[\'"].*>/i'</span><span class="pun">,</span><span class="pln"> $post</span><span class="pun">-></span><span class="pln">post_content</span><span class="pun">,</span><span class="pln"> $matches</span><span class="pun">);</span> <span class="com">//正则匹配文章中所有图片</span> <span class="pln"> $first_img </span><span class="pun">=</span><span class="pln"> $matches </span><span class="pun">[</span><span class="lit">1</span><span class="pun">]</span> <span class="pun">[</span><span class="lit">0</span><span class="pun">];</span>   <span class="kwd">if</span><span class="pun">(</span><span class="pln">empty</span><span class="pun">(</span><span class="pln">$first_img</span><span class="pun">)){</span> <span class="com">//定义默认图片</span> <span class="pln"> $first_img </span><span class="pun">=</span> <span…