Wrodpress快速建站入门教程 -

hongtanke

浏览: 25497 次
性别:
来自: 北京

最近访客更多访客>>

beyond736

redseahkcc

mm327791929

abc999

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Wrodpress快速建站入门教程

博客分类：

Wordpress

Wordpress 快速建站入门教程 cms

一直听说php的CMS功能很强大，近期体验了一下使用wordpress制作一个网站的过程。简单总结如下：

1、概述：

Wordpress是一个功能强大的php版CMS，也是一个强大的博客系统，这里只是体验了一下Wordpress的CMS方面的功能-使用Wordpress制作一个有后台管理功能的网站。一个有后台管理功能的网站主要功能包括：网站前端展示（配置的）内容、网站后台管理（配置前端展示的内容）、数据库存储（配置的内容）；Wordpress作为一个框架帮我们解决了网站管理后台和数据库，同时通过标签实现配置数据的前端展示。本例演示一个完整制作过程，但只实现一小块内容的配置，以达到跑通流程的目的。由于是快速建站，所以不能从零开始开发，直接下载网站模板，按Wordpress规范进行修改，完成与Wordpress的集成，快速完成建站步骤（本例为了验证模式，只是一个简单的demo）。

2、前期准备

1、技术准备：

具备基础的语言能力，如：HTML、CSS、JavaScript、PHP（其他编程语言也可），由于大部分工作是修改和重新组织，而不是从零开发，因此对以上技术要求能看懂，能修改即可。

2、环境准备：

1、Linux虚拟机：

在windows上也可以，我在本机Win7环境搭建时，Wordpress响应速度比较慢，后来改为Linux虚拟机了，问题就解决了；

2、Wordpress运行环境：

Wordpress需要一个包含PHP和数据库的运行环境，简单方式只需安装Linux版的LAMPP即可，该环境包含了PHP、Apache、Mysql；

3、数据库：

创建一个空数据库，Wordpress连接后会自动建表并初始化数据

3、附件：

网站模板原始文件.zip 直接从网站下载的网站模板

mysub-wordpress主题文件.rar 修改后的Wordpress主题，可直接加载看效果

3、建站过程（相关文件可以直接从附件中复制）

1、下载Wordpress：

在官网https://cn.wordpress.org/下载一个最新的安装包，本例使用的版本是4.9.5；

2、安装Wordpress：

1、将解压后的Wordpress文件夹复制到LAMPP的网站目录下，本例的目录是/opt/lampp/htdocs/wordpress

2、参考官网“著名的5分钟安装”（https://codex.wordpress.org/zh-cn:%E5%AE%89%E8%A3%85WordPress#.E8.91.97.E5.90.8D.E7.9A.845.E5.88.86.E5.AE.89.E8.A3.85）；

3、安装成功后，访问以下地址测试，根据自己的实际情况，修改IP（192.168.110.134）、端口（80）和项目名（wordpress）
前台的访问地址：http://192.168.110.134/wordpress；
后台的访问地址：http://192.168.110.134/wordpress/wp-admin；

3、下载网站前台模板：

从模板网站上下载一个模板（我使用的www.cssmoban.com模板之家，下载的模板见附件）；

4、将模板添加为网站主题：

1、将前台模板文件夹重命名为mysub（根据情况自行决定）；
2、在mysub目录下新建一个文件style.css，该文件定义了主题的名称、作者、版本等信息，内容见附件；
3、在mysub目录下添加一个图片screenshot.png，该文件将作为预览图标显示在Wordpress后台；
4、将模板文件夹mysub（前台模板文件夹）复制到Wordpress主题目录下，本例路径为：/opt/lampp/htdocs/wordpress/wp-content/themes；
5、登录Wordpress后台，打开“外观”->“主题”，就能看到一个主题-“第一个自定主题”（图标为screenshot.png图片，名字是在style.css中定义的名字），点击“启用”，即可生效；
6、当前还不能预览效果，主题的文件结构还不满足Wordpress的要求；
7、修改网站前台文件：

1、修改首页面：将原来的index.html修改为index.php，此时可以访问前台地址预览了；
2、拆分header.php：将index.php的头部拆分为独立的文件header.php，拆分结构自己选择，但一定要包含完整的head内容；
3、修改header.php中的链接：主要是CSS、JS文件的引用地址为绝对地址，如：<link href="<?php bloginfo('template_url'); ?>/css/style.css" rel="stylesheet" type="text/css" media="all" />；
4、修改index.php文件：引用header.php文件；
5、选在需要管理的内容：本例是首页的FOOD列表中的第一个内容；

