Category: 南边是技术

在WordPress中让注册用户更方便的阅读受密码保护的日志

WordPress不能设置游客与注册用户在阅读受密码保护的日志或页面时的权限。对于已经登陆的注册用户来说,要阅读受密码保护的日志或页面仍需输入作者所要求的密码,很是烦人。
即使是作者本人也是如此。因此,对于像“项目管理日志”这样的每篇日志都设置了阅读密码的博主来讲,自己阅读自己的日志都非常麻烦。
为了解决这个问题,搜索试用了一堆插件,不是不能达到目的,就是功能太过复杂。遂,自己动手,改了下Wordpress,完成自己的需求 — 爽!

需求:
已经登陆的用户,无需输入密码就可以访问被密码保护的日志或页面。

实现思路:
在某处添加检查当前访问用户是否是登陆用户。“是”则直接显示日志或页面内容;“否”则显示密码输入框。

前提条件:
所用的博客皮肤,使用the_content()这个函数来实现日志或页面显示的。 — 大部分的皮肤都是用的这个函数。

实现方法一 — 修改Wordpress代码文件:
修改Wordpress的wp-includes/post-template.php 文件:在文件中搜索get_the_content函数,找到这一段:

if ( post_password_required($post) ) {
$output = get_the_password_form();
return $output;
}

为其添加是否登陆用户的权限校验即可。修改代码如下:

if ( !is_user_logged_in() && post_password_required($post) ) {
$output = get_the_password_form();
return $output;
}

优点:方便。
缺点:wordpress升级可能会更新此文件,如果文件被更新则需重新修改。

实现方法二 — 修改皮肤代码文件:
将the_content()和get_the_content()函数重写下,在皮肤文件里调用新的函数。
在皮肤的functions.php里添加如下重写后的代码:

<?php
/**
* Display the post content.
*
* @since 0.71
*
* @param string $more_link_text Optional. Content for when there is more text.
* @param string $stripteaser Optional. Teaser content before the more text.
*/
function the_content2($more_link_text = null, $stripteaser = 0) {
$content = get_the_content2($more_link_text, $stripteaser);
$content = apply_filters(‘the_content’, $content);
$content = str_replace(‘]]>’, ‘]]&gt;’, $content);
echo $content;
}

