通過PHP（WP插件）將數組發送到前端JS變量，然后替換頁面上的href鏈接（如果存在）

Question

我有一個已開發的自定義WordPress插件，它已部分完成，它使用的客戶編號是從單獨的插件中提取的。 然后，我接受客戶＃，將其通過PDO連接傳遞到本地數據庫（內部），並返回一系列Amazon S3中音頻文件的自定義鏈接。 這些鏈接的范圍從10個鏈接到〜138個鏈接不等。 它們具有一個“ productID”，將在下載鏈接的前端頁面上設置為id =“ productIDhere”。

我需要將數組傳遞給JavaScript，然后讓JavaScript替換這些URL（如果存在）（如果不存在），然后繼續並將默認鏈接保留在原處。

1.）如何將數組從WP插件傳遞到JavaScript？

2.）我將如何編碼JavaScript來拾取數組，然后搜索要替換的html鏈接，然后如果它們存在於數組中，則實際替換它們。

Answer 1

如何從WP插件將數組傳遞給JavaScript？

WordPress HeartBeat API非常適合此類功能。 由於您沒有提供示例代碼，因此我將使用我自己的示例。 另外，請查看本教程： http : //code.tutsplus.com/tutorials/the-heartbeat-api-getting-started--wp-32446

以及一些其他文檔： https : //developer.wordpress.org/reference/hooks/heartbeat_received/

<?php
add_filter( 'heartbeat_received', function ( $response, $data, $screen_id ) {
    if ( isset( $data['something-to-enqueue'] ) ) {
        $response['something-to-enqueue'] = array('some-array' => 'this is my array');
    }
    return $response;
}, 10, 3 );
?>

 var name = 'something-to-enqueue'; wp.heartbeat.enqueue(name, { 'key': 'some-key', 'value': 'some-val' }, false); wp.heartbeat.connectNow(); jQuery(document).on('heartbeat-tick.' + name, function(event, data) { console.log(data[name]); /* do something with the array from php */ wp.heartbeat.dequeue(name); }); 

我將如何編碼JavaScript來拾取數組，然后搜索要替換的html鏈接，然后如果它們存在於數組中，則實際替換它們。

答案的這一部分用ES6編寫。

<p>Lorem ipsum dolor sit amet, <a href="http://stackoverflow.com/questions/tagged/wordpress">wordpress on so</a> adipiscing elit. Duis tempor maximus purus, nec ullamcorper leo. Cras tortor ligula, blandit vel dolor eget, posuere eleifend dolor. Praesent tempus dui vel arcu imperdiet, eu placerat erat pulvinar. Vestibulum a <a href="http://stackoverflow.com/questions/tagged/javascript">javascript on so</a> viverra, feugiat ante pharetra, accumsan orci. Nulla vel lorem non odio ornare scelerisque quis a justo. Ut et placerat arcu. Ut dolor velit, interdum ac dolor aliquet, <a href="http://stackoverflow.com/">StackOverflow</a> pulvinar lacus. Vestibulum at nulla gravida, blandit lorem nec, hendrerit ipsum. Fusce dui odio, pellentesque at dictum sit amet, porttitor tincidunt ex.</p>

(function(urls){
    /**
     * rewrite links.
     * Rewrites the urls and domains respectively.
     * Do not analyze a link more than once.
     * Loop is resource heavy and has to go through every single link on page.
     */

    function getNewLinks (map, links) {
        /**
         * @param {object} map
         * Loop over all links and repalce origin with appropriate beta site
         */

        return [...links].map(function(link) {
            /** See if the link matches a key from the map */
            if (map.has(link.href)) {
                let newLink = link.href = link.href.replace(new RegExp(link.href, 'gi'), map.get(link.href)());
                return newLink;
            }
        }).filter(link => link !== null && link !== undefined);
    }

    var objectMap = new Map(),
        getHeartBeatAPI = () => 'http://wordpress.stackexchange.com/questions/tagged/heartbeat-api',
        getWPJS = () => 'http://wordpress.stackexchange.com/questions/tagged/javascript';


    /* you may need to do this differently, since you're url are from the heartbeat array, again you didn't provide any sample code to go off. */
    objectMap
        .set('http://stackoverflow.com/questions/tagged/wordpress', getHeartBeatAPI)
        .set('http://stackoverflow.com/questions/tagged/javascript', getWPJS);

    return getNewLinks(objectMap, urls);
}(document.links));