如何创建快捷代码以在任何页面或帖子上显示转到顶部按钮

时间:2015-09-15 作者:sumit

我正在创建一个wordpress网站,在每个页面上我都需要转到顶部按钮。所以我想得到一些短代码来做这件事,这样我就可以在任何地方插入。谢谢

1 个回复
最合适的回答,由SO网友:dev 整理而成

您好,您可以在函数中使用以下代码。php

    add_action( \'init\', \'register_shortcodes\');
function register_shortcodes(){
   add_shortcode(\'go-to-top\', \'gtp_function\');
}


function gtp_function($atts) {
  extract(shortcode_atts(array(
      \'text\' => \'<i class="fa fa-arrow-circle-up fa-3"></i>\',
      \'speed\'=>500,
      \'bottom\'=>20,
      \'right\'=> 20
   ), $atts));
   ?>
  <script>
  $ = jQuery.noConflict();
      (function($){
                $.fn.addScrollToTopButton = function(options){
                    var $t = $(this);

                        var settings = $.extend({
                            text : "<a href=\'#\' style=\'opacity:0.5; font-size:40px\' onmouseleave=\\"this.style.color=\'grey\'\\" onMouseOver=\\"this.style.color=\'#0066CC\'\\"><i class=\'fa fa-arrow-circle-up fa-6\'></i></a>",
                            speed: 500,
                            bottom:20,
                            right: 20
                        },options);

                        return this.each(function(){
                            $t.html(settings.text);
                            $t.css({\'position\':\'fixed\', \'bottom\':settings.bottom , \'right\':settings.right});
                            $t.hide();
                            $(document).scroll(function(){
                                if($(document).scrollTop()==0)
                                {
                                    $t.fadeOut(200);
                                }
                                else
                                {
                                    $t.fadeIn(200);
                                }
                            });

                            $(this).click(function(){
                                if($(document).scrollTop()!=0)
                                {

                                    $(\'html,body\').animate({scrollTop:0},settings.speed);
                                }
                            });
                        });
                }
            }(jQuery));
          $(function(){
                $(\'body\').append(\'<div id="gtp"></div>\');

                $(\'#gtp\').addScrollToTopButton({speed:"<?php echo $speed ?>"});
            });
  </script>
  <?php

}

相关推荐

Namespaced shortcode?

我正在改造一个旧的WP站点,该站点有许多自定义的短代码,显然由于代码当前的组织方式,这些短代码在性能方面付出了代价。当然,我可以修复优化不好的代码,使用十几个短代码,并且一天就可以完成,但我想知道如何更好地组织它们。根据WordPress\'documentation, 建议将它们放在插件中并在上初始化init. 我们可以通过这样“命名”它们来减少这个钩子中的负载吗?[com.company shortcode attr=\"attr\" prop=\"prop\"] 有人尝试过这样的解决方案吗