wordpress如何加入超链接(wordpress链接插件)

在WordPress这个强大的内容管理系统中,超链接是一个非常重要的功能。它可以帮助我们链接到其他网页,丰富我们的内容,提高用户体验。今天,我就来为大家详细讲解一下WordPress如何加入超链接,让大家从入门到精通。

一、什么是超链接

我们先来了解一下什么是超链接。超链接,顾名思义,就是指链接到其他网页或资源的链接。在WordPress中,超链接可以链接到其他文章、外部网页、图片等。

二、WordPress中添加超链接的几种方式

在WordPress中,添加超链接主要有以下几种方式:

1. 使用文本编辑器

这是最常见的一种方式。以下是具体步骤:

步骤一:在文章或页面编辑器中,将光标定位到需要添加超链接的文本上。

步骤二:点击“文本编辑器”上的“插入/编辑链接”按钮(通常是一个链条的图标)。

步骤三:在弹出的“插入链接”窗口中,输入链接地址,例如:http://www.example.com。

步骤四:点击“添加链接”按钮。

步骤五:如果需要,可以在“链接目标”中选择在新窗口中打开链接。

2. 使用快捷键

WordPress还支持使用快捷键来添加超链接。以下是快捷键的设置方法:

步骤一:在文章或页面编辑器中,将光标定位到需要添加超链接的文本上。

步骤二:按下“Ctrl + K”(Windows系统)或“Command + K”(Mac系统)。

步骤三:在弹出的“插入链接”窗口中,输入链接地址,例如:http://www.example.com。

步骤四:点击“添加链接”按钮。

3. 使用插件

除了以上两种方式,WordPress还有许多插件可以帮助我们添加超链接。以下是一些常用的插件:

插件名称 功能
YoastSEO 优化文章,自动添加相关链接
BrokenLinkChecker 检查文章中的坏链接
PrettyLinkPro 简化链接,提高用户体验

三、如何设置超链接样式

在WordPress中,我们可以设置超链接的样式,使其更加美观。以下是设置超链接样式的步骤:

步骤一:进入WordPress后台,点击“外观”>“编辑器”。

步骤二:找到并打开“style.css”文件。

步骤三:在“style.css”文件中,找到以下代码:

“`css

a {

text-decoration: none;

color: 333;

}

“`

步骤四:修改代码,设置超链接样式。例如,将“color: 333;”改为“color: ff0000;”,即可将超链接颜色设置为红色。

四、如何检查超链接的有效性

在发布文章或页面之前,我们需要检查超链接的有效性,以确保用户可以正常访问链接到的页面。以下是检查超链接有效性的方法:

1. 手动检查

最简单的方法是手动点击每个超链接,检查是否能够正常访问。

2. 使用插件

一些插件可以帮助我们自动检查超链接的有效性。例如,Broken Link Checker插件就可以自动检查文章中的坏链接,并在后台提醒我们。

五、总结

以上就是WordPress如何加入超链接的详细讲解。通过本文,相信大家对WordPress超链接的添加、设置和检查有了更深入的了解。希望这篇文章能对大家有所帮助!

如何在github上搭建个人博客

一、为什么在GitHub上托管个人博客

为什么在GitHub上托管博客,这个问题可以分两步来问:

首先,为什么可以在GitHub上托管博客?

GitHub是一个基于git的版本托管服务网站,上面聚集着几乎全世界的程序大牛,还有着大量的牛逼开源项目。而项目一旦成长壮大,一个简单的名称和一段描述很可能就无法满足作者与读者的需要。此时,GitHub Pages就应运而生,它允许用户用更具描述性的自定义页面代替源码列表。同时,用户也可以利用其作为个人或组织主页,将静态网页托管其上。

那么,在有着WordPress等等大量的开源博客系统的情况下,为什么选择在GitHub上托管博客呢?

对程序猿来说无比亲切,光是看起来感觉就很牛逼的”Git驱动式博客开发与发布流程”。

超级容易,5分钟包学包会的发布方式。

静态页面,建立简单,几乎没有安全性隐患,当然这也是缺点之一,静态页面无法做到太过复杂的交互设计和网站结构。不过作为一个简单的个人博客,也不太会有这样的需求

免费而可靠

更加详细的内容可以参见这里 todo: Jekyll+ GitHub Pages的优点与缺点

话不多说,现在就来试试看。

<p id=”002″></p>

二、10分钟快速搭建一个博客原型

首先确认:

