如何为WordPress主题添加一个返回顶部按钮

Posted 2023-04-29

1、打开wordpress后台，选择“外观”–“编辑”–找到“footer.php”，在</body>之前加上下面这段代码：
代码如下

<div id="full" style="
width:50px;
height:95px;
position:fixed;
left:50%; top:420px;
margin-left:493px;
z-index:100;
text-align:center;
cursor:pointer;">
<a><img src="121008370928.png" border=0 alt="返回顶部"></a> </div>

<script type="text/javascript">var isie6 = window.XMLHttpRequest ? false : true; function newtoponload() var c = document.getElementById("full"); function b() var a = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (a > 0) if (isie6) c.style.display = "none"; clearTimeout(window.show); window.show = setTimeout(function () var d = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (d > 0) c.style.display = "block"; c.style.top = (400 + d) + "px" , 300) else c.style.display = "block" else c.style.display = "none" if (isie6) c.style.position = "absolute" window.onscroll = b; b() if (window.attachEvent) window.attachEvent("onload", newtoponload) else window.addEventListener("load", newtoponload, false) document.getElementById("full").onclick = function () window.scrollTo(0, 0) ;</script>
2.然后保存，删除缓存文件即可。 参考技术A WordPress网站返回顶部按钮添加方法：
重写window.onscroll()事件，先将返回顶部div设置为position:fixed;right:10px;bottom:10px;display:none，一旦event.scrollTop>100(100可以设置为你想要的值)就display:block（fadeIn()），否则display:none(fadeOut())。还要设置返回顶部div点击事件，onclick(function()$('body,html').animate(scrollTop:0,1000);)，这个什么意思不用我多说吧，既然搞Jquery，动画还是应该晓得。
<style type="css/text">
#gotopposition:fixed;right:10px;bottom:10px;display:none
</style>
<div id="gotop"></div>
<script type="javascript/text">
$(function()
$(window).scroll(function()
if($(window).scrollTop > 100)
$("#gotop").fadeIn(1000);//一秒渐入动画
else
$("#gotop").fadeOut(1000);//一秒渐隐动画

);

$("#gotop").click(function()
$('body,html').animate(scrollTop:0,1000);
);
);
</script> 参考技术B

1、打开wordpress后台，选择“外观”–“编辑”–找到“footer.php”，在</body>之前加上下面这段代码：
代码如下

<div id="full" style="
width:50px;
height:95px;
position:fixed;
left:50%; top:420px;
margin-left:493px;
z-index:100;
text-align:center;
cursor:pointer;">
<a><img src="121008370928.png" border=0 alt="返回顶部"></a> </div>

<script type="text/javascript">var isie6 = window.XMLHttpRequest ? false : true; function newtoponload()  var c = document.getElementById("full"); function b()  var a = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (a > 0)  if (isie6)  c.style.display = "none"; clearTimeout(window.show); window.show = setTimeout(function ()  var d = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (d > 0)  c.style.display = "block"; c.style.top = (400 + d) + "px"  , 300)  else  c.style.display = "block"   else  c.style.display = "none"   if (isie6)  c.style.position = "absolute"  window.onscroll = b; b()  if (window.attachEvent)  window.attachEvent("onload", newtoponload)  else  window.addEventListener("load", newtoponload, false)  document.getElementById("full").onclick = function ()  window.scrollTo(0, 0) ;</script>

2.然后保存，删除缓存文件即可

参考技术C 第一用插件，第二用代码 参考技术D 在footer.php里面写<a href="javascript:scroll(0,0)"><img src=".png"></a>

如何为 wordpress 主题制作右侧边栏

【中文标题】如何为 wordpress 主题制作右侧边栏

【英文标题】：How to make a right sidebar for a wordpress theme

【发布时间】：2016-01-13 22:42:46

【问题描述】：

并与高级搜索集成，如下面的概念：

sidebar.php

    <?php
/**
 * The sidebar containing the main widget area.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package custom
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) 
    return;

?>

<div id="secondary" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #secondary -->
<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>

     <div id="tertiary" class="widget-area" role="supplementary">
      <?php dynamic_sidebar( 'sidebar-2' ); ?>
     </div><!-- #secondary .widget-area -->

<?php endif; ?>

侧边栏的style.css

#secondary  /* left Sidebar */
width: 18rem;
margin-left: -67rem;
float: left;
position: relative;


#tertiary  /* right Sidebar */
width: 18rem;
margin-right: -23rem;
float: right;
position: relative;

我怎样才能以简单的方式实现它？

【参考方案1】：

如果您已经在您想要的模板文件中设置了sidebar.php；可能是index.php,single.php,page.php 或其他任何东西

我看到了两种方法

1 - 安装一些精美的搜索插件，并使用 仪表板 - 外观 - 小部件区域

将其添加到您的侧边栏

2 - 在您的 Widget 区域，您可以添加 Html 内容，您可以在其中添加搜索表单或将其硬编码到您的 sidebar.php 或创建 search-form.php（其中您将获得您的表单）并将其包含在您的 sibedar.php 中或使用 get_template_part() 直接添加到模板文件中

这里有一些有用的链接：

https://codex.wordpress.org/Function_Reference/get_search_form https://codex.wordpress.org/Function_Reference/get_template_part

【讨论】：

你能举一个关于一些花哨的搜索插件的例子吗？

我之前没有使用任何搜索插件。试试这个列表中的一些东西 - wordpress.org/plugins/search.php?q=search

【参考方案2】：

查看 WordPress Codex 以获取有关自定义侧边栏的信息。这个页面上有很多关于侧边栏的信息：https://codex.wordpress.org/Customizing_Your_Sidebar

如果你问如何让菜单从屏幕一侧展开，有许多不同的 CSS/JavaScript 实现，但也许像这个 jQuery Slick 插件这样的东西可能会有所帮助：http://www.designchemical.com/lab/jquery-slick-plugin/examples/

如果您询问如何创建自定义搜索功能，那么这将非常依赖于您正在使用的插件以及您正在搜索的内容。本文确实很好地概述了如何开始使用 WordPress 中的自定义搜索功能和自定义搜索表单：https://premium.wpmudev.org/blog/build-your-own-custom-wordpress-search/

【讨论】：

我已经找了很多次了，都没有回答我想要的

我什至不确定您是在询问从屏幕边缘扩展菜单还是在询问 PHP 方面的问题，但我会添加一些内容到答案。问题不够具体。