wordpress如何在首页添加动态滚动的背景图片

「已注销」 2018-09-14 08:52:29

wordpress如何在首页添加动态滚动的背景图片，有没有这方面的插件，或者自己写js怎么写，写在哪

...全文

536 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

wordpress人文古风主题更新日志： 1、更改日历旋转动画为更美观的。 2、移除底部随机图片，保留一张新增的荷花图片。 3、更改了背景的文字。 4、修正了PC端和手机端的分享功能，手机端可以分享了。 5、修改停留时间的显示样式。 6、一些细节的修改。 wordpress人文古风主题简介博闻广记wordpress古风主题模板免费版是基于html5 css3制作的，她是一款高端大气、古典优雅的主题，采用响应式设计，两栏布局，上中下构造，兼容IE8、9、10、11和各种现代浏览器。她在手机、平板、PC上都有不错的显示效果，她还配有简单有趣的动画特效，让模板充满趣味。为了不单一，本人及网友还制作了多达百张的顶部banner、头像、图标素材提供您扩展使用。如果你会网页技术，欢迎你進行二次、三次修改。模板虽然是免费的，但请保留我们的底部版权。你可以在“by 清萍剑客”后面加上你的大名。如果修改的不错也请发我邮件一份，为你推广。让我们把“博闻广记主题免费版”变得更好更美！ wordpress人文古风主题运行环境与使用方法：服务器环境要求：PHP 5.2.4或更新版本，MySQL 5.0或更新版本。 1、本主题是基于wordpress系统开发，使用前必先安装wordpress。 2、安装完毕后，再上传博闻广记主题模板方可使用。 wordpress人文古风主题全局功能： 1、31张顶部banner随机显示，都是本人精挑细选的美图，有风景、人文、CG等。 2、个性的鼠标样式，默认的是否看腻了？ 3、5张底部大图随机显示。 4、有趣的动画特效。 5、侧边栏预设了优美动听的古风音乐，让你边阅读文章边陶醉不已。 wordpress人文古风主题基本功能： 1、首页、日志页、单页都有，边栏小工具有。 2、边栏预设了虾米音乐。可在后台修改未网易云、百度、虾米等音乐。 3、底部友情链接，带站标功能。 4、公告功能，模板设置中添加修改。 5、文章列表滚动出场动画功能。 6、404动画功能。 wordpress人文古风主题其他功能：一、响应式设计，兼容PC 手机。哪怕是在240×320的分辨率下效果也不错。二、采用1200px宽度设计。抛弃N年前流行的960px设计，现在全球分辨率用的最多是1366、1440、1024、1920，所以我采用了前2种分辨率的中间宽度1200px，而1024下又是自适应宽度，所以不用担心1024。1200px阅读面积更宽，更大气。三、纸质风格，良好阅读体验。博客正文默认采用16PX字体，阅读体验更加良好，字号有14px、16px、18px可供访客选择。背景为什么不用白色，白色黑字长久阅读会很累，白色是高光，反光度高，而用低光度的纸质背景对眼睛有适当的保护作用，长时间看不会觉得累。四、网页元素都动起来。加载了国外高手制作的CSS3动画库，可以让网页任何元素都动起来，特别是文字。这样浏览者会发现你的网页比较有趣味，而且还能体现某些文字的重要性。五、侧边栏美化。侧边栏用了黄金包边的宝石做标题，看起来更美观。默认宽度为276px，分辨率在小于880px时自动隐藏。六、鼠标指针动静结合，组合丰富。在IE浏览器下鼠标指针是动态的ani，而在其他浏览器下鼠标指针则是静态的，指针样式都不一样。如果你看腻了这些鼠标指针，images里面还有2个备选的供你使用。七、扩展性强，模板素材多多。设计本模版，光按钮和捐赠就设计了好多个，最终都没采用，以下是演示。八、丰富多彩的顶部、底部横幅，全部随机显示。边欣赏博文，边欣赏世界名胜风景。每次打开网站都会给你带来新鲜的感觉。九、双击网页空白区域自动滚屏。可以不用拉滚动条，让屏幕缓慢的滚动，慢慢阅读博文。十、返回顶部不再单一。可以上、可以下。放在上下按钮上，屏幕自动滚屏。中间按钮点击一下滚动三分之一的屏幕，再点击一下再次滚动，不断点击可以快速浏览整个网站。進入内容也后，点击即可查看评论。十一、JS控制GIF动画播放。如果你的页面GIF加载的太多，就可以用这个功能控制GIF不自动播放，点击再播放。十二、在浏览器低于800分辨率下，顶部、底部横幅将不显示。在手机低分辨率下，页面的图标、按钮几乎和PC的显示有许多地方不一样。更干净、更容易操作、更方便。一十三：视频、图片、框架都支持自适应，但必须按照模板使用文档的css格式来写，不然无效，具体看模板使用文档。一十四：分享、版权信息、二维码地址都集成在模板中了，你无需安装插件，更省心。一十五：自定义侧边栏的许多样式都是现成的，你只要复制、粘贴html代码在你的后台侧边栏就行了。去看看一十六：使用本模板，你不再需要手机版本了。因为本模板是响应式设计的，既是手机版，也是平板、笔记本、PC版。 wordpress人文古风主题页面展示相关阅读同类推荐：站长常用源码

