Question

我想将Wordpress永久链接函数the_permalink();实现到Javascript脚本中，该脚本应该在我的网站的移动视图中显示带有顶部按钮的社交栏。

以下脚本有效，但永久链接功能除外，如果单击Twitter按钮，则不会显示正确的URL。它只显示在共享屏幕上。

我该怎么做呢？

jQuery(function ($) {

// Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
var back_to_top_button = ['<a href="#top" class="back-to-top"><span class="fawesome fa fa-chevron-up"></span><br/>Top</a><!-- Sharebar --><div class="sharerbar"><a href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink();?>&utm_source=twsharebutton" onclick="if( typeof ga != "undefined" ) { var ts = ga.getAll(); for (var i=0; i < ts.length; ++i) { var t = ts[i]; ga(t.get("name")+".send","event","Sharebar","click","Twitter",1); } } if( typeof _gaq_trackers != "undefined" ) { for (var i=0; i < _gaq_trackers.length; ++i) { var t = _gaq_trackers[i]; _gaq.push([t+"._trackEvent","Sharebar","click","Twitter",1]); } } ;" class="sblink sblinktw" rel="nofollow"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<script src="https://use.fontawesome.com/80f4511a15.js" async></script></div><!-- Sharebar -->'].join("");
$("body").append(back_to_top_button)

// Der Button wird ausgeblendet
$(".back-to-top").hide();
$(".sharerbar").hide();

// Funktion für das Scroll-Verhalten
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
            $('.back-to-top').fadeIn();
            /*$('.sharerbar').fadeIn();*/
        } else {
            $('.back-to-top').fadeOut();
            /*$('.sharerbar').fadeOut();*/
        }
    });

    $('.back-to-top').click(function () { // Klick auf den Button
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});

});

Answer 1

它无法正常工作，因为您正在将PHP代码转换为字符串。你可以这样做。

var title = <?php the_title(); ?>;
var permalink = <?php the_permalink(); ?>;

var back_to_top_button = ['<a href="#top" class="back-to-top"><span class="fawesome fa fa-chevron-up"></span><br/>Top</a><!-- Sharebar --><div class="sharerbar"><a href="https://twitter.com/intent/tweet?text='+ title +'&url='+ permalink +'&utm_source=twsharebutton" onclick="if( typeof ga != "undefined" ) { var ts = ga.getAll(); for (var i=0; i < ts.length; ++i) { var t = ts[i]; ga(t.get("name")+".send","event","Sharebar","click","Twitter",1); } } if( typeof _gaq_trackers != "undefined" ) { for (var i=0; i < _gaq_trackers.length; ++i) { var t = _gaq_trackers[i]; _gaq.push([t+"._trackEvent","Sharebar","click","Twitter",1]); } } ;" class="sblink sblinktw" rel="nofollow"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    <script src="https://use.fontawesome.com/80f4511a15.js" async></script></div><!-- Sharebar -->']

注意：只有在您要加载the_title()的页面上为JS时才会有效。如果你想在一个单独的JS文件中运行它，你需要使用AJAX。

Answer 2

我已更新您的代码。请试一试。我希望它对你有用。

 jQuery(function ($) {

        var the_title = "<?php echo get_the_title(); ?>";
        var the_permlink = "<?php echo get_the_permalink();?>";

        // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
        var back_to_top_button = ['<a href="#top" class="back-to-top"><span class="fawesome fa fa-chevron-up"></span><br/>Top</a><!-- Sharebar --><div class="sharerbar"><a href="https://twitter.com/intent/tweet?text='+the_title+'&url='+the_permlink+'&utm_source=twsharebutton" onclick="if( typeof ga != "undefined" ) { var ts = ga.getAll(); for (var i=0; i < ts.length; ++i) { var t = ts[i]; ga(t.get("name")+".send","event","Sharebar","click","Twitter",1); } } if( typeof _gaq_trackers != "undefined" ) { for (var i=0; i < _gaq_trackers.length; ++i) { var t = _gaq_trackers[i]; _gaq.push([t+"._trackEvent","Sharebar","click","Twitter",1]); } } ;" class="sblink sblinktw" rel="nofollow"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        <script src="https://use.fontawesome.com/80f4511a15.js" async></script></div><!-- Sharebar -->'].join("");
        $("body").append(back_to_top_button)

        // Der Button wird ausgeblendet
        $(".back-to-top").hide();
        $(".sharerbar").hide();

        // Funktion für das Scroll-Verhalten
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
                    $('.back-to-top').fadeIn();
                    /*$('.sharerbar').fadeIn();*/
                } else {
                    $('.back-to-top').fadeOut();
                    /*$('.sharerbar').fadeOut();*/
                }
            });

            $('.back-to-top').click(function () { // Klick auf den Button
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });

        });

注意： the_title()和the_permalink()仅在循环内工作。

如何实现Wordpress＆＃39; the_permalink（）;进入Javascript？

2 个答案: