How to Create Your Own Wordpress Theme Come creare il vostro tema wordpress

Have you ever wanted to create your own custom wordpress theme? Avete mai voluto creare il proprio tema wordpress personalizzato? I’ll show you how to start learning to hack away at your own WP theme in this tutorial in just a matter of minutes… Vi mostrerò come avviare l'apprendimento a distanza hack a vostro WP tema in questa esercitazione nel solo una questione di minuti ...

This is the second installment in the Questa è la seconda rata in Managing Wordpress More Effectively Series Gestire in modo più efficace wordpress serie - so you can get control of your blog and wring every last bit out of your content and visitors, saving you time and making you more money! - In modo che tu possa ottenere il controllo del tuo blog e strizzare ogni ultimo po 'fuori del tuo contenuto e visitatori, consentendo di risparmiare tempo e rendendo più soldi!

If you’re a regular reader of this blog, you might notice that JTPratt’s Blogging Mistakes now has a new theme! Se sei un normale lettore di questo blog, ti renderai conto che JTPratt del blogging errori ora ha un nuovo tema! I think that a blog grows with the blogger, and the biggest mistake you can make is not modifying your blog to display your progress. Credo che un blog cresce con il blogger, e il più grande errore che si può fare è non modificare il tuo blog per visualizzare i tuoi progressi. I started out in 2007 with a really nice theme (Prosense), because it did most of what I wanted and looked professional. Ho iniziato nel 2007 con un tema veramente bello (Prosense), in quanto essa ha fatto la maggior parte di ciò che ho voluto e cercato professionale. But I hacked and hacked and hacked it some more to slowly get rid of things I didn’t like. Ma io hacked e hacked e hacked che alcuni più lentamente di sbarazzarsi di cose che non mi piaceva. Finally - I just had to say enough is enough and create my own Wordpress theme just exactly the way I wanted it. Infine - ho dovuto dire basta e di creare il mio tema Wordpress appena esattamente il modo in cui ho voluto.

Wordpress Theme Hacking Wordpress tema hacking

If you’re curious and you know some HTML and CSS (even just enough to be dangerous) this guide was made for you. Se siete curiosi e sapete alcuni HTML e CSS (anche solo abbastanza per essere pericoloso) questa guida è stata fatta per voi. This isn’ta definitive guide or anything, but it will get you started and I’m sure it will give you some good ideas to create your own “custom Wordpress theme”. Questo non è un guida definitiva o nulla, ma ti iniziato e sono sicuro che vi darà alcune buone idee per creare il proprio "tema Wordpress personalizzato". This is the “How to Create Your Own Wordpress Theme” tutorial, or “How to Hack Wordpress Themes”. Questo è il "Come per creare il tuo Wordpress Tema" tutorial, o "Come Hack Wordpress Themes". The first thing you need to do is get the La prima cosa che dovete fare è ottenere l' Theme Test Drive Tema Test Drive plugin. plug-in. I used this plugin for two weeks, so I could hack and test my new theme to death before putting it live. Ho usato questo plugin per due settimane, così ho potuto hack e testare il mio nuovo tema a morte prima di essa vivono. You see, it allows you to set a theme that only the admin will see when logged into the Wordpress. Vede, ti permette di impostare un tema che solo l'amministratore vedrà volta effettuato il log in Wordpress. So as long as you’re logged in, you will see the new custom theme you’re building but all your visitors will see the regular one. Quindi, fintanto che hai effettuato l'accesso, vedrai il nuovo tema personalizzato che stai costruendo, ma tutti i tuoi visitatori vedranno il regolare uno.

Creating Your Own WP Theme from a Copy Creare i propri WP tema da una copia

