Wrodpress快速建站入门教程

Wrodpress快速建站入门教程 一直听说php的CMS功能很强大,近期体验了一下使用wordpress制作一个网站的过程。简单总结如下: 1、概述:Wordpress是一个功能强大的php版CMS,也是一个强大的博客系统,这里只是体验了一下Wordpress的CMS方面的功能-使用Wordpress制作一个有后台管理功能的网站。一个有后台管理功能的网站主要功能包括:网站前端展示(配置的)内容、网站后台管理(…

 

一直听说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/

今天的文章Wrodpress快速建站入门教程分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/26028.html

(0)
编程小号编程小号

相关推荐

发表回复

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