生活或许总有遗憾,但未来依旧美好。
欢迎访问...
Category › 第3页

Category: WordPress

对应的上文是:在WordPress上写短微博/说说,制作展示页。 写那种短微博,一般是很随意的。我经常不加标题,然后把默认分类改成“碎碎语”,连分类都不用选了。 但是对于网站来说,会产生很多无标题的文章。于是,通过修改functions.php来自动为文章添加标题。 废话不多说,直接上示范和代码(原文:wordpress文章标题为空时其它内容代替的方法) function filter_post_empty_title($title){ $format = get_post_format(); if($title == $post_id || $title == ''){ $time = get_the_time('Y-m-d H:i:s'); $title = get_post_format_string($format).' @ '.$time; } return $title; } add_filter('the_title','filter_post_empty_title'); add_filter('get_the_title','filter_post_empty_title'); 效果是这样的 修改后,代码如下: //文章标题自动填充 function filter_post_empty_title($title){ $format = get_post_format(); if($title == $post_id || $title == ''){ $str = get_post($id)->post_content; $str2=mb_strimwidth(strip_tags($str),0,50,".."); $title = ' 碎碎语@ '. $str2; } return $title; } add_filter('the_title','filter_post_empty_title'); add_filter('get_the_title','filter_post_empty_title'); 好看了一点吧!但是这种方法,是没有写入数据库的。所以一旦你换主题,标题还是空的。

使用Wordpress的朋友可能遇到这样的问题,在非single.php页面中我们有时候想要调用当前文章的标题、内容等信息,而Wordpress在生成文章页的时候在各个页面中唯一不变的只有当前的文章ID,那么如何根据这个ID获取到当前文章的标题、内容等信息呢?可以通过下面的代码实现: <?php $id=//这里是文章的ID $title = get_post($id)->post_title; echo $title;//输出文章的 标题 ?> 其他信息可以通过改变get_post($id)->post_title中的post_title来实现: post_author:(整数)文章作者的编号 post_data:(字符)文章发表的日期和时间(YYYY-MM-DD HH-MM-SS) post_data_gmt:(字符)文章发表的格林尼治标准时间(GMT) (YYYY-MM-DD HH-MM-SS) post_content:(字符)文章内容 post_title:(字符)文章标题 post_category:(整数)文章类别的编号。注意:该值在WordPress 2.1之后的版本总为0。定义文章的类别时可使用 get_the_category()函数。 post_excerpt:(字符)文章摘要 post_status:(字符)文章状态(publish|pending|draft|private|static|object|attachment|inherit|future) comment_status:(字符)评论状态(open|closed|registered_only) ping_status:(字符)pingback/trackback状态(open|closed) post_password:(字符)文章密码 post_name:(字符)文章的URL嵌套 to_ping:(字符)要引用的URL链接 pinged:(字符)引用过的链接 post_modified:(字符)文章最后修改时间(YYYY-MM-DD HH-MM-SS) post_modified_gmt:(字符)文章最后修改GMT时间(YYYY-MM-DD HH-MM-SS) post_parent:(整数)父级文章编号(供附件等) guid:(字符)文章的一个链接。注意:不能将GUID作为永久链接(虽然在2.5之前的版本中它的确被当作永久链接),也不能将它作为文章的可用链接。GUID是一种独有的标识符,只是目前恰巧成为文章的一个链接。 post_type:(字符)(日志 | 页面 | 附件) post_mime_type:(字符)Mime类型(供附件等) comment_count:(整数)评论总数

