如何在分类中添加背景图像并在分类页面上显示图像

时间:2019-11-13 作者:Naren Verma

我的网站上有分类。我必须在创建类别时为每个类别添加背景图像,而不使用任何插件。

我在函数中尝试了一些代码。php和我指的是link.但它不起作用。

function my_category_module() {
 add_action ( \'edit_category_form_fields\', \'add_image_cat\');
 add_action ( \'edited_category\', \'save_image\');
 }
add_action(\'init\', \'my_category_module\');
function add_image_cat($tag){
 $category_images = get_option( \'category_images\' );
 $category_image = \'\';
 if ( is_array( $category_images ) && array_key_exists( $tag->term_id, $category_images ) ) {
 $category_image = $category_images[$tag->term_id] ;
 }
 ?>
 <tr>
 <th scope="row" valign="top"><label for="auteur_revue_image">Image</label></th>
 <td>
 <?php
 if ($category_image !=""){
 ?>
 <img src="<?php echo $category_image;?>" alt="" title=""/>
 <?php
 }
 ?>
 <br/>
 <input type="text" name="category_image" id="category_image" value="<?php echo $category_image; ?>"/><br />
 <span>This field allows you to add a picture to illustrate the category. Upload the image from the media tab WordPress and paste its URL here.</span>
 </td>
 </tr>
 <?php
 }

function save_image($term_id){
 if ( isset( $_POST[\'category_image\'] ) ) {
 //load existing category featured option
 $category_images = get_option( \'category_images\' );
 //set featured post ID to proper category ID in options array
 $category_images[$term_id] =  $_POST[\'category_image\'];
 //save the option array
 update_option( \'category_images\', $category_images );
 }
 }
显示在类别上。php页面

if(is_category()){
 $category_images = get_option( \'category_images\' );
 $category_image = \'\';
 if ( is_array( $category_images ) && array_key_exists( get_query_var(\'cat\'), $category_images ) ){

$category_image = $category_images[get_query_var(\'cat\')] ;
 ?>
 <img src="<?php echo $category_image;?>"/>
 <?php
 }
 }
enter image description hereenter image description here

1 个回复
最合适的回答,由SO网友:Kalimah 整理而成

您可以尝试此代码。它将添加一个媒体按钮,该按钮将获取图像url。我已经对我删除或添加的部分进行了评论。

function my_category_module()
{
    // this action is deprecated
    //add_action(\'edit_category_form_fields\', \'add_image_cat\');

    // Add these actions for edit and add
    add_action(\'edited_category\', \'save_image\');
    add_action(\'create_category\', \'save_image\');
    add_action(\'category_edit_form_fields\', \'edit_image_cat\');
}
add_action(\'init\', \'my_category_module\');


function edit_image_cat($tag)
{
    $category_images = get_option(\'category_images\');
    $category_image = \'\';
    if (is_array($category_images) && array_key_exists($tag->term_id, $category_images)) {
        $category_image = $category_images[$tag->term_id];
    }
    ?>
    <tr>
        <th scope="row" valign="top"><label for="auteur_revue_image">Image</label></th>
        <td>
            <?php
                if ($category_image != "") {
                    ?>
                <img src="<?php echo $category_image; ?>" alt="" title="" />
            <?php
                }
                ?>
            <br />
            <!-- Add this html here -->
            <input type="text" class="regular-text" id="custom_category_image" name="category_image" value="<?php echo $category_image; ?>">
            <button class="set_category_image button">Set Image url</button>

            <!--
                <input type="text" name="category_image" id="category_image" value="<?php echo $category_image; ?>"/><br />
                <span>This field allows you to add a picture to illustrate the category. Upload the image from the media tab WordPress and paste its URL here.</span>
            -->
        </td>
    </tr>

<?php
}

function save_image($term_id)
{
    if (isset($_POST[\'category_image\'])) {
        //load existing category featured option
        $category_images = get_option(\'category_images\');
        //set featured post ID to proper category ID in options array
        $category_images[$term_id] =  $_POST[\'category_image\'];
        //save the option array
        update_option(\'category_images\', $category_images);
    }
}


// Enquey media elements
add_action(\'admin_enqueue_scripts\', function () {
    if (is_admin())
        wp_enqueue_media();
});

// Add JS using admin_footer or enque thorugh hooks
add_action(\'admin_footer\', \'my_footer_scripts\');
function my_footer_scripts()
{
    ?>
    <script>
        jQuery(document).ready(function() {
            if (jQuery(\'.set_category_image\').length > 0) {
                if (typeof wp !== \'undefined\' && wp.media && wp.media.editor) {
                    jQuery(\'.set_category_image\').on(\'click\', function(e) {
                        e.preventDefault();
                        var button = jQuery(this);
                        var url_input = jQuery("#custom_category_image");
                        wp.media.editor.send.attachment = function(props, attachment) {
                            url_input.val(attachment.url);
                        };
                        wp.media.editor.open(button);
                        return false;
                    });
                }
            }
        });
    </script>
<?php
}