和 "WordPress" 有关的文章

2007-08
09

更新至WordPress2.2.2

WordPress ， 浏览：417 0

这次升级并没有改变数据库的结构，也没有功能上的改变，只是修复了几处 bug ，所以可以放心、安全地升级。

为方便大家，提供wordpress 2.2.2 下载：

  • wordpress 2.2.1 到 2.2.2 升级包（直接覆盖即可）：下载
  • wordpress 2.2.2 简体中文完整安装包：下载
2007-07
31

在WordPress中加入Google AJAX搜索

WordPress ，，， 浏览：1,315 8

这两天在为博客添加 Google 搜索功能的时候了解到了 Google Ajax Search ，听闻其功能很强大，于是马上 Google 了一下，学习怎样加入到 WordPress 中，其实不只是 WordPress，所有的页面都可以使用 Google Ajax Search。

在使用过程中参考了徘徊在玻璃之城的文章 Google AJAX Search 使用简介，成功地将 Google AJAX Search 加入到了我的 blog 中。下面给大家分享一下具体怎样做：（更新：由于 Google Ajax 搜索代码很多，比较拖速度，故本站暂停使用。本文介绍的方法仍然有效。重新加入了 Google Ajax 搜索，演示地址请看存档页。）

首先你要做的是去 Google 的网站申请一个 Google AJAX Search API ，点击左下角的确认框，并且输入你的 blog 地址后，你会得到一个长长的 Key 。

然后把如下代码加入到你的 header.php 的 <head> 和 </head> 之间。

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=请在此处填写你的key" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF); //可选项，如果删除此行，搜索结果将在新页中打开
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET); //可选项，如果删除此行，搜索结果将从10条变为4条
 
// create a draw options object so that we
// can position the search form root
var options = new GdrawOptions();
options.setSearchFormRoot(document.getElementById("searchForm"));
options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
 
var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("填入你的网站标签");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("填入你的blog网址");
searchControl.addSearcher(siteSearch);
 
// standard, unrestricted web search
searchControl.addSearcher(new GwebSearch());
 
searchControl.draw(document.getElementById("searchResults"), options);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>

几个需要修改的地方已经在代码中说明。

接下来就看你需要什么样的显示方式了，你可以选择把搜索栏和搜索结果分开显示，或者在一起显示。

1、分开显示：在你需要显示搜索结果的地方（例如 index.php 或 single.php 中）加入如下代码：

<div id="searchResults"/></div>

然后在你需要显示搜索栏的地方（例如 sidebar.php 中）加入如下代码：

<div id="searchForm"></div>

2、一起显示：在你需要显示搜索栏和结果的地方加入如下代码：

<div id="searchResults"/></div>

注意：把搜索栏和搜索结果一起显示不需要 <div id=”searchForm”></div>，在 <div id=”searchResults”/></div> 处会显示搜索栏和搜索结果。

最后，再把搜索栏和搜索结果的 CSS 样式加入你的 style.css 中，然后按照你自己的风格修改一下，就大功告成了。CSS 代码如下（需要修改的地方已经在代码中说明）：

/** Copyright 2005 Google Inc. All rights reserved. */
 
/* the GSearchControl CSS Classes
* .gsc-control :主显示框
*/
.gsc-control {
width: 98%;
}
 
.gsc-control div {
position: static;
}
 
/* control inputs
* .gsc-search-box : 搜索栏大小
* .gsc-input : the text input area
* .gsc-keeper : the save link below savable results
*/
form.gsc-search-box {
width: 96%;
}
 
/*
* This table contains the input element as well as the search button
* Note that the search button column is fixed width, designed to hold the
* button div‘s background image
*/
table.gsc-search-box {
width : 100%;
margin-bottom : 2px;
margin-top : 5px;
margin-left: -6px;
}
 
td.gsc-search-button {
width : 1%;
}
 
td.gsc-clear-button {
width : 14px;
}
 
/**
* undo common generic table rules
* that tend to impact branding
*/
table.gsc-branding td,
table.gsc-branding {
margin: 0 0 0 0;
padding: 0 0 0 0;
border : none;
}
 
table.gsc-branding {
border-style : none;
border-width : 0px;
border-spacing : 0px 0px;
width : 100%;
}
 
td.gsc-branding-text {
vertical-align : top;
}
 
td.gsc-branding-text div.gsc-branding-text {
padding-bottom : 2px;
text-align : right;
color : #676767;
font-size : 11px;
margin-right : 2px;
}
 
td.gsc-branding-img-noclear {
width : 51px;
vertical-align : bottom;
}
 
td.gsc-branding-img {
width : 60px;
vertical-align : bottom;
}
 
input.gsc-search-button {
margin-left : 4px;
}
 