视差特色图像将 WordPress Genesis 中的任何特色图像作为您的帖子或页面的视差滚动背景。如果没有特色图片并且您像我一样有固定的导航栏，则会添加上边距。演示在上可以看到一个工作演示，这就是我制作这个解决方案的目的。可以上找到更详细的分步说明这解决了什么问题如果您想轻松更改视差滚动页面或帖子的背景图像，您需要得到这个！这是什么受到启发，我决定通过使其超级易于使用来改进它。从字面上看，只需为任何页面或帖子设置一个特色图片，然后让我们撕！设置 “parallaxfunction.php”是一个需要进入子主题的functions.php 文件的片段。将来我可能会将此作为插件来实现，但代码片段很短，所以不用大惊小怪。如果您不希望特定页面或帖子（或类别或帖子类型等）具有此功能，只需在该功能周围使用。 “parallaxstyle.css”是为新部分设置样式的

不管是html／css，还是bootstrap，这些是让你能够设计网页的。然而网站大部分是动态的，需要持续的更新和维护，所以只是网页是无法实现动态网站的，我们需要把这些静态的网页和我们的数据库建立连接。使用wordpress制作的网站，模板就是连接前端网页和数据库的桥梁，所以这套视频我们就是教你学会模板制作的。

HotNews（热点新闻）作为一款免费的Wordpress主题，集成了五、六十项功能，丰富的主题设置面板，功能模块化，虽是一款主题，却集成了CMS、BLOG、图片、视频等多个模版，统一的风格展示不同的内容。历经多次升级，目前版本为HotNews Pro 2.7.1 Plus。 ■ 下载安装。不要直接上传下载的压缩包，解压后上传里面的主题HotNewspro.zip及wp-postviews插件（必须安装），否则会提示样式表丢失和部分功能模块无法显示。主题集成了大量JS脚本，因此安装主题前，最好禁用所有插件，以免造成冲突，产生莫名的问题。如果之前使用过HotNews Pro主题，后台删除原来的版本，并到wp-content\uploads目录，删除类似HotNewspro.zip的压缩包，全新安装。如果担心之前的设置会丢失，可以在删除之前版本前，打开主题设置页面，保留不要关闭，安装新版后，返回保留的设置页面，点击一下保存设置，随后再设置新版本的一些功能。另外，主题在安装微软雅黑系统中IE8以上或其它核心浏览器显示效果最佳。 ■ 主题设置面板启用主题后，首先需进入主题设置面板，熟习各项功能控制，设置相关选项（如图）。不论是否设置了相关选项，必须点一次保存设置按钮，否则页面会有样式错误. ■ 颜色风格选择主题集成灰、黑、红、蓝、绿、紫、白七种颜色的导航菜单风格，默认为灰色。 ■ 首页布局设置首页有二种布局，分别为BLOG与CMS（杂志），适应不同内容展示的需求，默认为BLOG布局。 ■ CMS布局设置通过查看右侧提取的分类ID，分别输入左右文章列表的分类ID数字，多个分类ID用半角英文＂,＂隔开，一定要区分全角与半角，包括分类ID数字，分类中如果无日志，将不会显示设置的分类。首页分类文章列表，自动排除上面已显示的最新日志，不支持父子分类和一篇文章属于多分类。 ■ 横向滚动图片模块默认不显示，开启后，通过为文章添加自定义栏目，名称：recommend，值：可任意，添加什么都行，调用到该模块中。缩略图大小140×100px，同样需添加自定义栏目，名称：img，如图：如果在编辑页面上无自定义栏目设置面板，可以点击右上“显示选项”按钮，在显示下列项目中，勾选“自定义栏目”。在2.7.1版本中可以切换到显示视频日志。 ■ 顶部热点文章设置默认调用四篇最新文章，缩略图支持WP特色图像、添加自定义栏目、自动获取文章中图片、随机缩略图等，也可以切换到Key模式，分别添加自定义栏目，名称：hot和image，调用指定文章及缩略图，缩略图大小236×155px具体方法看下图： ■ 侧边推荐栏目设置此模块为主题自带小工具，需添加显示的的分类ID并为分类添加描述。 ■ 特色图片功能该功能适合喜欢本地上传图片的童鞋使用，默认未开启。开启后，上传图片会自动生成三张裁剪后的140×100、400×248、236×155的缩略图，选择“作为特色图像”后（如下图），会自动调用到相应的缩略图位置。 ■ 导航菜单主题顶部及页脚各有一个导航菜单，必须使用WP的“菜单”功能。顶部支持多级下拉菜单，底部不支持多级菜单，否则会造成错位。菜单功能使用教程：WordPress3.0导航菜单图文使用教程. PS:可以在菜单设置页面，打开右上的显示选项，选择显示的项目 ■ 热点推荐及幻灯设置默认显示最新五篇日志，当有日志设置置顶后，将自动取消之前的最新日志调用，继而显示置顶后的日志。自动调用日志中的图片为缩略图，无图显示随机图片，支持上面的特色图片功能，并可通过添加自定义栏目“show”，显示指定的缩略图，推荐使用该方法专门制作缩略图，缩略图大小400×248px提高页面加载速度，如下图： ■ 主题自带小工具主题集成侧边广告、站内搜索、最新文章、订阅本站、年度排行、随机文章、热门标签、全部分类、推荐栏目、推荐文章、最新评论、最新图片12个小工具，如下图左。可酌情拖进右侧不同的小工具中，如下图右，让不同页面显示不同的侧边小工具。　另外，主题自带的小工具功能设置，并没有直接写到小工具中（代码过于复杂），需要到主题设置中进行相应设置。 ■ 添加公告启用主题后在左侧功能面板新增公告面板（如图），添加公告与正常添加日志文章没有什么区别，只是添加的公告不会显示在正常的文章列表中，只显示在底部固定的公告栏中。 ■ 添加相册启用主题后，在后台左侧功能面板中新增相册面板，点击左侧相册面板中的添加图片。 1. 缩略图需添加自定义栏目：small，弹出暗箱放大后的图片，需添加自定义栏目：big，如下图：注：必须添加自定义栏目：big，否则无法启用暗箱放大特效，包括使用特色图片功能。如果在编辑页面上无自定义栏目设置面板，可以点击右上“显示选项”按钮，在显示下列项目中，勾选“自定义栏目”。 2. 缩略图添加完成后，加入多张图片时，不需要将图片插入到日志中，只需随意输入一个词：比如：风景图片，然后选中输入的文字，点击编辑工具中的“插入或编辑链接”按钮，加入图片的超链接即可，提高页面加载速度，形式如下图：另外，自定义栏目：big值中的大的图片链接就不要加入到日志中了，会造成重复显示。３. 插入WP自带的相册。首先到主题设置→综合功能设置中，开启特色图像功能，之后正常上传图片（不少于2张），上传完成后，不要关闭上传窗口，点击保存所有更改，这时上边出现相册菜单按钮，打开相册选项卡进入插入相册页面（如下图），选择链接缩略图到图像文件，相册列数选择４,点击插入相册，选择其中一张上传的图片作为特色图像，并添加添加自定义栏目：big，值为：大图片的链接地址。　[ 查看最终效果 ] 4. 由于发表的相册图片，不会显示在正常的页面中，所以需要在相册面板中新建一个相册分类，并将发表的图片划归到这个分类中，便于添加调用到“导航菜单”中，方便浏览者查看。 ■ 添加视频启用主题后，在后台左侧功能面板中新增视频面板，与上面添加相册使用方法相似，只不过添加的自定义栏目：big，值为：获得的视频Flash链接地址而已，如下图：注：部分站点的视频在IE浏览器下关闭弹出暗箱时可能会提示错误，无法解决，，包括优酷、Ku6等，请使用非IE核心的浏览，比如：火狐、chrome、Opera等浏览器。视频Flash链接地址获取方法：除一些提供分享代码的视频的网站，基本所有基于Flash播放器的视频网站都可获取其视频播放地址腾讯视频格式为：http://static.video.qq.com/v1/res/qqplayerout.swf?f=3&vid=j0090FAoXzv 把后面红色部分替换为正常打腾讯视频地址栏“=”号后面的一组数字 ■ 缩略图主题有四种方法调用显示缩略图： 1. WP自带的特色图像功能，不支持外链，使用方法参考上面的“特色图片功能”。不推荐使用此方法，因为上传一张图片会同时生成三张尺寸不一的缩略图，浪费空间，也不利于以后的管理。 2. 直接获取日志中插入的第一张图片作为缩略图，优点：支持外链，使用方便，缺点：无裁剪，插入日志中的图片尺寸较大，直接调用为缩略图，一个页面同时加载显示十几张200、300K的图片，页面打开速度可想而知，其它任何优化都会化为泡影，建议一般情况下不要使用该方法。３. 添加自定义栏目，调用指定的图片，推荐此方法。喜欢弄图片，还是老老实实制作单独的缩略图为上，找个简单的图片处理软件，裁剪一下图片尺寸，也不是什么难事，可以提高页面加载速度。常用的缩略图显示在首页及分类文章列表页面，添加自定义栏目名称：thumbnail，值为：缩略图链接地址，尺寸：140×100px。４. 无图显示随机缩略图。如果在编辑页面上无自定义栏目设置面板，可以点击右上“显示选项”按钮，在显示下列项目中，勾选“自定义栏目”。 ■ 分类图标将分类别名修改为英文或拼音，然后使用FTP软件进入空间后台wp-content\themes目录，将主题HotNewspro\images\caticon目录中的小图标名称改为对应的分类别名，并到主题设置中开启分类图标功能。另外，如果固定链接格式是默认的，点击图标会显示404页面。推荐两种固定链接格式： /%category%/%post_id%.html或者/%postname%.html ■ Google自定义搜索默认为WP自带的搜索，如果认为功能太弱，可以在主题设置中开启Google自定义搜索，然后添加一个页面，右下页面属性“模板”中选择“谷歌搜索”模板，最终搜索结果将显示在这个页面中，只需在主题设置中输入搜索结果链接页面及自已的搜索ID即可，默认是我的。附：Google自定义搜索操作方法 ■ 代码高亮主题集成了代码高亮样式，可以不用插件实现多种语言的代码高亮显示。使用方法：不用插件实现WordPress代码高亮显示 ■ 图片暗箱特效使用主题集成的图片暗箱放大特效，插入图片时需注意：本地上传“链接 URL”应选择链接到“文件URL”，外链需将图像链接到图像，否则不会启用暗箱特效，不喜欢用这个特效，可以到主题设置中关闭。 WordPress 3.5版分别为：链接到“媒体文件”和图像URL ■ 背景主题支持WP自定义背景功能。打开背景设置页面，可以通过上传图片或选择一个颜色改变主题背景风格，可惜受主题圆角图片限制，只能使用与浅灰色相近的图片及颜色，如图： ■ 顶部主题支持WP自定义顶部图片功能。使用前需到主题设置中关闭顶部热点文章，然后打开顶部设置页面，上传图片，并适当剪裁，如图。如果不使用自定义顶部图片功能，最好点击“移除顶部图片”，以免页面加载多余的图片。 ■ 独立页面模版主题集成了blog、友情链接、读者墙、谷歌搜索、文章归档、近期留言、联系方式、我的商铺、RSS聚合、热门标签等７个独立模板。可以新建一个页面，右下页面属性→模板中选择一个相应的模版，发布后添加到导航菜单中。其中，联系方式模版，需打开HotNewspro\includes目录form.php模版，把里面的邮箱地址改成自己的。 ■ 留言板这个真没有，呵呵！虽然主题集成了近期留言独立模板，不过该页面不能留言，如果你想弄个什么留言板，那就新建一个页面，起个标题名称叫“留言板”就行了，让大家在这个没有任何意义的页面死劲留言吧！ ■ 通栏分类模版主题中有一个模板文件名称为：category-414.php，将后面的数字414改成某个分类的ID，再打开这个分类就会以通栏的样式显示该分类。 ■ 增强文章编辑功能后台文章编辑时，实现所见即可所得，与前台浏览排版样式相同，包括集成的代码高亮显示。 ■ 添加文章来源这个东西一直是本人自己用的，虽然很早就集成在主题中，但从未写过使用方法，主要用于转载文章时，尊重原文作者而增添的功能。如果文章是自己写的：添加自定义栏目：original，值：自已的名字或链接地址什么都行如果是转载自其它站点的文章：添加自定义栏目：reprinted，值：原文章的链接地址。 ■ 密码保护的文章默认有密码保护的文章，部分内容会显示出来。可以在文章编辑框下的摘要中随意输入一些内容即可。 ■ 下载链接按钮在编辑日志时，在适当位置分别加入短代码： {url href="http://zmingcx.com/"]下载地址[/url] {demo href="http://zmingcx.com/"]主题演示[/demo] 自行修改其中的http://zmingcx.com/链接及文字。注：将代码中前面的"{"改为“[” ■ 页面关键字及描述首页　主题设置中添加网站关键字及描述分类列表页面，直接调用分类描述为该分类的页面描述，无关键字。标签页面，直接调用标签名称为描述页面文件，需为该页面分别添加自定义栏目：名称：description，值为：该页面描述名称：keywords，值为：该页面关 ■ 需手动修改的联系方式模版默认邮件地址，打开HotNewspro\includes目录中的form.php模版，将其中的电子邮件地址改为自己的。 ▲ 注意事项 ■ 主题很多功能都需要添加自定义栏目实现，如果在编辑页面上无自定义栏目设置面板，可以点击右上“显示选项”按钮，在显示下列项目中，勾选“自定义栏目”。 ■ 公告、相册、视频采用自定义文章发布类型功能，这是WP3.0后新增的功能，国外商业主题大量采用，国内免费主题中却很少见到，不过通过上述功能发表的日志在更换主题后，将不能浏览查看，在后台也看不见。 ■ 添加WP程序自带的小工具，必须添加标题，否则会造成侧边及底部页面错位。 ■ 正确显示评论楼层号，需登录后台→设置→讨论设置页面中，勾选“分页显示评论”。 ■ 如果在打开公告、相册、视频等日志时，显示“对不起！这个真没有!”404错误页面，可以登录后台→设置→固定链接设置页面，随意改一下固定链接格式，然后再改回自己正常用的固定链接格式，可以消除这个错误，不行就反复多改几次。 ■ 主题大部分功能可在主题设置中加以控制，但另有少部分功能，需手动修改模版文件才能正常使用，所以建议使用notepad++或EmEditor文本编辑软件修改模版后，通过FTP软件上传覆盖原文件，或者在Wordpress后台外观→编辑中修改模版文件，切记不能用操作系统自带的记事本修改中文模板，否则会改变模版编码造成主题错位（中文模版编码为：UTF-8 无BOM）。 ■ 主题自带最新图片小工具，不支持添加自定义栏目的图片，只支持采用特色图片功能添加的图片。可以到主题设置中开启固定的侧边最新图片。 ■ 由于种种原因Gravatar头像可能经常不显示，可以参考：直接从www.gravatar.com主站加载Gravatar头像修改程序默认的服务器，或者启用头像缓存插件：推荐几款Gravatar头像缓存插件 ■ 如果想在文章列表中显示指定的摘要，可以在文章编辑页面下面的“摘要”中输入摘要内容，如无“摘要”项目，在右上显示选项中将其调出来，CMS分类列表不支持该功能。 ■ 如果启用主题后首页只显示导航菜单及一个标题，说明你的主机不支持主题文字截断函数mb_strimwidth，最有可能的原因是，主机空间缺少mb_string extension（Linux主机）及php_mbstring.dll（WIN主机）扩展服务，可以要求空间商打开。 ■ 使用图片及视频模版，需进入后台---设置---阅读---博客页面至多显示文章数要小于16篇，否则会造成翻页错误。 ■ 可选参数 ■ 默认情况下，主题集成的最近留言小工具，不显示已登录者的留言，可以打开HotNewspro\includes\widget目录中的r_comments.php，查找并删除：AND user_id='0' ■ 开启博主个性化头像。主题具备博主留言头像区别于其他留言者头像功能。默认ID为１的注册用户头像比其他人的要小一些。如果不知道自己的ID，可进入数据库查看wp_users表，并修改functions.php中user_id == 1的数字１。还可以用

