使用Javascript实现选择下拉菜单互移并排序
406
2024-03-11
友情链接对于一个每个独立博客来说可以说是必须的,有不少人选择在侧边栏加入友情链接栏目,但建立一个独立的友情链接页面也是一个不错的选择。用插件可以轻松做到这一点,但喜欢原生的我,能自己动手解决,还是自己动手解决好。折腾了一下,方法就出来了。
普通方法
建立一个友情链接页面的步骤也是比较简单的,先建立一个新的页面模板,用友链函数调用友链,再加上css美化,事情就完成了。
下面说说具体的步骤
1.建立一个新的模板页面
复制主题中的page.php文件,重命名为links.php。
在页面的顶部加入如下代码
<?php /* Template Name: Links */ ?>
再把类似下面的一段代码
<div class="post-content"><?php the_content(); ?></div>
替换为
<div class="lists"><p class="tips">站点随机排序</p><?php wp_list_bookmarks('orderby=rand&show_images=1'); ?></div>
2.添加css美化,以下是个人的css,供大家参考
.lists {padding: 5px; margin: 25px auto auto 0;} .linkcat {font-size: 12px; font-weight: bolder; padding: 5px; margin-bottom: 15px; list-style: none; clear:both} .lists li h2 {font-size:14px; margin-bottom: 15px; color: #99CC33; } .listcat ul {margin-left: 20px;} .linkcat ul li {float: left; margin-bottom: 20px; margin-left: 20px; padding: 4px 0 4px 6px; width: 150px; border: 1px solid #d9d9d9;} .linkcat ul li a {color: #a4a4a4; text-decoration: none;} .linkcat ul li a img {margin-right: 3px;} .linkcat ul li a:visited {color: #a4a4a4;} .tips {font-size: 14px; margin-bottom: 18px; margin-left: 5px;}
使用jQuery
具体实现步骤分两步:
1.加载jQuery库,可以直接调用google jQuery库
2.加载jQuery功能代码,注意jQuery闭合<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
$(".linkpage a").each(function(e){ $(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http://[^/]+).*$/, '$1').replace( 'http://', '' )+">"); });这段jQuery的意思是遍历所有class为linkpage下所有的a标签,然后对该a标签添加img,其中是“.linkpage”需根据自己的模板更改。
#免责声明#
本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解!