手机网站怎么仿站,WAP手机站仿站方法
本节课程将带领大家学习一下如何去进行手机网站仿站,请大家掌握WAP手机站仿站方法。想学习手机网站仿站课程的同学,可以报名学做网站论坛建站课程,将系统学习建站和仿站操作。
操作步骤
1、目标网站:https://www.xuewangzhan.net/vip/xiehui/
问题:仿站要仿哪些页面?
回答:仿站时,并不是要仿目标网站的所有页面的,要分析哪些页面的布局结构不一样,各自下载一个就行了。
2、页面的命名
为了方便后面的模板开发,我们在下载页面时,就规范一下页面的名称。
首页----index.html
产品列表页-----category-pro.html
新闻列表页-----category-wz.html
单页介绍页-----page.html (如:公司简介、联系我们)
文章内容页-----single.html (或者single-pro.html 和 single-wz.html)
3、仿站的工具
3-1、本地环境软件:https://www.xuewangzhan.net/wordpress/708.html
3-2、页面下载小工具:https://www.xuewangzhan.net/tools/25203.html
3-3、WP仿站助手:https://www.xuewangzhan.net/jztools/
4、仿站的流程步骤
A、下载各类型页面。使用仿站小工具:https://www.xuewangzhan.net/tools/25203.html
B、为了方便仿站调试,需要安装一下本地环境软件,并且在本地环境下安装wordpress程序。程序下载地址:点此直接下载
C、将页面的各类页面制作成wordpress模板。WP仿站助手:https://www.xuewangzhan.net/jztools/
1、了解wordpress模板的构造。
首页模板:index.php
样式文件:style.css 头部模板:header.php
底部模板:footer.php
边栏模板:sidebar.php
分类目录(列表页)模板 :category.php 产品列表:category-pro.php 新闻列表:category-wz.php
单页面模板:page.php
文章页模板:single.php
2、新建index.php和style.css,并添加版权信息,在index.php的</head>标签上面引入style.css,再把整个模板文件夹放入themes文件夹下,后台启用自己的主题。
小巧型代码编辑软件:Notepad++ 下载地址:https://notepad-plus.en.softonic.com/download (如果打网站打不开,也可以在这里下载:https://dl.pconline.com.cn/html_ ... amp;linkPage=1.html)
3、后台缩略图:在主题文件夹下面放一个缩略图图片,缩略图的名字必须是:screenshot.png或者screenshot.jpg
4、修改index.php中的图片的所有相对路径为WP绝对路径. 否则网页会变形,图片不显示。
5、替换TDK信息;
6、网站导航菜单制作,创建模板函数functions.php。
7、轮播图的制作
8、替换各个版块的固定文字、链接、图片
9、修改下拉导航 和颜色
10、分类头部、底部模板。
===========================================
课程PPT 内容
不同的手机站,它的仿制方法是不一样的
从现阶段来看,手机站主要分为二种:
一种就是自适应手机站 pC站之后,它就自带有手机站
另一种是通过代码切换从PC站转为手机站
通过URL ----PC站与手机站 首页地址是一样
PC站与手机站 首页地址不一样的
https://www.xuewangzhan.net/vip/xiehui/
https://www.xuewangzhan.net/vip/xiehui/m/
需要下载的页面:
1、首页 https://www.xuewangzhan.net/vip/xiehui/m/index.html
2、page 页面 https://www.xuewangzhan.net/vip/xiehui/m/list-1.html
3、archive列表页 :https://www.xuewangzhan.net/vip/xiehui/m/list-5.html
4、page 表单页面:https://www.xuewangzhan.net/vip/xiehui/m/list-22.html
5、single内容页:https://www.xuewangzhan.net/vip/xiehui/m/view-67.html
1、本地网站的URL 地址:127.0.0.1/wordpress
2、本地环境数据库地址:http://127.0.0.1/phpmyadmin/
本地数据库信息:shoujifz root
3、存放模板的文件夹:\www\wordpress\wp-content\themes
4、CTRL F
5、模板函数 functions.php
控制图片大小
.contxt img{display:block;max-width:100%;height:auto;margin:10px auto;}