很多人用wordpress时都喜欢调用google picasa相册，虽然目前有插件支持，不过要修改的地方很多，而且很多人装了却显示不出想要的效果，在论坛我回答过好多关於picasa相册的问题，现在直把它整理出来让大家分享，当然网上也有相关类似的文章，不过都不十分详细，对於新手来说还是比较难入手的。
　　一、首先说下，这个方法主要是用到Web Picasa API，这种效果完全是javascript（JSON API）实现的，主要用的是JavaScript interface to PicasaWeb Albums（在这里下载），其实就是一个单js文件，调用代码如下：

<script type=’text/javascript’>
 username = ‘your.username’; photosize=’800′;
</script>
<script type=’text/javascript’ src=’http://yourpath/pwa.js’>
</script>

　　说明：you.username是你的picasa用户名，http://yourpath/pwa.js就是我们这个api js文件的存放点，请输完整路径。
　　当然如果你不在上面下载，也可以参考下我的代码。
　　二、创建一个页面模板，把上面的代码放进去，当然还需要一些CSS样式文件。复制一个你的页面模板，把上面的调用代码和CSS样式放进去，放在你正文div里面，完整代码如下：

<style type=”text/css”>
<!–
.photobigbox{background:transparent url(http://youpaty/images/album.gif) no-repeat scroll left center;height:194px;text-align:center;width:194px;margin:0pt auto;}
.photosmallbox{padding-top:16px;text-align:center;}
.album,.photo{float:left;width:194px;}
.album img, .photo img{border:1px solid #000;width:160px;height:160px;}
#left{padding-right:0 !important;margin-right:0 !important;width: 74%;float:left;}
#sidebar{width:25%;float:right;margin-left:0 !important;padding-left:0 !important;min-width:235px;}
#sidebar li.sc {width:190px;}
.albumtitle{height:45px;text-align:center;}
.smallpicture{float:left;}
.picturebox{width:164px; height:164px; padding:10px;text-align:center;}
.picturebox img{border:1px solid #000;}
.picasa{background:transparent url(http://youpaty/images/picasaweb.gif) no-repeat scroll right 0; margin-left:10px;}
.pctitle{margin:5px;}
–>
</style>
<div id=”primary-wrapper”>
<div id=”picasa”>
<!– single post loop –>
<!– content –>
<script type=’text/javascript’>
     username = ‘youname’; photosize=’640′;
    </script>
<script type=’text/javascript’ src=’http://youpath/pwa.js’>
    </script>

　　创建模板时一定要注意，在前面加上这句：

<?php
/*
Template Name: Picasa Template PAGE
*/
?>

　　模板完成后，当然得创建一个页面了，然后模板就选我们上面创建好的picasa相册模板。
　　三、完成，如果你的picasa相册还没有相片，那就马上去传吧！
演示


相关文章