拥有一个GitHub账号

已经安装 Git,(在Windows下,个人推荐直接安装 GitExtensions,有中文界面,并且集成了git+ putty+ kDiff,比较省心一点啦)

1.建立一个项目

先在GitHub创建一个项目,名字随意,尽量全部小写字母,避免随后会碰到的URL冲突问题

本地运行Git,随意选个目录,将刚才创建的项目clone下来

<!– lang: bash–>

cd/d/

git clone

cd blogdemo

<br/>

<br/>

2.建立配置文件_config.yml

注意:之后建立的所有文档务必使用UTF-8无 BOM的编码保存

在项目的根目录下新建文件 _config.yml,填写 baseurl:/blogdemo, blogdemo是你的项目名称,这一行内容规定了整个网站的根路径,稍后会详细解释这样做的意义。

<br/>

<br/>

3.建立主页

在根目录下新建文件 index.html,内容像这样:

<!– lang: html–>

title: Hello, My Blog

{{ page.title}}

先不用急着奇怪为什么一个html文件会出现”{}”这样的标签,这里使用的是 Liquid模板语言,{{ page.title}}表示“本页面的标题”,更详细的介绍我们以后再讲,不妨这样理解:

<!– lang: python–>

#— begin of page's head

title=”Hello, My Blog”

#— end of page's head

print(page.title)

OK,那么博客主页设计完毕!(别吵…我答应过你要10分钟内搭建完成的…先弄个毛胚房意思意思,美化啊功能啊什么的晚点再说)

<br/>

<br/>

4.发布到GitHub

回到git bash,检查一下 git status,确认 _config.yml与 index.html无误后 add,commit,保持使用Git的良好习惯,记得添加提交描述

然后推送到GitHub,这里注意,因为我们使用的是GitHub Pages中的 Project Pages, GitHub仅会将分支 gh-pages下的内容进行自动生成操作,所以本地的 master分支应推送到远端的 gh-pages分支

<!– lang: bash–>

git push origin master:gh-pages

稍微等待一下,最多10分钟(通常不用那么久啦),访问 yourname.github.com/blogdemo

,(其中 yourname

是你的GitHub帐户名,blogdemo则是你的项目名)就会看见你的博客主页(确实很丑…而且完全不像一个博客的样子,不过别急,慢慢来比较

快~)

另外,如果不幸发现你的中文页面出现了乱码的情况,别着急,还是该死的UTF-8问题,后面我们会一劳永逸的解决他的,暂时先手动调整一下浏览器的编码。

<br/>

<br/>

5.在_posts内撰写文章,并在首页加入文章列表

在这段时间里,我们继续为你的博客添砖加瓦,让他拥有最基本的文章阅读功能,另外不断F5页面的同时也可以关注一下自己在GitHub注册时所用的邮箱,如果之前推送的内容有误的话,GitHub将以邮件形式提醒你生成失败。

回到项目根目录, mkdir _posts新建一个目录,看名字也知道啦,这里存放你所有的文章。

进入_posts目录,新建一篇文章。注意默认的文件名格式是 year-month-day-postTitle这样。比如 2013-03-23-my_first_article.md,尽量避免空格或者其他乱七八糟的字符,这个文件名将作为URL的生成依据。文件名的格式可以通过修改 _config.yml中的 permalink属性而改变,默认值为 date,也就是我们刚刚创建的文件的样子,具体的规则可以看这里,后面我们也会讲到。

如果你发现了我刚才创建的文件后缀名是.md,熟悉GitHub或者StackOverFlow的朋友应该知道Markdown格式,推荐使用GitHub托管博客的原因之一也正是如此,我们可以在大部分时候避开恼人的HTML,转而使用更加直观的Markdown语法。如果不熟悉也没关系,可以参见这份Markdown语法说明,应该说是相当易学,并且在熟悉之后非常易用的。

回到主题,打开刚才创建的文件,输入如下内容:

<!– lang: html–>

title:我的第一篇文章

#{{ page.title}}

##目录

