Come configurare smartphone e PC. Portale informativo
  • casa
  • Windows 7, XP
  • Editor avanzato per WordPress – WP Smart Editor. Come migliorare le funzionalità dell'editor visivo di WordPress? Plug-in TinyMCE definitivo

Editor avanzato per WordPress – WP Smart Editor. Come migliorare le funzionalità dell'editor visivo di WordPress? Plug-in TinyMCE definitivo

Ho un piccolo set che può tranquillamente essere definito un “must have” per ogni blogger, cioè obbligatorio per l'uso. Se possibile, installo quasi lo stesso assieme su tutti i miei blog, il che rende il lavoro con il sistema più produttivo, funzionale e conveniente per i visitatori. Penso che in futuro troverete le recensioni di tutti sulle pagine di questo blog, di alcuni moduli ho già parlato, ma la maggior parte deve ancora arrivare. Oggi parleremo di avanzato editor di testo TinyMCE Advanced– la cosa è molto bella e pratica.

In generale, in un editor di testo, infatti, trascorri la maggior parte del tempo in Wordpress: pubblicando e formattando testo, aggiungendo tag, inserendo immagini, a volte devi posizionare tabelle, ecc. In generale, è molto importante avere a portata di mano uno strumento funzionale e di alta qualità. Per impostazione predefinita, WordPress ha il proprio editor, ma consiglierei comunque di installare TinyMCE Advanced. Ecco come appare in azione ora nell'area di amministrazione del blog WordPress Inside:

Come puoi vedere, qui ci sono icone più che sufficienti per tutti i tipi di azioni. Non lo confronterò con quello standard, dato che ho persino dimenticato come si presenta, ti parlerò solo di alcuni dettagli in TinyMCE Advanced. Sulla prima riga abbiamo i pulsanti:

  • formattazione (grassetto, corsivo, sottolineato, ecc.)
  • creando elenchi regolari e numerati, nonché rientri per il testo
  • allineando il testo ai bordi, al centro e alla larghezza dell'intera colonna
  • creazione ed eliminazione di collegamenti
  • inserendo un'immagine
  • modifica CSS
  • creazione di citazioni
  • inserendo separatori nella pagina successiva
  • abilitare il controllo ortografico, trovare una riga nel testo
  • abilitare la modalità a schermo intero, oltre a visualizzare una riga aggiuntiva di tasti funzione per l'editor di testo TinyMCE Advanced
  • l'ultimo pulsante è Inserisci.

La seconda riga non è meno importante e contiene anche una serie di funzioni interessanti:

  • scegliendo un carattere di testo e la formattazione del paragrafo
  • incolla testo, incolla da Word, rimuovi tutta la formattazione
  • aggiunta di un carattere arbitrario al testo e stampa
  • e sfondo, inserendo emoticon (per visualizzarle, è necessario selezionare la casella accanto all'opzione per convertire i caratteri di testo per le emoticon in immagini nelle impostazioni di amministrazione nel menu "Scrittura")
  • evidenziando il testo come apice e pedice
  • inserendo un file multimediale
  • annullare un'azione e riprenderla, modificare attributi e aiuto.

Questo, penso, sarà sufficiente per capire che l'editor TinyMCE Advanced è semplicemente super funzionale. A proposito, questa è solo una parte delle sue capacità, delle altre vi parlerò un po' più avanti.

Installazione e configurazione TinyMCE Advanced

È possibile scaricare l'editor di testo TinyMCE Advanced da . Va notato che per diverse versioni di WordPress (2.6, 2.7, 2.8+) è necessario utilizzare la propria distribuzione. Al momento in cui scrivo, l'ultima versione del plugin è la 3.2.7.

Installazione standard– dopo averlo scaricato, decomprimilo e caricalo sull’FTP del blog nella cartella wp-content/plugins. Successivamente, attiviamo TinyMCE Advanced dal pannello di amministrazione, dopodiché andiamo al menu "Opzioni" - "TinyMCE Advanced", dove è necessario configurarlo. Il passaggio finale è svuotare la cache del browser.

Prima di parlare della configurazione, qualche parola in più sulla funzionalità del modulo. Secondo la descrizione sul sito ufficiale, include ben 15 altri plugin: Advanced HR, Advanced Image, Advanced Link, Menu contestuale, Emozioni (Smilies), Data e ora, IESpell, Layer, Nonbreaking, Stampa, Cerca e sostituisci , Stile, Tabella, Caratteri visivi ed Extra XHTML. Tutto questo può essere ottenuto installando un solo TinyMCE Advanced! Oltre all'inglese, il plugin supporta anche altre localizzazioni (tedesco, francese, italiano, spagnolo, russo, ecc.). In generale, non ci sono dubbi sulle ampie capacità del modulo.

Configurazione di TinyMCE Advanced viene eseguito nel pannello di amministrazione del blog nella voce di menu con lo stesso nome. Il processo non è complicato, piuttosto interessante. Nella pagina vedrai 4 righe di un editor di testo in cui potrai posizionare vari tasti funzione:

Vedi quanta roba è ancora conservata lì? Dovrai approfondire tu stesso i dettagli, poiché tutti gli elementi sono etichettati e abbastanza chiari. Probabilmente evidenzierei un blocco separato con funzioni per lavorare con le tabelle: ti consentirà di crearle e modificarle rapidamente e facilmente nel testo. Puoi anche importare un file di stile CSS personalizzato nell'editor di TinyMCE Advanced: anche questo può tornare utile. In generale, come ho detto fin dall'inizio del post, il modulo è un must have!

Componenti aggiuntivi per TinyMCE Advanced

Ci sono un paio di articoli sul blog che parlano dell'espansione delle capacità del plugin:

  • utilizzando il modulo TinyMCE Color Grid e altro ancora. Questa soluzione crea un'ampia tavolozza di colori nell'editor e aggiunge un'altra utile funzionalità. Inoltre nell'articolo troverai un hack per Functions.php, che ti consente di sostituire i colori di base in TinyMCE Advanced con i tuoi.
  • — Sto valutando l'idea di installare nuovi caratteri personalizzati in TinyMCE Advanced, nonché di aggiungere caratteri Google tramite i normali stili CSS.

Penso che questi appunti ti saranno utili nel tuo lavoro. Se avete domande, fatele nei commenti.

In questo articolo parleremo di un interessante editor di pagine visive per WordPress. Il plug-in Page Builder Sandwich è progettato per la modifica semplificata della pagina. Il plugin è stato testato su un gran numero di template WordPress provenienti da diverse fonti e ha mostrato buoni risultati.

Page Builder Sandwich ti consente di apportare modifiche al design delle pagine del sito Web al volo. Il componente aggiuntivo può essere scaricato dal repository ufficiale di WordPress. Al momento in cui scrivo, il plugin è stato scaricato da più di 3.000 utenti. Questo componente aggiuntivo ha una valutazione di 4,4 su 5.

Diamo uno sguardo più da vicino alle capacità del plugin.

Editor di pagine visive Page Builder Sandwich

I vantaggi del plugin includono l'aggiunta semplificata di testo. Seleziona l'area desiderata e inizia a digitare. C'è anche la tecnologia drag and drop, una funzionalità preziosa che consente di spostare gli oggetti selezionati rispetto all'area di lavoro utilizzando il mouse. Non è necessario inserire i moduli tramite codice, selezionando le loro coordinate in modo casuale. Ciò riduce significativamente il tempo di funzionamento.

Il plugin ha la capacità di annullare le azioni. Se hai fatto qualcosa di sbagliato, usa semplicemente la combinazione di tasti ctrl+z e tornerai indietro di un passo.

Il plugin ti consente di posizionare rapidamente e facilmente i contenuti sulla pagina. Se devi pubblicare un video da , devi solo copiare il collegamento del video e incollarlo nell'area desiderata della pagina. Inoltre, l'editor visivo ha un'interfaccia semplice e intuitiva, quindi anche gli utenti inesperti possono capirlo.

Lavorare con il plugin Page Builder Sandwich

Dopo aver installato e attivato il plugin, vai alla voce “Utenti”, nella sottovoce “Il tuo profilo” nella console di WordPress, e seleziona la casella di controllo “Mostra barra degli strumenti durante la visualizzazione del sito”. Successivamente, quando visiti qualsiasi pagina del tuo sito tramite il front-end, noterai un pulsante dell'editor visivo in alto a destra. È grande e blu, quindi non puoi perdertelo. Quando premi il pulsante, si aprirà un editor che ti consentirà di modificare ciò che desideri al volo.

Un altro vantaggio di questo integratore è la possibilità di osservare immediatamente il risultato.

A sinistra c'è la barra degli strumenti. La versione gratuita ha un numero limitato di strumenti. Anche nella versione a pagamento è limitato, ma ce ne sono molti di più. Sul sito web ufficiale di WordPress puoi trovare materiale di formazione su come lavorare con il plugin.

Il plugin è stato rilasciato relativamente di recente ed è attualmente in fase di lavorazione. Forse in futuro gli sviluppatori offriranno molte funzionalità interessanti per facilitare il lavoro con l'editor visivo.

Puoi trovare informazioni su un altro editor per WordPress su .

Una volta stavo considerando un progetto interessante: un editor visivo per creare un modello WordPress direttamente dal pannello di amministrazione. Oggi vi parlerò di un prodotto simile, ma più funzionale e potente: . Questa è una versione separata dell'editor web desktop professionale Pinegrow, che viene utilizzato per creare siti Web con reattività, script, Bootstrap e altre funzionalità. Quindi Pinegrow WP è un componente aggiuntivo speciale che ti consente di creare modelli WordPress.

Caratteristiche principali di Pinegrow WP:

  • Conversione di layout HTML statici in temi WordPress: seleziona determinati elementi del modello e seleziona i parametri appropriati per essi.
  • Creazione di modelli WP da zero utilizzando un editor visivo: basta aggiungere gli elementi necessari alla pagina (barra laterale, elenco di post, ecc.)
  • Supporto per 175 tag WordPress: consente di trovare rapidamente i valori richiesti per gli elementi del layout HTML (titolo del post, data, nome dell'autore).
  • Supporto per plugin e funzioni PHP: puoi selezionare non solo i tag WordPress come parametri dell'elemento, ma anche impostare variabili e aggiungere funzioni PHP.
  • La visualizzazione in tempo reale del tema WordPress in fase di creazione ti consente di vedere cosa succede dopo le tue impostazioni.
  • Visualizza il codice PHP generato per il layout.

Inoltre, puoi lavorare direttamente con il contenuto del tuo sito WordPress importando le immagini in Pinegrow WP. L'output che ricevi è puro codice PHP/HTML; il servizio non aggiunge elementi non necessari al layout di base.

Ecco un breve video di come funziona Pinegrow WP:

Puoi testare tu stesso questo software. Per fare ciò, scarica il programma dal sito ufficiale (esistono versioni per Windows, Mac e Linux). Dopo l'installazione, richiedi una chiave di licenza temporanea gratuita (per 7 giorni). Inserisci la password che arriva nella tua email e sarai loggato nel sistema.

Nelle impostazioni (icona a forma di ingranaggio) Framework & Plugin Manager per index.html, seleziona WordPress, quindi carica un modello HTML. Successivamente, fai clic su determinati elementi del layout e seleziona per essi le corrispondenti funzioni WordPress. Ad esempio: per un'immagine - the_post_thumbnail, per un titolo - the_title, per una data - the_date, ecc. Cioè, l'utente non ha bisogno di sapere esattamente come impostare questo o quell'elemento in WordPress, basta cercarlo tra le funzioni disponibili e aggiungerlo al layout. Impostando tutti i blocchi sulla pagina sul valore appropriato, alla fine otterrai un modello WordPress funzionante per l'esportazione. L'algoritmo è più o meno questo, anche se dovrai comprendere più in dettaglio il programma Pinegrow WP (ci sono molte funzioni e impostazioni diverse).

Nel complesso, Pinegrow WP è molto potente, ma non gratuito. Una licenza personale (per 3 computer) costa $99. Puoi usarlo per tutti i progetti che vuoi! Esistono licenze per aziende e team di sviluppo. In linea di principio, è per questi scopi che è necessario il programma: se tu o la tua azienda create professionalmente siti Web (incluso WordPress), allora questo software tornerà utile.

Una piccola persona può fare molto.

Ciao colleghi!

Ci sono due modi:

1. Installa il plug-in
2. Installazione del codice nel file Functions.php.

Se non hai una conoscenza approfondita di php, codici html e stili CSS, è meglio utilizzare un plug-in già pronto per espandere le capacità dell'editor WordPress.

Estendere le capacità dell'editor WordPress con un plugin

Plug-in TinyMCE definitivo

Utilizzo il plugin Ultimate TinyMCE ormai da circa quattro anni, anche se ha meno download rispetto ad altri simili.

Non mi dà fastidio che non sia stato aggiornato da più di due anni. Funziona alla grande e non entra in conflitto con gli altri.
Mi è piaciuto perché aveva un'opzione che ti permetteva di inserire testo su uno sfondo di colore diverso. Ma WordPress ha chiesto al proprietario del plugin di rimuovere questa funzionalità.

Il plugin è facile da configurare e non richiede molta conoscenza. Spero che tu sappia come installare un nuovo plugin dal pannello di controllo di WordPress.

Configurazione del plugin Ultimate TinyMCE

Dopo aver attivato il plugin, sul lato sinistro della console, trova la scheda "Impostazioni" e fai clic su "Ultimate TinyMCE".

Si aprirà una lunga pagina con vari pulsanti che ti aiuteranno ad espandere le capacità dell'editor di WordPress. Lo screenshot mostra solo una parte della pagina.

Aggiungi le funzionalità di cui hai bisogno all'editor visivo integrato di WordPress e non dimenticare di salvare le modifiche.

Non ho mostrato l'intera pagina, dai un'occhiata tu stesso. La cosa principale è effettuare le impostazioni correttamente. Nella colonna "Abilita", seleziona la casella accanto all'opzione desiderata e nella colonna "Selezione riga", specifica la riga dell'editor. L'editor visivo di WordPress può avere solo quattro righe.

Sperimenta e scegli la posizione delle funzionalità aggiunte di WordPress più conveniente per te.

Se l'editor integrato predefinito assomiglia a questo:

Quindi, dopo aver ampliato le funzionalità dell'editor di WordPress, avrà un aspetto diverso:

Piccolo plugin MCE Advanced

Questo plugin è simile al precedente, con l'unica differenza che ha più installazioni e aggiornamenti costanti.

Puoi installarlo dal pannello di amministrazione del sito nella scheda “Plugin” ==> “Aggiungi nuovo”.

Attiva il plugin installato e nella scheda “Impostazioni” ==> “TinyMCE Avanzate”, vai alle impostazioni dell'editor di WordPress.

(Clicca sulle immagini per ingrandirle.)

Tutte le impostazioni sono in russo. Decidi tu stesso se abilitare o meno il menu dell'editor, quindi seleziona le opzioni che ti servono e inseriscile nell'editor. Contiene anche quattro righe. Salva le modifiche e dai un'occhiata ai miglioramenti dell'editor di WordPress.

Nikolai Ivanov era con te.

SCRIVI LE TUE DOMANDE NEI COMMENTI

I migliori articoli sull'argomento