445IT之家
首頁 運營策劃 推廣優化 網上賺錢 站長新聞 網站制作 站長雜談 網頁制作 服務器 編程 電腦相關 論壇
您現在的位置:首頁 >> 網站制作 >> wordpress教程 >> 內容

wordpress網站加入掃微信和支付寶二維碼打賞功能方法

時間:2018/10/6 13:47:20 點擊:

  核心提示: 最近網站流量處于上漲態勢,那咱也為自己網站加個打賞功能,追一下內容付費的潮流。話不多說,方法如下。 1.functions.php,在最后面空白處添加代碼如下: //打賞 function orwei_ds_alipay_wechat(){ echo section class=to-tipdi...

最近網站流量處于上漲態勢,那咱也為自己網站加個打賞功能,追一下內容付費的潮流。話不多說,方法如下。

 

1.functions.php,在最后面空白處添加代碼如下:

//打賞

function orwei_ds_alipay_wechat(){

echo ‘<section class=”to-tip”><div class=”inner”><div class=”top-tip-shap”><a>賞<span class=”code”><img alt=”” src=”你的二維碼所在位置”></span></a><p>這篇文章對俺有幫助,打賞犒勞下作者吧〜</p></div></div></section>’;

}

注意,此處只用到一個圖片,圖片是在ps中,合成了微信二維碼和支付寶二維碼。

(因文章不能使用帶二維碼的圖片,你可以想像一下,就是兩個二維碼左右擺放在一排)

 

2.將此功能添加至文章內容頁面single.php,一行代碼即可。

<?php echo orwei_ds_alipay_wechat();?>

如參考文章所示,通常此代碼是加在<?php the_content(); ?>后面,你也可以選擇其他位置。

 

3.樣式,style.css中添加打賞的樣式,可以自行修改美化。

@media (max-width: 800px) {

.to-tip {display:none !important}

}

.to-tip {

background:#fff;

text-align:center

}

.to-tip .inner {

display:inline-block;

margin-bottom:40px;

}

.to-tip .top-tip-shap {

border-radius:100%

}

.to-tip a {

display:block;

width:75px;

height:75px;

border:1px solid #eee;

border-radius:100%;

line-height:75px;

color:#FFF;

font-size:32px;

font-weight:bold;

background:#ff9800;

position:relative;margin:0 auto;

}

.to-tip a:hover .code {

display:block

}

.to-tip div {

color:#666;

margin-top:4px

}

.to-tip .code {

position:absolute;

padding:20px;

border:1px solid #e6e6e6;

background-color:#fff;

line-height:14px;

width:360px;

height:224px;

top:-200px;

left:50%;

-webkit-transform:translate3d(-50%, 0, 0);

transform:translate3d(-50%, 0, 0);

display:none

}

.to-tip .code:before,.to-tip .code:after {

position:absolute;

content:””;

border:10px solid transparent

}

.to-tip .code:before {

border-top-color:#e6e6e6;

left:50%;

margin-left:-10px;

bottom:-20px

}

.to-tip .code:after {

border-top-color:#fff;

left:50%;

margin-left:-10px;

bottom:-19px

}

.to-tip .code img {

width:360px;

height:223px

}

.to-tip .code b {

color:#333;

font-size:12px;

font-weight:normal

}

作者:不詳 來源:網絡
發表評論
  • 大名:
  • 內容:
評論列表
  • 好站推薦
  • 笑死人不償命的笑話
  • 文章閱讀網
  • 關于愛情的句子
  • 好句子大全
  • 最新個性簽名
  • 英語作文帶翻譯
  • 傷心網
  • 汽車之家報價
  • 汽車之家論壇
  • 汽車改裝網
  • 汽車改裝網
  • 汽車銷量排行榜
  • SUV銷量排行榜
  • SUV銷量排行榜
  • 汽車排行榜
  • 本類推薦
    • 沒有
  • 網站介紹 | 投稿指南 | 廣告合作 | 聯系我們 | 又問必答
  • 445IT之家(www.lbegpf.tw) © 2018 版權所有 All Rights Reserved.
  • 冀ICP備:05024815號
  • Powered by 445IT之家
  • 内蒙古十一选五走势图下载