wordpress - 有没有办法将一个元素添加到wordpress中的所有页面

Question

所以我在 wordpress + 和主索引模板上获得了一些自定义创建的页面，这是我的主页。我想在所有页面上添加滚动到顶部按钮。当我将代码添加到主索引页面时，它仅显示在主页和当我将它添加到页面模板文件时，它只出现在帖子页面上。那么有没有办法让代码在两个页面上都起作用(我有 4 个自定义页面，只是举 2 个例子)而不复制每个文件上的代码？因为如果我制作更多自定义页面，将会复制大量代码，我绝对不希望这样。谢谢:P

Answer 1

footer.php 和 header.php 被所有页面使用(正常)。你可以把这样的代码放在那里。

---

实现“滚动到顶部按钮”的最佳方法是通过 javascript 的 IMO。 javascript 代码可以检查“滚动到顶部按钮”是否合适，因为当内容不太大或实际上位于顶部时，您不需要它。当您向下滚动一定距离时，它会出现在固定位置。

示例(使用 jQuery):

var scroll_top_button_is_visible = false;
var scroll_distance = 500;

var $scroll_top_button = $('<div class="scroll-top-button">back to top</div>');
// inject the button, so you don't have to create the button in any templates
$scroll_top_button.appendTo('body');

$(window).scroll(function() {
  // called on every scroll action
  if ($(window).scrollTop() > scroll_distance && !scroll_top_button_is_visible) {
    scroll_top_button_is_visible = true;
    $scroll_top_button.fadeIn(200);
  } else if ($(window).scrollTop() < scroll_distance && scroll_top_button_is_visible) {
    scroll_top_button_is_visible = false;
    $scroll_top_button.fadeOut(200);
  }
});

// scroll to top if button is clicked
$('.scroll-top-button').click(function() {
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
});

p {
  margin-bottom: 300px;
}

.scroll-top-button {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px;
  color: white;
  background: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="page">
  <h1>Example of a "Scroll to Top Button"</h1>
  <h2>Scroll down and look what happens</h2>
  <p>Some content</p>
   <p>Some content</p>
   <p>Some content</p>
   <p>Some content</p>
   <p>Some content</p>
   <p>Some content</p>
   <p>Some content</p>
   <p>Some content</p>
   <p>Some content</p>
   <p>Some content</p>
</div>