月度归档:2013年02月

music

精品HTML5音乐播放器,适合Woredpress页面哦

很久之前为自己的博客做过一个音乐展示页面,预览地址是:【点击查看

结果好多朋友问我怎么写的,具体的我也不是很懂怎么写的,核心代码来自台湾一位设计达人,我只是做了一点小小的修改,然后今天给大家说一下具体怎么制作一个这种页面吧

music

music

  1. 下载所需文件【点击下载
  2. 页面的顶部title以及底部版权在index.html中修改,希望大家能给本站留一个链接
  3. 整体背景在css/stylesheet/style.css中第三十行修改,大家选用图片的时候最好大一点,避免屏幕不满
  4. 想要添加歌曲呢需要在js/script.js中修改。其中第八行到第15行是一首歌曲,16到23是一首,作者歌曲演唱者封面等大家自己折腾吧
  5. 修改完毕以后上传在网站的public文件夹下面,然后打开你的域名/music是不是音乐播放器界面就搭建好了呢

今天的教程到此结束哦

wesky

精品WordPress CMS主题Wesky

Wesky是天空团出品的一款精品Wordpress主题,简洁清新,适合博客使用,也特别适合CMS的网站使用,主题都有多种色系可以自己任意选择

wesky

wesky

主题特性:

  • 相关文章
  • 后台面板
  • 多种颜色
  • CMS
  • Ajax

下载预览:

WordPress添加面包屑导航功能

在上一篇文章中我们介绍了WordPress文章目录功能它只是对Wordpress单个文章而言的,但是如果你在浏览某个分类下的文章的时候你想回到上面的目录,就需要用到面包屑导航,它主要用来记录你当前相对于文章首页的位置,他是一个相对位置。

1,在functions.php中添加如下代码

function get_breadcrumbs()
{
global $wp_query;
if ( !is_home() ){
// Start the UL
echo '
    '; // Add the Home link echo ''. 首页 .''; if ( is_category() ) { $catTitle = single_cat_title( "", false ); $cat = get_cat_ID( $catTitle ); echo " » ". get_category_parents( $cat, TRUE, " » " ) ; } elseif ( is_archive() && !is_category() ) { echo "» Archives"; } elseif ( is_search() ) { echo "» Search Results"; } elseif ( is_404() ) { echo "» 404 Not Found"; } elseif ( is_single() ) { $category = get_the_category(); $category_id = get_cat_ID( $category[0]->cat_name ); echo '» '. get_category_parents( $category_id, TRUE, " » " ); echo the_title('','', FALSE); } elseif ( is_page() ) { $post = $wp_query->get_queried_object(); if ( $post->post_parent == 0 ){ echo "
  • » ".the_title('','', FALSE)."
  • "; } else { $title = the_title('','', FALSE); $ancestors = array_reverse( get_post_ancestors( $post->ID ) ); array_push($ancestors, $post->ID); foreach ( $ancestors as $ancestor ){ if( $ancestor != end($ancestors) ){ echo '
  • » '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'
  • '; } else { echo '
  • » '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'
  • '; } } } } // End the UL echo "
"; } }

2,在需要调用的地方调用就好了


3,自己CSS美化一下吧

WordPress文章目录功能

在浏览百度知道的时候,你是否发现右上角有一列目录,点击之后直接跳转到本页相对应的位置,如果你的Wordpress文章博文目录比较清晰的话是不是很容易就能让访客找到自己感兴趣额的东西呢,这是肯定的哇,但是怎么实现呢,下面Themeidea就教你实现此功能
1,将下面的代码写入functions.php

function article_index($content) {
    $matches = array();
    $ul_li = '';
    $r = "/

([^<]+)<\/h3>/im"; if(preg_match_all($r, $content, $matches)) { foreach($matches[1] as $num => $title) { $content = str_replace($matches[0][$num], '

'.$title.'

', $content); $ul_li .= '
  • '.$title."
  • \n"; } $content = "\n
    [文章目录]
      \n" . $ul_li . "
    \n" . $content; } return $content; } add_filter( "the_content", "article_index" );

    2,使用CSS对其进行美化

    #article-index {background:#F7F7F7;-moz-border-radius: 6px 6px 6px 6px;border: 1px solid #DEDFE1;float: right;margin: 5px 0 5px 15px;padding: 0 6px;width: 280px;line-height: 24px;}
    #article-index b {border-bottom: 1px dashed #DDDDDD;display: block;line-height: 30px;padding: 0 4px;}
    #index-ul {margin: 0;padding-bottom: 5px;}
    #index-ul li {background: none repeat scroll 0 0 transparent;list-style-type: disc;padding: 0;margin-top: 5px;margin-bottom: 5px;margin-left: 20px;}
    #index-ul a{text-decoration:none;}
    

    缺点:

    • 只支持h3标签
    • 文章分页启用以后,只能在第一页显示
    • 不能实现分级目录