当前位置:网站首页>WordpressCMS主题开发01-首页制作
WordpressCMS主题开发01-首页制作
2022-08-11 08:52:00 【51CTO】
这是wordpress cms主题制作的第一课。
首先,我们来看做一个cms主题必须准备好的一个页面,我们准备好了3个静态页面:
xuhss_cms
可以先打开index.html,这就是我们要开发的wordpress主题的cms样式。
也就是说,我们会把它转换为wordpress主题。
我们再来看看它的内页和列表页面-article.htm和list.htm
为了方便对照和问题的查找,备份一下模板页面是最安全的,备份的文件命名为: wp_xuhss_cms
cms备份 - WordpressCMS主题开发01-首页制作
那接下来,我们把这个备份的模板放置到我本地搭建好的wordpress主题文件夹中:
wp主题 - WordpressCMS主题开发01-首页制作
如何把静态页面制作成主题
我们进入wordpress主题后,最基本的2个文件,一个是style.css,另一个是index.php。
首先我们来制作:index.php
复制index.html,重命名它为index.php,打开它,我们发现这里调用了3个css:
有多个CSS文件的时候,用哪个文件作为style.css?
判断的方法非常简单,在首页里往下找,找到第一个div所对应的class:
所以,我们在三个css文件中,分别查找 .top
最终,你会发现,它位于 layout.css 中。
通过.top可以快速的找到整个网站布局的css,一般我们把整个网站用来布局的div,它所对应的css文件作为style.css。
其他的css可以作为次要的css。确定好之后,我们就直接在主题文件夹下,把layout.css改为style.css。
接着我们需要给style.css添加版权信息,把以下代码放置style.css的最顶部就可以。
接下来,我们需要在index.php中,增加对style.css的调用。
现在,我们登陆wordpress后台,找到主题文件夹刷新:
wordpress主题 - WordpressCMS主题开发01-首页制作
用utf-8 无bom模式保存
我们可以找到刚添加的wordpress主题。
但是我们发现了一个问题,这里乱码了。这是因为css文件的编码格式并不是utf-8。
所以需要对它进行转换:
You must be logged in to view the hidden contents.
回到wordpress后台,再刷新一下,就正常了。
点击“启用”,来启用主题。
启用好之后,来到网站的前台:
你会发现,同样出现了乱码,所以还需要把 index.php 的编码改为utf-8
修改完成后,就像这样:
wordpress主题初始样式 - WordpressCMS主题开发01-首页制作
和我们静态页面的差距还是比较大,这是为什么呢?
因为index.php 调用了3个css,但是我们只提供了一个style.css的调用。
另外2个css并没有找到,所以我们需要把路径补充完整。
调用wp主题的路径也有一个模板标签:<?php bloginfo(‘template_directory’); ?>
最后修改为这样:
来到网站的前台,你会发现样式就好看多了。但是有些图片还是没有加载出来。
右键检查最顶部的图片,你会发现它的路径是不对的:
和之前一样,也要插入主题的路径:
还有一个要替换的地方,下面这个图片的路径也是不对的,需要把:
替换为
这样首页的制作就基本差不多。
边栏推荐
- 基于 VIVADO 的 AM 调制解调(2)工程实现
- 通过Xshell连接Vagrant创建的虚拟机
- 借问变量何处存,牧童笑称用指针,Go lang1.18入门精炼教程,由白丁入鸿儒,go lang类型指针(Pointer)的使用EP05
- 向日葵安装教程--向日葵远程桌面控制
- 大佬们,我有一个MySQL source 通过旁路分流分了两个流,然后转表,现在想sink到两个hb
- Unity3D——自定义类的Inspector面板的修改
- 阿里云OSS上传文件超时 探测工具排查方法
- 表达式必须具有与对应表达式相同的数据类型
- The no-code platform helps Zhongshan Hospital build an "intelligent management system" to realize smart medical care
- OAuth Client默认配置加载
猜你喜欢
随机推荐
基于C#通过PLCSIM ADV仿真软件实现与西门子1500PLC的S7通信方法演示
一根网线两台电脑传输文件
欧拉函数(用欧拉筛法求欧拉函数)
刷题错题录2-向上取整、三角形条件、字符串拼接匹配、三数排序思路
Kotlin算法入门求回文数数算法优化二数字生成规则
magical_spider远程采集方案
阿里云OSS上传文件超时 探测工具排查方法
关于ts的一些泛型关键字用法
Kotlin算法入门求完全数
剑指offer专项突击版第26天
picker选择器出现object解决办法
万字长文带你了解多态的底层原理,这一篇就够了
深度学习100例 —— 卷积神经网络(CNN)识别眼睛状态
jenkins 流水线脚本详细解析Pipeline
What should I do if the mysql data query causes the cup to be full because the query time span is too large
gRPC系列(一) 什么是RPC?
Alibaba Sentinel - Slot chain解析
基于 VIVADO 的 AM 调制解调(3)仿真验证
One network cable to transfer files between two computers
【wxGlade学习】wxGlade环境配置