正文 

当前位置： 首页 > 知识 >

一个背景粘性且内容可移动的wordpress主题

     2023-02-19     272

关键词：

【中文标题】一个背景粘性且内容可移动的wordpress主题【英文标题】：A wordpress theme which background is sticky and the content is movable 【发布时间】：2022-01-09 20:44:51 【问题描述】：

我需要一个 wordpress 主题或任何看起来像 https://www.haldiram.com/ 这个并像这样工作的插件。我想在 wordpress 中制作相同的主页和标题，任何人都可以在 wordpress 中帮助我解决这个问题。告诉我如何使用任何插件或使用任何主题来实现同样的事情，或者告诉我任何其他方式来做到这一点。我尝试使用 css 制作这样的背景，但没有成功。我不需要完全相同，但如果对此有一些误解，请告诉我。

【问题讨论】：

【参考方案1】：

重要的是添加background-attachment: fixed; CSS 属性。

另外，您需要使页面内容高度大于窗口才能看到滚动效果。

在下面的演示中，我在.site-content 页面元素上添加了一个min-height: 2500px;。

body 
    background-image: url("https://www.haldiram.com/themes/haldiram/images/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;


.site-content 
    width: 100%;
    max-width: 1200px;
    min-height: 2500px;
    background-color: #fff;
    padding: 2rem 3rem;
    box-sizing: border-box;

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="site-content">
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</div><!-- .site-content end -->

</body>
</html>

【讨论】：

如何在我的 WordPress 主题上获得粘性页脚？

】如何在我的WordPress主题上获得粘性页脚？【英文标题】：HowcanIgetastickyfooteronmyWordPresstheme?【发布时间】：2012-09-0320:54:16【问题描述】：我试图让页脚停留在页面底部。我已经关注了大量关于粘性页脚的不同教程（其中大多数非... 查看详情

带有内容 div、wordpress 的 css 全宽背景

】带有内容div、wordpress的css全宽背景【英文标题】：cssfullwidthbackgroundwithcontentdiv,wordpress【发布时间】：2013-06-0821:00:38【问题描述】：我正在为我的作品集网站使用wordpress主题，并且我正在尝试重新创建一种我看到许多网站现在... 查看详情

在 wordpress 主题中插入 javascript 背景

】在wordpress主题中插入javascript背景【英文标题】：Insertajavascriptbackgroundinwordpresstheme【发布时间】：2021-07-0417:50:18【问题描述】：我想在我的wordpress网站上放置一个javascript文件作为我的背景。这是一个持续运行的动画背景（它是... 查看详情

在 Wordpress 中开发移动主题

】在Wordpress中开发移动主题【英文标题】：DevelopMobileThemeinWordpress【发布时间】：2012-10-2300:54:56【问题描述】：我制作了一个网站的wordpress主题。我使用StarkerTheme进行wordpress主题开发。现在我想让我的网站移动友好。是否有任何... 查看详情

内容扩展时向下移动的粘性页脚[重复]

...布时间】：2018-05-0904:01:19【问题描述】：我正在尝试包含一个“保存”按钮作为页脚，它贴在页面底部，但只要有“首屏”内容，就会向下移动。这个内容我通常适合一页，但是在使用选择复选框元素时超出了范围。问题示例：... 查看详情

如何在wordpress主题中添加设置页面

...径为：wp-contentthemesOptionPagefunctions.php。　　我们不需要让wordpress手动加载它，在执行时wordpress会自动加载。　　2、建立设置选项页　　首先第一步需要在后台建立一个空白页面供我们使用。我们通过add_aaction来实现这一步。Action... 查看详情

wordpress 移动主题删除简码

】wordpress移动主题删除简码【英文标题】：wordpressmobilethemeremoveshortcodes【发布时间】：2012-03-1713:58:47【问题描述】：我有一个网站，其中短代码出现在该网站的移动版本中。我想删除它们。当我添加以下代码时，它会删除短代码... 查看详情

粘性页脚棒，但内容不会

...entwon\'t【发布时间】：2011-12-0817:11:37【问题描述】：我有一个可以使用的粘性页脚，但我使用的是平铺背景图像和内部#contentdiv。我遇到的问题是#content不会扩展以填充容器的高度。我在http://jsfiddle.net/mpRUT/1/有一个演示，我在其... 查看详情

粘性菜单中的元素在滚动时被按下

...点想在这里发帖，但我无能为力。我正在为公司网站使用wordpress和主题-Cake。我正在尝试定位一个动态按钮以与粘性包装器(.menu_wrapper)中的wordpress菜单对齐。无论我做什么-浮动，显示等-滚动时按钮都会略 查看详情

如何移动优化wordpress博客

】如何移动优化wordpress博客【英文标题】：Howtomobileoptimizewordpressblog【发布时间】：2014-07-2503:20:12【问题描述】：我的wordpress博客(workmoneyfun.com)是完全移动响应的GenesisFrameworkProse主题。但是，我增加了网站内容区域的宽度，导致... 查看详情

将网站用户引导至移动应用程序

...间】：2014-02-0522:00:46【问题描述】：我有一个网站（使用Wordpress设置）和一个可用于Apple和Google的移动应用程序。尽管我的Web主题是响应式的，但我想为访问者提供加载应用程序的选项。有没有我可以在Wordpress主题/网站中放入的... 查看详情

粘性标题后面的内容在可滚动表中可见

】粘性标题后面的内容在可滚动表中可见【英文标题】：Contentbehindstickyheaderisvisibleinscrollabletable【发布时间】：2021-03-1702:49:39【问题描述】：当前问题看起来像这样如图所示，内容滚动到页眉后面时，还是有一点点可见的。我如... 查看详情

在一个 WordPress 主题上调整浏览器窗口的大小以及添加 JS 代码移动菜单关闭按钮后，导航栏不起作用

】在一个WordPress主题上调整浏览器窗口的大小以及添加JS代码移动菜单关闭按钮后，导航栏不起作用【英文标题】：NavbarisnotworkingwhenresizingthebrowserwindowsononeWordPressthemeandafteraddingtheJScodemobilemenuclosebuttonisnotworking【发布时间】：2020-... 查看详情

如何根据我的主题实现粘性菜单？

...间】：2013-06-3005:17:31【问题描述】：很久了，我正在寻找一个好的代码或插件，无论是从头开始还是现成的。我需要知道如何为我的网站实施粘性菜单。我的网站是ExamsInformer。哪个插件可以帮助我构建一个适合我主题的良好粘... 查看详情

Css 粘性页脚 - 响应式

...间】：2013-10-3106:08:00【问题描述】：我正在尝试在自定义WordPress主题上创建粘性页脚。我看了很多在线教程都没有成功。它似乎没有响应式地工作，它卡住了，但是一旦我重新调整浏览器的大小，高度就会增加。页脚需要具有响... 查看详情

如何创建对角分割且两半可点击的布局？

...像这样：我怎样才能做到这一点？【问题讨论】：looksok.wordpress.com/2013/08/24/…您是想像这样绘制 查看详情

可根据动态内容进行调整的 Jquery 粘性页脚

】可根据动态内容进行调整的Jquery粘性页脚【英文标题】：Jquerystickyfooterthatadjustswithdynamiccontent【发布时间】：2011-09-2705:43:16【问题描述】：我目前在这里使用插件http://codedumper.com/jquerystickyfooter来创建贴纸页脚。看看http://client.a... 查看详情

如何解决移动设备（Wordpress 主题）的“响应式设计模式”问题？

】如何解决移动设备（Wordpress主题）的“响应式设计模式”问题？【英文标题】：HowcanIfix"responsive-designmode"problemsformobiledevices(Wordpresstheme)?【发布时间】：2013-09-0920:25:50【问题描述】：我在“响应式设计模式”中使用wordpr... 查看详情