wordpress自定义“影视”文章形式

  • A+
所属分类:建博笔记
摘要

  在wordpress后台,编辑文章界面有一个“形式”模块,模块里有标准、日志、图像等几个不同的选项,选择不同的选项可以使文章使用不同的展现形式,默认为“标准”。简单来说,就是让不同类型的文章使用不同的模板,从而在前台页面的输出上呈现不同的显示效果。

在文章正式开始前有必要提醒一下的是:

  • 本文仅适用于begin主题,操作前注意备份相关的文件
  • 本文通过调用wordpress内置文章形式并修改的方式来实现自定义“影视”文章形式的需求

 

影视类文章在使用“影视”文章形式前后的效果对比:

使用前:点此查看

使用后:点此查看

 

文章目录

  1. wordpress内置文章形式简介
  2. 启用wordpress内置文章形式
  3. 添加缩略图自动裁剪设置选项
  4. 添加缩略图自动裁剪设置选项CSS样式
  5. 创建前台“影视”模板文件
  6. 添加前台“影视”模板文件CSS样式
  7. 创建后台“影视”设置面板
  8. 创建“海报预览”缩略图函数

 

一、wordpress内置文章形式简介

wordpress默认内置了以下同种文章形式:

  • standard – 标准:也就是默认的文章形式
  • aisde – 日志:实质上就是个不显示标题的标准文章
  • link – 链接:链接到其它网站的链接,类似于Tumblr上的链接分享
  • quote – 引语:展示为引用的一段文字,通常使用blockquote来包裹引用内容
  • status – 状态:类似于微博、Twitter之类的消息
  • image – 图像:发布单张图片
  • gallery – 相册:也就是扩充的图像功能
  • audio – 音频:音频
  • video – 视频:视频
  • chat – 聊天:以专门格式显示聊天记录

默认情况下,并不是所有的文章形式都处于开启状态。如果想使用某个文章形式,就得先启用这个文章形式。

 

二、启用wordpress内置文章形式

这里我启用的是wordpress内置的“status”(状态)文章形式。对于wordpress内置的其他文章形式,我并没有逐个去试过,并不清楚这些文章形式本身是一个什么样的布局和显示效果。理论上应该可以使用任意一个没有被启用过的文章形式吧。

首先,打开inc/function.php文件,在大约第154行的位置,找到代码块

  1. add_theme_support( 'post-formats', array(
  2. 'aside', 'image', 'video', 'quote', 'link'
  3. ) );

将其替换

  1. add_theme_support( 'post-formats', array(
  2. 'aside', 'image', 'video', 'quote', 'link', 'status'
  3. ) );

这一步的作用是:让主题支持wordpress内置的“status”(状态)文章形式。

然后,打开inc/inc.php文件,在大约第273行的位置,找到代码块

  1. // 形式名称
  2. function begin_post_format( $safe_text ) {
  3. if ( $safe_text == '引语' )
  4. return '软件';
  5. return $safe_text;
  6. }

在这段代码的下面增加代码块

  1. // 影视文章形式
  2. function rename_post_format( $safe_text ) {
  3. if ( $safe_text == '状态' )
  4. return '影视';
  5. return $safe_text;
  6. }

这一步的作用是:将“status”文章形式的名字“状态”重命名为“影视”。顺带一句,begin主题中的“软件”文章形式,其本质就是wordpress内置的“quote”(引语)文章形式,从上面的代码中就可以得到验证。

最后,打开inc/config.php文件,在大约第27行的位置,找到代码

  1. add_filter('esc_html','begin_post_format');

在其下面增加代码

  1. add_filter('esc_html','rename_post_format');

这一步的作用是:挂钩上面的函数,执行“开启”动作。

完成以上操作后,可以在后台--外观--主题选项--基本设置--缩略图自动裁剪设置选项中看到“影视缩略图”设置选项了。

wordpress自定义“影视”文章形式

如果你连这个面板都看不到的话,请在右上角的“显示选项”中勾选“形式”。

