wp企业模板制作教程.doc

企业主题模板制作教程课程目标：制作出一个企业的主题课后作业，跟着视频，完成一个相同主题的制作。第一课、企业网站模板分析1、首页产品图片和滚动图片2、产品页面3、文章列表页面4、single和page页面第二课、静态页面转化成WP模板和头部制作1、 静态转模板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.php1-2-1、修改css文件路径Style.css路径调用：1-2-2、修改所有相对路径为WP绝对路径获取主题存放路径：1-2-3、删除多余的CSS代码1-2-4、修改style.css里面图片路径2、顶部模板制作分离头部，改用WP调用，调用顶部标签：2-1、元信息调用meta http-equiv=Content-Type content=text/html; charset= / 2-2、二级目录导航制作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););分类目录调用标签：页面调用：自定义首页：a href=” ”首页顶部空白如何处理functions.php里面添加下面代码。add_filter( show_admin_bar, _return_false );2-3、幻灯片替换参考div+css入门实战2012版最后一课，幻灯片专题。第三课、侧边栏和底部制作1、分离侧边栏通过WP标签调用回来，调用侧边栏标签：2、调用某个分类下的文章 a href= 更多按钮链接：/3、产品树形结构调用 Css样式：.sidebar float:left; width:250px; overflow:hidden;.sidebar h3 float:left; padding:8px 5px 6px 10px; width:230px; font-size:14px; color:#0B3779; .sidebar ul float:left; width:250px;.sidebar ul li float:left; margin-bottom:20px;.sidebar ul li.widget_text padding:0px 0px; .sidebar ul li.widget div padding:15px 10px 0px; line-height:20px; clear:both;.sidebar ul li ul float:left; margin-top:15px;.sidebar ul li ul li width:230px; margin:6px 4px 5px; padding-left:10px; background:url(images/news_arrow.gif) no-repeat 0px 6px; overflow:hidden;.sidebar ul li ul li ul border:none;.sidebar ul li ul.sub li padding-left:0px; background:none;.sidebar ul li ul.sub li a:link, .sidebar ul li ul.sub li a:visited padding:2px 5px 10px 22px; width:210px; color:#333; font-weight:bold; text-decoration:none; border-bottom:1px solid #E6E6E6; display:block;.sidebar ul li ul.sub li a:hover color:#0B3779; border-bottom:1px solid #CCC;.sidebar ul li ul.sub .current_page_item border-bottom:1px solid #CCC;.sidebar ul li ul.sub .current_page_item a:link, .sidebar ul li ul.sub .current_page_item a:visited, .sidebar ul li ul.sub .current_page_item a:hover color:#0B3779; font-weight:bold; background:none;4、友情链接只在首页显示 5、底部制作通过WP标签调用回来，调用底部标签：获取主页路径：版权信息：Copyright 2012a href=” ” 第四课、企业首页制作1、产品图片调用循环调用：标题调用：a href= 操作步骤：1-1、在主题文件夹中建thumbnail.php文件，添加如下代码： ID, thumbnail, true) ) : ? ID, thumbnail, true); ? a href= rel=bookmark title=img src= alt=/ a href= rel=bookmark title= img class=home-thumb src= width=140px height=100px alt=/ 1-2、 在主题文件夹里面的functions.php文件中添加下面代码：?php /支持外链缩略图 if ( function_exists(add_theme_support) ) add_theme_support(post-thumbnails); function catch_first_image() global $post, $posts; $first_img = ; ob_start(); ob_end_clean(); $output = preg_match_all(/i, $post-post_content, $matches); $first_img = $matches 1 0; if(empty($first_img) /Defines a default image $random = mt_rand(1, 2); echo get_bloginfo ( stylesheet_directory ); echo /images/random/.$random.jpg; return $first_img; ?1-3、在images文件夹下建立random文件夹，放入图片，图片必须已1.jgp，2.jpg这种格式。以数字110作为名字。1-4、 通过下面代码调用。 2、某个分类产品图片动态滚动第一步、删除原有图片调用所有代码第二步、放上我们自己的图片div代码： !- var speed=10; /数字越大速度越慢 var tab=document.getElementById(demo); var tab1=document.getElementById(demo1); var tab2=document.getElementById(demo2); tab2.innerHTML=tab1.innerHTML; function Marquee() if(tab2.offsetWidth-tab.scrollLeft 第三步、复制css样式#demo background: #FFF; overflow:hidden; width: 500px; #demo img border: 3px solid #F2F2F2; #indemo float: left; width: 800%; #demo1 float: left; #demo2 float: left; 第四步、调用某个分类下面的图片第五课、产品展示页面制作1、制作category-id.php页面2、调用header、sidebar、footer文件调用头部标签：调用底部标签：调用侧边栏标签：3、图片方式调用循环调用：标题调用：a href= 图片调用： 页面名字调用：4、分页插件使用wp-page-numbers插件使用： 第六课、文章列表页面制作1、制作archive.php页面2、调用header、sidebar、footer文件调用头部标签：调用底部标签：调用侧边栏标签：3、循环调用文章标题调用：a href= 日期调用：页面名字调用：4、分页插件使用wp-page-numbers插件使用： 第七课、内容页面制作1、制作single.php2、调用header、sidebar、footer文件调用头部标签：调用底部标签：调用侧边栏标签：3、循环调用文章标题调用：a href= 内容：4、元信息调用日期调用：分类目录： 文章标签： 大小调整：调整大小：16px  14px  12pxs上一篇调用：下一篇调用：5、最新文章 a href= 6、相关文章调用相关文章：通过分类来判断相关文章ID);if ($cats) $args = array( category_in = array( $cats0 ), post_not_in = array( $post-ID ), showposts = 6, caller_get_posts = 1 );query_posts($args);if (have_posts() : while (have_posts() : the_post(); update_post_caches($posts); ?* a href= rel=bookmark title=