短微博、状态,以及QQ空间那样的说说,以其简短的风格形式受到很多网友欢迎,在wordpress上如何实现这种形式呢?微博主题应运而生,但是为了实现这一功能就去换个主题不太划算,而且大部分文章还是以正常形式展现的,那么使用wordpress的用户如何在自己的网站中制作一个类似的展示页呢?下文将作详细介绍。 效果预览:http://kouss.com/suisui/ 给文章添加一个分类目录 添加一个文章分类,所有的类似文章都放入这个分类,例如分类名可以设为“吐槽”,别名为“tucao”,具体名字你可以根据自己喜好设置。 指定不同文章分类使用不同模版 一般情况下,wordpress首页模板就是展示所以文章,这和我们要求的模板功能类似,但是如何为“吐槽”分类目录调用单独的模板呢?Wordpress有一个功能,分类目录的模板会自动搜寻“category-分类英文别名.php”模板,所以请复制首页模板index.php文件一份,重命名为category-t.php,注意t为之前设置的分类别名,如果你设置了别的,请相应改成你所设置的。打开category-t.php作样式编辑,去掉不需要的内容组件,例如文章分类模块就不要显示了,发布时间模板也可以改成更类似微博的风格,如果你要去更高,可以添加一些css样式。 2015年6月19日补充:如果上述方式没办法成功调用模版,请继续百度:WordPress不同分类设置不同模版! 首页优化不显示“吐槽”的文章 这个仅仅需要修改首页index.php模板即可,百度看看《WordPress首页不显示特定分类文章》就行了。 在多梦主题中,后台可以直接设置不显示。先看看你用的主题支不支持,免得折腾。 至此,基本功能已经实现,接下来,请在发布文章时一定要选择“吐槽”作为分类,更好的页面的样式则根据自身需求作调整。 如果经常发这种短微博文章,还可以在WordPress-设置-撰写设置,把“默认文章分类目录”改为“吐槽”。这样不用每次发布都选分类了。 使用WordPress手机端 平时发微博,大多数都是即兴和随手拍的,而在WordPress上一样可以用手机随时随地发文章。 下载地址:http://pan.baidu.com/s/1hq7vtqs(已经很旧了,自己去找新的吧!) 词穷了,来几张截图结束吧。    

