标签 WordPress主题下的文章

WordPress色彩个人CMS/Blog双模式主题《Wesky》

作者: Tokinx
时间: 2013-01-06
分类: 作品

好啦，主题终于来了人生的第一次更新，距离第1版问世没几天，所以此次更新变化不大，非常感谢众多支持此款主题的朋友。

第2版更新就这样送上啦，这里我不建议覆盖第1版的主题文件，重新安装一下吧，不需要重新配置哦~

主题下载地址 | 2013.01.20更新 - V1.1 [第2版]

1.1 第二版亮点功能：2013.01.20

增：“相关文章”功能，精仿无觅效果

增：后台设置“更多精彩”展示内容

增：后台增加了一些设置项，不懂代码也能轻松定意主题啦

增：后台加入“全站分类ID”栏，免手动获取ID麻烦

增：银色、棕色、蓝黑三种颜色，每一个颜色都是不同的精彩

增：CMS/Blog双模式无缝切换，任你喜欢

其他细节自己慢慢发现吧，我就不再赘述了。

1.0 第一版亮点功能：

“换色、Gravatar头像缓存、缩略图、Logo&文字、博客统计”神马的，都有保留

增：顶部“文章热榜”显示最高评论的文章，4篇，带缩略图

增：边栏“最新被评”显示刚刚被评论过的文章，5篇滚动显示

增：CMS上部的“更多精彩”显示三篇最新日志后的最新6篇文章的缩略图

增：CMS模式，简单却不单调，在后台填写分类ID就可设置完成

增：一些后台设置和其他更多细节，自己慢慢发现吧

1、安装主题

下载wesky.zip。请不要直接安装wesky.zip，否则会提示“主题缺少 style.css 样式表”。请下载后先解压，里面有两个文件：分别是wesky.zip（主题）和avatar（头像缓存文件夹），再分别上传到相应的位置。

上传avatar头像缓存文件夹到WordPress程序根目录中，也就是与wp-content文件夹同级目录中，否则评论部分会提示错误。启用主题后，第一次打开页面速度可能有点慢，是因为正在从gravatar网站下载头像缓存到本地服务器，之后就会正常了。Linux主机请将avatar文件夹的权限调为777，否则可能图片无法加载。

2、安装插件

不用安装任何增强或辅助插件，这个主题免插件哦亲~~~

3、自定义导航菜单

后台—-外观—-菜单

添加菜单名称

自由排序，分类，任意拖动。

首页演示：

4、设置主题与风格选择

安装选择主题之后，点击后台侧边栏上面“当前主题设置”进入主题设置界面。

5、独立页面

主题提供了4个独立页面，归档、留言、随机文章、读者墙，你可以根据需要进行添加。使用方法我就不再赘述了，不会可以点击这里

6、首页文字缩略图

可以自定义显示设置，也可以随即显示缩略图，更可以抓取文章第一张图片作为缩略图，甚至支持缩略图自动裁剪功能。

这里要特别说明一下缩略图裁剪，如果使用，请将主题下的cache文件夹上传到网站空间，并设置权限为“775”或“777”

感觉没啥别的要特别说明的了。。。就先这样吧

对了，我还要说的是，使用CMS模式前，请确认你有足够的文章填充它，或者先用一段时间Blog模式也不错，等文章足够了在用CMS也不迟。

好了，最后奉上鸣谢名单：威言威语、莫语博客、晒太阳的奶酪、知更鸟、倡萌自留地、斌果博客、等....

若有问题欢迎留言

主题下载地址 | 2013.01.20更新 - V1.1 [第2版]

主题下载地址1.0

WordPress不一样的幻灯片

作者: Tokinx
时间: 2012-12-28
分类: 代码

很早就像给主题加一个幻灯片功能了，但是一直没找到心仪的幻灯样式，看到倡萌自留地哪里的幻灯片比较喜欢，但是由于个人技术不行，看了很久的Hcms主题代码都没看透，于是熬夜随意赶制这个不同寻常的幻灯片功能，感觉样子还算过的去，也很少在博客中看到这样的样式，有那么点小另类，但是效果在那里，我也无耻写个小教程，算是记录之，省的以后折腾主题又要重新摸索。

滑动式切换卡片，仅仅使用了很少一点的js和css，兼容IE6，效果十分不错

因为主题各不相同，我在这里仅以Weisay & Hicms两款主题为例

下载幻灯所必须的文件，请点击这里

下载后解压得到slider.php和slider.js，将这个两个文件上传到主题目录内

在主题的想要插入幻灯的地方中插入该功能：

<?php include(TEMPLATEPATH . '/slider.php'); //幻灯片 ?>

一般插入改功能的地方为“首页模板（常见为index.php或者loop.php）”

slider.php文件的相对路径，如果你将slider.php上传在了主题目录下的 “a” 文件夹下，那么调用时，需要变为用“/a/slider.php”

然后再在主题中引用js文件，编辑主题header.php文件，并在</head>标签结束前，插入下方代码：

<script src="<?php bloginfo('template_directory'); ?>/slider.js"></script>

完成后，将下方css样式复制到主题的style.css内：

/*幻灯片*/ li{list-style:none;} a:link,a:visited,a:active{color:#333;text-decoration:none;} a:hover{color:#08A5E0;} .pic img{width:210px;height:200px;} #box{width:700px;margin:10px auto;} #container{position:relative;height:172px;z-index:0;} #container .item{position:absolute;top:0;left:0;width:492px;height:174px;overflow:hidden;background:#FFF;border:1px solid #ddd;z-index:1;opacity:1;} #container .item .pic{float:left;width:210px;height:150px;display:inline;margin:10px;} #container .item .pic img{width:210px;height:150px;vertical-align:top;padding:1px;border:1px solid #CCC;} #container .item .txt{float:left;width:250px;margin-top:12px;} #control{height:20px;text-align:center;} #control span{width:30px;height:5px;font-size:0;line-height:0;cursor:pointer;display:inline-block;background-color:#FEFEFE;border:1px solid #BCC1C5;margin:13px 2px 2px;} #control span.active{background-color:#848484;border:1px solid #6E6E6E;}

完成上方操作后，刷新看一下吧，样式可能不适合你的主题，你自己慢慢修改吧，嘿嘿

特别提醒，此幻灯片已开启timthumb.php自动图片裁剪功能，如果不需要，可以打开slider.php，在第8行，删除掉“<?php bloginfo('template_directory'); ?>/timthumb.php?w=210&h=150&src=”即可