WordPress博客网站文章图片美化技巧:放大、幻灯片播放
玩Wordpress，写个博客，发发文章，总是要插入图片的。有的人可能对于图片有很大的偏好，一篇文章基本上以图片为主。在Wordpress放上几张精美的图片，不仅好看，也可以让读者得到更好阅读体验。
还有就是，在Wordpress当中放入图片，会受到博客的排版和长宽限制，以及网页打开速度因素的限制，图片太小图片原来的美感会，图片太大，会导致文章变形错位等等，最大问题是访问者是相当不喜欢等待你的图片加载太长的时间的。
所以说美化你的Wordpress博客网站的文章图片也是需要的，尤其是那些需要贴上大量的精美图片的博客，更应该让访问者感受到你的图片的真正内容。今天免费资源部落就来为大家介绍几个美化图片的技巧。
本技巧主要实现的效果：在你的WordPress文章页面的图片如果读者觉得太小了，可以点击放大，如果有多张图片，点击某一个图片放大后，还会形成一个简单相册，不需要查看别的图片，直接在本相册当中点击下一个就OK了，类似于幻灯片插件的效果。
效果就是这样，实现起来也不是很难。以前我还为大家介绍的一些的小技巧免费教程有：
- 1、有事你Q我吧!在网站博客添加联系方式即时聊天工具在线状态（贴上代码，就可以让别人直接点击加入与你的聊天当中，不需要多余的操作）
- 2、WordPress创建最新评论引用通告活跃读者热门文章页面（这个是自己用代码修改将最新评论热门文章集成在一个章页面当中，不需要插件）
- 3、wordpress流量不够？WP设置图片文件防盗链版权所有不可盗用（防止别人引用你的图片的外链方法，同时也有利于你的Wordpress的流量保护）
WordPress博客网站文章图片美化技巧:放大、幻灯片播放操作方法与教程
一、 简单-实现图片放大和缩小的插件篇:WP FancyZoom图片缩放插件
1、属于轻量型的。效果也十分漂亮，很有苹果中图标的感觉。使用非常方便，直接到后台搜素这个插件，安装即可。 这里是WP FancyZoom插件下载地址。
2、本站就是使用的这个WP FancyZoom插件，直接下载安装就可以了。不需要多余的设置，后台设置可以看一下，如果你的图片保存位置与WP默认的保存位置不一样，改一下就行了。这里就是WP FancyZoom插件下载地址。如下图：
二、稍简单-改装WP FancyZoom图片缩放插件，实现代码插入
1、对于插件有不好感的朋友，你可以用这个方法。解压WP FancyZoom后有两个文件夹，打开js-global文件夹下的FancyZoom.js。
2、把“/images-global/zoom/”替换成“/wp-content/themes/你的主题文件夹名/images-global/zoom/”即可。然后上传两个文件夹到你wodrpress站点主题文件夹下。
3、将WP FancyZoom图片缩放插件的image和JS文件夹上传后，接下来要做的工作就比较简单，你需要做的就是在你的网页当中引用这两个JS文件就OK了。引用的方法很简单，在你的主题的header.php文件的</head>之前或者是footer.php文件的</body>之前加以下代码：
- <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js-global/FancyZoom.js"></script>
- <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js-global/FancyZoomHTML.js"></script>
4、最后不要忘记在你的header.php里的<body>属性上添加成：<body onLoad="setupZoom();">，这样当页面加载的时候就已经可以使用WP FancyZoom了。
5、WP FancyZoom插件的图片放大和缩小效果可以在下图看到演示效果。（点击图片即可）
三、进阶-FancyBox for WordPress自动提取网页图片支持相册浏览效果
1、FancyBox for WordPress插件秀图特效是从原本图案的位置直接缩放出来，然后关闭或图片外的区域会缩回去原本图案的位置，且不影响页面的滚动。这里是FancyBox for WordPress插件下载地址。
2、FancyBox for WordPress插件后台设置是英文，对于有些朋友可能会比较麻烦，这里我简单翻译了一下，如下图：（看不清，请点击，放大图片）
3、如果你安装了FancyBox for WordPress插件没有作用，请检查一下你的图片是不是没有添加链接，如果有链接还是没有作用，可以看看有没有其他的插件冲突，
4、例如FancyBox for WordPress插件直接调用jQuery而并非使用wp_enqueue_scrip函数。如果此类插件正在使用中，则请停用插件。
5、如果还有问题，只能尝试用FancyBox for WordPress插件的Troubleshooting模式了，在后台的Troubleshooting设定中把Do not call jQuery勾选、或是jQuery “noConflict” Mode取消。
6、FancyBox for WordPress插件的图片演示效果如下图：
四、高级-WordPress Content Slide文章幻灯片插件
1、就是说可以让你实现像在一些网站例如免费资源部落的首页那样的幻灯片播放效果，别人点击图片后就可以进入相应的文章页面了。你不需要懂JS，也不需要搞什么CSS，只需要插入一段代码就行了。
2、首先是下载和安装WordPress Content Slide文章幻灯片插件，这里是WordPress Content Slide下载地址。安装好后，请将下面一段代码放到你想实现幻灯片播放的效果的位置。例如首页、文章内页、分类、导航等等，随便哪里啦！！！
- <?php if(function_exists('wp_content_slider')) { wp_content_slider(); } ?>
3、现在回到后台在WordPress Content Slide设置当中添加图片源文件，你也可以选择自动选择某一个分类下的文章图片，操作说明我已经做了翻译，如下图：（看不清，请点击，放大图片）
4、当然你可能还需要根据你自己的Wordpress的排版设计调整图片大小还有文字的大小和颜色。如下图：
5、最后实现的幻灯片播放效果基本上还是可以让人满意的，如下图：
1、Auto Highslide 插件增强版是weisay博主在原插件的基础作了相应的修改，使得样式更加好看。直接下载安装此插件即可使用：Auto Highslide插件增强版下载。
2、这里再来分享一下rich.ga博主提供的Auto Highslide插件代码版本，适合不想使用插件的朋友。首先下载并解压Auto Highslide插件。
3、打开“auto-highslide.php”文件。按照下面的提示依次对源文件进行修改（把auto-highslide.php文件中的'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide全部替换成：'.get_bloginfo('template_directory').'）：
#第23行
<link rel="stylesheet" href="'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide/highslide/highslide.css" type="text/css" />
#改成：
<link rel="stylesheet" href="'. get_bloginfo('template_directory').'/highslide/highslide.css" type="text/css" />
#第24行
<script type="text/javascript" src="'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide/highslide/highslide-with-html.packed.js"></script>
#改成：
<script type="text/javascript" src="'.get_bloginfo('template_directory').'/highslide/highslide-with-html.packed.js"></script>
#第27行
hs.graphicsDir = "'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide/highslide/graphics/";
#改成
hs.graphicsDir = "'.get_bloginfo('template_directory').'/highslide/graphics/";
4、将修改好的“auto-highslide.php”文件以及“highslide”文件夹上传到你WordPress主题目录（一般为/wp-content/themes/主题文件夹名称）
5、打开你主题的“functions.php”文件，在最后的?>之前加入以下代码：include('auto-highslide.php');
6、完工！好好享用你用纯代码实现的图片放大效果吧！注意：此修改版插件默认的蒙罩层是白色的，如果你想换成黑色，可以修改插件里面的highslide.css，将里面最后的
.highslide-dimming{background:#fff;}
改为
.highslide-dimming{background:#000;}
当然你也可以定义成其他颜色，看你自己的喜好了。
文章出自：免费资源部落 / 版权所有。本站文章除注明出处外，皆为作者原创文章，可自由引用，但请注明来源。 禁止全文转载。
您或许对下面这些文章有兴趣: 本月吐槽辛苦排行榜
-
明月当
放点图片可以更好看一些，不过，图片太多的话，加载起来也是非常慢的。
[回复] -
创业板
博主，厉害。
这一直就是我想要的效果。
解决了困扰我的博客图片问题。[回复] -
春天
WordPress果然强大，这样的图片效果居然只用插件就可以实现了。看来我要把自己的博客变成WP程序了。
[回复] -
相遇
好久没有看到部落的技术文章了，这次又学到了。
[回复] -
My Blgo
图片如果设置大小好看，还可以提升整个排版的水平，让人看了舒服。就像博主的文章一样。
[回复] -
sososo
感觉FancyBox for WordPress插件设置比较多，有些东西我还看不懂。
[回复] -
清风明月
我看了源代码，这些插件都不同程序上地加载了JS和Jquery，应该会影响网页的打开速度吧。
[回复] -
继续
博主，非常感谢你的方法。
看了之后很受用。
我是做站新手，学到的Wordpress知识都是从这里开始的。因为你讲得都是通俗易懂的。[回复] -
qq478601226
你好，我有问题想请教，但是你的QQ群140917087已经满人了，能不能加我QQ详谈。
[回复] -
闪云软件工作室
教程做的很详细！[回复] -
悠然
问问题啊楼主，我这个fancyzoom能不能用在首页里，点每张图片都能现实放大效果
[回复] -
疯子 5
主题 不支持怎么办啊。。。
[回复] -
米奇博客 3
qi，那不叫图片缩放，叫图片弹出层[回复] -
经验公式 3
我想问一下，这个步骤：
4、最后不要忘记在你的header.php里的属性上添加成：，这样当页面加载的时候就已经可以使用WP FancyZoom了。
是怎么操作的啊？用上面的代码替换吗？[url]https://www.jygongshi.com[/url]
[回复] -
经验公式 3
问一下，这个步骤：
4、最后不要忘记在你的header.php里的属性上添加成：，这样当页面加载的时候就已经可以使用WP FancyZoom了。[回复] -
夏娜 4
随便纠正qi的一个错误：在这个文件当中查找“/images-global/zoom/”并修改为“你的网址/wp-content/themes/主题文件夹名/images-global/zoom/”……
把“你的网址”删掉，直接替换成“/wp-content/themes/主题文件夹名/images-global/zoom/”即可。[回复] -
Aaron
大神，能帮我看看出了什么问题么？我的图片是显示在后面了，求解！https://aaronlin.wicp.net/?p=82 我用的是插入代码这个方法的，第二点
[回复] -
bad boy
https://aaronlin.wicp.net/?p=82
大侠，能看看我的为什么会这样么？用代码改的，没有用插件
[回复]qi 回复:
@bad boy, 是JS错误：Uncaught TypeError: Object # has no method ‘phzoom’
这个文件/includes/single.js[回复]bad boy 回复:
@qi,那个js代码是这样的：
jQuery(document).ready(function(d){var e=d(“#sidebar-inner”),b=d(“.post-content a:has(img)”),c=d(window),a=e.offset().top;b.phzoom({});c.scroll(function(){var f=c.scrollTop();if(f+20>=a){e.css({position:”fixed”,top:5})}else{if(f+20<a){e.css({position:"static",top:""})}}})});[回复] -
霓虹 2
使用的WP flash img show幻灯片插件，Twenty Twelve主题。请问怎么首页加入幻灯片。
提示是要把这句（PHP）代码复制到主题文件中.
我就在index.php试了试，放了半天不知道放在哪里。对了，应该是放在index.php文件吧。
index.php文件如下:…………………………………………………………………………………………………………………………..
<?php printf( __( 'Ready to publish your first post? Get started here.’, ‘twentytwelve’ ), admin_url( ‘post-new.php’ ) ); ?>
…………………………………………………………………………………………………………………………..
问问应该放在哪里？
[回复] -
霓虹 2
回复看不完整，那麻烦看这里把 https://nihong.org/split/1228
[回复] -
烂番茄 4
不错的大图幻灯片啊。。
[回复] -
323心 5
它的路径怎么改？我的图片地址是/wp-content/uploads/2013/12/图片名称.png
[回复] -
323心 3
搞定！之接代码插入！
[回复] -
CYs 4
FancyZoom找到了，但有一个问题，不知道博主能不能解决。
我看了你们能实现这个功能的站点···发现：图片必须 能点击打开比如，代码形如
我想问的是，要怎么做才能让下面这种形式也实现幻灯片效果呢？
[回复] -
cjoke 2
WP FancyZoom代码插入后效果是出来了，但是左上角的叉叉图片没有显示，查看网页的源代码那张图的调用地址是这个，怎么解决啊img src=”/wp-content/themes/D8/images-global/zoom/closebox.png”
[回复] -
尹寸
WP FancyZoom 这个插件不行啊…开启了没反应 上传图片是不是直接上传到媒体库 然后插入文章就行了? 要不要什么代码?
[回复] -
屌丝智慧
用外链图片 不知道咋样
[回复] -
贴吧 4
咨询下，wordpress想添加一个播放页面（影音类型的），不知道有没有办法实现呢？并且便于插入不同的影片的！
[回复]qi 回复:
@贴吧, 有flash的代码，但是如果要播放影片的可以试试使用html5。
[回复]quericy 回复:
@qi, 博主,我分别试了WP FancyZoom和FancyBox for WordPress,可以正常运行,但是都没有你的图片弹出后下方那个小工具栏呢?
(就是图片上的显示←,→,移动,自动播放,实际大小,关闭的那个小工具栏)
这是什么别的插件的效果吗?
望回复,谢谢~~[回复]qi 回复:
@quericy, 你好，我现在用的是auto-highslide这个放大插件。
[回复]Rich 回复:
@qi, 在文章补充一下Auto Highslide这个插件吧，另外我要在这篇文章投稿Auto Highslide的插件改装代码方法：https://rich.ga/post/381
[回复]qi 回复:
@Rich, 非常感谢，已经更新在文章当中。
[回复]Rich 回复:
@qi,
可是qi复制错代码了：
#第27行
hs.graphicsDir = "'.get_bloginfo('template_directory').'/highslide/graphics/";
#改成
hs.graphicsDir = "'.get_bloginfo('template_directory').'/highslide/graphics/";
实际上可以简单的说，把auto-highslide.php文件中的
'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide
全部替换成：
'.get_bloginfo('template_directory').'那就比较简单直观些……
[回复] -
Zouming
怎样弄成博主这样，放大后有前进后退按钮
[回复] -
狂族晨曦 3
想问博主，第4、6张图片的那种，点击之前像是裁剪过的一样，图片只显示了部分，点击之后能查看整张完整的图片是怎么实现的。不知道博主明白我的意思了没有。也就是点击前只显示图片中间500px*240px的部分，点击后显示500px*完整px的效果。
[回复] -
顾客
按你的方法加了但是没有效果？点击图片并没有放大
请问怎么回事[回复]
黔ICP备2023000050号-1 | 本站使用 Dickey’s Blog主题 | 