我们在使用wordpress建站的时候很多时候都会提供下载资源,但是如果给网站内容页面直接给直链又不太好,给锚文本SEO又因为导出链接过多分散权重。我们经常会看到一些专业的下载站和wordpress主题站都有个wordpress独立下载页面一来是显示网站的专业性,二来在SEO上面也有所优势,三来可以为此页面提供更多的广告位置为网站提供更多盈利,说了这么多好处咱们直接说wordpress集成独立下载方法,希望大家能从本篇wordpress教程中获得新的知识点。

wordpress集成独立下载page页面

复制主题下面page.php文件一份,清空全部内容,并复制以下代码。这里需要在wordpress主题文件夹,images文件夹下面放入自己的QQ群二维码,或者微信二维码,命名为qqgroup.png即可。完成以上步骤,到后台新建页面,选择该页面并发布,固定链接修改为www.xxx.com/down这样的格式。


<?php
/*
Template Name:资源下载
*/
?>
<?php 
 if(isset($_GET['id']) && !empty($_GET['id'])){
 $id = $_GET['id'];
 get_header(); 
?>
<style type="text/css">
#down{height:435px;width:100%;background:#3FB8AF;overflow:hidden;}
#down section{width:1000px;margin:0 auto;}
#down_l{width:500px;text-align:center;position:relative;display: inline-block;}
#down_r{width:500px;float:right;}
.down_ad{margin:15px;border:2px dashed #fff;height:380px;padding:10px;color:#fff}
.down_t{margin-top:50px;margin-bottom:20px}
.down_t a{font-size:24px;font-weight:bold;color:#fff;transition:all 0.3s linear;-webkit-transition:all 0.3s linear;}
.down_t a:hover{text-decoration:underline;color:#FE4365}
.down_i{width:150px;height:170px;display:block;margin:40px auto;font-size:14px;padding:10px 0;}
.down_i p{margin-top:10px;}
.down_b{margin-top:50px}
.down_i img{width:150px;height:150px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.21);-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.21);}
.down_b a{padding:11px 20px;border:3px solid #fff;border-radius:8px;font-size:16px;font-weight:bold;color:#fff;transition:all 0.3s linear;-webkit-transition:all 0.3s linear;}
.down_b a:first-child{margin-right:50px;}
.down_b a:hover{background:#FE4365;border-radius:0;}
@media only screen and (max-width:768px){
#down section{width:100%;}
#down_l{margin:0 auto;}
#down_r{display:none;}
}
</style>
<?php
$args = array(
'post__in' => array($id),
'ignore_sticky_posts' => 1
); 
$query = new Wp_Query($args);
if($query->have_posts()): while ($query->have_posts()) : $query->the_post(); 
?>
<div id="down">
    <section>
 <div id="down_l">
 <div class="down_t"><a href="<?php the_permalink() ?>" target="_blank" rel="bookmark" title="<?php the_title_attribute(); ?>" ><?php the_title(); ?></a></div>
 <div class="down_i"><img src="<?php bloginfo('template_url'); ?>/images/qqgroup.png" alt="扫一扫二维码" /><p>扫一扫加群 338185913</p></div>
 <div class="down_b">
 <?php if(get_post_meta($id, "baidu", true)){
 echo '<a href="'.get_post_meta($id, "baidu", true).'">百度网盘</a>';
 }else{
 echo '<a href="javascript:void(0);">百度网盘</a>';
 } ?>
 <?php if(get_post_meta($id, "yunpan", true)){
 echo '<a href="'.get_post_meta($id, "yunpan", true).'">360云盘</a>';
 }else{
 echo '<a href="javascript:void(0);">360云盘</a>';
 } ?>
 </div>
 
 </div>
 <div id="down_r">
 <div class="down_ad">这里是广告</div>
 </div>
 </section>
</div>
<?php
 endwhile;endif;
 get_footer();
 }else{
 wp_redirect(get_bloginfo('url'));
 }
 ?>

wordpress集成独立下载文章页面修改

请把以下代码放进single.php文件中the_content();下面一行即可。


<?php
if(get_post_meta('baidu') || get_post_meta('yunpan')){
echo '<span class="btnDown"><a href="'.bloginfo("url").'/down?id='.$post->ID.'" target="_blank">点击下载</a></span>';
?>

wordpress集成独立下载页面css样式


.btnDown{    
    display: inline-block;
    background: #63A8DF;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 0 4px 1px rgba(0,150,0,0.3);
    border-radius: 4px;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 30px 30px;
    min-width:100px;
    margin:10px auto;
}

wordpress集成独立下载发布文章设置

新建文章时,新建自定义栏目,设置如下:
名称:baidu 值:百度网盘分享链接 名称:yunpan 值:360网盘分享链接
以上就是wordpress集成独立下载页面教程,如果您对wordpress开发感兴趣我们还有更多的wordpress教程