在做 WordPress 主題開發的時候，突然被客戶要求做一個頁面，來展示所有的分類，且分類還是要圖片形式的來展示，話說做音樂類站，分類確實需要做個類似封面的分類影像才行，可是特麼的 WordPress 分類目錄設定裡值有標題、別名和描述，在描述裡又不能加圖片程式碼。。。總麼辦？其實我在 《WordPress 分類目錄新增個性化影像功能擴充套件 （一） 》 裡面有講到。。。而這篇文章就涵蓋了，上面說了做一個頁面，來展示所有的分類，且分類還是要圖片形式的來展示 好吧，我給個圖你就能夠理解了！
下面就直接上教程吧，首先，開啟你 WordPress 主題資料夾下的 functions.php 資料夾，然後將下面的程式碼放入：
- <?php
- global $texonomy_slug;
- $texonomy_slug='category';
- add_action($texonomy_slug.'_add_form_fields','categoryimage');
- function categoryimage($taxonomy){ ?>
- <div>
- <label for="tag-image"> 分類影像</label>
- <input type="text" name="tag-image" id="tag-image" value="" /><br /><span> 請在此輸入影像 URL 地址。</span>
- </div>
- <?php script_css(); }
- add_action($texonomy_slug.'_edit_form_fields','categoryimageedit');
- function categoryimageedit($taxonomy){ ?>
- <tr>
- <th scope="row" valign="top"><label for="tag-image"> 影像</label></th>
- <td><input type="text" name="tag-image" id="tag-image" value="<?php echo get_option('_category_image'.$taxonomy->term_id); ?>" /><br /><span> 請在此輸入影像 URL 地址。</span></td>
- </tr>
- <?php script_css(); }
- function script_css(){ ?>
- <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/category-image_thickbox.js"></script>
- <link rel='stylesheet' id='thickbox-css' href='<?php echo includes_url(); ?>js/thickbox/thickbox.css' type='text/css' media='all' />
- <script type="text/javascript">
- jQuery(document).ready(function() {
- var fileInput = '';
- jQuery('#tag-image').live('click',
- function() {
- fileInput = jQuery('#tag-image');
- tb_show('', 'media-upload.php?type=image&TB_iframe=true');
- return false;
- });
- window.original_send_to_editor = window.send_to_editor;
- window.send_to_editor = function(html) {
- if (fileInput) {
- fileurl = jQuery('img', html).attr('src');
- if (!fileurl) {
- fileurl = jQuery(html).attr('src');
- }
- jQuery(fileInput).val(fileurl);
- tb_remove();
- } else {
- window.original_send_to_editor(html);
- }
- };
- });
- </script>
- <?php }
- add_action('edit_term','categoryimagesave');
- add_action('create_term','categoryimagesave');
- function categoryimagesave($term_id){
- if(isset($_POST['tag-image'])){
- if(isset($_POST['tag-image']))
- update_option('_category_image'.$term_id,$_POST['tag-image'] );
- }
- }
- function print_image_function(){
- $texonomy_slug='category';
- $_terms = wp_get_post_terms(get_the_ID(),$texonomy_slug);
- $_termsidlist=array();
- $result = '';
- foreach($_terms as $val){
- $result .= '<div style="float:left; margin-right:2px;"><a href="'.get_term_link($val).'"><img height="22px" title="'.$val->name.'" alt="'.$val->name.'" src="'.get_option('_category_image'.$val->term_id).'" /></a></div>';
- }
- return $result;
- }
- add_shortcode('print-image','print_image_function');
- ?>
新手需要注意的是，將以上程式碼加入到 functions.php 檔案的時候，看是否需要去掉頭尾的
很多新手都是因為未去掉頭部，造成了網站打不開的情況，至於老手，求別打我，我是大叔我羅嗦！
程式碼加入後，就會出現下圖的效果
最後，運用到 WordPress 主題裡，將下面的迴圈加入你想要現實的位置
- <?php
- $categories=get_categories($args);
- foreach($categories as $category) {
- if ( get_option('_category_image'.$category->term_id) ){
- echo '<div><a href="'.get_term_link($category).'"><img title="'.$category->name.'" alt="'.$category->name.'" src="'.get_option('_category_image'.$category->term_id).'" /></a></div>';
- echo '<div style=" text-align:center;"><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '><b>' . $category->name.'</b></a></div>';
- }?>
最終的大體效果就如文章第一張圖所示！