我希望能设计出世界上最美的画面!

首先进入你自己建立的网站http://localhost:8079/Frank,如上图所示。注意,编辑页面时,要可以上外网,否则wordPress的插件会下载出错!

点击左上角按钮(不知为什么在firefox浏览器中最上面一栏没有显示),在下拉列表中选择Dashboard( 仪表盘),即可进入下图网站设计界面,也可以直接登入设计界面:http://localhost:8079/Frank/wp-admin/,我从本地电脑登陆时,不用输入网站的用户名和密码,可能从外网登陆该页面时需要密码。

图一

进入 Learn more about getting started链接,里面有一官方的教程!

设计了一些元素之后,如果想返回页面看效果,点击左上角的主页按钮“FrankWP”即可返回。

网站元素理解: 网页(Page)和主题(Theme):

建立的网站有很多个Page,每个page即一个网页页面。你可以无限添加,点击图一左侧的Pages,可以进入网页编辑界面,在这里你可以重新编辑之前建立的page,或者添加新的page,或者删除page。编辑完一个页面之后,点击右侧栏中的update按钮即可保存更新。  编辑页面时,在右下角有一个Set featured image ,点击后可以为当前你正在编辑的页面添加一个图片。

假设你建立了10个page,但是这些page如何布局呢,登陆你的网站之后首先会看到那个page,每个page的风格时什么样子的呢,这些都是由网站的主题(Theme)决定的。 在wordPress官网上可以下载很多个不同的主题,不同的主题有不同的风格!例如,虽然你在编辑某个page时为其添加了featured image,但是在某些主题写,这些图片是不予显示的。因此,网站的风格跟主题的相关度很大。

你的网站的主题可以随便切换,但是你已经建立好的各个页面,还有已经写的Post, 添加过的widgets是不会变少的,只是他们的组织方式变了。 对于不同的主题下载之后,需要你对它进行customize,不同的主题可以让你customize的项不一样,例如如果你激活的某个主题不显示图片,那么你customize这个主题的时候就会少一些项目。

图一左侧工具栏介绍:

1)home按钮:点击后,进入的即是图一的DashBoard页面,该页面是一个概览性质的页面吧,而且有一些快捷键,例如可以直接进入customize your site, 编辑添加Page等!

2)Post按钮:进入后,可以查看和管理发布过的post,可以添加新的post.

3)Media: 管理你给网站添加的图片等资源,可以加资源。

4)Comments:管理别人的评论。

5)Apperance -- Theme: 为网站选择主题,可以用你已经下载过的,或者 通过AddNew按钮下载新的哦。

Apperance -- Customize: 该页面下也可以通过change按钮重新选择主题。不同的主题,对应的下图列表不 一样。

其他的点进去即可知道功能。对于menus,可能只有某些主题才有这个选项,其用来控制在网站的最上方和最下方显示什么链接。

Apperance -- Widgets: 左侧显示各个可以被添加的控件,例如日历,视频等。右侧显示你当前的网站可以接受放置Widgets的区域。

 Apperance -- Menus: 控制网站的最上方menu栏(Primary Menu) 和最下方的menu栏(foot Menu)显示的东西。感觉在foot menu中一般显示一些友情链接吧.     界面上Menu structure对应的各个item,就是将要显示的东西,你可以随便添加删除,当然也可以将你自己建立的page,写的某一篇post作为一个item.

Apperance -- Header: 设置网站最上方的Header(显示网站名字,Primary Menu的那一小部分)的背景图片等。

Apperance -- Header:  设置网站的整个背景。

Apperance -- Install Plugins: 安装plugins,具体作用还没有体会到

Apperance -- Editor:  还未知。

6)plugins: easy!

7)users: 账户管理

8)Tools:  里面有导出/导入网站数据的功能!

9)Setting: easy!

Free WordPress Theme 下载:(可以直接谷歌where to download free ...)

https://colorlib.com/wp/free-wordpress-themes/

https://themeforest.net/free/wordpress-themes

下载后,一般为zip格式,直接进入Apperance -- Theme 用upload按键上传zip文件,然后点击install,这是可能会提示The uploaded file exceeds the upload_max_filesize directive in php.ini.  因为你限制了大小,方法:打开php.ini 文件,搜索 upload_max_filesize 和 post_max_size,改一下文件上传最大限制,比如都改为 32M,比你要上传的文件大。如果你用的是xampp建站,直接点击Apach的config按钮,找到php.ini文件。如果不是则自己安找吧,参考:https://www.vpsss.net/2679.html

