发布于WordPress分类中的文章

Oct 16

Shutter是一个能实现类似LightBox效果的Javascript脚本,也就是在当前页面全屏遮罩下显示缩略图对应的原始图片,它比LightBox小多了,只有8K左右大小。作者同时写出了WordPress的插件Shutter-Reload。不过Shutter-Reload本身不带缩略图生成功能,所以我们可以结合iimage-Gallery在文章中方便的实现Shutter效果的图片集。

Shutter-Reload有个选项叫"Shutter on all image links with rel="prettyPhoto" or "shutterset" or "shutterset_123"",我们只要利用这个稍微修改一下iimage-Gallery就行了,让它生成缩略图的时候同时添加相应的Class标记。

把修改好的iimage-gallery.php覆盖原来的文件(请先备份),然后用如下语句添加Gallery:


<gallery crop="true"  stand_alone="false" shutterset="quakemachine">
图片地址1
...
图片地址N
</gallery>

除了shutterset,前面的都属于原iimage-Gallery自带的选项,现在设置为当独立浏览模式关闭时(也就是stand_alone="false")使用Shutter方式浏览图片,shutterset是个ID,在当前页面需唯一,可以设置为任意英文,数字和"-"号,不支持中文。具体效果可以参考MRemote一文的截图。

Shutter和iimage-Gallery请到原作者页面下载,附件是改好的iimage-gallery.php文件。


Sep 26

The player will show in this paragraph

简介:

这是一个用于在文章中发布图片的插件,它使用Ruochi.com的Bcastr Flash技术载入图片,然后轮播图片,主要的特点有:

.图片自动抗锯齿
.3种文字位置设定
.4种图片过渡效果,过渡更自然,
.可定义是否显示按钮
.可定义是否在新窗后中打开连接
.自定义尺寸,自动适应任何比例,图片不变形
.自定义图片标题
.浏览过程中下载
.自定义图片连接
.自定界面色彩

安装设置:

下载文章附件的插件包,解压后在wp-bcastr目录应有3个文件:wp-bcastr.php(插件主文件),wp_bcastr_config.php(配置文件),bcastr31.swf(播放器主文件),您可能需要编辑配置文件以适应你的站点系统(通常不需要配置也能很好的工作),只需打开wp_bcastr_config.php文件,内容如下:


<?php
//在这里设置图片播放器的参数;
$wp_castr_width = "500px"; //播放器默认宽度
$wp_castr_height = "280px"; //播放器默认高度
//扩展参数;
$wp_castr_ext_TitleTextColor = "#000000"; //图片名称文字颜色
$wp_castr_ext_TitleBgColor = "#FF6600"; //图片名称文字背景颜色
$wp_castr_ext_TitleBgAlpha = "60"; //图片名称文字背景颜色透明度:0-100值
$wp_castr_ext_TitleBgPosition = "0"; //图片名称文字位置,0表示文字在顶端,1表示文字在底部,2表示文字在顶端浮动
$wp_castr_ext_BtnDefaultColor = "#FF6600"; //按键默认的颜色
$wp_castr_ext_BtnOverColor = "#000033"; //按键当前的颜色
$wp_castr_ext_AutoPlayTime = "8"; //自动播放时间:单位是秒
$wp_castr_ext_Tween = "3"; //图片过渡效果:0,表示亮度过渡,1表示透明度过渡,2表示模糊过渡,3表示运动模糊过渡
$wp_castr_ext_IsShowBtn = "1"; //是否显示按钮:1表示显示按键,0表示隐藏按键
$wp_castr_ext_WinOpen = "_blank"; //_blank表示新窗口打开。_self表示在当前窗口打开
?>

每个参数都有详尽的描述。

修改好后把wp-bcastr目录上传到您的站点插件目录,通常是/wp-content/plugins/,然后到后台激活WP BCastr这个插件。

使用:

WP BCastr使用非常简单,当你激活插件后,它在QuickTag栏创建了一个按钮"BCastr",你只需在撰写页面的时候把你的图片连接贴到撰写窗口,然后选择这些连接,点击"BCastr"按钮即可。注意:多图片用","号(半角逗号)分开,写成一行不要回车。例如:


<bcastr>500,280,<img src="https://www.quakemachinex.com/blog/wp-content/images/WarOfTheWorld.jpg" alt="世界大战" title="世界大战" />,<img src="https://www.quakemachinex.com/blog/wp-content/images/MIDIMe.jpg" alt="DJ" title="DJ" />,<img src="https://www.quakemachinex.com/blog/wp-content/images/Motor.jpg" alt="New Motor" title="New Motor" />,<img src="https://www.quakemachinex.com/blog/wp-content/images/BruceLee.jpg" alt="Bruce Lee" title="Bruce Lee" />,<img src="https://www.quakemachinex.com/blog/wp-content/images/FireFoxWal.jpg" alt="FireFox" title="FireFox" /></bcastr>

"500,280,"表示最终播放器的大小,如果不设定将维持默认值。

如果你安装了本站的另外一个插件Multi Image Uploader Reload ,用它上传图片的同时就会自动生成WP BCastr所需的代码。图片文件的描述(标题),只需修改此图片的title属性即可。

The player will show in this paragraph

问题:

虽然这个Flash支持任意大的尺寸的图片,但是我强烈建议您不要这么做,巨大的图片(比如超过1900X1200)在缩放时会导致浏览器处理器占用极高;关于图片的数量,我也没有细致的测试,10来个问题不大。

目前不支持在撰写中设定扩展参数;


Sep 26

我的一个老插件,我把功能完善了一下,现在用AJAX方式上传,而且上传前可以预览图片(FireFox基于安全策略不允许上传前查看本地文件,所以在FF上禁用了预览功能;IE7则需要把使用本插件的站点加入信任站点列表,注1),查看图像尺寸和文件大小。

一.先看看效果:

The player will show in this paragraph

图片文件上传成功后直接生成WP-BCastr所需代码。

二.下载和安装:

  1. 下载文章附件的插件安装包;
  2. 解压到硬盘,上传整个multiuploader目录到你的插件目录,通常是/wp-content/plugins/
  3. 在WordPress的插件控制面板激活Multi Image Uploader这个插件就行了。

三.使用:

插件在文章发表界面的QuickTag上面创建了Multi Uploader按钮,点击即可打开上传界面,一看就明白了。

注1:

在Internet Explorer 7菜单栏,点工具---Internet选项
选中安全选项卡,可信任站点,然后把论坛的网址http://你的站点.com/添加为可信任站点;
注意:不要勾选“对该区域的所有站点要求服务器验证”

或者使用reg文件导入注册表:(将以下内容存为previw.reg文件,双击导入;导入注册表有可能导致您的机器产生严重问题,此脚本经过本人测试有效无害,但仍然提醒您导入之前做好备份。;参考文献:Security and Compatibility in Internet Explorer 7

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BLOCK_LMZ_IMG]
"Maxthon.exe"=dword:00000000
"TheWorld.exe"=dword:00000000
"iexplore.exe"=dword:00000000

注意:请所有下载过2.2.6之前版本的FireFox用户重新下载本插件。

English:

1.Download the Multi Image Uploader WordPress Plugin.
2.Extract the files.
3.Upload the 'multiuploader' folder to the /wp-content/plugins/ directory (do not alter the structure).
4.Go into your WordPress Administration, and activate the Multi Image Uploader Plugin;
5. Multi Image Uploader automatic add a quicktag button for you on new post page.
6.Use it,That's all.:)

Sorry for all FireFox users,Please download version 2.2.6 for FireFox work.


Sep 10

一直想做一个实时预览文章的东西,却不知道做在哪好。现在终于完成了,请看本站的“文章检索”页面。

舍弃了华丽但是臃肿的af-extended-live-archive,换用了Viper007Bond同学的Clean Archives Reloaded,特别欣赏作者对JS代码随用随载的方法,而不是一股脑全往Header里面丢。

看到文章列表后面那个小图标了吗?点它!---这就是我加的一点小佐料:文章实时预览。

参考ajaxwp,改变思路,用WordPress原本的方式渲染文章,用脚本访问 ajax-wp.php:


<?php
/**
 * AjaxWp - An AJAX enchancement for Wordpress
 * Copyright (c) 2006, Gianni Milanesi <gianni@giannim.com>
 *
 * AjaxWp is freely distributable under the terms of an MIT-style license.
 * For details, see the AjaxWp web site: http://www.giannim.com/projects/ajax-wp
 *
 */
	$postid = $_GET['postid'];
	require('../../../wp-blog-header.php');
	// Load the requested posts
	query_posts('p='.$postid);
	include("ajax-single.php");
?>

其中ajax-single.php则为原模板single.php去掉头尾等多余内容而来:


<div id="content">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="entry">
		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><a href="<?php echo get_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title('-image-'); ?></a></h2>
			<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?><br />
	<?php endwhile; else: ?>
		<div class="entry">
			<p>Sorry, no posts matched your criteria.</p>
		</div>
    <?php endif; ?>