+ [第一部分](#partI)

+ [第二部分](#partII)

+ [第三部分](#partIII)

———————————-

##第一部分<p id=”partI”></p>

这里是第一部分的内容

———————————-

##第二部分<p id=”partII”></p>

这里是第二部分的内容

———————————-

##第三部分<p id=”partIII”></p>

这里是第三部分的内容

{{ page.date|date_to_string}}

这段内容中使用了最常用的几种Markdown语法,比如使用#,##表示 HTML中的<h1></h1>,<h2></h2>。使用[text](link)创建超链接,使用连续多个-创建水平线(注意:不包括最上端包围title所使用的横线,那里表示一个页面的“头属性”),等等。更多详细的语法可以在之前提到的页面查询,这里不再赘述,总之,这是一种更加贴近真实写作的语法,推荐大家尝试。

啊对了,最后面的那个{{ page.date|date_to_string}}是指显示本页的日期属性,并且转换为可读的字符串形式。同样也是Liquid语法。

OK,那么第一篇文章也写好了,再把最新的repo推送到github,稍等片刻,就可以…等下,忘记给文章加上入口的链接了。

Sorry啦,重新打开我们的 index.html文件,添加内容,变成下面这样:

<!– lang: html–>

title: My Blog

{{ page.title}}

{% for post in site.posts%}

{{ post.date|date_to_string}}<a href='{{ site.baseurl}}{{ post.url}}'>{{ post.title}}</a>

{% endfor%}

唔…都是Liquid的内容,简单解释一下,Liquid标记最主要分为两种,一种是直接输出变量内容,像这样:

{{ page.title}}

另一种则是逻辑命令形式的,像这样:

{% for x in y%}…{% endfor%}

而刚才写进主页的内容,就是遍历所有post文件,然后逐一显示在页面上,这里需要注意的一点就是在创建文章的超链接时,除了 post.url之外,也要注意在前面加上site.url

,原因前面也有提到过,我们正在创建的是 Project Pages

类型的网站,其最终生成的网址根目录是:username.github.com/projectname,而 post.url

生成的超链接仅仅会自动加上 username.github.com/这样的前缀。

现在检查一下更改的所有内容,确认不要犯下愚蠢的错误,比如把”.”打成”。”或者单词拼错之类的,提交并推送!

当当!如果一切顺利,就能看到你的首页外加文章列表闪亮登场。

<br/>

<br/>

6.增加模板套装_layouts

文章进行到这里,或许开头承诺的10分钟已经超过不少了…很抱歉我欺骗了你,不过至少我们进展很快~接下来——如果你仍有兴趣的话,让我们为网站增加一些统一性的风格设置。

回到项目根目录,新建文件夹 _layouts,顾名思义,“布局”是也。在 _layouts中新建一个最基本的布局文件,姑且命名为default.html好了:

<!– lang: html–>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

<title>{{ page.title}}</title>

</head>

<body>

{{ content}}

</body>

</html>

诺,首先解决了UTF-8的编码问题,随后指定了正文内容的位置,当然在这里只是一个最简单的内容,在body内仅有一个{{ content}}标签,你可以根据自己的喜好对页面进行任何改动,只要记得保留这个内容标签在你想要的位置就好。

然后我们修改index.html和刚写完的那篇文章,只要在头属性上加一句就好:

<!– lang: html–>

title: xxoo

layout: default.html

我们当然还可以把这个结构变得更灵活一些,比如继续新增两个模板分别叫做l_post.html与

l_index.html,他们首先引用default.html,但在其基础上做出一定的修改。然后首页使用l_index模板,而所有的post文件

则使用l_post模板,等等等等,请随意发挥。但始终记得加上{{ content}}标签

再次推送到服务端,查看效果。

至少这一点我没骗你,要发布最新的更改实在是太简单了,只需要一次push而已。

那么,基本的项目结构如下:

.

|– _config.yml

|– _includes

|– _layouts

||– default.html

| `– post.html

|– _posts

||– 2007-10-29-why-every-programmer-should-play-nethack.textile

| `– 2009-04-26-barcamp-boston-4-roundup.textile

|– _site

`– index.html

这幅图来自于:Yes We Jekyll,原谅我的懒惰,我实在不擅长排版…

如何在 GitHub 上写博客

一、为什么在GitHub上托管个人博客

为什么在GitHub上托管博客,这个问题可以分两步来问:

首先,为什么可以在GitHub上托管博客?

GitHub是一个基于git的版本托管服务网站,上面聚集着几乎全世界的程序大牛,还有着大量的牛逼开源项目。而项目一旦成长壮大,一个简单的名称和一段描述很可能就无法满足作者与读者的需要。此时,GitHub Pages就应运而生,它允许用户用更具描述性的自定义页面代替源码列表。同时,用户也可以利用其作为个人或组织主页,将静态网页托管其上。

那么,在有着WordPress等等大量的开源博客系统的情况下,为什么选择在GitHub上托管博客呢?

对程序猿来说无比亲切,光是看起来感觉就很牛逼的”Git驱动式博客开发与发布流程”。

超级容易,5分钟包学包会的发布方式。

静态页面,建立简单,几乎没有安全性隐患,当然这也是缺点之一,静态页面无法做到太过复杂的交互设计和网站结构。不过作为一个简单的个人博客,也不太会有这样的需求

而可靠

更加详细的内容可以参见这里 todo: Jekyll+ GitHub Pages的优点与缺点

话不多说,现在就来试试看。

<p id=”002″></p>

二、10分钟快速搭建一个博客原型

首先确认:

拥有一个GitHub账号

已经安装 Git,(在Windows下,个人推荐直接安装 GitExtensions,有中文界面,并且集成了git+ putty+ kDiff,比较省心一点啦)

1.建立一个项目

先在GitHub创建一个项目,名字随意,尽量全部小写字母,避免随后会碰到的URL冲突问题

本地运行Git,随意选个目录,将刚才创建的项目clone下来

<!– lang: bash–>

cd/d/

git clone

cd blogdemo

<br/>

<br/>

2.建立配置文件_config.yml

注意:之后建立的所有文档务必使用UTF-8无 BOM的编码保存

在项目的根目录下新建文件 _config.yml,填写 baseurl:/blogdemo, blogdemo是你的项目名称,这一行内容规定了整个网站的根路径,稍后会详细解释这样做的意义。

<br/>

<br/>

3.建立主页

在根目录下新建文件 index.html,内容像这样:

<!– lang: html–>

title: Hello, My Blog

{{ page.title}}

先不用急着奇怪为什么一个html文件会出现”{}”这样的标签,这里使用的是 Liquid模板语言,{{ page.title}}表示“本页面的标题”,更详细的介绍我们以后再讲,不妨这样理解:

<!– lang: python–>

#— begin of page's head

title=”Hello, My Blog”

#— end of page's head

print(page.title)

OK,那么博客主页设计完毕!(别吵…我答应过你要10分钟内搭建完成的…先弄个毛胚房意思意思,美化啊功能啊什么的晚点再说)

<br/>

<br/>

4.发布到GitHub

回到git bash,检查一下 git status,确认 _config.yml与 index.html无误后 add,commit,保持使用Git的良好习惯,记得添加提交描述

然后推送到GitHub,这里注意,因为我们使用的是GitHub Pages中的 Project Pages, GitHub仅会将分支 gh-pages下的内容进行自动生成操作,所以本地的 master分支应推送到远端的 gh-pages分支

<!– lang: bash–>

git push origin master:gh-pages

稍微等待一下,最多10分钟(通常不用那么久啦),访问 yourname.github.com/blogdemo

,(其中 yourname

是你的GitHub帐户名,blogdemo则是你的项目名)就会看见你的博客主页(确实很丑…而且完全不像一个博客的样子,不过别急,慢慢来比较

快~)

另外,如果不幸发现你的中文页面出现了乱码的情况,别着急,还是该死的UTF-8问题,后面我们会一劳永逸的解决他的,暂时先手动调整一下浏览器的编码。

<br/>

<br/>

5.在_posts内撰写文章,并在首页加入文章列表

在这段时间里,我们继续为你的博客添砖加瓦,让他拥有最基本的文章阅读功能,另外不断F5页面的同时也可以关注一下自己在GitHub注册时所用的邮箱,如果之前推送的内容有误的话,GitHub将以邮件形式提醒你生成失败。

回到项目根目录, mkdir _posts新建一个目录,看名字也知道啦,这里存放你所有的文章。

进入_posts目录,新建一篇文章。注意默认的文件名格式是 year-month-day-postTitle这样。比如 2013-03-23-my_first_article.md,尽量避免空格或者其他乱七八糟的字符,这个文件名将作为URL的生成依据。文件名的格式可以通过修改 _config.yml中的 permalink属性而改变,默认值为 date,也就是我们刚刚创建的文件的样子,具体的规则可以看这里,后面我们也会讲到。

如果你发现了我刚才创建的文件后缀名是.md,熟悉GitHub或者StackOverFlow的朋友应该知道Markdown格式,推荐使用GitHub托管博客的原因之一也正是如此,我们可以在大部分时候避开恼人的HTML,转而使用更加直观的Markdown语法。如果不熟悉也没关系,可以参见这份Markdown语法说明,应该说是相当易学,并且在熟悉之后非常易用的。

回到主题,打开刚才创建的文件,输入如下内容:

<!– lang: html–>

title:我的第一篇文章

#{{ page.title}}

##目录

+ [第一部分](#partI)

+ [第二部分](#partII)

+ [第三部分](#partIII)

———————————-

##第一部分<p id=”partI”></p>

这里是第一部分的内容

———————————-

##第二部分<p id=”partII”></p>

这里是第二部分的内容

———————————-

##第三部分<p id=”partIII”></p>

这里是第三部分的内容

{{ page.date|date_to_string}}

这段内容中使用了最常用的几种Markdown语法,比如使用#,##表示 HTML中的<h1></h1>,<h2></h2>。使用[text](link)创建超链接,使用连续多个-创建水平线(注意:不包括最上端包围title所使用的横线,那里表示一个页面的“头属性”),等等。更多详细的语法可以在之前提到的页面查询,这里不再赘述,总之,这是一种更加贴近真实写作的语法,推荐大家尝试。

啊对了,最后面的那个{{ page.date|date_to_string}}是指显示本页的日期属性,并且转换为可读的字符串形式。同样也是Liquid语法。

OK,那么第一篇文章也写好了,再把最新的repo推送到github,稍等片刻,就可以…等下,忘记给文章加上入口的链接了。

Sorry啦,重新打开我们的 index.html文件,添加内容,变成下面这样:

<!– lang: html–>

title: My Blog

{{ page.title}}

{% for post in site.posts%}

{{ post.date|date_to_string}}<a href='{{ site.baseurl}}{{ post.url}}'>{{ post.title}}</a>

{% endfor%}

唔…都是Liquid的内容,简单解释一下,Liquid标记最主要分为两种,一种是直接输出变量内容,像这样:

{{ page.title}}

另一种则是逻辑命令形式的,像这样:

{% for x in y%}…{% endfor%}

而刚才写进主页的内容,就是遍历所有post文件,然后逐一显示在页面上,这里需要注意的一点就是在创建文章的超链接时,除了 post.url之外,也要注意在前面加上site.url

,原因前面也有提到过,我们正在创建的是 Project Pages

类型的网站,其最终生成的网址根目录是:username.github.com/projectname,而 post.url

生成的超链接仅仅会自动加上 username.github.com/这样的前缀。

现在检查一下更改的所有内容,确认不要犯下愚蠢的错误,比如把”.”打成”。”或者单词拼错之类的,提交并推送!

当当!如果一切顺利,就能看到你的首页外加文章列表闪亮登场。

<br/>

<br/>

6.增加模板套装_layouts

文章进行到这里,或许开头承诺的10分钟已经超过不少了…很抱歉我欺骗了你,不过至少我们进展很快~接下来——如果你仍有兴趣的话,让我们为网站增加一些统一性的风格设置。

回到项目根目录,新建文件夹 _layouts,顾名思义,“布局”是也。在 _layouts中新建一个最基本的布局文件,姑且命名为default.html好了:

<!– lang: html–>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

<title>{{ page.title}}</title>

</head>

<body>

{{ content}}

</body>

</html>

诺,首先解决了UTF-8的编码问题,随后指定了正文内容的位置,当然在这里只是一个最简单的内容,在body内仅有一个{{ content}}标签,你可以根据自己的喜好对页面进行任何改动,只要记得保留这个内容标签在你想要的位置就好。

然后我们修改index.html和刚写完的那篇文章,只要在头属性上加一句就好:

<!– lang: html–>

title: xxoo

layout: default.html

我们当然还可以把这个结构变得更灵活一些,比如继续新增两个模板分别叫做l_post.html与

l_index.html,他们首先引用default.html,但在其基础上做出一定的修改。然后首页使用l_index模板,而所有的post文件

则使用l_post模板,等等等等,请随意发挥。但始终记得加上{{ content}}标签

再次推送到服务端,查看效果。

至少这一点我没骗你,要发布最新的更改实在是太简单了,只需要一次push而已。

那么,基本的项目结构如下:

.

|– _config.yml

|– _includes

|– _layouts

||– default.html

| `– post.html

|– _posts

||– 2007-10-29-why-every-programmer-should-play-nethack.textile

| `– 2009-04-26-barcamp-boston-4-roundup.textile

|– _site

`– index.html

这幅图来自于:Yes We Jekyll,原谅我的懒惰,我实在不擅长排版…

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享