wordPress设计网页实践的更多相关文章

  1. RESTful API 设计最佳实践

    背景 目前互联网上充斥着大量的关于RESTful API(为了方便,以后API和RESTful API 一个意思)如何设计的文章,然而却没有一个"万能"的设计标准:如何鉴权?API ...

  2. Atitit 词法分析器的设计最佳实践说明attilax总结

    Atitit 词法分析器的设计最佳实践说明attilax总结 1.1. 手写的优点:代码可读,对源代码中的各种错误给出友好的提示信息,用户体验高,1 1.2. 使用状态表比较简单,dfa比较麻烦1 1 ...

  3. atitit.基于http json api 接口设计 最佳实践 总结o7

    atitit.基于http  json  api 接口设计 最佳实践 总结o7 1. 需求:::服务器and android 端接口通讯 2 2. 接口开发的要点 2 2.1. 普通参数 meth,p ...

  4. ****RESTful API 设计最佳实践(APP后端API设计参考典范)

    http://blog.jobbole.com/41233/ 背景 目前互联网上充斥着大量的关于RESTful API(为方便,下文中“RESTful API ”简写为“API”)如何设计的文章,然而 ...

  5. RESTful API 设计最佳实践(转)

    摘要:目前互联网上充斥着大量的关于RESTful API(为了方便,以后API和RESTful API 一个意思)如何设计的文章,然而却没有一个”万能“的设计标准:如何鉴权?API格式如何?你的API ...

  6. RESTful API 设计最佳实践(转)

    背景 目前互联网上充斥着大量的关于RESTful API(为方便,下文中“RESTful API ”简写为“API”)如何设计的文章,然而却没有一个”万能“的设计标准:如何鉴权?API 格式如何?你的 ...

  7. Slickflow.NET 开源工作流引擎基础介绍(六)--模块化架构设计和实践

    前言:在集成Slickflow.NET 引擎组件过程中,引擎组件需要将用户,角色等资源数据读取进来,供引擎内部调用:而企业客户都是有自己的组织架构模型,在引入模块化架构设计后,引擎组件的集成性更加友好 ...

  8. 异步化DAO的设计和实践

    目前,公司技术规划要求未来所有的服务要全面实现异步化接口,使得每个服务能达到1万/秒的单机性能.我们知道,在一个服务请求中,可能会调用其他服务,还会使用memcache.kv以及mysql等.目前,大 ...

  9. loadrunner 场景设计-设计与实践

    场景设计-设计与实践 by:授客 QQ:1033553122 以lr 11.0 自带Web Tours为例,进行以下测试 说明:以下测试仅供演示,学习设计思路 A.确定系统组件 简单B/S架构:Cli ...

随机推荐

  1. Unity与Android之间的交互之AndroidManifest

    https://blog.csdn.net/qq_15003505/article/details/70231975 AndroidManifest,中文名一般称之为清单文件.它描述了应用程序的组件的 ...

  2. zabbix (一) 初识

    1.什么是zabbix? Zabbix由Alexei Vladishev创建,目前由Zabbix SIA积极开发和支持. Zabbix是一种企业级开源分布式监控解决方案. Zabbix是监控底层存储( ...

  3. 【spring源码分析】IOC容器初始化——查漏补缺(五)

    前言:我们知道在Spring中经常使用配置文件的形式对进行属性的赋值,那配置文件的值是怎么赋值到属性上的呢,本文将对其进行分析. 首先了解一个类:PropertySourcesPlaceholderC ...

  4. [Ubuntu] sudo apt-get update指令执行失败

    系统:Ubuntu 16.04 LTS 安装软件前执行 sudo apt-get update 更新,但是提示失败如下: 网上搜索后,因为连接不到 US 的服务器,所以更新失败,需要在系统设置中将源服 ...

  5. Windows使用Latex

    目录 安装Texlive 安装TeXstudio 编写简单的文章 教程 安装Texlive 到清华大学开源软件镜像站下载Texlive2019.iso文件 下载之后,如果有光驱就装载,没有的话就解压. ...

  6. 【译】Solr in Action 第二章

    2.1 2.2 2.3 基本废话 2.4 基本废话

  7. nodejs取参四种方法 req.body, req.params, req.param, req.body

    获取请求很中的参数是每个web后台处理的必经之路,nodejs的 express框架 提供了四种方法来实现. req.body req.query req.params req.param() 首先介 ...

  8. pgpool 的配置文件详解

    listen_addresses = 'localhost' # Host name or IP address to listen on: # '*' for all, '' for no TCP/ ...

  9. http-proxy-middleware及express实现反向代理

    $ npm install --save-dev http-proxy-middleware npm install express // 引用依赖 var express = require('ex ...

  10. Docs-.NET-C#-指南-语言参考-预处理器指令:#line(C# 参考)

    ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:#line(C# 参考) 1.返回顶部 1. #line(C# 参考) 2015/07/20 借助 #line,可修改编译器的行 ...