Controlla articolo wordpress wpcode: verifica in un click

Prima di pubblicare un articolo WordPress può essere utile avere un piccolo controllo finale per verificare che non manchi qualcosa di importante.

Con questo snippet per WPCode aggiungiamo nell’editor il pulsante Controlla articolo.

Premendolo viene mostrata una finestra con un riepilogo dell’articolo e vengono evidenziati gli eventuali elementi mancanti.

Il controllo può verificare:

titolo
contenuto
numero di parole
categoria
immagine in evidenza
estratto

Lo snippet non sostituisce Yoast SEO, All in One SEO, Rank Math o altri plugin SEO e non modifica i loro dati.

Come installarlo

Vai in:

WordPress → WPCode → Add Snippet → Add Your Custom Code

Interfaccia del plugin WPCode in WordPress con l'elenco degli snippet e l'opzione per aggiungere un nuovo codice

Seleziona PHP Snippet, incolla il codice e imposta l’inserimento su Admin Only.

Interfaccia di WPCode con le opzioni per creare snippet, tra cui è selezionato Snippet PHP per controlla articolo wordpress

<?php
/**
 * BACKdigit - Controlla articolo prima della pubblicazione
 * Compatibile con editor Gutenberg e Classic Editor.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Aggiunge il box nella schermata di modifica degli articoli.
 */
add_action( 'add_meta_boxes', function() {

	add_meta_box(
		'backdigit_article_check',
		'Controllo articolo',
		function() {
			?>
			<div id="backdigit-article-check-box">
				<p>Verifica rapidamente se l'articolo è pronto per la pubblicazione.</p>

				<button type="button" class="button button-primary" id="backdigit-check-article">
					Controlla articolo
				</button>
			</div>

			<div id="backdigit-check-modal" aria-hidden="true">
				<div class="backdigit-check-overlay"></div>

				<div class="backdigit-check-window" role="dialog" aria-modal="true">
					<button type="button" class="backdigit-check-close" aria-label="Chiudi">
						&times;
					</button>

					<h2>Controllo articolo</h2>

					<div id="backdigit-check-results"></div>

					<button type="button" class="button" id="backdigit-check-close-bottom">
						Chiudi
					</button>
				</div>
			</div>
			<?php
		},
		'post',
		'side',
		'high'
	);

} );


/**
 * CSS e JavaScript nell'area amministrativa.
 */
add_action( 'admin_footer-post.php', 'backdigit_article_check_assets' );
add_action( 'admin_footer-post-new.php', 'backdigit_article_check_assets' );

function backdigit_article_check_assets() {

	$screen = get_current_screen();

	if ( ! $screen || 'post' !== $screen->post_type ) {
		return;
	}
	?>

	<style>
		#backdigit-check-modal {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 999999;
		}

		#backdigit-check-modal.is-open {
			display: block;
		}

		.backdigit-check-overlay {
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, .55);
		}

		.backdigit-check-window {
			position: relative;
			width: min(520px, calc(100% - 30px));
			max-height: 80vh;
			overflow-y: auto;
			margin: 8vh auto 0;
			padding: 25px;
			background: #fff;
			border-radius: 10px;
			box-shadow: 0 10px 40px rgba(0,0,0,.25);
			box-sizing: border-box;
		}

		.backdigit-check-window h2 {
			margin-top: 0;
			padding-right: 25px;
		}

		.backdigit-check-close {
			position: absolute;
			right: 15px;
			top: 12px;
			border: 0;
			background: transparent;
			font-size: 28px;
			line-height: 1;
			cursor: pointer;
			color: #666;
		}

		.backdigit-check-item {
			display: flex;
			align-items: center;
			gap: 10px;
			margin: 8px 0;
			padding: 10px 12px;
			border-radius: 6px;
			background: #f6f7f7;
		}

		.backdigit-check-item.ok {
			border-left: 4px solid #46b450;
		}

		.backdigit-check-item.warning {
			border-left: 4px solid #dba617;
		}

		.backdigit-check-icon {
			font-weight: 700;
		}

		.backdigit-check-summary {
			margin: 18px 0;
			padding: 12px;
			border-radius: 6px;
			background: #f6f7f7;
			font-weight: 600;
		}

		#backdigit-check-close-bottom {
			margin-top: 15px;
		}
	</style>

	<script>
	document.addEventListener('DOMContentLoaded', function() {

		const button = document.getElementById('backdigit-check-article');
		const modal = document.getElementById('backdigit-check-modal');
		const results = document.getElementById('backdigit-check-results');
		const closeTop = document.querySelector('.backdigit-check-close');
		const closeBottom = document.getElementById('backdigit-check-close-bottom');

		if (!button || !modal || !results) {
			return;
		}

		function getEditorData() {

			let title = '';
			let content = '';
			let excerpt = '';
			let categories = [];
			let featuredImage = 0;

			/*
			 * Gutenberg
			 */
			if (window.wp && wp.data) {

				const editor = wp.data.select('core/editor');

				if (editor) {
					title = editor.getEditedPostAttribute('title') || '';
					content = editor.getEditedPostAttribute('content') || '';
					excerpt = editor.getEditedPostAttribute('excerpt') || '';
					categories = editor.getEditedPostAttribute('categories') || [];
					featuredImage = editor.getEditedPostAttribute('featured_media') || 0;
				}
			}

			/*
			 * Classic Editor fallback.
			 */
			if (!title) {
				const titleField = document.getElementById('title');

				if (titleField) {
					title = titleField.value || '';
				}
			}

			if (!content) {

				const textarea = document.getElementById('content');

				if (textarea) {
					content = textarea.value || '';
				}

				const visualEditor = document.getElementById('tinymce');

				if (visualEditor && visualEditor.innerText) {
					content = visualEditor.innerText;
				}
			}

			if (!excerpt) {

				const excerptField = document.getElementById('excerpt');

				if (excerptField) {
					excerpt = excerptField.value || '';
				}
			}

			/*
			 * Controllo categoria nel Classic Editor.
			 */
			if (!categories.length) {

				const checkedCategories = document.querySelectorAll(
					'#categorychecklist input[type="checkbox"]:checked'
				);

				categories = Array.from(checkedCategories);
			}

			/*
			 * Controllo immagine in evidenza nel Classic Editor.
			 */
			if (!featuredImage) {

				const featured = document.querySelector(
					'#postimagediv .inside img'
				);

				if (featured) {
					featuredImage = 1;
				}
			}

			return {
				title: title.trim(),
				content: content.trim(),
				excerpt: excerpt.trim(),
				categories: categories,
				featuredImage: featuredImage
			};
		}

		function countWords(text) {

			const cleanText = text
				.replace(/<[^>]*>/g, ' ')
				.replace(/\s+/g, ' ')
				.trim();

			if (!cleanText) {
				return 0;
			}

			return cleanText.split(/\s+/).length;
		}

		function checkArticle() {

			const data = getEditorData();
			const words = countWords(data.content);

			const checks = [
				{
					name: 'Titolo',
					ok: data.title.length > 0,
					value: data.title.length > 0
						? 'Presente'
						: 'Manca il titolo'
				},
				{
					name: 'Contenuto',
					ok: data.content.length > 0,
					value: data.content.length > 0
						? words + ' parole'
						: 'Il contenuto è vuoto'
				},
				{
					name: 'Categoria',
					ok: data.categories.length > 0,
					value: data.categories.length > 0
						? 'Selezionata'
						: 'Nessuna categoria selezionata'
				},
				{
					name: 'Immagine in evidenza',
					ok: !!data.featuredImage,
					value: data.featuredImage
						? 'Presente'
						: 'Manca l’immagine in evidenza'
				},
				{
					name: 'Estratto',
					ok: data.excerpt.length > 0,
					value: data.excerpt.length > 0
						? 'Presente'
						: 'Non inserito'
				}
			];

			let html = '';
			let missing = 0;

			checks.forEach(function(check) {

				const statusClass = check.ok ? 'ok' : 'warning';
				const icon = check.ok ? '✓' : '⚠';

				if (!check.ok) {
					missing++;
				}

				html += `
					<div class="backdigit-check-item ${statusClass}">
						<span class="backdigit-check-icon">${icon}</span>
						<strong>${check.name}</strong>
						<span>— ${check.value}</span>
					</div>
				`;
			});

			if (missing === 0) {

				html += `
					<div class="backdigit-check-summary">
						✓ Articolo pronto. Tutti i controlli sono stati superati.
					</div>
				`;

			} else {

				html += `
					<div class="backdigit-check-summary">
						${missing} elemento${missing > 1 ? 'i' : ''} da verificare.
					</div>
				`;
			}

			results.innerHTML = html;
			modal.classList.add('is-open');
			modal.setAttribute('aria-hidden', 'false');
		}

		function closeModal() {
			modal.classList.remove('is-open');
			modal.setAttribute('aria-hidden', 'true');
		}

		button.addEventListener('click', checkArticle);

		if (closeTop) {
			closeTop.addEventListener('click', closeModal);
		}

		if (closeBottom) {
			closeBottom.addEventListener('click', closeModal);
		}

		modal.addEventListener('click', function(event) {

			if (event.target.classList.contains('backdigit-check-overlay')) {
				closeModal();
			}
		});

		document.addEventListener('keydown', function(event) {

			if (event.key === 'Escape' && modal.classList.contains('is-open')) {
				closeModal();
			}
		});

	});
	</script>

	<?php
}

Salva e attiva lo snippet.

Nell’editor degli articoli comparirà il pulsante Controlla articolo.

Pulsante blu Controlla articolo nell'interfaccia di WordPress per verificare l'articolo con WPCode prima della pubblicazione

Come funziona

Quando hai terminato di scrivere, premi Controlla articolo.

Si apre una finestra con l’elenco dei controlli. Gli elementi presenti vengono indicati come OK, mentre quelli mancanti vengono evidenziati come attenzione.

Finestra di controllo articolo di WPCode che mostra un elenco di elementi da verificare, tra cui titolo, categoria e

Il controllo non blocca la pubblicazione: serve semplicemente come verifica finale prima di premere Pubblica.

Dove trovi il Controllo articolo

Dopo aver attivato lo snippet, il box Controllo articolo viene visualizzato nella colonna destra dell’editor di WordPress, insieme agli altri pannelli disponibili. Puoi anche spostarlo dove preferisci semplicemente trascinandolo nella posizione desiderata, ad esempio nella parte inferiore dell’editor, vicino al meta box di Yoast SEO o agli altri strumenti che utilizzi per la gestione dell’articolo.

Un controllo semplice, senza interferire con la SEO

La funzione è volutamente separata dai plugin SEO. La SEO rimane gestita dal plugin che hai già installato, mentre questo snippet si occupa esclusivamente della completezza dell’articolo.

In questo modo può essere utilizzato anche su siti che utilizzano plugin SEO differenti.