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

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

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

Condividi su whatsapp
Condividi su facebook
Condividi su linkedin
Condividi su twitter
Assistenza per wordpress
Post Popolari:
Calcolare il tasso di conversione
Web Marketing
Come calcolare il tasso di conversione

Quando si esamina la gestione del ritorno sull’investimento (ROI) o delle prestazioni di un sito Web, l’impostazione degli obiettivi di conversione è uno dei modi più semplici e migliori per misurare i risultati.

Leggi tutto »
Carlo Alberto Bello

La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero troverai utili le oltre 200 guide WordPress e sulla SEO che ho pubblicato su questo blog. Sono disponibile a fornire una prima consulenza SEO GRATUITA, consigliandoti una strategia seo per posizionare il tuo sito WordPress tra i primi su Google.