一直听说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快速建站入门教程相关推荐

  1. 大淘客CMS建站入门教程

    大淘客之所以深受广大淘客站长的喜爱,与其简单易用的特点息息相关,这篇教程主要针对没有建站基础的童鞋,包括了域名解析教程.文件上传方法.大淘客CMS网站搭建教程和陶宝联盟PID申请教程,即使你是一名没有 ...

  2. mysql如何建网站_新手建站入门教程⑨:如何建一个门户网站

    而且用博客程序建立的文章网站永远看上去都是个博客,可自定义的东西不是那么多,比如有的人比较想做一个大一点的门户网站,改怎么来做呢?今天我就来告诉你. 其实要建立一个门户网站也是一样不难,哪怕是你要建一 ...

  3. 腾讯云Linux服务器安装Wordpress,一键建站入门教程

    一.环境 笔者用的是腾讯云服务器1核1G的配置,操作系统是centos7.2 二.安装lnmp 在lnmp官网(https://lnmp.org/download.html)里找到最新版的链接. 目前 ...

  4. linux 快速建网站,如何快速建站,新手快速搭建网站教程

    越来越多的人选择个人建站,个人站长虽然门槛很低,但是有些朋友觉得Linux服务器各种复杂的命令脚本让自己没法搭建环境.今天就给大家推荐一款使用方便.功能强大的快速建站工具--云帮手,支持 Linux ...

  5. 阿里云Linux系统新手快速建站视频教程

    原文链接 [阿里云大学---云上建站快速入门:博客.论坛.CMS.电子商务网站统统搞定]  废话不多说,本教程将带领0基础新手朋友快速在阿里云ECS服务器上搭建常用的网站程序,如果有意见建议请在本帖或 ...

  6. 【建站系列教程】3、建站基本技术介绍

    [建站系列教程]3.写网页基本技术介绍 摘要 html.css.js jQuery ui框架 bootstrap jQuery-ui vue的ui 后端 采用ajax 或者 php cookie也可以 ...

  7. DedeCMS快速建站

    前一段时间从老师哪里得来一个项目,关于一个小公司的网站.由于时间的原因,又接近我们的期末考试,从老师那里了解到一些关于快速建站的东西,接触了CMS(Content Management System) ...

  8. 百度云主机(配置、调试环境)文件上传(快速建站,实现首页访问) - FTP篇

    百度云主机BCH实例(配置.调试环境)FTP文件上传,如何操作? 百度云虚拟主机参考文档:产品手册大全 总结步骤: 在你首次登录控制面板,系统会要求初始化您的密码,包括设定用户账号.管理密码.FTP账 ...

  9. 菜鸟零基础建站入门指引(仅供参考)

    菜鸟零基础建站入门指引(仅供参考) 自主建站需要有域名.空间和网站备案 综合说明:参考https://help.aliyun.com/knowledge_detail/39784.html 大致流程: ...

最新文章

  1. 访谈|在网络世界捕获威胁的猎人
  2. 彻底弄懂flex布局
  3. win10 安装 Pytorch
  4. C++ Primer 5th笔记(chap 16 模板和泛型编程)可变参数模板举例
  5. 秘鲁农业功臣-国际农民丰收节贸易会:蔬菜用广州话发音
  6. 网易加速5G下视频技术应用,携手南京银行数字化转型
  7. htaccess 防止盗链,防止目录浏览等10大技巧
  8. unity3d由多个部分组成一个角色
  9. RTX5 | 消息队列04 - (实战技巧)串口中断回调函数ISR同步线程
  10. Android-JNI开发系列《十二》总结JNI知识体系
  11. Atitit 小程序前端api艾提拉总结 索引 目录 1. 基础 37 2 1.1. 系统 38更新 38小程序 39调试 41定时器 42 2 2. 路由 43 2 3. 界面 44 2 3.1.
  12. chrome extension debug在哪?
  13. Fedora 9与Windows共享文件
  14. UFS SCSI Inquiry Cmd
  15. 关于spacing和重采样、降采样的理解
  16. 腾讯人口密度热力图_从腾讯位置大数据,看中国的超级城市
  17. Hadoop与spark性能比较试验
  18. Buck-Boost 变换器和红外 LED 驱动器
  19. flex与相对定位在国内双核浏览器极速模式下的兼容性问题
  20. 服务器状态502 503 504,服务器错误500/502/503/504详解

热门文章

  1. mysql字符串为空时,如何据此找到对应记录?
  2. Leetcode 最接近的三数之和
  3. ecmall flash大转盘积分抽奖功能
  4. java 上传图片,图片预览,2种方法
  5. 华为你学不会,包括数据管理
  6. python写安卓游戏_python写lol游戏脚本(用python开发安卓脚本)
  7. RPC服务测试新思路
  8. Nginx配置域名服务小试牛刀
  9. Pytorch中torch.unsqueeze()和torch.squeeze()函数解析
  10. springcloud H版+alibaba cloud4