wordpress非插件3D彩色标签

Zero零分 WordPress 3,905 0 6年前

无意中发现知更鸟的3D标签很好看,于是乎就拷了下来!

对于wordpress,重塑的代码可能不规范,大体是这样的!

引入一个JS文件(3dtag.js,点击下载

CSS:

  1. #tag_cloud_widget {
  2.     positionrelative;
  3.     width240px;
  4.     height240px;
  5.     margin10px auto 10px
  6. }
  7. #tag_cloud_widget a {
  8.     positionabsolute;
  9.     color#fff;
  10.     background#d02f53;
  11.     displayblock;
  12.     text-aligncenter;
  13.     text-overflow: ellipsis;
  14.     whitewhite-spacenowrap;
  15.     top: 0;
  16.     left: 0;
  17.     padding3px 5px;
  18.     border: 0
  19. }
  20. #tag_cloud_widget a:hover {
  21.     background#d02f53;
  22.     displayblock
  23. }
  24. #tag_cloud_widget a:nth-child(n) {
  25.     background#666;
  26.     border-radius: 3px;
  27.     displayinlineblock;
  28.     line-height18px;
  29.     margin: 0 10px 15px 0
  30. }
  31. #tag_cloud_widget a:nth-child(2n) {
  32.     background#d1a601
  33. }
  34. #tag_cloud_widget a:nth-child(3n) {
  35.     background#286c4a
  36. }
  37. #tag_cloud_widget a:nth-child(5n) {
  38.     background#518ab2
  39. }
  40. #tag_cloud_widget a:nth-child(4n) {
  41.     background#c91d13
  42. }

html:

  1. <div id=“tag_cloud_widget”>
  2.      <a href=“/tag/%e6%95%99%e7%a8%8b/” class=“tag-link-192” title=“17个话题” style=“font-size: 14px;”>教程</a>
  3.      <a href=“/tag/firefox/” class=“tag-link-36” title=“28个话题” style=“font-size: 14px;”>Firefox</a>
  4.      <a href=“/tag/utility-software/” class=“tag-link-778” title=“100个话题” style=“font-size: 14px;”>实用软件</a>
  5.      <a href=“/tag/information/” class=“tag-link-12” title=“144个话题” style=“font-size: 14px;”>网文资讯</a>
  6.      <a href=“/tag/wpplugins/” class=“tag-link-8” title=“55个话题” style=“font-size: 14px;”>plugins</a>
  7.      <a href=“/tag/%e9%97%b2%e8%a8%80%e7%a2%8e%e8%af%ad/” class=“tag-link-258” title=“44个话题” style=“font-size: 14px;”>闲言碎语</a>
  8.      <a href=“/tag/hotnews%e4%b8%bb%e9%a2%98/” class=“tag-link-453” title=“46个话题” style=“font-size: 14px;”>HotNews主题</a>
  9.      <a href=“/tag/wordpress/” class=“tag-link-6” title=“362个话题” style=“font-size: 14px;”>WordPress</a>
  10.      <a href=“/tag/photoshop/” class=“tag-link-775” title=“33个话题” style=“font-size: 14px;”>Photoshop</a>
  11.      <a href=“/tag/hotnews-pro/” class=“tag-link-265” title=“78个话题” style=“font-size: 14px;”>HotNews Pro</a>
  12.      <a href=“/tag/wordpress-course/” class=“tag-link-128” title=“91个话题” style=“font-size: 14px;”>Wordpress教程</a>
  13.      <a href=“/tag/%e5%93%8d%e5%ba%94%e5%bc%8f/” class=“tag-link-617” title=“33个话题” style=“font-size: 14px;”>响应式</a>
  14.      <a href=“/tag/%e5%8e%9f%e5%88%9b%e4%b8%bb%e9%a2%98/” class=“tag-link-341” title=“46个话题” style=“font-size: 14px;”>原创主题</a>
  15.      <a href=“/tag/webdesign/” class=“tag-link-777” title=“137个话题” style=“font-size: 14px;”>Web前端</a>
  16.      <a href=“/tag/uidesign/” class=“tag-link-776” title=“39个话题” style=“font-size: 14px;”>设计资源</a>
  17.      <a href=“/tag/skill/” class=“tag-link-779” title=“85个话题” style=“font-size: 14px;”>实用技巧</a>
  18.      <a href=“/tag/css/” class=“tag-link-29” title=“19个话题” style=“font-size: 14px;”>CSS</a>
  19.      <a href=“/tag/jquery/” class=“tag-link-56” title=“47个话题” style=“font-size: 14px;”>JQuery</a>
  20.      <a href=“/tag/web%e8%ae%be%e8%ae%a1/” class=“tag-link-109” title=“20个话题” style=“font-size: 14px;”>Web设计</a>
  21.      <a href=“/tag/wordpress%e4%b8%bb%e9%a2%98/” class=“tag-link-347” title=“89个话题” style=“font-size: 14px;”>WordPress主题</a>
  22.      <div class=“clear”></div>
  23.    </div>

PS:html仅仅只是演示,具体是用 <div id=“tag_cloud_widget”>  </ div>包含a标签,也就是标签云

演示://demo.32xp.com/demo/wordpress/3dtag.html

END

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

*

用户评论(0)

