wordpress - Linux ABC

如何在DreamHost中升级wordpress

2009年06月1日 12:52 | 分类：wordpress

linuxabc租用的是DreamHost的空间，该空间提供了PHP+MySQL，用户可通过SSH或者Web panel进行管理，由于我是跟别人合租的，因此没有Web Panel的管理权限，也罢，SSH更适合我一点，方便、快捷。

2.7.1相对于2.6而言融入了很多新的特性，出来也有一段时间了，已趋稳定，因此我打算升级到2.7.1，与此同时，放弃了自己打造theme的幻想，直接用Jinwen的js-o3-lite，网页设计还真不是自己的强项。

wordpress升级很方便，基本的步骤是用新的wordpress替换掉就版本的wordpress，然后重新更新一下数据库即可。

1、用FlashFXP将2.7.1压缩包上传到DreamHost

2、备份旧的wordpress

user@computer:$ tar cvf linuxabc.net.cn.20090530 linuxabc.net.cn/

3、将wp-config.php拷贝出来

user@computer:$ cp wp-config.php ../

4、删除linuxabc.net.cn目录

user@computer:$ rm -rf linuxabc.net.cn/

5、将新版本的wordpress解压到linuxabc.net.cn

user@computer:$ tar zxvf wordpressxx.tar.gz linuxabc.net.cn

6、根据旧的wp-config.php更改linuxabc.net.cn/wp-config.php

主要是数据库的用户名和密码

7、在IE中打开http://www.linuxabc.net.cn/wp-admin.php

这时会出现要求更新数据库的提示，点击“确定”即可完成整个升级步骤，非常简单。

标签：dreamhost、wordpress 浏览: 220 | 发表评论

LinuxABC主题之圆角

2008年12月9日 23:05 | 分类：wordpress

在web2.0的时代，网页设计大量采用了圆角效果，套用《大腕》里的一句台词就是“你不圆都不好意思跟别人打招呼。”，alfie也不能免俗，决定为LinuxABC的页面元素加入圆角效果。

目前实现圆角效果的主流方式有两种，一种是CSS+DIV，另一种是使用圆角图片。这两种方法对alfie来说都不方便，第一种需要掌握复杂的div嵌套，而且圆角无法做到抗锯齿；第二种则需要使用图像处理工具，而alfie最怕的就是去学习photoshop这个庞然大物，所以决定另辟蹊径。

曾经见过有人用JavaScript解决过圆角问题，而LinuxABC将大量采用jquery，所以alfie搜索了一下jquery的官方网站，还真的有好事者做了圆角效果的插件，而且还不少：

对比一下上面几个插件，alfie最终决定采用rounded corners。因为另外三个插件不支持在div里直接提供参数，当多个页面元素的圆角弧度均不相同的时候需要用户在$("#ElementID").corner()中单独提供参数，这就造成展示层跟代码层的混合，不利于后期的维护。下面以一个例子展示JQuery Corner Galley和Rounded Corners两个插件的不同之处。

为LinuxABC的

topNavi的左上角和右上角做圆角效果；
wrapper的左下角和右下角做圆角效果；

JQuery Corner Galley：

<script>
   $(document).ready(function(){
      ...
      $('#topNavi').corner("round top 4px");
      $('#content').corner("round bottom 5px");
      ...
   });
</script>
<div id="topNavi">...</div>
<div id="content">...</div>

Rounded Corners：

<script>
   $(document).ready(function(){
      ...
      $('.rounded').corner();
      ...
   });
</script>
<div class="rounded {4px top}" id="topNavi">...</div>
<div class="rounded {5px bottom-left}" id="content">...</div>

rounded corners这种方式无疑更方便些，而且后期的维护相对简单。

短短几行代码就能搞定大部分的圆角效果，jquery实在是太神奇，想不爱她都不行！

标签：linuxabc、theme、wordpress 浏览: 575 | 发表评论

