当前位置:网站首页>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





WordpressCMS主题开发01-首页制作_css



 ​cms备份 - WordpressCMS主题开发01-首页制作​



那接下来,我们把这个备份的模板放置到我本地搭建好的wordpress主题文件夹中:




WordpressCMS主题开发01-首页制作_php_02



 ​wp主题 - WordpressCMS主题开发01-首页制作​



如何把静态页面制作成主题

我们进入wordpress主题后,最基本的2个文件,一个是style.css,另一个是index.php。

首先我们来制作:index.php

复制index.html,重命名它为index.php,打开它,我们发现这里调用了3个css:

      
      
<link href="front.css" type="text/css" rel="stylesheet" />
<link href="whole.css" type="text/css" rel="stylesheet" />
<link href="layout.css" type="text/css" rel="stylesheet" /><script type="text/javascript">
  • 1.
  • 2.
  • 3.

有多个CSS文件的时候,用哪个文件作为style.css?

判断的方法非常简单,在首页里往下找,找到第一个div所对应的class:

      
      
<div class="top cbody">
  • 1.

所以,我们在三个css文件中,分别查找 .top

最终,你会发现,它位于 layout.css 中。

通过.top可以快速的找到整个网站布局的css,一般我们把整个网站用来布局的div,它所对应的css文件作为style.css。

其他的css可以作为次要的css。确定好之后,我们就直接在主题文件夹下,把layout.css改为style.css。

接着我们需要给style.css添加版权信息,把以下代码放置style.css的最顶部就可以。

      
      
/*
Theme Name: 虚幻私塾CMS主题
Theme URI: http://www.xuhss.com
Description: CMS主题
Author: MrBang
Author URI: http://www.xuhss.com
Version: 1.0
Tags: cms, xuhss
*/
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

接下来,我们需要在index.php中,增加对style.css的调用。

      
      
<link href="front.css" type="text/css" rel="stylesheet" />
<link href="whole.css" type="text/css" rel="stylesheet" />
<link href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" rel="stylesheet" /><script type="text/javascript">
  • 1.
  • 2.
  • 3.

现在,我们登陆wordpress后台,找到主题文件夹刷新:




WordpressCMS主题开发01-首页制作_php_03



 ​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

修改完成后,就像这样:




WordpressCMS主题开发01-首页制作_css_04



 ​wordpress主题初始样式 - WordpressCMS主题开发01-首页制作​



和我们静态页面的差距还是比较大,这是为什么呢?

因为index.php 调用了3个css,但是我们只提供了一个style.css的调用。

另外2个css并没有找到,所以我们需要把路径补充完整。

调用wp主题的路径也有一个模板标签:<?php bloginfo(‘template_directory’); ?>

最后修改为这样:

      
      
<link href="<?php bloginfo('template_directory'); ?>/front.css" type="text/css" rel="stylesheet" />
<link href="<?php bloginfo('template_directory'); ?>/whole.css" type="text/css" rel="stylesheet" />
<link href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" rel="stylesheet" /><script type="text/javascript">
  • 1.
  • 2.
  • 3.

来到网站的前台,你会发现样式就好看多了。但是有些图片还是没有加载出来。

右键检查最顶部的图片,你会发现它的路径是不对的:

      
      
<img height="50" alt="网上如何赚钱" width="200" src="img/logo2.gif">
  • 1.

和之前一样,也要插入主题的路径:

      
      
<div class="toplogo"><a href="#"><img height="50" alt="网上如何赚钱" width="200" src="<?php bloginfo('template_directory'); ?>/img/logo2.gif" /></a>  </div>
  • 1.

还有一个要替换的地方,下面这个图片的路径也是不对的,需要把:

      
      
src="front_res/com_tag/head-mark3.gif"
  • 1.

替换为

      
      
src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif"
  • 1.

这样首页的制作就基本差不多。

原网站

版权声明
本文为[51CTO]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_11408356/5565587