【教程】仿站之如何”偷”一个主题并与wordpress后台整合(一)

看到别人好看的主题,想把它占为己有?这个虽然在道德层面将不是很好,但是我们可以去从技术层面去理解,提高技术嘛,顺带扒扒皮,让自己的网站更加美观,2333

那现在让嘻哈来教教大伙怎么做吧:

第一步:偷站

比如说https://ub.ac.id/这个网站,模板看起来不错,偷下来很简单。

直接查看源代码,把网页代码保存下来存为html格式,也可以戳下面的懒人下载,直接下载嘻哈保存好的 😛

打开之后效果如下:

如果不需要整合后台的话,这个站的一个皮也就算抠下来了 😛

对于其他站呢,可能需要另外再修改一下代码,比如说北大官网,我把源代码复制下来之后还是乱码

出现这种格式主要是没有把css这些文件偷下来,经过简单替换之后我们可以得到下面的效果,是不是比上面好多了呢?

那么怎么替换呢?我们先看看源代码的头文件:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>北京大学</title>
<link href="css/indexi.css" type="text/css" rel="stylesheet" />
<link rel="apple-touch-icon" href="/pku_logo_red.png" />
<!-- <script src="js/index.js"type="text/javascript"></script> -->
<link rel="shortcut icon" href="/pku_favicon.ico" mce_href="/pku_favicon.ico" type="image/x-icon">
<link rel="icon" href="/pku_favicon.ico" mce_href="/pku_favicon.ico" type="image/x-icon">

<link href="files/basei.css" rel="stylesheet" type="text/css">
<link href="files/index.css" rel="stylesheet" type="text/css">
<link href="files/thuicon.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="files/mmenu.css" rel="stylesheet" type="text/css">
<script src="files/jq.js" type="text/javascript"></script>
<script src="files/comm.js" type="text/javascript"></script>
<script src="files/jquery.easing-1.3.js" type="text/javascript"></script>
<script src="files/jquery.iosslider.js" type="text/javascript"></script>
<script src="files/visualMacth.js" type="text/javascript"></script>

<!--[if lt IE 9]>
<script src="files/html5.js" type="text/javascript"></script>
<script src="files/response.min.js"></script>
<link href="files/mmenu2.css" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/pku.css" rel="stylesheet" type="text/css">
<script src="js/pku.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>

</head>

这里面引入了很多js,css文件,我们只需将其替换成真实的地址即可得到我们想要的效果了!

替换之后如下,大家自己可以比较一下有什么不同:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>北京大学</title>
<link href="http://pku.edu.cn/css/indexi.css" type="text/css" rel="stylesheet" />
<link rel="apple-touch-icon" href="http://pku.edu.cn/pku_logo_red.png" />
<!-- <script src="http://pku.edu.cn/js/index.js"type="text/javascript"></script> -->
<link rel="shortcut icon" href="http://pku.edu.cn/pku_favicon.ico" mce_href="http://pku.edu.cn/pku_favicon.ico" type="image/x-icon">
<link rel="icon" href="http://pku.edu.cn/pku_favicon.ico" mce_href="http://pku.edu.cn/pku_favicon.ico" type="image/x-icon">
<link href="http://pku.edu.cn/files/basei.css" rel="stylesheet" type="text/css">
<link href="http://pku.edu.cn/files/index.css" rel="stylesheet" type="text/css">
<link href="http://pku.edu.cn/files/thuicon.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://pku.edu.cn/files/mmenu.css" rel="stylesheet" type="text/css">
<script src="http://pku.edu.cn/files/jq.js" type="text/javascript"></script>
<script src="http://pku.edu.cn/files/comm.js" type="text/javascript"></script>
<script src="http://pku.edu.cn/files/jquery.easing-1.3.js" type="text/javascript"></script>
<script src="http://pku.edu.cn/files/jquery.iosslider.js" type="text/javascript"></script>
<script src="http://pku.edu.cn/files/visualMacth.js" type="text/javascript"></script>

<!--[if lt IE 9]>
<script src="http://pku.edu.cn/files/html5.js" type="text/javascript"></script>
<script src="http://pku.edu.cn/files/response.min.js"></script>
<link href="http://pku.edu.cn/files/mmenu2.css" rel="stylesheet" type="text/css">
<![endif]-->

<link href="http://pku.edu.cn/css/pku.css" rel="stylesheet" type="text/css">
<script src="http://pku.edu.cn/js/pku.js" type="text/javascript"></script>
<script src="http://pku.edu.cn/js/slider.js" type="text/javascript"></script>

</head>

偷好主题之后,我们为了将其整合到wordpress里面,需要将网页的代码进行划分。所以不得不介绍一下wordpress主题的代码结构了,一个主题最主要的包含以下几个文件,当然后续还会进行补充

header.php

index.php

footer.php

style.css

有了这几个文件,我们就可以进行主题的制作了,由于工程也不是很简单,所以此教程分为几次来写,今天就先介绍到这里,大家可以去找个网站练练手  😛

各种网站都可以去试试看看能不能得手:

https://www.taobao.com/

https://www.jd.com/

下一篇:【教程】仿站之初识wordpress主题(二)

欢迎转载:注明转载出处就好:P:嘻哈小屋 » 【教程】仿站之如何”偷”一个主题并与wordpress后台整合(一)

赞 (3)
分享到:更多 ()
OR 支付宝 扫描二维码
为嘻哈 打个赏
pay_weixinpay_weixin
金额随意 快来“打”我呀~

吐槽 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址