Gravatar头像已经成为了博客、论坛等非常流行的通用头像,他能使你的网站的留言者根据自己的邮箱匹配不同的Gravatar头像。但不可否认的是Gravatar头像的服务器及缓存服务器位于国外,由于受到了干扰,国内无法打开Gravatar头像服务器及缓存服务器,导致了Gravatar头像无法显示,这样严重的拖累了网站的打开速度,甚至会因为一篇文章的留言非常多,需要加载几百个Gravatar头像图片,大量http请求的发送,直接导致了网页加载缓慢、网站出现打不开的现象。 2015年5月21日更新 利用多说Gravatar头像中转服务器替代头像默认服务器。 将下面代码添加到当前主题functions.php文件中: function mytheme_get_avatar( $avatar ) { $avatar = preg_replace( "/http://(www|d).gravatar.com/","http://gravatar.duoshuo.com",$avatar ); return $avatar; } add_filter( 'get_avatar', 'mytheme_get_avatar' ); -----------------------结束,下面的仅供参考----------------------- 一、在当前Gravatar头像服务器被墙的情况下,要想要加快Wordpress显示Gravatar头像的速度,我们可以做那些努力呢?通常的做法大致有以下几种: 1、首先可以做的就是将Gravatar头像图片缓存到自己的虚拟主机或者VPS上,这样用户访问的就是直接读取自己服务器的图片文件。好处是访问的本地图片,图片的加载非常快!缺点也是显而易见的:运行一段时间后,大量的Gravatar头像图片会占用非常多的空间,过多的图片导致服务器压力骤增。 2、安装插件:插件有二大类,一类是wordpress评论Gravatar头像缓存插件,原理和弊端同上。另外一类就是替换Gravatar头像服务器及缓存服务器地址,但仍然连接到Gravatar头像服务器及缓存服务器。 3、禁用Gravatar头像。很多的博主因为Gravatar头像现实的不稳定,间断抽风,已经取消了Gravatar头像在博客的显示,一劳永逸。但评论是一种交互方式,没有头像显示的评论,对网站美化来说就是一块硬伤。 4、无插件实现Gravatar头像的显示。网上介绍的这类方法,基本上都需要修改Wordpress的文件,如果遇到Wordpress更新,修改的文件会被替换掉,那么就需要再次进行修改。。伤不起的手工活啊!! 二、Gravatar头像不显示完美解决方案 有没有一种方案能完美的解决我们的这些烦恼呢?答案是肯定的。提升Wordpress的Gravatar头像加载速度进阶的方法就是将Gravatar头像的服务器变为国内的,放在国内知名公司的服务器上或者专业的CDN服务器上。经过测试我们发现多说调用的Gravatar头像可以正常显示。猜测可能多说可能为了用户的体验而架设了一台Gravatar国内的中转服务器,那么福音来了,只需短短几行代码就可以彻底告别Gravatar被墙的困扰。本篇文章就来介绍此种方法。 方案一: 1、方法的原理是:官方Gravatar的头像所在的路径一般都是 www.gravatar.com、0.gravatar.com、1.gravatar.com、2.gravatar.com 我们只需要将这些头像默认的URL换成多说的就行了。 2、打开主题下的functions.php 文件,将以下代码复制粘贴保存即可。 //多说官方Gravatar头像调用 function mytheme_get_avatar($avatar) {     $avatar = str_replace(array("www.gravatar.com","0.gravatar.com","1.gravatar.com","2.gravatar.com"),"gravatar.duoshuo.com",$avatar);     return $avatar; } add_filter( 'get_avatar', 'mytheme_get_avatar', 10, 3 ); 3、效果见下图,Gravatar头像的外链地址已经全部到了多说的国内服务器了。 4、更新多说代码。(2014年11月18日更新。这个修改方法来源于朽木!感谢作者的提供!) 加入上面的代码后,前台的用户头像都是正常显示的,但是后台的只显示非默认头像,不显示默认的头像,导致这个问题的原因是Wordpress后台默认头像强制设置成了mystery,并且这个参数似乎没有办法用钩子替换。 打开wp-includes/pluggable.php文件,你可以找到这样一段代码 if ( 'mystery' == $default )         $default = "$host/avatar/ad516503a11cd5ca435acc9bb6523536?s={$size}"; // ad516503a11cd5ca435acc9bb6523536 == md5('unknown@gravatar.com') 这段代码的意思是如果默认头像是mystery,那么就用unknown@gravatar.com邮箱的头像,我不知道这么奇葩的写法究竟用意何在,而且一路更新下来,这段代码依然健在。 那么我们需要让上面的代码失效,废了它,嘿嘿!以下是更正后的代码!当然这段代码也是添加在主题下的functions.php 文件中。 //多说官方Gravatar头像调用 function get_avatar_deadwood( $avatar ) {   $avatar = preg_replace( "/http%3A%2F%2Fd.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3Dd+/","mm",$avatar );   $avatar = preg_replace( "/http://(www|d).gravatar.com/","http://gravatar.duoshuo.com",$avatar );   return $avatar; } add_filter( 'get_avatar', 'get_avatar_deadwood' ); 方案二: 4、官方Gravatar头像调用ssl头像链接 。 https还是没被墙的,而且速度还不错,直接调用这个最简单了。 如果你的网站启用了ssl则不需要了,否则functions.php 加入如下代码: //官方Gravatar头像调用ssl头像链接 function get_ssl_avatar($avatar) {    $avatar = preg_replace('/.*/avatar/(.*)?s=([d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2">',$avatar);    return $avatar; } add_filter('get_avatar', 'get_ssl_avatar');

感谢水煮鱼的七牛 for WordPress插件,流量和容量还在免费阶段对于新人站长来说帮助很大。   怎么设置的网上有很多教程,设置好之后开启高级缩略图功能。 安装七牛云存储插件的童鞋可以使用 wpjam_post_thumbnail 函数,直接生成缩略图。代码如下:

