Advertisement
  1. Code
  2. WordPress

Progetti di Internazionalizzazione Word Press: Un esempio pratico , Parte 1

Scroll to top
Read Time: 12 min
This post is part of a series called Internationalizing WordPress Projects.
Internationalizing WordPress Projects: The Introduction

Italian (Italiano) translation by Piergiorgio Sansone (you can also view the original English article)

In questa serie , ci stiamo vedendo come intenazionalizzare i nostri progetti WordPress. Per questo se volete unirvi a noi , vi invito a rivedere l'articolo precedente della serie, dove abbiamo visto tutte le funzioni che WordPress mette a disposizione per aiutarci ad internazionalizzare le nostre stringhe.

Ed anche se questo è utile, ancora non ci aiuta a spiegare che cos'è l'internazionalizzazione. Come abbiamo detto nel post precedente :

L'internazionalizzazione è il processo di sviluppo il tuo plugin, quindi può essere facilmente tradotto in altre lingue.

Dato che WordPress alimenta circa 25% del web e che il web non è locale ossia il web del vostro paese di origine, è opportuno garantire che il lavoro che produciamo possa essere tradotto in altre lingue.

Per esser chiari , questo non significa che voi come sviluppatori siete responsabili della traduzione in varie lingue, di tutte le stinghe che compongono il vostro codice , che i vostro utenti potrebbero utilizzare. Significa invece utilizzare le API appropriate, affinché altri possano fornire la traduzione.

Prima di andare ulteriormente, ricordiamo:

  • Internazionalizzazione, spesso indicato come i18n, è il processo mediante il quale costruiamo il nostro software in modo che possa essere tradotto.
  • La localizzazione è quando prendiamo le stringhe internazionalizzate per poi tradurle nella lingua locale corretta.

Abbastanza facile da capire a questo punto, giusto? Ma ci sono un sacco di informazioni per sapere come farlo, e può essere davvero difficile distinguere il segnale dal rumore, soprattutto se per voi è qualcosa di nuovo tutto questo.

Ma questo è quello che questa serie di tutorial si propone di fare:  assicurarsi che siete in possesso di tutti gli strumenti  necessari per poter internazionalizzare correttamente il vostro progetto WordPress, capire cosa state facendo e come testarlo.

NeiI prossimi due articoli, creeremo un semplice plugin correttamente internazionalizzato. Inoltre, esamineremo ogni pezzo del codice di base del plugin che sarà internazionalizzato per assicurarci di aver compreso appieno tutto.

Nel prossimo articolo, daremo un'occhiata a uno degli strumenti che ho trovato più utile per localizzare il vostro lavoro e come verificare che la localizzazione stia funzionando correttamente.

Detto questo, andiamo avanti e iniziamo.

Guida introduttiva

Per questo particolare tutorial, ho intenzione di usare l'ultima versione di WordPress che è disponibile tramite Subversion. Se avete installato una copia di WordPress in locale ed è una versione recente,sarebbe grandioso.

The most recent copy of WordPress installed via SubversionThe most recent copy of WordPress installed via SubversionThe most recent copy of WordPress installed via Subversion

Se, tuttavia, volete vivere al limite, sentitevi liberi di uscire da questa guida per ottenere l'ultima versione del codice.

In definitiva, non avrà effetti sul lavoro che stiamo facendo, ma è un'opportunità per aumentare un pò la tua abilità nello sviluppo.

Preparando il Plugin

Con una copia WordPress locale configurata sulla vostra macchina, siete pronti per iniziare a lavorare su un plugin. Notate che per lo scopo di questo tutorial,realizzeremo  un plugin incredibilmente basico.

Lo scopo del plugin non è capire come costruire un plugin, come abbiamo visto che in altri corsi e in altri tutorial; Tuttavia, è capire le sfumature più sottili che vanno a internazionalizzare il codicebase affinché tu possa capire cos'è che stai facendo, il modo in cui andare in avanti con il lavoro che si farà, nei progetti attuali o futuri.

1. Creare la Directory dei Plugin e il Bootstrap

Innanzitutto, individuate la directory wp-content/plugins e create la directory chiamata tutplus-il8n Questa è la directory dove conserveremo i file del nostro plugin. E' giustamente chiamata Tuts+ internazionalizzazione.

Andate avanti e create un singolo file nella directory che utilizzeremo per iniziare il plugin. Chiamatelo tutplus-il8n.php.

The basic file of the pluginThe basic file of the pluginThe basic file of the plugin

Prima di andare avanti, dobbiamo decidere che cosa fara ' questo plugin. Sappiamo che abbiamo bisogno di visualizzare qualcosa all'utente in modo che possiamo praticare internazionalizzazione (e localizzazione). Questo significa che ci dovrebbe essere un componente di interfaccia utente per il plugin.

A tal fine, creiamo un semplice plugin che introdurrà una nuova voce di menu sotto il menu strumenti. Chiameremo la voce di sottomenu Server Info e utilizzeremo i dati che sono facilmente disponibili in PHP per visualizzare una schermata di contenuti in modo user-friendly.

Forse questo potrebbe essere utilizzato per l'invio di un log di debug ad un fornitore se qualcosa dovesse andare storto con il plugin.

2. definire il Plugin

Parto dal presupposto che abbiate familiarità con la creazione di un plugin di base. In caso contrario, abbiamo un numero di esercitazioni e corsi disponibili su come farlo (come già accennato). Il Codex ha anche alcune informazioni su come iniziare, al meglio.

Se non hai familiarità con il metodo per farlo, allora vi consiglio di verificare le risorse di cui sopra. Detto ciò, andiamo avanti e definiamo le basi del nostro plugin.

Per cominciare, dobbiamo definire la testata del plugin. Aprite tutplus-il8n.php ed assicuratevi che includa le seguenti informazioni.

1
<?php
2
/**

3
 * The plugin bootstrap File_Upload_Upgrader::cleanup

4
 *

5
 * @link              https://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676

6
 * @since             1.0.0

7
 * @package           TutsPlus_i18n

8
 *

9
 * @wordpress-plugin

10
 * Plugin Name:       Tuts+ Internationalization

11
 * Plugin URI:        http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676

12
 * Description:       Easily view internationalized server information.

13
 * Version:           1.0.0

14
 * Author:            Tom McFarlin

15
 * Author URI:        https://tommcfarlin.com

16
 * Text Domain:       tutsplus-i18n

17
 * License:           GPL-2.0+

18
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt

19
 */

Una volta fatto, salvate il file e navigate la maschera del Plugin su WordPress. Qui, dovreste vedere la riga per il plugin che avete appena creato.

The Tuts Internationalization plugin visible in the Installed Plugins screenThe Tuts Internationalization plugin visible in the Installed Plugins screenThe Tuts Internationalization plugin visible in the Installed Plugins screen

Garantito, a questo punto,non farà nulla  ma si può vedere che siamo sulla strada giusta. Inoltre, si noti che abbiamo aggiunto un tag che non si vede spesso con progetti di WordPress, e che è il tag Text Domain Questo è quello che useremo per aiutare ad internazionalizzare il nostro plugin.

Qui ci sono dettagli specifici su questo tag:

Se si sta traducendo un plugin o un tema, allora avrai bisogno di utilizzare un dominio di testo per indicare tutti i testi appartenenti a quel plugin. Questa portabilità aumenta e gioca meglio con strumenti di WordPress già esistenti . Il dominio di testo deve corrispondere allo slug del plugin.

Ovviamente, abbiamo definito il nostro dominio di testo come tutsplus-i18n. Vedrete che questo verrà usato per tutto il resto del codice base nel resto del tutorial.

Infine, assicuratevi di aggiornare  i tag Autor e Autor URI per abbinare il vostro nome e anche la vostra Home page.

3. introdurre la voce di Menu

La prima cosa che vogliamo fare è quello di introdurre un elemento di sottomenu al menu Strumenti. Per fare questo, utilizzeremo a nostro vantaggio la funzionalità che ci offre WordPress add_submenu_page.

Notate che,  stiamo utilizzando la funzione __() di cui abbiamo parlato nel primo post di questo tutorial per assicurarsi che il testo della voce di menu viene correttamente internazionalizzato per la traduzione. Inoltre, notate che il secondo parametro passato alla funzione è lo stesso del dominio di testo definito nell'intestazione del plugin.

1
<?php
2
3
add_action( 'admin_menu', 'tutsplus_i18n_add_submenu_page' );
4
/**

5
 * Adds a new submenu item to the Tools menu that will display server

6
 * information to the user.

7
 *

8
 * The menu item is internationalized so that we can provide proper translations

9
 * for users who are outside of our own locale.

10
 */
11
function tutsplus_i18n_add_submenu_page() {
12
13
    add_submenu_page(
14
        'tools.php',
15
        __( 'Server Information', 'tutsplus-i18n' ),
16
        __( 'Server Information', 'tutsplus-i18n' ),
17
        'manage_options',
18
        'tutsplus-i18n-menu',
19
        'tutsplus_i18n_display_submenu_page'
20
    );
21
22
}

Ora, questo non è abbastanza. Se avete letto la documentazione collegata sopra, allora sapete che abbiamo anche bisogno di definire una funzione che Visualizza il contenuto della pagina. Nel codice precedente, noi abbiamo fatto riferimento alla funzione come tutsplus_i18n_display_submenu_page, ma non abbiamo effettivamente definito la funzione.

Andiamo avanti e facciamolo ora. Il plugin lo faremo semplice in modo che verrà effettivamente eseguito. La pagina non visualizzerà nulla, ma il plugin continuerà a funzionare.

1
<?php
2
3
/**

4
 * Displays the content of the page associated with the new Server Information

5
 * menu item located in the Tools menu.

6
 */
7
function tutsplus_i18n_display_submenu_page() {
8
    echo '';
9
}

A questo punto, sentitevi liberi di attivare il plugin e guardare il contenuto sotto il menu strumenti. Nulla dovrebbe essere tradotto a questo punto; Tuttavia, si dovrebbe vedere una nuova voce di menu.

The new Server Information menu itemThe new Server Information menu itemThe new Server Information menu item

E quando si fa clic sulla voce, si dovrebbe vedere qualcosa come la schermata qui sopra. È vuota. Ma va bene cosi perché nella sezione successiva metteremo effettivamente alcune informazioni sullo schermo.

4. Aggiungere la schermata del Plugin

Il fatto che abbiato visto codice scritto in uno dei due modi (o forse entrambi ) e che si riferisca alla visualizzazione di un plugin, dipende dal fatto che avete lavorato su altri plugin o su Plugin WordPress.

  1. Tutto il codice HTML è hard-coded nel file PHP del plugin principale.
  2. Il codice HTML è incluso in un file esterno che ha incluso tramite il file PHP di base.

Io sono un fan di quest'ultimo perché credo  che aiuti a rendere il codice più gestibile. Così, ai fini di questo esempio, ci accingiamo a seguire questo approccio. A questo punto, create un secondo file nella directory del vostro plugin e chiamarlo tutsplus-i18n-ui.php.

The initial UI for the Tuts Internationalization PluginThe initial UI for the Tuts Internationalization PluginThe initial UI for the Tuts Internationalization Plugin

Successivamente, aggiungete il codice seguente al file. Ne discuteremo in dettaglio solo dopo aver avuto la possibilità di rivederlo.

1
<?php
2
/**

3
 * The user interface for the plugin.

4
 *

5
 * @link              http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676

6
 * @since             1.0.0

7
 * @package           TutsPlus_i18n

8
 */
9
10
?>
11
12
<div class="wrap">
13
14
    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
15
  <span class="description"><?php esc_html_e( 'Information about the environment in which WordPress is running.', 'tutsplus-i18n' ); ?></span>
16
17
	<table id="tutsplus-i18n-table">
18
		<thead>
19
			<tr>
20
				<th>
21
					<?php esc_html_e( 'Server Key', 'tutsplus-i18n' ); ?>
22
				</th>
23
				<th>
24
					<?php esc_html_e( 'Server Value', 'tutsplus-i18n' ); ?>
25
				</th>
26
			</tr>
27
		</thead>
28
		<tbody>
29
30
			<?php // This counter is used to determine even/odd rows for styles. ?>

31
			<?php $i = 0; ?>
32
33
			<?php foreach ( $_SERVER as $key => $val ) { // Input var okay. ?>

34
35
				<?php // Determine if we're on an odd or even row. ?>

36
				<?php $striped = ( $i % 2 ) ? 'even' : 'odd'; ?>
37
38
				<tr class="<?php echo esc_attr( $striped ); ?>">
39
					<th>
40
						<?php echo $key ; ?>
41
					</th>
42
					<td>
43
						<?php echo $val; ?>
44
					</td>
45
				</tr>
46
47
				<?php // Increase the counter by one. ?>

48
				<?php $i++; ?>
49
50
			<?php } ?>
51
		</tbody>
52
	</table>
53
54
</div>

Si noti qui che stiamo creando un elemento di tabella che consente di visualizzare tutte le chiavi e i valori presenti nell'insieme di PHP $_server.

Forse le cose più importanti da notare sono che stiamo usando esc_html_e() per le nostre funzioni di internazionalizzazione, e stiamo usando l'operatore modulo per aiutarci a fornire alcuni stili per lo schermo.

Diamo stile al Plugin

Tecnicamente, arrivati a questo punto il plugin funzionerà. Facciamo un passo avanti per assicurarci che lo schermo sia un pò più bello.

Innazitutto, create il file tutsplus-i18n.css nella direcotry principale del vostro plugin ed aggiungete il seguente codice:

1
#tutsplus-i18n-table {
2
3
    margin-top:    20px;
4
    border:        1px solid #ccc;
5
    padding:       10px;
6
7
}
8
9
#tutsplus-i18n-table thead th {
10
11
    font-size: 15px;
12
    height:    40px;
13
14
}
15
16
#tutsplus-i18n-table thead,
17
#tutsplus-i18n-table tbody {
18
    font-family: 'Monaco', 'Menlo', 'Courier New', Monospace;
19
}
20
21
#tutsplus-i18n-table tbody td {
22
23
    height: 30px;
24
    padding: 5px;
25
26
}
27
28
#tutsplus-i18n-table tbody tr.odd {
29
    background: #fff;
30
}

Successivamente, aggiungete la funzione al file del plugin che richiama correttamente questo file ma solo nella schermata che contiente le informazioni del Server:

1
<?php
2
3
add_action( 'admin_enqueue_scripts', 'tutsplus_i18n_dashboard_styles' );
4
/**

5
 * Add styles to the table displayed in the Server Info page available from the

6
 * Tools menu.

7
 */
8
function tutsplus_i18n_dashboard_styles() {
9
10
    // Only register the stylesheet if we're on the Server Information page.

11
    if ( 'tools_page_tutsplus-i18n-menu' !== get_current_screen()->id ) {
12
        return;
13
    }
14
15
    wp_enqueue_style(
16
        'tutsplus-i18n-css',
17
        plugin_dir_url( __FILE__ ) . '/tutsplus-i18n.css',
18
        array(),
19
        '1.0.0',
20
        'all'
21
    );
22
23
}

A questo punto, il plugin dovrebbe avere un display leggermente più bello.

The final UI of the plugin for this version of the tutorialThe final UI of the plugin for this version of the tutorialThe final UI of the plugin for this version of the tutorial

No, questo non è necessario, ma aiuta a rendere il plugin un po' più leggibile nel contesto di quello che stiamo facendo.

Programmazione Object-Oriented?

Per coloro che hanno seguito i miei corsi e miei tutorial, sapete che io preferisco scrivere il mio codice nella programmazione orientata agli oggetti, piuttosto che nella programmazione procedurale.

Quando si tratta di introdurre un nuovo concetto, cerco di rendere il focus di una lezione il più chiaro possibile. A tal fine, spesso trovo che utilizzare la programmazione procedurale per insegnare qualcosa come questa, crea meno confusione rispetto all'utilizzo della programmazione object-oriented.

Cioè, la programmazione object-oriented  presuppone una chiara comprensione di alcuni concetti che non è possibile fornire quando si passa attraverso questo codice di base. E se questo è il caso, allora non potrete concentrarvi sul materiale fondamentale di questo tutorial.

Così, gli argomenti primari che puntiamo a rivedere non hanno nulla a che fare con la programmazione orientata agli oggetti, ma in definitiva, con la comprensione di come internazionalizzare e localizzare un progetto di WordPress.

Conclusione

A questo punto, abbiamo un plugin funzionale che può essere scaricato, installato e gestito all'interno di un'installazione di WordPress. Anche se esso è internazionalizzato, non abbiamo alcun file di localizzazione per mostrare come funziona il processo. È possibile scaricare una copia del plugin dalla barra laterale di questa pagina.

NelTutotial seguente, daremo un occhiata a  come creare il nostro file di localizzazione e simulare un altro locale per testare le nostre traduzioni e vedremo anche quali strumenti potremo utilizzare.

Durante l'attesa per la prossima puntata, non dimenticate di vedere ciò che è disponibile nel mercato di Envato per aiutarvi a costruire la vostro crescente insieme di strumenti per WordPress come ad esempio il codice da studiare e diventare più esperti in WordPress.

Se siete interessati a saperne di più su WordPress da una prospettiva di sviluppo, tenete conto che io lavoro esclusivamente con WordPress e spesso scrivo su di esso. Potete vedere tutti i miei corsi e tutorial sulla mia pagina del profilo, e potete seguirmi sul mio blog e/o Twitter a @tommcfarlin dove parlo di sviluppo software nel contesto di WordPress.

Come al solito, non esitate a lasciare commenti o domande   sul feed per i commenti qui sotto.

Riferimenti

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.