利用FancyBox实现WordPress弹窗下载

454次阅读
没有评论

今天又折腾了一天Wordpress,之前提到了给模板传递值。 [neilian ids=215]

所以就想办法写了一个传递值的弹窗下载。首先是给Wordpress添加短代码:

function TanChuang($atts, $content = null)
{
    ob_start();  
    set_query_var( 'args', shortcode_atts(array(
        "a" => '百度云:www.baidu.com|狗蛋云:goudan.com',
        "filename" => '',
        "password" => '',
        "size" => ''
    ), $atts));
    get_template_part('/pages/tanchuang');
    return ob_get_clean();   
}
add_shortcode("tcxz", "TanChuang");

 

然后在/pages/下面创建一个tanchuang.php的文件:

<style>
  .download-area {}
  .download-area li {
    color: #FFF;
    margin-bottom: 30px;
    margin-right: 5px;
    float: left;
  }
  .download-area a {
    display: inline-block;
    background: #5fbaac;
    border: 2px solid #fff;
    border-radius: 2px;
    background: #5fbaac;
    box-shadow: 0 0 0 1px #EEE;
    padding: 10px 10px;
    color: white;
  }
</style>
<?php
$args = get_query_var('args');
extract($args);
?>
<table class="dltable">
  <tbody>
    <tr>
      <td style="background-color:#F9F9F9;" rowspan="3">
        <p>文件下载</p>
      </td>
      <td><i class="fa fa-list-alt"></i> 文件名称: <?php echo $filename; ?></td>
      <td><i class="fa fa-th-large"></i> 文件大小: <?php echo $size; ?></td>
    </tr>
    <tr>
      <td colspan="2"><i class="fa fa-volume-up"></i> 下载声明: <?php echo git_get_option('git_fancydlcp') ?></td>
    </tr>
    <tr>
      <td colspan="2"><i class="fa fa-download"></i> 下载地址: <a class="dl" id="showdiv" href="#bdybox">点击下载</a></td>
    </tr>
  </tbody>
</table>
<div id="bdybox" style="display:none; ">
  <div class="part">
    <h2>下载声明:</h2>
    <div class="fancydlads" text-align="left">
      <p><?php echo git_get_option('git_fancydlcp') ?> </p>
    </div>
  </div>
  <div class="part">
    <h2>文件信息:</h2>
    <div class="dlnotice" textalign="left">
      <p>文件名称: <?php echo $filename  ?></p>
      <?php if ($password) echo '<p>下载密码: ' . $password . '</p>'; ?>
      <?php if ($size) echo '<p>文件大小: ' . $size . '</p>'; ?>
    </div>
  </div>
  <div class="part download-area">
    <h2>下载地址:</h2>
    <?php
    //马的这也太危险了
    foreach (explode('|', $a) as $v) {
      $b = explode(':', $v);
      echo sprintf('
<a target="_blank" href="%s" rel="nofollow noopener noreferrer" title=""><span>%s</span></a>
', $b[1], $b[0]);
    }
    ?>
  </div>
  <div class="dlfooter"></div>
</div>

还需要在js里面引用fancybox,不过这个坑以后再填,先看看理想效果,其实这段代码还有问题,需要用正则表达式。 利用FancyBox实现Wordpress弹窗下载

每天学
版权声明:本站原创文章,由每天学2020-03-14发表,共计1867字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
载入中...