Wrodpress快速建站入门教程
一直听说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快速建站入门教程相关推荐
- 大淘客CMS建站入门教程
大淘客之所以深受广大淘客站长的喜爱,与其简单易用的特点息息相关,这篇教程主要针对没有建站基础的童鞋,包括了域名解析教程.文件上传方法.大淘客CMS网站搭建教程和陶宝联盟PID申请教程,即使你是一名没有 ...
- mysql如何建网站_新手建站入门教程⑨:如何建一个门户网站
而且用博客程序建立的文章网站永远看上去都是个博客,可自定义的东西不是那么多,比如有的人比较想做一个大一点的门户网站,改怎么来做呢?今天我就来告诉你. 其实要建立一个门户网站也是一样不难,哪怕是你要建一 ...
- 腾讯云Linux服务器安装Wordpress,一键建站入门教程
一.环境 笔者用的是腾讯云服务器1核1G的配置,操作系统是centos7.2 二.安装lnmp 在lnmp官网(https://lnmp.org/download.html)里找到最新版的链接. 目前 ...
- linux 快速建网站,如何快速建站,新手快速搭建网站教程
越来越多的人选择个人建站,个人站长虽然门槛很低,但是有些朋友觉得Linux服务器各种复杂的命令脚本让自己没法搭建环境.今天就给大家推荐一款使用方便.功能强大的快速建站工具--云帮手,支持 Linux ...
- 阿里云Linux系统新手快速建站视频教程
原文链接 [阿里云大学---云上建站快速入门:博客.论坛.CMS.电子商务网站统统搞定] 废话不多说,本教程将带领0基础新手朋友快速在阿里云ECS服务器上搭建常用的网站程序,如果有意见建议请在本帖或 ...
- 【建站系列教程】3、建站基本技术介绍
[建站系列教程]3.写网页基本技术介绍 摘要 html.css.js jQuery ui框架 bootstrap jQuery-ui vue的ui 后端 采用ajax 或者 php cookie也可以 ...
- DedeCMS快速建站
前一段时间从老师哪里得来一个项目,关于一个小公司的网站.由于时间的原因,又接近我们的期末考试,从老师那里了解到一些关于快速建站的东西,接触了CMS(Content Management System) ...
- 百度云主机(配置、调试环境)文件上传(快速建站,实现首页访问) - FTP篇
百度云主机BCH实例(配置.调试环境)FTP文件上传,如何操作? 百度云虚拟主机参考文档:产品手册大全 总结步骤: 在你首次登录控制面板,系统会要求初始化您的密码,包括设定用户账号.管理密码.FTP账 ...
- 菜鸟零基础建站入门指引(仅供参考)
菜鸟零基础建站入门指引(仅供参考) 自主建站需要有域名.空间和网站备案 综合说明:参考https://help.aliyun.com/knowledge_detail/39784.html 大致流程: ...
最新文章
- 访谈|在网络世界捕获威胁的猎人
- 彻底弄懂flex布局
- win10 安装 Pytorch
- C++ Primer 5th笔记(chap 16 模板和泛型编程)可变参数模板举例
- 秘鲁农业功臣-国际农民丰收节贸易会:蔬菜用广州话发音
- 网易加速5G下视频技术应用,携手南京银行数字化转型
- htaccess 防止盗链,防止目录浏览等10大技巧
- unity3d由多个部分组成一个角色
- RTX5 | 消息队列04 - (实战技巧)串口中断回调函数ISR同步线程
- Android-JNI开发系列《十二》总结JNI知识体系
- Atitit 小程序前端api艾提拉总结 索引 目录 1. 基础	37	2 1.1. 系统	38更新 38小程序 39调试 41定时器 42	2 2. 路由	43	2 3. 界面	44	2 3.1.
- chrome extension debug在哪?
- Fedora 9与Windows共享文件
- UFS SCSI Inquiry Cmd
- 关于spacing和重采样、降采样的理解
- 腾讯人口密度热力图_从腾讯位置大数据,看中国的超级城市
- Hadoop与spark性能比较试验
- Buck-Boost 变换器和红外 LED 驱动器
- flex与相对定位在国内双核浏览器极速模式下的兼容性问题
- 服务器状态502 503 504,服务器错误500/502/503/504详解