Visualizza l’immagine della categoria sul layout dell’archivio della categoria Elementor

Visualizza immagine categoria elementor
Condividi il post
Condividi su facebook
Condividi su twitter
Condividi su linkedin
Condividi su whatsapp
Tabella dei Contenuti

Costruisco un layout di archivio di categoria con il generatore di temi Elementor. Creo una sezione di intestazione della pagina e visualizzo il nome e la descrizione della categoria. Desidero caricare l’immagine della categoria dalla pagina di aggiunta / modifica della categoria e aggiungerla alla sezione dell’intestazione della pagina come immagine di sfondo. L’ho testato con 2 metodi. Può essere eseguito da chiunque.

Metodo 1: semplici codici PHP personalizzati (nessun plug-in aggiuntivo)
Metodo 2: plug-in Advanced Custom Fields

Requisiti minimi

1. Elementor

2. Elementor Pro

Metodo 1: semplici codici PHP personalizzati (nessun plug-in aggiuntivo)

Per impostazione predefinita, non è disponibile alcuna opzione di caricamento delle immagini per le categorie. Hai bisogno di alcuni codici o plugin extra per questo. Sto aggiungendo un campo di caricamento immagine nel modulo di aggiunta / modifica della categoria. Quindi l’utente può caricare l’immagine personalizzata nella singola categoria. Apri il tuo  file functions.php e aggiungi i seguenti script:

//* Load media uploader js file
add_action( 'admin_enqueue_scripts', 'paulc_admin_enqueue_scripts' );
function paulc_admin_enqueue_scripts( $hook ) {
	if ( 'term.php' != $hook && 'edit-tags.php' != $hook ) {
	    return;
	}

	$screen       = get_current_screen();
	$screen_id    = $screen ? $screen->id : '';

	// Edit category pages
	if ( in_array( $screen_id, array( 'edit-category' ) ) ) {
	  wp_enqueue_media();
	}

	wp_enqueue_script( 'cat-media-uploader', get_stylesheet_directory_uri() . '/js/media.uploader.js', array(), CHILD_THEME_VERSION, true );
	wp_localize_script( 
		'cat-media-uploader', 
		'MU', 
		array( 
			'title'       => __( "Choose an image", "theme-prefix" ), 
			'button_text' => __( "Use image", "theme-prefix" ), 
			'placeholder' => get_stylesheet_directory_uri() . "/images/placeholder.png" 
		) 
	);
}
 
/**
 * Adding media uploader button in Add & Edit form
 * Also saving the data when creating or updating a category 
 */
add_action( 'admin_init', 'paulc_category_featured_image_field' );
function paulc_category_featured_image_field() {
	add_action( 'category_add_form_fields', 'paulc_category_add_form_fields' );
	add_action( 'category_edit_form_fields', 'paulc_category_edit_form_fields', 10 );    

	add_action( 'created_term', 'paulc_save_category_form_fields', 10, 3 );
	add_action( 'edit_term', 'paulc_save_category_form_fields', 10, 3 );
}

/**
 * Callback function. Adding placeholder image with upload button
 */
function paulc_category_add_form_fields() {
?>
	<div class="form-field">
		<label><?php _e( 'Featured Image', 'theme-prefix' ); ?></label>
		<div id="cat_feat_img" style="padding-top: 10px;"><img src="<?php echo get_stylesheet_directory_uri() ;?>/images/placeholder.png" width="220px" height="220px" /></div>
		<div style="padding-top: 10px;">
			<input type="hidden" id="cat_feat_img_id" name="cat_feat_img_id" />
			<button type="button" class="upload_image_button button"><?php _e( 'Upload/Add image', 'theme-prefix' ); ?></button>
			<button type="button" class="remove_image_button button"><?php _e( 'Remove image', 'theme-prefix' ); ?></button>
		</div>
		<div class="clear"></div>
	</div>
<?php
}

/**
 * Edit term's featured image
 * 
 * @param mixed $term Term (category) being edited  
 */ 
