将js变量放在wordpress函数中

时间:2016-09-15 14:16:55

标签: javascript php jquery wordpress

我遇到了问题。我使用Mafnific弹出窗口。在弹出窗口下方,我添加了一个按钮来下载图像和不同的操作,如社交图标等。

所以,我需要找到上传到Wordpress媒体的图像文件大小。我有js变量,我有链接到图像。

对于 functions.php 中的这个,我把一个函数用于通过以下链接搜索此图像的ID:

function pippin_get_image_id($image_url) {
    global $wpdb;
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
        return $attachment[0]; 
}

现在我可以找到文件大小,如果我将一个图像链接放到这个函数中,如下所示:

echo size_format(filesize( get_attached_file(pippin_get_image_id($link)) ),2);

但主要问题是:我现在在js脚本里面,我需要传递给JS变量函数 var link

在一个函数中我有一个片段:

return '<a href="' + link + '" download target="_blank" class="btn btn-success" id="original">Download (<?php echo size_format(filesize( get_attached_file(pippin_get_image_id( VARIABLE LINK )) ),2); ?>)</a>

P.S。看看VARIABLE LINK的位置。 我怎样才能把js变量放在那里?

提前非常感谢你!

2 个答案:

答案 0 :(得分:1)

编辑 - 说明:您想要做的事情不是直接,因为PHP执行在JavaScript执行开始之前就停止了。 PHP是一种服务器端脚本语言,这意味着它在用户从服务器请求页面时运行。它准备页面,停止执行,服务器将结果发送给请求用户。只有这样才会在用户浏览器中显示,并且JavaScript执行(顺便在用户机器上运行)开始。

您可能需要查看wp_localize_script()。此函数获取PHP运行时可用的信息,并将其放入JavaScript变量中,然后可以在JavaScript脚本中使用该变量。

在(可能的)情况下,您在PHP运行时不知道您需要哪个文件大小(例如,当您有大量文件并且不想预取文件时 - 所有这些的尺寸)你的首选解决方案将是 AJAX 。这更复杂,但是一旦你理解它是如何工作的,你就可以用它做很多令人兴奋的事情。过程如下:

  1. 在您的JavaScript文件中,您可以拨打电话&#34;到URL。在这种情况下,URL是您的WordPress网站。此调用由JavaScript进行,因此用户不会看到任何内容。您可以向此调用添加附加数据(变量)。
  2. 你告诉WordPress如何处理这个电话。用户再一次看不出这一点。此调用的输出,在正常情况下,将显示在浏览器中,而是从步骤1传递回调用JavaScript文件。
  3. 在您的呼叫JavaScript文件收到来自呼叫的响应后,您可以以任何您喜欢的方式使用该响应。
  4. 转换为您的案例:打开弹出窗口时会运行JavScript脚本。此脚本调用WordPress,WordPress使用您的文件大小函数处理调用并返回文件大小,JavaScript脚本获取文件大小并将其添加到链接按钮。

    使用jQuery使得AJAX调用的整个过程更加直接。

答案 1 :(得分:1)

您可以在隐藏字段中打印图像尺寸,如下所示:

<input style="display:none" id="image_link" value="<?php echo size_format(filesize( get_attached_file(pippin_get_image_id($link)) ),2); ?>" />

然后在脚本中获取jQuery中的这个值,如下所示:

var imageLink = jQuery('#image_link').val();

return '<a href="' + link + '" download target="_blank" class="btn btn-success" id="original">Download (<?php echo size_format(filesize( get_attached_file(pippin_get_image_id(
'+imageLink +' )) ),2); ?>)</a>