Share
In questa serie da sei a principianti a master, utilizzeremo le funzionalità avanzate di WordPress per creare il nostro portfolio e blog, completo di una pagina di opzioni, più stili e supporto per le nuove funzionalità di WordPress 2.7. Oggi legheremo tutto insieme.
Nella parte finale di WordPress Week, stiamo creando un widget personalizzato di base prima di concludere dando Innovazione un po 'di chirurgia plastica con una combinazione di colori alternativa.
Ci sono ancora diversi elementi di testo che non abbiamo ancora disegnato e quindi non sembrano giusti, come le didascalie delle immagini, blockquote, pre, codice e indirizzo.
Aggiungi il seguente a style.css:
p.wp-caption-text font-size: 0.8em; stile di carattere: corsivo; blockquote font-size: 0.9em; margine: 15px 0 15px 15px; imbottitura: 0 15px; pre font-family: "Courier New", Courier, monospace; font-size: 0.9em; margine: 10px 0 20px 0; code background-color: #efefef; colore: # 000; font-family: "Courier New", Courier, monospace; dimensione carattere: 1em; margine: 0 3px; padding: 0 3px; address font-size: 0.9em; famiglia di font: Georgia, "Times New Roman", Times, serif; line-height: 1.5em; margin-bottom: 15px;
E questo dentro deepblue.css:
p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed;
Creeremo un widget (sotto) che visualizzerà i cinque post del blog più recenti - con la prima immagine con il quale è stato ridimensionato il post e utilizzato come immagine di anteprima.
È progettato per essere utilizzato nell'area dei widget della home page.
Il widget è essenzialmente un ciclo personalizzato di WordPress chiamato da una funzione che lo trasforma in un widget.
Dentro il / Inc / cartella crea un file chiamato bloglist-widget.php e avviarlo con il seguente:
Dal blog
L'intero ciclo viene avvolto in una nuova funzione recentblogposts () (puoi chiamarlo come preferisci). Nelle prossime due righe registriamo due oggetti come "globali" - questo ci permette di accedere al database di WordPress ($ wpdb) e post ($ postale) classi all'interno del widget. Di seguito includiamo il var.php file.
Il prossimo:
Un normale ciclo personalizzato, con la categoria portfolio esclusa, limitata a cinque post e caller_get_posts = 1 è un nuovo parametro in WP 2.7 che imposta il loop per ignorare i vecchi post "Stickied".
Ora diventa interessante:
Accentsconagua
post. "WHERE post_parent = '". $ post-> ID. "'AND post_type =' attachment 'ORDER BY' post_date 'ASC LIMIT 0,1"; $ post_attachments = $ wpdb-> get_results ("$ queryattach"); if ($ post_attachments) $ image = $ post_attachments [0] -> guid; ?> Il codice sopra cerca nel database per recuperare l'URL della prima immagine attivata per il post corrente e lo inserisce all'interno $ image. Si noti che l'immagine deve essere attatched e non collegato da qualche altra parte.
Guarda un altro post che ho scritto usando questo codice sul blog ThemeForest: "Image Resizing with WordPress".
; ?>/inc/thumb.php? src =<?php echo $image; ?>& w = 50 & h = 50 )
Se è stata trovata un'immagine con aggraffatura, viene analizzata tramite lo script TimThumb con dimensioni di 50x50px. Poi vengono visualizzati anche il titolo e la data del post.
Il ciclo e la funzione sono quindi chiusi:
Successivamente, il widget è reso compatibile con il modello avvolgendolo nel $ before_widget e $ after_widget tag definiti nel modello:
Finalmente, il register_sidebar_widget () la funzione viene utilizzata per registrare il widget in Dashboard. 'Post dei blog recenti' sarà il nome del widget utilizzato all'interno della dashboard.
Dentro functions.php aggiungi quanto segue per includere il nuovo widget nel modello:
include (TEMPLATEPATH. "/inc/bloglist-widget.php");
Nella Dashboard, apri Aspetto -> Widget e rilascia i "Post recenti dei blog" (da non confondere con i 'Messaggi recenti' di default di WordPress) widget nell'area 'Homepage Bottom':
Lo stile è piuttosto semplice. L'immagine è flottata sul lato e le dimensioni e il peso del testo sono alterati. Aggiungi questo a style.css:
ul.bloglist margin: 0; ul.bloglist li clear: both; dimensione carattere: 1em; line-height: 1.3em; stile elenco: nessuno; margin-bottom: 17px; overflow: nascosto; ul.bloglist li img border: none; fluttuare: a sinistra; margin-right: 7px; ul.bloglist li .posttitle, ul.bloglist li .postdate display: block; font-size: 0.9em; ul.bloglist li .posttitle font-weight: bold; margin-top: 2px; ul.bloglist li .postdate font-size: 0.8em; stile di carattere: corsivo; font-weight: normal; ul.bloglist li a: link, ul.bloglist li a: visited display: block; imbottitura: 2px; overflow: nascosto; ul.bloglist li a: hover, ul.bloglist li a: active, ul.bloglist li a: focus text-decoration: none;
E aggiungi un po 'di colore ai link quando tieni il mouse sopra deepblue.css:
ul.bloglist li a: link, ul.bloglist li a: visited color: # 333; ul.bloglist li a: hover, ul.bloglist li a: active, ul.bloglist li a: focus background-color: # e3e8ed;
Questo è tutto! Come hai imparato, creando un molto widget di base è facile come avvolgere un normale ciclo personalizzato all'interno di una funzione widget. :)
Vorrei iniziare scusandomi di dover rovinare questa ultima parte della serie per affrontare i problemi di Internet Explorer; ma è un browser ancora in uso piuttosto elevato ed è nostro dovere soddisfare le persone malvagie che lo usano.
Ci occuperemo prima di IE7 e poi dei problemi di IE6 dopo.
Dentro il / Inc / cartella crea una nuova cartella chiamata / Css / e al suo interno, due file: ie.css e ie6.css. Questi due file verranno inclusi nell'intestazione in un'istruzione condizionale IE. Aggiungi quanto segue direttamente prima che i file javascript jQuery siano inclusi nel sezione di header.php:
Queste dichiarazioni condizionali di IE assicurano che il ie.css il file è incluso solo nelle versioni di Internet Explorer inferiori a IE8; e ie6.css è utilizzato anche in versioni inferiori a IE7.
Il primo problema è nella sezione commenti, dove IE7 non sembra trattare le dimensioni dei caratteri allo stesso modo degli altri browser e rendere ogni commento threadato più piccolo del commento principale:
Aggiungi il seguente in ie.css per impostare la dimensione del font nei commenti in pixel (a differenza degli em utilizzati nel foglio di stile principale):
.commentlist cite, .commentlist span font-size: 14px; fluttuare: a sinistra; padding-right: 4px; .commentlist p font-size: 13px; altezza della linea: 16px; .commentmetadata font-size: 13px; altezza della linea: 14px; .commentlist .reply font-size: 13px;
Un altro problema: il modulo di ricerca e le intestazioni nella barra laterale hanno deciso che preferirebbero un trattino 15px:
Basta rilasciare quanto segue per costringerlo a tornare:
#sidebar ul li * text-indent: -15px; #sidebar ul li ul * text-indent: 0;
Ora per i problemi IE6. Il primo e più ovvio è che lo sfondo della barra di navigazione non funziona poiché è un PNG trasparente:
Sono disponibili diverse correzioni PNG IE6, userò DD_belatedPNG. Salva il file .js nel / Inc / cartella.
Direttamente sotto le altre dichiarazioni condizionali di IE in header.php Inserisci: (assicurati di modificare il nome del file .js se il tuo non è nominato DD_belatedPNG_0.0.7a-min.js)
Dentro DD_belatedPNG.fix () passiamo due discussioni. Questi sono semplicemente i selettori CSS degli elementi per applicare la correzione PNG a.
Aggiungere a ie6.css per risolvere alcuni problemi con l'area del widget della home page e abbiamo finito:
.extra display: inline; ul.bloglist li a: hover, ul.bloglist li a: active, ul.bloglist li a: focus background: none; cursore: puntatore; decorazione del testo: sottolineatura; ul.bloglist li width: 300px; ul.twitter li.twitter-item float: left; larghezza: 260 px;
Tutto il nostro sforzo di separare gli stili di colore dal resto del nostro CSS è stato quello di rendere più semplice la creazione di schemi di colori alternativi selezionabili dalla pagina delle opzioni. In questa sezione finale della serie, Innovazione sta andando sotto i ferri con il RedSpace schema:
Dentro il / stili / cartella, creare una nuova cartella denominata / RedSpace / e dentro, copia nel search.png e bullet.gif file dal /profondo blu/ cartella.
Fai anche una copia di deepblue.css come redspace.css.
Salva le seguenti tre immagini nel / RedSpace / cartella come bg.jpg, trans.png e transred.png rispettivamente:
Ora è semplice come sostituire i codici blu con quelli rossi redspace.css:
/ * Stile di innovazione rosso - redspace.css * / body background: url ("redspace / bg.jpg") repeat-x # 140a05 0 in alto; colore: # 333; a: link, a: visited color: # 941919; #head h1 color: #fff; #head h3 color: # c4acaa; ripetizione #nav background: url ("redspace / trans.png"); border: 1px solid # 5b2022; #nav ul li a: link, #nav ul li a: visited color: # b99e94; #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: visited background: url ("redspace / transred.png") ripetizione; colore: # cdb9b2; #nav ul li a: hover, #nav ul li a: active, #nav ul li a: focus color: # cdb9b2; #content background-color: # f9f9f3; border: 1px solid # 5b2022; border-top: nessuno; .work a: link img, .work a: visited img border: 5px solid # f2e9ea; .work a: hover img, .work a: active img, .work a: focus img border: 5px solid # 8d4846; .work a: link, .work a: visited color: # 333; ul.twitter li.twitter-item background-color: # f6f5ed; border: 1px solid # eae9de; .flickr a: link img, .flickr a: visited img border: 3px solid # f2e9ea; .flickr a: hover img, .flickr a: img attivo, .flick a: focus img border: 3px solid # 8d4846; .blogpost, .worksearch border-bottom: 1px solid # e8e3c8; h2 a: link, h2 a: visited color: # 333; ul.meta li border-left: 1px solid # e3e8ed; #sidebar ul li # forma di ricerca #s background: url ("redspace / search.png") no-repeat right # f6f6ec; border: 1px solid # E8E3C8; #sidebar ul li # forma di ricerca #s: focus border: 1px solid # dad4b6; #sidebar ul li ul background-color: # f6f6ec; border: 1px solid # E8E3C8; #sidebar ul li ul li list-style: url ("redspace / bullet.gif"); #sidebar ul li a: link, #sidebar ul li a: visited color: # 333; p.footer color: # 554740; p.footer a: link, p.footer a: visited color: # 554740; border-bottom: 1px tratteggiato; p.footer a: hover border-bottom: 1px solid; decorazione del testo: nessuna; / * Elenco commenti * / .commentlist li .avatar border: 2px solid # f2e9ea; .commentlist cite a: link, .commentlist cite a: visited color: # 333; .comlistlist .commentmetadata a: link: first-child, .commentlist .commentmetadata a: visited: first-child color: # 333; .thread-alt background-color: # F6F6EC; .thread-even background-color: # F9F9F3; .depth-1 border: 1px solid # E8E3C8; .even, .alt border-left: 1px solid # E8E3C8; input, textarea background-color: # F6F6EC; border: 1px solid # E8E3C8; input: focus, textarea: focus border: 1px solid # dad4b6; p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed; ul.bloglist li a: link, ul.bloglist li a: visited color: # 333; ul.bloglist li a: hover, ul.bloglist li a: active, ul.bloglist li a: focus background-color: # f2e9ea; Dalla Dashboard, apri la pagina delle opzioni di innovazione e seleziona redspace.css dall'opzione 'Combinazione colori' - la pagina ha già scansionato il / stili / cartella e elencato i file .css in là.
Hit apply, e abbiamo finito!
In questa serie hai appreso un numero di abilità richieste per alimentare tutti i tipi di siti con il sistema WordPress! La maggior parte dei file di Innovation può essere riutilizzata nei tuoi nuovi progetti per velocizzare il tuo processo di sviluppo.
Scarica i file sorgente da questa parte, e c'è uno schema di colori in più (più basilare) disponibile - SoftLight:
Hai bisogno di aiuto con l'innovazione? Vuoi condividere le tue nuove combinazioni di colori? Vai a danharper.me/innovation/ e fai clic sul link Forum.
Grazie per la lettura e spero davvero che tu abbia trovato utile questa serie!
- Dan
Amare WordPress? Bisogno di piu? Ho compilato una rapida carrellata di alcune delle mie risorse preferite per WordPress.
Durante il corso del libro costruirai TRE temi WordPress, un blog, un sito portfolio e un sito generale con menu e sottomenu. Ogni tema dimostra diversi aspetti del tema WordPress.
Leggi di più
Hai chiesto e abbiamo risposto! A causa della forte domanda, stiamo lanciando una nuova serie di video che verrà eseguita insieme agli screencast di "Immersioni in PHP". La nostra speranza è che queste due serie, viste una dietro l'altra, ti trasformino in un designer dinamite di PHP / WordPress.
Visita la serie
Sviluppo del tema, il codice è una documentazione chiara e ben scritta. Venendo dai creatori di WordPress, non puoi sbagliare seguendo le sue istruzioni.
Visita il codice
Una serie di video screencast su Designing per WordPress. Si tratta di una serie in tre parti che copre il download e l'installazione di WordPress su un server fino a un tema completo.
Visita la serie
La tua risorsa visiva per tutte le cose WordPress.
Visita il sito
Vi mostrerò come creare un tema wordpress da zero in queste 3 serie di tutorial. Mi occuperò di strutturazione, progettazione in Photoshop, slicing, codifica in html completamente basato su CSS e infine implementazione di wordpress.
Visita la serie
Ovvio, ma se hai bisogno di una lettura extra di WordPress, guarda le esercitazioni precedenti!
Visita il sito
La cosa bella di WordPress è che non limita il modo in cui il contenuto viene visualizzato, ma fornisce un "framework" di modi per farlo. Ancora meglio, è possibile cambiare il display in base al contenuto.
Visita il tutorial
La flessibilità offerta dal motore WordPress è fenomenale: poter pubblicare qualsiasi cosa, da un blog di base a un forum, da una vetrina web a un sito CMS aziendale! Qui diamo uno sguardo ad alcuni dei grandi modi in cui WordPress è stato usato finora.
Visita l'articolo
Diamo un'occhiata al modo in cui un popolare tema premium di WordPress sfrutta le funzioni avanzate di WordPress per creare un modello che realmente spinge ciò di cui WordPress è capace!
Visita l'articolo
WordPress è ben noto per la sua straordinaria collezione di plugin gratuiti. Ce n'è uno per quasi tutte le esigenze a cui puoi pensare, dal backup della tua installazione di WordPress alla richiesta di un caffè o alla lotta contro lo spam.
Visita l'articolo
Questo tutorial descriverà l'implementazione di un plugin Wordpress partendo da zero. Il plugin si collegherà a un database OSCommerce esterno e visualizzerà prodotti casuali sul tuo sito Wordpress. Implementa anche una pagina di configurazione per il pannello di amministrazione di Wordpress.
Visita il tutorial
'WordPress Hacks' copre il mondo che circonda WordPress, inclusi gli ultimi hack di WordPress, notizie, suggerimenti, trucchi e how-to del famoso software di blogging open source.
Visita il sito
Un nuovo blog per inviare risposte alle domande di WordPress e ricette veloci ma molto utili sulla mia piattaforma di blogging preferita.
Visita il sito
Il primo passo verso il successo è capire che qualunque problema tu abbia, qualcun altro è destinato ad averlo avuto prima. Una semplice ricerca su Google ti fornirà una soluzione alla maggior parte degli ostacoli nella strada che incontrerai durante lo sviluppo di WordPress.
Visita il sito
