零基础建站培训教程介绍

WordPress网站首页的仿制步骤

WordPress网站首页的仿制步骤

2-1、头部制作

1、制作style.css

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

如果后台乱码,要修改,css 的页面属性,如果网页出现乱码,要修改index.php的页面属性。修改——页面属性——编码。

后台缩略图
在主题文件来下面放一个缩略图图片,缩略图的名字必须是:screenshot.png或者screenshot.jpg

1-2、制作index.php

1-2-1、修改css文件路径

1-2-2、修改index.php中的图片的所有相对路径为WP绝对路径. 获取主题存放路径:

如果还出现有些图片不显示的话,要修改style.css中的路径,因为这是的style.css是从images文件夹中拿出来的,路径已经改变了。
2-1、元信息调用

网站标题:

HOOK函数:
<?php wp_head(); ?>

2-2、导航制作

菜单选项的生成:
在函数文件functions.php文件中添加以下代码;

顶部菜单的调用:
调用二级导航
2、在要显示换灯片的位置放入以下的代码

3、在CSS中放以下的CSS样式:【通过修改width和height的值可以修改换灯片的尺寸】

4、下载JS文件: jquery.js (243.32 KB, 下载次数: 756)
将下载的JS文件放到主题的images文件夹里,在header.php文件的</head>上面放上以下的js代码:

5、在网站后台设置置顶文章,即会被调用出来。

2-2、侧边栏和底部制作

1、分离侧边栏
通过WP标签调用回来,调用侧边栏标签:

2、调用特定分类下的文章:直接复制到要显示分类的地方。cat=1为id=1下面的文章,showposts=5为显示5片文章。

更多按钮链接,直接进入该分类页面地址调用:
2-3、首页主体制作

1、产品图片调用

第一步:删其余相同的div,留下一个div,在标题和图片的上下,调用循环代码:(通过修改('cat=3' 来控制显示哪个分类下的文章)

第二步:缩略图调用操作步骤:

1-1、将以下代码放入functions.php,用于显示缩略图

1-2、在images文件夹下,设置一个默认的缩略图:default.jpg

1-3、缩略图的调用

2、某个分类产品图片动态滚动(如果出现错位,可删除文件标题代码)

第一步、删除原有图片调用所有代码包括div框。

第二步、如果是固定的图片展示就放上下面自己的图片div代码:

第三步:将以下js 代码放到首页底部 </body>上面。

发表评论

电子邮件地址不会被公开。 必填项已用*标注