增加主题杂志布局中各模块分类图标设置选项

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

基本思路

主题选项中增加分类图标设置选项 -> 分类目录中添加分类图标设置选项 -> 添加分类图标文件加载判断 -> 各模块文件中添加分类图标显示判断语句 -> 增加分类图标CSS样式

 

第一部分:添加功能

一、主题选项中增加分类图标设置选项

打开【inc/options/begin-options.php】文件,在适当位置添加代码

$options[] = array(
	'name' => '',
	'desc' => '分类图标',
	'id' => 'cat_icon',
	'std' => '0',
	'type' => 'checkbox'
);

$options[] = array(
	'id' => 'clear'
);

具体显示位置和你添加代码的位置有关。考虑到管理上的方便,我加在了

$options[] = array(
	'name' => '',
	'desc' => '显示相同父分类链接',
	'id' => 'child_cat',
	'std' => '1',
	'type' => 'checkbox'
);

$options[] = array(
	'id' => 'clear'
);

的下面, 显示位置在【主题选项--基本设置--显示相同父分类链接】选项的下面。

 

二、分类目录中添加分类图标设置选项

在【inc】目录下新建一个名为【cat-icons.php】的文件,然后复制代码

<?php
add_action('admin_init', 'zm_icon_init');
function zm_icon_init() {
	$zm_icon_taxonomies = get_taxonomies();
	if (is_array($zm_icon_taxonomies)) {
		foreach ($zm_icon_taxonomies as $zm_icon_taxonomy) {
			add_action($zm_icon_taxonomy.'_add_form_fields', 'zm_add_icon_texonomy_field');
			add_action($zm_icon_taxonomy.'_edit_form_fields', 'zm_icon_edit_texonomy_field');
		}
	}
}

// 新建分类添加图标字段表单
function zm_add_icon_texonomy_field() {
	if (get_bloginfo('version') >= 3.5)
		wp_enqueue_media();
	else {
		wp_enqueue_style('thickbox');
		wp_enqueue_script('thickbox');
	}
	echo '<div class="form-field">
	<label for="taxonomy_icon">' . __('分类图标', 'begin') . '</label>
	<input type="text" name="taxonomy_icon" id="taxonomy_icon" value="" />
	<br/>
	<span class="cat-words">输入图标字体代码</span><br />
	</div>';
}

// 在分类编辑添加图标字段表单
function zm_icon_edit_texonomy_field($taxonomy) {
	if (get_bloginfo('version') >= 3.5)
		wp_enqueue_media();
	else {
		wp_enqueue_style('thickbox');
		wp_enqueue_script('thickbox');
	}
	$icon_code = zm_taxonomy_icon_code( $taxonomy->term_id, NULL, TRUE );
	echo '<tr class="form-field">
	<th scope="row" valign="top"><label for="taxonomy_icon">' . __('分类图标', 'begin') . '</label></th>
	<td>' . zm_taxonomy_icon_code( $taxonomy->term_id, 'medium', TRUE ) . '<br/><input type="text" name="taxonomy_icon" id="taxonomy_icon" value="'.$icon_code.'" /><br />
	<span class="cat-words">输入图标字体代码</span><br />
	</td><br />
	</tr>';
}

// 保存分类图标字段
add_action('edit_term','zm_save_taxonomy_icon');
add_action('create_term','zm_save_taxonomy_icon');
function zm_save_taxonomy_icon($term_id) {
	if(isset($_POST['taxonomy_icon']))
		update_option('zm_taxonomy_icon'.$term_id, $_POST['taxonomy_icon'], NULL);
}

// 获取图标
function zm_icon_get_attachment_id_by_code($icon_name) {
	global $wpdb;
	$query = $wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid = %s", $icon_name);
	$id = $wpdb->get_var($query);
	return (!emptyempty($id)) ? $id : NULL;
}

// 获取指定term_id分类图标代码
function zm_taxonomy_icon_code($term_id = NULL, $size = 'full', $return_placeholder = FALSE) {
	if (!$term_id) {
		if (is_category())
			$term_id = get_query_var('cat');
		elseif (is_tag())
			$term_id = get_query_var('tag_id');
		elseif (is_tax()) {
			$current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
			$term_id = $current_term->term_id;
		}
	}
	$taxonomy_icon_code = get_option('zm_taxonomy_icon'.$term_id);
	if(!emptyempty($taxonomy_icon_code)) {
		$attachment_id = zm_icon_get_attachment_id_by_code($taxonomy_icon_code);
		if(!emptyempty($attachment_id)) {
			$taxonomy_icon_code = $taxonomy_icon_code[0];
		}
	}
	return $taxonomy_icon_code;
}

