Javascript 中的 Wordpress PHP 链接（用于 Photoswipe 自定义共享 URL）

Question

我想知道是否有办法将我的 Wordpress 附件链接放入 javascript 函数中。简单来说，它的功能如下：

$attach_url = "<?php echo wp_get_attachment_url(); ?>";
function () {
    return $attach_url;
}

更具体地说，我正在寻找一种使用 Photoswipe 的分享按钮（完整源代码here）来实现它的方法：

    $attach_url = = "<?php echo wp_get_attachment_url(); ?>";

    (this, function () {
        'use strict';
    var PhotoSwipeUI_Default =
     function(pswp, framework) {
    shareButtons: [
                {url:'https://www.facebook.com/sharer/sharer.php?u={{attachment_pg_url}}'},
            ],  
            getAttachmentPageURL: function ( shareButtonData ) {
                return $attach_url;},
            parseShareButtonOut: function(shareButtonData, shareButtonOut) {
                return shareButtonOut;
            },
        _updateShareURLs = function() {
        var shareButtonOut = '',
                        shareButtonData,
                        shareURL,
                        attachment_pg_url;
        for(var i = 0; i < _options.shareButtons.length; i++) {
                        shareButtonData = _options.shareButtons[i];

                        attachment_pg_url = _options.getAttachmentPageURL(shareButtonData);

                        shareURL = shareButtonData.url.replace('{{attachment_pg_url}}', attachment_pg_url );

非常感谢任何帮助！

编辑

这是我更新的代码，几乎可以使用。 js 文件正在解释来自functions.php 的入队脚本。但是，显示的 url 是<?php echo get_attachment_link(); ?>，而不是实际链接（例如：home.com/attachment-page），当我在循环中使用此 php 代码时，它确实显示正确。

如何获取 url 来输出链接，而不是实际的 php 代码？

在functions.php中：

    // Custom Photoswipe Share URL  
    wp_enqueue_script( 'photoswipe_custom_share_link', get_template_directory_uri() . '/custom_path_here/photoswipe-ui-single-item.js' );
    $attach_url = "<?php echo get_attachment_link(); ?>";
    wp_localize_script( 'photoswipe_custom_share_link', 'pswp_custom_share', $attach_url );

在 Photoswipe js 文件中（在我的原始帖子中进行了一些额外的修复）：

    (this, function () {
        'use strict';
    var PhotoSwipeUI_Default =
     function(pswp, framework) {
    shareButtons: [
                {url:'https://www.facebook.com/sharer/sharer.php?u={{attach_url}}'},
            ],  
            getAttachmentURLForShare: function ( /*shareButtonData */) {
            return pswp_custom_share;
            },
            parseShareButtonOut: function(shareButtonData, shareButtonOut) {
                return shareButtonOut;
            },
        _updateShareURLs = function() {
        var shareButtonOut = '',
                        shareButtonData,
                        shareURL,
                        attachment_url;
        for(var i = 0; i < _options.shareButtons.length; i++) {
                        shareButtonData = _options.shareButtons[i];

                        attachment_url = _options.getAttachmentURLForShare(shareButtonData);

                        shareURL = shareButtonData.url.replace('{{attach_url}}', encodeURIComponent(attachment_url) );

编辑

我在入队脚本中使用引号时犯了一个错误。使用下面的代码，格式现在是正确的。唯一的问题是 url 输出是“home.com”而不是“home.com/attachment-page”。

如何在循环之外定义动态生成的附件页面 url？我需要回应吗？

$attach_url = get_attachment_link($attachment->ID);

编辑 - 已解决！

我需要使用 JavaScript enqueue 在循环中获取附件的基本 url。 （基于答案here 并在 thedarkcoder 的帮助下）。

在functions.php中：

// Custom Photoswipe Share URL
function pswp_custom_share()
     {  
         /* Get the ID of the current post */
         global $post;
         $ID = $post->ID;

         /* register the script */
         wp_register_script( 'photoswipe_custom_share_link', get_template_directory_uri() . 'custom_path_here/photoswipe-ui-single-item.js', array('jquery'), false, true );
         $attach_url = array(
             'attachment_page'    => get_attachment_link( $ID )
         );
         wp_enqueue_script( 'photoswipe_custom_share_link' );
         wp_localize_script('photoswipe_custom_share_link', 'attach_url', $attach_url);

    }

     /* If we're not in the admin section call our function on the wp_enqueue_scripts hook  */
     if ( !is_admin() ) add_action( "wp_enqueue_scripts", "pswp_custom_share", 10 );

在Photoswipe js文件中：

getAttachmentURLForShare: function ( /*shareButtonData */) {
                return attach_url.attachment_page;
            },

Answer 1

你可以使用WordPress的入队脚本功能来实现这个

请点击以下链接了解详细信息

https://code.tutsplus.com/tutorials/how-to-pass-php-data-and-strings-to-javascript-in-wordpress--wp-34699

如果它解决了您的问题，请告诉我

Answer 2

理论上应该是可能的，因为 PHP 在客户端运行 javascript 之前是在服务器端处理的。

我注意到您的脚本缺少 wp_get_attachment_url 函数中的附件 ID。

来自 Wordpress API 文档：

<?php echo wp_get_attachment_url( 12 ); ?> 

第一步是通过将附件 URL 回显到页面来在基本级别上测试功能。完成此操作后，您就知道自己正确地挂钩了该函数。

然后将该值分配给 JavaScript 变量并尝试运行某种警报或控制台日志以验证您是否可以成功地将 URL 解析为全局 JS 变量。

然后看看您是否可以从函数内部访问该变量。如果您可以逐步完成上述每个基本步骤，那么您应该可以将这些数据解析到 Photoswipe 插件中。

如果您遇到困难，请告诉我，我会尽我所能提供帮助。