教程:WordPress企业主题制作教程

wordpress企业主题制作教程,word文档下载

文章摘要:

企业主题模板制作教程

课程目标:制作出一个企业的主题

第1课 wordpress企业网站主题分析

1、首页 产品图片 和 滚动图片
2、产品页面
3、文章列表页面
4、单个文章(产品)页面和page页面

第2课 静态页面转化成WP模板和头部制作

静态转模板

1.1、制作style.css

移动images文件夹下面的css到主题文件夹下面,重命名为style.css

添加主题版权信息:
/*
Theme Name: FTwp
Theme URI: http://fengten.com/
Description: 风腾网wp主题制作: <a href=”http://fengten.com/”>FengTen.com</a>.
Version: 1.0
Author: 风腾
Author URI: http://fengten.com/
*/

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=0&orderby=name&show_count=0&depth=1′); ?>

页面调用:
<?php wp_list_pages(‘sort_column=menu_order&title_li=&depth=2&include=’); ?>

自定义首页:<a href=” <?php echo get_option(‘home’); ?>”>首页</a>

… …

文档下载:

 


  • 将此文分享到:


    转载请注明来自风腾网-wordpress企业主题,本文地址:http://fengten.com/3071.html
    除非注明,风腾网-wordpress企业主题文章均为原创,转载请注明出处和链接!
    友荐云推荐

    相关文章

    *

    *

    顶部 友荐云推荐