如果你花费任何时间访问博客最近机会是您所看到的那些小一点照片的一个标题或文字位或附近的刊头accompained。 我不知道如果有一个适当的名称,但大多数人我已经说过了称之为旋转木马,在本教程中,我将告诉你如何添加到博客。 为你们几个谁不知道我说的,这里有一个从gawker.com屏幕截图这是第一个地方,我看到它被使用。
随着时间的推移,对面的旗帜故事移动,最终辍学认为,类似马的方式做一个传送带。 我将会向您展示如何做论文这与这些教程可以适应的节目,与任何博客很多,这只是简单的论文 。 ![]()
首先我们将需要一种方法来孤立的职位,我们要显示在顶部。 机会是你会想你想要的最新帖子,最好的(不是所有的新职位,最好)。 我喜欢让我的博客低维修或自行maintaing,所以我决定使用功能的类的是一样的我用来填补视觉滑块 ,关于网页的。 但是你可以很容易地使用标签,而不是一个孤立的类别。
为了使痛饮发生,我们要创建一个custom_functions.php称为top_carousel()自定义函数top_carousel()和内部的它,我们将要增加global $post (允许WordPress的获得以外的现职项)和1 “if”语句,使痛饮出现在单个帖子页只有(我觉得该网页看起来繁忙“的滑块和旋转木马”,但是这是你的选择)。 下面是最初的代码如下所示:
function top_carousel(){
global $post;
if (is_single ()){
}
}
下一步我们将增加对传送带“包装”这将使我们能够增加一些视觉风格一旦我们这样做:
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
echo '</div>';
}
}
下一步我们将需要建造一个数据库选择语句,只选择我们想要的职位。 对我来说,我希望最后6发布的文章,从“特色”的反向日期顺序类别。 为此,我们将使用以下查询
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
在解释WP_Query错综复杂不过你可以读到它的WordPress或其他教程很多在网络上 更超出了这个职位的范围。 但是希望很容易逆向工程,选择只从“特色”类别的职位,按照日期顺序,依次为,并选择最多6个员额。
接下来,我们需要显示该查询为基础的职位,在这里我们是如何做到这一点:
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div class="carouselu">';
echo '<a href="';
echo the_permalink();
echo '" >';
echo '<img src="http://www.wolf-howl.com/wp-content/themes/thesis-wolf/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;
这一点的代码执行以前的SQL查询,显示的该职位的论文图片,调整下来的140 × 140平方米,它链接到的帖子的永久链接,然后显示的标题作为永久链接的联系,以及,包装到一个“分区整个事情”。
只有一个最后一点,因为我们将要使用CSS浮动个别传送带单位DIV的,我们需要确保我们清楚浮动的,当我们这样做:
echo '<div style="clear:both"></div>';
玉现在把它们组合在一起,它应该是这个样子:
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div class="carouselu">';
echo '<a href="';
echo the_permalink();
echo '" >';
echo '<img src="http://www.wolf-howl.com/wp-content/themes/thesis-wolf/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;
echo '<div style="clear:both"></div>';
echo '</div>';
}
}
左只需2个步骤,我们需要将此代码添加到custom_functions.php告诉论文时,激活并显示传送带,我们这样做是这样的:
add_action('thesis_hook_before_header', 'top_carousel');
然后,我们需要添加的造型我们custom.css文件位,在我的情况下,我用这个:
#topcarosel {border:1px solid #efefef; padding: 0px;padding-left:10px;}
.caroselu {width:150px;float:left;padding:3px;text-align:center;}
.caroselu IMG {border:2px solid #ccc;display:block;}
这种包装的轻型围绕整个顶部旋转木马灰色边框并提出了填充位的地方,然后设置一个的“传送带单位,1位的填充”每个150px宽度和“漂”他们,他们肩并肩出现, ,然后将周围的行李传送带图像浅灰色框,并确保不蔓延到单个字母显示。 如果一切都做得它看起来应该像下面的屏幕快照:
你的机会,以改善该代码是很简陋的,有得/改变它,这里有一些建议:
- 有第一个或两个插槽填充不同的标签/类别,如果您有任何在你的博客的“新闻”的内容排序,这将是非常有益的。
- 看看标签/目前的职位类别,最后选择一个或两个插槽,这将极大地提高点击率相关的职位。
- 更改例如,传送带的位置TechCrunch的目前混入“内容”封锁, 纽约时报提出在文章底部。
- 使用多个传送带在侧栏或之后的职位,以显示相关的职位。
在肖恩波斯富街感谢为写传送带的最后一周和激励我下车,我kiester并弄清楚如何做到这一点,并尼克里斯感谢谁帮编码问题,您可能也想看看他的论文教程一些。
虽然本教程不是一个节目的杰作,这可能是一个超越你,如果你有一些很少的编程经验。 不过,如果你一直想知道的论文只是“新手”我希望这些过去几年论文教程显示你论文确实是一个框架 ,可让您轻松地与您互动的博客和做事更快,更容易,无论你是如何有经验, 所以为什么不尝试一下呢 ?
原来这个职位来自迈克尔格雷谁是搜索引擎优化顾问 。 千万不要错过论文WordPress的主题审查 。
如何添加到您的论文旋转木马博客
相关岗位:
- 如何添加一个Visual滑块论文 下面是关于如何添加一个教程...
- 论文教程-如何添加AdSense的区段配置 你的博客上使用的Adsense通常不是最赚钱的...
- 论文工作作出更好 如果你与社会媒体像Digg,Facebbok网站涉及 与Digg和Facebook的 ...
相关岗位:













