Palmback™菜园地

“我们确实有如是的优点,但也要隐藏几分,这个叫做涵养。别人确实有如是的缺点,但也要隐忍几分,这个叫做城府。”Internet

Posts Tagged ‘WordPress Theme’

主题Wishing Box

现在的主题已经使用快一个月了,还没正式介绍一下。

这是一个基于WordPress默认主题K2修改、移植Boxwish的主题,其设计出自Kyan之手;也是我使用WordPress一年多以来自己动手的第一款主题,就叫Wishing Box吧。期间有几个网友留言或发信问我能否分享这个主题,因Boxwish是商业网站,我也是未得到对方许可便私自移植了,所以不便传播,请见谅

以下可能是主题中大家比较感兴趣的地方:

  • 顶部滑动显隐的工具条。这是用jQuery实现,初接触jQuery,对jQuery的函数不太了解,代码写得很累赘,就不在这丢人现眼了。
  • 文章标题前作者头像的调用。这个比较适合多用户博客,单用户就没必要了,现在Gravatar在国内的载入速度还是很不理想。通过WordPress内置的get_avatar函数就可以实现:
    <?php echo get_avatar( get_the_author_id(), 48 , get_bloginfo('template_url').'/images/AvatarDefault.jpg' ); ?>
  • sidebar上最新评论头像的调用参考ThinkElegant WordPress Theme,应该还有其它类似的插件,参看G7v6
  • ……

应该就这些了吧。

升级WordPress主题使支持Widgets

昨天花了点时间把主题升级了一下,使之支持Widgets,其实就是在sidebar.php和functions.php里加了几行代码。参考WordPress官方的一篇文章,顺手翻译了一下,以直译为主,感觉很别扭,这也许也是我不愿看中文配音的外语片的原因吧。

Widgetizing Themes

这个页面包含了关于升级主题使之能使用widgets(小工具)的技术指南。大多主题能在5到10分钟完成升级。其他主题要花费一两个小时以完成所有的操作。一些主题不管你怎么做都看起来很糟糕。这个文档只负责基本的PHP编辑技巧,但你可能没有必要自己写任何代码。

我是一个主题作者,怎么所有邮件都是要求我升级主题的?

你应该感到高兴他们喜欢你的主题,联系你比更换使用别人的主题好。干得好,使用户满意!现在我们正在使这个插件可用,以示WordPress团队如何喜欢它,同时也给人们写widgets的机会。如果一切进展顺利,这个功能将整合到标准的WordPress分布,任何不支持widgets的主题也将支持,如果你不相信我们的预言,(你的主题)很快就会过失。

我们很抱歉如果这看起来有威胁意味。它伤害我们比伤害你多。请修正你的主题吧。

我投降。我怎么修正我的主题?

首先你应该问自己:我了解关于我的主题吗?它是用无序列表创建边栏的吗?(如果你不能回答以上问题,那在这项任务中你需要深入的帮助,这通常以为着你要支付某人很多钱,或者爽快地到论坛请教吧。更好的,你可以学习HTML。抱歉,我们这不教这个。)

这是一个很好的边栏标签的例子:

<ul id="sidebar">
<li id="about">
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id="links">
<h2>Links</h2>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</li>
</ul>
注意整个边栏是一个无序列表,而且标题都在<h2>标记里。并非每个主题都这样构建边栏的,也没必要这样做,但是据我观察这是目前主题边栏普遍的标记法,所以我采用了。id=”links”的元素等价于一个基本的小工具(widget)。

激活后,动态边栏插件给你的模板一些类似于模板标记的功能。这些功能使WordPress用一个动态的边栏替代主题的默认边栏,如果禁用插件或者移除所有的小工具,那么动态边栏又恢复到默认的边栏。

这是一个例子,一个基本的边栏升级使用同下标记:

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<li id="about">
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id="links">
<h2>Links</h2>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</li>
<?php endif; ?>
</ul>

看到了吧?我们仅仅添加了两行代码到模板中,如果可能将会显示一个动态边栏,否则显示原来的边栏。在管理界面中禁用插件或者移除所有的小工具将显示原来的边栏。

现在对主题还有一件事要做。如果你正在使用WordPress 2.0或者更高版本,这个更改将在主题目录里的functions.php中进行。(WordPress 1.5用户:我们不再鼓励用户使用WordPress 1.5,所以你在这里找不到任何帮助,我们甚至不知道是不是可能,因为没有试过。)

这是一个没有functions.php这个文件的主题的示例(文件的开头和结尾请勿留空白行)::

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

就是他,仅仅四行。这写代码告诉插件你的主题正好需要一个动态边栏。到此,你的管理界面中的Presentation菜单上应该多出一个额外的条目:Sidebar Widgets。从左边的面板上拖拽一些小工具到标有Sidebar 1的盒子里并保存更改。生效了吗?难以置信。

我的边栏不是一个列表,我该怎么做?

我们了解你所问的。你必须发现你边栏的设计模式,然后用一些额外的参数告诉插件如何设计他们对你的主题起作用,我们将通过一个例子。

这是原始的标记:

<div id="sidebar">
<div class="title">About</div>
<p>This is my blog.</p>
<div class="title">Links</div>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</div>

是的,你已经看到像这样的标记。这是第二种最普遍的边栏设计模式,这也是我们为什么选择它作为例子的原因。第一个区别是边栏没有构建在 <ul>标记内,这意味着我们不能使用<li>标记作为小工具的容器。第二个区别是标题被放在<div class=”title”>容器内,而不是<h2>标记。

我们宁愿以ul/li/h2标准改变标记,但是API足够强大,我们没有必要那么做。相反的是,我们通过添加一些参数到functions.php代码中以解决这些问题:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<div class="title">',
'after_title' => '</div>',
));
?>

这是已经插入特别模板标记的sidebar.php标记:

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<div class="title">About</div>
<p>This is my blog.</p>
<div class="title">Links</div>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
<?php endif; ?>
</div>

这样也就照顾了你的HTML标记。

这样,主要的得到照顾了。默认的before_widget是一个小点点而不止是 <li>。它包含ID和类Well, 到这里有点复杂。默认的before_widget 包含把字符串格式化为%1$s和 %2$s的指令,分别被ID和类取代。ID由小工具名称生成(这就是为什么应该小心命名小工具,不能在一个HTML文档里重复ID!),类由小工具回调函数生成。举例来说,这确保所有的文本和RSS小工具具备独一无二的ID和相似的类名。此外,每个小工具都有一个“widget”类。

所以,如果你想让你的主题更加灵活,你应该使用以下取代空字符:

'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',

现在真正地照顾到你的HTML标记了。

HTML看起来很好但页面在浏览器里看起来很糟糕!

是的,我知道会发生这样的事。你的主题可能在小工具为诞生之前就写出来了,所以作者不知道她应该使样式表足够灵活以处理边栏中的新标记。如果你懂一些CSS,你应该能够在你的样式表末尾用一些新的规则处理这个问题。在你blog的标记中查找属于你想设计的小工具的选择符(ID或者类)。

如果CSS对你来说是一个神秘的东西,我们很以后不能提供你任何帮助。尽管我们非常想帮助你,它不可能应归于主题的原始变化。联系你主题的作者并要求她升级主题,使之能更好地兼容小工具。

搜索小工具仍然很难看,我想要我主题原始的搜索框作一个小工具。

小工具是CSS可选择的,你可以特别地设计它们。然而,标记不可能符合你的嗜好。如果提供他们自己的小工具替代基本的小工具,很多主题看起来会更好,例如Search和Meta。通常最好的办法就是从拷贝sidebar.php已经存在的标记到 functions.php成了一个新的小工具,然后用注册函数把标准的小工具替换为自定义的。

你可以在你主题边栏的任何部分这样做,或者所有都这样。下面是一个示例:

function widget_mytheme_search() {
?>
<< PASTE YOUR SEARCH FORM HERE >>
<?php
}
if ( function_exists('register_sidebar_widget') )
register_sidebar_widget(__('Search'), 'widget_mytheme_search');

我的主题边栏多于一个,我如何使它们都变成动态的?

噢,这很简单。你应该用register_sidebars(n)替代register_sidebar(),N是边栏的数目。然后把适当的数目放在dynamic_sidebar() 函数中,从1开始。(有很多种其他的方法用这个函数,参见 API)。

你甚至可以给你边栏起名字而不是数字,让你为每个主题保存不同的设置。如果你需要了解那么多关于插件的知识,为何不阅读API或者源代码呢?

更多详情!

请阅读我们其他文档、Widgetizing Plug-ins以及 Widget API。如果它们没有满足你的需求,去读源代码吧!

via:Widgetizing Themes

WordPress主题高级技巧

今天在Web Designer Wall上看到这篇文章,感觉对WordPress主题制作和修改比较有用,翻译了一下,个别地方不是特别准确,但应该不影响理解。对我个人来讲,看英文还更容易,因为WordPress本身就是英文的,许多东西也没法准确地译成中文或者说译法不同。

 WordPress 本来是作为一个blog或者blog平台开发的。但是现在WordPress变得越来越强大,你可以用它创建任何类型的网站,并把它当作内容管理系统(CMS)。 在本文中,我将与你分享一些制作更好的WordPress主题的技巧。我不是程序员也不是开发者,所以我更专注于前端的发展。噢,我忘了说WordPress如此易用,即使一个非程序员 (像我这样的设计师)也能建立精彩的网站。我的WordPress站点包括: N.Design StudioBest Web GalleryWeb Designer Wall,以及一些免费的 WordPress主题

WordPress条件标签(Conditional Tags)

条件标签(Conditional Tags) 在创建动态WordPress主题过程中非常有用。你可以用它来控制显示什么内容、如何显示。下面是条件标签的一些应用:

  • 突出动态菜单(Dynamic Highlight Menu)

    这是我在 Best Web Gallery中用来创建突出动态菜单的。在第一个列表项中,如果是Home或者Category或者Archive或者Search或者Single,则添加class="current" 到<li>标签, 这样将突出 "Gallery" 按钮。第二个列表项,如果是 名为 "about"的页,则添加class="current"。 <ul id="nav"> <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="#" mce_href="#">Gallery</a></li> <li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="#" mce_href="#">About</a></li> <li<?php if ( is_page('submit') ) { echo ' class="current"'; } ?>><a href="#" mce_href="#">Submit</a></li> </ul>

  • 动态标题标签(Dynamic Title tag)

    我再次利用条件标签在 header.php中输出 <title> 标签。 <title> <?php if (is_home()) { echo bloginfo('name'); } elseif (is_404()) { echo '404 Not Found'; } elseif (is_category()) { echo 'Category:'; wp_title(''); } elseif (is_search()) { echo 'Search Results'; } elseif ( is_day() || is_month() || is_year() ) { echo 'Archives:'; wp_title(''); } else { echo wp_title(''); } ?> </title>

  • 动态内容(Dynamic Content)

    如过你只想在第一页包含一个文件,下面是代码: <?php if ( is_home() ) { include ('file.php'); } ?>

  • 突出某个分类的文章(Feature post highlighting)

    假设你想添加一个CSS到categoryID 2以突出这个分类的所有文章,你可以用下面的片断 。 <?php if ( in_category('2') ) { echo ('class="feature"'); } ?>

  • 独特的单模板(Unique Single template)

    假如你想使用独特的模板显示某个的分类的个别文章,你可以用 in_category 检查文章属于哪个分类然后使用独特的单模板。在你的默认单模板single.php中加入以下代码。如果文章在category 1,则用single1.php;如果在category 2则用 single2.php; 其它的用single_other.php。 <?php $post = $wp_query- >post; if ( in_category('1') ) { include(TEMPLATEPATH . '/single1.php'); } elseif ( in_category('2') ) { include(TEMPLATEPATH . '/single2.php'); } else { include(TEMPLATEPATH . '/single_other.php'); } ? >

独特类模板Unique Category template

如果你想用不同的分类模板展示特别的分类,将你的分类模板(Category template)另存为 category-2.php(文件名添加 “-” 和分类ID数 )。所以,category-2.php将用来显示categoryID 2,category-3.php将用来显示 categoryID 3, 等等。

在第一篇文章后显示Google AD

很多人问我如何在第一篇文章后面显示Google广告,其实很简单,只需要在循环中加一个变量 ($loopcounter) ,如果 $loopcounter小于或等于1,则加入 google-ad.php 代码。 <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); $loopcounter++; ?> // the loop stuffs <?php if ($loopcounter <= 1) { include (TEMPLATEPATH . '/ad.php'); } ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?>

查询文章(Query Posts)

你可一用 query_posts 控制那些内容在循环中显示。它可以让你控制显示哪些内容、在哪显示、如何显示。你可以查询或者排除某些分类,你完全可以控制。下面我将介绍如何使用 query_posts 显示最新文章、特定文章以及如何排除特定分类。

  • 显示最新文章(Display Latest Posts)

    下面的代码将输出5篇最新文章的列表: <?php query_posts('showposts=5'); ?> <ul> <?php while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php endwhile;?> </ul>

  • 显示特定文章(Display Feature Posts)

    假设分类2(categoryID 2)是你的特定分类(Feature category),你想在边栏中显示五篇 Feature posts,把这些加入sidebar.php: <?php query_posts('cat=2&showposts=5'); ?> <ul> <?php while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php endwhile;?> </ul>

  • 排除特定分类(Exclude specific category)

    你可以用 query_posts 排除特定分类不让它显示,下面的代码将排除分类ID2的所有文章(注意:ID数前面有个减号-): <?php query_posts('cat=-2'); ?> <?php while (have_posts()) : the_post(); ?> //the loop here <?php endwhile;?> Tips: 你可一用 覆盖文章每页的设置 posts_per_page 即 ie. <?php query_posts('posts_per_page=6'); ?>

自定义域(Custom Fields)

自定义域(Custom field )是WordPress最强大的功能之一 。你可以连同文章和摘要附加额外的数据和文字。在自定义域,你可以逐字地把 WordPress变成CMS入口。在Web Designer Wall,,我用自定义域显示文章图片并把它链接到文章。 首先在文章中添加自定义域。 custom fields 把下面的代码加到循环中,以显示文章图片并附加文章链接。 <?php //get article_image (custom field) ?> <?php $image = get_post_meta($post->ID, 'article_image', true); ?> <a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a> Tips: WordPress允许你创建/存储若干关键字(keys),关键字在文章中可多次使用。 我用同样的方法在 Best Web Gallery中创建了极具动态的模板,我用自定义域(Custom Fields)显示站点缩略图、工具图片 及URL。

WP页面列表(WP List Pages)

基于导航的目的,模板标签 wp_list_pages 一般用来在顶部(header)和侧边栏显示WP页面(Pages)列表 。下面我将介绍如何使用 wp_list_pages显示站点地图和子菜单。

  • 站点地图(Site map)

    把下面的代码放到你的站点地图页面模板(Page Template )中,为所有的页面生成一个站点地图(sample)(注意:我排除了pageID 12 ,因为page12 是我的站点地图页面,我不想让它显示): <ul> <?php wp_list_pages('exclude=12&title_li=' ); ?> </ul>

  • 动态二级页面菜单(Dynamic Subpage Menu)

    如果当前页面有二级页面,把下面的代码加入sidebar.php 将输出二级页面菜单: <?php $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0'); if ($children) { ?> <ul> <?php echo $children; ?> </ul> <?php } ?>

页面模板(Page Template)

