WP主题的“音乐样式”小结
文章样式是WP3.1版本推出的一个新功能，虽然对于老博客来说用处不是很大（因为要操作的文章比较多），所以“能见度”很低……我在刚推出的那段时间也试着折腾了一些，一直用到现在，基本来说，仿微博客，但貌似不很成功……有同学提到如何实现，所以本篇就介绍一下ink主题目前使用的“音乐样式”。
主题老鸟可以略过本篇内容，或截取使用。因为具体过程完全可以参考官方的twentyeleven……话不多说，上代码~~
1、function.php里注册相应的样式名称，例如我加的：add_theme_support(‘post-formats’, ‘audio’);
2、index.php里面while(have_posts()) : the_post();?>这一行，直到endwhile; ?>之间的内容剪切下来，改成如下样式：
|
1 2 3 |
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> |
3、主题目录下新建文件content.php，把第二步剪切下来的内容粘贴到里面，存储，这主要是设置默认的显示样式；
4、复制一份content.php，重命名为content-audio.php，这个便是要定义的音乐样式了。把the_content()这一行删掉，写入需要显示的内容，例如我增加了5个内容：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php $soContent = $post->post_content; $soImages = '~<img [^\>]*\ />~'; preg_match_all( $soImages, $soContent, $thePics ); $allPics = count($thePics[0]); echo '<div class="audioback"><a href="'; echo the_permalink(); echo '" rel="nofollow"><div class="overlay"></div>'; if( $allPics > 0 ){ echo $thePics[0][0]; } else{ echo '你的默认图片地址';//改为你需要的图片地址 } echo '</a></div>'; ?> |
以上内容为获取并显示文章第一张图片
update 11.12.17:默认图片，感谢 phoetry
|
1 2 3 4 5 6 7 8 9 10 |
<?php $soContent = $post->post_content; $soMedia = '~<embed [^\>]*\ />~'; preg_match_all( $soMedia, $soContent, $theMidea ); $allMedia = count($themedia[0]); if( $allMedia > 0 ){ echo '<div class="audio">'; echo $themedia[0][0]; echo '</div>';} ?> |
以上内容为获取并显示第一个内嵌的播放器，接下来格式输出~~
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="audioauthor"> <a href="<?php the_permalink() ?>" title="<?php the_title() ; ?>" rel="bookmark"> <?php the_title(); ?> </a> </div> <div class="audioviews"> Played <?php post_views('<span class="playtime">', '</span>') ?> times </div> <a href="<?php the_permalink() ?>#comments" title="<?php the_title() ; ?>" rel="bookmark"> <div class="more-play"> <span class="yplay"> <?php comments_number('占个前排','1 位听众','% 位听众');?> </span> </div> </a> |
这就是所有关键步骤了。除此之外再根据主题具体需要定义一下css样式就可以了，对于做过主题的盆友来说这一步一定不是问题~~
转载请注明转自：WP主题的“音乐样式”小结
未匹配到图片时, 是不是调用一张默认图片比较好呢.
话说, 文章样式出来好几个版本了, 我还没碰过…
@phoetry 我用的是未匹配就不显示，因为那样就全是默认图片了…
@phoetry 额，我理解错了……加个默认图片，谢谢提醒
我是两个div，一个图片，一个是歌曲和介绍，自己手打，没有写成固定格式
唔唔，很有用。标个星号~
@静夜燃香 哼，话说这两个月你净刷微博了……
木看明白啊~~
@小年 反过来再看看
一直懒得折腾这个，1是没多大用处，2是多了太多工作
@zwwooooo 嗯，集成完的话基本是一劳永逸~~不过真没啥用处
有的时候想放点儿音乐，想想就放弃了，辛辛苦苦独立出来，一下子回到qq空间时代。。。
@Veezy 偶尔放点呗，要不跟你似得半年不更新……
@axiu 没没，我是说首页直接加载音乐。文章里放音乐挺好的～
啊我要更新。3天之内
懒得搞这些了 麻烦死
原来里面的样式是这么来的啊。我说呢。下个主题试下。
@wmtimes 好，祝你成功
这样不会写代码的情何以堪，我一直想加个文章样式。。。
@心迷魔乐 仔细看看就明白了
@axiu CSS那块要自己写，函数看不懂。懂不懂和认不认真看无关系。
怎么着也得支持一下，哪天用上了也说不定（音乐站）。
貌似没有太明白你怎么匹配的，为啥不匹配以MP3或者其他音乐格式结尾的呢？要知道你匹配的是播放器，如果是视频，那也匹配到了。
@王叨叨 因为我用的全是虾米……MP3的话，不稳定，而且有版权神马的。而且，既然用的音乐样式，为什么要往里面放其他东西
加点音乐好，吸引人 我喜欢
吸引人 我喜欢