wordpress自定义“影视”文章形式

 

三、添加缩略图自动裁剪设置选项

添加缩略图自动裁剪设置选项是为了方便在后台可以更直观的修改缩略图尺寸,而不需要手动修改PHP文件。

打开inc/options/begin-options.php文件,找到大约第3237~3254行的代码块

  1. $options[] = array(
  2. 'desc' => '视频缩略图',
  3. 'id' => 'img_c',
  4. );
  5. $options[] = array(
  6. 'desc' => '宽 默认 280',
  7. 'id' => 'img_v_w',
  8. 'std' => '280',
  9. 'type' => 'text'
  10. );
  11. $options[] = array(
  12. 'desc' => '高 默认 210',
  13. 'id' => 'img_v_h',
  14. 'std' => '210',
  15. 'type' => 'text'
  16. );

在其下方增加代码块

  1. $options[] = array(
  2. 'desc' => '影视缩略图',
  3. 'id' => 'img_c',
  4. );
  5. $options[] = array(
  6. 'desc' => '宽 默认 250',
  7. 'id' => 'img_m_w',
  8. 'std' => '250',
  9. 'type' => 'text'
  10. );
  11. $options[] = array(
  12. 'desc' => '高 默认 350',
  13. 'id' => 'img_m_h',
  14. 'std' => '350',
  15. 'type' => 'text'
  16. );

加在此处的目的是为了让“影视缩略图”的设置选项位于“视频缩略图”的设置选项下面。各位童鞋可以根据自己的需要调整位置。但要注意添加的位置,原来的数组以每三个数组为一个单元,最好不要添加在某个单元里面,应该添加在某个单元的后面。

另外,我将“影视缩略图”的默认宽高分别设置为了250px和350px,各位童鞋可以根据自己的需要修改。

完成以上操作后,可以在后台外观—主题选项—基本设置—缩略图自动裁剪设置选项中看到“影视缩略图”设置选项了。

wordpress自定义“影视”文章形式

 

四、添加缩略图自动裁剪设置选项CSS样式

目的是为了让这个新增的“影视缩略图”缩略图自动裁剪设置选项与主题原有的其他缩略图自动裁剪设置选项的样式保持一致。

打开inc/options/css/options.css文件,在大约第359行的位置,找到代码

  1. #section-img_v_w, #section-img_v_h,

在其下面增加代码

  1. #section-img_m_w, #section-img_m_h,

然后, 在同文件大约第372行的位置,找到代码

  1. #section-img_v_w .controls, #section-img_v_h .controls,

在其下面增加代码

  1. #section-img_m_w .controls, #section-img_m_h .controls,

完成以上操作后,“影视缩略图”缩略图自动裁剪设置选项的样式就与主题原有的其他缩略图自动裁剪设置选项的样式保持一致。

wordpress自定义“影视”文章形式

 

五、创建前台“影视”模板文件

至此,后台已经创建好了“影视”文章形式,并在主题选项中添加了相关的缩略图尺寸设置选项。接下来我们要创建用于前台显示的“影视”模板文件。

首先,在template文件夹下新建一个名为content-status.php的文件。

注意:之所以重命名为content-status,是因为前面我们在第二步时,启用的是wordpress内置的“status”(状态)文章形式,所以这里必须使用content-status。如果你启用的是其他的文章形式,请将“status”修改为对应的名字。

然后,打开该文件,将下面的代码复制到新建的content-status.php文件中,并保存。