如果你用WordPress作为基本的页面管理,你最好别遗漏页面模板( Page Template )功能。你可以自定义页面显示。
首先,你需要创建一个页面模板,然后你可以为页面指派特定模板。 下面是页面模板的结构 (ie. portfolio.php): <?php /* Template Name: Portfolio */ ?> <?php get_header(); ?> //the loop here <?php get_footer(); ?>
当你撰写或编辑一个页面,注意右边菜单 “Page Template” 你可以看到可用的模板。
page template

WordPress选项(WordPress Options)

管理面板中有许多内建的选项可以使你的站点更雅观,下面是一部分:

  • 定义第一页(Custom Frontpage)

    WordPress在第一页默认显示blog文章,如果你想用一个静态的页面 取代(ie. welcome or splash page) ,你可以在 Admin > Options > Reading设置。 frontpage setting

  • Permalinks

    WordPress默认用 www.yoursite.com/?p=123 f作为文章URLs, 这不是URL 对搜索引擎也不友好。你可以通过 Admin > Options > Permalinks更改 Permalinks 设置。我个人喜欢吧Permalinks设置为:/%category%/%postname%/ permalinks

  • 分类前缀(Category prefix)

    WordPress默认的分类前置是 "category" (ie. yoursite.com/category/cat-name/)。在Category base (Options > Permalinks)键入"article" ,你分类的URLs 将变成:yoursite.com/article/cat-name/ category prefix

想要更多?

WordPress Codex一直是学习WordPress相关知识的最好地方。 感谢WordPress,快乐地blogging吧! via WordPress Theme Hacks

新主题Illacrimo

花了两天的时间把designdisease的主题Illacrimo修改了一下,使其更适合显示中文、更符合个人的使用习惯。因为Illacrimo Widget ready version中文显示乱码,所以把只能是把相关插件直接加到不支持Widgt版本里去。虽然WordPress主题成千上万琳琅满目,其中不乏来自世界各国设计精英的作品,但似乎很难找到让我觉得喜欢的主题。看了无数主题之后,我还是比较喜欢以前用的Mosaik和现在这款Illacrimo,两款主题都是以蓝色为主体,看起来比较平和,不会觉得张扬。这也可能跟我的性格有关吧,不知道俺家菜菜习惯不习惯。

修改的过程中,遇到的问题主要有两个:

  • 图片自动缩放
    Illacrimo显示内容的列比较窄,只有420px,而以前发的图片基本上都是500px的,得采取措施让超过列宽的图片自动缩小。对于高手而言这是个很简单的问题,用JS、PHP、CSS任一种方法都可以解决,无奈我是菜鸟,对PHP、JS只有一知半解,只能从CSS的角度入手了。在往上寻觅了一阵,综合相关的办法,最后我是用两个属性搞定自动缩放的:max-width:410px;width:expression(width>410?"410px":width);这其实也是CSS和JS的结合,不过这应该是最简单的办法了,主要参考蓝色理想(注意:此法在IE中会使小的图片被拉大,也就说,其实max-width就可以搞图片自适应宽度问题,无奈IE不支持max-width属性,IE7也未解决这个问题)。以下JS函数也可以实现图片自动缩放
    function imgAutoSize() {
    for (i=0;i{
    if (document.images[i].width>400)
    {
    var imgWidth = document.images[i].width;
    var imgHeight = document.images[i].height;
    document.images[i].width = "400";
    document.images[i].height = imgHeight / imgWidth * 400;
    }
    }
    }
  • FlickrRSS
    你要问80后网民最痛恨的是什么,那GFW一定高居榜首。虽然花儿开了已经写了个flickrPicShow解决Flickr被GFW后图片调用问题,但FlickrRSS还是不能用。看了下flickrPicShow的代码,大概只通过正则表达式把图片地址替换成能访问的,当然也可以通过类似的办法访问FlickrRSS,不过对我来说现在还不行。虽然可以把FlickrRSS图片缓存到服务器上,无奈我用的是国内的服务器,也无法访问FlickrRSS。只好暂时妥协,先不用FlickrRSS。

暂时就改成这样了,继续上路吧。