function paulc_category_edit_form_fields( $term ) {
	$cat_feat_img_id = absint( get_term_meta( $term->term_id, 'cat_feat_img_id', true ) );

	if ( $cat_feat_img_id ) {
	  $image = wp_get_attachment_thumb_url( $cat_feat_img_id );
	} else {
	  $image = get_stylesheet_directory_uri() . '/images/placeholder.png';
	}
?>
	<tr class="form-field">
		<th scope="row" valign="top"><label><?php _e( 'Featured Image', 'theme-prefix' ); ?></label></th>
		<td>
			<div id="cat_feat_img" style="margin-bottom: 10px;"><img src="<?php echo esc_url( $image ); ?>" width="220px" height="220px" /></div>
			<div>
				<input type="hidden" id="cat_feat_img_id" name="cat_feat_img_id" value="<?php echo $cat_feat_img_id; ?>" />
				<button type="button" class="upload_image_button button"><?php _e( 'Upload/Add image', 'theme-prefix' ); ?></button>
				<button type="button" class="remove_image_button button"><?php _e( 'Remove image', 'theme-prefix' ); ?></button>
			</div>
			<div class="clear"></div>
		</td>
	</tr>
<?php
}

/**
 * Saving data
 *
 * @param mixed $term_id Term ID being saved
 * @param mixed $tt_id
 * @param string $taxonomy
 */
function paulc_save_category_form_fields( $term_id, $tt_id = '', $taxonomy = '' ) {
	if ( isset( $_POST['cat_feat_img_id'] ) && '' !== $taxonomy ) {
		update_term_meta( $term_id, 'cat_feat_img_id', absint( $_POST['cat_feat_img_id'] ) );
	}
}

//* Adding the column name
add_filter( 'manage_edit-category_columns', 'paulc_category_columns' );
function paulc_category_columns( $paulc_category_columns ) {
	array_shift( $paulc_category_columns );

	$new_columns                    = array();    
	$new_columns['cb']              = '';
	$new_columns['cat_image_thumb'] = __( 'Image', 'theme-prefix' );

	return array_merge( $new_columns, $paulc_category_columns );
}

//* Add image thumb at Image column
add_filter('manage_category_custom_column', 'paulc_category_column_image', 10, 3 );
function paulc_category_column_image( $arg1, $column_name, $term_id ) {    
	if ( $column_name == 'cat_image_thumb' )
	{
		$cat_feat_img_id = absint( get_term_meta( $term_id, 'cat_feat_img_id', true ) );

		if ( $cat_feat_img_id ) {
			$image = wp_get_attachment_thumb_url( $cat_feat_img_id );
		} else {
			$image = get_stylesheet_directory_uri() . '/images/placeholder.png';
		}

		return sprintf( '<img src="%s" width="60px" height="60px" />', esc_url( $image ) );
	}
}

add_action( 'wp_head', 'paulc_add_og_image_category_page' );
function paulc_add_og_image_category_page()
{
	if( ! is_category() ) {
		return '';
	}

	$term_id        = 0;
	$image 			= '';
	$queried_object = get_queried_object();
	if ( is_object( $queried_object ) && isset( $queried_object->term_id ) ) {
		$term_id = $queried_object->term_id;

		$cat_feat_img_id = absint( get_term_meta( $term_id, 'cat_feat_img_id', true ) );
    
		if ( $cat_feat_img_id ) {
			$image = wp_get_attachment_url( $cat_feat_img_id );
			echo '<meta property="og:image" content="' . $image . '" />' . "\n";
		}
	}

	return '';
}

2. Crea il file JS di Media Uploader

Crea un nuovo file  “media.uploader.js”  e inseriscilo nella cartella “js” del tuo tema  . Questo file JS aprirà il modulo di caricamento multimediale nella finestra modale.

Scrivi un commento

Iscriviti alla nostra Newsletter

Ricevi aggiornamenti e impara dai migliori