WordPress和Mediawiki高度整合方案

WordPress作为一款最流行的博客程序能够帮助我们创造漂亮并且功能强大的网站,而Mediawiki也是一款十分流行的用以建立类似维基百科知识库的程序。有人采用插件来把Wordpress扩展为一个小型的百科系统,有些人呢则用Mediawiki来做他们的个人博客,但这些做法毕竟都不太专业,那有没有可能性,把它们两个完美的结合起来使用呢?

答案当然是肯定的啦!就拿“好奇来了”当例子吧,博客系统和百科系统分别是由Wordpress和Mediawiki来制作的,而且从使用的情况来看,两者结合的非常完美,各自功能都能充分发挥。下面就来看一看如何完美的整合Wordpress和Mediawiki。

整合主要包含以下三个重要的步骤:

  1. 在服务器端安装两个程序;
  2. 整合两个程序的用户系统;
  3. 整合两个程序的页面排版。

1. 安装Wordpress和Mediawiki

相信看这篇文章的读者对两个程序的安装过程已经是很熟悉的了,但是还是有一些细节需要注意。例如,如果你想让自己的站点看起来更统一的话,最好将百科系统安装在子域名中,就像“wiki.yourdomain.com”一样,这可以让你的百科系统的域名更短、更容易记忆。除了子域名之外,为了让百科的网页地址更漂亮,你还需要进行额外的设置。把下面的代码写进根目录的LocalSettings.php文件:

$wgScriptPath = "http://www.yourdomain.com/w";
$wgServer = "http://wiki.yourdomain.com";
# Rewrite url
$wgArticlePath = "/view/$1";
$wgUsePathInfo = false;

此外,你也必须为你的服务器添加新的重写规则(Rewrite),对应上述代码的Nginx重写规则如下:

rewrite ^([^\.]*)/view/(.+)$ $1/index.php?title=$2 last;
rewrite ^([^\.]*)/view/(.+):(.+)$ $1/index.php?title=$2&$3 last;

同样的事在Wordpress中则相对容易的多,使用后台的固定链接设置功能来美化页面地址吧。

最后,千万不要忘了在服务器配置文件(一般为XXXX.conf)里监听新设定的子域名哦:

server_name wiki.yourdomain.com;
...
include rewrite/(your subdomain rewrite file name).conf;

2. 整合用户管理系统

由于是两个相互独立的系统,Wordpress和Mediawiki拥有各自的用户管理系统(UMS),如果两者进行整合,那我们只需要一套用户系统就够了。选哪一个呢?这里当然是选择功能相对更加完善的Wordpress的用户系统啦。

整合用户系统并不是一件容易的事情,因为你必须解决下列问题:

  1. 当用户在一个系统中注册时,另一个系统需要自动注册对应账号;
  2. 当用户在一个系统中登录时,另一个系统需要自动登录;
  3. 当用户在一个系统中注销时,另一个系统需要自动注销;
  4. 当用户在一个系统中更改密码时,另一个系统需要自动更改密码;
  5. 等等类似的问题

听起来很难?但我们可以使用Mediawiki的一个叫做WPMW的插件来完成大部分的工作哦~插件地址为:WPMU插件地址

直接将AuthWP.php文件下载下来放至在Mediawiki的插件(extensions)目录下,并添加以下代码至LocalSettings.php文件中来激活该插件:

# Add wordpress integration support
$wgAuthWPRelPath = '..';
require_once('extensions/AuthWP.php');
$wgAuth=new AuthWP();

$wgAuthWPRelPath是Wordpress相对于该插件的相对位置。

下一步,我们需要对不同组别用户的权限进行更改,来防止一些意外事件的发生。(毕竟我们的目标是建立一个个人知识管理系统,如果想建立一个类似维基百科一样的开放型系统的,那请忽略这个步骤吧~)

将以下代码写进LocalSettings.php文件:

# Permits of Anonymous
$wgGroupPermissions['*']['createaccount'] = false;
$wgGroupPermissions['*']['read'] = true;
$wgGroupPermissions['*']['edit'] = false;
$wgGroupPermissions['*']['createpage'] = false;
$wgGroupPermissions['*']['createtalk'] = false;
# Permits of Users
$wgGroupPermissions['user']['move'] = false;
$wgGroupPermissions['user']['edit'] = false;
$wgGroupPermissions['user']['createpage'] = false;
$wgGroupPermissions['user']['createtalk'] = false;
$wgGroupPermissions['user']['upload'] = false;
$wgGroupPermissions['user']['reupload'] = false;
$wgGroupPermissions['user']['reupload-shared'] = false;
$wgGroupPermissions['user']['minoredit'] = false;
# Permits of Administrators
$wgGroupPermissions['sysop']['move'] = true;
$wgGroupPermissions['sysop']['edit'] = true;
$wgGroupPermissions['sysop']['createpage'] = true;
$wgGroupPermissions['sysop']['createtalk'] = true;
$wgGroupPermissions['sysop']['upload'] = true;
$wgGroupPermissions['sysop']['reupload'] = true;
$wgGroupPermissions['sysop']['reupload-shared'] = true;
$wgGroupPermissions['sysop']['minoredit'] = true;

以上代码的意思也非常明确。现在只有管理员可以添加并修改百科页面,新用户仅能够从Wordpress入口进行注册,注册成功的同时也会自动给Mediawiki的用户系统注册一个相同的用户。

3. 整合主题/皮肤

