wordpress收藏插件-Wordpress教程-爱模板网

wordpress收藏插件

2024-04-24 14:42:40

除了土豆，还有什么东西是不会做菜的人做出来都不会太难吃的?

首选广东芋头哦！！！

学网页设计有前途吗?

那要非方便面莫属了！哈哈，统一的调料，统一的味道！就是小朋友泡出来也和方便面馆做出来是一样的味道，那你知道为什么都说方便面是垃圾食品吗？

图文教程 WordPress 基本功能使用

通用内容：控制内容的展示，帮助模块.

仪表盘：Welcome，概述，快速草稿，活动，WordPress 活动与新闻，调整仪表盘的布局.

文章管理：新建文章，页面布局调整，新建文章.

分类目录：标签，页面管理，新建页面.

多媒体资源管理：上传文件，管理文件。

友情链接管理：评论管理，主题管理，插件管理，用户管理，用户列表，新建用户，修改用户身份。

课程实践目标：掌握 WordPress 的使用。

通用内容

控制内容的展示

每个页面都可以单击右上角的显示选项来控制页面显示什么内容，方便调整自己的页面布局，符合自己的写作习惯。

帮助模块

WordPress 每个页面都有一个帮助模块，在帮助模块中，可以看到当前页面的具体帮助内容，假如不知道当前页面怎么用，除了在达人课的读者圈中提问，也可以单击上方的“帮助”按钮来寻找答案。

仪表盘

仪表盘是我们登录 WordPress 后台后首先会看到的内容。

Welcome

Welcome 是新用户引导，单击“不再显示”链接后，下次就不会再出现。

如果后面还想看，可以单击右上角的“显示”选项：

勾选其中的 Welcome 复选框，这个界面就会出现了。

概述

概述里展示了我们博客的最基础的几个数据：博客文章数、博客评论数、单页数目、当前版本和当前使用的主题。

单击其中的超链接，就会跳转到对应的列表。例如，单击“1篇文章”链接，就会跳转到文章列表，可以对文章进行管理。

快速草稿

快速草稿可以帮助我们在仪表盘记录心中的所念所想，而无需加载完整的 WordPress 编辑器来编辑格式。当有一些小的灵感时，可以在这里快速的输入、并保存，后续再完善，以免忘记了这个想法。

活动

在这里会显示博客的最新动向，比如最近发布的文章、最近游客留下的评论等等。

WordPress 活动与新闻

这个栏目展示了 WordPress 官方的一些新闻和活动，不过对于我们大多数人来说都没有任何用。所以这个选项一般都是隐藏的。

单击右侧的“小三角”按钮，就可以收缩 tab 了：

不过，用户也可以单击页面右上角的显示选项，取消该选项的勾选即可。

调整仪表盘的布局

仪表盘的每个元素都是可以调整位置的，当将鼠标的光标移动到标题时，等待其变为移动符号时，拖动区块即可移动。

文章管理

新建文章

文章是 WordPress 的最基本的单位，我们可以通过两种方式进入新建文章的页面，一个是通过菜单栏中的“文章——新建文章”进入：

或者通过顶部的快捷菜单进入。

页面布局调整

进入到新建文章页面后，会看到很多项目：

在使用前，建议读者先调整这个页面的布局，调整为符合你自己习惯的布局。

单击上方的显示选项按钮，可以看到具体显示哪些模块，是否切换为单栏布局。

一般来说，推荐显示形式（需要主题支持）、分类目录、标签、特色图片（特色图片）、摘要。

我的布局如下，仅供参考：

其他内容可以根据自己的具体情况来设置。

下方的全高度编辑器其实是“全屏”功能，影响不到，主要是手动开启的。而后面的免打扰功能开启后，会在读者进行写作时进入免打扰模式，隐藏左侧的菜单和右侧的发布等连接。

新建文章

标题栏

页面中的元素非常简单，上方的标题栏填写我们设置的文章标题。

固定链接

下方的固定链接则可以编辑，设置我们文章的链接名。如果你有自己的文章风格，不希望其为你生成默认的中文链接名，可以在这里手动设置。

添加媒体

WordPress 为我们提供了非常完善的多媒体资源管理能力。单击“添加媒体”按钮，就可以上传要添加的图片了。

你可以上传新的图片，或者使用媒体库中的图片，

上传后，选中你要插入的图片（支持选中多个）。单击“插入”按钮即可插入图片到文章。

在插入前可以设置图片的说明和替代文本，说明将会设置为 caption 标签。而替代文本则会设置为 alt 属性。

下方编辑器也非常好用，可以直接单击下方的按钮，选择对应的样式设置。

下方的摘要则会影响到文章列表和 RSS 列表的内容输出，你可以认真写一写摘要，并借此提高读者的打开率。

有的主题会支持不同形式的主题，可以设置不同形式的主题，以使用主题针对特定形式的设定。

有些主题还支持自定义栏目，还可以根据主题说明设置对应的自定义栏目。

分类目录

单击左侧菜单栏中的“文章——分类目录”按钮，可以进入到分类目录的设置页面。

可以新建一个分类目录。分类目录支持多级，这样可以很方便的分类文章。

右侧则是分类目录的列表，可以单击编辑进入详细编辑页面编辑，也可以单击快速编辑修改分类名和分类别名。单击“查看”按钮，则会进入到前台的目录页面。

标签

除了分类目录，我们还可以通过标签对文章进行管理，标签的操作逻辑和分类目录基本一致，唯一不同的是标签不支持多级分类。

页面管理

页面部分比较简单，很多基础操作和文章管理是一致的，就不在赘述相同的部分了，这里只讲一下主要的不同点。

新建页面

新建页面中大体上和新建文章没有区别这里只说不同点，便是页面属性。

页面没有目录，但是可以设置页面的上级页面，通过一个主页面和若干子页面来管理内容，可以帮助我们更好的整理内容。

模板则是 WordPress 一个非常有用的功能。很多时候，我们需要的功能不止是新闻的展示，可能是一些其他的功能，如展示友情链接、展示日历、展示消息通知等等。

通过选择不同的模板，就可以实现不同功能页面的加载。

此功能需要主题的支持，后续主题开发课也会加入这部分内容。

多媒体资源管理

上传文件

多媒体资源的上传有两种方式，一种是通过新增文章、页面时上传，另一种是通过媒体库进行上传。

单击媒体 | 添加命令，可以看到上传的界面，选择要上传的内容就会自动上传了。你也可以把要上传的内容拖动到上传区域来进行上传。

管理文件

单击媒体 | 媒体库命令，会进入媒体库，可以在媒体库中管理附件：

单击“附件”按钮，可以进入到附件的编辑页面进行管理：

可以为附件设置具体的信息，如果你的主题中有附件页，就可以看到具体的信息：

此外，我们还可以编辑图片，对图片进行简单的处理，在附件的编辑页面单击“编辑图像”按钮。

WordPress 支持对图片进行裁剪、旋转、镜像等功能。（我这里因为是gif，所以裁剪是灰的。）

编辑完成后，单击右侧的“更新”按钮即可将图片进行更新。

友情链接管理

在最新版本的 WordPress 中默认没有开启这个功能，不过可以通过安装 Link Manager 插件来开启这个功能。

单击左侧边栏的链接管理，可以进入到链接管理的界面。

首先，我们可以根据需要，创建链接所属目录，创建方式和创建文章目录相同，单击链接分类目录，进入到管理页面。

创建完成目录后，我们可以创建具体的链接，单击左侧菜单栏中的添加按钮，进入到添加链接的页面。

必要设置包括名称和 Web 地址，将要添加的网站的名称和 Web 地址填入其中，即可添加链接了。

不过下方有很多其他的设置也值得知道。

在下方应该会注意到有个 XFN（XML Friends NetWork），通过 XFN 可以表明这个链接和你的远近亲疏关系，还是很有意思的。不过目前国内并没有针对此进行优化。

此外，如果你觉得文字链接不好看，还可以选择使用图片链接，上传图片、设置备注、设置 RSS 地址等。

如果希望链接展示在前台，可以前往外观 | 小工具中添加。

你可以在可视区域中添加一个链接小工具，并设置要显示的链接和具体的类型。

评论管理

