记一次主题模块调用文章时缩略图尺寸不一致的改进

一、前言

由于博客当前暂未开放商品分类、链接分类、网址分类、产品分类、下载分类，故本次的改进仅基于已开放的布局、分类和页面。对于暂未开放的这些布局、分类和页面，也可能存在类似的问题，有需要改进的童鞋也可以参照此文自行修改。

目前，暂时发现并已调整的主要有以下两个地方：

1. 杂志布局和杂志页面中的图片滚动模块（以下简称：图片滚动模块）
2. 分类图片布局和分类图片页面中的最近更新模块（以下简称：最近更新模块）

 

二、改进原因

由于主题可以分别针对不同的布局和文章形式设定不同的缩略图尺寸，而不同的文章又可以使用不同的文章形式。因而当某个模块调用多个分类下的文章时，就存在这个模块中的缩略图尺寸不一致的情况。

这种情况直接影响到博客整体的布局效果和显示效果，非常难看。具体请看下面两张图片：

 

 

三、图片滚动模块改进方法

首先：打开【inc/options/begin-options.php】文件，找到代码

	$options[] = array(
		'name' => '图片滚动模块',
		'desc' => '显示',
		'id' => 'flexisel',
		'class' => 'be_ico',
		'std' => '0',
		'type' => 'checkbox'
	);

	$options[] = array(
		'name' => '',
		'desc' => '排序：14',
		'id' => 'flexisel_s',
		'std' => '14',
		'class' => 'mini hidden',
		'type' => 'text'
	);

	$options[] = array(
		'name' => '自定义栏目名称',
		'desc' => '通过为文章添加自定义栏目，调用指定文章',
		'id' => 'key_n',
		'std' => 'views',
		'class' => 'hidden',
		'type' => 'text'
	);

在其下面添加

	$options[] = array(
		'name' => '',
		'desc' => '输入排除的分类ID，多个分类用英文半角逗号","隔开',
		'id' => 'not_flexisel_cat',
		'std' => '',
		'class' => 'hidden',
		'type' => 'text'
	);

	$options[] = array(
		'name' => '分类ID对照',
		'desc' => '<ul>'.$cats_id.'</ul>',
		'id' => 'catids',
		'class' => 'not-flexisel-catid hidden',
		'type' => 'info'
	);

添加后，就可以在【主题选项--杂志布局--图片滚动模块】中看到多了一个排除分类的设置项和一个分类ID列表。

然后：打开【inc/options/includes/themes-options.php】文件，找到代码

	jQuery('#flexisel').click(function() {
		jQuery('#section-key_n, #section-gallery_post, #section-gallery_id, #section-flexisel_n, .tpv-catid, #section-flexisel_s').fadeToggle(400);
	});

	if (jQuery('#flexisel:checked').val() !== undefined) {
		jQuery('#section-key_n, #section-gallery_post, #section-gallery_id, #section-flexisel_n, .tpv-catid, #section-flexisel_s').show();
	}

将其修改成

	jQuery('#flexisel').click(function() {
		jQuery('#section-key_n, #section-not_flexisel_cat, .not-flexisel-catid, #section-gallery_post, #section-gallery_id, #section-flexisel_n, .tpv-catid, #section-flexisel_s').fadeToggle(400);
	});

	if (jQuery('#flexisel:checked').val() !== undefined) {
		jQuery('#section-key_n, #section-not_flexisel_cat, .not-flexisel-catid, #section-gallery_post, #section-gallery_id, #section-flexisel_n, .tpv-catid, #section-flexisel_s').show();
	}

目的：增加对新增的这两个设置项做一个展开/闭合的功能。

接着：打开【cms/cms-scrolling.php】文件，找到代码

$loop = new WP_Query( array( 'meta_key' => zm_get_option('key_n'), 'posts_per_page' => zm_get_option('flexisel_n'), 'post__not_in' => get_option( 'sticky_posts') ) );

将其修改成

$loop = new WP_Query( array( 'meta_key' => zm_get_option('key_n'), 'posts_per_page' => zm_get_option('flexisel_n'), 'post__not_in' => get_option( 'sticky_posts'),'category__not_in' => explode(',',zm_get_option('not_flexisel_cat')) ) );

最后：在【主题选项--杂志布局--图片滚动模块--输入要排除的分类ID】中输入要排除的分类ID并保存即可。

改进后的效果：

 

四、最近更新模块改进方法

最近更新模块的改进方法与图片滚动模块的改进方法类似，采用的也是排除文章分类ID的方法，具体如下：

首先：打开【inc/options/begin-options.php】文件，找到代码

	$options[] = array(
		'name' => '分类图片',
		'type' => 'heading'
	);

	$options[] = array(
		'name' => '首页分类图片布局最新文章',
		'desc' => '显示',
		'id' => 'grid_cat_new',
		'class' => 'be_ico',
		'std' => '1',
		'type' => 'checkbox'
	);

	$options[] = array(
		'name' => '',
		'desc' => '显示篇数',
		'id' => 'grid_cat_news_n',
		'std' => '4',
		'class' => 'mini hidden',
		'type' => 'text'
	);

在其下面添加

	$options[] = array(
		'name' => '',
		'desc' => '输入排除的分类ID，多个分类用英文半角逗号","隔开',
		'id' => 'not_grid_news',
		'std' => '',
		'class' => 'hidden',
		'type' => 'text'
	);

	$options[] = array(
		'name' => '分类ID对照',
		'desc' => '<ul>'.$cats_id.'</ul>',
		'id' => 'catids',
		'class' => 'grid-news-catid hidden',
		'type' => 'info'
	);

然后：打开【inc/options/includes/themes-options.php】文件，找到代码

	jQuery('#grid_cat_new').click(function() {
		jQuery('#section-grid_cat_news_n').fadeToggle(400);
	});

	if (jQuery('#grid_cat_new:checked').val() !== undefined) {
		jQuery('#section-grid_cat_news_n').show();
	}

将其修改为

	jQuery('#grid_cat_new').click(function() {
		jQuery('#section-grid_cat_news_n, #section-not_grid_news, .grid-news-catid').fadeToggle(400);
	});

	if (jQuery('#grid_cat_new:checked').val() !== undefined) {
		jQuery('#section-grid_cat_news_n, #section-not_grid_news, .grid-news-catid').show();
	}

接着：打开【grid/grid-cat-new.php】文件，找到代码

<?php $recent = new WP_Query( array( 'posts_per_page' => zm_get_option('grid_cat_news_n'), 'category__not_in' => explode(',',zm_get_option('not_news_n')), 'post__not_in' => $do_not_top) ); ?>

将其修改为

<?php $recent = new WP_Query( array( 'posts_per_page' => zm_get_option('grid_cat_news_n'), 'category__not_in' => explode(',',zm_get_option('not_grid_news')), 'post__not_in' => $do_not_top) ); ?>

最后：在【主题选项--分类图片--首页分类图片布局最新文章--输入要排除的分类ID】中输入要排除的分类ID并保存即可。

改进后的最近更新模块：