在WordPress中时常存在某些文章不需要标题的情况,特别是在一些个人网站,他们常常使用一些不需要标题的post_format来写自己的即时心情、日志、状态等,但我们都知道,如果没有标题,会造成很多不好的结果:没有标题显示为空,没有办法点击进入详细页面,网页的标题为空,对seo不好,不够美观 当然,如果只是一个个人的口袋站,完全不用理会前面两点,但对于一些比较懒的站长,其实也需要注意这些问题。这里提供一个简单的方法来处理这种情况: function filter_post_empty_title($title){ $format = get_post_format(); if($title == $post_id || $title == ''){ $time = get_the_time('Y-m-d H:i:s'); $title = get_post_format_string($format).' @ '.$time; } return $title; } add_filter('the_title','filter_post_empty_title'); add_filter('get_the_title','filter_post_empty_title'); 将上面这段代码放在functions.php中,它可以帮助你在你的主题中使用the_title、get_the_title两个函数时进行一个判断,如果发现这个文章没有填写标题,就会用post_format @ post_time的形式作为标题。注意:the_title和get_the_title必须在LOOP中使用。 上面都是抄来的,显示的样式如下图。觉得还是不够科学,让我想想怎么完善。

WordPress一直致力于帮助用户维护一个统一的代码风格,使代码保持简洁、容易阅读。所以,不论是在编写 WordPress 核心代码、插件还是主题的时候,都请根据WordPress规则并以人类的眼光来审视和编写代码,以下几点是尤其需要注意的。 HTML代码 一般HTML代码语法正确性验证可以在W3C校验。 自闭合标签 自闭合标签的斜杆前应该要有一个空格,如正确的换行符应该是 <span class="tag"><br</span><span class="tag">/></span>,<span class="tag"><br/></span> 这是不正确的。 属性和标签 所有属性和标签都应该是英文小写,因为这些内容是给机器解析的,并不需要视觉上的可读性。但其中的数据应该是人性化的,易于人类阅读和理解的。如: 面向机器的代码: <span class="tag"><meta</span> <span class="atn">http-equiv</span><span class="pun">=</span><span class="atv">"content-type"</span> <span class="atn">content</span><span class="pun">=</span><span class="atv">"text/html; charset=utf-8"</span> <span class="tag">/></span> 面向人类的代码: <span class="tag"><a</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"http://www.dmeng.net/"</span> <span class="atn">title</span><span class="pun">=</span><span class="atv">"这里应该有链接描述"</span><span class="tag">></span><span class="pln">Dmeng.net</span><span class="tag"></a></span> 而且属性内容应该用英文单引号或双引号包括起来,如: 正确的属性写法: <span class="tag"><input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">"email"</span> <span class="atn">disabled</span><span class="pun">=</span><span class="atv">"disabled"</span> <span class="tag">/></span> <span class="tag"><input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">'text'</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">'email'</span> <span class="atn">disabled</span><span class="pun">=</span><span class="atv">'disabled'</span> <span class="tag">/></span> 错误的写法: <span class="tag"><input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">text</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">email</span> <span class="atn">disabled</span><span class="tag">></span> 正确的缩进 使用正确的缩进可以有效提高代码的视觉上的可读性,即使是PHP和HTML混写的时候,如: 正确的人类的写法: <?php if ( ! have_posts() ) : ?>    <div id="post-1" class="post">       <h1 class="entry-title">Not Found</h1> <div class="entry-content"> <p>Apologies, but no results were found.</p> <?php get_search_form(); ?>…