content-status.php展开

  1. <?php
  2. /*
  3. 影视形式
  4. */
  5. ?>
  6. <?php if ( is_single() ) : ?>
  7. <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  8. <?php else : ?>
  9. <article id="post-<?php the_ID(); ?>" <?php post_class('wow fadeInUp'); ?> data-wow-delay="0.3s">
  10. <?php endif; ?>
  11. <?php if ( ! is_single() ) : ?>
  12. <figure class="thumbnail">
  13. <?php if (zm_get_option('lazy_s')) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?>
  14. <span class="cat"><?php zm_category(); ?></span>
  15. </figure>
  16. <?php endif; ?>
  17. <header class="entry-header">
  18. <?php if ( is_single() ) : ?>
  19. <?php if ( get_post_meta($post->ID, 'header_img', true) ) { ?>
  20. <div class="entry-title-clear"></div>
  21. <?php } else { ?>
  22. <?php if ( get_post_meta($post->ID, 'mark', true) ) { ?>
  23. <?php the_title( sprintf( '<h1 class="entry-title">', esc_url( get_permalink() ) ), '</a><span class="t-mark">' . $mark = get_post_meta($post->ID, 'mark', true) . '</span></h1>' ); ?>
  24. <?php } else { ?>
  25. <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
  26. <?php } ?>
  27. <?php } ?>
  28. <?php else : ?>
  29. <?php if ( get_post_meta($post->ID, 'mark', true) ) { ?>
  30. <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a><span class="t-mark">' . $mark = get_post_meta($post->ID, 'mark', true) . '</span></h2>' ); ?>
  31. <?php } else { ?>
  32. <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  33. <?php } ?>
  34. <?php endif; ?>
  35. </header><!-- .entry-header -->
  36. <div class="entry-content">
  37. <?php if ( ! is_single() ) : ?>
  38. <div class="archive-content">
  39. <?php if (has_excerpt('')){
  40. echo wp_trim_words( get_the_excerpt(), zm_get_option('word_n'), '...' );
  41. } else {
  42. $content = get_the_content();
  43. $content = wp_strip_all_tags(str_replace(array('[',']'),array('<','>'),$content));
  44. echo wp_trim_words( $content, zm_get_option('words_n'), '...' );
  45. }
  46. ?>
  47. </div>
  48. <span class="title-l"></span>
  49. <span class="post-format"><i class="be be-display" aria-hidden="true"></i></span>
  50. <span class="entry-meta">
  51. <?php begin_entry_meta(); ?>
  52. </span>
  53. <?php else : ?>
  54. <div class="single-content">
  55. <?php get_template_part('ad/ads', 'single'); ?>
  56. <div class="movies-content">
  57. <div class="movies-img">
  58. <?php if (zm_get_option('lazy_s')) { movies_thumbnail_h(); } else { movies_thumbnail(); } ?>
  59. </div>
  60. <div class="movies-inf">
  61. <table>
  62. <tbody>
  63. <tr>
  64. <th><strong>编剧</strong></th>
  65. <td colspan="3" class="td_align"><?php $info_bianju = get_post_meta($post->ID, 'info_bianju', true); ?><?php echo $info_bianju; ?></td>
  66. </tr>
  67. <tr>
  68. <th><strong>导演</strong></th>
  69. <td colspan="3" class="td_align"><?php $info_daoyan = get_post_meta($post->ID, 'info_daoyan', true); ?><?php echo $info_daoyan; ?></td>
  70. </tr>
  71. <tr>
  72. <th><strong>主演</strong></th>
  73. <td colspan="3" class="td_align"><?php $info_zhuyan = get_post_meta($post->ID, 'info_zhuyan', true); ?><?php echo $info_zhuyan; ?></td>
  74. </tr>
  75. <tr>
  76. <th><strong>国家</strong></th>
  77. <td><?php $info_guojia = get_post_meta($post->ID, 'info_guojia', true); ?><?php echo $info_guojia; ?></td>
  78. <th><strong>语言</strong></th>
  79. <td><?php $info_yuyan = get_post_meta($post->ID, 'info_yuyan', true); ?><?php echo $info_yuyan; ?></td>
  80. </tr>
  81. <tr>
  82. <th><strong>类型</strong></th>
  83. <td><?php $info_leixing = get_post_meta($post->ID, 'info_leixing', true); ?><?php echo $info_leixing; ?></td>
  84. <th><strong>首播</strong></th>
  85. <td><?php $info_shoubo = get_post_meta($post->ID, 'info_shoubo', true); ?><?php echo $info_shoubo; ?></td>
  86. </tr>
  87. <th><strong>集数</strong></th>
  88. <td><?php $info_jishu = get_post_meta($post->ID, 'info_jishu', true); ?><?php echo $info_jishu; ?></td>
  89. <th><strong>片长</strong></th>
  90. <td><?php $info_pianchang = get_post_meta($post->ID, 'info_pianchang', true); ?><?php echo $info_pianchang; ?></td>
  91. </tr>
  92. <tr>
  93. <th><strong>又名</strong></th>
  94. <td colspan="3" class="td_align"><?php $info_youming = get_post_meta($post->ID, 'info_youming', true); ?><?php echo $info_youming; ?></td>
  95. </tr>
  96. </tbody>
  97. </table></ul>
  98. </div>
  99. <div class="clear"></div>
  100. </div>
  101. <?php if ( has_excerpt() ) { ?><span class="abstract"><fieldset><legend>摘 要</legend><?php the_excerpt() ?><div class="clear"></div></fieldset></span><?php }?>
  102. <?php the_content(); ?>
  103. </div>
  104. <?php get_template_part( 'inc/file' ); ?>
  105. <?php if ( get_post_meta($post->ID, 'no_sidebar', true) ) : ?><style>#primary {width: 100%;}#sidebar, .r-hide, .s-hide {display: none;}</style><?php endif; ?>
  106. <?php wp_link_pages(array('before' => '<div class="page-links">', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span><i class="be be-arrowleft"></i></span>', 'nextpagelink' => "")); ?>
  107. <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span>', 'link_after'=>'</span>')); ?>
  108. <?php wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => '<span><i class="be be-arrowright"></i></span> ')); ?>
  109. <?php if (zm_get_option('single_weixin')) { ?>
  110. <?php get_template_part( 'template/weixin' ); ?>
  111. <?php } ?>
  112. <?php if (zm_get_option('zm_like')) { ?>
  113. <?php get_template_part( 'template/social' ); ?>
  114. <?php } else { ?>
  115. <div id="social"></div>
  116. <?php } ?>
  117. <?php get_template_part('ad/ads', 'single-b'); ?>
  118. <footer class="single-footer">
  119. <?php begin_entry_meta(); ?>
  120. </footer><!-- .entry-footer -->
  121. <?php endif; ?>
  122. <div class="clear"></div>
  123. </div><!-- .entry-content -->
  124. <?php if ( ! is_single() ) : ?>
  125. <?php if ( get_post_meta($post->ID, 'direct', true) ) { ?>
  126. <?php $direct = get_post_meta($post->ID, 'direct', true); ?>
  127. <span class="entry-more"><a href="<?php echo $direct ?>" target="_blank" rel="nofollow"><?php echo zm_get_option('direct_w'); ?></a></span>
  128. <?php } else { ?>
  129. <span class="entry-more"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo zm_get_option('more_w'); ?></a></span>
  130. <?php } ?>
  131. <?php endif; ?>
  132. </article><!-- #post -->
  133. <?php if ( is_single() ) : ?><div class="single-tag"><?php the_tags( '<ul class="wow fadeInUp" data-wow-delay="0.3s"><li>', '</li><li>', '</li></ul>' ); ?></div><?php endif; ?>

