GG资源网

如何自己搭建一个个人网站?(WordPress免插件实现图片灯箱lightbox效果)

如何自己搭建一个个人网站?

喜欢的可以收藏转发加关注

搭建基本的个人网站成本十分低廉,最低从0到数十元不等。取决于对于域名的投入。

如果把搭建网站类比为现实中修建一栋房子,我们可以进行如下类比

修建一栋房子

1.申请门牌号

2.购置一片空地

3.构建房屋框架

4.添砖加瓦,粉刷装修

搭建网站的步骤

1.申请域名

2.虚拟主机或服务器

3.引入网站框架或从头建设

4.网站优化,可借助资源或DIY

首先

1.申请域名

what?why?

就像现实中每一栋房子都会有国家城市街区门牌号一样,每一个网站都需要有独一无二的IP地址。IP地址用二进制数来表示,每个IP地址长32比特,由4个小于256的数字组成,数字之间用点间隔,例如100.10.0.1表示一个IP地址。由于我们在上网时很难去记忆这些数字符号,所以需要有含义的符号化地址方案来代替数字型的IP地址。这样的字符型地址就被称为域名。

how?

申请域名现在可以有许多渠道,并且这些渠道也会搭配虚拟主机一起提供。

万网,阿里云,腾讯云等

而我则是选择了 买域名 | 世界最大域名注册商 ,一般来说 .com,.org这样的国际域名年费不超过100元。建议大家选择国际域名,国内的.cn域名需要验证实名信息。当然如果只是抱着试一试的态度可以尝试.xyz,.co,.tk这样的非主流域名或国外域名,价格相对便宜甚至有机会淘到免费域名。建议大家如果稍有网页开发基础,就不必选择godaddy的增值服务了,如建站达人,虚拟主机等,我们完全可以通过其他渠道免费达到自己想要的更好的效果。

<img src=\"https://pic1.zhimg.com/50/a6ba67b1f2ce282b87048b23138f8be5_b.jpg\" data-rawwidth=\"1344\" data-rawheight=\"638\" class=\"origin_image zh-lightbox-thumb\" width=\"1344\" data-original=\"https://pic1.zhimg.com/a6ba67b1f2ce282b87048b23138f8be5_r.jpg\">

2.虚拟主机或服务器

一般个人网站会采用虚拟主机的形式租用空间,放置站点及应用组件,进行必要的数据存放和传输功能。如果是自建服务器须保证24小时开机来保证访问需求,并且花费较大,并无必要。虚拟主机可以有多种选择。如国内的阿里云、腾讯云等,优点是速度较快,缺点是需要报请备案。也可以选择国外如美国、香港等。考虑到备案的繁琐,需要保证一定的访问速度,我了解到香港的

http://api.hostinger.com.hk/redir/17589162

免费套餐具有的一定控件和流量,足够个人网站玩耍起来!

<img src=\"https://pic1.zhimg.com/50/a61b64234a7bf029720227b4b365b611_b.jpg\" data-rawwidth=\"1366\" data-rawheight=\"613\" class=\"origin_image zh-lightbox-thumb\" width=\"1366\" data-original=\"https://pic1.zhimg.com/a61b64234a7bf029720227b4b365b611_r.jpg\">

在有了虚拟主机之后,我们需要将域名解析到新的虚拟主机地址,这样访客才能正确的找到我们的地盘,这是比较简单的,现在虚拟主机提供商的图形化页面就能为我们提供相应的功能。

<img src=\"https://pic3.zhimg.com/50/62ab1e4717ed91c9ac046775c8008031_b.jpg\" data-rawwidth=\"1347\" data-rawheight=\"586\" class=\"origin_image zh-lightbox-thumb\" width=\"1347\" data-original=\"https://pic3.zhimg.com/62ab1e4717ed91c9ac046775c8008031_r.jpg\">

3.引入网站框架或从头建设

如果你以前有过基本的html、css、js网页开发基础,可以将自己的做的网页提交到个人虚拟空间,当然如果没有也没有关系,网上有许多别人已经做好的模板,可以先借用一下。如模板之家、模板王等,就不一一列举了。而我是想搭建个人博客系统,所以借用了时下非常流行的wordpress,大家可以前往官网下载China 简体中文,根据提示进行一步步安装操作。

4.网站优化

进一步的排版、分栏、美化、加速等,牵扯到许许多多计算机网络、UI设计等知识。一入个网深似海,我们也有许多未知的知识值得去探索。

更多细节及扩展信息会在今后逐一完善。

也欢迎大家交流,早日置备好互联网世界的一亩三分田。

学习前端的伙伴可以转发+私信回复小编“前端”领取全套免费前端学习资料和视频

WordPress免插件实现图片灯箱lightbox效果

最近有个朋友问我有没有推荐的点击图片放大预览的WordPress插件,

这不就是图片灯箱的效果吗,这个小需求没必要要用插件啊,于是抽空纯代码写个一个图片灯箱lightbox的效果,其实也挺简单的,就2 3个文件而已,整个文件就14k大小,总比插件好好些吧。

最终效果如下图所示:

使用教程

1、首先下载文件,在文章底部点击资源下载按钮下载图片灯箱文件。

2、然后把文件上传到主题目录,也就是/wp-content/themes这个目录,解压!

3、在主题的header.php和footer.php文件分别加载css和js:

注意:请确保正在使用的主题已经加载了jquery!

如果你使用的古腾堡编辑器,那么教程结束,你可以去试试图片灯箱效果了,不过记得把图片属性链接到图像。

如果你使用的是经典编辑器,那么还需要修改下js文件。

扫码关注wpwp自学笔记

精选优质免费WordPress主题模板,分享最新WordPress实用建站教程!

记住我们的网址:ztJun.com

由于网站搬家,部分链接失效,如无法下载,请联系站长!谢谢支持!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » 如何自己搭建一个个人网站?(WordPress免插件实现图片灯箱lightbox效果)

发表回复

CAPTCHAis initialing...