Share
Il rilascio di un tema WordPress su un mercato, come ThemeForest, in cui il pubblico è così vasto e diversificato, ha alcune sfide. Non è possibile testare una soluzione direttamente con il cliente. È necessario pianificare in anticipo per tutti i casi limite e assicurarsi che il tema sia il più possibile personalizzabile. Se sei inesperto, è probabile che alcune cose sfortunatamente scivolino tra le fessure. Fortunatamente per te, abbiamo attinto alla nostra saggezza conquistata per aiutarti a evitare di ripetere gli stessi errori che abbiamo commesso.
WordPress ha la possibilità di creare un post protetto da password: i visitatori dovrebbero essere in grado di accedere a questo tipo di contenuto solo dopo aver digitato la password. Non è necessario fare nulla di speciale riguardo al post stesso, ma se si dimentica di controllare prima di visualizzare i commenti, i visitatori vedranno comunque tutti i commenti sul post protetto, che sconfigge in qualche modo lo scopo di proteggere il post in primo luogo. Puoi rimediare a questo con un semplice check in comments.php:
C'è un file modello speciale, attachment.php, che viene utilizzato quando un visitatore fa clic su un allegato. Gli allegati possono essere immagini, video, file musicali ... qualunque cosa sia inserita con i pulsanti allegati sull'editor:
Creazione attachment.php non è obbligatorio: se il modello non è presente, il browser visualizza semplicemente il file, con un plug-in appropriato, se necessario. Direi che il vantaggio principale di attachment.php è che quando il visitatore decide di vedere, ad esempio, un'immagine a grandezza naturale, la navigazione del sito rimane accessibile. È inoltre possibile visualizzare alcune informazioni personalizzate sull'allegato. Il tema TwentyTen predefinito in WordPress 3.0 ha un aspetto interessante attachment.php che visualizza le dimensioni dell'immagine.
Accentsconagua
if (wp_attachment_is_image ()) echo ' | '; $ metadata = wp_get_attachment_metadata (); printf (__ ('Dimensione intera è% s pixels', 'twentyten'), sprintf ('% 3 $ s ×% 4 $ s', wp_get_attachment_url (), esc_attr (__ ('Link all'immagine a dimensione intera', ' twentyten ')), $ metadata [' width '], $ metadata [' height '])); Potresti aver sentito parlare di lingue da destra a sinistra, ma a meno che tu non sia esperto in una di quelle lingue, potresti immaginare che è tutto molto complicato.
L'introduzione del supporto nel tuo tema per le lingue scritte da destra a sinistra, come l'arabo e l'ebraico, è in realtà abbastanza semplice. Gli stili in rtl.css annullerà quelli nel principale style.css quando la variabile WP_LANG in settings.php è impostato su una lingua da destra a sinistra, ad esempio, in arabo:
define ('WP_LANG', 'ar') Il tuo rtl.css prima necessita di questa dichiarazione:
corpo direzione: rtl; unicode-bidi: embed;
La prima proprietà è auto-esplicativa. Il secondo "apre un ulteriore livello di incorporamento rispetto all'algoritmo bidirezionale" (W3C).
Il rtl.css il file non ha bisogno di duplicare ogni stile in style.css, solo le cose che devono cambiare quando si legge da sinistra a destra. Pensa come se il sito fosse visto in uno specchio: i float cambiano direzione (float: left diventa float: right, e viceversa) e margini e padding sono invertiti (margin-right: 18px diventa margin-left: 18px; margin-right: 0). Pensa anche a grandi sezioni del sito: in quale direzione verrà spostata l'intestazione? Non dimenticare tutti i piccoli dettagli, ad esempio invertendo i rientri dei tuoi elenchi di definizioni e blockquotes. Per avere un'idea, puoi provare a cambiare lingua in arabo o in ebraico su siti come Facebook o Wikipedia, o visitare siti internazionali come Al Jazeera.
Che ci crediate o no, questo è tutto quello che c'è da sapere.
Per progettare l'editor TinyMCE fornito con WordPress, è sufficiente creare un file denominato redattore style.css nella tua directory dei temi. È molto facile da riempire, poiché è sufficiente abbinare la tipografia con quella del foglio di stile principale e non è necessario preoccuparsi del layout dei blocchi. TinyMCE ha alcune stranezze però. Puoi evitare che le linee siano troppo lunghe impostando una proprietà di larghezza massima nella classe .mceContentBody.
Se si include il supporto per le lingue con scrittura da destra a sinistra tramite rtl.css, dovresti anche aggiungere un file chiamato Editor-style-rtl.css, poiché alcune proprietà, come i margini e i paddings dell'elenco, devono essere modificati nell'editor.
Voci impaginate (da non confondere con una impaginazione elenco di voci) sono separati in pagine dal loro autore con il Quicktag. Certo, questa funzione non sembra essere molto utilizzata nella maggior parte dei siti WordPress, ma se dimentichi di fare la tua parte, i visitatori non potranno leggere oltre la prima pagina. Per consentire la lettura dell'intero contenuto, è necessario utilizzare il tag wp_link_pages all'interno di The Loop
wp_link_pages (array ('before' => 'pagine: ',' dopo '=>'
',' next_or_number '=>' numero ')); Per un post con tre pagine, viene visualizzato quanto segue:
pagine: 1 2 3
I visitatori possono quindi fare clic sui numeri di pagina per leggere l'intero post. La documentazione completa per questa funzione è disponibile sul codice WordPress.
Anche se non è possibile definire tutti i possibili widget sotto il sole, è una buona idea controllare che tutti i widget forniti con WordPress siano visualizzati in modo convincente. Tutti loro possono ricevere un titolo opzionale e alcuni hanno aspetti diversi. Ad esempio, il Categoria il widget può essere visualizzato come un menu a discesa e può inoltre visualizzare più livelli di categorie o tag nidificati, quindi assicurati di definire gli elenchi annidati. Presta particolare attenzione al calendario. È un tavolo, e generalmente vuoi che i giorni siano centrati nelle loro celle, in modo che si allineino con i giorni della settimana nell'intestazione. Nella prima immagine, i numeri appaiono leggermente fuori posto, mentre sono allineati correttamente sulla seconda immagine.
Infine, ti aiuterà se inizi a inventare stili buoni per il .widget di classe, in quanto verrà applicata a tutti i widget, anche a quelli provenienti da terze parti. In particolare, con i layout flessibili, assicurati che i tuoi widget non si stirino eccessivamente, poiché ciò li rende davvero strani.
I commenti sono un po 'un enigma di progettazione. C'è un sacco di cose da mostrare (avatar, nomi dei commentatori, date dei commenti, corpo dei commenti, pulsanti di risposta), quindi è necessario dargli un po 'di spazio, ma, allo stesso tempo, non dovrebbe travolgere il contenuto principale e dovrebbe essere visivamente distinto in qualche modo. I commenti in thread combinano tutte queste difficoltà, perché devi anche distinguere le risposte. Generalmente, questo è ottenuto con un margine, ma dato che non puoi sapere quanti livelli di risposte ci saranno, rischi sempre di non consentire una larghezza sufficiente o di consentire troppe.
Inoltre, tieni presente che il modulo di risposta non verrà visualizzato solo nella parte inferiore della pagina, ma anche nel mezzo del thread del commento quando qualcuno fa clic sul pulsante di risposta. Quindi i margini e l'imbottitura dovrebbero essere adeguati per entrambi i casi. C'è anche il link 'cancella risposta' che deve essere abbinato e posizionato.
Infine, dovresti assicurarti che l'impaginazione dei commenti funzioni, che i commenti vengano visualizzati correttamente, sia quando ce ne sono pochissimi, sia quando ce ne sono molti, e che i commenti filettati non eccedano i limiti del loro contenitore. Fai attenzione a non schiacciare i commenti insieme e non dimenticare di controllare il layout per quando gli avatar sono abilitati e disabilitati.
wp_footer () e wp_head () Chiamata wp_footer () appena prima di chiudere il tag del corpo, e wp_head () poco prima del tag head di chiusura. Entrambe le funzioni sono hook di azione, che possono essere utilizzate dagli sviluppatori di plugin e temi. Se li lasci fuori, alcune funzionalità e plug-in potrebbero non funzionare, comprese le intestazioni personalizzate.
Sebbene molti temi facciano ancora affidamento sui plugin, come TimThumb, WordPress, a partire dal 2.9, include il supporto per le miniature ("immagini in primo piano") fuori dalla scatola. Per sfruttare questa funzionalità, aggiungi solo alcune linee functions.php:
add_theme_support ('post-thumbnails'); set_post_thumbnail_size (70, 70); La prima riga indica a WordPress che il tema supporta le miniature, mentre il secondo forza le dimensioni della miniatura a 70x70 px, per evitare di rompere il layout con miniature di dimensioni diverse. Inoltre, è possibile scegliere il criterio di ridimensionamento. L'esempio sopra ridimensionerà l'immagine, mentre
set_post_thumbnail_size (70, 70, TRUE);
ritaglierà anche l'immagine per adattarla al rapporto dato. È inoltre possibile rendere disponibili miniature aggiuntive, per utilizzarle in diverse aree del sito:
add_image_size ('big-thumb', 500, 500); Adesso,
the_post_thumbnail ();
visualizza una miniatura 70x70 e
the_post_thumbnail ('big-thumb'); visualizza una miniatura 500x500.
WordPress 3.0 ha introdotto i menu personalizzati tanto attesi, quindi è giunto il momento di sfruttare i vantaggi di questa funzione. Dopo aver registrato il supporto per i temi, in questo modo:
register_nav_menu ('main_nav', __ ('Menu di navigazione principale', 'mytheme')); ... puoi visualizzare un menu personalizzato con wp_nav_menu ():
wp_nav_menu (array ('theme_location' => 'main_nav')); Fai attenzione, poiché il sistema ti consente di inserire elementi nidificati, il che può portare a strani risultati se non li pianifichi.
Anche se fornisci menu a discesa o menu stile di navigazione, è difficile visualizzare in modo elegante più di tanti livelli di navigazione. Per proteggere il tuo layout, puoi decidere un livello al di sotto del quale tutti gli elementi mostreranno lo stesso, o disabilitare la visualizzazione di livelli più bassi. Ad esempio, per limitare la visualizzazione a due livelli, utilizzare:
wp_nav_menu (array ('depth' => 2)); Questa è una nuova funzionalità di WordPress 3.0 ed è anche la più semplice da implementare. È letteralmente una riga:
add_custom_background ();
Questo è tutto! Gli utenti possono ora scegliere qualsiasi sfondo personalizzato che desiderano:
Nello stesso spirito, ma con un piccolo sforzo in più, puoi consentire di modificare lo sfondo dell'intestazione del sito e anche il colore del titolo del sito. Questa funzione non funzionerà a meno che non inizi a definire un gruppo di costanti. Sostituisci 'yourwidth' e 'yourheight' con qualsiasi misura adatta al tuo tema:
define ('HEADER_TEXTCOLOR', '000'); define ('HEADER_IMAGE', get_bloginfo ('stylesheet_directory'). 'path / to / your / image'); define ('HEADER_IMAGE_WIDTH', 'yourwidth'); define ('HEADER_IMAGE_HEIGHT', 'yourheight'); Una volta che questo è a posto, è necessario scrivere la funzione che applicherà lo sfondo alla tua intestazione. Poiché non esiste un markup standard per l'intestazione di un sito, WordPress non può indovinare come applicare il CSS richiesto per te. Ad esempio, per aggiungere uno sfondo personalizzato al div con l'id 'header', fai questo:
È inoltre necessario creare una funzione, ad esempio mytheme_admin_preview_header (), per assegnare uno stile al riquadro di anteprima nell'admin per far corrispondere il risultato finale. L'area di anteprima ha l'ID #headimg, mentre il titolo del sito e la descrizione del sito hanno id #name e #desc. Sperimenta con l'anteprima finché non sei soddisfatto. Infine, per abilitare il Aspetto> Intestazione pannello, chiama:
add_custom_image_header ('mytheme_header_image', 'mytheme_admin_preview_header'); Non tutti desiderano che il loro blog venga visualizzato in inglese. Avvolgi ogni stringa che gli utenti devono leggere con __ () se vuoi tradurlo, o _e () se vuoi anche farlo eco, come:
__ ('Hello', 'mytheme') _e ('Hello', 'mytheme') // Stampa anche la stringa tradotta. Il secondo argomento dovrebbe essere un identificatore univoco per il tuo tema, in modo che le diverse traduzioni non siano in conflitto.
Dopo che ogni stringa è stata avvolta in una funzione di traduzione, è necessario utilizzare il makepot.php script. Il modo consigliato per ottenere questo script è installare Subversion, quindi eseguire:
svn co http://svn.automattic.com/WordPress-i18n/tools/trunk
Otterrai una directory, chiamata 'trunk' contenente, tra gli altri, makepot.php.
Lo script è eseguito in questo modo
php makepot.php wp-theme mytheme
MyTheme è il percorso della directory dei temi. Otterrai un file chiamato mytheme.pot, che è pronto per essere utilizzato in un programma, come Poedit per produrre un .Po file contenente una traduzione.
Per finire, devi dire a WordPress dove le traduzioni vivono nella tua directory dei temi, ad esempio:
load_theme_textdomain ('mytheme', TEMPLATEPATH. '/ languages'); Qui, 'mytheme' è l'identificatore univoco per il tuo tema; il secondo argomento indica dove sono i file di traduzione. TEMPLATEPATH è una costante speciale definita da WordPress che punta sempre alla directory del tema corrente.
Questo è un po 'facoltativo, poiché potresti volerlo lasciare alla discrezione degli utenti o di altri sviluppatori. Saprai che WordPress supporta l'aggiunta di campi personalizzati su ogni post. In molti temi, questi campi di solito non vengono visualizzati affatto, a meno che non vengano utilizzati per una funzione speciale. Alcuni utenti potrebbero essere confusi, perché ritengono di poter utilizzare i campi personalizzati per produrre tutte le informazioni che desiderano.
C'è una funzione,
the_meta ()
per essere chiamato in The Loop, che visualizza tutti i campi personalizzati collegati a un post, come elenco non ordinato in chiave: modulo valore. Certo, non è terribilmente utile, ma potrebbe essere meglio che lasciare qualcuno a chiedersi perché i campi personalizzati non vengano visualizzati da nessuna parte.
Una delle difficoltà nel progettare un sistema dinamico, come WordPress, è che ci sono molti casi limite che non si verificano troppo spesso, ma che possono comunque rovinare l'aspetto del sito quando lo fanno. Pensa a post con commenti chiusi o con corpi molto corti. Assicurati che non vi siano strani spazi all'interno, o che gli elementi non vengano schiacciati insieme perché qualcosa non viene visualizzato. La sezione dei commenti potrebbe non essere visualizzata se i commenti non sono consentiti, oppure un campo di inserimento della password potrebbe sostituire il solito contenuto del post quando il post è protetto da password.
Inoltre, cerca di abbinare il modo in cui i commenti sono in stile con il corpo principale. Questo ultimo punto richiede un'attenzione particolare, perché, in generale, lo spazio è più limitato nell'area dei commenti, specialmente quando si utilizzano i commenti filettati e ogni risposta viene spostata a destra (o a sinistra, per RTL).
WordPress.org offre un file di esempio che puoi importare nell'installazione di WordPress, che contiene un assortimento di post di test, pagine e immagini.
Per importare il file in WordPress 3.0, è necessario prima installare il plug-in di importazione di WordPress. Quindi, scegli Strumenti> Importa> WordPress. Quando richiesto, assicurati di spuntare la casella "Scarica e importa allegati dei file". Altrimenti, non otterrai le immagini associate ad alcuni post di esempio.
Al termine dell'importazione, è possibile utilizzare questo elenco di controllo per determinare se il contenuto viene visualizzato come dovrebbe.
Abbiamo imparato che le cose a cui prestare attenzione vengono in molte varietà. Alcune sono le funzionalità utilizzate raramente, altre sono opportunità di personalizzazione, mentre altre sono più simili ai problemi di progettazione comuni, che si ripeteranno con qualsiasi sito WordPress progettato. La nostra lista è certamente tutt'altro che esauriente, quindi vogliamo sentirti nei commenti! Quali pensi siano le funzionalità più spesso dimenticate?
