零食网站页面模板二环建设部网站
工具/原料
-
<P><BR>使用div+css语言编写的html静态页面一个</P>
-
<P>Macromedia Dreamweaver软件<BR></P>
WordPress主题结构分析
-
1
1、index.php首页模板（最基本）
---- 1、header.php头部
---- 2、sidebar.php侧边栏
---- 3、footer.php底部
2、style.css样式表（最基本）
3、single.php文章内页模板
4、page.php页面模板
5、archive.php分类页面模板
6、search.php搜索模板
7、404.php错误提示模板
8、模板结构图
END
wordpress模版制作教程
-
模版添加style.css版权信息
/*
Theme Name:彭健的博客
Theme URI: http://www.pengjian1991.com/
Description:wordpress主题制作教程演示
Author:彭健
Author URI: http://www.pengjian1991.com/
Version: 1.0
Tags: white, blog, 彭健, blue
*/
-
wordpress主题后台缩略图制作
缩略图的名字必须是：screenshot.png或者screenshot.jpg
-
把静态页面改成WP首页
修改index.html为index.php
index.php中的css文件调用改成WP标签调用
Style.css路径调用：<?php bloginfo( 'stylesheet_url' ); ?>
-
wordpress主题Index.php制作
1、分离header.php顶部模板
通过WP标签调用回来，调用顶部标签：<?php get_header();?>
2、分离sidebar.php侧边栏
通过WP标签调用回来，调用侧边栏标签：<?php get_sidebar();?>
3、分离footre.php底部模板
通过WP标签调用回来，调用底部标签：<?php get_footer();?>
-
wordpress主题制作header.php模板
1、index.php顶部元信息调用
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php if (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print " - "; bloginfo('name'); } ?> </title>
<?php wp_head(); ?>
2、调用分类目录和页面
（1）页面调用：
<?php wp_list_pages('sort_column=menu_order&title_li= &include='); ?>
sort_column：根据后台页面顺序列出页面
title_li：显示或者隐藏页面列表的标题
include：控制显示的页面
（2）分类目录调用:
<?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=2'); ?>
erby：按什么排列
show_count：分类日志数量
depth：列表深度
include：控制显示的页面
3、自定义添加导航链接
<a href=” <?php echo get_option('home'); ?>”>首页</a>
4、菜单导航
<?php wp_nav_menu('container_id=navmenu'); ?>
4、其他地方的调用
获取博客名字：<?php bloginfo('name'); ?>
获取主页路径：<?php echo get_option('home'); ?>
获取主题存放路径：<?php bloginfo('template_directory'); ?>
-
wordpress主题侧边栏sidebar.php的制作
1、分类目录调用
WP标签：<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
hierarchial=0 – 不按照层式结构显示子分类
optioncount=1 – 显示每个分类含有的日志数
sort_column=name – 把分类按字符顺序排列
2、最新文章调用
WP标签：<?php wp_get_archives('type=postbypost&limit=5'); ?>
type=postbypost：按最新文章排列
limit：限制文章数量最新10篇
3、日期存档调用
WP标签：<?php wp_get_archives( 'type=monthly' ); ?>
type=monthly按月份读取
4、友情链接调用
<?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=24'); ?>
5、元数据调用
注册：<?php wp_register(); ?>登录：<?php wp_loginout(); ?>
6、如何制作小工具
添加functions.php，
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div class="sidebox"> ',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>
在sidebar.php中模块最上面插入：
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
Sidebar.php最下面，添加<?php endif; ?>
-
wordpress主题底部footer.php制作
1、版权信息
Copyright © 2012<a href=” <?php echo get_option('home'); ?>”> <?php bloginfo(’name’); ?></a>
2、hook函数
hook函数：<?php wp_footer(); ?>
-
wordpress主题首页index.php制作
1、循环介绍
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif;?>
· if(have_posts()) – 检查博客是否有日志。
· while(have_posts()) – 如果有日志，那么当博客有日志的时候，执行下面 the_post() 这个函数。
· the_post() – 调用具体的日志来显示。
· endwhile; – 遵照规则 #1，这里用于关闭 while()
· endif; – 关闭 if()
2、调用标题
<a href="<?php the_permalink() ?>"><?php the_title_attribute(); ?></a>
标题太长了怎么办？
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, '...'); ?></a>
3、调用内容
3-1、全文调用
<?php the_content(); ?>
3-2、摘要调用
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?>
4、日志元数据
4-1、发布日期
<?php the_time('F d, Y') ?>
<?php the_time('m-d') ?>
<?php the_date_xml()?>
4-2、所属分类
<?php the_category(', ') ?>
4-3、文章标签
<?php the_tags('标签： ', ', ', ''); ?>
4-4、留言数
<?php comments_number('暂无评论', '1条评论', '% 评论' );?>
4-5、更多按钮
<a href="<?php the_permalink() ?>">更多内容</a>
5、分页插件使用
Pagebar插件
wp-page-numbers插件
使用：在<?php endwhile; ?>和<?php endif;?>中间插入：
<?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?>
-
wordpress主题子模板制作
1、single.php文章内容页面模板
9-1、添加评论模块
在<?php endwhile; ?>和<?php endif;?>中间插入<?php comments_template(); ?>
修改摘要调用为全文内容调用
删除更多内容调用标签
9-2、前一篇、后一篇调用
<div style="float:left"><?php previous_post_link('« %link'); ?></div>
<div style="float:right"><?php next_post_link('%link »'); ?></div>
2、分类列表页面archive.php
archive.php和index.php模板一样
3、page.php页面模板
Page.php和single.php模板一样
-
wordpress主题404.php页面制作
1、跟index.php模板一样
2、网上下载404模板页面