Files
wahyd4.github.com/2010/09/21/wordpress/index.html
T

545 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<script class="next-config" data-name="main" type="application/json">{"hostname":"toozhao.com","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.28.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12,"b2t":true,"scrollpercent":true},"hljswrap":true,"codeblock":{"theme":{"light":"default","dark":"stackoverflow-dark"},"prism":{"light":"prism","dark":"prism-dark"},"copy_button":{"enable":true,"style":"mac"},"fold":{"enable":false,"height":500},"language":false},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":true,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":false,"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":"搜索...","empty":"没有找到任何搜索结果:${query}","hits_time":"找到 ${hits} 个搜索结果(用时 ${time} 毫秒)","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"top_n_per_article":5,"unescape":false,"preload":false,"trigger":"auto"}}</script><script src="/js/config.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/21/wordpress/">
<meta property="og:site_name" content="大染志">
<meta property="og:description" content="笔者为了找这样一款在首页显示的插件费了很多功夫,本来国产的有一款类似的差距叫helloFlash做的还不错,但是有一点不好的就是,这个插件会截取你发辫文章里面的每一张图片,而不是只是一张。这样就不好了。 经过苦苦寻找,终于让我找到了这样一款插件,做得比较好。叫做Featured Content Valley ,是一款英文的插件,设置相比helloflash那样的傻瓜配置是要复杂一些,不过还好。下面">
<meta property="og:locale" content="zh_CN">
<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="2026-08-04T10:47:21.908Z">
<meta property="article:author" content="Junv">
<meta property="article:tag" content="插件">
<meta property="article:tag" content="wordpress">
<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/21/wordpress/">
<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://toozhao.com/2010/09/21/wordpress/","path":"2010/09/21/wordpress/","title":"一款很棒的wordpress 首页动画展示插件"}</script>
<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>一款很棒的wordpress 首页动画展示插件 | 大染志</title>
<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/medium-zoom/1.1.0/medium-zoom.min.js" integrity="sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc=" crossorigin="anonymous" defer></script>
<script src="/js/utils.js" defer></script><script src="/js/sidebar.js" defer></script><script src="/js/next-boot.js" defer></script><script src="/js/bookmark.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.5.0/search.js" integrity="sha256-xFC6PJ82SL9b3WkGjFavNiA9gm5z6UBxWPiu4CYjptg=" crossorigin="anonymous" defer></script>
<script src="/js/third-party/search/local-search.js" defer></script>
<style>
/* =========================================================
Toozhao blog custom styles (injected via head.njk)
阅读体验优化 — 微信读书风格
========================================================= */
html { scroll-behavior: smooth; }
/* 主内容阅读宽度 */
.post-block, .posts-expand .post-block {
max-width: 760px;
}
.post-title {
font-size: 1.7em;
font-weight: 700;
letter-spacing: 0.01em;
}
.post-meta { color: #999; font-size: 0.9em; }
.post-body {
font-size: 1.05em;
line-height: 1.9;
letter-spacing: 0.02em;
color: #333;
}
.post-body p {
margin: 1.1em 0;
text-align: justify;
text-justify: inter-ideograph;
}
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
line-height: 1.4;
margin-top: 1.6em;
margin-bottom: 0.8em;
font-weight: 600;
color: #222;
}
.post-body h2::before, .post-body h3::before, .post-body h4::before {
content: '';
display: inline-block;
width: 4px;
height: 0.9em;
background: #4a90d9;
border-radius: 2px;
margin-right: 10px;
vertical-align: -0.08em;
}
.post-body img {
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
margin: 0.6em auto;
display: block;
max-width: 100%;
}
.post-body blockquote {
border-left: 4px solid #4a90d9;
background: rgba(74, 144, 217, 0.06);
margin: 1.4em 0;
padding: 0.8em 1.2em;
border-radius: 0 8px 8px 0;
color: #555;
}
.post-body blockquote p { margin: 0.4em 0; }
.post-body a {
color: #2d6cdf;
border-bottom: 1px solid rgba(45, 108, 223, 0.3);
transition: color 0.2s, border-color 0.2s;
}
.post-body a:hover { color: #1a4fae; border-bottom-color: #1a4fae; }
.post-body code {
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
padding: 2px 6px;
font-size: 0.9em;
color: #c7254e;
}
.post-body table {
border-collapse: collapse;
margin: 1.2em auto;
font-size: 0.95em;
}
.post-body table th, .post-body table td {
border: 1px solid #ddd;
padding: 8px 14px;
}
.post-body table th { background: #f5f7fa; font-weight: 600; }
.post-body table tr:nth-child(even) { background: #fafbfc; }
.post-body ul, .post-body ol { padding-left: 1.6em; margin: 0.8em 0; }
.post-body ul li, .post-body ol li { margin: 0.35em 0; }
.post-body hr {
border: none;
border-top: 1px dashed #ccc;
margin: 2em auto;
width: 60%;
}
/* 暗色模式(跟随系统,不依赖 NexT darkmode class */
@media (prefers-color-scheme: dark) {
body { background: #1b1f24; color: #c8cdd3; }
.post-body { color: #c8cdd3; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 { color: #e8eaed; }
.post-body blockquote { background: rgba(74, 144, 217, 0.1); color: #9aa5b1; }
.post-body code { background: rgba(255, 255, 255, 0.1); color: #e88388; }
.post-body table th, .post-body table td { border-color: #3a3f45; }
.post-body table th { background: #2d3238; }
.post-body table tr:nth-child(even) { background: #262a2f; }
.post-meta { color: #777; }
}
::selection { background: rgba(74, 144, 217, 0.25); }
/* 字体调节按钮 */
.font-size-control {
position: fixed;
right: 18px;
bottom: 90px;
z-index: 1000;
background: rgba(0, 0, 0, 0.65);
color: #fff;
border-radius: 20px;
padding: 6px 4px;
display: flex;
flex-direction: column;
gap: 2px;
user-select: none;
}
.font-size-control button {
background: none;
border: none;
color: #fff;
font-size: 13px;
cursor: pointer;
padding: 3px 8px;
opacity: 0.85;
}
.font-size-control button:hover { opacity: 1; }
</style>
<noscript>
<link rel="stylesheet" href="/css/noscript.css">
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<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="切换导航栏" 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">Junv's blog</p>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger" aria-label="搜索" role="button">
<i class="fa fa-search fa-fw fa-lg"></i>
</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>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li>
<li class="menu-item menu-item-search">
<a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
</a>
</li>
</ul>
</nav>
<div class="search-pop-overlay">
<div class="popup search-popup">
<div class="search-header">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<div class="search-input-container">
<input autocomplete="off" autocapitalize="off" maxlength="80"
placeholder="搜索..." spellcheck="false"
type="search" class="search-input">
</div>
<span class="popup-btn-close" role="button">
<i class="fa fa-times-circle"></i>
</span>
</div>
<div class="search-result-container">
<div class="search-result-icon">
<i class="fa fa-spinner fa-pulse fa-5x"></i>
</div>
</div>
</div>
</div>
</header>
<aside class="sidebar">
<div class="sidebar-inner sidebar-overview-active">
<ul class="sidebar-nav">
<li class="sidebar-nav-toc">
文章目录
</li>
<li class="sidebar-nav-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">
<img class="site-author-image" itemprop="image" alt="Junv"
src="/images/avatar.gif">
<p class="site-author-name" itemprop="name">Junv</p>
<div class="site-description" itemprop="description">分享编程、运维、生活与思考</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">310</span>
<span class="site-state-item-name">日志</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">标签</span></a>
</div>
</nav>
</div>
<div class="links-of-author animated">
<span class="links-of-author-item">
<a href="https://github.com/wahyd4" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wahyd4" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
</span>
</div>
<div class="cc-license animated" itemprop="license">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="https://cdnjs.cloudflare.com/ajax/libs/creativecommons-vocabulary/2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
</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-CN">
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2010/09/21/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="分享编程、运维、生活与思考">
</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">发表于</span>
<time title="创建时间: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">更新于</span>
<time title="修改时间:2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
</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 src="/images/2010/09/8-15-1024x513.png" title="8-15"></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 src="/images/2010/09/8-15-2-1024x450.png" title="8-15-2"></a></p>
<p>下面两行的设置,你可以不用修改,如果你不需要高级属性的话,因为插件本身已经有默认值了。这里我就不再介绍了,如果大家想自己设置这些,就花点功夫自己研究研究吧。</p>
<p>Slide Transition Type 这是动画效果的选择,你可以根据你自己的需要来设置什么效果。</p>
<p>下面就是有一个Advanced Custom Fields ,一些高级选项。 如果你不勾选高级选项的话,系统就会采用默认选项。 即你只需要在自定义栏目里面属于  类似于键值对这样的东西。键是“ artucleimg”不要引号。然后再值里面跟上图片的地址,说选择的图片还是尽量满足你设置的大小比较好。</p>
<p>最后你要做的很简单就是   代码放到你想显示这个动画的任何地方。他就可以显示啦,不信你试试。很简单的。</p>
<p>php include (ABSPATH . &#x2F;wp-content&#x2F;plugins&#x2F;featured-content-gallery&#x2F;gallery.php); ?</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-copyright">
<ul>
<li class="post-copyright-author">
<strong>本文作者: </strong>Junv
</li>
<li class="post-copyright-link">
<strong>本文链接:</strong>
<a href="https://toozhao.com/2010/09/21/wordpress/" title="一款很棒的wordpress 首页动画展示插件">https://toozhao.com/2010/09/21/wordpress/</a>
</li>
<li class="post-copyright-license">
<strong>版权声明: </strong>本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处!
</li>
</ul>
</div>
<div class="post-tags">
<a href="/tags/%E6%8F%92%E4%BB%B6/" rel="tag"># 插件</a>
<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/%E9%A6%96%E9%A1%B5/" rel="tag"># 首页</a>
</div>
<div class="post-nav">
<div class="post-nav-item">
<a href="/2010/09/20/230/" rel="prev" title="那些刀光剑影的日子">
<i class="fa fa-angle-left"></i> 那些刀光剑影的日子
</a>
</div>
<div class="post-nav-item">
<a href="/2010/09/21/nikitamaggie-q/" rel="next" title="NIKITA&#x2F;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">
&copy; 2012
<span itemprop="copyrightYear">2026</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">Junv</span>
</div>
<div class="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="返回顶部">
<i class="fa fa-arrow-up fa-lg"></i>
<span>0%</span>
</div>
<div class="reading-progress-bar"></div>
<a role="button" class="book-mark-link book-mark-link-fixed"></a>
<noscript>
<div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>
<script>
/* 字号调节 A- / A / A+(阅读体验) */
(function () {
'use strict';
function initFontSize() {
var postBody = document.querySelector('.post-body');
if (!postBody || document.getElementById('font-size-control')) return;
var bar = document.createElement('div');
bar.id = 'font-size-control';
bar.className = 'font-size-control';
var labels = [['A-', -1], ['A', 0], ['A+', 1]];
var current = 1.0;
labels.forEach(function (item) {
var btn = document.createElement('button');
btn.textContent = item[0];
btn.title = item[0] === 'A-' ? '减小字号' : item[0] === 'A+' ? '增大字号' : '恢复默认';
btn.addEventListener('click', function () {
if (item[1] === 0) current = 1.0;
else current = Math.min(1.4, Math.max(0.8, current + item[1] * 0.1));
postBody.style.fontSize = current + 'em';
});
bar.appendChild(btn);
});
document.body.appendChild(bar);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initFontSize);
} else {
initFontSize();
}
})();
</script>
</body>
</html>