<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>网站前端,web前端,前端脚本,前端优化&#124;时代前端 &#187; 文章</title>
	<atom:link href="http://www.52shidai.com/tag/%e6%96%87%e7%ab%a0/feed" rel="self" type="application/rss+xml" />
	<link>http://www.52shidai.com</link>
	<description>网站前端研究中心</description>
	<lastBuildDate>Thu, 02 Feb 2012 03:36:54 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>在WordPress中自动获取文章中的图片</title>
		<link>http://www.52shidai.com/wordpress/296.html</link>
		<comments>http://www.52shidai.com/wordpress/296.html#comments</comments>
		<pubDate>Fri, 19 Mar 2010 10:24:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[wordpress]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[图片]]></category>
		<category><![CDATA[文章]]></category>
		<category><![CDATA[获取]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=296</guid>
		<description><![CDATA[在做Wordpress主题的时候，有一个问题一直没解决。那就是自动显示缩略图。当然，我知道你可能想利用wordpress中的自定义字段（custom field）功能，显然，这是可行的。但并不自动，这样的话，我们总需要手动添加custom field。很是麻烦。现在好了，在10 Killer WordPress Hacks这篇文章中，我看到最有用的一个hack将能解决这个问题，自动搜索文章图片，然后，显示。 &#60;?php if (have_posts()) : ?&#62; &#60;?php while (have_posts()) : the_post(); ?&#62; &#60;?php $szPostContent = $post-&#62;post_content; $szSearchPattern = '~&#60;img [^\&#62;]*\ /&#62;~'; // 搜索所有符合的图片 preg_match_all( $szSearchPattern, $szPostContent, $aPics ); $iNumberOfPics = count($aPics[0]); // 检查一下至少有一张图片 if ( $iNumberOfPics &#62; 0 ) { // 这里是你怎么处理图片的内容 for ( $i=0; $i &#60; $iNumberOfPics ; $i++ [...]]]></description>
			<content:encoded><![CDATA[<p>在做Wordpress主题的时候，有一个问题一直没解决。那就是自动显示缩略图。当然，我知道你可能想利用wordpress中的自定义字段（custom field）功能，显然，这是可行的。但并不自动，这样的话，我们总需要手动添加custom field。很是麻烦。现在好了，在<a title="10 Killer WordPress Hacks" rel="bookmark" href="http://www.smashingmagazine.com/2009/01/07/10-killer-wordpress-hacks/">10 Killer WordPress Hacks</a>这篇<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%96%87%e7%ab%a0" title="查看 文章 中的全部文章" target="_blank">文章</a></span>中，我看到最有用的一个<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/hack" title="查看 hack 中的全部文章" target="_blank">hack</a></span>将能解决这个问题，自动搜索<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%96%87%e7%ab%a0" title="查看 文章 中的全部文章" target="_blank">文章</a></span><span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e5%9b%be%e7%89%87" title="查看 图片 中的全部文章" target="_blank">图片</a></span>，然后，显示。</p>
<p><code>&lt;?php if (have_posts()) : ?&gt;<br />
&lt;?php while (have_posts()) : the_post(); ?&gt;<br />
&lt;?php<br />
$szPostContent = $post-&gt;post_content;<br />
$szSearchPattern = '~&lt;img [^\&gt;]*\ /&gt;~'; // 搜索所有符合的<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e5%9b%be%e7%89%87" title="查看 图片 中的全部文章" target="_blank">图片</a></span><br />
preg_match_all( $szSearchPattern, $szPostContent, $aPics );<br />
$iNumberOfPics = count($aPics[0]); // 检查一下至少有一张<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e5%9b%be%e7%89%87" title="查看 图片 中的全部文章" target="_blank">图片</a></span><br />
if ( $iNumberOfPics &gt; 0 ) {<br />
// 这里是你怎么处理图片的内容<br />
for ( $i=0; $i &lt; $iNumberOfPics ; $i++ ) {<br />
echo $aPics[0][$i];<br />
};<br />
};<br />
endwhile;<br />
endif;<br />
?&gt;</code></p>
<p>但是，像你知道的，这样的话，如果一篇<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%96%87%e7%ab%a0" title="查看 文章 中的全部文章" target="_blank">文章</a></span>有多个图片的话，都统统会被显示出来。有时我们只需要显示一张，那这个代码就不符合我们的要求了，所以，让我们来小小地修改一下代码：</p>
<p><code>&lt;?php<br />
$soContent = $post-&gt;post_content;<br />
$soImages = '~&lt;img [^\&gt;]*\ /&gt;~';<br />
preg_match_all( $soImages, $soContent, $thePics );<br />
$allPics = count($thePics[0]);<br />
switch ( $allPics &gt; 0 ) {<br />
case $allPics = 1:<br />
echo $thePics[0][0]; // 显示文章中的第一张图片<br />
break; // 当图片数量有1个时，不再执行<br />
default:<br />
echo "这里应该显示图片,而不是sofish"; // 这里加入没图片时显示的默认图片<br />
};<br />
?&gt;</code></p>
<p>像上面说明的，我们用switch语句，而不是if…else if…else这样，来<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e8%8e%b7%e5%8f%96" title="查看 获取 中的全部文章" target="_blank">获取</a></span>我们的一张图片。当检查到一张的时候，代码不再运行。这样也省去了对服务器的请求。</p>
<p><strong>UPDATE:</strong> 感谢来自herb同学的说法，用if…else语句</p>
<p><code>&lt;?php<br />
$soContent = $post-&gt;post_content;<br />
$soImages = '~&lt;img [^\&gt;]*\ /&gt;~';<br />
preg_match_all( $soImages, $soContent, $thePics );<br />
$allPics = count($thePics[0]);<br />
if( $allPics &gt; 0 ){<br />
echo $thePics[0][0];<br />
}<br />
else {<br />
echo "这里应该显示图片,而不是sofish";<br />
}<br />
?&gt;</code></p>
<p>这样的话，也OK，这里是不是说明会检测完所有的图片后，然后，再选择显示显示第一张/默认图片呢？如果是，这个代码的效率可能就没有上个好。但herb同学说：</p>
<blockquote><p>你的那个switch有bug, 如果php的语法与C相同的话, 它应该只能显示仅有一张图片的缩略图。</p></blockquote>
<p>不，这样的BUG没有出现，因为我自己测试过了。 估计是C与PHP有一些小不同。基于效率问题，我推荐你使用Switch语句的实现方法。你呢？如果测试出问题，可以用第二种方法。好吧，我只看了一点点的PHP，如果你有更好的方法，不妨提出来，让更多人知道。</p>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/web-front/804.html" title="Web 前端优化最佳实践之 图象篇">Web 前端优化最佳实践之 图象篇</a></li><li><a href="http://www.52shidai.com/javascript/702.html" title="随机产生图片的轮换的js代码">随机产生图片的轮换的js代码</a></li><li><a href="http://www.52shidai.com/javascript/696.html" title="javascript图片预加载技术">javascript图片预加载技术</a></li><li><a href="http://www.52shidai.com/javascript/338.html" title="封装好的javascript图片滑动效果">封装好的javascript图片滑动效果</a></li><li><a href="http://www.52shidai.com/seo/161.html" title="让谷歌快速收录最新文章">让谷歌快速收录最新文章</a></li><li><a href="http://www.52shidai.com/wordpress/134.html" title="将文章自动为两列显示">将文章自动为两列显示</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/wordpress/296.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>让谷歌快速收录最新文章</title>
		<link>http://www.52shidai.com/seo/161.html</link>
		<comments>http://www.52shidai.com/seo/161.html#comments</comments>
		<pubDate>Tue, 23 Feb 2010 09:55:42 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[SEO]]></category>
		<category><![CDATA[收录]]></category>
		<category><![CDATA[文章]]></category>
		<category><![CDATA[网站]]></category>
		<category><![CDATA[谷歌]]></category>

		<guid isPermaLink="false">http://52shidai.com/?p=161</guid>
		<description><![CDATA[谷歌是很容易收录一个网站的，一般来说，一个新站2-4天就可以完全收录。但如果最新发布的文章，尤其是博客文章，你是不是会发现通常更新一篇文章后，甚至第二天google才会收录，而相同类型的网站却能在几个小时内甚至几分钟之内就收录了。下面，卢松松就粗略讲解下如何让google快速收录你的文章。 希望建立一个Google Sitemaps 一般人想快速收录网站都会想到把文章提交到搜索引擎登录口，但仅仅这样做是不够的，使用Google Sitemaps 有助于加速网页的查找，这也是抓取网页和编制索引重要的第一步，但有很多因素会影响抓取/编制索引过程，所以希望大家都建立一个Sitemaps。 把新文章加入网络收藏夹 光有Sitemaps还是不够的，如果想让最新文章在几分钟之内被收录，最快的方法就是把URL加入收藏夹，也就是增加少量外链，不建议把新文章做成软文发布，由于博客权重低，google会认为此文章不是你原创的。所以，把文章加入网络收藏夹，只写标题、URL和一部分简要说明就够了。 把新文章提交到顶客DIGG 顶客DIGG是 web2.0的新应用之一，把新文章提交到顶客，也是增加外链的一种方式，填写好URL、标题、关键字和和一些简要说明（最好带部分关键字）即可。顺便，你可以自己顶自己一把。当然提交到带有网址缩略功能的微博客就不现实，例如：新浪微博。不会起到任何效果，除非点击的人非常多。 我常用的让google快速收录文章的资源列表 找个优秀的推广网站地是件麻烦事，常用的让google快速收录文章的资源列表。 百度收藏：http://cang.baidu.com/ 新浪ViVi收藏：http://vivi.sina.com.cn/ QQ 书签：http://shuqian.qq.com/ 乐收网络收藏夹：http://leshou.com 冬瓜：http://www.dongua.com 奇客：http://www.diglog.com 中国顶客：http://cndig.org/ 抽屉：http://www.chouti.com/ 您可能感兴趣的文章你知道百度和谷歌搜索引擎收录网页的细微差别吗？2011年12月谷歌进行了30次搜索质量改进谷歌WebGL浏览器图形技术Angle现雏形微软必应挑战谷歌搜索引擎百度收录减少的问题怎么解决做SEO关键字到底放在哪里在Wordpress中自动获取文章中的图片如何让 谷歌google快速收录你的文章将文章自动为两列显示网站优化网站优化到底包含哪几部分]]></description>
			<content:encoded><![CDATA[<p><span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e8%b0%b7%e6%ad%8c" title="查看 谷歌 中的全部文章" target="_blank">谷歌</a></span>是很容易<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%94%b6%e5%bd%95" title="查看 收录 中的全部文章" target="_blank">收录</a></span>一个<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e7%bd%91%e7%ab%99" title="查看 网站 中的全部文章" target="_blank">网站</a></span>的，一般来说，一个新站2-4天就可以完全<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%94%b6%e5%bd%95" title="查看 收录 中的全部文章" target="_blank">收录</a></span>。但如果最新发布的<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%96%87%e7%ab%a0" title="查看 文章 中的全部文章" target="_blank">文章</a></span>，尤其是博客<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%96%87%e7%ab%a0" title="查看 文章 中的全部文章" target="_blank">文章</a></span>，你是不是会发现通常更新一篇文章后，甚至第二天google才会收录，而相同类型的<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e7%bd%91%e7%ab%99" title="查看 网站 中的全部文章" target="_blank">网站</a></span>却能在几个小时内甚至几分钟之内就收录了。下面，卢松松就粗略讲解下如何让google快速收录你的文章。</p>
<p>希望建立一个Google Sitemaps</p>
<p>一般人想快速收录网站都会想到把文章提交到搜索引擎登录口，但仅仅这样做是不够的，使用Google Sitemaps 有助于加速网页的查找，这也是抓取网页和编制索引重要的第一步，但有很多因素会影响抓取/编制索引过程，所以希望大家都建立一个Sitemaps。</p>
<p>把新文章加入网络收藏夹</p>
<p>光有Sitemaps还是不够的，如果想让最新文章在几分钟之内被收录，最快的方法就是把URL加入收藏夹，也就是增加少量外链，不建议把新文章做成软文发布，由于博客权重低，google会认为此文章不是你原创的。所以，把文章加入网络收藏夹，只写标题、URL和一部分简要说明就够了。</p>
<p>把新文章提交到顶客DIGG</p>
<p>顶客DIGG是 web2.0的新应用之一，把新文章提交到顶客，也是增加外链的一种方式，填写好URL、标题、关键字和和一些简要说明（最好带部分关键字）即可。顺便，你可以自己顶自己一把。当然提交到带有网址缩略功能的微博客就不现实，例如：新浪微博。不会起到任何效果，除非点击的人非常多。</p>
<p>我常用的让google快速收录文章的资源列表</p>
<p>找个优秀的推广网站地是件麻烦事，常用的让google快速收录文章的资源列表。<br />
百度收藏：http://cang.baidu.com/<br />
新浪ViVi收藏：http://vivi.sina.com.cn/<br />
QQ 书签：http://shuqian.qq.com/<br />
乐收网络收藏夹：http://leshou.com<br />
冬瓜：http://www.dongua.com<br />
奇客：http://www.diglog.com<br />
中国顶客：http://cndig.org/<br />
抽屉：http://www.chouti.com/</p>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/seo/151.html" title="你知道百度和谷歌搜索引擎收录网页的细微差别吗？">你知道百度和谷歌搜索引擎收录网页的细微差别吗？</a></li><li><a href="http://www.52shidai.com/seo/881.html" title="2011年12月谷歌进行了30次搜索质量改进">2011年12月谷歌进行了30次搜索质量改进</a></li><li><a href="http://www.52shidai.com/web-front/819.html" title="谷歌WebGL浏览器图形技术Angle现雏形">谷歌WebGL浏览器图形技术Angle现雏形</a></li><li><a href="http://www.52shidai.com/seo/682.html" title="微软必应挑战谷歌搜索引擎">微软必应挑战谷歌搜索引擎</a></li><li><a href="http://www.52shidai.com/seo/638.html" title="百度收录减少的问题怎么解决">百度收录减少的问题怎么解决</a></li><li><a href="http://www.52shidai.com/seo/436.html" title="做SEO关键字到底放在哪里">做SEO关键字到底放在哪里</a></li><li><a href="http://www.52shidai.com/wordpress/296.html" title="在Wordpress中自动获取文章中的图片">在Wordpress中自动获取文章中的图片</a></li><li><a href="http://www.52shidai.com/seo/155.html" title="如何让 谷歌google快速收录你的文章">如何让 谷歌google快速收录你的文章</a></li><li><a href="http://www.52shidai.com/wordpress/134.html" title="将文章自动为两列显示">将文章自动为两列显示</a></li><li><a href="http://www.52shidai.com/seo/116.html" title="网站优化网站优化到底包含哪几部分">网站优化网站优化到底包含哪几部分</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/seo/161.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>将文章自动为两列显示</title>
		<link>http://www.52shidai.com/wordpress/134.html</link>
		<comments>http://www.52shidai.com/wordpress/134.html#comments</comments>
		<pubDate>Sun, 21 Feb 2010 06:05:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[wordpress]]></category>
		<category><![CDATA[两列]]></category>
		<category><![CDATA[文章]]></category>

		<guid isPermaLink="false">http://52shidai.com/?p=134</guid>
		<description><![CDATA[很多博客都有一行显示多个post文章的样式，他的原理其实非常简单，今天找到一段php代码，只需在functions.php文件中添加上，那么你的文章也会多列显示，非常实用！ 1.PHP代码： 打开functions.php文件，添加如下的php代码，通过判断是否是第二次输出来给出左右浮动的div标签。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 &#60; ?php function my_multi_col($content){ $columns = explode("&#60;h2&#62;", $content); $i = 0; foreach ($columns as $column) { if (($i % 2) [...]]]></description>
			<content:encoded><![CDATA[<div>
<p>很多博客都有一行显示多个post<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%96%87%e7%ab%a0" title="查看 文章 中的全部文章" target="_blank">文章</a></span>的样式，他的原理其实非常简单，今天找到一段php代码，只需在functions.php文件中添加上，那么你的<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%96%87%e7%ab%a0" title="查看 文章 中的全部文章" target="_blank">文章</a></span>也会多列显示，非常实用！</p>
<h3>1.PHP代码：</h3>
<p>打开functions.php文件，添加如下的php代码，通过判断是否是第二次输出来给出左右浮动的div标签。</p>
<div>
<table>
<tbody>
<tr id="p8231">
<td>
<pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32</pre>
</td>
<td id="p823code1">
<pre>&lt; ?php
function my_multi_col($content){
	$columns = explode("&lt;h2&gt;", $content);

	$i = 0;

	foreach ($columns as $column) {
		if (($i % 2) == 0){
			$return .= '&lt;div&gt;';
			if ($i &gt; 1){
				$return .= "&lt;h2&gt;";
			} else{
				$return .= '&lt;div&gt;&lt;h2&gt;';
			}
			$return .= $column;
			$return .= "&lt;/h2&gt;&lt;/div&gt;";
			$i++;
		}

		if(isset($columns[1])){
			$content = wpautop($return);
		}else{
			$content = wpautop($content);
		}
		echo $content;
	}
}

add_filter('the_content', 'my_multi_col');

?&gt;
&lt;/h2&gt;&lt;/div&gt;</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>代码中的h2是你的每个<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%96%87%e7%ab%a0" title="查看 文章 中的全部文章" target="_blank">文章</a></span>标题所包含的标签。</p>
<h3>2.CSS代码：</h3>
<p>完成在functions.php文件中添加好上面的代码后，记得打开style.css文件，添加上样式代码。</p>
<div>
<table>
<tbody>
<tr id="p8232">
<td>
<pre>1
2
3
4
5
6
7
8
9
10
11</pre>
</td>
<td id="p823code2">
<pre>.content_right, .content_left {
    width:45%;
}

.content_left {
    float:left;
}

.content_right {
    float:right;
}</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>那么同理，我们可以根据判断$i变量来输出3列、4列等。<label>只要想的到，就能做得到！</label></p>
</div>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/wordpress/296.html" title="在Wordpress中自动获取文章中的图片">在Wordpress中自动获取文章中的图片</a></li><li><a href="http://www.52shidai.com/seo/161.html" title="让谷歌快速收录最新文章">让谷歌快速收录最新文章</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/wordpress/134.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

