前面5节我展示了一个博客网站的仿制过程,基本了解了wordpress主题制作的大致流程,现在我们开始仿制一个企业网站,企业网站和博客网站还是有很大的不同的,首先一个企业网站的网站页面结构更加复杂,其次是图片更加丰富,虽说如此,但是我们在使用wordpress制作企业网站的流程却是和制作博客网站基本一样,好了我们开始吧!
第一步:准备我们的html页面 ,这个还是用offline explore 这个整站下载工具下载一个企业网站的html展示页源码,我们打开之后看看,由于这个网站太长了截不了下面的,建议大家根据我给的链接下载下来,跟着我一起做,大概只需要半个小时就可以构建一个不错的企业网站
需要示例html的从这里下载链接: https://pan.baidu.com/s/1UFsX_GpxpflGjN_x_LF_XQ
提取码:g8zz
第二步:创建我们的项目
在主题文件夹下新建一个文件夹就叫mycomany, 将下载下来html静态页面copy过去
更改index.html为index.php,新建style.css样式文件
打开Style.css,将以下注释加入到头部,保存
/*
ThemeName: COMPANY_TEST
ThemeURI: http://www.baidu.com
Description:张某人的专属企业站
Author:张某人
AuthorURI: http://www.baidu.com
Version:1.0
Tags:wordpress,network
*/
第三步:目标站点模块的划分和拆分
由于本站没有侧边栏可以可以拆分成头部和底部,所以我们还需要建两个文件,header.php和footer.php,创建完成后目录结构如下
打开index.php将代表头部的代码剪切到header.php,将代表底部的代码剪切到footer.php中去,然后在index.php中用<?php get_header();?>和<?php get_footer();?>将头部和底部引用回来,这样我们就完成了拆分工作
第四步:修改图片和css与js路径,跟制作博客一样还是需要下面两个路径调用
style.css路径调用:<?php bloginfo( 'stylesheet_url' ); ?>
主题文件路径调用:<?php bloginfo('stylesheet_directory'); ?>
我们首先对header.php中js和css的路径进行一个修改
然后 以同样的方式修改index.php,footer.php,css里面有路径的地方
第五步,更改header.php,footer.php
<?phpif (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print" - "; bloginfo('name'); } ?> title调用:<title><?php if (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print " - "; bloginfo('name'); } ?> </title>
网站name调用:<?php bloginfo('name'); ?>
网站描述调用:<?php bloginfo('description'); ?>
分类目录调用:<?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=2'); ?>
单页调用:<?php wp_list_pages('sort_column=menu_order&title_li=&depth=2&include='); ?>
用以上代码替换title标签,网站名称,网站描述信息,导航信息
现在就一个首页,我们需要在后台添加导航信息就可以了
这里只添加两个,后面的公司简介,关于我们,联系我们属于单页,需要以页面的形式添加
我们打开我们的后台来添加这三个单页面
打开我们的header.php,把我们的单页调用代码复制过去
打开看看我们页面的效果
这样我们的一个头部就做好了
现在来修改footer.php部分,footer.php主要是一个友情链接
我们将友情链接的代码复制过去就可以了,文字信息可以自己手动更改下就可了
这样我们的header.php和footer.php就修改好了,下一期我们再去修改index.php
网友评论