wordpress服务器安装与响应式网站配置

一、通过使用Dokcer在linux上快速安装Wordpress

1.安装Docker及docker-compose

使用官方安装脚本安装

curl -sSL https://get.docker.com/ | sh

版本查询

docker –v

启动 Docker 引擎

systemctl enable docker

systemctl start docker

2.安装Docker-compose

1)首先安装epel扩展源:

sudo yum -y install epel-release

2)然后安装python-pip

sudo yum -y install python-pip

pip install docker-compose

3)版本查询

docker-compose –v

3.建立一个stack.yml文件,并保存

vim stack.yml

写入如下内容并保存:

version: ‘3.1‘

services:

  wordpress:
    image: wordpress
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_PASSWORD: example

  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: example

其中:

- 8080:80          #wordpress容器的端口80映射给物理服务器的8080端口,可以把8080改成80
 
WORDPRESS_DB_PASSWORD: example  #mysql中wordpress数据库的访问密码,生产环境中需要修改,可以

MYSQL_ROOT_PASSWORD: example #mysql数据库的root访问密码,生产环境中需要修改

4.运行docker-compose下载镜像并运行容器。

docker-compose -f stack.yml up

OK,网站建立好了,可以登陆进行管理了:http://192.168.2.18/wp-admin/(安装CentOS的服务器IP:192.168.2.18)

网站正式访问页面:http://192.168.2.18/

二、网站初始化

1、登录访问

2、一些常规设置

下面还有日期、时间格式及语言设置,最后别忘记“保存更改”。

设置类下的其它设置可以根据自己网站需要设定。

3、添加并应用主题

查找自己需要的主题并启用

如果启用了主题,但Demo网站的首页没有出来,需要在主题》自定义》静态首页》设置首页显示:一个静态页面,并选择一个页面为首页

4、建立顶部及底部菜单

先加几个页面做导航菜单,等后面内容丰富了再改。

4.1建立自定义菜单,自定义一个URL跳转菜单或首页页面定位菜单

需要在页面编辑中标记core

把定义好的菜单放在页面的对应位置中,有的主题可能只能Primary Menu.

5、安装必要插件(联系表单,缓存、可视页面编辑、轮播图制作插件,如果上传插件时提示文件不能上传,参考最后面解决方案)

WP Acceleration for China这个插件可以在系统中搜索出来并安装,可以加快整个网站的编辑及访问速度。

6、新建页面,用于构建网站内容

6.1使用Visual Composer来编辑页面

可以增加的各种元素

可以根据需要自定义分栏的数量

7、根据整个网站的风格调整主题的设置(使用不同的主题,其主题设置也不完全一样,一般在外观中有专项设置,或者在主题的自定义中设置)

上图可以设置网站主题的导航栏、页脚、颜色、背景、字体等各种参数,下图可以在自定义中设置主题的各个参数。

8、使用Slider Revolution制作轮播图

8.1新建滑块

8.2 设置内容来源、标题、类型、布局等

保存后自动进入编辑幻灯片

第做一个页面都要单独去保存一次,不然会没有了,最后还要在页面中插入这个轮播图

差不多,经过这一序列的操作,一个网站就搭建好了,它可以自带管理后台,比自己开发方便多了,而且它有很多主题和插件,什么企业网站、电商网站等等都有。

备用功能:

一、wordpress网站备件、迁移

其主要文件夹如下,可以直接使用第三方工具备份这三个文件夹

主题文件位置:网站根目录\wp-content\themes\你的主题文件夹

插件文件位置: 网站根目录\wp-content\plugins\

附件位置: 网站根目录\wp-content\uploads\

二、也可以使用wordpress插件来完成:

1、导出网站的所有内容(不包含网站图片、音频、视频多媒体文件),用于备份或者迁移服务器,当然MYSQL数据库需要另外备份。

2、导出多媒体文件

安装插件“File Manager”,在其面板中导出wordpress/wp-content/uploads整个文件夹

导入时同样使用此方法,但若是迁移到新环境中,需要使用“Add From Server” 插件将这些原来的图片导入进媒体库,让图片归属 WordPress “管辖”。