到这个文件中,并保存。

作用:在【后台--文章--分类目录】中增加分类图标设置选项

 

三、添加分类图标文件加载判断

打开【inc/load.php】文件,在适当位置添加代码

if (zm_get_option('cat_icon')) {
	require get_template_directory() . '/inc/cat-icons.php';
}

考虑到代码一致性问题,我加在了代码

if (zm_get_option('cat_des')) {
	require get_template_directory() . '/inc/cats-img.php';
}

的下面, 具体添加位置可自行决定。

 

四、各模块文件中添加分类图标显示判断语句

由于杂志布局中的模块比较多,因此这部分涉及的文件也比较多,但都集中在【cms】目录下。同时,由于代码中涉及的类名不同,因此需要分别替换(不要使用相同的代码去替换所有内容),
  • 【cms/cms-cat-big.php】

找到代码

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>

将其替换为

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
		<?php if (zm_get_option('cat_icon')) { ?>
			<i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
		<?php } else { ?>
			<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php } ?>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>
  • 【cms/cms-cat-big-n.php】

找到代码

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>

将其替换为

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
		<?php if (zm_get_option('cat_icon')) { ?>
			<i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
		<?php } else { ?>
			<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php } ?>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>
  • 【cms/cms-cat-grid.php】

找到代码

<h3 class="cat-grid-title">
	<a href="<?php echo get_category_link($category);?>">
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>

将其替换为

<h3 class="cat-grid-title">
	<a href="<?php echo get_category_link($category);?>">
		<?php if (zm_get_option('cat_icon')) { ?>
			<i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
		<?php } else { ?>
			<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php } ?>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>
  • 【cms/cms-cat-one-5.php

找到代码

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>

将其替换为

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
	<?php if (zm_get_option('cat_icon')) { ?>
		<i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
	<?php } else { ?>
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
	<?php } ?>
	<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>
  • 【cms/cms-cat-one-10.php】

找到代码

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>

将其替换为

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
	<?php if (zm_get_option('cat_icon')) { ?>
		<i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
	<?php } else { ?>
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
	<?php } ?>
	<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>
  • 【cms/cms-cat-small.php】

找到代码

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>

将其替换为

<h3 class="cat-title">
	<a href="<?php echo get_category_link($category);?>">
	<?php if (zm_get_option('cat_icon')) { ?>
		<i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
	<?php } else { ?>
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
	<?php } ?>
	<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>
  • 【cms/cms-cat-square.php】

找到代码

<h3 class="cat-square-title">
	<a href="<?php echo get_category_link($category);?>">
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
		<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>

将其替换为

<h3 class="cat-square-title">
	<a href="<?php echo get_category_link($category);?>">
	<?php if (zm_get_option('cat_icon')) { ?>
		<i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
	<?php } else { ?>
		<span class="title-i"><span></span><span></span><span></span><span></span></span>
	<?php } ?>
	<?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
	</a>
</h3>

 

五、增加分类图标CSS样式

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

.cat-title .title-i,
.cat-square-title .title-i,
.cat-square-title .title-i,
.cat-grid-title .title-i,
.widget-title .title-i,
.child-title .title-i {
	margin: 0 10px 0 15px;
	padding: 7px 0 0 0;
}

在其下面添加

.t-icon {
	margin: 0 10px 0 15px;
	padding: 7px 0 0 0;
	font-weight: normal;
}

第一部分到此结束,接下来就是正常的设置,请接着往下看。

 

第二部分:相关设置

六、启用分类图标

勾选【主题选项--基本设置(看你自己添加的位置)--分类图标】选项

 

七、分类目录中添加图标代码

进入【后台--菜单--分类目录】,进入已经添加的分类目录,在【分类图标】中添加图标代码,并【更新】。

图标代码可以直接套用在菜单中添加图标代码的方法,格式为zm zm-abc。其中,zmzm-这两个前缀不要修改,abc为你在阿里图标库中设置的图标代码。如果你不清楚如何添加阿里图标库的字体图标,请参考文章《为主题添加阿里云图标字体》。

完成以上所有操作后,刷新前台,正常情况下各模块标题前的分类图标就会显示了。

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

发表评论

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