替换并将一张大小为48×48的图片放到主题的images目录中，替代自己的Gravatar头像，比如我目前的头像效果。主题专用插件必须安装主题包中的WP-PostViews 1.61 版插件（修改版） WP-PostViews插件设置：进入WP-PostViews插件设置页面，去掉Views Template：%VIEW_COUNT% views 中的红色部分。下载的主题包文件说明：主题HotNewspro.zip、插件wp-postviews.zip（修改版）、PSD源文件.zip，解压后分别上传主题和插件. 下载地址 ( 34,853 次 ) 已停止下载，新版本请移步到：WordPress CMS主题：HotNews Pro Plus

在全屏模式下显示wordpress页面和文章，以方便阅读。以全屏模式显示wordpress页面和帖子，以便于阅读。现在，无需退出全屏浏览同一网站上的链接。如果您有任何问题，请首先检查“更新的功能”。因为这仍然不是我所称的正式版本，所以期望会有错误。我很想知道我还没有发现的错误，所以我可以将它们压扁。它目前正在开发中，因此代码需要优化，UI和文件结构也需要工作。如果您有任何错误，请找到任何无法使用的wordpress网站或有任何请求，请在Yascob09@gmail.com上进行评论或向我发送电子邮件。如果右键单击图标，则可以通过下拉菜单进入选项菜单。在这里，您可以找到几个替代选项以自定义体验。计划有更多选择。我不会保证我会添加请求的功能，但会解释为什么我决定不这样做。无论如何，尽情享受吧！ =）PS由于其网站的设置方式，它也可以在Baka-Tsuki上使用。更新的功能：0.8.1版：现在，如果您不以隐身方式进入，它将记录每章导航到历史记录，并在重新加载时加载并打开正确的页面。因此，它也可以被视为某种“错误修正”。滚动替代将在下一个更新中发布。（我保证）版本0.8.0：添加了正确的滚动记忆。请不要在某些页面上使此功能变慢（我正在为您看BT）。我正在为以后添加替代选项。现在，如果对您不起作用，则可以在选项中将其禁用。重新设计选项菜单。试试看。 =）还需要一点代码清除，以使其运行得更快。版本0.7.3：双重包装问题的快速错误修复（2个滚动条）版本0.7.2：添加了“隐藏评论部分”选项。 0.7.1版：Css错误修正。版本0.7：修复了全屏多次按下按钮的问题。重做并部分优化了代码。使wordpress帖子检测更加智能，并开始添加blogspot支持。注意：加载页面后，您可能会注意到在全屏按钮工作之前会稍有延迟。它只需花费几秒钟即可生效。版本0.6.2：错误修复：修复了背景覆盖并改进了其逻辑版本0.6.1.1：错误修复：修复了选项页面。现在应该可以正常工作了。版本0.6.1：增加了在同一站点上的帖子之间切换时保持全屏的功能增加了全屏关闭后返回初始页面的选项更多错误修正版本0.5.1-0.5.3：错误修正和代码优化支持语言:English

61,112

社区成员

60,732

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章