Wordpress PHP link inside Javascript（用于 Photoswipe 自定义分享 URL）

Question

我想知道是否有办法将我的 Wordpress 附件 link 放入 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(); ?>，而不是实际的 link（例如：home.com/attachment-page），当我使用此 php 时它确实显示正确循环中的代码。

如何让 url 输出 link 而不是实际的 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 文件中（对我原来的 post 进行了一些额外修复）：

    (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 排队来获取循环中附件的基础 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 enqueue脚本函数来实现

详情请关注下方link

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 插件中。

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

Wordpress PHP link inside Javascript（用于 Photoswipe 自定义分享 URL）

Wordpress PHP link inside Javascript (for Photoswipe Custom Share URL)

javascript

php

wordpress

attachment

photoswipe