wp企业模板制作教程.docVIP

企业主题模板制作教程 课程目标：制作出一个企业的主题 课后作业，跟着视频，完成一个相同主题的制作。 第一课、企业网站模板分析 1、首页产品图片和滚动图片 2、产品页面 3、文章列表页面 4、single和page页面 第二课、静态页面转化成WP模板和头部制作 静态转模板 1-1、制作style.css 移动images文件夹下面的css到主题文件夹下面，重命名为style.css 添加主题版权信息： /* Theme Name: 莎莎公主 Theme URI: Description:这是我们做的第一个企业主题哦 Author: 莎莎公主 Author URI: Version: 1.0 Tags: white, company, blue */ 1-2、制作index.php 1-2-1、修改css文件路径 Style.css路径调用：?php bloginfo( stylesheet_url ); ? 1-2-2、修改所有相对路径为WP绝对路径 获取主题存放路径：?php bloginfo(template_directory); ? 1-2-3、删除多余的CSS代码 1-2-4、修改style.css里面图片路径 2、顶部模板制作 分离头部，改用WP调用，调用顶部标签：?php get_header();? 2-1、元信息调用 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-2、二级目录导航制作 script type=text/javascript var topMenuNum = 0; $(#nav_sgBhgn li).hover( function(){ topMenuNum++; $(this).attr(id,kindMenuHover+topMenuNum); $(#kindMenuHover + topMenuNum + ul).show(); $(this).parent().addClass(hover); }, function(){ $(#+$(this).attr(id)+ ul).hide(); $(this).attr(id,); $(this).parent().removeClass(hover); } ); /script 分类目录调用标签： ?php wp_list_categories(title_li=0orderby=nameshow_count=0depth=1); ? 页面调用： ?php wp_list_pages(sort_column=menu_ordertitle_li=depth=2include=); ? 自定义首页：a href=” ?php echo get_option(home); ?”首页/a 顶部空白如何处理 functions.php里面添加下面代码。 add_filter( show_admin_bar, __return_false ); 2-3、幻灯片替换 参考《div+css入门实战2012版》最后一课，幻灯片专题。 第三课、侧边栏和底部制作 1、分离侧边栏 通过WP标签调用回来，调用侧边栏标签：?php get_sidebar();? 2、调用某个分类下的文章 ?php $rand_posts = get_posts(numberposts=5category=1orderby=date);foreach($rand_posts as $post) : ? lia href=?php the_permalink(); ??php the_title(); ?/a/li ?php endforeach;? 更多按钮链接：?php echo get_option(home); ?/ 3、产品树形结构调用 div class=sidebar ul li ul ?php wp_list_categories(title_li=0orderby=nameshow_count=0depth=3); ?