wordpress相邻文章(下一篇下一篇)显示文章略缩图

wordpress相邻文章(下一篇下一篇)显示文章相邻文章的略缩图,如 在没有略缩图时显示默认图片 原理:通过文章ID调用略缩图,functions.php插入调用略缩图函数 if(function_exists('add_theme_support')){ add_theme_support( 'post-thumbnails' ); } function post_thumbnail($id=false){ if(has_post_thumbnail($id)){ //如果有缩略图,则显示缩略图 the_post_thumbnail($id); }else{ global $post, $posts; $post_img = ''; $post_content=$id?get_post($id)->post_content:$post->post_content; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post_content, $matches); $post_img_src = $matches [1][0]; $post_img = $post_img_src; //如果没有缩略图,则显示日志中的第一张图片 if(empty($post_img_src)){ //如果日志中没有图片,则显示默认图片 $post_img = get_bloginfo("template_url").'/images/noimg.jpg'; } $post_img = str_replace('//','//',$post_img); return $post_img; } } 文章列表可以直接通过post_thumbnail()调用,在上一篇下一篇中通过相邻文章的ID调用,上一篇文章ID:get_previous_post()->ID,下一篇文章ID:get_next_post()->ID,调用代码 上一篇:post_thumbnail(get_previous_post()->ID) 下一篇:post_thumbnail(get_next_post()->ID) 当然也可以通过任意文章ID调用      
笔记 ·

wordpress添加编辑器可视化按钮代码

需要功能: 1、在编辑器可视化界面添加一个按钮 2、点击按钮弹出输入框 添加按钮: 在functions.php模板函数文件中添加插入按钮函数 挂载函数到正确的钩子 function outurl_mce_button() { // 检查用户权限 if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { return; } // 检查是否启用可视化编辑 if ( 'true' == get_user_option( 'rich_editing' ) ) { add_filter( 'mce_external_plugins', 'outurl_plugin' ); add_filter( 'mce_buttons', 'outurl_button' ); } } add_action('admin_head', 'outurl_mce_button'); 声明新按钮的脚本 function outurl_plugin( $plugin_array ) { $plugin_array['outurl'] = get_template_directory_uri() .'/images/js/outurl.js'; return $plugin_array; } 在编辑器上注册新按钮 function outurl_button( $buttons ) { array_push( $buttons, 'outurl' ); return $buttons; } outurl.js实现功能函数 (function () { tinymce.PluginManager.add('outurl', function (editor, url) { editor.addButton('outurl', { title: '添加外链', image: url+"/outurl.png", onclick: function () { //editor.insertContent('WPExplorer.com is awesome!'); editor.windowManager.open({ title: '请输入标签及外链', body: [ { label:'输入标签', type: 'textbox', name: 'outkey', minWidth: 400, minHeight: 30, multiline: false, value: '' }, { label:'输入链接', type: 'textbox', name: 'outurl', minWidth: 400, minHeight: 30, multiline: false, value: '' } ], onsubmit: function (e) { //获取输入内容 var outkey = e.data.outkey; var outurl = e.data.outurl; var urls=jQuery("#urls_value").val(); var urlarr=urls.split("[++++++++++]"); var i=urlarr.length; if(outkey.length > 0 && outurl.length > 0) { var txt=jQuery("#urls_value").val()+'[++++++++++]'+outurl; jQuery("#urls_value").val(txt); //将地址拼接到iframe ,输出到编辑器 editor.insertContent('[ outurl id='+i+']'+outkey+'[ /outurl]'); }else{ alert("标签和URL都不能为空!"); } } }); } }); }); })(); 最后处理短代吗 function outurl($atts,$content){ global $post; extract(shortcode_atts(array("id"=>'0'),$atts)); return '<a target="_blank" rel="nofollow" href="'.get_bloginfo("url").'/go?e='.$post->ID.'_'.$id.'_1_1_'.time().'">'.$content.'</a>'; } 以上是以博客外链为例  
笔记 ·

wordpress添加编辑器按钮

最近在写一个新的wordpress模板,其中有一个文章外链问题,需要在编辑器上添加一个按钮! 基本功能是:点击按钮弹出输入框,在输入框内黏贴外来链接,短代码功能修改链接跳转go=xxx这样 按钮移植这个博客的代码,发现问题: 1、不显示按钮 2、不支持jq 就算重新用这个博客的模板,一样无法使用这个功能,很奇怪,wordpress的版本是一样的! 也就是两个完全一样的环境下,两个模板的一些功能无法使用! 目前正在测试中,看具体是哪里的问题!
笔记 ·

WordPress评论表单添加验证码

上次看到朋友的博客,垃圾评论竟然上万条,这得多久没有进入后台?还是没有清理的习惯? 虽说,评论的用途似乎不是很大,WordPress现在折腾的人也少了吧。终究还是限制了一下评论,添加了一个验证码,且看下后续的效果 原本是想把验证码放在“提交评论”左侧的,但折腾了半天,还是不知道怎么放过来,测试了一些钩子,似乎也都不行。暂且先这样吧!
笔记 ·
Zero零分
站龄14年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
464
文章
36
评论
27
分类
819
标签
7
友链
onlinelovesky 317355746 122551965@qq.com

百度广告