8、修改后台文件：

1、在mysub目录下新建functions.php文件：该文件由wordpress自动调用，负责自定义的函数，数据初始化的文件也在这里触发调用，内容参见附件；

2、在mysub目录下新建theme_setup_data.php：该文件初始化了一些动态内容的值（国际化也可以在这里引用），这些值在index.php页面被调用（本例以FOOD列表的第一项为例），该文件由functions.php引入；
3、修改index.php内容为动态内容:本例以FOOD列表的第一项为例，变量调用与theme_setup_data.php的定义一致；
4、此时可预览一下效果，首页的第一个FOOD的内容已经变成theme_setup_data.php文件中定义的默认值了；
5、在mysub目录下新建customizer-project.php：该文件初始化后台管理设置菜单，刚才的动态内容可通过后台设置进行管理；
6、修改functions.php文件，添加调用语句，引入customizer-project.php文件；
7、登录后台验证效果：登录后台->“外观”->“自定义”，即可看到在customizer-project.php文件中定义的菜单“关于-设置1”，点击进入下一级后，再点击即可看到配置项，修改内容后，点击“发布”，打开前台地址可以看到修改后的效果；

5、完成

至此使用Wordpress快速创建有管理后台网站的流程已经介绍完毕，后面可以自由发挥了；

4、其他问题

1、加载顺序：
        启动：WP->functions.php->theme_setup_data.php
                              ->customizer-project.php
        前台：WP->index.php->theme_setup_data.php
        后台：WP->后台管理->主题自定义->内容设置->customizer-project.php
2、默认值：

theme_setup_data.php文件和customizer-project.php文件都设置了默认值，前台显示以theme_setup_data.php为准，后台设置以customizer-project.php为准，可能出现不一致；

3、静态文件路径问题：

1、js和CSS文件路径：<link href="<?php bloginfo('template_url'); ?>/css/style.css" rel="stylesheet" type="text/css" media="all" />

2、图片地址：<img src="<?php bloginfo('template_url'); ?>images/oo.png" alt="">

3、使用<?php bloginfo('template_url'); ?>函数获取主题的地址，这些静态文件都保存在主题的文件夹中

4、网站内容修改保存：

内容被修改后点击发布将修改后的数据保存在数据库中，保存在wp_options表中，option_name表示变量的名字，option_value表示变量的值。以本demo为例，变量的名字以customizer-project.php文件中的数组变量的名字命名，如：mysub_pro_options[portfolio_title_one]，option_name的值为mysub_pro_options；option_value的值就是数组变量被修改的项的值的集合。

下面是数据库中值的形态：
a:1:{s:25:"portfolio_description_one";s:89:"食物-1描述食物-1描述食物-1描述食物-1描述食物-1描述食物-1描述22222";}
a:1:{s:25:"portfolio_description_one";s:100:"食物-1描述食物-1描述食物-1描述食物-1描述食物-1描述食物-1描述2222233333333333";}
a:2:{s:25:"portfolio_description_one";s:100:"食物-1描述食物-1描述食物-1描述食物-1描述食物-1描述食物-1描述2222233333333333";s:19:"portfolio_title_one";s:14:"食物-1222222";}
a:3:{s:25:"portfolio_description_one";s:100:"食物-1描述食物-1描述食物-1描述食物-1描述食物-1描述食物-1描述2222233333333333";s:19:"portfolio_title_one";s:14:"食物-1222222";s:19:"portfolio_image_one";s:76:"http://192.168.110.134/wordpress/wp-content/uploads/2018/05/验证成功.jpg";}
第一组：只修改了一项；
第二组：只修改了一项，但内容变长；
第三组：修改了两项数据；
第四组：修改了三项数据；
其中的规律自行总结吧。

5、剩下的就是需要熟悉Wordpress的标签、函数和类了，自己深入吧，

下面推荐几个官方地址供参考：
1、Wordpress中文官方：https://codex.wordpress.org
2、WordPress 官方中文文档：https://codex.wordpress.org/zh-cn:Main_Page
3、Wordpress主题标签：https://codex.wordpress.org/zh-cn:%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE
4、开发者中心：https://developer.wordpress.org/