Badst' weblog

WordPress 不仅是博客, 很多时候 WordPress 还被用作为 CMS (内容管理系统). 博主们喜欢为每个文章加上统一大小的缩略图, 尤其是信息类平台. 其中比较常用的处理办法是用 custom field 向文章插入图片, 通过上传大小一致的小图或者使用 phpThumb 等工具生成缩略图. 2.7 开始, WordPress 大幅提升多媒体功能, 越来越多人使用 WP 的内置图片仓库. 对这些用户来说, 制作缩略图变得并不那么困难, 在上传图片的时候就会默认生成 150×150 规格的小图 (如果图片高度/宽度不足 150px, 使用原高度/宽度). 那我们可以充分利用这个功能, 在文章列表上加上这个图片作为缩略图. 这样处理各有利弊, 好处是简单, 智能 (不用每次输入缩略图), 坏处是消耗服务器流量.   Okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下. <?php $args = array( ‘post_parent’ => $post->ID, ‘post_type’ => [...]

文章内分页在一些地方时很有用的，文章太长需要内分页是一个方面，而文章涉及到排名或者分类问题需要内分页的也有很多。现在就来说一下如何实现内分页吧。方法就是使用<!–nextpage–>。 这个方法是wp官方提供的，也就是说WordPress本身就有文章的内分页功能，只是没有提供出标签出来，这个标签类似于wordpress 的more，不需要插件。 使用方法： 在文章中需要分页的地方加入<!–nextpage–> 有些主题可能不支持内分页，这时候就需要修改模板：检查当前所使用的模版文件single.php中是否调用了函数link_pages()。在WP的默认模版中是有这个函数调用的，但是有些模版没有。如果没有，你就需要在该文件的， 在<!–?php the_content(); ?–>后面插入<!–?php wp_link_pages(); ?–>更多官方准确的解释，请参阅http://codex.wordpress.org/Template_Tags/wp_link_pages 那么要说明的是，标签优先<!–more–>大于<!–nextpage–>，同时使用后，首页显示以more为截断点。 那么最后要处理的就是让<!–nextpage–>和<!–more–>使用一样方便，在写文章的时候点一下就可以，则需要修改一处。 进入wp安装目录下的wp-includesjstinymce，用文本编辑器打开tiny_mce_config.php。找到：’wp_more’，在’wp_more’后面加上：’wp_page’，好了，改完应该是’wp_more’，’wp_page’，，注意php程序中必须为英文标点符号。

PHP环境搭建:Win7下安装配置Apache(2.2.21)+php(5.39)+Mysql(5.5.19) 步骤一：下载 PHP 5.3 (5.3.9) VC9 x86 Thread Safe 文件名：php-5.3.9-Win32-VC9-x86.msi [38.44MB] sha1: 7c75a4c19c256b5b6d2e6dd5958402f5fd1def42 下载地址：http://windows.php.net/download/   MySQL Installer 5.5.19 文件名：mysql-installer-5.5.19.0.msi [209MB] MD5: cc20bb782c76de9f1c61507e85f88cec 下载地址：http://dev.mysql.com/downloads/installer/   Apache 2.2.21 (released 2011-09-13) httpd-2.2.21-win32-x86-openssl-0.9.8r.msi [5.56MB] 下载地址：http://httpd.apache.org/download.cgi

CSS3中新增的3个边框效果，圆角边框，边框阴影，边框图片。 border-radius box-shadow border-image 浏览器支持情况： 前两个效果所有浏览器均以统一标准支持，border-image针对不同浏览器需增加专有代码： Firefox: -moz- Opera: -o- Safari/Chrom: -webkit- 目前最新的IE9不支持border-image   border-radius border-radius:25px; 其中的px可以改为%（整体box长宽的百分比）或em（内容字体大小的倍数比例） 如果为100%那就是一个整圆了。 定义四个角不同的值可以写成 border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius 简化写法，与margin同理，从topleft开始顺时针旋转。 border-radius:上左 上右 下左 下右 border-radius:上左下右 上右下左 border-radius:上左 上右下左 下右   box-shadow box-shadow: x偏移 y偏移 阴影扩散半径 阴影颜色 不可使用%单位，可使用px,pt,em 如阴影扩散半径省略则默认为0，——> CSS3属性Box-shadow   border-image border-image:url() 缩放x 缩放y round/stretch round:平铺 stretch:拉伸 确实不好解释，看w3school的演示吧。 这个很不好用，必须定义border-width，但这样又拉宽了整个盒子的大小。 但确实激发了不少创作的可能。 参考：http://www.w3schools.com/css3/css3_borders.asp

text-shadow是什么? text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣. text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片. 目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的. 接下来看看text-shadow的语法: text-shadow: length-X length-Y length-R color; color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径” 正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上. 其中任意一个值可以为零也可为空(将做默认处理) 举个例子: text-shadow: -1px 2px 3px #ffb69a; 表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a 一些试验与demo 我做了点小小的试验,做成了一个Demo页面.