wordpress主题制作菜鸟教程之函数篇

五一跑出去疯了三天,现在继续分享这个尚未完成的wordpress主题制作菜鸟教程。今天我们来看一下wordpress主题中的函数文件是如何制作的,函数文件是wordpress一个很特色的功能,我们常常说wordpress功能强大,有一部分原因就是因为函数文件的存在。

不说废话,打开你的starter theme文件夹(如果你是一步步跟着我做的,应该知道我说的是什么),新建一个functions.php文件,编码方式选择不带bom的utf-8,这个在前面咱也说过了。在functions.php文件中先插入一个空白的标准php语句,如果你不知道什么是空白标准php语句,那也没关系,看下面的就是了。

<?php      ?>

算了,我还是简单唠叨几句functions.php文件的功能,一句话,帮助wordpress实现更多的功能,尤其是依靠wordpress源程序本身实现不了的功能;如果你常常玩游戏,那么外挂的概念应该比较好理解,对了,functions.php就好像是wordpress的外挂一样,可以实现各种你想要的功能,只要你把相应的代码扔到上面那个空白的标准语句里面就ok了。

因为咱们在这里要做的是一个最最基本的主题,所以我不打算添加太多的代码到funtions.php里面,就放两段代码吧,一段实现主题菜单功能,就是可以让你灵活的在wordpress后台通过拖拽的方式设置自己喜欢的导航菜单;另一端代码实现侧边栏小工具功能,我计划添加三个侧边栏小工具区域,当然你可以根据需要添加更多。

铛,铛,铛,代码来了,列位看官瞧仔细了。首先实现菜单功能,代码如下

<?php
/* 使主题支持菜单功能 */
register_nav_menu( 'nav-menu', 'Menu');
?>

很简单是不是?还没反应过来是不是?没办法,就是如此简单,现在我们的主题真正已经具备了菜单功能,你可以直接在后台设置希望显示的选项啦,尽情享受这种快乐吧。有一点要注意哈,就是代码必须放在空白的标准php语句中间!

接着看实现侧边栏小工具区域的代码吧,稍微有一点点复杂,但是没关系,我会详细解释的。

<?php
/* 使主题支持菜单功能 */
register_nav_menu( 'nav-menu', 'Menu');

function new_widgets_init() {

// 第一个侧边栏
register_sidebar( array(
'name' => '第一侧边栏',
'id' => 'widget-area-one',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

// 第二个侧边栏
register_sidebar( array(
'name' => '第二侧边栏',
'id' => 'widget-area-two',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

// 第三个侧边栏
register_sidebar( array(
'name' => '底部工具栏',
'id' => 'widget-area-three',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
// 激活侧边栏的一句函数
add_action( 'init', 'new_widgets_init' );
?>

代码稍微复杂了一点点,通过代码可以很清晰的看到,我们为主题添加了三个工具栏区域,我打算把第一个和第二个放在网页的右侧,第三个放在网页的底部。你可能要问了,它怎么会那么听话,让在右侧就在右侧,让在底部就在底部,很简单,css会让它乖乖的去该去的地方的。

添加侧边栏的代码虽然复杂,但说实话,你完全没必要看懂它,当然如果能看懂也很赞。看不懂并不代表不能使用,请牢记这一点;如我所说,上面添加了三个侧边栏,如果你想要添加更多,直接对应的进行复制,然后顺次进行粘贴就ok,当然请修改一下你新添加的侧边栏的name和id,命名规则请随意,只要不和上面的重复就行;如果你只想要一个侧边栏,那么尽可删除掉后面俩,都没有任何问题。

发现我真的是很难能唠叨,还得说一遍,functions.php中添加的功能代码必须放在空白的标准php语句里面。

ok,如果你是从我这个教程的第一篇开始看的,那么恭喜你,截至这篇文章,我们已经完成了一个最最基本的wordpress主题。如果没有任何操作上的失误,现在这个主题已经可以使用了。你可以把starter theme这个文件夹复制到你的wp-content中的themes文件夹里面,然后去wordpress后台启用它了。当然,在这之前,你至少得在数据库中有那么七八篇文章,才能看到主题显示的效果。

去试试吧,然后可以给我留言,告诉我你碰到了什么问题,我们一起来解决。当然,有一点你不说我也知道,你可能在浏览器中看到的是密密麻麻的文字,排版混乱,就是一行一行的文字摞起来的,没有任何逻辑与美感。原因很简单,因为我们没有进行任何css设置,所以你看到的只是最最原生态的文字。关于css布局设置,是一个众口难调的玩意儿,不同的人喜欢不同的风格,我就不再统一讲了,当然,如果你喜欢我的唠叨风格,后续我会分享一点点简单的css心得和你探讨。

over。

评论

  1. 12 年前
    2012-5-04 19:13:22

    围观围观围观!!!

    • 啄木游弋
      博主
      suN
      12 年前
      2012-5-04 19:29:03

      欢迎强势围观,哈哈

  2. 12 年前
    2012-5-04 19:08:45

    我都是直接折腾的- -对教程这种东西有些感冒

    • 啄木游弋
      博主
      凤翼天堂
      12 年前
      2012-5-04 19:10:43

      我觉得,你是想表达对教程这玩意儿不感兴趣对不?嘿嘿,那应该叫不感冒吧。对了,你这个小头像很可爱,哈哈。

      • 啄木游弋
        12 年前
        2012-5-04 19:24:47

        我错了

  3. 12 年前
    2012-5-04 12:47:10

    我对css完全不会= =
    所以在我按照我爱水煮鱼(是这位来着?)的教程做了一遍之后,发现……这他喵的是啥啊

    • 啄木游弋
      博主
      饭团同学x
      12 年前
      2012-5-04 13:30:54

      对的,水煮鱼。css很有趣的,不过,饭团你能不能不要这么口耐?笑shi我了

      • 啄木游弋
        12 年前
        2012-5-04 18:54:42

        因为我觉得不换成“喵”字的话有些失礼w

        • 啄木游弋
          博主
          饭团同学x
          12 年前
          2012-5-04 18:56:33

          恩,知书达理的好孩纸。北京好热了,该开空调啦。

  4. 12 年前
    2012-5-04 9:37:31

    先学会修改别人的模版,然后慢慢的就会做了!

    • 啄木游弋
      博主
      等待思索
      12 年前
      2012-5-04 10:02:42

      恩恩,其实差不多,我是先学会自己做简单的,然后学会修改别人模版的。

  5. 12 年前
    2012-5-03 22:54:00

    通过卢松松博客过来看看

    • 啄木游弋
      博主
      外汇交易
      12 年前
      2012-5-03 22:56:08

      哦,欢迎欢迎哈,小站简陋,希望你能喜欢。

  6. 12 年前
    2012-5-03 21:31:42

    传说中的沙发?
    多发点菜鸟教程帮助新人很不错~

    • 啄木游弋
      博主
      刘印博客
      12 年前
      2012-5-03 21:33:13

      杠杠的,沙发就是您的啦。嗯,一个菜鸟写出来的菜鸟教程,可以想象有多么基础了,我估计真正的高手看到了是会笑掉大牙的。

      • 啄木游弋
        12 年前
        2012-5-03 21:39:25

        不会的,笑的都是半懂不懂的人,你写的这些东西不懂的人才能看懂,加油吧~

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