基于WordPress的互联网网站设计与开发

29基于WordPress的互联网网站设计与开发摘要随着中国经济的飞速发展，计算机已经越来越多地应用于社会生活的各个领域。同时，互联网作为它的连接全球计算机网络信息和网站之间的沟通桥梁，作为其主要的表现形式，同时还是互联网信息的主要承载者，无可否认其在Internet的发展上发挥着极其重要的作用。外国的互联网已经发展到一定程度了，有很多外国著名的设计师都设计出极具创意的个人网站，在网络上塑造自己的形象。中国的互联网虽然在逐渐成熟，与此同时网络上也出现了大量的个人网站，但是这类网站有绝大部分都是雷同的，而且没有新意，属于原创的作品寥寥可数。本次设计是以个人兴趣为出发点的，设计将运用当今最新的Html5+Css3+Jquery前端技术来实现个人主页，同时基于外国流行的开源软件Workpress来进行个人网站的二次开发的。还有会以Php+Ajax+Mysql+Jquery技术来搭建个人相册系统，最后会把个人主页、个人相册和个人博客三个应用合并在一起来呈现个人网站的。在此实现过程中还会运用Sina云计算平台来实现云端操作的。关键词：个人网站；个人博客；个人相册；云计算；SVNThePersonalWebsiteDesignAnd

