www.gyu-kura.com功能框屏幕截图

使用向下滑动选项增加转换

分享是关怀!

论文特色框

不管你写博客和经营网站的原因是什么,很可能你想增加网站的时事通讯转换。我们看着琵琶,WordPress的高级弹出插件,亚博yabo88app 下载但它并没有给我们提供我们在www.gyu-kura.com上想要的功能。

对于www.gyu-kura.com,我们希望有一个选择,将所有内容向下滑动,而不是显示在内容上。为此,我们推出了自己的定制解决方案。

代码

让我们开始讨论代码。像往常一样,我们为论文推出了我们的定制解决方案。我将解释如何为非论文定制这个亚博yabo88app 下载WordPress主题在后期。

论文解决方案

对于论文用户,我们从向特性框添加代码开始。论文需要做的第一件事是激活你的功能框(这个选项在你的论文设计选项中)——我们在www.gyu-kura.com的内容和侧边栏上面使用了网站宽度和全宽。

下一步,导航到您的custom_functions.php文件并在下面输入php代码。此代码将在非主页的任何位置显示我们的功能框代码。

函数myFeatureBox()if(!_page(“主页”)是_吗?>
            

你独特的信息会出现在这里

X-NO,我不想订阅你的博客。

现在我们的功能框中显示了一些代码,我们将使用一些CSS和jQuery来让我们的功能框真正滑动。让我们从jquery开始。继续在自定义文件夹中创建一个custom.js文件。也,您需要确保在您的网站中嵌入这个新的custom.js。您可以通过转到您的论文设计选项并在嵌入式脚本中添加这一行代码来实现这一点。


现在,如果你只想要一个功能框,每当有人访问你网站的某个页面时,它就会滑下来,我们只需要几行代码就可以做到这一点。代码如下:

jquery(document).ready(function($)$(“feature_box”).delay(2000).slidedown(“slow”););

这段代码将在延迟2000毫秒后缓慢地滑下特性框。但是,让我们成为现实。如果有人访问你的网站,而且他们永远都没有办法摆脱滑下的选项…他们可能会试图核武器你的网站。所以,让我们为您的访客提供一个隐藏幻灯片的选项!:)

要做到这一点,我们将使用jquery cookie插件,我们将有一个区域,在那里游客可以点击并选择隐藏我们的幻灯片向下选择。然后我们将测试是否有一个cookie,然后再滑下optin。

*注意:如果使用下面的代码,不要使用上面的jquery代码段。

/*!*jquery cookie插件*https://github.com/carhartl/jquery-cookie**版权所有2011,Klaus Hartl*根据MIT或GPL第2版许可证获得双重许可。*http://www.opensource.org/licenses/mit-license.php*http://www.opensource.org/licenses/gpl-2.0*/(函数($)$.cookie=function(键,价值,选项)//键和至少给定的值,设置曲奇…如果(arguments.length>1&&(!/object/.test(object.prototype.toString.call(value))value==null value==undefined))options=$.extend(,选项;if(value==null value==undefined)options.expires=-1;}如果(typeof options.expires=='数字')var days=options.expires,t=options.expires=new date();t.setDate(t.getDate()+天);}值=字符串(值);返回(document.cookie=[编码成分(键),“=”原始的?值:编码成分(值)选项。过期?;expires='+options.expires.toutcstring():'',//使用Expires属性,ie options.path不支持max age?;path='+options.path:“”,选项?域名?亚博体育;亚博体育域='+options.domain:“”,安全?;安全“:”.join(“”);}//键和可能的选项,得到饼干…选项=值var decode=options.raw?函数返回s;}:解码组件;var pairs=document.cookie.split(';“”;对于(var i=0,一对;pair=pairs[i]&&pairs[i].split('=');i++)if(decode(pair[0])==key)返回decode(pair[1]“');//ie将空字符串的cookie保存为“c;“例如与eomb相反,没有“=”,因此,对[1]可能是未定义的返回空值;};)(jquery);jquery(document).ready(function($)if($.cookie('first')==null)$(“feature_box”).delay(2000).slidedown(“slow”);}$('hideopt')。单击(function()$.cookie('first',“1”,{期满:7,路径:'/'};$(“Feature_Box”).slideup(“slow”);});

使用上面的代码,我们将为访问者提供隐藏幻灯片的选项。每当他们点击我们的分区,我喜欢,我们先放一块饼干,值为1,并将到期日期设置为一周后。不要担心分配给cooki亚博体育下载e的值。当我们测试cookie时,我们正在测试是否有任何cookie。

您可以根据自己的喜好修改此代码。您可以通过键入365而不是7来将到期日期从一周更改为一年。您可以更改cookie的名称。您甚至可以更改滑下optin之前的延迟时间。

这应该适用于滑下选件的功能部分。但是,您很可能会使用一些CSS来设置您的功能框的样式。我会给你一些我们在www.gyu-kura.com上使用的信息。

#功能框位置:相对;显示:无;边框顶部:2px纯色e0e0;边框底部:2px纯色e0e0;hideopt位置:绝对;底部:10px;右:20px;颜色:999999;光标:指针;

这是我们在www.gyu-kura.com上使用的一些代码,用于设计我们的功能框。我想指出几行代码。在www.gyu-kura.com上,我们希望hideopt位于特征框的右下角。为此,我们将功能框的定位更改为相对,而hideopt的定位更改为绝对。这允许我们在功能框内定位隐藏选项。我要指出的另一行CSS是,我们在hideopt上使用指针光标。这给了我们的游客一个视觉提示,当他们在分区上空盘旋。

你很可能想添加你自己的CSS,让你的功能框符合你的喜好,但这会让你兴奋不已。

www.gyu-kura.com功能框屏幕截图

通用WordPr亚博yabo88app 下载ess解决方案

如果你不跑步论文,然后使用滑下optin的代码对您来说会略有不同。首先,根据需要在主题中输入下面的PHP代码。

如果(!)_page(“主页”)是_吗?>
             

你独特的信息会出现在这里

X-NO,我不想从我的博客中赚钱

根据你的主题,您可能不需要像上面那样测试主页。您可以使用我们上面使用的jquery。但是,您需要在主题的页脚中调用脚本。使用footer.php中的以下代码。


就CSS而言,我会把上面的CSS添加到主题CSS文件的底部。如上,您很可能希望添加一些CSS,使表单符合您的喜好。

合拢

上面有很多代码,这是一个相当复杂的教程。如果您对代码有任何疑问,亚博体育下载请在下面的评论中留言。

埃里克·宾尼翁是中西部州立大学计算机科学专业的学生。当Eric不在线时,他通常在自己的社区里做志愿者,或者和家人一起享受时光。你可以在上面找到埃里克推特.
分享