海豚微笑的背后 » Search Results » wordpress+theme+part http://www.kdolphin.com 随便写写 Thu, 29 Dec 2011 16:51:31 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 海豚的WordPress Theme教程 part5 http://www.kdolphin.com/466 http://www.kdolphin.com/466#comments Fri, 21 Apr 2006 10:48:35 +0000 kDolphin sidebar.php和footer.php，这两个其实能讲的不多，一般来说各位拿到一个模版最可能改的就是这两个文件了。 ]]> 　　这次讲sidebar.php和footer.php，这两个其实能讲的不多，一般来说各位拿到一个模版最可能改的就是这两个文件了。

sidebar.php
[php]

[/php]
　　KD02模版的sidebar被分成了两个部分：位于右边的部分提供导航菜单、“关于我”、搜索和Feed订阅地址，位于footer上方的分成了三栏来显示一些信息。

  • line1-line24: 是右侧的sidebar。
  • line2-line9: 这是导航菜单的部分，用css控制一下<li>的表现就很容易实现，如果菜单比较多或者少可以调整一下宽度。
  • line11-line13: “关于我”的部分，没什么说的。
  • line14-line17: 搜索部分。
  • line18-line23: Feed订阅地址。
  • line26-line48: 这是footer上方的三栏内容，用三个<div>来分隔，内容不是很重要，各位都会有自己的习惯。

　　这里提一下sidebar的阴影制作：先决定需要的栏宽；然后做一个1px高度、栏宽宽度+40px的jpg文件；左右作20px适当的灰色；相应css如下。很简单吧，不用作大图片，会根据<div>的高度自适应。
[css]#menu {
float:right;
overflow:hidden;
display:inline-block;
font-size:0.8em;
width:213px;
margin: 220px 0 0 0;
background: url(images/fade.jpg) repeat-y;
padding: 0 20px 10px 20px ;
}[/css]
footer.php
[php]


[/php]
　　footer没什么内容，主要就是一些站点的相关信息。计数器之类的非本地站点代码我也建议放在footer里，因为放在header里很可能因为网络原因拖慢整个页面的读入速度。

]]> http://www.kdolphin.com/466/feed 8 海豚的WordPress Theme教程 part4 http://www.kdolphin.com/446 http://www.kdolphin.com/446#comments Sat, 15 Apr 2006 00:37:02 +0000 kDolphin KD02模版，自己慢慢研究。 ]]> 　　这回讲index.php，从这篇开始我不帖相关的css内容了，因为详细解释css内容就变成css教程了，而事实上我自己都没怎么搞清楚css，一般都是边改边学。需要相关css的可以直接去下载KD02模版，自己慢慢研究。

index.php
[php]

” rel=”bookmark” title=”Permanent Link to “>

@

[more...]‘); ?>

| |‘); ?>

[/php]

  • line1, line43, line45: 负责把header.php, sidebar.php, footer.php的内容引入，这样这几部分就作为一个整体展现在访问者面前了。
  • line5-line26: 其中内容就是每篇post在首页的显示内容。一般来说分成三个部分：标题，包括文章題目，作者名字，写作时间；正文内容；留言提示，比如有多少留言，文章所属分类。至于具体位置随个人爱好，如果你不懂php也没什么关系，随便找一个模版然后依样画葫芦copy & paste就可以了。
  • line28-line31: 导航栏。就是下一页/上一页这个东西。
  • line35-line37: 这个是当一篇文章都没有的时候显示的报措信息。