在Wordpress中,页面显示框架被称作为主题,而在Mediawiki中则称为皮肤。我相信在几乎100%的情况下,你的Wordpress主题和Mediawiki皮肤看起来是截然不同的。但是,一个好的网站设计不应该在视觉上有太大的差别,因此你必须进一步的把两者设计成一致的外观。

其实主题整合的步骤也不复杂,我们将把Mediawiki的一个叫做Vector的默认主题进行修改来达到目的。Mediawiki的skins文件夹里存放着所有备选的主题皮肤,一般每个皮肤由以下文件和文件夹组成:

  1. Skinname.php
  2. Skinname.deps.php
  3. Skinname/
  4. Skinname文件夹下的js, css或图像文件

Skinname.php是皮肤的核心代码文件。将Vector皮肤包含的所有文件复制一份并重命名为你想要的名字,比如我把它重命名为“hawkinwiki.php”,那对应的文件夹为“hawkinwiki/”。

打开skinname.php文件进行编辑,将所有“vector”字段替换为你的新皮肤名字,在顶端添加以下代码:

/**
 * Include wordpress APIs
 */
$wp_dir = dirname(dirname(dirname(__FILE__)));
require($wp_dir . '/wp-load.php');

注意,dirname()函数的作用是获取某一个文件的系统路径,嵌套使用该函数来得到Wordpress的根路径位置。这个步骤很重要,你需要认真的进行这个步骤,来确保你获取到了正确的路径(简单的说,就是调整dirname函数的嵌套次数)。

找到Vector.php文件里的以下代码:

class VectorTemplate extends BaseTemplate {

把“Vector Template”修改为新皮肤的名字。

接着找到以下代码:

// Output HTML Page

把从这里开始到“”之间的所有代码删除,写上你自己想要的页面代码。

如果你对Wordpress主题开发熟悉的话,接下来的代码则是再熟悉不过的了:

<?php get_header(); ?>
<div id="content" class="eight columns" role="main">
    <!-- post-content -->
    <div id="wiki-content" class="post-box">
        <a id="top"></a>
        <div id="mw-js-message" style="display:none;"<?php $this->html( 'userlangattributes' ) ?>></div>
        <?php if ( $this->data['sitenotice'] ): ?>
        <!-- sitenotice -->
        <div id="siteNotice"><?php $this->html( 'sitenotice' ) ?></div>
        <!-- /sitenotice -->
        <?php endif; ?>
        <!-- firstHeading -->
        <h1 id="firstHeading" class="firstHeading">
            <span dir="auto"><?php $this->html( 'title' ) ?></span>
        </h1>
        <!-- /firstHeading -->
        <!-- bodyContent -->
        <div id="bodyContent">
            <!-- subtitle -->
            <div id="contentSub"<?php $this->html( 'userlangattributes' ) ?>><?php $this->html( 'subtitle' ) ?></div>
            <!-- /subtitle -->
            <?php if ( $this->data['undelete'] ): ?>
            <!-- undelete -->
            <div id="contentSub2"><?php $this->html( 'undelete' ) ?></div>
            <!-- /undelete -->
            <?php endif; ?>
            <?php if( $this->data['newtalk'] ): ?>
            <!-- newtalk -->
            <div class="usermessage"><?php $this->html( 'newtalk' )  ?></div>
            <!-- /newtalk -->
            <?php endif; ?>
            <!-- bodycontent -->
            <?php $this->html( 'bodycontent' ) ?>
            <!-- /bodycontent -->
        </div>
        <!-- /bodyContent -->
    </div>
<!-- /post-content -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

这里就简单的解释一下部分函数吧:

  • get_header()用来获取包含导航菜单在内的页面头部代码;
  • get_sidebar()用来加载Wordpress中的侧边栏内容;
  • get_footer()则用来获取页脚内容。

此外要注意的是,这里所有的HTML中id和CSS类,甚至是代码结构,都可以按照你自身的需要来重写。

另外有一点值得注意的是,在侧边栏自定义的过程中,如果你不想使用和Wordpress一样的侧边栏,那你完全可以使用自己想要的代码来替换get_sidebar()函数。在Vector皮肤中,有一个私有函数“class::renderNavigation()”来加载侧边栏内容,以下代码是我目前采用的侧边栏显示代码:

$this->renderNavigation( 'SEARCH' );
$this->renderNavigation( 'VIEWS' );
$this->renderPortals( $this->data['sidebar'] );
$this->renderNavigation( 'ACTIONS' );

第三行代码可以为你加载百科系统的导航栏。当然你也可以不使用函数来手动制作导航栏,在地址栏中站点URL后输入MediaWiki:Sidebar来进入导航设置页面。以我的网站为例,导航设置页面为”http://wiki.hawkinqian.com/view/MediaWiki:Sidebar”。根据自身需要来设置导航栏内容,下面代码为示意导航结构,你也可以前往这里来查看更详细的说明。

* navigation
** mainpage|mainpage
** Special:RecentChanges|Recent changes
* new heading
** portal-url|portal
** http://www.mediawiki.org|MediaWiki home

最后一步,把以下代码写入LocalSettings.php来设定默认皮肤(注意,这里的皮肤名称需要使用小写字母,否则将无法正常识别):

$wgDefaultSkin = 'yourskinname';

现在,很高兴的通知你,整个整合工作完工啦!保存文件,刷新页面,来一睹新网站的风采吧!