玩转CMS之用wordpress山寨一个企业网站（1）

2020-04-21 本文已影响0人 dh黄

前面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标签，网站名称，网站描述信息，导航信息