div.gsc-clear-button {
display : inline;
text-align : right;
margin-left : 4px;
margin-right : 4px;
padding-left : 10px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(’http://www.google.com/uds/css/clear.gif’);
 
cursor : pointer;
}
 
/*
* Given that this is sitting in a variable width tabel cell, the idea is
* for it to consume the entire cell. The adjacent cell contains the search
* button and that is a fixed width cell.
*/
input.gsc-input {
padding-left : 2px;
border-style : solid;
border-width : 1px;
border-color : #BCCDF0;
width : 99%;
}
 
/* tabbed mode of search control
* .gsc-tabsArea : the box containing all of the tabs
* .gsc-tabsAreaInvisible : same as above, but this is the state when search has been cleared
* .gsc-tabHeader : an individual tab
* .gsc-tabHeader.gsc-tabhActive : the active tab
* .gsc-tabHeader.gsc-tabhInactive : an inactive tab
* .gsc-tabData : the data area/box containg results and header data for each tab
* .gsc-tabData.gsc-tabdActive : the data area for the active tab
* .gsc-tabData.gsc-tabdInactive : the data area for inactive tabs
*/
.gsc-tabsArea {
clear: both;
margin-top: 6px;
}
 
.gsc-tabsAreaInvisible {
display : none;
}
 
.gsc-tabHeader {
display: inline;
cursor: pointer;
display: inline;
padding: 2px 10px !important;
border: 1px solid #999; /*可修改搜索结果标题栏的边框颜色*/
border-bottom: none;
margin-bottom: 0;
margin-right: -6px; /*不要修改*/
margin-left: 10px; /*不要修改*/
}
 
.gsc-tabHeader.gsc-tabhActive {
background: #f3fce6; /*正在显示的搜索结果标题栏的背景*/
color: #0C72A2; /*正在显示的搜索结果标题栏的字体颜色*/
 
}
 
.gsc-tabHeader.gsc-tabhInactive {
 
}
 
.gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #f3fce6; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
}
 
/*此代码只对IE6适用*/
* html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #f3fce6; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改，保证tab显示效果和firefox一致*/
}
 
/*此代码只对IE7适用*/
*+ html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #f3fce6; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改，保证tab显示效果和firefox一致*/
}
 
.gsc-tabData.gsc-tabdInactive {
display: none;
}
 
/* tab specific results header supression
* - no twiddle, tabbed mode runs in full expand mode
* - no title
* - no stats
*/
.gsc-tabData .gsc-resultsHeader .gsc-title {
display: none;
}
 
.gsc-tabData .gsc-resultsHeader .gsc-stats {
display: none;
}
 
.gsc-tabData .gsc-resultsHeader .gsc-results-selector {
display : none;
}
 
/* the results for each section
* .gsc-resultsbox-{visible,invisible} : a complete-collection of results including headers
* .gsc-results : the collection of results for a given searcher
* .gsc-result : a generic result within the control. each result has this class, as well as .gsc-xxxResult where xxx is web, image, local, blog, etc.
*/
 
.gsc-resultsbox-visible {
display : block;
}
 
.gsc-resultsbox-invisible {
display : none;
}
 
.gsc-results {
clear: both;
padding-bottom: 2px;
}
 
.gsc-result {
margin-bottom: 10px;
}
 
.gsc-result .gs-title {
height: 1.4em;
overflow: hidden;
}
 
/* specialized, result type specific, fine grained controls */
.gsc-result div.gs-watermark {
display: none;
}
 
/* Ads
*/
.gsc-results .gsc-result img.gs-ad-marker {
display: none;
}
 
/*** End of Control, Begin Results ***/
 
/* generic, cross cutting result style
* - in the form of .gs-result .gs-xxx where xxx is the generic style
* .gs-title : typically the first line of a result, typically a link, image results over ride this, since for image results, the image is the link
* .gs-divider : typically seperates results from ads
* .gs-visibleUrl : typically the last line of a result, displayed in green. sometimes a link (like in blog search)
* .gs-clusterUrl : for news, and other similar services, this is a cluster of additional results
* img.gs-image : an actial image in a result
* .gs-phone : a phone number
* .gs-address : an address (includes street, city, region, country)
* .gs-streetAddress : a street (including #)
* .gs-city : a city
* .gs-region : a region (zip code, area, etc.)
* .gs-country : a country
* .gs-snippet : snippetized content
 
* .gs-watermark : indicator that user selected this result
* .gs-metadata : generic metadata, e.g.,
* .gs-image-box : generic container for a result‘s image (within a table)
* .gs-text-box : generic container for a result‘s text content (within a table). Note that this class, and image-box are only used in video
*/
.gs-result .gs-title,
.gs-result .gs-title * {
color: #0C72A2; /*搜索结果内容标题栏颜色 */
font-weight: bold;
text-decoration: underline;
padding-bottom:5px;
}
 
.gs-divider {
padding-bottom: 8px;
text-align: center;
color: #676767;
}
 
.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
color: #789d47; /*搜索结果来源网站的颜色 */
text-decoration: none;
}
 
