Dopo alcuni anni (o addirittura mesi) di progettazione e sviluppo di temi WordPress, in particolare per i clienti, si inizia a rendersi conto che molte funzionalità possono essere standardizzate o distillate in un "tema o kit di partenza". Questo aiuta ad avviare il processo di sviluppo e ad avanzare rapidamente.
Il miglior primo passo in questo, ho trovato, è quello di inchiodare la maggior parte delle funzioni comuni e includerle nel functions.php . Questo functions.php il file dovrà essere esteso per soddisfare le esigenze del particolare tema man mano che nascono nuovi progetti, ma fornirà un punto di partenza più che eccezionale per lo sviluppo.
Ci sono circa 13 funzioni chiave con cui mi piace iniziare e le aggiungerò se necessario ...
La funzionalità del menu di navigazione, introdotta in WordPress 3.0, consente di creare e mantenere in modo intuitivo i menu di navigazione nei temi.
Per lo meno, un tema standard avrà bisogno di un menu di navigazione principale, magari nell'intestazione e un menu di navigazione secondario nel piè di pagina. Per fare questo, registreremo questi due menu "Menu principale" e "Menu secondario"
Anche se questa non è una caratteristica particolarmente nuova, è comunque piacevole da racchiudere in un if function_exists() nel caso in cui l'utente sia bloccato in un'installazione pre 3.0:
Nel functions.php file, includere quanto segue:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Ora che i menu sono registrati, dobbiamo dire al tema dove esportarli. Vorremmo che il menu principale appaia nella nostra intestazione. Quindi, nel nostro header.php file, includiamo il seguente codice:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Per prima cosa, controlliamo se abbiamo un menu chiamato 'main_menu' definito e se lo facciamo, inseriamo qui il suo contenuto, altrimenti ricadere al default wp_list_pages() che possiamo ulteriormente personalizzare per visualizzare i link di cui abbiamo bisogno.
Se desideri personalizzare ulteriormente il menu, guarda il Pagina del codice WordPress su wp_nav_menu() funzione.
Vogliamo che il menu secondario appaia nel footer, quindi apriamo il footer.php e includi il seguente codice:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Questa funzione consente di utilizzare CSS personalizzati per lo stile dell'editor visuale TinyMCE di WordPress.
Crea un file CSS chiamato editor-style.css e incolla i tuoi stili all'interno. Come segnaposto, mi piace iniziare con gli stili nel editor-style.css file del tema Twenty Twelve.
Nel functions.php aggiungere il seguente:
add_editor_style();Se non si desidera utilizzare il nome "stile editor" per il file CSS e si desidera spostare il file altrove, ad esempio all'interno di una directory css, quindi modificare la funzione.
Ad esempio, voglio dare un nome al mio file tiny-mce-styles.css e lo voglio nella mia directory CSS; quindi la mia funzione sarà simile a questa:
add_editor_style('/css/editor-style.css'); Mentre ci siamo, potremmo anche definire l'editor per le lingue da destra a sinistra. Nella directory del tema, creare un file CSS chiamato editor-style-rtl.css e, per lo meno, includere quanto segue:
html .mceContentBody {direction: rtl;unicode-bidi: embed;}li {margin: 0 24px 0 0;margin: 0 1.714285714rem 0 0;}dl {margin: 0 24px;margin: 0 1.714285714rem;}tr th {text-align: right;}td {padding: 6px 0 6px 10px;text-align: right;}.wp-caption {text-align: right;}Ancora una volta, come segnaposto, gli stili di cui sopra sono tratti dal tema Twenty Twelve. Riavviare ed estendere secondo necessità.
La maggior parte delle persone che commentano i blog online hanno un avatar associato. Se, tuttavia, non lo fanno e non ti piacciono particolarmente le opzioni di avatar predefinite di WordPress, puoi definirne le tue.
Per fare ciò, includi il seguente codice nel tuo functions.php :
if ( !function_exists('cake_addgravatar') ) {function cake_addgravatar( $avatar_defaults ) {$myavatar = get_template_directory_uri() . '/images/avatar.png';$avatar_defaults[$myavatar] = 'avatar';return $avatar_defaults;} add_filter ('avatar_defaults', 'cake_addgravatar');} Quello che stiamo facendo qui prima è controllare se la funzione esiste. Se lo fa, aggiungiamo un filtro che dice a WordPress di usare il nostro avatar definito dall'utente come predefinito.
Stiamo dicendo a WordPress di trovare questo avatar nella nostra directory "images" all'interno della directory dei temi. Il prossimo passo, ovviamente, è creare l'immagine stessa e caricarla nella cartella "images".
La funzione di formattazione dei post ti consente di personalizzare lo stile e la presentazione dei post. Al momento della stesura di questo articolo, ci sono 9 formati di post standardizzati che gli utenti possono scegliere tra: galleria, link, immagine, preventivo, stato, video, audio e chat. Oltre a questi, il formato predefinito "Standard" indica che non è stato specificato alcun formato per il post in questione.
Per aggiungere questa funzionalità al tuo tema, includi il seguente codice nel tuo functions.php , specificando i formati di post di cui trarrai vantaggio. Ad esempio, se desideri solo il post, l'immagine, il link, il preventivo e lo stato Post Formats, il tuo codice dovrebbe apparire come questo:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );La funzione immagine in primo piano, come il codice spiega, consente all'autore di scegliere un'immagine rappresentativa per post, pagine o tipi di messaggi personalizzati.
Per abilitare questa funzionalità, includi il seguente codice nel tuo functions.php :
add_theme_support( 'post-thumbnails' );Potremmo fermarci lì e lasciarlo a WordPress per definire le dimensioni delle miniature o potremmo prendere il controllo e definirle da soli. Faremo quest'ultimo, ovviamente!
Diciamo che stiamo gestendo un sito di riviste in cui l'immagine in primo piano apparirà in almeno 3 diverse dimensioni. Forse un'immagine grande se il post è in primo piano o è la più recente, un'immagine di dimensioni medie se è solo un post tra il resto e una dimensione normale forse per apparire altrove.
Approfittiamo del add_image_size() funzione che istruisce WordPress per fare una copia della nostra immagine in evidenza nelle nostre dimensioni definite.
Per fare ciò, aggiungiamo quanto segue al functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); Guarda come lavorare con add_image_size() funzione per il ritaglio morbido o per ritagliare le immagini su Pagina del codice WordPress.
Una volta che abbiamo definito le dimensioni di immagine sopra (normale, medio e grande) e poiché WordPress non lo fa per default, aggiungeremo la possibilità di selezionare le nostre dimensioni dell'immagine dall'interfaccia Impostazioni visualizzazione allegato .
Sarebbe bello se tu potessi, quando scrivi un post, inserire l'immagine della dimensione desiderata selezionandola dal menu a discesa come faresti normalmente per le dimensioni predefinite di WordPress.
Per fare ciò, aggiungiamo quanto segue al nostro functions.php :
// show custom image sizes on when inserting mediafunction cake_show_image_sizes($sizes) {$sizes['regular'] = __( 'Our Regular Size', 'cake' );$sizes['medium'] = __( 'Our Medium Size', 'cake' );$sizes['large'] = __( 'Our Large Size', 'cake' );return $sizes;} add_filter ('image_size_names_choose', 'cake_show_image_sizes'); Con quello sul posto, possiamo selezionare le nostre dimensioni di immagine.
Questo è semplice. Se hai creato temi WordPress per un po ', ti ricorderai dei giorni in cui dovevi includere manualmente il codice per generare il feed RSS direttamente nell'header.php. Questo approccio è più pulito e si basa sul wp_head() gancio di azione per emettere il codice necessario.
Nel functions.php file, includere quanto segue:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Assicurati di averlo it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Con questa funzione fai il primo passo verso la messa a disposizione del tuo tema per la traduzione.
È meglio chiamare questa funzione dall'interno del after_setup_theme() gancio di azione cioè dopo l'esecuzione delle azioni di configurazione, registrazione e inizializzazione del tema.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Ora aggiungi una directory chiamata ' languages 'nella tua directory dei temi.
Puoi saperne di più sulla funzione load_theme_textdomain () su Pagina del codice WordPress .
La larghezza del contenuto è una funzione nei temi che consente di impostare la larghezza massima consentita per video, immagini e altri contenuti oMed in un tema.
Ciò significa che quando incolli l'URL di YouTube nell'editor e WordPress visualizza automaticamente il video effettivo sul front-end, il video non supererà la larghezza impostata utilizzando il $content_width variabile.
if ( ! isset( $content_width ) )$content_width = 600;WordPress consiglia inoltre l'aggiunta del seguente CSS:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Mentre questo è utile, è un po 'pesante. Definisce la larghezza del contenuto per tutto il contenuto. Che cosa succede se desideri avere video di larghezza maggiore sulle pagine rispetto ai post e una dimensione ancora più grande in un tipo di post personalizzato? Attualmente, non c'è modo di definire questo. C'è comunque un richiesta di funzionalità proponendo l'inclusione del $content_width variabile nel built-in add_theme_support() .
Il tuo tema tipico avrà almeno una barra laterale. Il codice per definire la barra laterale è piuttosto semplice.
Aggiungi il seguente al tuo functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Questo registra e definisce una barra laterale denominata "Barra laterale principale" e il relativo markup HTML.
Puoi saperne di più su register_sidebar() funzione sulla pagina del codice WordPress.
Normalmente troverai la necessità di avere più di una barra laterale in modo da poter semplicemente copiare / incollare il codice sopra e cambiare il nome.
C'è anche un register_sidebars() funzione che ti permetterà di registrare e definire più barre laterali tutte in una volta ma non ti dà la flessibilità di dare a ogni nuova barra laterale un nome univoco.
Se stai visualizzando estratti dei tuoi post su una pagina indice del blog, per impostazione predefinita verrà mostrato WordPress [...] per indicare che c'è di più "dopo il salto".
Molto probabilmente vorrai aggiungere un "altro link" e definire come appare.
Per fare ciò abbiamo bisogno di aggiungere il seguente codice al nostro functions.php :
function new_excerpt_more($more) {global $post;return '...
function cake_content_nav( $nav_id ) {global $wp_query;if ( $wp_query->max_num_pages > 1 ) : ?>Se hai delle istruzioni speciali nel tuo tema, ad es. nella pagina delle opzioni del tema che desideri visualizzare all'utente quando attiva per la prima volta il tema, puoi utilizzare la seguente funzione per reindirizzare lì:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Prestare particolare attenzione al wp_redirect() funzione. Assicurati di sostituire il ' themes.php?page=themeoptions 'con l'URL della tua pagina.
Durante lo sviluppo, a volte trovo la barra di amministrazione (strumento) di WordPress abbastanza distraente.
È in una posizione fissa nella parte superiore della finestra e, a seconda del mio layout, può coprire alcuni elementi dell'intestazione.
Mentre sto ancora progettando e sviluppando, mi piace nascondere la barra di amministrazione con questa pratica funzione.
show_admin_bar( false );Avete alcune funzioni preferite per l'avvio di uno sviluppo di template WordPress? Quali funzioni vorresti vedere? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine multi-strumento via Shutterstock.