DevelopmentBasedonWordPressAbstractWiththerapiddevelopmentofChineseeconomy,computersciencehasbeengraduallyappliedtoallfieldsofsociallife.ThereisnodenyingthefactthatwebsiteplaysanimportantroleinthedevelopmentofInternet.WhileInternetisregardedasthecommunicationbridgebetweeninformationtechnologyandcomputersaroundtheglobe,websiteasthemainformofnetworkinformationremainsthemaincarrierofInternetinformation.ForeignInternethasprogressedtoacertainadvancedlevel,andmanyforeignprestigiousdesignershavecreatedalotofhighlycreativepersonalwebsitestoshapetheirownimages.ChineseInternethasbecomemoremature,butpersonalwebsitesthatcrowdtheInternetaremostlythesame,unoriginalandnotcreative.Myownareinspiredbymyinterest.IamgoingtoapplythelatestHtml5+Css3+Jqueryfrontendsystemtobuildupmyownpage.BasedontheforeignpopularopensourcesoftwareWorkpressforseconddevelopment,Iwillfinallycombinemyhomepage,personalalbumandpersonalblogtopresentthecontentofmyownwebsite.Duringthedesignandimplementationprocess,IwillalsoapplySinacloudplatformtoperformcloudoperation.Keywords：PersonalWebsite;PersonalBlog;PersonalAlbum;Cloudcomputing;SVN目录TOC\o"1-5"\h\z1绪论41.1研究背景41.2云计算简介41.3开发环境简介4Apache概述5PHP概述5Mysql概述5SVN简介5Bootstrap简介5Workpress简介62需求分析72.1系统需求72.2需求分析72.3系统功能分析图7总体设计10系统结构图10总体功能设计11系统设计目标11数据库设计11系统数据分析11系统E-R图12数据流图13数据字典13文章评论额外信息表13文章评论信息表14链接信息表15基本配置信息表15文章额外数据表16文章信息表16文章分类表18分类与文章关联表18分类信息表18用户额外信息表19用户基本信息表19设计思想与实现21个人主页21个人相册23个人博客24系统测试与运行265.1系统运行环境26硬件环境26软件环境266结束语271绪论研究背景20世纪90年代中期互联网开始高速发展，很多IT人才利用自身的优势开发了许多风格迥异的网站。当时互联网上几乎全是个人网站，毫不夸张，个人网站掀开了互联网的新篇章。在这批个人网站逐步上市并成功晋升为知名商业网站后，它们完成了自己的使命，慢慢退出历史舞台。由于当时的商业网站不论从技术还是从内容来看都很不成熟，所以个人网站才有机会存活并积极发展起来。在这种大环境下，当时产生了大量内容丰富、风格多样的的个人网站，但是与其说它们是个人网站，不如说它们在为商业网站作着补充。不论是有意还是无意，这批个人网站走的完全是商业网站的套路，需要大量的投入。正是这种发展的先天性决定了个人网站必亡的命运。随着商业网站的逐步成熟，这些个人网站的补充作用无疑是多余的，被取而代之是必然的。当下那种按照个人喜好设置的个人主页无疑是个人网站中的翘楚，数量非常之多，其内容大多是关于站长的自我介绍，粘贴一些网络热文等等，其目的无非就是为个人提供一个展示自我的平台，随着互联网的深度发展，这类个人网站将会越来越受欢迎，数量也会越来越多。云计算简介云计算是一种按使用流量或者按使用时间付费的服务，这种服务提供方便的、快捷的、按需要的网络接入。大量的分布式计算机合并资源来实现云计算，使得其互联网与企业数据中心很类似。中国目前提供云计算服务比较好的平台分别是百度云开放平台和新浪SAE云计算平台。开发环境简介我的网站是基于国外开源系统Wordpress设计的，而Wordpress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。所以我的网站的最佳的开发环境是LAMP(Linux+Apache+Mysql+PHP)，由于Linux服务器的搭建比较麻烦，出于方便原因，我最后在本地环境使用了WAMP(Windows+Apache+Mysql+PHP)环境进行开发。同时出于要把网站上传到网络上供用户访问，并且要更好地实现代码的管理与减少网络端服务器搭建的成本，我还选择了新浪云计算平台来开发我的程序。Apache概述Apache是英文ApacheHTTPServer的缩写，它几乎支持所有计算机操作系统，是一个当今最流行的Web服务器端软件。它的特点是操作简单，响应速度快，性能稳定，而且可以通过简单的API扩展将Perl/Python等解释器编译到服务器中°Apache兼容性非常好,这点使它与PHP和MySQL结合起来是一个绝佳的PHP程序开发环境。由于Apache是一个免费的开源软件，所以有很多人愿意使用它并为它开发新的功能，添加新的特性并且不断地改进。PHP概述PHP是一种脚本语言，其英文全称为ypertextPreprocessor，译为中文是超级文本预处理语言的意思。PHP是一种嵌入HTML文档在服务器端执行的脚本语言，它的语言风格和C语言相似。目前在社会上流行的PHP版本为PHP5,PHP6即将发布稳定版。Mysql概述目前世界上运行速度最快的SQL语言数据库是MySQL。MySQL不单单具有很多其他数据库不具有的设置和功能，而且重点还是一款可供用户直接网上下载的完全不收取费用的产品，可以个人使用，也可以商业使用。MySQl的特点是功能强大、是跨平台语言、执行速度快、支持面向对象操作、维护成本低、内置函数强大、数据存储量大、兼容各种脚本开发语言、安全性高。SVN简介SVN是一个跨平台软件，基本上支持所有操作系统，它和CVS类似。SVN是一个开源的版本控制系统，它管理着随时间改变的数据。SVN通过一个类似于普通文件服务器的档案库（中央资料档案库）来记录每一次文件的变动。所以我们就可以随时随地地把档案恢复到任何旧的版本，或是查看文件的历史变动oSubversion可以用来管理任何类型的文件,包括程序源码在内，它是一个通用的系统。SVN的优点如下：1•易于使用，逻辑清晰，符合大众的操作习惯。2•管理容易，安全性高。3.代码一致性非常高。4.适合普遍小型项目的开发。Bootstrap简介Bootstrap是现在比较流行的前端响应式框架，它是twitter公司旗下的产品。响应式框架的优点：1.跨浏览器。2.设计上保持风格一致。3.快速开发。4.响应式：同时适用在移动设备上观看。Workpress简介Wordpress是一个外国流行的基于PHP语言和Mysql数据库的CMS（内容管理）系统。近些年来被引进中国，掀起了互联网的一股热潮。由于其代码的规范性和系统易用性，Wordpress不单单可以用来做个人博客，而且还可以做公司网站，甚至电子商务网站。2需求分析系统需求个人网站指的是团体或个人因某种兴致、并且拥有某种专业技术、基于为用户提供某种服务或展示自我的目的而产生具有独立域名和空间的网站。建立个人网站的目的是为了在网络上展示自己，塑造自己的个人形象的。为了让别人更加直观、清晰、详细地了解我，我决定把我的网站由三个系统组合而成，分别是个人主页，个人博客和个人相册。同时为了提高系统的稳定性、可维护性、扩充性、可移植性，我使用了新浪云计算平台来作为我云端服务器运行的环境。运用SVN版本控制来减少系统维护的压力。需求分析根据系统分析，基于WordPress的个人网站的要求如下：网站需求分析：（1）要有新颖的界面设计，布局应该简洁大气，让人浏览时产生舒适的感觉，给用户留下好的印象，好的心情，使其耐心浏览；（2）操作简单与方便，能适用于不同水平的使用者，并且让用户快速寻找到他们想要了解的信息；（3）要有互动功能，给用户与作者有交流的渠道，让有兴趣的用户方便地联系作者；（4）代码可重用性，可读性，可维护性要好，方便后期维护与升级。网站性能要求：（1）需要符合WEB2.0标准，w3c标准；（2）响应速度要快，负载均衡；（3）能处理多并发请求，功能稳定；（4）服务器稳定工作时间长，容错率高。系统功能分析图个人主页功能分析图，如图2-1所示：