/**
* Retrieve the post content.
*
* @since 0.71
*
* @param string $more_link_text Optional. Content for when there is more text.
* @param string $stripteaser Optional. Teaser content before the more text.
* @return string
*/
function get_the_content2($more_link_text = null, $stripteaser = 0) {
global $id, $post, $more, $page, $pages, $multipage, $preview;

if ( null === $more_link_text )
$more_link_text = __( ‘(more…)’ );

$output = ”;
$hasTeaser = false;

// If post password required and it doesn’t match the cookie.
if ( !is_user_logged_in() && post_password_required($post) ) {
$output = get_the_password_form();
return $output;
}

if ( $page > count($pages) ) // if the requested page doesn’t exist
$page = count($pages); // give them the highest numbered page that DOES exist

$content = $pages[$page-1];
if ( preg_match(‘/<!–more(.*?)?–>/’, $content, $matches) ) {
$content = explode($matches[0], $content, 2);
if ( !empty($matches[1]) && !empty($more_link_text) )
$more_link_text = strip_tags(wp_kses_no_null(trim($matches[1])));

$hasTeaser = true;
} else {
$content = array($content);
}
if ( (false !== strpos($post->post_content, ‘<!–noteaser–>’) && ((!$multipage) || ($page==1))) )
$stripteaser = 1;
$teaser = $content[0];
if ( ($more) && ($stripteaser) && ($hasTeaser) )
$teaser = ”;
$output .= $teaser;
if ( count($content) > 1 ) {
if ( $more ) {
$output .= ‘<span id=”more-‘ . $id . ‘”></span>’ . $content[1];
} else {
if ( ! empty($more_link_text) )
$output .= apply_filters( ‘the_content_more_link’, ‘ <a href=”‘ . get_permalink() . “#more-$id\” class=\”more-link\”>$more_link_text</a>”, $more_link_text );
$output = force_balance_tags($output);
}

}
if ( $preview ) // preview fix for javascript bug with foreign languages
$output =    preg_replace_callback(‘/\%u([0-9A-F]{4})/’, create_function(‘$match’, ‘return “&#” . base_convert($match[1], 16, 10) . “;”;’), $output);

return $output;
}
?>

然后将所有皮肤文件中的the_content()函数修改为the_content2()函数即可。
优点:解决Wordpress升级就要改一次代码的问题。
缺点:需要细心一些,把皮肤文件中所有的the_content改完;如果换肤的话,需要重做一次。

转载-word wrap 解惑 — CSS爱好者入

赞此文,大有用处:http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/

WP有没有办法打造一个微博widget?

即在侧栏中增加一个自己搭的微博?

3D看:快速上传图片至新浪博客相册

3D看1.1版支持批量/单张上传照片到新浪博客相册。

1、下载最新版的3D看:
官方下载链接:http://www.3dkan.com/download/3dkan-setup.exe
3D看官方页面:http://www.3dkan.com

2、添加新浪博客相册帐号至3D看:

(1)打开3D看界面的左侧树,选择“我的相册”:
1

(2)点击“添加账户”,然后选择“新浪博客相册”,点击“下一步”按钮:
2

(3)输入您的新浪博客帐号,然后点击“完成”按钮,3D看会登录您的新浪博客相册。登录成功后,左侧树上回显示您添加到新浪博客帐号:
3

4

3、怎样批量上传本地图片到新浪博客相册
添加新浪博客帐号到3D看后,就可以随意上传本地图片到新浪博客相册了

(1)点击“上传”按钮:
4

(2)在文件选择框中选择您要上传的文件,然后点击“打开”按钮:
5

(3)3D看会列出您当前的相册,选择您要上传的相册,然后点击“开始上传”,照片便会立刻开始上传:
6

(4)查看上传进度,可以点击左侧树上的“详情”按钮:
7

8

4、边看图,边分享 – 随时上传本地或网络图片到新浪博客相册

除了支持本地照片批量上传至新浪博客相册,3D看还支持上传单张本地或网络图片至新浪博客相册。特别需要提一下的是,3D看上传网络图片,是可以一边看一边上传的,无需将网络图片下载到本地哦~极其方便!

以网络相册图片举例:
(1)在3D看中,用Flickr搜索ALPS,3D看会为您展示出Flickr上关于阿尔卑斯山的精美照片照片。在3D墙上选中一个照片,点击“上传”按钮:
9

(2)选择您要上传的相册,然后点击“开始上传”按钮,照片便会立即上传到您的相册中了。
10

只要是在3D看中,无论是3D,还是2D界面,您都可以通过点击“上传”按钮来上传当前您正欣赏的图片到您的相册。

用同样的方法,您还可以上传图片到百度空间相册、网易相册、QQ相册、校内相册、51相册、开心相册。与好友实时分享您喜爱的图片,很酷也很方便吧~

解决WordPressAllowed memory size of 33554432 bytes exhausted问题

今天Picksth.com的Wordpress(中文)升级到2.8之后,就频繁的出现Allowed memory size of 33554432 bytes exhausted问题。而同时升级的popocat.com的Wordpress(英文)就没有这个问题。感觉很奇怪。另外还同时出现了另一个奇怪的问题,Picksth.com是中文的Wordpress, 升级之后感觉CMS界面的字体爆大,几乎到了晃眼的程度。

于是就,开始想是不是因为中文的关系。重新上传了WP的文件,把config里的语言设置为英文之后。问题解决!

不过Google了一下,说这个问题可以修改下wp-settings.php文件,这样改:
1. Download, back up and open: wp-settings.php in wordpad/notepad
2. Search for define(’WP_MEMORY_LIMIT’, ‘32M’);
3. Change 32M to 64M : define(’WP_MEMORY_LIMIT’, ‘64M’);
4. Enjoy
wp-settings.php文件每次升级会被替换,因此有人提出了一劳永逸的修改方法(注意这个方法的最后一句话):
1. Create a file called php.ini in the root of your site (if you are using a hosted addon domain, this must be in the subdirectory of that site)
2. In php.ini, enter a line that says
memory_limit = 64MB
3. In your site’s .htaccess (being a WordPress blog, I’m assuming there is one), enter the following line
SetEnv PHPRC //
(keep the slashes)
4. Edit wp-config.php and enter the following line
define(‘WP_MEMORY_LIMIT’, ’64M’);
5. Upload the new files to the server
Oh, and don’t tell your hosting provider you’ve done this…

呵呵,顺便把wp-settings.php文件文件也改了。
不过,还是觉得问题的根本在于WP对中文的兼容性的会使这个问题严重化,显露化。因此,用英文的WP是正解!

WordPress列出当前父分类下的所有子分类

中饭吃早了,然后就特想折腾折腾Wordpress ^_^rz
想了想,需求是这样的:
(1)每篇日志文章都对应N个分类。这N个分类的关系是,其中一个是另N-1个的子分类。
(2)在每篇日志的下方列出该子分类对应的父分类下所有子分类 — 有点绕口也有点绕脑,反正就是这么回事啦
然后琢磨了半天,发现 书到用时方恨少,函数到用时找不着,PHP到用时写不好 orz
反正写出来了一个:

<p><strong>Similar Categories:</strong>
<?php
$category = get_the_category();
if($category[0]->category_parent ==0)
{
$categoryid = $category[0]->cat_ID;
}
else
$categoryid = $category[0]->category_parent;

wp_list_categories(“orderby=id&show_count=1
&use_desc_for_title=0&child_of=$categoryid&title_li=&style=none”);
?>
</p>

运行了下,干活!嘿嘿~
其实应该也有Wordpress插件干这个活吧~

使用3D看浏览百度搜索图片

使用3D看,能够最酷最快速浏览百度图片搜索引擎的图片搜索结果,超酷动感的3D图片墙、赏心悦目的全屏高清幻灯,图片下载加速,自动获取图片描述,无需翻页,支持各主流浏览器。

1、安装3D看之后,在百度图片搜索结果上滑动鼠标,在图片的右上角会浮现出3D看到悬浮图标
使用3D看浏览百度搜索图片 1

2、点击3D看的悬浮图标,会启动3D看
使用3D看浏览百度搜索图片 2

3、3D看可以显示所有百度搜索结果的图片。只需拖拽3D看的图片墙,而不需在浏览器里翻页。图片自动多线程下载,图片清晰显示速度快。
3D看图片墙中无限显示百度图片搜索结果

立即下载3D看

ie6不支持min-height的问题

在IE6下这样就可以了:

height:auto!important;
min-height:x px;
height: x px;

以前没用过min-height这个属性,现在感觉这个还挺好用的。这个解决办法是根据IE6的特性模拟出来的。

页面元素垂直居中的CSS和JS

CSS 这样写:
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
text-align: center; /* Takes care of horizontal alignment in Internet Explorer */
background-image: url(grid.gif);
}
#content {
position: relative; /* Needed for Safari */
margin: auto; /* Takes care of horizontal alignment in standards compliant browsers */
text-align: left;
width: 200px;
height: 200px;
background-color: #fc0;
}
h1, p {
margin: 0;
padding: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}

Js 这样写:

function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == ‘number’) {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById(‘content’);
var contentHeight = contentElement.offsetHeight;
if (windowHeight – contentHeight > 0) {
contentElement.style.position = ‘relative’;
contentElement.style.top = ((windowHeight / 2) – (contentHeight / 2)) + ‘px’;
}
else {
contentElement.style.position = ‘static’;
}
}
}
}
window.onload = function() {
setContent();
}
window.onresize = function() {
setContent();
}
HTML这样写:

<body>
<div id=”content”>
<h1>Content</h1>
<p>This content should be centered in your browser window.
CSS is used for horizontal alignment,
while scripting is used for vertical alignment.</p>
</div>
</body>

Demo

43个PSD转xHTML+CSS网页布局及导航教程

其实是个翻译的列表文,不过要是全看完了,做站是没问题了.
原文:http://www.1stwebdesigner.com/tutorials/43-psd-to-xhtml-css-tutorials-creating-web-layouts-and-navigation/
译文:http://www.yeeyan.com/articles/view/47543/34201

提炼一下有:
1.将 PSD 源文件转换 XHTML 教程
2.叫你如何创建水平滚动网站布局
3.从PSD到xHTML,按部就班教你创建DIV+CSS布局
4.从零开始创建CSS布局
5.从零开始教您创建一个华丽高档的网页-xHTML+CSS教程
6.4个简单的教程教你将PSD制作成CSS HTML
7.使用Drupal创建Killer乐队网站:6篇系列教程
8.教你如何使用CSS创建性感的按钮
9.很酷的水平菜单悬停变大效果
10.CSS模板教程
11.控制文本渐变效果CSS教程
12.CSS超大背景教程
13.将PSD效果图转换成HTML
14.PSD切图和页面的实现
15.模糊背景效果
16.使用CSS Sprites(将图片集合在一张图片中) 技术教程
17.手绘风格CSS导航按钮
18.创建类似Crazy Egg价格列表效果的表格列高亮效果
19.CSS菜单教程
20.Photoshop教程+切片+CSS编码
21.为网页模版切片并用CSS编码
22.为你的第一个PSD网页效果图编码教程
23.使用简单的操作完成复杂的CSS布局实例
24.使用CSS来让你的页脚固定
25.教你如何将PSD转换成xHTML-视频教程
26.高级CSS导航实例教程
27.教程:为你的DIV+CSS布局编码
28.教你如何为网页变换样式
29.浮动教程
30.CSS切片教程:选择正确的布局
31.使用Prototype和Scriptaculous创建简单、智能的手风琴效果
32.CSS Sprites + 圆角
33.简单3步制作圆角布局
34.CSS样式教程
35.转换Photoshop效果图
36.制作CSS纵向菜单
37.使用CSS固定页脚背景图
38.一个简单的散列布局启蒙教程
39.两列布局CSS教程
40.CSS布局技巧:完成100%高度
41.附带一个’behavior’文件的纵向CSS菜单
42.光滑的设计,HTML实例
43.DIV+CSS布局教程

Dansette