(如果搜索不到,可以直接到官网下载:https://wordpress.org/plugins/add-from-server/,然后再到插件中安装插件,手动安装)

在下图中指定已经导入的uploads文件中的图片,把它们导入到媒体库。

恢复导入所有文件

安装好后就可以进行直接导入备份了。

三、解决本地上传插件最大不能超过2M的问题(这个问题的主要原因是默认php.ini文件中限制最大上传文件为2M,但默认情况下又没有这个问题,所以解决思路是:新建info.php文件在浏览器中执行》找php.ini存放位置》新建php.ini文件》写入最大允许限制设置

1、首先在Docker容器中网站根目录下建一个info.php文件,操作如下:

docker-compose exec wordpress bash   (进入docker容器执行命令)

cd /var/www/html

touch info.php

echo "<?php    echo    phpinfo();   ?>"  >info.php

打开浏览器运行这个文件,找出php.ini文件存放位置

2、新建php.ini文件并写入最大上传文件限制为64M。

cd /usr/local/etc/php

touch php.ini

echo "upload_max_filesize = 64M" >php.ini    (修改最大上传文件为64M)

echo "post_max_size = 64M" >>php.ini    (修改文章最大尺寸为64M)

echo "max_execution_time = 300" >>php.ini    (修改最大执行时间为300,即页面等待时间)

exit   (退出容器)

docker-compose restart   (重启容器)

最后可以正常上传2M以上64M以下的插件了。

四、关于wordpress用户网站打开极度缓慢,或者轮播图很久不出来问题(实测非常有效)

1、通过wordpress中安装插件去搜索WP Acceleration for China插件

2、在wordpress插件》安装插件中安装,最后启用插件。

时间: 2024-10-18 19:50:55

wordpress服务器安装与响应式网站配置的相关文章

响应式网站技巧

1 – 布局 当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局.我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小.如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码.这种操作方式更容易实现响应式特性,在同一时间专注于一个任务. 当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到<head>和</head>标签之间.这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智

使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading"> <div class="col-md-12"> <h2>更多信息</h2> <p class="lead"> 广州恒大淘宝队的官方网站和微博同时发布了几张海报,预热本周三晚8点即将到来的亚冠1/4决赛第二回

如何制作响应式网站?12个优秀案例参考

响应的网页设计方法让你的网站对移动设备更加友好.网站开发者们采用最新的 HTML5 和 CSS3 技术以及最新的编码标准来制作响应式网站.响应式设计使网页设计更加强大,更具互动性和更美观.响应网站的设计有许多特色,使开发人员和设计人员能够创建速度快,性能优越的应用程序和网站,并适合于所有设备. 您可能感兴趣的相关文章 15款帮助创建响应式布局的优秀前端框架 经典网页设计:无缝过渡的响应式设计案例 让你的网站瞬间变成响应式的3个简单步骤 经典网页设计:响应式设计的国外购物网站 推荐35个新鲜出炉的

响应式网站设计原则

在QA TechWeek 2014期间,QA公司首席技术专家David Walker在使用Foundation进行响应式设计的会议上,提出了响应式网站设计的原则.Walker提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动操作系统开发一个应用:嵌入式HTML 5,使用PhoneGap或者类似的工具:在服务端过滤,分别为桌面和移动设备建立网站,在两者间进行重定向. 分析完每种方法的优缺点后,Walker提出了响应式设计(RWD),使用HTML 5.JavaScript和CSS创建

做响应式网站前期必会知识点-1前期准备

媒体查询 1.媒体类型 @media screen and (max-width: 300px) { body { background-color:lightblue; } } 其中media后面的那个单词是媒体类型 all所有媒体类型(默认,可以不写),screen屏幕,这两个是最常用的. 2.逻辑操作符 媒体查询的意思就是后面这个逻辑表达式为真,里面的css起作用. 中间and是逻辑操作符 and 与      都为真才真 or或逗号   有一个真就为真 not 非       not的有

响应式网站与自适应网站比较

Adaptive website(自适应网站)            应对在浏览器的宽度变化不调整网页元素的位置,缩放网页元素,以适应在可用空间. Responsive website (响应式网站)        应对在浏览器的宽度变化通过调整网页元素的位置,以适应在可用空间. PS:真不知道为什么很多人都把自适应网站与响应式网站混为一谈.(自适应网站=响应式网站) 开发难度比较 自适应网站开发起来比较既复杂(不同屏幕的适配控制)又简单(独立于PC端),但是容易维护与调试(只有移动端的处理事件

创建响应式网站

    创建响应式网站 1,创建可伸缩图像 .photo{max-width:100%;} max-width:100%图像可伸缩,但是大小不会超过本来设定的大小: width:100%,图像也可伸缩,但是如果容器比图像大,图像就会被拉大会变丑. 2,创建弹性布局 .page{max-width:960px;} 布局可以缩放,但是总体大小不会大于960px: 3,媒体查询 可包含在媒体查询里的媒体特性: width,height,device-width,device-height,orient

【Web探索之旅】第二部分第五课:响应式网站和移动应用

内容简介 1.第二部分第五课:响应式网站和移动应用 2.第三部分第一课预告:服务器 第二部分第五课:响应式网站和移动应用 在我们开始聊响应式网站之前,我们可以聊聊移动App(App是Application的缩写,意为"应用"). 自从触屏式手机和平板电脑开始流行起来后(多亏乔布斯乔老爷子推广了iPhone),传统的网站和软件行业发生了翻天覆地的变化.以前,我们用手机最多是打电话,发短信,玩游戏,很难得会在手机上浏览网页. 可是自从触屏技术开始流行后,大大提高了人们在手机和平板上&quo

开发时间缩短90% Amaze UI助H5梦工场响应式网站快速上线

近日,HTML5梦工场使用云适配开源HTML5跨屏前端框架AmazeUI对自身网站进行了重新开发.开发完成的新网站,用户无论通过任何终端访问,网站内容都能保持实时同步,并能以最佳的展现方式呈现出来.   H5梦工场官网在PC和移动端的展示   HTML5梦工场是中国最有影响力的技术社区团队,由国内最早一批HTML5探索者和狂热拥护者发起,为广大开发者搭建一个开放.自由的互动交流平台,旨在推动HTML5在中国的应用与普及.目前,旗下的品牌活动已覆盖了近10万互联网和移动互联网行业的从业者和爱好者.