我想在wordpress博客中为社交分享按钮创建一个bootstrap模式。为了使模态可见,我必须将它放在帖子(循环)之外,但它的触发器(按钮)位于帖子内。我想将帖子的URL和标题传递给模态中的共享按钮。 我在帖子中创建了两个变量来获取其URL和标题:
<?php
// Get current post URL
$URL = get_permalink();
// Get current post title
$Title = str_replace( ' ', '%20', get_the_title()); ?>
然后,我在帖子中创建了触发器来显示模态
<button class="btn btn-link btn-lg" id="socialbtn" data-toggle="modal" data-target="#myModal">Share</button>
在模态体中,我有很多按钮,比如
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=***URL of the post***">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=$URL&text=$Title$" >Twitter</a>
我想要做的是将Facebook和Twitter的href中的$ URL替换为帖子的URL以及标题。 我知道我必须使用JavaScript,但我无法弄清楚正确的语法。 将感谢您的帮助。 :)
答案 0 :(得分:0)
您必须使用PHP输出它们:
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=<?php echo $URL; ?>">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=<?php echo $URL; ?>&text=<?php echo $Title; ?>" >Twitter</a>
答案 1 :(得分:0)
$(&#34; .ssk-facebook&#34;)。attr(&#34; href&#34;,&#34; YourNewURL&#34;);
$(&#34; .ssk-twitter&#34;)。attr(&#34; href&#34;,&#34; YourNewURL&#34;);
答案 2 :(得分:0)
$( "#socialbtn" ).click(function() {
$(".ssk-facebook").attr("href", "https://www.facebook.com/sharer.php?u=<?= $URL ?>");
$(".ssk-twitter").attr("href", "https://twitter.com/share?url=<?= $URL ?>&text=<?= $Title ?>");
});
答案 3 :(得分:0)
使用数据属性为每个帖子的分享按钮添加链接: -
<强> HTML 强>
<!-- Share button (PLACE IT INSIDE YOUR LOOP) -->
<a data-url="<?php echo url; ?>" data-title="<?php echo $title;?>" class="open-share btn btn-primary" href="#">share</a>
<!-- Model popup (PLACE IT AFTER LOOP) -->
<div class="modal hide" id="sharepopup">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Share </h3>
</div>
<div class="modal-body">
<a id="facebook" class="ssk ssk-text ssk-facebook">Facebook</a>
<a id="twitter" class="ssk ssk-text ssk-twitter" >Twitter</a>
</div>
</div>
<强> JS 强>
<script>
$(document).on("click", ".open-share", function () {
var url = $(this).data('url');
var title = $(this).data('title');
$('#facebook').attr("href", "http://facebook.com?share="+url);
$('#facebook').attr("title", "http://twitter.com?share"+title);
$('#twitter').attr("href", url);
$('#twitter').attr("title", title);
// Initialize popup with Javascript.
$('#sharepopup').modal('show');
});
</script>
答案 4 :(得分:0)
您必须确定用户点击了哪个按钮。
您可以使用唯一ID或通过为每个帖子添加包含正确href的隐藏输入或div来存档。
然后选择那些&#34; href-container&#34;相对于按钮并改变模态。 (&#34; nearest(),parent(),nextAll()等。)
您是否需要代码示例?
答案 5 :(得分:0)
我是这样做的: 在触发按钮中,我按如下方式设置数据属性:
<button class="btn btn-link btn-lg" id="socialbtn" data-url="<?php echo $URL; ?>" data-title="<?php echo $Title; ?>">Share</button>
然后在单独的变量中获取facebook和twitter URL,然后按如下方式设置href属性:
<script>
$(document).on("click", "#socialbtn", function () {
var url = $(this).data('url');
var title = $(this).data('title');
var fburl = "https://www.facebook.com/sharer.php?u="+url;
var twurl = "https://twitter.com/share?url="+url+"&text="+title;
$("#facebook").attr("href", fburl);
$("#twitter").attr("href", twurl);
</script>
在模态体中,使用锚标记如下:
<a class="ssk ssk-text ssk-facebook" id="facebook" href="#">Facebook</a>
<a class="ssk ssk-text ssk-twitter" id="twitter" href="#">Twitter</a>