• 没啥好说,更新慢

利用FancyBox实现WordPress弹窗下载

Wordpress 每天学 来源:原创 5个月前 (03-14) 209次浏览

今天又折腾了一天Wordpress,之前提到了给模板传递值。

WordPress实现模板参数传递

在开发一个小功能的时候想输出一段html,但内容比较多,如果全写在echo里面感觉跟sb一样,所以研究了一下怎么输出模板并且传递一些参数给模板。 这样就可以传递href、filename、password这三个变量给这个模板。 ob_start(); set_query_var( 'href', $ […]

所以就想办法写了一个传递值的弹窗下载。首先是给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弹窗下载


每天学 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:利用FancyBox实现WordPress弹窗下载
赞(2)
分享到: 更多 (0)

为了阻止垃圾和反动评论,您必须才能发表评论,使用功能只需要1分钟注册好账号!