为了更直观的解释这个文件的构成,我先把已经制作好的“影视”模板的前台展示效果发出来,请看下面这张图(点击图片可放大观看):

wordpress自定义“影视”文章形式

从图中可以看到,content-status.php文件的核心部分主要涉及到“影视缩略图”、“影视基本信息”和“摘要”三个部分。其中:

  • 影视缩略图

对应的代码在文件的第59~61行,具体如下:

  1. <div class="movies-img">
  2. <?php if (zm_get_option('lazy_s')) { movies_thumbnail_h(); } else { movies_thumbnail(); } ?>
  3. </div>

“影视缩略图”需要调用一个名为movies_thumbnail_h();movies_thumbnail();的函数。关于这两个函数后面会讲到。缩略图默认尺寸可以在主题选项中修改,这个在前面我们已经操作好了。

  • 影视基本信息

对应的代码在文件的第63~101行,具体如下:

  1. <div class="movies-inf">
  2. <table>
  3. <tbody>
  4. <tr>
  5. <th><strong>编剧</strong></th>
  6. <td colspan="3" class="td_align"><?php $info_bianju = get_post_meta($post->ID, 'info_bianju', true); ?><?php echo $info_bianju; ?></td>
  7. </tr>
  8. <tr>
  9. <th><strong>导演</strong></th>
  10. <td colspan="3" class="td_align"><?php $info_daoyan = get_post_meta($post->ID, 'info_daoyan', true); ?><?php echo $info_daoyan; ?></td>
  11. </tr>
  12. <tr>
  13. <th><strong>主演</strong></th>
  14. <td colspan="3" class="td_align"><?php $info_zhuyan = get_post_meta($post->ID, 'info_zhuyan', true); ?><?php echo $info_zhuyan; ?></td>
  15. </tr>
  16. <tr>
  17. <th><strong>国家</strong></th>
  18. <td><?php $info_guojia = get_post_meta($post->ID, 'info_guojia', true); ?><?php echo $info_guojia; ?></td>
  19. <th><strong>语言</strong></th>
  20. <td><?php $info_yuyan = get_post_meta($post->ID, 'info_yuyan', true); ?><?php echo $info_yuyan; ?></td>
  21. </tr>
  22. <tr>
  23. <th><strong>类型</strong></th>
  24. <td><?php $info_leixing = get_post_meta($post->ID, 'info_leixing', true); ?><?php echo $info_leixing; ?></td>
  25. <th><strong>首播</strong></th>
  26. <td><?php $info_shoubo = get_post_meta($post->ID, 'info_shoubo', true); ?><?php echo $info_shoubo; ?></td>
  27. </tr>
  28. <th><strong>集数</strong></th>
  29. <td><?php $info_jishu = get_post_meta($post->ID, 'info_jishu', true); ?><?php echo $info_jishu; ?></td>
  30. <th><strong>片长</strong></th>
  31. <td><?php $info_pianchang = get_post_meta($post->ID, 'info_pianchang', true); ?><?php echo $info_pianchang; ?></td>
  32. </tr>
  33. <tr>
  34. <th><strong>又名</strong></th>
  35. <td colspan="3" class="td_align"><?php $info_youming = get_post_meta($post->ID, 'info_youming', true); ?><?php echo $info_youming; ?></td>
  36. </tr>
  37. </tbody>
  38. </table></ul>
  39. </div>

这部分我是用<table></table>标签来实现的,主题原有的其他同类模板是用<span></span>标签来实现的。主要考虑到<table></table>标签配合CSS更容易实现我想要的效果,而且我认为这部分也更应该被理解为是一个“表格”,而<span></span>标签在写CSS时就相对比较难控制一些,毕竟我不太懂这些知识。

  • 摘要

对应的代码在文件的第104行,具体如下:

  1. <?php if ( has_excerpt() ) { ?><span class="abstract"><fieldset><legend>摘 要</legend><?php the_excerpt() ?><div class="clear"></div></fieldset></span><?php }?>

主题原有的其他模板默认是将“摘要”放置于文章正文部分的最前面,而我将“影视”模板中的“摘要”放在了“影视缩略图”和“影视基本信息”的下面。因为我希望浏览者最先看到的“影视缩略图”和“影视基本信息”,然后才是文字描述的“摘要”。如果你想让“影视”模板在格式上与其他模板更加统一,也可以调整这段代码到文件的第56行处。

“摘要”是主题原有的功能,如果你在后台编辑文章时不写摘要的话,前台页面就不会输出这块内容。

 

六、添加前台“影视”模板文件CSS样式

打开style.css文件,在大约第3089行的位置,找到代码块

  1. /** 视频日志 **/
  2. .format-videos {
  3. width: 100%;
  4. margin: 0 0 20px 0;
  5. }

