香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播

移植Dux主题的标签云页面到其他的WordPress主题里面

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播很多WordPress主题都没有标签页面,其实这对SEO非常的不友好。想想多可怕啊,你辛辛苦苦的写了无数多的标签,可没有一个页面为其展现,显得凌乱不堪。当然了,有一个标签页面,除了方便搜索引擎蜘蛛爬行,更多原因还是用户的体验的,说来可笑,很多主题的站内搜索都不支持搜索标签。

那么,你辛辛苦苦写了标签有什么用,不利于SEO,又让用户的体验很差,让用户找不到更新想要的内容,所以拥有一个标签页面是很重要的。如何创建一个标签页面呢,嗯这个嘛,自己做一个页面还要写CSS样式,多累啊,不如移植现成的。我逛来逛去就发现大前端的Dux主题的标签页面很好看,不如直接移植过来。

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播方法是这样的,以modown主题为例,方法大同小异。

1,去DUX演示站的标签页面把代码复制好,如果不会复制的话,那么直接把dux主题下载下来,把tags.php拷贝到你的主题相对应的位置,注意是tags.php,在pages文件夹里面。点击下载Dux主题

你说你不想为了一个代码去下载一个主题,怎么办呢,那能怎么办,我就把代码贴出来呢,在你主题对应的位置新建一个tags.php,然后把下面代码拷贝进去。

<?php
/**
* Template name: Tags
* Description: A tags page
*/

get_header();

?>

<div class="container container-tags">
<h1><?php the_title(); ?></h1>
<div class="tagslist">
<ul>
<?php
$tags_count = 60;
$tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);
foreach($tagslist as $tag) {
echo '<li><a class="name" href="'.get_tag_link($tag).'">'. $tag->name .'</a><small>&times;'. $tag->count .'</small>';

$posts = get_posts( "tag_id=". $tag->term_id ."&numberposts=1" );
foreach( $posts as $post ) {
setup_postdata( $post );
echo '<p><a class="tit" href="'.get_permalink().'">'.get_the_title().'</a></p>';
}

echo '</li>';
}

?>
</ul>
</div>
</div>

<?php

get_footer();

至于什么是相对应的位置在哪里,可以放到你的主题根目录啊,也可以放到你主题的放页面模板的目录。比如DUX放页面模板的目录就在pages里面,而modown主题放页面模板的目录是template里面。如果你用的主题没有的话就放主题根目录啦。

2,然后在自己网站后台新建一个页面,就可以看到一个“tags”的模板,选择这个模板发布。

3,把标签的美化CSS拷贝过来,放到相对应的CSS位置,代码如下:


.container-tags{}
.container-tags h1{font-size: 22px;margin: 0;text-align: center;margin-bottom: 15px;}
.tagslist{overflow: hidden;}
.tagslist ul{list-style-type: none;padding: 0;margin: 0 -2% 0 0;}
.tagslist li{float: left;width: 23%;margin-right: 2%;margin-bottom: 2%;padding: 15px;border: 1px solid #eee;background-color: #fff;border-radius: 2px;}
.tagslist li .name{background-color: #eee;display: inline-block;padding: 5px 10px 4px;font-size: 12px;color: #666;}
.tagslist li .name:hover{background-color: #444;color: #fff;}
.tagslist li:hover{border-color: #ccc;}
.tagslist li:hover .name{background-color: #444;color: #fff;}
.tagslist li small{margin-left: 10px;color: #bbb;}
.tagslist li p{margin: 10px 0 0;font-size: 12px;height: 17px;overflow: hidden;display: block;line-height: 1.5;}
.tagslist li .tit{color: #999;}
.tagslist li .tit:hover{color: #444;}

@media (max-width:1024px){
	.tagslist li{width: 31.3333333%;}
}
@media (max-width:768px){
	.tagslist li{width: 48%;}
}
@media (max-width:640px){
	.container-tags{padding: 15px;}
}
@media (max-width:544px){
	.container-tags h1{font-size: 14px;font-weight: bold;margin-bottom: 10px;}
	.tagslist li{padding: 10px;}
}

至于什么叫相对应的CSS位置,跟上面一样,跟你当前使用的主题有关,比如modown主题的CSS就在modown/static/css/base.css里面。而dux主题的css在dux/css/main.css里面。而有些主题的css就在主题根目录的style.css里面。这样说的好像很复杂的样子,如果找不到相对应的CSS位置,还有一个很简单的方法,就是把上面的CSS代码放到自定义CSS样式里面。

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播差不多就是这样的了,如果你遇到其他主题的标签页面很好看,想移植方法都是一样的,难点就是要找对“相对应”的位置。想想其实也不难啊。

点击查看移植效果

评论0

请先

没有账号? 忘记密码?