</div>

我希望能得到一些意见建议,如果把这东西处理好了,做成插件应该是蛮好的。


Sep 09

Submit Me是一个向各种书签站提交链接的WordPress插件。您一定会说,这种插件已经很多了,你还做它干嘛。

基本现在基于WordPress的Blog流行这么几种方式提交链接:

1.通过浏览器本身的扩展功能,这个无论FireFox还是IE都有;
2.自己在Blog页面写进一些书签站的HTML代码;
3.用插件,比较出名的有CoolCode.CNBlog It 2alexking.orgShare This。

Blog It不错,我之前就一直在用,但是我发现加载它要花相当的时间,我是用本地服务器测试的,感觉很明显,不知道是不是它用了window.onload加载自己大量核心代码的原因,其中有十几个网站的图标;Share This功能很强大,不过对我来说它太复杂,我也用不到它的邮件订阅功能,虽然它的图标好像并不随页面加载,不过那个50多K的prototype.js足够让我望而却步了。而且Share This那种通过 add_filter把自己放到页面文章的最底部的方式,我持保留态度,虽然Quote It也是这么干的。

Submit Me在实现Blog It的全部功能,和Share This的大部分功能前提下,使用异步方式载入图标内容,使用只有2K左右的JS文件,对网页载入速度影响可以忽略。这就是Submit Me存在的理由。

如上图所示,只有在点击以后才会载入这些站点的图标。如果您和我一样Blog放在并不那么快的服务器,或者您对JS代码大小很敏感,我想Submit Me很适合您。

安装使用:

下载后,把submitme目录上传到WordPress的插件目录,通常是/wp-content-plugins/,后台激活它。

找到你模板目录的single.php,在合适的地方(Loop之外,通常是postmeta之后)添加一句:

 
  
 <?php if (function_exists('show_submitme')) { show_submitme(); }?> 
  
 

刷新一下你的文章页面,那个按钮就会出现了。


Sep 07

以前写的插件,两年后基本都有比我写的更好的替代了,不过这个类型的我倒是还没见过,所以炒现饭炒过来。

FavLinks这个WordPress插件的核心功能都来自YugDesignFavorite Links这个JavaScript脚本,感谢作者的创意和努力。

FavLinks可以给访问你Blog的人即时记录收藏本站文章链接的功能,比如今天看到一些文章,没时间看完了,可以纪录下来,或者搜索的时候把感兴趣的文章记录下来以后慢慢看;这些记录都存放在 Cookie 里面,访问者只要通过同一台机器再次访问你的 Blog ,他的收藏就会在 Your Favorite List 中出现(默认保留 10 条记录)。当然通过 Cookie 记录有好有不好,好在不用强迫用户注册,不好的地方就是用户必须用同一台机器登录,而且不能超过 7 天(插件默认设置)。当然,我个人认为,它和del.icio.us那种是有区别的。

安装与设置

下载 FavLinks,解压后把整个 favlinks 目录上传到你的 WordPress 插件目录,通常是:/wp-content/plugins/;然后到后台激活 FavLinks 这个插件。

在相应的地方添加显示收藏和添加收藏的代码:

1.添加显示收藏的代码:

通常在侧边栏也就是 sidebar.php 中添加这个代码,如下:


<li><!-- favlinks -->
	<h2>私人收藏</h2>
<?php fav_show_refresh(); ?>
</li><!--end of favlinks-->

2.添加加入收藏的链接:

就是要在文章合适的地方添加一个快捷方式,让用户能方便的添加到自己的 Favorite List 内。建议在首页和搜索结果页面,以及存档(Archives)页面添加;需要添加的代码如下:


<a title="Add to Your Favorite List" href="javascript:addFavorites('<?php the_title(); ?>','<?php the_permalink() ?>');">FavLinks</a>

例如 index.php ,找到:


<p class="postmetadata"><!-- Here goes the metadata of your post-->
<?php edit_post_link('#','','| '); ?><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_time('Y/m/d') ?></a> | <?php the_category(' - ') ?> | <a href="<?php trackback_url(display); ?>">Trackback</a> | <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>

后添加上述代码;其它 search.php ,Archives.php 都类似,就不一一叙述了。

如何使用:

点击需要暂存文章的 FavLinks ,确认对话框,系统就会自动把这篇文章的链接添加到你的 Favorite List 里面去,以后再来这个网站,这些文章链接都会出现在 Your Favorite List 里面。

参考:

Internet Explorer 将每个域 cookie 限制从 20 增加至 50


Sep 03

WP Pane 的演示界面

总感觉要显示的东西越来越多,版面越做越花,唉,往好的方面想,我还没老~.~

所以有了这个插件,它把信息分类放入几个TAB栏中,可以方便的缩小大量信息对版面占用。具体效果可以参考我右边侧边栏的“最近文章,热门文章”,还有单文章页面下面的“参考文章”。

这个插件的核心文件来自 webfx.eae.net 的 Tab Pane,首先得感谢它们写出这么好的东西。

安装以及使用:

下载附件,然后上传到你的插件目录,通常都是 Plugins 啦,然后在后台激活这个插件。

首先,你得在心中整理一下你要怎么处理你的信息,这些信息原本是如何输出的,还有你想怎么放置它们。

我们这里以我自己的侧边栏和单页文章举例子:在侧边栏(sidebar),我想把“热门文章”和“最近的文章”整合到一起,而在单页(single page)整合“标签相关的文章”,“内容相关的文章”和“随机文章”,它们对应的输出函数是:

热门文章-->get_most_viewed 来自插件simple-tagging
最近文章-->get_recent_posts_only 来自插件“中文WordPress工具箱”,由桑葚编写;
标签相关文章-->STP_RelatedPosts 同样来自simple-tagging;
内容相关文章-->related_posts 来自Related Posts
随机文章-->random_posts 则是中文WordPress工具箱带的。

对于侧边栏的内容,WP Pane 提供了下面这个函数:


wp_tabpane_sidebar($titlea,$titleb,$funa,$funb,$cana='',$canb='')

它支持两个需要输出的内容也就是两个TAB,$titlea,$titleb分别为两个内容的标题,以上为例对应的就是就是"热门文章“和”最近文章“,$funa,$funb则是对应的函数名,分别为get_most_viewed,get_recent_posts_only,$cana='',$canb=''则是引用对应函数的参数,比如我现在要显示最近的10篇文章,则$canb值为10,综上,我们在侧边栏文件(通常是你模板文件目录下的sidebar.php),加上如下内容就可以了:


<li><h2>文章</h2>
   <?php
    wp_tabpane_sidebar('热门文章','最近文章','get_most_viewed', 'get_recent_posts_only','',10);
   ?>
</li>

而对于单页面,WP Pane提供的输出函数是:


wp_tabpane_show($titlea, $titleb, $titlec, $funa, $funb, $func)

支持三个TAB也就是输出三个不同内容,但是目前不支持引入参数(有些问题没解决),你可以在原本的插件设置好后(通常都有)再用WP Pane来输出。

修改单页面文件(通常是你模板目录的single.php)文件,在合适的地方加入以下代码:


<!-- WP-Tabpane-->
         <?php if (function_exists('wp_tabpane_show')) : ?>
	<h2>您还可以参考以下文章:</h2><br />
	<?php wp_tabpane_show('标签相关','内容相关','随机文章','STP_RelatedPosts','related_posts','random_posts'); ?>
         <?php endif; ?>
<!-- End Pane-->

这样就可以了。

注意,WP Pane目前完美支持引入的函数,原本输出格式都为:


<li>这是内容1</li>
<li>这是内容2</li>
<li>......NNNN</li>

如果不是,则可能导致不可预料的后果,主要是会破坏页面结构。在下一版中可能做一个myfunciton.php的文件,方便使用者自己制作输出一些(非其它插件输出的)内容。


Sep 01

在WordPress使用过程中,有很多情况下,插件的javascript不止一个函数或者功能需要使用window.onload加载自己,我自己这个Blog就有数个,例如SearchNow,FacyToolTip,Google Code Prettify等,还有两个写在我js扩展文件里面的,一个用于转换target="_blank"到rel="external"的函数externallinks,以及去除所有点击虚线框的函数RemoveDotLine。

其实以前经常出问题,主要表现在突然我自己那两个函数不工作了,于是我找过很多关于加载多个windows.onload的文章,如以下列出的方法:


function womOn(){
window.onload = womGo;
}

function womGo(){
for(var i = 0;i < woms.length;i++)
eval(woms[i]);
}
function womAdd(func){
woms[woms.length] = func;
}
var woms = new Array();
/*Now Add Multi Functions:*/
womAdd('hideDiv("rightBox")');
womAdd('ajaxInit()');
womAdd('setHandler("tr","mo","onmouseover","rowHightlight")');
womOn();

以及:


function addOnloadEvent(fnc){
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fnc, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", fnc );
} else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[fnc]();
};
} else
window.onload = fnc;
}
}
/*Now Add Multi Functions:*/
addOnloadEvent(myFunctionName);
// Or to pass arguments
addOnloadEvent(function(){ myFunctionName('myArgument') });

最后:


function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();}
}
}
//Sample usage:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});

有时候用其中一个问题就突然解决了,但实际上我不太明白如何解决的。

直到昨天使用Google Code Prettify这个代码高亮插件,又出了问题,我决心搞个明白。

开始我无论用上面哪种方法加载我的那两个函数,均不能成功,于是打开Google Code Prettify的文件,看它如何加载的,它用的是:


window.onload = function(){prettyPrint();};

于是我把那两个函数放进去:


window.onload = function(){
prettyPrint();
externallinks();
removedotline();
};

刷新页面,可以了。但是我不能靠一个插件来加载我自己的功能吧?

仔细想想,为什么FacyToolTip和SearchNow没有影响我的两个加载呢?

打开这两个插件的源文件一看,原来它们都没有用window.onload直接加载自己的函数,而是用了上面我列出的某种方式加载的。

最后解决方案:把我的两个函数放回我的那个扩展js中,用上面的方法加载,然后修改Google Code Prettify,也采用上面列出的的方法加载,刷新页面,可以了。

结论:在WordPress中,任意一个插件直接使用window.onload加载自己的函数,都会造成一定问题。

在那些罗列的加载方式中,它们考虑的都是普通用首页加载所有函数,而没有考虑到WordPress插件的分离性,所以没有提到这个问题。


Aug 31

flickrRSS我就详细不介绍啦,就是从flickr抓自己的图显示在Blog里面的一个Wordpress Plugin。不过现在使用flickrRSS的会发现图片都是大大小小的红X。。

目前能通过yahoo静态服务器访问,所以我们添加一个函数在里面,暂时可以让您的flickrRSS恢复青春:


//En,Let's Fuck G-r-e-a-t-e.F-i-r-e.W-a-l-l!
function jay_access_flickr($text) { //from Jay Access Flickr (http://www.jaylee.cn/wordpress-plugins/)
  $exchangeSource = array(
"/<img(.+?)src="http://static.flickr.com/(.*?)"(.*?)>/i",
"/<img(.+?)src="http://farm1.static.flickr.com/(.*?)"(.*?)>/i",	"/<img(.+?)src="http://farm2.static.flickr.com/(.*?)"(.*?)>/i",	"/<img(.+?)src="http://farm3.static.flickr.com/(.*?)"(.*?)>/i",
"/<img(.+?)src="http://68.142.213.135/(.*?)"(.*?)>/i",
"/<img(.+?)src="http://69.147.123.56/(.*?)"(.*?)>/i"
  );
  $exchangeDest = array(
"<img$1src="http://farm1.static.flickr.yahoo8.akadns.net/$2"$3>",
"<img$1src="http://farm1.static.flickr.yahoo8.akadns.net/$2"$3>",
"<img$1src="http://farm2.static.flickr.yahoo3.akadns.net/$2"$3>",
"<img$1src="http://farm3.static.flickr.yahoo3.akadns.net/$2"$3>",
"<img$1src="http://farm1.static.flickr.yahoo8.akadns.net/$2"$3>",
"<img$1src="http://farm2.static.flickr.yahoo3.akadns.net/$2"$3>"
  );
$text = preg_replace($exchangeSource,$exchangeDest,$text);
return $text;
}

主要参照了“Jay Access Flickr”的方法。

附注:修改的版本,基于 FlickrRSS 3.2,其它类似的插件都可以通过这个函数来替换特定位置来解决flick被墙的问题。


Aug 29

This is a basic wordpress plugin that makes it easier for visitors to link to your posts.

It adds a small button that when clicked.

Grabs a small snipped of your post, including the title, and a bit of the first paragraph.

Download it here

To install, just:

1) unzip
2)...
Wordpress Link Building Plugin: Blog This Post - http://www.seologs.com

嗯,上面的引用就是从原作者主页利用这个插件直接复制粘贴过来的,的确非常方便。

插件在你的文章最后增加了一个按钮,按这个按钮就会出现一个文本框,其中有当前文章的少许内容加上主页地址和文章名称,点击文本框自动全选其中内容,然后复制粘贴到你(需要引用)的文章中就行了。

原插件文件名,名称与 CoolCode.CNBlogIt重复了,而且截取中文会出现乱码,我就相应的改了一下。

如果你现在在单独的页面浏览这篇文章,左下角那个“QuoteThis”的动画按钮就是这个插件的效果,你可以试试。


[2/3]  < 1 2 3 >