分类
小程序

浩孜网络工作室新版小程序使用教程

首先还是感谢大家的支持,这里还是给大家出个设置教程。

1,拿到小程序,解压后会有两个文件夹,一个是后端插件一个是前端文件(插件是需要安装到wordpress中,具体安装方法百度,前端文件是用微信小程序开发者工具导入的,这里也不多说。)

2,配置的wordpress站点,需要开启SSL功能,和伪静态,网站必须开启SSL关于SSL请自行百度,SSL开启方式很多种,最简单的是用宝塔,直接申请。伪静态也在宝塔可以设置。

3,进入微信公众号平台设置小程序的APPID和秘钥(开发-开发设置)

4,进入微信公众号平台设置小程序的服务器域名(开发-开发设置)

浩孜网络工作室新版小程序使用教程

5,安装插件,启动插件以后设置小程序的APPID以及AppSecret。(后台左侧栏-小程序-基本设置)

浩孜网络工作室新版小程序使用教程

6,在我们前期没有流量主的前提下,不需要设置广告,,默认是关闭的,广告开启是在是功能扩展里面开启。

浩孜网络工作室新版小程序使用教程

首页和列表默认是banner广告,文章详情是激励广告,页面是“我的”页面的视频广告,只需要设置广告ID即可。

7,小程序首页的导航按钮设置,进入方式(后台左侧栏-外观-菜单)

浩孜网络工作室新版小程序使用教程

新建菜单,一定要勾上下面的“小程序导航”才能生效。

8,设置导航的图标(首先点开顶部右上角的显示选项-勾上图像描述,在点击下面导航)

浩孜网络工作室新版小程序使用教程

9.设置小程序的订阅消息模板,首先(后台左侧栏-小程序-常规设置)中找到资讯更新提醒 ,按照提示在微信公众后台申请订阅消息模板填上。

浩孜网络工作室新版小程序使用教程

10,小程序前端设置,第一步就是域名配置和订阅消息的模板设置

浩孜网络工作室新版小程序使用教程

 

 

分类
前端技术

linear-gradient给背景渐变

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

CSS 语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);  direction 用角度值指定渐变的方向(或角度)。  color-stop1, color-stop2,... 用于指定渐变的起止颜色。  

实例

以下实例演示了从左侧开始的线性渐变,从红色开始,转为蓝色:

<div id=”grad1″></div>

#grad {

background:webkit-linear-gradient(left, red , blue); /* Safari 5.1 to 6.0 */

background:o-linear-gradient(right, red, blue); /* Opera 11.1 to 12.0 */

background:moz-linear-gradient(right, red, blue); /* Firefox 3.6 to 15 */

background: linear-gradient(to right, red , blue); /* 标准语法 */ }

以下实例演示了从左上角到右下角的线性渐变:

<div id=”grad1″></div>

#grad {

background:webkit-linear-gradient(left top, red , blue); /* Safari 5.1 to 6.0 */

background:o-linear-gradient(bottom right, red, blue); /* Opera 11.1 to 12.0 */

background:moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 to 15 */

background: linear-gradient(to bottom right, red , blue); /* 标准语法 */ }

以下实例演示了线性渐变指定一个角度:

<div id=”grad1″ style=”color:white;text-align:center;”>0deg</div><br>
<div id=”grad2″ style=”color:white;text-align:center;”>90deg</div><br>
<div id=”grad3″ style=”color:white;text-align:center;”>180deg</div><br>
<div id=”grad4″ style=”color:white;text-align:center;”>-90deg</div>

#grad {

background:webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 to 6.0 */

background:o-linear-gradient(180deg, red, blue); /* Opera 11.1 to 12.0 */

background:moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 to 15 */

background: linear-gradient(180deg, red, blue); /* 标准语法 */ }

以下实例演示了多个终止色:

<div id=”grad1″ style=”text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold”>
渐变背景
</div>

#grad { /* For Safari 5.1 to 6.0 */

background:webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); /* For Opera 11.1 to 12.0 */

background:o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); /* For Fx 3.6 to 15 */

background:moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); /* 标准语法 */

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }

以下实例使用了透明度:

为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。

<div id=”grad1″></div>

#grad {   background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/   background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/   background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/   background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/ }
分类
WP相关

利用阿里图标给wordpress二级菜单添加个性图标

Iconfont-阿里巴巴矢量图标库是一个非常好用的图标仓库,我们可以利用这个给网站加上个性的小图标,而且这是国内最好用的图标网站,而且好免费,至于如何注册我就不多说了,今天主要给大家介绍如何利用阿里图标给wordpress拥有二级菜单的导航添加一个图标,如下图:

利用阿里图标给wordpress二级菜单添加个性图标

首先在阿里图标建立你自己的图标库,然后下载到本地集成到主题里面。

然后在我们的主题菜单设置中找到对应的二级菜单名称,在名称后面直接添加对应的代码:

<i class=”iconfont”>&#xe635;</i>。如下图:

利用阿里图标给wordpress二级菜单添加个性图标

至此就可以刷新下主页看看效果了,原理大家都了解了吗?赶紧试一试!

 

 

分类
小程序

世界,您好!

欢迎使用WordPress。这是您的第一篇文章。编辑或删除它,然后开始写作吧!

分类
前端技术

CSS图片hover边框效果

这制作CSS边框效果的时候我们都知道用a标签和a:hover但是我往往这样定义会达不到想要的效果,今天在做wordpress模版的时候遇到这个问题了,看我的怎么解决的。

<div class=”kanfangsuoluetu”>

<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo catch_post_image() ?>” alt=”” width=”178px” height=”220px” />

</a>

</div>

CSS

.kanfangsuoluetu {float:left;width:178px;list-style: none;margin:10px 8px 10px 12px;}
.kanfangsuoluetu img{border:1px solid transparent;}
.kanfangsuoluetu a {color:#c00;width:180px;border:2px solid #ddd; display:block;position: relative;}
.kanfangsuoluetu a:hover {color:#333;border:2px solid #f00;}

其实我们需要注意的是上面红色部分,大家可以试试,去掉的效果。

 

分类
小程序

wordpress后台QQ微信情侣头像小程序使用手册

这个小程序是用wordpress搭建的后台,并采用“丸子小程序”插件的API对接所有我们需要自行准备空间和已经备案后的域名才能使用它,如果你连wordpress都不会安装请不要继续看了,关于域名SSL配置,伪静态的配置请阅读我之前的文章《浩孜网络工作室小程序使用教程-新手专用》前6条。去淘宝购买

购买我的小程序后我会给出一个压缩文章,里面包含前端以及后端插件,前端为开发者工具需要导入的文件,后端为wordpress插件用于连接小程序。wordpress版本我用的4.9的没用5.0以上的因为我不习惯用古腾堡编辑器,如果你非要装最新的也可以,插件有屏蔽古腾堡编辑器的开关。

wordpress后台QQ微信情侣头像小程序使用手册

1,用FTP上传插件,或者直接在插件中心上传插件安装,注意的是后端插件请不要升级,不要用官方的,因我是做过修改的,切记!

2,安装好插件设置小程序ID和秘钥(其他不用设置就能运行了)

wordpress后台QQ微信情侣头像小程序使用手册

3,设置文章的分类,分类我尽量一次性建好,这样分类ID有连贯,这样前台设置小程序不容易出错。

4,如何查找分类ID可以参考这个文章《如何查看wordpress分类ID》

5,导入前端小程序:修改网站链接地址(这里以微信小程序演示)QQ小程序设置的位置都是一样的。

wordpress后台QQ微信情侣头像小程序使用手册

6,首页对应的分类ID设置(这里以微信小程序演示)QQ小程序设置的位置都是一样的。

wordpress后台QQ微信情侣头像小程序使用手册

7,首页banner广告位设置(其他位置的广告请自行添加),因为现在微信的广告只要提交代码审核广告也是需要审核的,所以没有做后台的广告控制了

wordpress后台QQ微信情侣头像小程序使用手册

9,列表广告位设置(每隔8个文章,自动加载一个广告,这里是首页的列表。其他位置的广告请自行添加,大同小异)

wordpress后台QQ微信情侣头像小程序使用手册

注意,请删掉注释 <!–首页广告位     –>

10,文章的发布(2张图片不要有间距,上传后最好检查一遍,以免前端不平排,也可以直接复制人家网站的图片,不需要上传,同样2张图片不要有间距,最后选择对应的分类目录,发布即可!)

wordpress后台QQ微信情侣头像小程序使用手册

以上就是《情侣头像》小程序的设置教程了。请大家仔细阅读,不懂了在问我!微信:haoziw

最后谢谢大家支持!

分类
前端技术

DIV高度延伸-自适应高度

上次我在本站中写到一篇文章关于父级DIV绝对居中高度不延伸的解决方法,但上次的方法似乎还不够完善,在复杂的DIV中,不起作用,所以今天又收集了一个办法,希望能解决大家的问题

下面写个例子:

<div id=”div1″>

这里是内容

<div style="clear:both"></div>

</div>

很明显的看出来,要达到随着DIV内容的扩张,DIV自适应高度仅仅需要在DIV结束标记前加上

<div style="clear:both"></div>
分类
小程序

视频内容小程序的生存方式

做小程序有一段时间了,期间也做了很多小程序,但我的小程序都是基于开源项目的小程序一是我喜欢独立性,二是安全放心数据自己掌握不受限制,三是我喜欢折腾可以做成我想要的样子,有兴趣的可以去我的淘宝店看看“浩孜网络工作室”里面也许有你想要的模板,不好意思一不小心打了一个广告,进入正题。

之前做的和平吃鸡全攻略小程序上线差不多3个月了,这个小程序是围绕热门手游《和平精英》为主题的小程序,内容基本来自官方数据,当然里面包含图文以及视频了,大家都知道这个年代基本视频流量占比很高,但不幸的是我的是个人小程序,基本上是禁止出现视频的,这个规矩我是大概了解,当初也是抱着侥幸的心理尝试放视频,效果确实很好流量来的非常迅猛,可好景不长,7月8日的一个用户举报(姑且认为是个人,因为我觉得有80%可能是腾讯自己动的手脚,因为我是个人小程序,然后又有流量,是时候收保护费了。),下线以后我第一时间去申诉,还好,仅仅被封4个小时,但是视频必须下架,我也仔细看了相关下架说明:

违规内容:小程序服务涉及在线观看视频,请补充选择文娱-视频类目,目前该类目暂不对个人开放,建议选择企业类型小程序注册使用,如无法注册企业类型小程序,请下架涉及资质类目的运营内容。

然后度娘找到了很多相关问题的主题,我总结了下大致处理办法就是,小程序迁移到公司名下,就可以用腾讯视频插件,这样就能用腾讯的资质避免因为类目问题而下架小程序。

腾讯打得一手好牌呀,接入视频插件就有他们的广告,这又是一个收入。然后逼迫个人小程序做迁移300块认证费又到手了,可谓双丰收呀!

所以在做小程序的时候尽量选择公司资质的主体,这样可以避免很多问题,我就是鲜明的例子,流量少的时候他们不会理你一旦有流量了你就会和我一样的命运,这个我也专门做过测试,我自己举报过自己带视频的小程序,然而根本没有被封,因为没流量,大家都懂了吧。

然后我分析了下视频内容与图文内容的广告点击率,图文的点击率明显高于视频的点击率。今天临时有事这个就下次再来具体来讲这个问题。如果喜欢我的文章可以先关注一波。

分类
前端技术

CSS打造图片鼠标悬停效果

这个效果往往我们会用到JS特效,但是个人不是很喜欢这样的效果,因为要给网站带来一些负担,特别是不是很懂JS的如果去用人家的JS例子来修改,往往会附加很多的垃圾文件,可能你仅仅需要一个悬停效果按这个JS里面却附加了很多不必要的元素,所以我觉得用CSS是最方便也是最好的,而且只需要简单的几句css就搞定,也许效果没JS好但是,目的是一样的。

下面我来介绍下如何来实用这个效果:

我只在这里给大家介绍方法,实际操作请大家百度,因为这样我们更能学到东西

首先我们定义一个图片:

<div class=”tupian”><a href=”#” ><img src=”图片地址” alt=”” width=”187px” height=”220px”/><div class=”xuanting”>悬停内容</div></a></div>

然后定义CSS:

.tupian {border:1px solid #EEE;background:#F9F9F9;overflow:hidden;position:relative;}
.tupian img{display:block;margin:0 auto;max-width:210px;height:auto;width:expression(this.width > 210 ? “210px” : this.width); /**用来在IE中自动缩放这里用来缩小首页面的图片的。**/}
.tupian a{position:relative;display:block;}
.tupian a:hover .xuanting{position:absolute;display:block;top:0px;left:0;background:#666;}

基本上效果就出来了。具体的效果就是 鼠标移动上去就显示悬停内容。鼠标不在图片上就没有效果。

CSS打造图片鼠标悬停效果

 

 

 

 

分类
WP相关

国外WooCommerce主题不好改

所谓的英文WooCommerce主题简直太难搞了,外国的人写代码习惯和国内简直天壤直接,想改它们的主题简直太烧脑了,如果没有基础简直改的头大,反正我不想再折腾英文国WooCommerce主题了。还是国人的好用,自己写的更好用

而且外国的主题大多集成很多的东西,加载的文件太多,简直慢如蜗牛。提醒各位小白真的用国外的还不如自己集成WooCommerce主题。累、