　　基本上index.php主要内容就是一个循环语句，不断显示每篇文章直到你后台设定的那个显示文章数为止。
　　这篇内容比较少，明天会把有关sidebar.php和footer.php的part5跟上。到part5其实整个模版就接近完成了，其他的几个文件基本上都是从这几个文件中演变出去，不会太费事。
　　海豚的这个简单教程很快会结束，然后把Kamus要求修改的Blix模版完成，四月底想做一个新的模版。新模版可能会比较中规中矩，不过将会融入Widgets和WordPress Theme Toolkit或许还有AJAX效果的留言以方便后期修改。

]]> http://www.kdolphin.com/446/feed 6 海豚的WordPress Theme教程 part3 http://www.kdolphin.com/436 http://www.kdolphin.com/436#comments Tue, 04 Apr 2006 11:04:58 +0000 kDolphin header.php]]> 　　上回我们已经获得了header.php, index.php, sidebar.php, footer.php这四个文件，接下来我们要做的就是搭积木了。
header.php
[php]





Sub-Menu

[/php]

  • line1-5：用来描述页面的基本信息，诸如使用那一种标准，字符编码，还有页面标题。
  • line7-13：一些meta标签信息和站点ico设定。
  • line15-20：对css文件和rss订阅地址的设定，方便自动发掘程序。
  • line22-24：我也不知道干吗的，反正个个模版都有-_-;。
  • line29-35：标题部分。

　　真正在页面上看到的效果其实只有line29-35这一段，一开始只有Blog标题（左）和login链接（右），后来为了方便跳转到页底的Sub-Menu部分又增加了一个链接。标题图片KD02是直接在body里设定的。相应的CSS部分如下：
[css]
html, body {
margin: 0;
padding: 0;
}

body {
background: #fff url(images/bg.jpg) no-repeat center top;
font-size: 1em;
font-family:”Trebuchet MS”, “Lucida Grande”, Arial, Helvetica, sans-serif;
word-spacing: 0.15em;
letter-spacing: 0em;
line-height:1.3em;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#header {
float:left;
overflow:hidden;
display:inline-block;
font-size:0.8em;
background:#797979;
color:#fff;
height:20px;
width:100%;
}

.bloginfo a {
float:left;
color:#fff;
text-align:left;
padding:0 0 0 5px;
}

.admin a {
float:right;
color:#fff;
text-align:right;
padding:0 5px 0 0;
}
[/css]
　　part4我会很快跟上，这篇一开始因为调试显示代码浪费了很多时间。

]]> http://www.kdolphin.com/436/feed 11 海豚的WordPress Theme教程 part2 http://www.kdolphin.com/554 http://www.kdolphin.com/554#comments Tue, 21 Mar 2006 02:07:30 +0000 kDolphin KD02这个模版的制作过程。 　　首先先决定模版的整体样式，KD02被决定为两栏模版、固定宽度、居中，所不同的是在内容和页脚中间我决定增加一个区块。由此先做一个简单的html文档，用色块把大致的样子表现出来，内容如下：]]> 　　一直在考虑part2乃至后面的内容应该怎么写才能真的如我所说的“和搭积木一样简单”，于是决定直接拿出实例来写，也就是说接下来的内容就是KD02这个模版的制作过程。
　　首先先决定模版的整体样式，KD02被决定为两栏模版、固定宽度、居中，所不同的是在内容和页脚中间我决定增加一个区块。由此先做一个简单的html文档，用色块把大致的样子表现出来，内容如下：
[html]

content


[/html]
　　content, menu, sub-menu, footer这四个div都从属于page这个div，这样只需要对page作定义就能控制整个blog内容、侧栏、页脚的位置了。header部分一开始是决定放一个100%宽度的图片，所以独立在page之外。
　　接下来创建style.css来定义页面的具体表现：
[css]html, body {
margin: 0;
padding: 0;
}

#header {
float:left;
overflow:hidden;
display:inline-block;
background:#fcc;
height:140px;
width:100%;
}

#page {
width:784px;
margin:0 auto 0 auto;
padding:0 0 0 0;
}

#content {
float:left;
overflow:hidden;
display:inline-block;
background:#9cf;
width:520px;
height:340px;
padding: 0 0 0 0;
}

#menu {
float:right;
overflow:hidden;
display:inline-block;
background:#ffc;
width:213px;
height:340px;
}