单击左侧的评论管理按钮，会进入到评论管理的页面。

评论默认有四种状态，待审核、已批准、垃圾评论和回收站评论。

所有未被确认为垃圾评论，但又从未留言过的评论都会放在待审核列表中（取决于在评论设置中的设置）。

可以在列表中修改一个评论的状态、回复、甚至是编辑它。

也可以单击后面的按钮，查看同一篇文章的其他评论。

可以批量选择评论，并对他们进行处理。

上述就是我们常用的评论的操作。

此外，记得时常去清理下回收站，让数据库更干净。

主题管理

此部分会在后续的主题开发中进行讲解。

插件管理

此部分会在后续的插件开发中进行讲解。

用户管理

用户管理这里大体上和我们后面要讲的个人信息设置相同，具体的细节操作我不再重复，可以到第4课看 WordPress 的基本设置。

用户列表

点击左侧边栏、用户——所有用户，我们可以看到目前博客的所有注册用户、以及其所有文章。

除了自己这个用户无法删除外，你可以删除其他用户。

新建用户

单击左侧边栏 | 用户 | 添加用户命令，我们可以新建一个 WordPress 用户。

基本属性直接填写即可，这里关注一下密码和角色。

默认情况下， WordPress 会为用户生成一个极为复杂的密码，如果希望自己帮用户指定密码的话，可以单击“显示密码”按钮，在弹出的密码框中输入密码。

CSS 浮动布局实例

其实文章原名叫做 “碰到不支持 flex 的项目怎么办？”

现在差不多已经是 flex 的天下了，简单灵活，但有时还是不可避免地会接触到 IE 浏览器，比如我最近接触的阅文作家专区 (qq.com)[1]，这个就是需要兼容 IE9，也自然不能使用 flex 布局了。不能使用 flex 怎么办（这个项目怎么这么XX，都 2021 年了还要兼容 IE）？那只能回归传统布局方式了，也就是浮动布局。

浮动 float 可以说是 CSS 布局里最为灵活的布局之一了，千万不要小瞧了浮动，有些布局只有浮动才能实现呢。下面将介绍几种常见的布局，一起看看吧

一、文本环绕布局

这类布局应该就是浮动最初的用意了，比如这样的

设置一个左浮动就可以了，实现如下

<div> <strong class="float">浮</strong> <p>动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p></div>

.float{ float: left; /*其他样式*/}

完整代码可访问 float-layout (codepen.io)[2]

需要注意的是，浮动元素必须放在文本的前面（ HTML 结构），如果放在文本后面

<div> <p>动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p> <strong class="float">浮</strong></div>

那么就会变成这样

也就是说，浮动的影响范围是由浮动元素在 HTML 中的结构决定的，这一点非常重要

不过，现在很少会见到这种环绕布局了，但有些时候这种思路还是挺有用的，比如在这篇文章 CSS 实现多行文本“展开收起” (juejin.cn)[3]，里面就用到了浮动的特性，实现了右下角文本环绕的效果，有兴趣的可以看看

二、两栏布局

两栏布局的特点是左边是固定尺寸，右边自动撑满剩余空间，例如

结构如下

<div class="crad"> <img class="head" src="xxx.jpg"> <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p></div>

浮动实现如下，主要是文本需要设置 overflow: hidden 。这里就不谈实现原理（BFC）了，有兴趣深究的可以查看这篇文章 CSS深入理解流体特性和BFC特性下多栏自适应布局[4]

.head{ float: left;}.info{ overflow: hidden;}

如果右边是固定尺寸，比如这样的

这种情况如何处理呢？很多人可能会想到右浮动，没错，但是要注意，HTML 结构不需要改动，也就是浮动元素仍然在文本的前面

.head{ float: right;}

值得注意的是，如果需要设置两栏的间距 margin，需要设置在浮动元素上

.head{ float: left; margin-right: 8px;}

完整代码可访问 float-2-cols[5]

三、三栏布局

三栏布局的特点是左右是固定尺寸，中间自动撑满剩余空间，例如

结构如下

<div> <img class="head" src="xxx.jpg"> <div class="right">编辑</div> <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p></div>

注意，这里位于右侧的按钮在 HTML 结构中仍然是在文本的前方，只需要设置右浮动就行了

.head{ float: left;}.info{ overflow: hidden;}.right{ float: right; margin-left: 8px; /*其他样式*/}

完整代码可访问 float-3-cols (codepen.io)[6]

四、文本省略跟随布局

还有一类比较常见但是有些棘手的布局，是这样的

1.当文本比较多时，超出隐藏，标签文本在最右边2.当文本比较少时，标签文本跟随文本

示意如下

这里如何使用浮动实现呢？仔细观察，其实就是一个两栏布局

<div class="card"> <div class="right">编辑</div> <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</p></div>

.info{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

很明显现在标签文本一直位于右边，那如何实现标签文本跟随的效果呢？其实可以嵌套一个最大宽度为 100% 的容器

<div class="card"> <div class="wrap">  <div class="right">标签</div> <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</p> </div></div>

.wrap{ display: inline-block; max-width: 100%;}

完整代码可访问 float-auto-text (codepen.io)[7]

如果不考虑兼容的话，width: fit-content 会是更好的选择，可以使容器保持 block 的特性，并且宽度由文本内容决定，详细可以参考这篇文章：理解CSS3 max/min-content及fit-content等width值 [8]

.wrap{ /*display: inline-block;*/ max-width: 100%; width: fit-content;}

另外，如果多行文本就不适用了，可以用另一种方式实现，详细原理可以查看这篇文章 CSS 实现多行文本“展开收起” (juejin.cn)[9]

完整代码可访问float-mul-tags (codepen.io)[10]

五、其他扩展布局

这一部分相当于以上的扩展了，下面来看一个案例。

有时候标签的后面会有日期，会一直位于最右边，效果如下

有人可能会想到绝对定位，但是这里的日期可能不是固定的，需要自适应宽度，那如何实现呢？其实就是就是两种布局的结合

因此需要再添加一层容器，实现如下

<div class="card"> <span class="date">6-14</span> <div class="outer-wrap">  <div class="wrap"> <div class="right"> <button class="btn">标签</button> </div> <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</p> </div> </div></div>

下面就是两栏布局的写法

.date{ float: right;}.outer-wrap{ overflow: hidden;}

提示：如果采用 fit-content 方式，可以省去 .outer-wrap 这一层容器

实时效果如下

完整代码可访问 float-auto-text-fixed (codepen.io)[11]

六、总结和说明

上面介绍了浮动布局的几个常用案例，相信能适用于绝大部分布局，当然并不是推荐大家一定要使用浮动布局，甚至有时候布局混乱（HTML结构与视觉不一致）、实现啰嗦（嵌套层级多）等情况，但是在不兼容 flex 布局的浏览器中还是挺有用的（低于IE10），甚至还有仅仅只能使用浮动才能实现的布局（文本环绕）。这里总结如下

1.通过 BFC 实现自适应弹性布局，float + overflow2.浮动的影响范围是由浮动元素在 HTML 中的结构决定的3.通过设置最大宽度实现文本跟随效果（fit-content也可以）4.其他布局可相互组合实现5.另外这些 float 实现方式全兼容（IE6+），可以放心使用

随着 IE 地逐渐退去，有些布局也会慢慢地淡出，就像早年的 table 布局一样。但浮动布局一直在往新特性上发展，比如 Shapes 布局[12]就需要浮动做支持，另外，浮动布局也在慢慢支持逻辑属性，比如 float: inline-start 。最后，CSS 最重要的是灵活性，多一种思路总是没错的。如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发???

References

[1] 阅文作家专区 (qq.com):
[2] float-layout (codepen.io):
[3] CSS 实现多行文本“展开收起” (juejin.cn):
[4] CSS深入理解流体特性和BFC特性下多栏自适应布局:
[5] float-2-cols:
[6] float-3-cols (codepen.io):
[7] float-auto-text (codepen.io):
[8] 理解CSS3 max/min-content及fit-content等width值 :
[9] CSS 实现多行文本“展开收起” (juejin.cn):
[10] float-mul-tags (codepen.io):
[11] float-auto-text-fixed (codepen.io):
[12] Shapes 布局: