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

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

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

  • 操作前注意备份相关的文件
  • 本文通过启用 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(状态)文章形式为例,你也可以使用其他文章形式。

首先:打开【inc/function.php】文件,找到代码

add_theme_support( 'post-formats', array(
	'aside', 'image', 'video', 'quote', 'link'
) );

将其替换为

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

然后:打开【inc/inc.php】文件,找到代码

// 形式名称
function begin_post_format( $safe_text ) {
	if ( $safe_text == '引语' )
		return '软件';
	return $safe_text;
}

在其下面添加

// 影视文章形式
function rename_post_format( $safe_text ) {
	if ( $safe_text == '状态' )
		return '影视';
	return $safe_text;
}

目的:将 status 文章形式的名字【状态】重命名为【影视】。

最后:打开【inc/config.php】文件,找到代码

add_filter('esc_html','begin_post_format');

在其下面添加

add_filter('esc_html','rename_post_format');

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

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

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

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

 

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

目的:方便在后台可以更加直观的修改缩略图尺寸,而不需要手动修改文件。

打开【inc/options/begin-options.php】文件,找到代码

$options[] = array(
	'desc' => '视频缩略图',
	'id' => 'img_c',
);
$options[] = array(
	'desc' => '宽 默认 280',
	'id' => 'img_v_w',
	'std' => '280',
	'type' => 'text'
);
$options[] = array(
	'desc' => '高 默认 210',
	'id' => 'img_v_h',
	'std' => '210',
	'type' => 'text'
);

在其下面添加

$options[] = array(
	'desc' => '影视缩略图',
	'id' => 'img_c',
);
$options[] = array(
	'desc' => '宽 默认 250',
	'id' => 'img_m_w',
	'std' => '250',
	'type' => 'text'
);
$options[] = array(
	'desc' => '高 默认 350',
	'id' => 'img_m_h',
	'std' => '350',
	'type' => 'text'
);

Tips:【影视缩略图】的默认宽高分别是 250px 和 350px,可根据自己的需要修改。

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

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

 

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

目的:让新增的【影视缩略图】缩略图自动裁剪设置选项与主题原有的其他缩略图自动裁剪设置选项的样式保持一致。

首先:打开【inc/options/css/options.css】文件,找到代码

#section-img_v_w, #section-img_v_h,

在其下面添加

#section-img_m_w, #section-img_m_h,

然后:在同文件中找到代码

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

在其下面添加

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

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

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

 

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

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

如果你启用的 wordpress 内置文章形式不是 status 的话,请将 status 修改为对应的名字。

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

content-status.php展开

<!-- 影视形式 -->
<?php if ( is_single() ) : ?>
	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php else : ?>
	<article id="post-<?php the_ID(); ?>" <?php post_class('wow fadeInUp'); ?> data-wow-delay="0.3s">
<?php endif; ?>

<?php if ( ! is_single() ) : ?>
	<figure class="thumbnail">
		<?php if (zm_get_option('lazy_s')) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?>
		<span class="cat"><?php zm_category(); ?></span>
	</figure>
<?php endif; ?>

<header class="entry-header">
	<?php if ( is_single() ) : ?>
		<?php if ( get_post_meta($post->ID, 'header_img', true) ) { ?>
			<div class="entry-title-clear"></div>
		<?php } else { ?>
			<?php if ( get_post_meta($post->ID, 'mark', true) ) { ?>
				<?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>' ); ?>
			<?php } else { ?>
				<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
			<?php } ?>
		<?php } ?>
	<?php else : ?>
		<?php if ( get_post_meta($post->ID, 'mark', true) ) { ?>
			<?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>' ); ?>
		<?php } else { ?>
			<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
		<?php } ?>
	<?php endif; ?>
</header><!-- .entry-header -->

<div class="entry-content">
<?php if ( ! is_single() ) : ?>
	<div class="archive-content">
		<?php if (has_excerpt('')){
			echo wp_trim_words( get_the_excerpt(), zm_get_option('word_n'), '...' );
		} else {
			$content = get_the_content();
			$content = wp_strip_all_tags(str_replace(array('[',']'),array('<','>'),$content));
			echo wp_trim_words( $content, zm_get_option('words_n'), '...' );
		}?>
	</div>
	<span class="title-l"></span>
	<span class="post-format"><i class="be be-display" aria-hidden="true"></i></span>
	<span class="entry-meta"><?php begin_entry_meta(); ?></span>
<?php else : ?>
	<div class="single-content">
		<?php get_template_part('ad/ads', 'single'); ?>
		<div class="movies-content">
			<div class="movies-img">
				<?php if (zm_get_option('lazy_s')) { movies_thumbnail_h(); } else { movies_thumbnail(); } ?>
			</div>
			<div class="movies-inf">
				<table>
					<tbody>
					<tr>
						<th><strong>编剧</strong></th>
						<td colspan="3" class="td_align"><?php $info_bianju = get_post_meta($post->ID, 'info_bianju', true); ?><?php echo $info_bianju; ?></td>
					</tr>
					<tr>
						<th><strong>导演</strong></th>
						<td colspan="3" class="td_align"><?php $info_daoyan = get_post_meta($post->ID, 'info_daoyan', true); ?><?php echo $info_daoyan; ?></td>
					</tr>
					<tr>
						<th><strong>主演</strong></th>
						<td colspan="3" class="td_align"><?php $info_zhuyan = get_post_meta($post->ID, 'info_zhuyan', true); ?><?php echo $info_zhuyan; ?></td>
					</tr>
					<tr>
						<th><strong>国家</strong></th>
						<td><?php $info_guojia = get_post_meta($post->ID, 'info_guojia', true); ?><?php echo $info_guojia; ?></td>
						<th><strong>语言</strong></th>
						<td><?php $info_yuyan = get_post_meta($post->ID, 'info_yuyan', true); ?><?php echo $info_yuyan; ?></td>
					</tr>
					<tr>
						<th><strong>类型</strong></th>
						<td><?php $info_leixing = get_post_meta($post->ID, 'info_leixing', true); ?><?php echo $info_leixing; ?></td>
						<th><strong>首播</strong></th>
						<td><?php $info_shoubo = get_post_meta($post->ID, 'info_shoubo', true); ?><?php echo $info_shoubo; ?></td>
					</tr>
					<tr>
						<th><strong>集数</strong></th>
						<td><?php $info_jishu = get_post_meta($post->ID, 'info_jishu', true); ?><?php echo $info_jishu; ?></td>
						<th><strong>片长</strong></th>
						<td><?php $info_pianchang = get_post_meta($post->ID, 'info_pianchang', true); ?><?php echo $info_pianchang; ?></td>
					</tr>
					<tr>
						<th><strong>又名</strong></th>
						<td colspan="3" class="td_align"><?php $info_youming = get_post_meta($post->ID, 'info_youming', true); ?><?php echo $info_youming; ?></td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="clear"></div>
		</div>
		<?php if ( has_excerpt() ) { ?><span class="abstract"><fieldset><legend>摘 要</legend><?php the_excerpt() ?><div class="clear"></div></fieldset></span><?php }?>
		<?php the_content(); ?>
	</div>

	<?php get_template_part( 'inc/file' ); ?>
	<?php if ( get_post_meta($post->ID, 'no_sidebar', true) ) : ?>
		<style>#primary {width: 100%;}#sidebar, .r-hide, .s-hide {display: none;}</style>
	<?php endif; ?>
	<?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' => "")); ?>
	<?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span>', 'link_after'=>'</span>')); ?>
	<?php wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => '<span><i class="be be-arrowright"></i></span> ')); ?>
	<?php if (zm_get_option('single_weixin')) { ?>
		<?php get_template_part( 'template/weixin' ); ?>
	<?php } ?>
	<?php if (zm_get_option('zm_like')) { ?>
		<?php get_template_part( 'template/social' ); ?>
	<?php } else { ?>
		<div id="social"></div>
	<?php } ?>
	<?php get_template_part('ad/ads', 'single-b'); ?>
		<footer class="single-footer">
			<?php begin_entry_meta(); ?>
		</footer><!-- .entry-footer -->
	<?php endif; ?>
	<div class="clear"></div>
</div><!-- .entry-content -->

<?php if ( ! is_single() ) : ?>
	<?php if ( get_post_meta($post->ID, 'direct', true) ) { ?>
		<?php $direct = get_post_meta($post->ID, 'direct', true); ?>
		<span class="entry-more"><a href="<?php echo $direct ?>" target="_blank" rel="nofollow"><?php echo zm_get_option('direct_w'); ?></a></span>
	<?php } else { ?>
		<span class="entry-more"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo zm_get_option('more_w'); ?></a></span>
	<?php } ?>
<?php endif; ?>
</article><!-- #post -->

<?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】文件的核心部分主要涉及到【影视缩略图】、【影视基本信息】和【摘要】三个部分。其中:

  • 影视缩略图
<div class="movies-img">
	<?php if (zm_get_option('lazy_s')) { movies_thumbnail_h(); } else { movies_thumbnail(); } ?>
</div>

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

  • 影视基本信息
<div class="movies-inf">
	<table>
		<tbody>
		<tr>
			<th><strong>编剧</strong></th>
			<td colspan="3" class="td_align"><?php $info_bianju = get_post_meta($post->ID, 'info_bianju', true); ?><?php echo $info_bianju; ?></td>
		</tr>
		<tr>
			<th><strong>导演</strong></th>
			<td colspan="3" class="td_align"><?php $info_daoyan = get_post_meta($post->ID, 'info_daoyan', true); ?><?php echo $info_daoyan; ?></td>
		</tr>
		<tr>
			<th><strong>主演</strong></th>
			<td colspan="3" class="td_align"><?php $info_zhuyan = get_post_meta($post->ID, 'info_zhuyan', true); ?><?php echo $info_zhuyan; ?></td>
		</tr>
		<tr>
			<th><strong>国家</strong></th>
			<td><?php $info_guojia = get_post_meta($post->ID, 'info_guojia', true); ?><?php echo $info_guojia; ?></td>
			<th><strong>语言</strong></th>
			<td><?php $info_yuyan = get_post_meta($post->ID, 'info_yuyan', true); ?><?php echo $info_yuyan; ?></td>
		</tr>
		<tr>
			<th><strong>类型</strong></th>
			<td><?php $info_leixing = get_post_meta($post->ID, 'info_leixing', true); ?><?php echo $info_leixing; ?></td>
			<th><strong>首播</strong></th>
			<td><?php $info_shoubo = get_post_meta($post->ID, 'info_shoubo', true); ?><?php echo $info_shoubo; ?></td>
		</tr>
		<tr>
			<th><strong>集数</strong></th>
			<td><?php $info_jishu = get_post_meta($post->ID, 'info_jishu', true); ?><?php echo $info_jishu; ?></td>
			<th><strong>片长</strong></th>
			<td><?php $info_pianchang = get_post_meta($post->ID, 'info_pianchang', true); ?><?php echo $info_pianchang; ?></td>
		</tr>
		<tr>
			<th><strong>又名</strong></th>
			<td colspan="3" class="td_align"><?php $info_youming = get_post_meta($post->ID, 'info_youming', true); ?><?php echo $info_youming; ?></td>
		</tr>
		</tbody>
	</table>
</div>

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

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

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

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

 

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

打开【style.css】文件,找到代码

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

在其前面添加

/** 影视模板 **/
.movies-content {
	width: 100%;
	margin: 0 0 10px 0;
	display: flex;
}

.movies-img {
	position: relative;
	float: left;
	width: 250px;
	height: 350px;
	overflow: hidden;
	border: 1px solid #ddd;
	border-radius: 2px;
}

.movies-img img {
	width: 250px;
	height: 350px;
}

.movies-inf {
	font-size: 15px;
	line-height: 30px;
	float: left;
	width: 67%;
	margin: 1px 0 0 12px;
	flex-grow: 1;
}

table {
	border-collapse:collapse;
}

table, th, td {
	border: 1px solid #ddd;
}

th, td {
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}

th {
	width: 12%;
}

td {
	width: 38%;
}

.td_align {
	text-align: left !important;
}

@media screen and (max-width: 720px) {
	.movies-content {
		display: inline;
	}

	.movies-img {
		float: inherit;
		margin: 0 auto 13px;
	}

	.movies-inf {
		width: 100%;
		max-width: 100%;
		margin: 0 auto 13px;
	}
}

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

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

 

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

打开【inc/meta-boxs.php】文件,在最后一个}前添加代码

// 影视资源基本信息
$movies_post_meta_boxes = array(
	"movies_thumbnail" => array(
		"name" => "movies_thumbnail",
		"std" => "",
		"title" => "海报预览:调用指定缩略图,图片尺寸要求与主题选项中缩略图大小相同",
		"type"=>"text"),

	"info_bianju" => array(
		"name" => "info_bianju",
		"std" => "",
		"title" => "基本信息:编剧",
		"type"=>"text"),

	"info_daoyan" => array(
		"name" => "info_daoyan",
		"std" => "",
		"title" => "基本信息:导演",
		"type"=>"text"),

	"info_zhuyan" => array(
		"name" => "info_zhuyan",
		"std" => "",
		"title" => "基本信息:主演",
		"type"=>"textarea"),

	"info_guojia" => array(
		"name" => "info_guojia",
		"std" => "",
		"title" => "基本信息:国家",
		"type"=>"text"),

	"info_yuyan" => array(
		"name" => "info_yuyan",
		"std" => "",
		"title" => "基本信息:语言",
		"type"=>"text"),

	"info_leixing" => array(
		"name" => "info_leixing",
		"std" => "",
		"title" => "基本信息:类型",
		"type"=>"text"),

	"info_shoubo" => array(
		"name" => "info_shoubo",
		"std" => "",
		"title" => "基本信息:首播",
		"type"=>"text"),

	"info_jishu" => array(
		"name" => "info_jishu",
		"std" => "",
		"title" => "基本信息:集数",
		"type"=>"text"),

	"info_pianchang" => array(
		"name" => "info_pianchang",
		"std" => "",
		"title" => "基本信息:片长",
		"type"=>"text"),

	"info_youming" => array(
		"name" => "info_youming",
		"std" => "",
		"title" => "基本信息:又名",
		"type"=>"text"),
);

// 面板内容
function movies_post_meta_boxes() {
	global $post, $movies_post_meta_boxes;
	//获取保存
	foreach ($movies_post_meta_boxes as $meta_box) {
		$meta_box_value = get_post_meta($post->ID, $meta_box['name'] . '', true);
		if ($meta_box_value != "")
			//将默认值替换为已保存的值
			$meta_box['std'] = $meta_box_value;
			echo '<input type="hidden" name="' . $meta_box['name'] . '_noncename" id="' . $meta_box['name'] . '_noncename" value="' . wp_create_nonce(plugin_basename(__FILE__)) . '" />';
		//选择类型输出不同的 html 代码
		switch ($meta_box['type']) {
			case 'title':
			echo '<h4>' . $meta_box['title'] . '</h4>';
			break;
			case 'text':
			echo '<h4>' . $meta_box['title'] . '</h4>';
			echo '<span class="form-field"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /></span><br />';
			break;
			case 'textarea':
			echo '<h4>' . $meta_box['title'] . '</h4>';
			echo '<textarea id="seo-excerpt" cols="40" rows="2" name="' . $meta_box['name'] . '">' . $meta_box['std'] . '</textarea><br />';
			break;
		}
	}
}

function movies_post_meta_box() {
	global $theme_name;
	if (function_exists('add_meta_box')) {
		add_meta_box('movies_post_meta_box', '影视资源基本信息', 'movies_post_meta_boxes', 'post', 'normal', 'high');
	}
}

function save_movies_postdata($post_id) {
	global $post, $movies_post_meta_boxes;
	foreach ($movies_post_meta_boxes as $meta_box) {
		if (!wp_verify_nonce($_POST[$meta_box['name'] . '_noncename'], plugin_basename(__FILE__))) {
			return $post_id;
		}
		if ('page' == $_POST['post_type']) {
			if (!current_user_can('edit_page', $post_id)) return $post_id;
		} else {
			if (!current_user_can('edit_post', $post_id)) return $post_id;
		}
		$data = $_POST[$meta_box['name'] . ''];
		if (get_post_meta($post_id, $meta_box['name'] . '') == "") add_post_meta($post_id, $meta_box['name'] . '', $data, true);
		elseif ($data != get_post_meta($post_id, $meta_box['name'] . '', true)) update_post_meta($post_id, $meta_box['name'] . '', $data);
		elseif ($data == "") delete_post_meta($post_id, $meta_box['name'] . '', get_post_meta($post_id, $meta_box['name'] . '', true));
	}
}
add_action('admin_menu', 'movies_post_meta_box');
add_action('save_post', 'save_movies_postdata');

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

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

 

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

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

打开【inc/thumbnail.php】文件,找到代码块

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

在其前面添加

//影视缩略图
function movies_thumbnail() {
	global $post;
	if ( get_post_meta($post->ID, 'movies_thumbnail', true) ) {
		$image = get_post_meta($post->ID, 'movies_thumbnail', true);
		echo '<a href="'.get_permalink().'"><img src=';
		echo $image;
		echo ' alt="'.$post->post_title .'" /></a>';
	} else {
		$content = $post->post_content;
		preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
		$n = count($strResult[1]);
		if($n > 0){
			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>';
		} else {
			echo '<a class="random-img" href="'.get_permalink().'"><img src="'.get_template_directory_uri().'/img/random/long.jpg" alt="'.$post->post_title .'" /></a>';
		}
	}
}

function movies_thumbnail_h() {
	global $post;
	if ( get_post_meta($post->ID, 'movies_thumbnail', true) ) {
		$image = get_post_meta($post->ID, 'movies_thumbnail', true);
		echo '<span class="load"><a href="'.get_permalink().'"><img src="' . get_template_directory_uri() . '/img/long.png" data-original=';
		echo $image;
		echo ' alt="'.$post->post_title .'" /></a></span>';
	} else {
		$content = $post->post_content;
		preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
		$n = count($strResult[1]);
		if($n > 0){
			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>';
		} else {
			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>';
		}
	}
}

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

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

 

至此,wordpress 自定义“影视”文章形式的整个过程算是完整结束了。整个过程,大的方面应该没有什么问题,细节部分根据个人的喜好调整就好了。

若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!

发表评论

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