图2-1图2-1个人主页功能分析图个人主页主要由三大内容部分组成，分别是个人信息简要介绍部分，轮播图片展示个人相册部分，html5地图展示旅行计划部分。同时，个人主页作为个人相册和个人博客的入口。个人相册功能分析图，如图2-2所示:用户一>查看相册个人相册>管理专辑个人相册管瑋员图2-2个人相册功能分析图个人相册的功能是向用户展示我喜爱或收藏的图片，把图片分为专辑来存放便于用户浏览。在后台利用php+ajax+js技术支持动态多线程无刷新地管理图片。管理员可以对专辑和图片进行增删查改操作。还可以修改管理员密码。

个人博客功能分析图，如图2-3所示:图2-3个人博客主页功能分析图个人博客的评论与留言功能给用户提供了与我互动的地方，增加相册api和播放音乐功能是为了增加网站的趣味性，页面和文章的功能是博客的主要功能。管理员在后台拥有管理所有信息和系统设定的权限，包括文章、页面、评论、留言、用户的管理，系统、主题和插件的设置等。3总体设计3.1系统结构图基于WordPress的个人网站系统结构图，如图3T所示:in<Jexwp-tiiu-g-h^-Mdw-r—二＜Od_ti£dclPF晒in<Jexwp-tiiu-g-h^-Mdw-r—二＜Od_ti£dclPF晒I佩只炭3!"亍一农■埶1亍wpo；|>i£-^AHSPATH‘电WfBiKMA丹村IKIIn口1口口口irmUe■伯liIl-cons^nls-iriG/vonB・anjric^Qornpjiliric^furiciicjrmjrimclE!县与-VY"lncAsisss-«^|c*-errori门删创孔Inc/dAr^UR-rilia^rftIncu^omciLiVTic)InuiE弓-■!□Io03lnoi,m±5-!5-el:linfjsIn"4DnInofcla^s-s-wp-wsilkcrinc/ciav-s-wp-ajax-res-porsseIntjTurrrimidn©I門le/tf出billtiy-y-IricAnutuyirtQk■:szrIndVria-tQIndQongrail-lAmplaraIncullnk-tompl»taInot'auItior-icsmplateintj^pos-lIntj'pcsifl-L&rTspl-M-tesinc/coilBgoryInc^'^-Mlesi^ry-'lwrnpluilt?IriMSQmTlWIn-C/CO^mArt'l-teirFipAt$Iriu/f口相曰lnc-jtoia<knia.rkln-cut>t>&kniia.rlc-t<impint口lncyl<5^sinc/ere<iinc/da-priBcatDdInc^^Bc^rlpl-lotidvrInunaxogm*『■c血jpcim怕jnG'cjri口nicjlinc^wh刖「IcjcjcIhhInuZmgjdlRincihttpIn-ni'cltn^ft-httplncj"wldgot!z-Inoi'nav-n-ienuInofnav-rrienu-tempiateiricu^acjmi口七”inmmiB-fijriGi口口sulL-fMLrdiri3rTaMzripJ已曰<J«jr图3-1基于Wordpress的个人网站系统结构图rTaMzripJ已曰<J«jr图3-1基于Wordpress的个人网站系统结构图3.2总体功能设计3.2.1系统设计目标系统总的设计是为了达到以下目标：•提高网站的代码的规范性，可读性，可重用性和可维护性，减少插件使用，简化系统框架，利于搜索引擎收录。•以用户体验为优先设计原则，注重网站的整体的美观性与协调性，简化操作，提高互动性，增强网站内容的可读性。•增强网站的负载能力与加快网站响应速度。3.3数据库设计3.3.1系统数据分析通过对个人网站系统的分析，可以得出该系统涉及两类类实体：用户和管理员。这些实体涉及的数据项如下图3-2至图3-3所示：3.3.2系统E—R图通过对系统实体数据关系的分析，可以画出如下E-R图，如图3-4所示:3wptommenuBIGJNT|2£-；i>cammeM"戏IDSKjKT£0}Kjmmfflni占uihvTllTfOTGOEmanialhfflamaiVAROWRtifflilKimniiVillulbtiuHMRDdAHi^fXli00rrini6rT|„iL!|lwrJPtfARLHWinQDieflmnwfl1_riaifl-DA1FTIUEMmmaM_cl>ii»_g[niDATETIME®rnmenic<xlHfTtTExIDommflniINTfll|KirrmQrTlJW眄吭妙肌删世细耐MjigiinlVAflQUA[25S；icammeM^p#VABCHAFI23soommerrtoamaiGIHTlSC?LSBfa&9NK20)丄■1-maaJjBKlNTiKi；-DOrrmerJ-idSGfNTl&Oi拠呵VAFlGHAHi^irwuvaJuflLONGTEXTwppmistID日IG出TT㈣-p«i_i血曲EI&N7^U：shidateDATETIMED®L由血卫ntCWETW反patiBCEeniLONG!Elip®MTEXT汕fifucw盟TEXTMKtSjSlLjDUAftCbm^Ol詞{SQ-rnrr-rlBlHlusVAACHARjKripirsLJiiilT啊RCHAP」鋼OuAIpj^^MucdVARCHATIiEms&inamevARCbARi^i.■IDPingTDCT■Din^TEfTposiTOJItecMTEIIMEIWSl_rf^i3rlte_fFflDATETIWF卄牺i_ointtfiijllai«dTEXTQM1_pa/BnlBIGN节題•：gudVARCWRE55：impnuoriorlNTl'11*PO5IE^9VAf1GHARRIBBLrnrrflJH>pVARGHAF||lffl；ia&ffinwu^&jmEl石INT|2OJwpu^ersDBIGINT|2D)斗r_卯ntfAACHARr®|爲鑒i/ARCHARiMIVARCHAA鋤即EWFCHAAllOfll”uriV*RCH*FII1O0•*(BQiSJEiiedDATEIIME屈T_Kli归11师_・引¥酹£11冊|破」jur_EUlu£ENTill>•i^3ff_ranwl/AfiCWAR(2b&)1wp_usrr™taLjFSta』由白HT|鋤.uwcBIQMTffiOl■mfiahavVARCHARfSSiiTitU.时I曲iLClWSTEXTnrpoption^c^rt^RiGlNiTiJOfB&g_HINTill)wc-«Mi!_nam6WflCHAA肌opt如胡irfLONGTEKTV*RCHW1(£0imojMBhwhifr--：-：ri:秽*P«|貝曲灯[绚nieiaLDNGrEJ(Twyi_1flrm_riSalionahlpa•如idBIGINTi2Cs-啾伯」删)ftM札冃沖wr⑶|iBm-i.Dr31町阳|npitrHiLaranomviwmnHiXKin^d伽EMPiGiNTi般删咏眄讷flCHARfl*att^pmnLONIjTBCTpam91CWTi跚[DunlBKalFfTSOj_禅D」ir皆專叭碇£|1叮㈣irfclhIMROU日i255)E^ruungVAACHAAl%)ifh_in^eVAncl-<AA(25S)Irhlajg«VtflCHAR^.i怙i^BsrplJDnVA-RCHARi255ifi他嗣简VARCHAHl^i屛im_[s™0Girm；2(]i”叩INT(11)lnk_updaitriDATET1k£.1屯祁姑肥M朋㈣i*njmfiMEDMWTDfT卅訥ARCHAR瀚miisms图3-4基于Wordpress的个人网站系统E-R图3.4数据流图数据流图如3-5所示:卅细•除版块问強立盘身份检证轉不丈版列表忌冠内容&疔纯用户刊农发茨文辛卅细•除版块问強立盘身份检证轉不丈版列表忌冠内容&疔纯用户刊农发茨文辛OnlkteUmr民出歯Artrde-~'图3-5基于Wordpress的个人网站系统数据流图3.5数据字典3.5.1文章评论额外信息表描述：保存文章评论额外信息，例如metakey等。表3-1文章评论额外信息表字段类型空默认说明meta_idbigint(20)否自增唯一IDcomment_idbigint(20)否0对应评论IDmeta_keyvarchar(255)是NULL键名meta_valuelongtext是NULL键值

文章评论信息表描述：保存文章评论信息。表3-2文章评论信息表字段类型空默认说明comment_IDbigint(20)否自增唯IDcomment_post_IDbigint(20)否0对应文章IDcomment_authortinytext否评论者comment_author_emailvarchar(lOO)否评论者邮箱comment_author_urlvarchar(200)否评论者网址comment_author_IPvarchar(lOO)否评论者IPcomment_datedatetime否0000-00-0000:00:00评论时间comment_date_gmtdatetime否0000-00-0000:00:00评论时间（GMT+0时间）comment_contenttext否评论正文comment_karmaint(ll)否0未知comment_approvedvarchar(20)否1评论是否被批准comment_agentvarchar(255)否评论者的USERAGENTcomment_typevarchar(20)否评论类型（pingback/普通）

comment_parentbigint(20)否0父评论IDuser_idbigint(20)否0评论者用户ID（不一定存在）链接信息表描述：保存链接信息表。表3-3链接信息表字段类型空默认说明link_idbigint(20)否自增唯IDlink_urlvarchar(255)否链接URLlink_namevarchar(255)否链接标题link_imagevarchar(255)否链接图片link_targetvarchar(25)否链接打开方式link_descriptionvarchar(255)否链接描述link_visiblevarchar(20)否Y是否可见（Y/N）link_ownerbigint(20)否1添加者用户IDlink_ratingint(ll)否0评分等级link_updateddatetime否0000-00-0000:00:00未知link_relvarchar(255)否XFN关系link_notesmediumtext否XFN注释link_rssvarchar(255)否链接RSS地址基本配置信息表描述：通常通过get_option来操作，该表通常作为插件存储数据的一个地方表3-4基本配置信息表字段类型空默认说明

option_idbigint(20)否自增唯IDoption_namevarchar(64)否键名option_valuelongtext否键值autoloadvarchar(20)否yesWordPress载入时自动载入(yes/no)文章额外数据表描述：保存文章额外数据，例如文章浏览次数，文章的自定义字段等都存储在这里表3-5文章额外数据表字段类型空默认说明meta_idbigint(20)否自增唯IDpost_idbigint(20)否0对应文章IDmeta_keyvarchar(255)是NULL键名meta_valuelongtext是NULL键值文章信息表描述：保存文章信息，包括了日志、附件、页面等等信息。是WordPress最重要的一个数据表。表3-6文章信息表字段类型空默认说明IDbigint(20)否自增唯IDpost_authorbigint(20)否0对应作者IDpost_datedatetime否0000-00-0000:00:00发布时间post_date_gmtdatetime否0000-00-0000:00:00发布时间（GMT+0时间）post_contentlongtext否正文post_titletext否标题

post_excerpttext否摘录post_statusvarchar(20)否publish文章状态(publish/auto-draft/inherit等)comment_statusvarchar(20)否open评论状态（open/closed）ping_statusvarchar(20)否openPING状态(open/closed)post_passwordvarchar(20)否文章密码post_namevarchar(200)否文章缩略名to_pingtext否未知pingedtext否已经PING过的链接post_modifieddatetime否0000-00-0000:00:00修改时间post_modified.gmtdatetime否0000-00-0000:00:00修改时间（GMT+0时间）post_content_filteredlongtext否未知post_parentbigint(20)否0父文章，主要用于PAGEguidvarchar(255)否未知menu_orderint(ll)否0排序IDpost_typevarchar(20)否post文章类型（post/page等）post_mime_typevarchar(lOO)否MIME类型comment_countbigint(20)否0评论总数

文章分类表描述：保存文章分类、链接分类、标签的信息表。表3-7文章分类表字段类型空默认说明term_idbigint(20)否分类IDnamevarchar(200)否分类名slugvarchar(200)否缩略名term_groupbigint(10)否0未知分类与文章关联表描述：分类与文章信息表(wp_posts)、链接表(wp_links)的关联表。表3-8分类与文章关联表字段类型空默认说明object_idbigint(20)否0对应文章ID/链接IDterm_taxonomy_idbigint(20)否0对应分类方法IDterm_orderint(ll)否0排序分类信息表描述：区分wp_terms信息的分类类型，有category、link_category和tag三种分类类型。表3-9分类信息表字段类型空默认说明term_taxonomy_idbigint(20)否分类方法IDterm_idbigint(20)否0taxonomyvarchar(32)否分类方法

(category/post_tag)descriptionlongtext否未知parentbigint(20)否0所属父分类方法IDcountbigint(20)否0文章数统计用户额外信息表描述：保存用户额外信息表。表3-10用户额外信息表字段类型空默认说明umeta_idbigint(20)否自增唯IDuser_idbigint(20)否0对应用户IDmeta_keyvarchar(255)是NULL键名meta_valuelongtext是NULL键值用户基本信息表描述：存放系统所有用户基本信息表3-11用户基本信息表字段类型空默认说明IDbigint(20)否自增唯IDuser_loginvarchar(60)否登录名user_passvarchar(64)否密码user_nicenamevarchar(50)否昵称user_emailvarchar(lOO)否Emailuser_urlvarchar(lOO)否网址user_registeredatetime否0000-00-00注册时间d00:00:00

user_activation_keyvarchar(60)否激活码user_statusint(ll)否0用户状态display_namevarchar(250)否显示名称设计思想与实现我的基于WordPress的个人网站由三部分组成，分别是个人主页，个人博客和个人相册，相面分别介绍这三部分的设计思想和展示界面效果。个人主页个人主页界面如图4-1：RfbiJ-PiMl.nJtMfli-!-5-fci的上炜n*.糯丹訓"二冲灶.«H1MTW^H-ETtat!.■Kl-F-ft止"c妙田柏.13冷LThIW?巾柚ISFiTCrtgl巴gm

y.i-mtvutt..Tf^rzAZHiHkhj«r441ittrt-T?AiH«i*iasTiCcw?wlty'kkr-ausheCcwfcssl齐Cr^^H^JOiMwIvwinuHiQVi贏iRgtti4hmc图4-1个人主页界面主界面的设计使用了网络新兴前端技术Html5+Css3+Jquery来实现的，运用Html5实现地图信息获取功能；运用Css3来实现文字倾斜，旋转等文字特效；运用Jquery来实现欢迎页面特效和图片相册轮播。主页风格简单大气，直观明了，头部制作了导航栏，让用户一进网站就能迅速获取到他们想了解的信息。由于页面比较长，我特意在底部做了回到头部按钮，提高用户体验。4.2个人相册个人相册主界面如图4-2和图4-3所示:MyGallery图4-2个人相册主界面图4-3个人相册主界面个人相册后台界面如图4-4：

SlidtGallery|~T|置Mi.nai•Milirii>i«hijtihhj:HR.SlidtGallery|~T|置Mi.nai•Milirii>i«hijtihhj:HR.图4-4个人相册后台界面我的个人相册系统是运用Php+Ajax+Jquery制作的。个人相册界面设计走英伦路线，以黑白为主调营造炫酷的的氛围。为了满足用户浏览的需要，我的相册是分专辑展示的。而且在每个专辑里面都有两种展示图片的形式，一种是幻灯片形式，可以看到每张图片的标题和描述文字，另一种是自动播放相册展示形式，可以高清地欣赏图片。和普通的相册展示软件不同的是，我的个人相册系统是带有后台管理的。在后台里