转载: wordpress 主题制作基本步骤、目录结构及大致过程

转载自:http://www.freehao123.com/wordpress-theme-make/

 

WordPress是一个非常成功的博客发布平台,不过很少有一些网站会发布一些优秀的Wordpress主题来供我们免费下载.虽然有不少的Wordpress博客主题还在不断出现.
不过我们还是决定写一个关于"新手需要知道Wordpress主题制作的基本步骤和大致过程"的免费Wordpress教程,相信可以帮助更多人按照自己的愿望来设计自己的博客主题.
我们并不是很高级的Wordpress开发者人员,但是我们相信下面的教程一定可以帮助你成功地开发出一个Wordpress主题的。
下面你将可以学会将你的xHTML CSS 网站转化成为一个的Wordpress主题.(最后输出其实和正常的Wordpress主题是一样的,只不过代码会更短并更容易去读)。
新手需要知道WordPress主题制作的基本步骤和大致过程
一、开始步骤
1、第一步就是要想好你的博客主题的大概设计样式……请记住这个导航栏几乎会在你的网站任何一个地方,所以你需要用一个表格将它们放在一起。
2、从而保证你的有足够的侧边栏空间来设计你的widgets。
3、一般来讲,将你的设计转化成为一个标准的xHTML & CSS 网站,你需要首先创建一个images文件夹。(我也不能解释为什么……)
4、Wordpress是运行在PhP基础上的,所以接下来的工作你需要开始在一个服务器(Apache…)上工作,你的系统就变成了localhost。
5、下载Wordpress程序(官方网站:http://cn.wordpress.org/),将文件解压到你的本地电脑上。
6、创建一个数据库,不知道的朋友可以参考官方的说明文档。http://codex.wordpress.org/Main_Page 。
7、这个是英文的,不过网上已经有很多类似的教程,大家可以通过Google或者百度搜索到。
8、在localhost-dir\wordpress\wp-content\themes\路径创建一个新的文件夹,将该文件夹的名称命名为你的Wordpress主题的名称(不能有空格)。
9、将你的所有的xHTML, CSS和其他与主题有关的文件拖到该文件夹中。
二、主题制作
1、你需要在你的Wordpress主题文件夹中创建的文件有:

header.php
index.php
sidebar.php
footer.php
comments.php
style.css – 你的CSS文件

2、你将会将你的xHTML代码拆分到以上提到的文件中。
3、打开你的xHTML主题文件,按照下面的方法开始制作Wordpress主题吧。
三、header.php文件制作
1、这个头部文件内容是从DOCTYPE定义开始的,并且一直到你的博客真正的内容(像文章……)为止。
2、头部文件将会有Head的开始和结束、body开始部分或者者你的主题导航栏部分。
2、在header (Javascript/CSS) 包括的文件不能有绝对的URL。
3、<?php bloginfo(‘stylesheet_directory’); ?> 被用来返回你的主题的Url,比如:http://localhost/wordpress/wp-content/themes/yourtheme
4、或者是http://localhost/wordpress/wp-content/themes/yourtheme/javascript/slider.js

<title><?php bloginfo(‘name’); ?> <!– 返回wordpress blog 的标题–><?php if ( is_single() ) { ?> <!– 判断是否是single page (如果你的打开的是一个内容页面的话下面的内容就会被显示–>- Blog Archive<?php } ?> <!– 结束判断 –><?php wp_title(); ?> <!– 文章标题- 将会被显示在内部页面中 –></title>
5、标题Tag,标准的Wordpress博客的Head文件应该要包括的:

<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” /><link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” /><link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” /><link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

6、如果你想要你的Logo链接到你的主页(如果你的Logo是一个锚标签的话),方法如下:

<?php bloginfo(‘url’); ?>

7、现在轮到你的Navigation部分了,你不需要动态的链接方式,也不需要静态的xHTML链接,xHTML标准的导航是UL > LI > A。下面的代码就可以形成导航。

<ul><li class=” <?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists(‘is_tag’) and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>”><a href=”<?php echo get_settings(‘home’); ?>”><?php _e(‘Home’); ?></a></li> <!– 只会返回主页链接和assigns class=”current_page_item” to the highlighted page –><?php wp_list_pages(‘sort_column=id&depth=1&title_li=’); ?> <!– 返回所有的菜单链接,除了主页–></ul>< /ul>

8、很好,现在你已经完成了header.php的工作了。
四、sidebar.php文件制作
1、并不是widgets方式,你需要手动将添加Php代码去形成sidebar一些功能
2、正如我在开始步骤中提到的一样,你应该已经创建了一个Div,Div会在Sidebar中要么向左浮动,要么向右浮动。
3、选择整个sidebar DIV,然后将xHTML文件放到这里面,例如<div id=”sidebar”> ….. </div>
4、几乎所有的Sidebar的东西都会以垂直的方式显示出来.当你在设计你的博客主题或者开发xHTML,你将会有一些Division层在不同的 Sidebar插件或者片段中。
5、下面我们就来讲讲用一些PHP代码片段来产生你的侧边栏内容(将这些代码片段放到每一个Div之间,例如<div class=”sidebar_snippet”> … 你的 PHP 代码片段 …</div>)
6、分类(Categories)

<ul><?php wp_list_cats(‘sort_column=name&optioncount=0&hierarchical=0’); ?></ul>

optioncount=1是用来控制每个分类下面将会显示的文章
hierarchical=1是用来控制显示子分类.
7、存档(Archives )

<?php wp_get_archives(‘type=monthly’); ?>

8、最新文章(Recent Posts )

<?php $today = current_time(‘mysql’, 1);if ( $recentposts = $wpdb->get_results(“SELECT ID, post_title FROM $wpdb->posts WHERE post_status = ‘publish’ AND post_date_gmt < ‘$today’ ORDER BY post_date DESC LIMIT 5″)):?> <ul><?php foreach ($recentposts as $post) { if ($post->post_title == ”) $post->post_title = sprintf(__ (‘Post #%s’), $post->ID);echo “<li><a href='”.get_permalink($post->ID).”‘>”; the_title(); echo ‘</a></li>’; }?></ul><?php endif; ?>

9、代码中的LIMIT 5表示会显示最新的五篇文章,你可以改成其他的数字.
10、搜索(Search )

<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>

<input alt=”search” type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” />

</form>

11、更多的内容你可以参考Wordpress官方文档:http://codex.wordpress.org/Main_Page
12、非常不错,到现在为止你已经成功创建了sidebar.php
五、Footer.php文件制作
1、这个文件将只会包括底部文件,例如每个页面出会出现的版权声明信息……
2、例如:<div id=”footer”> … 版权所有 … </div>
3、很好,你已经知道如何创建footer文件了。
六、index.php文件制作
1、这是你的博客主题的主要文件,当你的主题被激活时这个文件就会被装载。index.php 包括了Body主要内容(articles… comments…. pager….titles….)
2、还有一些其他的你创建的文件等。 跟着下面的步骤一步一步地来做,否则的话你有可能把不同的层的顺序搞糟。
3、包含Header,你的主题主体部分-LOOP循环(也许会放在一个Div里面用来将文章和其他内容相分离)

<?php get_header(); ?> <!– includes the header.php file –>
4、这个PHP LOOP 循环对于Wordpress的文章内容来说是非常重要的。你的主体内容将会被放在这个Loop中,以便这些内容能够在不同的文章页面或者内容页面中重复出现。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!– the LOOP开始 –> <div class=”post” id=”post-<?php the_ID(); ?>”> <!– 获得每篇文章的post ID (动态),以便你能够控制每一篇日志 –> <div class=”date”><?php the_time(‘M’, ”, ”); ?> <?php the_time(‘d’, ”, ”); ?></div> <!– 时间 –><h1 class=”posttitle”><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1> <!– 文章链接-以便你单击进入该日志页面 –><?php comments_popup_link(__(‘( 0 ) Comments’), __(‘( 1 ) Comment’), __(‘( % ) Comments’)); ?><!– 每一个文章的评论数量 –> <div class=”storycontent”><?php the_content(__(‘more…’)); ?></div> <!– 文章内容 –></div><?php comments_template(); ?> <!– 包括comments.php 文件(只会在文章内容页面中显示)–><?php endwhile; else: ?> <!– 结束LOOP循环 –> <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p> <!–如果Loop失败了,这个文字将会被显示。 –> <?php endif; ?> <!– 结束LOOP 失败循环 –>

5、页面导航Pagenation

<?php posts_nav_link(‘ ‘, __(‘ Previous Page’), __(‘Next Page ‘)); ?> <!– 前一页或者后一页 –>
6、其他

<?php edit_post_link(__(‘Edit This’)); ?> <!– 直接打开某个文章的后台编辑页面 –>
<a href=”<?php trackback_url(true); ?>” rel=”trackback”>Trackback</a></span> <!– 获得一篇文章的 trackback URL –>
<?php the_category(‘,’) ?> <!– 当前文章的分类—>

七、comments.php文件修改
1、这个comments.php文件包括了评论列表和每篇文章的评论内容。由于comments.php解释起来比较长,所以我们给出了一个标准的 comments.php文件。
2、这个comments.php文件是我们在制作Wordpress主题时候经常要用到的。请将这个评论文件下载并放到你的主题文件夹中。
3、其他 技巧:为了可以更好地控制你的Wordpress主题,你应该将PHP代码放在Div当中,并且用你CSS来控制样式。
4、这个方法同样也适用于the comments.php 。IDs/Classes 已经存在于任何地方,你只需要获取这些IDs/Classes 然后在CSS当中来控制它。
八、Wordpress主题制作成功
1、你已经成功地将你的设计转化为一个Wordpress主题。现在将你的主题文件上传到你的网站的wp-admin当中并激活它。
2、一般地整个开发过程需要用时30-40分钟。你怎么样呢?我们希望这个有点儿长的免费教程会对你有所帮助。
文章出自:dezinerfolio 版权所有。本站文章皆为作者原创文章,可自由引用,但请注明来源。 禁止全文转载

Css设置img属性让图片水平居中/居左/居右的写法

Css设置img属性让图片水平居中/居左/居右的写法

 

图片的居中显示css有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,在研究wordprss程序的时候,无意发现这个系统的官方处理图片居中,居左,居右的css写法,分享一下!

比如一个图片的,居左,设置图片的img属性左浮动;居右,设置右浮动;水平居中,设置margin:auto。后来一想,这个办法很不错,应该是一个在很多情况下都有效的方法!

一般设置图片属性text-align:centre水平居中,但这个方法经常无效,以后还是采用以下写法吧!

代码如下:

/* Alignment */
.alignleft {
display: inline;
float: left;
}
.alignright {
display: inline;
float: right;
}
.aligncenter {
clear: both;
display: block;
margin:auto;
}

 

转载自: http://www.jb51.net/css/134690.html