.gs-webResult div.gs-visibleUrl-long {
width : 100%;
overflow : hidden;
display : none;
}
2007-07
25

我正在使用的WordPress插件

WordPress ， 浏览：940 6

学习前人，也写一个我使用 WordPress 插件列表，方便自己的同时也向其他朋友尤其是像我这样的 WordPress 新手提供一些有用的信息。（根据我的插件使用情况随时修改）

  1. 中文 WordPress 工具箱。作用：用来解决官方 WordPress 没有照顾到的中文相关问题。使用这个插件，可以显示随机文章，最新留言，留言最多文章，发表评论最多的网友，文章摘要。效果见本站侧栏的随便看看（随机文章）。注：现在使用的是巧克力工厂修改后的版本。
  2. WP-PageNavi。作用：为页面添加分页导航。效果见首页下方的分页导航栏。
  3. WordPress Database Backup。作用：顾名思义，为你的 WordPress 数据库进行备份。可以下载备份或者把备份文件发给你的邮箱。
  4. Google (XML) Sitemaps。作用：SEO 必备插件，生成网站地图并自动通知搜索引擎收录，使 blog 更好的被Google、Yahoo 等搜索引擎收录。
  5. All in One SEO Pack。作用：SEO 插件。通过优化文章的标题、为页面添加关键字等来提高 SEO。
  6. Extended Live Archives。作用：使用 ajax 技术实现动态存档页。效果见我的存档页。
  7. WP-PostViews Plus。作用：显示文章的浏览次数和按照浏览次数显示热门文章。这里有详细介绍
  8. CoolCode。作用：代码语法着色，支持多种语言。效果见每篇有代码的文章，如这篇。
  9. Subscribe To Comments。作用：使读者可以通过邮箱订阅一篇文章的后续评论。效果见评论提交按钮下面的“邮箱订阅评论”。
  10. WP AJAX Edit Comment。作用：允许你的用户在发表评论以后的一定时间内对评论进行编辑。（对不小心说错的人来说很有用）发表一个评论就能看到效果了。暂时停用。
  11. Spam Karma 2。作用：防垃圾评论的著名插件。
  12. Community Cloud。作用：生成类似标签云的“用户云”。效果见关于页面。
  13. Full Text Feed。作用：防止文章中使用了 more 后在 feed 中不输出全文。
  14. No Self Pings。作用：阻止 WordPress ping 自己的文章。
  15. Simple Tags。作用：强大的 tag 管理插件，支持 WP2.3 以上的原生 tag，功能有自动提示 tag、tag 云、（feed）相关文章、批量编辑 tag 等。强烈推荐。
  16. Wordpress Thread Comment。作用：允许用户回复某个特定的评论并集中显示相似评论， 可以自由选择是否使用 ajax。
  17. Lighter Menus。作用：为 WordPress 管理后台创建一个下拉菜单，简化操作。

更新于2008-06-23。

2007-07
24

怎样在WordPress中分类显示友情链接

WordPress ，， 浏览：820 4

今天刚把博客建好，从我的netvibes中导出了OPML文件，然后在wordpress的后台导入OPML文件加入我的友情链接。虽然在友情链接的设置中可以设置分类，但是在前端页面中的显示却还是堆在一起，没有条理。怎么解决呢？

查阅一下得知，在sidebar.php中调用链接的默认语句是：

<ul class="linkcat">
      <?php get_links('-1', '<li>', '</li>', '<br />', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>
</ul>

可见，调用链接的时候需要10个参数。从wordpress的文档中学到，调用链接的格式化语句是这样的：

<?php get_links(category, 'before', 'after',
 'between', show_images, 'order',
 show_description,show_rating, limit,
 show_updated, echo); ?>

按照默认值，每一个参数对应的含义为：

  • 显示所有链接
  • 每一个链接项后换行
  • 如果有图片，加入图片
  • 图片和文本之间加入空格
  • 按照链接名排序
  • 显示链接的说明
  • 不显示分级
  • 除非有限制，显示所有链接
  • 以链接而非文本形式显示链接

知道了这些就好办了，默认的第一个参数为“-1”即是显示所有连接，只要知道链接的分类id，就可以分类显示了。链接的分类id可以在 Wordpress 后台中的管理分类中查到。现在，就可以把原来sidebar.php中的调用函数改为：

<h3 class="sidebarsubtitle">好友</h3>
<ul class="linkcat">
     <?php get_links('4', '<li>', '</li>', '<br>', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>
</ul>
<h3 class="sidebarsubtitle">优秀bloggers</h3>
<ul class="linkcat">
     <?php get_links('5', '<li>', '</li>', '<br>', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>
</ul>

其中的

<?php
<h3 class="sidebarsubtitle">好友</h3>

可以自己设置css样式。效果就像我的右边侧栏中的一样。

共4页‹ 上一页1234