内容查询离不开循环,WordPress为内容查询构建了主循环,其中包括常规查询和循环中常用内容的查询函数,还有稍微高级的自定义查询,下面就让我们来一一了解。 主循环简介 在WordPress中显示文章内容都是用主循环(The Loop),包括首页、分类页、文章页和搜索结果等其他页面,自定义查询也是用主循环,这个循环挂载了WordPress许多动作和钩子,通过主循环我们不仅可以快捷有效地把内容展示出来,同时别处的代码(如 functions.php 文件)也能通过动作钩子实现修改查询条件或内容。 最常见的主循环(这样的循环在WordPress模板文件中随处可见,如 index.php): <span class="pun"><?</span><span class="pln">php</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">have_posts</span><span class="pun">())</span> <span class="pun">:</span> <span class="kwd">while</span> <span class="pun">(</span><span class="pln">have_posts</span><span class="pun">())</span> <span class="pun">:</span><span class="pln"> the_post</span><span class="pun">();</span> <span class="com">//~ 在这里使用内容函数,如 the_title();</span> <span class="pln">endwhile</span><span class="pun">;</span> <span class="pln">endif</span><span class="pun">;</span> <span class="pun">?></span> 如上代码所示,我们很容易就能看懂其中的原理:WordPress先通过 <span class="pln">have_posts</span><span class="pun">()</span> 判断是否有文章,如果有就使用 while 语句循环,然后在循环中通过 <span class="pln">the_post</span><span class="pun">()</span> 设置当前文章内容的全局变量,这样我们就可以轻而易举地在循环中使用函数输出内容到浏览器了。 如果你想找没有找到内容的时候显示一个提示,你可以这样: <span class="pun"><?</span><span class="pln">php</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">have_posts</span><span class="pun">())</span> <span class="pun">:</span> <span class="kwd">while</span> <span class="pun">(</span><span class="pln">have_posts</span><span class="pun">())</span> <span class="pun">:</span><span class="pln"> the_post</span><span class="pun">();</span> <span class="com">//~ 在这里使用内容函数,如 the_title();</span> <span class="pln">endwhile</span><span class="pun">;</span> <span class="kwd">else</span> <span class="pun">:</span> <span class="com">//~ 在这里放置关于没有找到内容的提示</span> <span class="pln">endif</span><span class="pun">;</span> <span class="pun">?></span> 常用函数 在主循环中最常用到的函数: 使用 <span class="pln">the_ID</span><span class="pun">()</span> 输出文章ID(返回值使用 <span class="pln">get_the_ID</span><span class="pun">()</span> ) 使用 <span class="pln">the_title</span><span class="pun">()</span> 输出文章标题(返回值使用 <span class="pln">get_the_title</span><span class="pun">()</span> ) 使用 <span class="pln">the_title_attribute</span><span class="pun">()</span> 输出文章标题属性 使用 <span class="pln">the_permalink</span><span class="pun">()</span>…