Now login to your web site in FTP and download the theme you’re using now to your desktop. Ora il login al vostro sito web in FTP e scaricare il tema che si sta usando ora per il tuo desktop. Give the folder a unique name like “custom-theme” or something. Indicare la cartella un nome univoco come "custom-tema" o qualcosa del genere. I’m going to show you how to create your own theme by starting to modify a second copy of the one you’re currently using (without anyone but you knowing about it). Io vado a mostrare come creare il proprio tema da cominciare a modificare una seconda copia di quella che si sta attualmente utilizzando (ma senza che nessuno si è a conoscenza). Now, using Notepad (or any text editor) open the “style.css” file. Ora, utilizzando il Blocco note (o un qualsiasi editor di testo), aprire il "style.css" file. At the top of the file are some comment lines. Nella parte superiore del file sono alcune linee di commento. When you go to “Presentation -> Themes” in your Wordpress dashboard, the titles and descriptions of the themes you have installed come from the “style.css” file of those themes. Quando si va a "Presentazione -> Temi" Wordpress nel vostro cruscotto, i titoli e le descrizioni dei temi che avete installato provengono dal "style.css" file di questi temi. The style file you just opened should already have comments like this as the first few lines like this: Il file di stile che si è aperto dovrebbe già avere commenti come questo come il primo poche righe come questa:

 /* Theme Name: JTPratts Custom Theme Theme URI: http://www.jtpratt.com Description: No nonsense custom theme developed in house. Author: JTPratt's Blogging Mistakes Author URI: http://www.jtpratt.com 

Modify all those lines with your own details, delete the “screenshot.png” file from the folder, and then upload the entire folder back to your theme directory in FTP. Modificare tutte quelle righe con il tuo dettagli, eliminare il "screenshot.png" file dalla cartella, quindi caricare l'intera cartella di tornare al tema nella directory FTP. If you have a graphics editor, you could instead open the screenshot file and modify it to go with your theme. Se si dispone di un editor di grafica, si potrebbe invece aprire la schermata di file e modificarlo per andare con il vostro tema. I created a custom one so I could tell my backup from my live one like this: Ho creato uno personalizzato così ho potuto dire il mio backup del mio vivere in questo modo:

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab. Dopo aver caricato la cartella per il tema di directory, torna al tuo WP cruscotto e "Presentazione -> Temi" scheda. Your new theme should now be an option. Il tuo nuovo tema dovrebbe essere un'opzione. If you also created a “screenshot.png” (it must be named exactly that) and uploaded it in the folder too - the new picture of your theme will show up as well as in my example above. Se avete creato anche un "screenshot.png" (che deve essere proprio questo il nome) e inserito nella cartella troppo - la nuova immagine del vostro tema verranno visualizzati così come nel mio esempio di cui sopra.

How to Test a Wordpress Theme as Admin Only Come Test di un tema come Wordpress Solo Admin

Now, enable the “Theme Test Drive” plugin you downloaded and installed if you haven’t already. Ora, attivare il "Tema Test Drive" plugin che hai scaricato e installato se non l'hai già fatto. Go to “Presentation -> Theme Test drive”, choose your new theme from the dropdown and click the “enable” button. Vai a "Presentazione -> Tema Test drive", scegliere il nuovo tema dal menu a tendina e cliccare su "attiva" il pulsante.

That’s it - now your ready to start theme hacking! Questo è tutto - ora il tuo pronto per iniziare a tema "hacking"! Go to the “Presentation -> Theme Editor” tab and in the drop down menu your “current” theme will be listed like this: Vai alla "Presentazione -> Tema Editor" scheda e nel menu a discesa il tuo "attuale" tema verranno elencati in questo modo:

That’s my current theme everyone sees. Questo è il mio tema attuale vede tutti. Before I start editing the test theme only I will see as admin I need to switch to that one in the theme editor like this: Prima di iniziare la modifica del tema di prova solo mi vedrà come amministratore ho bisogno di passare a uno che in tema come questo editore:

Now in the right hand list of files, find the one labeled “Main Index” and click on it. Ora nella mano destra un elenco di file, trovare un classificati come "Main Index" e fare clic su di esso. 10 or 20 lines in you should see something like this: 10 o 20 linee, si dovrebbe vedere qualcosa come questo:

 <div class="entry"> <?php the_content('Read the rest of this entry &raquo;'); ?> </div> 

Right after the div entry tag add a bunch of random text, save the file, and in another tab or browser window load up your blog home page. A destra dopo il tag div entrata aggiungere un po 'casuale di testo, salvare il file, e in un'altra scheda o finestra del browser caricare il tuo blog home page. Does it contain the random text? Essa non contiene il testo casuale? If it does - great! In caso contrario - grande! If not, go back and follow the directions again to see what you did wrong. In caso contrario, tornare indietro e seguire le indicazioni di nuovo per vedere che cosa avete sbagliato. Now I don’t know how much HTML and CSS code you know - so if you need a reference be sure to visit and bookmark Ora non so quanto HTML e CSS codice sapete - quindi se avete bisogno di un riferimento sicuro per visitare e segnalibro W3Schools which is a free online resource for web coding. che è una risorsa gratuita on line che codifica per il web. They have a reference page for each and every tag, and many free tutorials. Hanno una pagina di riferimento per ogni etichetta, e molti tutorial gratuito.

What is the “Wordpress Loop”? Qual è il "Wordpress Loop"?

Depending on how much HTML and CSS code you know (and are willing to mess with) now you remove the random text and start messing around with your theme. A seconda della quantità di codice HTML e CSS codice sapete (e sono disposti a pasticciare con) ora di rimuovere il testo casuale e avviare nei guai con il tema. Remember - only you can see the changes (while you’re logged in as admin), and you can even make major changes to the sidebar, header, and footer. Ricorda - solo tu puoi vedere i cambiamenti (mentre sei connesso come amministratore), e si può anche fare grandi modifiche alla sidebar, intestazione e piè di pagina. The code I just showed you is what puts the posts on the main page. Il codice ho appena mostrato è ciò che si mette i posti sulla pagina principale. Not the titles or meta information, just the post content itself. Non i titoli o meta-informazioni, solo il contenuto stesso posto. You home page (Main Index) contains a “loop”. È home page (Indice), contiene un "loop". It’s called the “Wordpress loop” because by default your Main Index shows 10 posts. Si chiama "Wordpress loop" perché per impostazione predefinita il tuo principale Indice mostra 10 posti. The PHP code for the look basically says (in English) “once you find the first posts, do these things over and over until you reach the tenth post. Il codice PHP per l'aspetto fondamentalmente dice (in inglese) "una volta a trovare il primo post, fare queste cose più e più fino a raggiungere il decimo posto. So if you put something “in the loop” (like a picture or text) is would display on your Main Index page 10 times before or afer the content for each post beginning with the first until it reached the last. Cosi se metti qualcosa "in loop" (come una foto o testo) è che sul display principale Indice Pagina 10 volte prima o afer il contenuto di ogni post che inizia con la prima, fino a raggiungere l'ultimo.

I’m telling you this because if you want a graphic at the top of your page before the posts (like mine) you have to place it “before the loop”. Sto dicendo questo perché, se si desidera un elemento grafico nella parte superiore della pagina prima che la posti (come il mio), si deve luogo che "prima del loop". If you want it after all the posts, like the 336×280 ad at the bottom of my Main Index page, it has to go “after the loop”. Se si desidera che dopo tutti i posti, come la 336 × 280 annuncio nella parte inferiore della mia home page, è di andare "dopo il loop". While EVERY theme is a bit different I this is what you look for: Mentre ogni tema è un po 'diverso ho questo è quello che cercate:

 <?php if (have_posts()) : ?> <?php endwhile; ?> 

The Wordpress loop starts with the have_posts line and ends with the endwhile line. La Wordpress ciclo inizia con la linea have_posts e termina con l'endwhile linea. Before and after those 2 lines would be “before and after the loop”. Prima e dopo quelle 2 linee sarebbe "prima e dopo il ciclo". Somewhere in between those 2 lines would be placing something “in the loop”. In qualche parte tra questi 2 linee sarebbe qualcosa di immissione "nel giro". I wanted to explain this to you before you started hacking around and wondered why your changes showed up in weird place. Ho voluto spiegare questo a voi prima di cominciare a circa l'hacking e si chiedeva il motivo per cui le modifiche hanno dimostrato in luogo strano. For practice, try adding some kind of code or script for an ad (or just a linked image if you know the code) before or after the loop on your Main index page. Per prassi, prova ad aggiungere qualche tipo di codice o script per un annuncio (o solo un immagine collegate se si conosce il codice), prima o dopo il ciclo sulla vostra pagina principale indice. If you’re new at this it’s good practice, and you should be figuring out why so many of us hack our theme by hand - it’s just impossible to have a plugin for every little modification you want to make. Se siete nuovi a questo che è buona pratica, e si dovrebbe capire il motivo per cui molti di noi il nostro tema hack a mano - è semplicemente impossibile avere un plugin per ogni piccola modifica che si desidera fare.

Your First Wordpress Theme Hack Il tuo primo tema wordpress hack

Now I’m going to teach you your first real ‘hack’. Ora ho intenzione di insegnare è il tuo primo vero 'hack'. Let’s say you want to show some kind of text, image, or ad further down your Main Index page, but not before or after “the loop” and not after all 10 posts. Diciamo che si desidera mostrare un qualche tipo di testo, immagine, o ad altri la vostra home page, ma non prima o dopo "Loop" e non dopo tutti i 10 posti. You have to insert a line of code to tell “the loop” to display it only once (and where) È necessario inserire una riga di codice per dire "l'anello" per visualizzare solo una volta (e dove)

 <?php if ($count==2) { include('main-index-ad.php'); } ?> <?php $count = $count + 1; ?> <?php endwhile; ?> 

The first line is the one you copy and paste into your Main Index file, put it before the count and endwhile lines just like in my example. La prima linea è quella di copiare e incollare nel vostro file di indice principale, prima di mettere il conte e endwhile linee come nel mio esempio. That line of PHP code says to the loop (in English) “while you counting, after the second post print the contents of the main-index-ad.php file”. Tale linea di codice PHP dice il ciclo (in inglese) "mentre si conteggio, dopo il secondo posto stampare il contenuto dei principali indici di ad.php-file". This means of course, you have to create a file called ‘main-index-ad.php’ (or whatever you want to call it) and add the script or code or whatever you want to put after the second post. Ciò significa, naturalmente, si deve creare un file chiamato 'principali indici-ad.php' (o come volete chiamarlo) e aggiungere lo script o il codice o quello che volete mettere dopo il secondo posto. Make the change in your Main Index file and “save”. Apportare la modifica nel tuo principali indici di file e "salvare". Upload the main-index-ad.php file to your theme folder, and then reload your home page to test your very first theme hack. Carica i principali indici-ad.php file sul tema cartella, quindi ricaricare la tua home page di testare il tuo primo tema molto trucco. Did it work? Ha lavoro?

So far, we’ve been working on only the “Main Index” or index.php file for theme hacks. Finora abbiamo lavorato solo su il "Main Index" o file index.php per tema hack. Although every theme is a bit different, nearly every one has a Main Index, a Single Post, a Page file, 404 Template (file not found), Sidebar (sometimes 2), Comments, and Archives page. Anche se ogni tema è un po 'diverso, quasi ogni uno è uno dei principali indici, un singolo post, un file di paging, modello 404 (file non trovato), la sidebar (2 volte), Commenti, e Archivi pagina. Some themes also have a Category page, but if they don’t the Archives.php page will be used for category pages too. Alcuni temi hanno anche una pagina di categoria, ma se non la Archives.php pagina sarà utilizzata per la categoria pagine troppo. I point this out because if you ad something to the homepage, you might also want it to appear on single posts, or pages, or category pages. Ho questo punto perché se qualcosa annuncio alla homepage, si potrebbe anche desidera che appaia sul singolo post, o pagine, o le pagine di categoria. Like in the previous example you might consider making several files with ads, text, or images and uploading them to your theme directory. Come nel precedente esempio si potrebbe considerare di rendere più file con gli annunci, i testi, le immagini o il caricamento e al vostro tema di directory. You can use the same line of code in the previous example to include any file before or after the loop. È possibile utilizzare la stessa riga di codice nel precedente esempio per includere qualsiasi tipo di file prima o dopo il ciclo. Just remove the count statement like this: Basta rimuovere il conte dichiarazione come questa:

 <?php include('name-of-my-file.php'); ?> 

It’s much smarter to add things to your pages with a file like this if it’s going to be in multiple places. È molto più intelligente di cose da aggiungere le tue pagine con un file di questo tipo se si tratta di andare a essere in più posti. Otherwise, you have to manually modify multiple files. In caso contrario, è necessario modificare manualmente i file multipli. If you do it like this, in the future when you need to change that content, you just edit the one file. Se lo fate come questo, in futuro, quando si ha bisogno per modificarne il contenuto, si deve semplicemente modificare i file uno.

Your Second Wordpress Theme Hack Il tuo secondo tema wordpress hack

For quite a while I had wanted to add the comment count under my post titles on my index page where they would be linked to actually post a comment. Per un po 'di tempo avevo chiesto di aggiungere il commento contare sotto il mio post titoli sul mio indice pagina in cui sarebbero legati al fatto pubblicare un commento. Oh - an I wanted a little comment graphic beside them too. Oh - ho voluto uno un po 'di commento grafico accanto a loro troppo. Basically “inside the loop” you just add the following PHP code somewhere are your post title: Fondamentalmente "all'interno del ciclo" basta aggiungere il seguente codice PHP sono da qualche parte il tuo post titolo:

 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <?php $comments_img_link= '<img src="/wp-content/images/comments-icon.gif"  title="comments" alt="comments" />'; comments_popup_link($comments_img_link .' Comments(0)', $comments_img_link .' Comments(1)', $comments_img_link . '  Comments(%)');?> 

The first line is the code you need to find “in the loop” which prints out the post title heading. La prima linea è il codice che necessità di trovare "nel giro", che stampa il titolo post voce. Your may look slightly different, just look for “the_title” in the line. Il tuo potrebbe avere un aspetto leggermente diverso, basta dare uno sguardo per "the_title" in linea. Right after that paste the two lines in my example. Subito dopo che incollare le due righe nel mio esempio. You’ll meed to modify the first line with the name of and correct path to your comment icon. Ti meed di modificare la prima riga con il nome di percorso corretto e per il tuo commento icona. You’ll need to create one or find a free suitable one on the web. Avrai bisogno di creare uno o trovare una adeguata sul web.

Adding a plugin to do the Hacking for You Aggiunta di un plugin per fare il Hacking for You

There’s still a few things that Wordpress “won’t do” what I prefer to have on my blog that are easily added with a plugin. C'è ancora un paio di cose che Wordpress "non fare" quello che preferiscono avere sul mio blog che sono aggiunte facilmente con un plugin. For most of these things I use Per la maggior parte di queste cose io uso Lester Chan’s Wordpress Plugins Lester Chan's Wordpress Plugin . I use WP-PageNavi for the navigation at the bottom of my home page, and replaced the horrible “previous” and “next” default wordpress navigation links with it. Io uso WP-PageNavi per la navigazione nella parte inferiore della mia home page, e sostituito l'orribile "precedente" e "Next" di default wordpress link di navigazione con esso. I use WP-PostRatings for the star voting on each post. Io uso WP-PostRatings per la stella di voto su ogni post. WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar. WP-post visualizza il post per ogni post, in aggiunta al "più visti" posti nella mia barra laterale. The WP-Print plugin is for the printer friendly page link for posts. Il WP-Print plugin è per la stampa pagina il link per post. With all these Lester Chan Wordpress plugins, once you install and activate them, all you have to do is copy and paste the line of PHP code on the pages and places you want the plugin to display something. Con tutti questi Lester Chan Wordpress plugin, una volta di installare e attivare il loro, tutto ciò che dovete fare è copiare e incollare la riga di codice PHP nelle pagine e nei luoghi che si desidera che il plugin per visualizzare qualcosa. You get that code on the documentation “usage” page for each plugin on Lester’s site. Vedrete che il codice sulla documentazione "uso" per ogni pagina plugin su Lester del sito. After doing the first two hacks, it should be pretty easy to add the code to your template pages for the plugin hacks to work. Dopo aver fatto le prime due hack, dovrebbe essere abbastanza facile aggiungere il codice al tuo modello pagine per il plugin hack al lavoro.

In addition to the Lester Chan plugins, on my pages after the posts on my main page you’ll see some options for visitor’s like “subscribe to this feed”, “email this”, “digg this”, etc. These features actually come from Feedburner. In aggiunta ai plugin di Lester Chan, sulle mie pagine dopo il post sul mio pagina principale vedrete alcune opzioni per il visitatore come "iscriverti a questo feed", "questa e-mail", "Digg this", ecc Queste caratteristiche in realtà provengono da Feedburner. I know on a lot sites I see people adding a “social” plugin to display a bazillion options for all the tagging sites. So che in molti siti vedo l'aggiunta di un popolo "sociale" plugin per visualizzare un bazillion opzioni per la codifica tutti i siti. I use Feedburner for my feed (like most bloggers do), and they have a “Feedburner Feedsmith” plugin that will add that “flare” after your posts - which I think have much more helpful options than any social plugin around. Io uso il mio Feedburner per i mangimi (come la maggior parte dei blogger non), e hanno un "Feedburner Feedsmith" plugin che aggiunge che "flare", dopo i tuoi post - che mi sembra avere molto più utile rispetto a qualsiasi opzioni sociali plugin circa. If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well. Se si scarica e consentire che il plugin di Feedburner, dovete aggiungere il codice PHP previste al tuo modello come bene.

Hacking Your Theme Stylesheet Hacking il tema di stile

Your stylesheet contains all properties of all the colors and sizes of items on your blog. Il tuo foglio di stile contiene tutte le proprietà di tutti i colori e le dimensioni degli articoli sul tuo blog. It has background and link colors, font sizes, bold, italics, you name it. Essa ha sfondo e link colori, delle dimensioni di carattere, grassetto, corsivo, è il nome. In your dashboard theme editor click on “Stylesheet” to bring up this file. Nella tua bacheca tema editor fare clic su "stile" per far apparire questo file. It’s the same one you added the theme properties to on your computer in a text editor at the very beginning of this article. E 'lo stesso che hai aggiunto il tema di proprietà sul vostro computer in un editor di testo all'inizio del presente articolo. YOUR stylesheet is more than likely going to be completely different than mine, and editing it won’t be as easy as the earlier copy and paste hacks. IL TUO foglio di stile è più che probabile sarà completamente diversa da quella miniera, e la modifica non sarà facile come la prima copia e incolla hack. What you need to know is that every web page is a “document” that has “elements”. Cosa dovete sapere è che ogni pagina web è un "documento" che ha "elementi". The elements are setup in a “box model”, and items like div’s, paragraphs (p’s), spans, the body, headings (h’s), blockquote, and list tags (ul, ol, li or underordered list, ordered list, and list) are all “boxes”. Gli elementi di impostazione sono in una "scatola modello", e come elementi div's, paragrafi (p's), si estende, il corpo, voci (H), blockquote, e la lista dei tag (ul, ol, li o underordered elenco, elenco ordinato, e l'elenco) sono tutte le "scatole". In CSS code everything “nests” and “properties” can be assigned to elements at any level. In tutto il codice CSS "nidi" e "proprietà" possono essere assegnati ad elementi a qualsiasi livello. Here’sa diagram example: Ecco un esempio grafico:

That image is an example of how all the boxes would look if you drew them all out. Questa immagine è un esempio di come tutte le caselle di guardare se si ha tutti fuori. Here’s how those boxes look as (well formatted) HTML code: Ecco come quelle scatole di guardare come (ben formattati) HTML code:

 <body> <div> <p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </p> </div> </body> 

I wanted you to visualize this before you started stylesheet hacking so you would know about how nesting works. Volevo di visualizzare questo prima di cominciare l'hacking di stile in modo volesse sapere come funziona la nidificazione. If you change the (font) “color” to grey at the “body” level all the text on the page will be grey. Se si modifica l'(font) "colore" al grigio al "corpo" livello di tutto il testo sulla pagina sarà grigio. If you also change the font color to green at the “li” or list item level, all the text on the page will be grey except the list items, which will be green. Se anche modificare il colore verde al "li" o una lista a livello di elemento, tutto il testo sulla pagina sarà grigio, tranne l'elenco voci, che sarà verde. If you change the paragraph or “p” font color to red, then both the P and UL text will be red, the LI text will be green, but the rest of the body and div text above those levels will still be grey. Se si modifica il punto o la "p" Colore del carattere di rosso, quindi sia la P e UL testo sarà rosso, il LI testo sarà verde, ma il resto del corpo e div testo al di sopra di tali livelli saranno ancora grigio. This is called “inheritance”, and properties start at the highest level and stay that property until changed lower down the nesting chain. Si tratta della cosiddetta "eredità", e le proprietà avviare al più alto livello e di soggiorno fino a che la proprietà è cambiato basso la catena di nidificazione.

The first thing you might want to hack is your link colors and properties. La prima cosa che si potrebbe desiderare di hack è il vostro collegamento colori e proprietà. There are sooooo many ways to change your links to make them stand out. Sooooo Ci sono molti modi per cambiare il tuo link per farli risaltare. A hyperlink is an “a” or anchor tag. Un collegamento ipertestuale è un "uno" o tag di ancoraggio. There are 3 states of a link which are normal, visited, and hover. Ci sono 3 membri di un collegamento che sono normali, ha visitato, e al passaggio del mouse. Normal is what the color of the link is before you click it. Normale è ciò che il colore del link prima di fare clic su di esso. Visited is the color of the link once you’ve visited it. Visitato è il colore del link una volta che hai visitato essa. And hover is the color of the link when your mouse goes over it. E hover è il colore del link quando il mouse passa su di esso. For all three of these states of a link you can change the color, text-decoration, background, and many other properties. Per tutti e tre di questi stati di un link è possibile cambiare il colore, text-decoration, sfondo, e molte altre proprietà. In my stylesheet I have entries to change link properties for the entire body of all my pages like this: Nel mio foglio di stile ho voci di modificare le proprietà collegamento per l'intero corpo di tutte le mie pagine come questa:

 body a { color: #0033CC; text-decoration: none; } body a:visited { color: #003399; } body a:hover { text-decoration: underline; color: #003399; background: #000000; } 

As you see, you can change the color for the 3 different states of links, you can change the text decoration (for any state), or the background color (for any state). Come potete vedere, è possibile cambiare il colore per i 3 diversi stati di link, è possibile modificare il testo decorazione (per ogni Stato), o il colore di sfondo (per ogni Stato). You can also leave any of these properties out. È anche possibile lasciare una qualsiasi di queste proprietà fuori. For the text decoration property you could use any of these values: solid, underline, overline, line-through, none, dotted, or dashed. Per il testo decorazione proprietà è possibile utilizzare uno qualsiasi di questi valori: solido, sottolineare, overline, attraverso la linea, nessuno, punteggiato o tratteggiato. While my code example above controls the link color for an entire body of a page, you can also change them at any level, like maybe your sidebar: Mentre il mio codice di esempio sopra i controlli sul link di colore per un intero corpo di una pagina, è possibile anche cambiare loro a qualsiasi livello, come forse la vostra barra laterale:

 #sidebar a:hover { text-decoration: underline; } 

Experiment by modifying the link colors in your stylesheet now. Esperimento modificando il link colori nel tuo foglio di stile ora. Then experiment further by changing font sizes and colors. Poi ulteriore esperimento cambiando dimensione dei caratteri e colori. To find cool color schemes to change colors of text, links, or backgrounds Per trovare raffreddare schemi di colore per cambiare i colori del testo, link, o sfondi Use this CSS color chart for reference Utilizza questo colore CSS grafico di riferimento per . It’s probably the best color chart I’ve seen in years, mainly because it is based on pantone colors and paint strip samples from a hardware store. E 'probabilmente il miglior colore grafico che ho visto negli anni, soprattutto perché si basa su colori pantone e striscia di vernice campioni da un negozio di hardware.

The last wordpress theme hack (in this article) I’ll show you is for headings. L'ultimo tema wordpress hack (in questo articolo), vi mostrerò è per le rubriche. A heading is an “H” tag like <H1> <H2> <H3> <H4>, etc. Every post should have a (title) heading, and every widget or section in your sidebar has a heading. Una voce è una "H" come etichetta <h1> <H2> <h3> <h4>, ecc Ogni post dovrebbe avere un (titolo) voce, e ogni sezione widget o nella tua sidebar è una voce. As shown earlier in my diagram - a heading is a “box” and that box has properties, like background, padding, margin, (text) color, (link) color, border, border-style, and more. Come indicato in precedenza il mio schema - una voce è una "scatola" e che ha casella di proprietà, come sfondo, padding, i margini, (testo) il colore, (link) di colore, di frontiera, border-style, e molto altro ancora. By default in Wordpress the post headers are just linked text. Per impostazione predefinita, in Wordpress post sono solo le intestazioni di testo collegata. While that’s ok, as you can see on my Main page and my post pages I prefer a black border, a background color, and some padding. Mentre questo è ok, come potete vedere sulla mia pagina principale e le mie pagine di post che preferisco un bordo nero, un colore di sfondo, e alcune imbottiture. In my sidebar I gave the sections headings a background image, a bottom border, and some margines. Nella mia barra laterale ho dato le sezioni voci un'immagine di sfondo, un fondo di frontiera, e alcuni margines. The list elements also have a bottom border. L'elenco di elementi hanno anche un fondo di frontiera.

 #sidebar ul { margin-bottom:5px; padding-left:5px; } #sidebar .sidebar_left ul h2 { padding-bottom: 1px; border-bottom: solid 1px #999999; font-size: 1.1em; } #sidebar h2 { background: #B0E2FF  url('/wp-content/images/header-bkg.gif') no-repeat; padding-left: 7px; padding-bottom: 0px; } #sidebar .sidebar_right ul h2 { padding-bottom: 1px; border-bottom: solid 1px #999999; font-size: 1.1em; } 

In the code example above I showed you nearly all my sidebar stylesheet properties so you can get an idea of the many different ways you can customize a header and list item. Nel codice di esempio di cui sopra vi ho mostrato quasi tutti i miei sidebar proprietà di stile in modo che tu possa avere un'idea dei tanti diversi modi in cui è possibile personalizzare l'intestazione e voce. You can see how I gave the sidebar H2 header a backround image instead of just a color. È possibile vedere come mi ha dato la barra laterale H2 intestazione uno backround immagine invece di un colore. This the code I used to format the properties of the post headings: Questo il codice che ho usato per formattare la proprietà del post voci:

 .post h2 { background: #CCCCCC; border: 1px solid; border-color: #000000; padding-left: 10px; padding-right: 10px } 

Instead of just having linked text I gave my post headings a background color of grey, a solid 1 pixel black border, and some padding on the left and right sides. Invece di aver collegato solo testo ho dato il mio post rubriche uno sfondo di colore grigio, una solida 1 pixel bordo nero, e alcune imbottiture sulla sinistra e destra. Now I think it’s much easier to see where one post ends an the next begins on my pages. Ora credo che sia molto più facile vedere un posto dove finisce l'uno accanto inizia sulle mie pagine.

Use What You’ve Learned to Hack Your Theme More Usa ciò che hai imparato a hack il tema più

I’ve give you a way to hack away at your Wordpress theme without changing how your visitor’s see it. Ho darvi un modo per hack via al vostro tema Wordpress senza cambiare il tuo modo del visitatore vederlo. I’ve told you about the Wordpress loop, and how to add things before, after, and inside it. Vi ho detto circa il loop Wordpress, e come aggiungere le cose prima, dopo, e al suo interno. We hacked and added some PHP code, and then hacked our theme stylesheet to change properties to affect the layout and design of the page. Abbiamo hacked e ha aggiunto alcune codice PHP, e quindi il nostro tema hacked foglio di stile per modificare le proprietà di alterare il layout e il design della pagina. I can’t teach you everything you need to know to create your own entire custom theme in just one post - but I can get you started! Non posso insegnare tutto quello che c'è da sapere per creare il tuo intero tema personalizzato in un solo posto - ma posso iniziare! Now you know enough about Wordpress themes to be dangerous and customize your own. Ora si sa abbastanza su temi Wordpress a essere pericoloso e personalizza il tuo. Visit and bookmark Visita e segnalibro W3Schools.com for your HTML and CSS reference needs. per il codice HTML e CSS di riferimento esigenze. Research and read more articles explaining how to hack and customize your Wordpress theme further like the La ricerca e per saperne di più articoli spiegando come hack e personalizzare il vostro tema Wordpress ulteriormente come il tutorials at WPDesigner.com tutorial a WPDesigner.com .

Please comment if this article helped you, you had a question, or a great worpress theme hack or customization to add! Si prega di commento, se questo articolo vi ha aiutato, hai avuto un problema, o un grande tema worpress hack o personalizzazione di aggiungere! I hope you found this information valuable - if so please feel free to bookmark, digg, and stumble this page! Mi auguro che hai trovato queste informazioni preziose - se così non esitare a segnalibro, digg, e inciampare questa pagina!

Tags: Tag: tutorial , wordpress-hack