linuxabc选用的第一款主题是ProSense，虽然号称2007年最佳adsense主题，然而alfie对它还是有诸多不满，因而踏上了优化主题这条不归路，结果，耗费了大量的时间后发现自己根本不是网页设计那块料。术业有专攻，网页漂不漂亮还是留给专业设计师去烦心吧。那就回归到博客的本质，博客就要在互联网上把自己的思想、见解展示给别人看，所以内容才是根本。有了好的内容就要让读者阅读起来舒服，这段时间也试用了不少国外优秀的主题，可惜对中文的展示欠佳，文章阅读起来有些吃力，主要是字体设置过小，于是alfie这两天着手改善文章的阅读体验。

全文阅读 »

标签：中文、网页、阅读体验浏览: 479 | 发表评论

wp-syntax（geshi）使用小技巧

2008年10月12日 21:21 | 分类：wordpress

一般情况下，wp-syntax会自动将代码中的tab设置成8，这对于紧张的网页来说是很浪费的，解决的方法有两种：一种是修改geshi的源代码，另一种是用文本编辑器将代码中的tab转换成空格。

By default, Geshi wraps code blocks in pre tags (header_type = GESHI_HEADER_PRE). In this mode, tabs are not substituted for spaces, so the browser is displaying the tab directly and the width is browser dependent. Personally, I avoid tabs like the plague in my source code, but if you’re not like me, you can try setting the header type to GESHI_HEADER_DIV. For example: http://wordpress.org/support/topic/138861

请对比下面两种效果：

一、tab未转换之前

<?php get_header(); ?>
<div id="wrapper">
	<div id="content">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="navigation">
			<div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
			<div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
			<div style="clear:both;"></div>
		</div>
		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><a href="&lt;?php echo get_permalink() ?&gt;" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
		<!-- display the postmetadata -->
		<div class="postmetadata">
      	<?php the_time('Y/m/d') ?>&nbsp;&nbsp;&nbsp;<?php the_tags('Tags: ', ', ', ''); ?>
		</div>
			<div class="entrytext">
				<?php the_content('<p class="serif">阅读全文 &raquo;</p>'); ?>
				<?php if(function_exists('the_ratings')) { echo '<div class="postmetadata p_ratings">评价本文:'; the_ratings(); echo '</div>'; } ?>
				<?php link_pages('<p><strong>页:</strong> ', '</p>', 'number'); ?>
				<div style="clear:both;"></div>
			</div>
		</div>
	<?php include('adsense_singlepost_bottom_square.php') ?>
	<?php comments_template(); ?>
	<?php endwhile; else: ?>
		<p>不好意思，没有找到符合您条件的文章。</p>
<?php endif; ?>
	</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

二、tab转换成空格后

<?php get_header(); ?>
<div id="wrapper">
   <div id="content">
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <div class="navigation">
         <div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
         <div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
         <div style="clear:both;"></div>
      </div>
      <div class="post" id="post-<?php the_ID(); ?>">
         <h2><a href="&lt;?php echo get_permalink() ?&gt;" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
      <!-- display the postmetadata -->
      <div class="postmetadata">
         <?php the_time('Y/m/d') ?>&nbsp;&nbsp;&nbsp;<?php the_tags('Tags: ', ', ', ''); ?>
      </div>
         <div class="entrytext">
            <?php the_content('<p class="serif">阅读全文 &raquo;</p>'); ?>
            <?php if(function_exists('the_ratings')) { echo '<div class="postmetadata p_ratings">评价本文:'; the_ratings(); echo '</div>'; } ?>
            <?php link_pages('<p><strong>页:</strong> ', '</p>', 'number'); ?>
            <div style="clear:both;"></div>
         </div>
      </div>
   <?php include('adsense_singlepost_bottom_square.php') ?>
   <?php comments_template(); ?>
   <?php endwhile; else: ?>
      <p>不好意思，没有找到符合您条件的文章。</p>
<?php endif; ?>
   </div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

很多文本编辑器都有tab转换空格的功能，alfie用的是UltraEdit-32。

标签：geshi、wp-syntax 浏览: 647 | 发表评论

如何在不同页面间使用不同的样式表

2008年09月30日 02:50 | 分类：wordpress

大多数主题使用一个统一的样式表: style.css，这并不能满足一些特殊需要，例如linxuabc的首页(index.php)和全文页(single.php)布局就不一样，所以需要实现在不同页面中使用不同的样式表。