将js变量放入wordpress函数中

Put js variable inside wordpress function

本文关键字：wordpress 函数 js 变量      更新时间：2023-09-26

我遇到了一个问题。我用的是太平洋式弹出。在弹出窗口下面，我添加了一个按钮来下载图像和不同的动作，如社交图标等。

所以，我需要找出上传到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]; 
}

现在我可以找到文件大小了如果我把image的链接像这样放到这个函数中:

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>

注。看看变量链接在哪里。我怎么把js变量放在那里?

提前谢谢你!

你可以像这样在隐藏字段中打印图像大小:

<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>

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

你可能想看看wp_localize_script()。这个函数获取PHP运行时可用的信息，并将其放入一个JavaScript变量中，然后您可以在JavaScript脚本中使用该变量。

在(可能的)情况下，你不知道在PHP运行时你需要的文件大小(例如，当你有一个巨大的文件列表，并不想预先获取所有文件的文件大小)你的解决方案将是AJAX。这更复杂，但是一旦你理解了它是如何工作的，你就可以用它做很多令人兴奋的事情。步骤如下:

  1. 在你的JavaScript文件中，你"调用"一个URL。在本例中，URL是您的WordPress站点。这个调用是由JavaScript进行的，所以用户不会看到它的任何内容。你可以在这个调用中添加额外的数据(变量)。
  2. 告诉WordPress如何处理这个调用。再一次，用户看不到这一点。在正常情况下，该调用的输出将显示在浏览器中，而不是从步骤1传递回调用JavaScript文件。
  3. 当你的JavaScript文件收到一个响应后，你可以用任何你喜欢的方式来使用这个响应。

翻译成你的情况:JavScript脚本运行时弹出打开。这个脚本调用WordPress, WordPress用你的文件大小函数处理调用并返回文件大小，JavaScript脚本取文件大小并将其添加到链接按钮。

使用jQuery使AJAX调用的整个过程更加简单。

相关文章：