WordPress模板的定义非常方便,但是在定制模板之前,我们有必要知道WordPress的模板层次,了解WordPress是如何加载模板文件的,这将有利于开发模板时合理利用资源及提高工作效率。 万能的index.php 通过“WordPress主题构成”这篇文章,我们已知道一个最简单的WordPress主题只需要 style.css 和 index.php 文件即可。这代表着 index.php 可以是任何一个页面的模板,无论是首页,还是文章页,或是分类页,再或者是搜索结果页面,它都能完美胜任。 也就是说,当对应的模板不存在时, index.php 将是WordPress最后的底牌。 模板加载顺序 下面让我们来了解一下WordPress都是怎么加载模板的 首页 首先WordPress会先检查是否有静态首页,如果有静态首页,就会加载这个页面内容并通过 front-page.php 模板文件展示,如果没有这个模板文件,就会通过页面模板展示 如果没有静态首页,就会加载 home.php  最新文章模板 如果没有 home.php 则加载 index.php 模板 文章页 首先被考虑的是 single-{post_type}.php 这样一个模板文件(如文章类型是 product 那么对应的文件名就是 single-product.php ) 如果找不到,那么就会加载 single.php 模板 如果连 single.php 模板都没有则加载 index.php 模板。 页面 首先被考虑的是自定义模板,也就是编辑页面时所选择的模板 如果没有自定义模板,则查找 page-{slug}.php 别名模板(如页面别名是 about 对应的文件名就是page-about.php ) 如果别名模板也没有就查找 page-{id}.php ID模板(如页面ID是 2 对应的文件名就是 page-2.php) 如果ID模板也没有那就是 page.php 模板了 如果连 page.php 模板都没有则加载 index.php 模板 分类页 首先被考虑的是 category-{slug}.php 别名模板(如分类别名是 news 对应的文件名就是 category-news.php ) 如果没有别名模板则查找 category-{id}.php ID模板(如分类ID是 1 对应的文件名就是 category-1.php ) 如果ID模板也没有那就是 category.php 分类模板了 如果 category.php 分类模板也没有则加载 archive.php 通用归档模板 如果连 archive.php 通用归档模板都没有则加载 index.php 模板 标签页 标签页模板加载顺序和分类页一样,只不过前缀不过 category 而是 tag (如 tag-{slug}.php)。 自定义分类法 有时候除了WordPress默认的分类目录和标签我们还需要其他的分类方法,这时候我们就会注册一个新的分类法,那么在此之前知道分类法的模板加载顺序也是十分必要的。以下说明假设自定义分类法是 people 这个名字: 分类法分类页首先被考虑的是 taxonomy-{taxonomy}-{term}.php 别名模板(如分类别名 teacher 对应的文件名就是 taxonomy-people-teacher.php ) 如果没有别名模板,则加载该分类法归档页(如 taxonomy-people.php ) 如果分类法归档页模板也没有则加载 archive.php 通用归档模板 如果连 archive.php 通用归档模板都没有则加载 index.php 模板 自定义文章类型 除了自定义分类法,有时候我们也需要自定义文章类型 自定义文章类型归档页首先被考虑的是 archive-{post_type}.php 别名模板(如文章类型是 product那么对应的文件名就是 archive-product.php ) 如果没有别名模板则加载 archive.php 通用归档模板 如果连 archive.php 通用归档模板都没有则加载 index.php 模板 作者归档页 首先被考虑的是 author-{nicename}.php 别名模板(如作者用户名是 steven 那么对应的文件名就是author-steven.php ) 如果没有别名模板则加载 author-{id}.php ID模板(如作者ID是 1 对应的文件名就是 author-1.php)…

某些WordPress的标签函数用于显示或返回日期和时间信息,例如 the_date() 和 the_time() 。这些函数接收一个参数(格式化的字符串),以确定日期显示方式。 格式化的字符串是一个模板,模板提供各种不同的日期显示方式,他们结合起来生成指定的日期格式。 例如,格式化的字符串: l, F j, Y 创建如下所显示的日期: 星期五,9月 24日,2004年 本站用的是2015年4月29日(星期三),22:56这种格式, 相对应的代码是<?php the_time('Y年n月j日(l),G:i') ?> 以下格式化的字符是上例中所代表的含义: l = 星期全称(小写字母L) F = 月份全称 j = 该月的某一号 S = 英语日期后缀(如,1st(第一1+st)、2nd(第二2+nd)或15th(第十五15+th)后面的st、nd 或 th。) Y = 年份显示4位数字。(小写字母y显示年份的后两位) (他们之间以逗号分隔。) WordPress是用PHP语言编写的。WordPress的日期格式化函数使用PHP的内置日期格式化函数。 你可以使用 PHP网站日期格式字符表作为建立WordPress日期格式字符的参考。以下是更有用的目录表: 月份中的第几天 d 数字的, 有前缀0 01–31 j 数字的, 没有前缀 1日–31日 S 英文序数后缀,在j之后使用 st、 nd、rd 或 th 星期 l 全称 (小写字母 'L') 星期一 ~ 星期日 D 英文星期的前3个字母 Mon – Sun 月份 m 数字的,有前缀0 01–12 n 数字的,没有前缀0 1–12 F 月份全称 1月 – 12月 M 月份的前3个字母 Jan - Dec 年份 Y 显示4位数字 例如: 1999, 2003 y 显示后面2位数字 例如: 99, 03 时间 g 小时,12小时制,没有前缀0 1–12 h 小时,12小时制,有前缀0 01–12 a 小写 am, pm A 大写 AM, PM G 小时,24小时制,没有前缀0 0-23 H 小时,24小时制,有前缀0 00-23 i 分钟, 有前缀0 00-59…