在其前面增加代码块

  1. /** 影视模板 **/
  2. .movies-content {
  3. width: 100%;
  4. margin: 0 0 10px 0;
  5. display: flex;
  6. }
  7. .movies-img {
  8. position: relative;
  9. float: left;
  10. width: 250px;
  11. height: 350px;
  12. overflow: hidden;
  13. border: 1px solid #ddd;
  14. border-radius: 2px;
  15. }
  16. .movies-img img {
  17. width: 250px;
  18. height: 350px;
  19. }
  20. .movies-inf {
  21. font-size: 15px;
  22. line-height: 30px;
  23. float: left;
  24. width: 67%;
  25. margin: 1px 0 0 12px;
  26. flex-grow: 1;
  27. }
  28. table {
  29. border-collapse:collapse;
  30. }
  31. table, th, td {
  32. border: 1px solid #ddd;
  33. }
  34. th, td {
  35. padding: 5px;
  36. text-align: center;
  37. vertical-align: middle;
  38. }
  39. th {
  40. width: 12%;
  41. }
  42. td {
  43. width: 38%;
  44. }
  45. .td_align {
  46. text-align: left !important;
  47. }
  48. @media screen and (max-width: 720px) {
  49. .movies-content {
  50. display: inline;
  51. }
  52. .movies-img {
  53. float: inherit;
  54. margin: 0 auto 13px;
  55. }
  56. .movies-inf {
  57. width: 100%;
  58. max-width: 100%;
  59. margin: 0 auto 13px;
  60. }
  61. }

关于这部分的样式,我是用弹性布局实现的,测试了一下PC端和移动端的效果,感觉在不同屏幕尺寸下的过渡效果相比主题原有的“软件”形式布局的效果要好一些(我自己是这么觉得的)。只是由于我对代码不是很懂,所以写的就比较简单,粗糙,各位童鞋可以根据自己的实际需求进一步美化。

CSS的实现效果可以参考上面那张图片,也可以点击文章开始处的两个链接查看。

 

七、创建后台“影视”设置面板

前台的基本框架创建好了以后,接下来就给框架中的内容创建对应的设置面板。

打开inc/meta-boxs.php文件,在最后一个}增加代码块

  1. // 影视资源基本信息
  2. $movies_post_meta_boxes =
  3. array(
  4. "movies_thumbnail" => array(
  5. "name" => "movies_thumbnail",
  6. "std" => "",
  7. "title" => "海报预览:调用指定缩略图,图片尺寸要求与主题选项中缩略图大小相同",
  8. "type"=>"text"),
  9. "info_bianju" => array(
  10. "name" => "info_bianju",
  11. "std" => "",
  12. "title" => "基本信息:编剧",
  13. "type"=>"text"),
  14. "info_daoyan" => array(
  15. "name" => "info_daoyan",
  16. "std" => "",
  17. "title" => "基本信息:导演",
  18. "type"=>"text"),
  19. "info_zhuyan" => array(
  20. "name" => "info_zhuyan",
  21. "std" => "",
  22. "title" => "基本信息:主演",
  23. "type"=>"textarea"),
  24. "info_guojia" => array(
  25. "name" => "info_guojia",
  26. "std" => "",
  27. "title" => "基本信息:国家",
  28. "type"=>"text"),
  29. "info_yuyan" => array(
  30. "name" => "info_yuyan",
  31. "std" => "",
  32. "title" => "基本信息:语言",
  33. "type"=>"text"),
  34. "info_leixing" => array(
  35. "name" => "info_leixing",
  36. "std" => "",
  37. "title" => "基本信息:类型",
  38. "type"=>"text"),
  39. "info_shoubo" => array(
  40. "name" => "info_shoubo",
  41. "std" => "",
  42. "title" => "基本信息:首播",
  43. "type"=>"text"),
  44. "info_jishu" => array(
  45. "name" => "info_jishu",
  46. "std" => "",
  47. "title" => "基本信息:集数",
  48. "type"=>"text"),
  49. "info_pianchang" => array(
  50. "name" => "info_pianchang",
  51. "std" => "",
  52. "title" => "基本信息:片长",
  53. "type"=>"text"),
  54. "info_youming" => array(
  55. "name" => "info_youming",
  56. "std" => "",
  57. "title" => "基本信息:又名",
  58. "type"=>"text"),
  59. );
  60. // 面板内容
  61. function movies_post_meta_boxes() {
  62. global $post, $movies_post_meta_boxes;
  63. //获取保存
  64. foreach ($movies_post_meta_boxes as $meta_box) {
  65. $meta_box_value = get_post_meta($post->ID, $meta_box['name'] . '', true);
  66. if ($meta_box_value != "")
  67. //将默认值替换为已保存的值
  68. $meta_box['std'] = $meta_box_value;
  69. echo '<input type="hidden" name="' . $meta_box['name'] . '_noncename" id="' . $meta_box['name'] . '_noncename" value="' . wp_create_nonce(plugin_basename(__FILE__)) . '" />';
  70. //选择类型输出不同的html代码
  71. switch ($meta_box['type']) {
  72. case 'title':
  73. echo '<h4>' . $meta_box['title'] . '</h4>';
  74. break;
  75. case 'text':
  76. echo '<h4>' . $meta_box['title'] . '</h4>';
  77. echo '<span class="form-field"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /></span><br />';
  78. break;
  79. case 'textarea':
  80. echo '<h4>' . $meta_box['title'] . '</h4>';
  81. echo '<textarea id="seo-excerpt" cols="40" rows="2" name="' . $meta_box['name'] . '">' . $meta_box['std'] . '</textarea><br />';
  82. break;
  83. }
  84. }
  85. }
  86. function movies_post_meta_box() {
  87. global $theme_name;
  88. if (function_exists('add_meta_box')) {
  89. add_meta_box('movies_post_meta_box', '影视资源基本信息', 'movies_post_meta_boxes', 'post', 'normal', 'high');
  90. }
  91. }
  92. function save_movies_postdata($post_id) {
  93. global $post, $movies_post_meta_boxes;
  94. foreach ($movies_post_meta_boxes as $meta_box) {
  95. if (!wp_verify_nonce($_POST[$meta_box['name'] . '_noncename'], plugin_basename(__FILE__))) {
  96. return $post_id;
  97. }
  98. if ('page' == $_POST['post_type']) {
  99. if (!current_user_can('edit_page', $post_id)) return $post_id;
  100. } else {
  101. if (!current_user_can('edit_post', $post_id)) return $post_id;
  102. }
  103. $data = $_POST[$meta_box['name'] . ''];
  104. if (get_post_meta($post_id, $meta_box['name'] . '') == "") add_post_meta($post_id, $meta_box['name'] . '', $data, true);
  105. elseif ($data != get_post_meta($post_id, $meta_box['name'] . '', true)) update_post_meta($post_id, $meta_box['name'] . '', $data);
  106. elseif ($data == "") delete_post_meta($post_id, $meta_box['name'] . '', get_post_meta($post_id, $meta_box['name'] . '', true));
  107. }
  108. }
  109. add_action('admin_menu', 'movies_post_meta_box');
  110. add_action('save_post', 'save_movies_postdata');

添加好了以后,就可以在后台的“编辑文章”中看到这个设置面板了。 同样的,如果你没看到这个设置面板,可能是右上角的“显示选项”中没有勾选对应的模块。

wordpress自定义“影视”文章形式

 

八、创建“海报预览”缩略图函数

“海报预览”缩略图也就是前面文章中提到的前台页面中的“影视缩略图”。

打开inc/thumbnail.php文件,在大约第235行的位置,找到代码块

  1. // 商品缩略图
  2. function tao_thumbnail() {
  3. ...

在其前面添加代码块

  1. //影视缩略图
  2. function movies_thumbnail() {
  3. global $post;
  4. if ( get_post_meta($post->ID, 'movies_thumbnail', true) ) {
  5. $image = get_post_meta($post->ID, 'movies_thumbnail', true);
  6. echo '<a href="'.get_permalink().'"><img src=';
  7. echo $image;
  8. echo ' alt="'.$post->post_title .'" /></a>';
  9. } else {
  10. $content = $post->post_content;
  11. preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
  12. $n = count($strResult[1]);
  13. if($n > 0){
  14. echo '<a href="'.get_permalink().'"><img src="'.get_template_directory_uri().'/timthumb.php?src='.$strResult[1][0].'&w='.zm_get_option('img_m_w').'&h='.zm_get_option('img_m_h').'&a='.zm_get_option('crop_top').'&zc=1" alt="'.$post->post_title .'" /></a>';
  15. } else {
  16. echo '<a class="random-img" href="'.get_permalink().'"><img src="'.get_template_directory_uri().'/img/random/long.jpg" alt="'.$post->post_title .'" /></a>';
  17. }
  18. }
  19. }
  20. function movies_thumbnail_h() {
  21. global $post;
  22. if ( get_post_meta($post->ID, 'movies_thumbnail', true) ) {
  23. $image = get_post_meta($post->ID, 'movies_thumbnail', true);
  24. echo '<span class="load"><a href="'.get_permalink().'"><img src="' . get_template_directory_uri() . '/img/long.png" data-original=';
  25. echo $image;
  26. echo ' alt="'.$post->post_title .'" /></a></span>';
  27. } else {
  28. $content = $post->post_content;
  29. preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
  30. $n = count($strResult[1]);
  31. if($n > 0){
  32. echo '<span class="load"><a href="'.get_permalink().'"><img src="' . get_template_directory_uri() . '/img/long.png" data-original="'.get_template_directory_uri().'/timthumb.php?src='.$strResult[1][0].'&w='.zm_get_option('img_m_w').'&h='.zm_get_option('img_m_h').'&a='.zm_get_option('crop_top').'&zc=1" alt="'.$post->post_title .'" /></a></span>';
  33. } else {
  34. echo '<span class="load"><a class="random-img" href="'.get_permalink().'"><img src="' . get_template_directory_uri() . '/img/long.png" data-original="'.get_template_directory_uri().'/img/random/long.jpg" alt="'.$post->post_title .'" /></a></span>';
  35. }
  36. }
  37. }

这两个函数的实现过程和主题原有的其他同类缩略图函数的实现过程类似,就是先判断设置面板中的“海报预览”项中是否添加了缩略图地址,如果有则调用这张缩略图,如果没有再判断文章正文部分是否存在图片,如果有则调用正文中的第一张图片作为“海报预览”的缩略图,如果没有则调用主题的随机缩略图。

注意:在文章分类、侧边栏、最新文章、相关文章等具有缩略图显示功能的模块中,这些地方的缩略图首先调用的是文章正文部分的第一张图片,如果正文中没有图片则调用主题的随机缩略图,并不会调用“海报预览”的图片,即便你设置了“海报预览”缩略图。

 

至此,wordpress自定义“影视”文章形式的整个过程算是完整结束了。整个过程,大的方面应该没有什么问题,细节部分根据个人的喜好调整就好了,现在有一个比较棘手的问题需要解决:当在后台向“标签”面板添加文章关键词后,前台页面的“影视基本信息”中的关键词无法自动添加链接,而正文部分的关键词则仍可以正常自动添加链接。

举个栗子:我在后台添加了“宫崎骏”这个词作为文章的关键词,在“主演”和正文里都有“宫崎骏”这个词,但在前台显示中“主演”里的“宫崎骏”不会自动添加链接,而通过后台文章编辑器输入的“宫崎骏”则可以正常自动添加链接。

我现在临时的解决办法是在后台编辑文章时将需要添加的关键词以适当的形式添加到文章的正文里。如果哪位童鞋刚好看到这篇文章,希望可以针对这一问题指点一二,帮忙解决一下,真的万分感谢!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: