如何使用短代码实现点击广告后显示下载地址功能

以前站长们惯用的一种方式，让用户先点击广告后，才能看到真正想要的内容，用的最多的就是点击广告后显示下载地址，不少wordpress的博主都希望在自己的博客中实现这一点，本文通过对wordpress简码的形式来展现这种功能，希望对需要的博主有所帮助。这功能对广告收入很有帮助，但却丧失了用户体验，尽量还是不要频率使用。

定义短码

打开你使用主题的functions.php，定义你的短码，假设我们定义的短码是addown。如下：

//广告点击下载
function iesay_dl($atts, $content = null) {
                $output = '<base target="_blank" onclick="javascript:will()" />';
	        $output = '<div id="clickad">';
		$output = '<script type="text/javascript">var cpro_id = "u2566215";</script><script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>';//广告代码，任意替换''之间的代码。
		$output = '<a href="#" target="_self">点击上面的广告后，显示下载地址，如无法显示广告，请确认禁用你的广告插件或把本站添加到白名单</a>';//文字提醒，任意修改。
		$output = '</div>';
		$output = '<div id="oUrl" style="display:\'none\'">';
		$output = '<<script language="javascript">function JyDownH(htmlurl){var newwin=window.open(htmlurl,\'\',\'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no\');return false;}
34</script>';
		$output .= do_shortcode($content) .'</div>';
		
		return $output;
	}
	add_shortcode("addown", "iesay_dl");

加载必要的js

短代码有了。需要我们加载必要的js。代码如下：

function will() {
if (event.srcElement.tagName=='A'||event.srcElement.tagName=='IMG') {
    window.focus();
    oUrl.style.display = "";
    clickad.style.display = "none";
    document.cookie='goodfont=yes';
    }
}
function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1)
      end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
  }
  return returnvalue;
}

你可以把上面的代码保存为一个js文件，如adclick.js。并将它放在你的主题目录下，一般是js文件夹下。然后打开functions.php文件，加入以下代码：

function iesay_shortcode_scripts(){
  global $post;
  if( has_shortcode( $post->post_content, 'addown') ){
    wp_enqueue_script( 'ad-script', get_template_directory_uri() . '/js/adclick.js', false, '1.0', true );//检测到有使用短码后需要加载的js
  }
}
add_action( 'wp_enqueue_scripts', 'iesay_shortcode_scripts');

定义CSS样式

本教程涉及到两个css类，即：#clickad和#oUrl。你可以自己怎么定义好看自己定义。并把定义的css复制到你的主题style.css文件末尾。这里就不做教程了。

定义编辑器按钮

有了短码，我们需要的就是在编辑器中加入短码按钮，这样方便我们以后编写文章的时候进行操作。不过你记得短码，这个步骤可以忽略。

同样打开functions.php文件，加入下面的代码

//下载按钮
function iesay_add_ad_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'addown', ' 广告下载', '\n[addown]下载地址 . 下载地址[/addown]', "" );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'iesay_add_ad_quicktags' );

总结

其实整个教程很简单，核心就是通过js判断广告点击。

对于没有基础知识的朋友。我做了一个简单的整合。你只需要下载文章后的addown.php文件，放在你的主题目录下。在functions.php文件中引用即可。引用代码为：

include_once get_stylesheet_directory() . '/addown.php';

本教程涉及到的文件下载地址：

此处内容需要登录并发表评论才可见