虽然我没试过这文章的代码,但是它给了我启发,终于解决了这两天纠结的问题。 摘要:公司用wordpress做一个非常简单的文章网站,文章列表页左边是一篇文章内的所有图片,右边是文章的文字介绍... 公司用wordpress做一个非常简单的文章网站,文章列表页左边是一篇文章内的所有图片,右边是文章的文字介绍。那怎么样能把文章内的所有图片列出来呢? 首先在function.php里面写一个函数(没有function.php自己新建一个),代码如下 function all_img($soContent){ $soImages = '~<img [^>]* />~'; preg_match_all( $soImages, $soContent, $thePics ); $allPics = count($thePics); if( $allPics > 0 ){ foreach($thePics[0] as $v){ echo $v; } } else { echo "<img src='"; echo bloginfo('template_url'); echo "/images/thumb.gif'>"; } } register_nav_menus( array( 'primary' => __( 'Primary Navigation'), )); 然后再需要调用的地方写入 <?php all_img($post->post_content);?> 就可以调用了
如何在WordPress上写短微博/说说,制作展示页

短微博、状态,以及QQ空间那样的说说,以其简短的风格形式受到很多网友欢迎,在wordpress上如何实现这种形式呢?微博主题应运而生,但是为了实现这一功能就去换个主题不太划算,而且大部分文章还是以正常形式展现的,那么使用wordpress的用户如何在自己的网站中制作一个类似的展示页呢?下文将作详细介绍。 效果预览:http://kouss.com/suisui/ 添加一个分类目录 添加一个文章分类,所有的类似文章都放入这个分类,例如分类名可以设为“吐槽”,别名为“tucao”,具体名字你可以根据自己喜好设置。 添加并修改展示页面模板样式 一般情况下,wordpress首页模板就是展示所以文章,这和我们要求的模板功能类似,但是如何为“吐槽”分类目录调用单独的模板呢?Wordpress有一个功能,分类目录的模板会自动搜寻“category-分类英文别名.php”模板,所以请复制首页模板index.php文件一份,重命名为category-t.php,注意t为之前设置的分类别名,如果你设置了别的,请相应改成你所设置的。打开category-t.php作样式编辑,去掉不需要的内容组件,例如文章分类模块就不要显示了,发布时间模板也可以改成更类似微博的风格,如果你要去更高,可以添加一些css样式。 2015年6月19日补充:如果上述方式没办法成功调用模版,可以用这种思路(不会代码的QQ找我): 首页优化不显示“吐槽”的文章 这个仅仅需要修改首页index.php模板即可,百度看看《WordPress首页不显示特定分类文章》就行了。 在多梦主题中,后台可以直接设置不显示。看看你用的主题支不支持,免得折腾。 至此,基本功能已经实现,接下来,请在发布文章时一定要选择“吐槽”作为分类,更好的页面的样式则根据自身需求作调整。 如果经常发这种短微博文章,还可以在WordPress-设置-撰写设置,把“默认文章分类目录”改为“吐槽”。这样不用每次发布都选分类了。 使用WordPress手机端 平时发微博,大多数都是即兴和随手拍的,而在WordPress上一样可以用手机随时随地发文章。 下载地址:http://pan.baidu.com/s/1hq7vtqs 词穷了,来几张截图结束吧。  

