[英]send an array via PHP (WP plugin) to a front-end JS variable, then replace href links on the page (if exists)
I have a custom WordPress plugin that I've developed, it's partially completed, It uses a customer number that's pulled from a separate plugin. 我有一个已开发的自定义WordPress插件,它已部分完成,它使用的客户编号是从单独的插件中提取的。 Then I take the customer #, pass it through a PDO connection to a local DB (in-house) and return an array of customized links for audio files in Amazon's S3. 然后,我接受客户#,将其通过PDO连接传递到本地数据库(内部),并返回一系列Amazon S3中音频文件的自定义链接。 These links vary anywhere from 10 links to ~138 links. 这些链接的范围从10个链接到〜138个链接不等。 They have a "productID" which will be set as the id="productIDhere" on the front end page for the download links. 它们具有一个“ productID”,将在下载链接的前端页面上设置为id =“ productIDhere”。
I need to pass the array over to JavaScript, then have JavaScript replace these URL's (if they exist) if not then go ahead and leave the default links in place. 我需要将数组传递给JavaScript,然后让JavaScript替换这些URL(如果存在)(如果不存在),然后继续并将默认链接保留在原处。
1.) How do I pass the Array over to JavaScript from the WP plugin? 1.)如何将数组从WP插件传递到JavaScript?
2.) How would I code the JavaScript to pick up the array, then search for the html links to replace, then actually replace them if they exist within the array. 2.)我将如何编码JavaScript来拾取数组,然后搜索要替换的html链接,然后如果它们存在于数组中,则实际替换它们。
How do I pass the Array over to JavaScript from the WP plugin? 如何从WP插件将数组传递给JavaScript?
WordPress HeartBeat API is great for features like this. WordPress HeartBeat API非常适合此类功能。 Since you did not provide sample code, I will use my own example. 由于您没有提供示例代码,因此我将使用我自己的示例。 Also, check out this tutorial: http://code.tutsplus.com/tutorials/the-heartbeat-api-getting-started--wp-32446 另外,请查看本教程: http : //code.tutsplus.com/tutorials/the-heartbeat-api-getting-started--wp-32446
And some additional documentation: https://developer.wordpress.org/reference/hooks/heartbeat_received/ 以及一些其他文档: 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); });
How would I code the JavaScript to pick up the array, then search for the html links to replace, then actually replace them if they exist within the array. 我将如何编码JavaScript来拾取数组,然后搜索要替换的html链接,然后如果它们存在于数组中,则实际替换它们。
This portion of the answer is written in ES6. 答案的这一部分用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));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.