mirror of
https://github.com/wahyd4/wahyd4.github.com.git
synced 2026-08-09 05:15:56 +10:00
339 lines
17 KiB
HTML
339 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hans">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">
|
||
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
|
||
<link rel="mask-icon" href="/images/logo.svg" color="#222">
|
||
|
||
<link rel="stylesheet" href="/css/main.css">
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha256-VHqXKFhhMxcpubYf9xiWdCiojEbY9NexQ4jh8AxbvcM=" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
|
||
|
||
<script class="next-config" data-name="main" type="application/json">{"hostname":"toozhao.com","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.25.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12},"hljswrap":true,"codeblock":{"theme":{"light":"default","dark":"stackoverflow-dark"},"prism":{"light":"prism","dark":"prism-dark"},"copy_button":{"enable":false,"style":null},"fold":{"enable":false,"height":500},"language":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"duration":200,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}}</script><script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-theme-next/8.25.0/config.min.js" defer></script>
|
||
|
||
<meta name="description" content="笔者为了找这样一款在首页显示的插件费了很多功夫，本来国产的有一款类似的差距叫helloFlash做的还不错，但是有一点不好的就是，这个插件会截取你发辫文章里面的每一张图片，而不是只是一张。这样就不好了。 经过苦苦寻找，终于让我找到了这样一款插件，做得比较好。叫做Featured Content Valley ，是一款英文的插件，设置相比helloflash那样的傻瓜配置是要复杂一些，不过还好。下面">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:title" content="一款很棒的wordpress 首页动画展示插件">
|
||
<meta property="og:url" content="https://toozhao.com/2010/09/22/wordpress/index.html">
|
||
<meta property="og:site_name" content="大染志">
|
||
<meta property="og:description" content="笔者为了找这样一款在首页显示的插件费了很多功夫，本来国产的有一款类似的差距叫helloFlash做的还不错，但是有一点不好的就是，这个插件会截取你发辫文章里面的每一张图片，而不是只是一张。这样就不好了。 经过苦苦寻找，终于让我找到了这样一款插件，做得比较好。叫做Featured Content Valley ，是一款英文的插件，设置相比helloflash那样的傻瓜配置是要复杂一些，不过还好。下面">
|
||
<meta property="og:locale">
|
||
<meta property="og:image" content="https://toozhao.com/images/2010/09/8-15-1024x513.png">
|
||
<meta property="og:image" content="https://toozhao.com/images/2010/09/8-15-2-1024x450.png">
|
||
<meta property="article:published_time" content="2010-09-21T14:00:00.000Z">
|
||
<meta property="article:modified_time" content="2025-10-27T10:42:00.786Z">
|
||
<meta property="article:author" content="Junv">
|
||
<meta property="article:tag" content="wordpress">
|
||
<meta property="article:tag" content="幻灯片">
|
||
<meta property="article:tag" content="插件">
|
||
<meta property="article:tag" content="首页">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:image" content="https://toozhao.com/images/2010/09/8-15-1024x513.png">
|
||
|
||
|
||
<link rel="canonical" href="https://toozhao.com/2010/09/22/wordpress/">
|
||
|
||
|
||
<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-Hans","comments":true,"permalink":"https://toozhao.com/2010/09/22/wordpress/","path":"2010/09/22/wordpress/","title":"一款很棒的wordpress 首页动画展示插件"}</script>
|
||
|
||
<script class="next-config" data-name="calendar" type="application/json">""</script>
|
||
<title>一款很棒的wordpress 首页动画展示插件 | 大染志</title>
|
||
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7N71TMKK99"></script>
|
||
<script class="next-config" data-name="google_analytics" type="application/json">{"tracking_id":"G-7N71TMKK99","only_pageview":false,"measure_protocol_api_secret":null}</script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-theme-next/8.25.0/third-party/analytics/google-analytics.min.js" defer></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous" defer></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-theme-next/8.25.0/utils.min.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-theme-next/8.25.0/motion.min.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-theme-next/8.25.0/sidebar.min.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-theme-next/8.25.0/next-boot.min.js" defer></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<noscript>
|
||
<link rel="stylesheet" href="/css/noscript.css">
|
||
</noscript>
|
||
</head>
|
||
|
||
<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
|
||
<div class="headband"></div>
|
||
|
||
<main class="main">
|
||
<div class="column">
|
||
<header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
|
||
<div class="site-nav-toggle">
|
||
<div class="toggle" aria-label="Toggle navigation bar" role="button">
|
||
<span class="toggle-line"></span>
|
||
<span class="toggle-line"></span>
|
||
<span class="toggle-line"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="site-meta">
|
||
|
||
<a href="/" class="brand" rel="start">
|
||
<i class="logo-line"></i>
|
||
<p class="site-title">大染志</p>
|
||
<i class="logo-line"></i>
|
||
</a>
|
||
<p class="site-subtitle" itemprop="description">想要玩得很 High 的程序员</p>
|
||
</div>
|
||
|
||
<div class="site-nav-right">
|
||
<div class="toggle popup-trigger" aria-label="Search" role="button">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<nav class="site-nav">
|
||
<ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>About</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives<span class="badge">308</span></a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags<span class="badge">249</span></a></li><li class="menu-item menu-item-知识图谱"><a href="https://wiki.toozhao.com/" rel="section" target="_blank"><i class="fa fa-sitemap fa-fw"></i>知识图谱</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
|
||
|
||
</header>
|
||
|
||
|
||
<aside class="sidebar">
|
||
|
||
<div class="sidebar-inner sidebar-overview-active">
|
||
<ul class="sidebar-nav">
|
||
<li class="sidebar-nav-toc">
|
||
Table of Contents
|
||
</li>
|
||
<li class="sidebar-nav-overview">
|
||
Overview
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="sidebar-panel-container">
|
||
<!--noindex-->
|
||
<div class="post-toc-wrap sidebar-panel">
|
||
</div>
|
||
<!--/noindex-->
|
||
|
||
<div class="site-overview-wrap sidebar-panel">
|
||
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<p class="site-author-name" itemprop="name">Junv</p>
|
||
<div class="site-description" itemprop="description">Go, JavaScript, Ruby on Rails, Java,Docker, CI, CD, Photography</div>
|
||
</div>
|
||
<div class="site-state-wrap animated">
|
||
<nav class="site-state">
|
||
<div class="site-state-item site-state-posts">
|
||
<a href="/archives/">
|
||
<span class="site-state-item-count">308</span>
|
||
<span class="site-state-item-name">posts</span>
|
||
</a>
|
||
</div>
|
||
<div class="site-state-item site-state-categories">
|
||
<a href="/categories/">
|
||
<span class="site-state-item-count">69</span>
|
||
<span class="site-state-item-name">categories</span></a>
|
||
</div>
|
||
<div class="site-state-item site-state-tags">
|
||
<a href="/tags/">
|
||
<span class="site-state-item-count">249</span>
|
||
<span class="site-state-item-name">tags</span></a>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</aside>
|
||
|
||
|
||
</div>
|
||
|
||
<div class="main-inner post posts-expand">
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-Hans">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2010/09/22/wordpress/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="Go, JavaScript, Ruby on Rails, Java,Docker, CI, CD, Photography">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content="一款很棒的wordpress 首页动画展示插件 | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h1 class="post-title" itemprop="name headline">
|
||
一款很棒的wordpress 首页动画展示插件
|
||
</h1>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">Posted on</span>
|
||
|
||
<time title="Created: 2010-09-22 00:00:00" itemprop="dateCreated datePublished" datetime="2010-09-22T00:00:00+10:00">2010-09-22</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">Edited on</span>
|
||
<time title="Modified: 2025-10-27 21:42:00" itemprop="dateModified" datetime="2025-10-27T21:42:00+11:00">2025-10-27</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-folder"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">In</span>
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/%E5%A4%B4%E6%9D%A1%E6%8E%A8%E8%8D%90/" itemprop="url" rel="index"><span itemprop="name">头条推荐</span></a>
|
||
</span>
|
||
,
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/%E5%A4%B4%E6%9D%A1%E6%8E%A8%E8%8D%90/%E9%85%B7%E7%8E%A9%E8%BD%AF%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">酷玩软件</span></a>
|
||
</span>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody"><p>笔者为了找这样一款在首页显示的插件费了很多功夫，本来国产的有一款类似的差距叫helloFlash做的还不错，但是有一点不好的就是，这个插件会截取你发辫文章里面的每一张图片，而不是只是一张。这样就不好了。</p>
|
||
<p>经过苦苦寻找，终于让我找到了这样一款插件，做得比较好。叫做Featured Content Valley ，是一款英文的插件，设置相比helloflash那样的傻瓜配置是要复杂一些，不过还好。下面我就介绍一下这款插件的配置。<a href="/images/2010/09/8-15.png"><img class="aligncenter size-large wp-image-300" title="8-15" src="/images/2010/09/8-15-1024x513.png" alt="" width="1024" height="513" /></a></p>
|
||
<p>这里面可以设置你要截取图片的类别，就是 Category name ，我这里选择的是头条推荐。下面一个是显示数量。说一下比较重要的事，你可以自定义幻灯片的宽度和高度。你完全可以按照你自己的需要设置就好了，下面一个选项是在图片下方留多高的区域来显示文字。这篇区域的颜色由幻灯片的背景颜色控制，这个颜色也是可以设置的。即是Gallery Background color。然后你还可以设置幻灯片的边框的颜色，你可以设置成与你的主题相协调的颜色。即是Gallery Border color. 你还可以在Gallery Text color 里面设置显示的字体的颜色。这些事基本设置，下面还有一些设置。</p>
|
||
<p><a href="/images/2010/09/8-15-2.png"><img class="aligncenter size-large wp-image-301" title="8-15-2" src="/images/2010/09/8-15-2-1024x450.png" alt="" width="1024" height="450" /></a></p>
|
||
<p>下面两行的设置，你可以不用修改，如果你不需要高级属性的话，因为插件本身已经有默认值了。这里我就不再介绍了，如果大家想自己设置这些，就花点功夫自己研究研究吧。</p>
|
||
<p>Slide Transition Type 这是动画效果的选择，你可以根据你自己的需要来设置什么效果。</p>
|
||
<p>下面就是有一个Advanced Custom Fields ，一些高级选项。 如果你不勾选高级选项的话，系统就会采用默认选项。 即你只需要在自定义栏目里面属于 类似于键值对这样的东西。键是“ artucleimg”不要引号。然后再值里面跟上图片的地址，说选择的图片还是尽量满足你设置的大小比较好。</p>
|
||
<p>最后你要做的很简单就是 代码放到你想显示这个动画的任何地方。他就可以显示啦，不信你试试。很简单的。</p>
|
||
<p><span style="color: #ff0000;"><?php include (ABSPATH . ‘/wp-content/plugins/featured-content-gallery/gallery.php’); ?></span></p>
|
||
<p>下面附上最新版本3.2.0下载地址吧：<a target="_blank" rel="noopener" href="http://downloads.wordpress.org/plugin/featured-content-gallery.3.2.0.zip">点我下载</a>（wordpress 官方网站下载）!</p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-tags">
|
||
<a href="/tags/wordpress/" rel="tag"># wordpress</a>
|
||
<a href="/tags/%E5%B9%BB%E7%81%AF%E7%89%87/" rel="tag"># 幻灯片</a>
|
||
<a href="/tags/%E6%8F%92%E4%BB%B6/" rel="tag"># 插件</a>
|
||
<a href="/tags/%E9%A6%96%E9%A1%B5/" rel="tag"># 首页</a>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="post-nav">
|
||
<div class="post-nav-item">
|
||
<a href="/2010/09/21/230/" rel="prev" title="那些刀光剑影的日子">
|
||
<i class="fa fa-angle-left"></i> 那些刀光剑影的日子
|
||
</a>
|
||
</div>
|
||
<div class="post-nav-item">
|
||
<a href="/2010/09/22/nikitamaggie-q/" rel="next" title="NIKITA/maggie Q">
|
||
NIKITA/maggie Q <i class="fa fa-angle-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="footer-inner">
|
||
|
||
<div class="copyright">
|
||
©
|
||
<span itemprop="copyrightYear">2025</span>
|
||
<span class="with-love">
|
||
<i class="fa fa-heart"></i>
|
||
</span>
|
||
<span class="author" itemprop="copyrightHolder">Junv</span>
|
||
</div>
|
||
<div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
<div class="toggle sidebar-toggle" role="button">
|
||
<span class="toggle-line"></span>
|
||
<span class="toggle-line"></span>
|
||
<span class="toggle-line"></span>
|
||
</div>
|
||
<div class="sidebar-dimmer"></div>
|
||
<div class="back-to-top" role="button" aria-label="Back to top">
|
||
<i class="fa fa-arrow-up fa-lg"></i>
|
||
<span>0%</span>
|
||
</div>
|
||
<div class="reading-progress-bar"></div>
|
||
|
||
<noscript>
|
||
<div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
|
||
</noscript>
|
||
|
||
</body>
|
||
</html>
|