在我们设计网页的时候,经常会遇到图片自适应问题,实际这些工作完全可以交给浏览器来完成就可以了,只可惜,无论是IE还是FIREFOX在图片自适应这个问题上都处理的不尽人意,网上实现网页图片宽度和高度的方法也很多,主要又两种: 第一种是使用CSS来完成;第二种是使用Javascript来完成,根据实际的应用效果来说,使用Javascript还是比较靠谱一点,因为CSS的expression的确有点烦,笔者是指使用效果上有点恼人,本文专门把这两种都总结一下,方便站长们参考使用。 一、使用CSS实现图片的自适应 使用CSS实现图片自适应很简单,主要靠两个参数来完成,分别是max-width和max-height,这两个参数在FIREFOX和IE7以上支持都很好,但是在IE6上面,效果非常糟糕,尤其是对于多张图片的显示,第一次显示网页大都很难达到图片自适应的效果,一般都是有些能自适应,有些不能自适应,多次刷新可能又显示OK,就是这点就足够烦人,而且一旦显示多张图片,IE 6上就卡的要命(expression在IE上比较占用资源,感觉设计是用来玩得,FIREFOX自适应效果还是比较好,速度也非常快),反正笔者至今是没有找到更好的CSS方法来让IE 6完美支持图片自适应。示例代码如下: img{ max-width: 128px; max-height: 128px; height:auto; zoom:expression( function(e) { if(e.width>e.height) {if (e.width>128) { e.height = e.height*(128 /e.width); e.width=128; }} else {if (e.height>128) { e.width = e.width*(128 /e.height); e.height=128; }} e.style.zoom = '1'; }(this)); overflow:hidden; } 上面代码格式上需要特别注意两点: 1、zoom属性里宽高赋值不能带单位(如px),否则无效; 2、if和else语句也必须带大括号括起来,单句指令也不行(而在很多编程语言里,单句指令可以无需大括号); 二、使用Javascript实现的图片自适应 使用Javascript自适应相对来说比较方便,唯一的麻烦是就是在网页中需要对image预设置onload事件处理resize()函数,如果对于动态网页来说还好一点,反正是动态的,程序里加上去就OK了,可是如果对于很多篇文章而言,在里头增加onload函数有点麻烦,除非一次性的写个脚本批量处理,否则后期更改或替换起来还是比较麻烦,比如图片的可显示宽度变化等等。 另一方面如果把宽度值写在Javascript中,那么将带来程序的通用性降低,下面的示例不是写死的,已测试效果比起CSS要HAPPY的多,网上也又很多类似的例子,不是不完成就是中间还存在某些问题,本文的例子应该会更好一点,笔者对不同的尺寸下的图片的显示效果做过好几种测试了。示例如下: //RESIZE 图片自适应图片宽度和高度 //参数说明: //        obj是图片对象,this调用方法见下面示例 //        maxW和maxH分别为约定的最大宽度和最大高度 function resizeimg(obj,maxW,maxH) { var imgW=obj.width; var imgH=obj.height; if(imgW>maxW||imgH>maxH) { var ratioA=imgW/maxW; var ratioB=imgH/maxH; if(ratioA>ratioB) { imgW=maxW; imgH=maxW*(imgH/imgW); } else { imgH=maxH; imgW=maxH*(imgW/imgH); } obj.width=imgW; obj.height=imgH; } } 上例的使用示例: <img src="http://www.example.com/logo.gif" onload="resizeimg(this,600,1024);"/> 我们在制定宽度和高度值的时候,一般宽度是肯定需要限定,而高度经常不需要限制,所以可以把高度指定的大一点,如果高度也限制,那么相当于制定一个image box,下面的程序或许对您很有用(不限制图片高度的忽略下面这个示例)。 当指定图片BOX的时候,一般都还需要在图片自适应之后显示在BOX容器的中间,也就是水平和垂直都需要居中。首先需要指定BOX容器的宽度和高度,然后可以使用CSS来控制显示效果,也可以使用Javascript控制显示效果。示例如下: IMAGE BOX容器: <div id="imgbox" style="width:800px;height:800px;border:1px%20solid%20#CCCCCC"> <img src="..." onload="resizeimg(this,600,600)"/> </div> CSS显示方法如下: #imgbox {text-align:center;vertical-align:middle;} #imgbox img {vertical-align:middle;} 或使用Javascript完成: 在上文resizeimg()函数里最后只需要增加类似这样的语句, obj.style.margin-left=(800-imgW)/2; obj.style.margin-top=(800-imgH)/2; 即可,当然了,您总不能让resize尺寸本来就超出BOX容器尺寸吧,否则图片就把容器撑大,style风格肯定就对不上了。