#sub-menu {
float:left;
overflow:hidden;
display:inline-block;
background:#cfc;
width:100%;
height:140px;
}

#footer {
float:left;
overflow:hidden;
display:inline-block;
background:#ccf;
width:100%;
}[/css]
　　这个html文件的实际效果如下
ss1

　　接下来就是把这个index.html文件拆成WordPress模版文件中的header.php, index.php, sidebar.php, footer.php，如下：
header.php
[php]

[/php]
index.php
[php]< ?php get_header(); ?>

content

< ?php get_sidebar(); ?>

< ?php get_footer(); ?>[/php]
sidebar.php
[php]

[/php]
footer.php
[php]


[/php]
　　很简单吧，只是在index.php开头和结尾增加两句来调用其他文件，其他只是copy & paste而已。现在，我们已经得到了四块积木了，所以今天就写到这里吧。顺便说一句，我喜欢在每一个</div>后面写注释，就是因为拆开后经常会忘记某个</div>它的另一半是哪里的。

Technorati Tags: ,

]]> http://www.kdolphin.com/554/feed 7 海豚的WordPress Theme教程 part1 http://www.kdolphin.com/552 http://www.kdolphin.com/552#comments Sun, 19 Mar 2006 01:33:44 +0000 kDolphin KD02这个模版的一些心得和总结，其中大有可能存在谬误或错漏之处，权作参考。不过话说回来，看完后自己弄个可以看看的模版还是没问题的。 　　这篇内容很简单，只是介绍一下需要的工具和WordPress模版的基本结构文件。]]> 　　这篇和接下来几篇可以看作是制作KD02这个模版的一些心得和总结，其中大有可能存在谬误或错漏之处，权作参考。不过话说回来，看完后自己弄个可以看看的模版还是没问题的。
　　这篇内容很简单，只是介绍一下需要的工具和WordPress模版的基本结构文件。
工具：

  • 一个有代码高亮功能的编辑器，Windows推荐Editplus和Crimson Editor，这两个比较小巧，而且后者是免费的。Linux我就不具体推荐了，估计大家都有自己顺手的。
  • FireFox + WebDeveloper，这个组合我提过很多次了，具体可以看一下链接里的介绍。
  • Internet Explorer，这个谁都有吧，做完了模版还是需要放到这里来看看的，我们不能回避占有量第一的事实，即使它并不标准。

文件：

  • 404.php
    404出错信息，当访问者输入了一个不存在的地址就会看到这个页面，可以在这里写一些有用的提示，或者直接给个404 error。
  • archive.php
    控制存档、分类、日期的输出页面。其实这些内容是可以单独控制的，不过大部分模版都不把它们分开对待。
  • comments-popup.php
    弹出留言窗口的输出格式。
  • comments.php
    留言部分的输出格式。
  • footer.php
    一般是用来输出页脚信息的，比如放些模版作者，版权信息之类。
  • header.php
    用来输出标题和菜单项，同时html文件的头信息也放在这里。
  • index.php
    整个首页的主体结构，正文内容输出部分就是放在这里的。
  • page.php
    “页”的模版文件，控制Page的输出内容。
  • screenshot.png
    从WP2.0开始，模版选择会提供缩略图，这个文件就是缩略图文件。
  • search.php
    搜索的结果输出页面。
  • searchform.php
    搜索框的格式定义。
  • sidebar.php
    用于输出侧栏内容。
  • single.php
    当点击一篇文章后，所展示的页面内容由这个文件来控制。
  • style.css
    所有所有页面的具体表现样式都由这个文件来控制。

　　一旦做起来就会明白，WordPress把一个页面的内容分成了Header + Content + Sidebar + Search Form + Footer这样的结构，对于模版制作者和用户来说这都是一个方便的处理方式。所以，各位和我一样的初学者都不用担心，我们后面所作的和搭积木一样简单。

Technorati Tags: ,

]]> http://www.kdolphin.com/552/feed 24