How to Create Your Own Wordpress Theme Comment créer votre propre thème Wordpress

Have you ever wanted to create your own custom wordpress theme? Avez-vous jamais voulu créer votre propre thème wordpress? 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… Je vais vous montrer comment commencer à apprendre à loin ficelle à votre propre thème WP dans cette tutoriel en seulement une question de minutes ...

This is the second installment in the Il s'agit de la deuxième tranche dans le Managing Wordpress More Effectively Series Gérer plus efficacement Wordpress série - 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! - Pour vous permettre de prendre le contrôle de votre blog et de tordre le dernier bit de votre contenu et de visiteurs, vous économisant temps et vous faire plus d'argent!

If you’re a regular reader of this blog, you might notice that JTPratt’s Blogging Mistakes now has a new theme! Si vous êtes un lecteur régulier de ce blog, vous remarquerez que les blogs JTPratt erreurs a maintenant un nouveau thème! 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. Je pense que se développe un blog avec Blogger, et la plus grande erreur que vous pouvez faire est de ne pas modifier votre blog pour afficher vos progrès. I started out in 2007 with a really nice theme (Prosense), because it did most of what I wanted and looked professional. J'ai commencé en 2007 avec un très beau thème (Prosense), parce qu'il n'a plus de ce que je voulais et attend professionnel. But I hacked and hacked and hacked it some more to slowly get rid of things I didn’t like. Mais je piraté et piraté piratée et il un peu plus lentement à se débarrasser de choses que je n'ai pas aimé. Finally - I just had to say enough is enough and create my own Wordpress theme just exactly the way I wanted it. Enfin - je me devais de dire ça suffit et créer mon propre thème Wordpress exactement comme je l'ai voulu.

Wordpress Theme Hacking Thème Wordpress piratage

If you’re curious and you know some HTML and CSS (even just enough to be dangerous) this guide was made for you. Si vous êtes curieux et vous savez que certains HTML et CSS (même juste assez pour être dangereux), ce guide est fait pour vous. 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”. Ce n'est pas un guide ou quoi que ce soit, mais il va vous aider à démarrer et je suis sûr qu'il va vous donner quelques bonnes idées pour créer votre propre thème Wordpress personnalisé ". This is the “How to Create Your Own Wordpress Theme” tutorial, or “How to Hack Wordpress Themes”. C'est le "Comment créer votre propre thème Wordpress" tutoriel, ou "Comment Hack Wordpress Themes". The first thing you need to do is get the La première chose que vous devez faire, c'est de passer l' Theme Test Drive Theme Test Drive plugin. I used this plugin for two weeks, so I could hack and test my new theme to death before putting it live. J'ai utilisé ce plugin pour deux semaines, afin que je puisse hack et de tester mon nouveau thème de la mort avant de le mettre en direct. You see, it allows you to set a theme that only the admin will see when logged into the Wordpress. Vous voyez, il vous permet de définir un thème que seule l'admin verront lorsque connecté à la 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. Donc, tant que vous êtes connecté, vous verrez le nouveau thème personnalisé que vous êtes bâtiment, mais l'ensemble de vos visiteurs verront la régulière.

Creating Your Own WP Theme from a Copy Créer votre propre thème WP à partir d'une copie

Now login to your web site in FTP and download the theme you’re using now to your desktop. Maintenant vous connecter à votre site Web en FTP et télécharger le thème que vous utilisez maintenant à votre bureau. Give the folder a unique name like “custom-theme” or something. Donnez le dossier un nom unique comme «coutume-thème" ou quelque chose. 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). Je vais vous montrer comment créer votre propre thème en commençant à modifier une deuxième copie d'une vous utilisez actuellement (mais sans que personne ne vous le savoir). Now, using Notepad (or any text editor) open the “style.css” file. Maintenant, en utilisant le Bloc-notes (ou n'importe quel éditeur de texte) ouvert le "style.css" fichier. At the top of the file are some comment lines. Au début du fichier sont quelques lignes de commentaire. 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. Lorsque vous passez à la section «Présentation -> Themes" dans votre tableau de bord de Wordpress, les titres et les descriptions des thèmes que vous avez installé proviennent de la "style.css" fichier de ces thèmes. The style file you just opened should already have comments like this as the first few lines like this: Le style de fichier que vous venez d'ouvrir devrait déjà avoir des commentaires comme ce que les premières lignes comme ceci:

 /* 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. Modifier toutes les lignes avec vos propres informations, supprimer les "screenshot.png" fichier depuis le dossier, puis de télécharger le dossier entier à votre thème dans le répertoire FTP. If you have a graphics editor, you could instead open the screenshot file and modify it to go with your theme. Si vous avez un éditeur graphique, vous pourriez plutôt ouvrir le fichier de capture d'écran et de le modifier pour aller avec votre thème. I created a custom one so I could tell my backup from my live one like this: J'ai créé une coutume est si je pouvais dire à mes sauvegarde de mon vivre comme ceci:

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab. Une fois que vous avez envoyé le dossier au thème de votre répertoire, revenir à votre tableau de bord et WP "Présentation -> Thèmes" onglet. Your new theme should now be an option. Votre nouveau thème devrait maintenant être une option. 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. Si vous avez également créé un "screenshot.png" (ce doit être exactement ce que) et transféré dans le dossier trop - la nouvelle image de votre thème sera affiché ainsi que dans mon exemple ci-dessus.

How to Test a Wordpress Theme as Admin Only Comment mettre à l'essai un thème Wordpress Seuls administrative

Now, enable the “Theme Test Drive” plugin you downloaded and installed if you haven’t already. Maintenant, activez le "Theme Test Drive" plugin que vous avez téléchargé et installé si vous ne l'avez pas déjà. Go to “Presentation -> Theme Test drive”, choose your new theme from the dropdown and click the “enable” button. Aller à la "Présentation -> Thème Test Drive", choisissez votre nouveau thème dans la liste déroulante et cliquez sur l'option "Activer" bouton.

That’s it - now your ready to start theme hacking! C'est elle - maintenant votre prêt à commencer thème hacking! Go to the “Presentation -> Theme Editor” tab and in the drop down menu your “current” theme will be listed like this: Allez à la "Présentation -> Theme Editor" et l'onglet dans le menu déroulant de votre «courant» thème sera répertorié comme ceci:

That’s my current theme everyone sees. C'est mon thème tout le monde voit. 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: Avant de commencer l'édition de l'essai thème que je vais voir que j'ai besoin d'admin pour passer à celui de l'éditeur de thème comme ceci:

Now in the right hand list of files, find the one labeled “Main Index” and click on it. Maintenant dans la main droite de la liste des fichiers, trouver une marqués "Main Index" et cliquez sur celle-ci. 10 or 20 lines in you should see something like this: 10 ou 20 lignes, vous devriez voir quelque chose comme ceci:

 <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. Juste après la balise div entrée ajouter un tas de hasard texte, enregistrez le fichier, et dans un autre onglet ou fenêtre de votre navigateur charge votre page d'accueil du blog. Does it contain the random text? Contient-il le texte aléatoire? If it does - great! Si c'est le cas - très bien! If not, go back and follow the directions again to see what you did wrong. Si non, revenez en arrière et de suivre les instructions de nouveau pour voir ce que vous avez fait de mal. 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 Maintenant, je ne sais pas combien de HTML et CSS code vous le savez - si vous avez besoin d'un référence veillez à visiter et les signets W3Schools which is a free online resource for web coding. qui est une ressource en ligne gratuite sur le Web de codage. They have a reference page for each and every tag, and many free tutorials. Ils ont une page de référence pour chaque balise, et de nombreux tutoriels libre.

What is the “Wordpress Loop”? Quel est le "Loop Wordpress"?

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. En fonction de la quantité HTML et CSS code vous le savez (et sont prêts à mess avec) maintenant vous supprimez le texte aléatoire et commencer à déconner avec votre thème. 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. Rappelez-vous - que vous pouvez voir les changements (pendant que vous êtes connecté en tant que admin), et vous pouvez même apporter des changements majeurs à la barre latérale, en-tête et pied de page. The code I just showed you is what puts the posts on the main page. Le code que j'ai montré tout ce que vous met les postes sur la page principale. Not the titles or meta information, just the post content itself. Pas les titres ou les méta informations, juste après le contenu lui-même. You home page (Main Index) contains a “loop”. Vous page d'accueil (Index) contient une "boucle". It’s called the “Wordpress loop” because by default your Main Index shows 10 posts. On l'appelle la "boucle Wordpress" parce que par défaut l'index principal de votre montre 10 postes. 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. Le code PHP pour la regarder dit essentiellement (en anglais) "une fois que vous trouverez la première postes, faire ces choses et plus jusqu'à ce que vous atteignez le dixième poste. 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. Donc, si vous mettez quelque chose "dans la boucle" (comme une image ou un texte) est de l'affichage sur votre page d'index général 10 fois avant ou afer le contenu de chaque poste en commençant par le premier jusqu'à ce qu'il atteint le dernier.

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”. Je te dis cela parce que si vous voulez un graphique en haut de votre page avant les postes (comme le mien), vous devez le placer avant la boucle ". 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”. Si vous le souhaitez après tous les postes, comme le 336 × 280 annonce au bas de ma page d'index général, il doit se rendre "après la boucle". While EVERY theme is a bit different I this is what you look for: Bien que chaque thème est un peu différent, je c'est ce que vous recherchez:

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

The Wordpress loop starts with the have_posts line and ends with the endwhile line. Wordpress La boucle commence avec le have_posts ligne et se termine avec la endwhile ligne. Before and after those 2 lines would be “before and after the loop”. Avant et après ces 2 lignes serait "avant et après la boucle". Somewhere in between those 2 lines would be placing something “in the loop”. Quelque part entre ces 2 lignes serait mise quelque chose "dans la boucle". I wanted to explain this to you before you started hacking around and wondered why your changes showed up in weird place. Je voulais expliquer ce qui vous avant de commencer autour de piratage et se demande pourquoi vos modifications montré en mauvaise passe. 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. Pour la pratique, essayez d'ajouter une sorte de code ou un script d'une annonce (ou juste une image liée si vous connaissez le code) avant ou après la boucle principale sur votre page d'index. 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. Si vous êtes nouveau à ce qu'elle est bonne pratique, et vous devriez comprendre pourquoi un si grand nombre d'entre nous hack notre thème à la main - c'est tout simplement impossible d'avoir un plugin pour chaque petite modification que vous souhaitez apporter.

Your First Wordpress Theme Hack Votre premier thème Wordpress Hack

Now I’m going to teach you your first real ‘hack’. Maintenant, je vais vous apprendre votre première véritable «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. Disons que vous voulez montrer une sorte de texte, image, ou une annonce plus bas de votre page d'index général, mais pas avant ou après "la boucle" et non pas après tout 10 postes. You have to insert a line of code to tell “the loop” to display it only once (and where) Vous devez insérer une ligne de code pour dire "la boucle" pour l'afficher qu'une seule fois (et où)

 <?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 première ligne est celle que vous copiez et collez-la dans votre fichier d'index principale, avant de mettre le compte et endwhile lignes comme dans mon exemple. 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”. Cette ligne de code PHP dit à la boucle (en anglais) «pendant que vous compter, après le deuxième poste d'imprimer le contenu de l'index principal ad.php-fichier". 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. Cela signifie bien sûr, vous devez créer un fichier appelé «Main-index-ad.php» (ou ce que vous voulez l'appeler) et ajouter le script ou le code ou ce que vous voulez mettre après le second poste. Make the change in your Main Index file and “save”. Faire le changement dans votre fichier d'index et de "sauver". Upload the main-index-ad.php file to your theme folder, and then reload your home page to test your very first theme hack. Transférer la main-index-ad.php fichier sur votre dossier thème, puis rechargez votre page d'accueil de tester votre tout premier thème hack. Did it work? At-elle le travail?

So far, we’ve been working on only the “Main Index” or index.php file for theme hacks. Jusqu'à présent, nous avons travaillé seulement sur la "Main Index" ou fichier index.php pour thème hacks. 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. Bien que chaque thème est un peu différent, presque tout le monde a une grande Index, un seul poste, un fichier de page, 404 modèle (fichier introuvable), la barre latérale (parfois 2), Commentaires, et la page Archives. Some themes also have a Category page, but if they don’t the Archives.php page will be used for category pages too. Certains thèmes ont également une page de catégorie, mais si elles ne sont pas la page d'Archives.php sera utilisé pour la catégorie des pages trop. 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. Je insister sur ce point parce que si vous annonce quelque chose à la page d'accueil, vous souhaiterez peut-être aussi à apparaître sur des postes, ou des pages, des pages ou de la catégorie. Like in the previous example you might consider making several files with ads, text, or images and uploading them to your theme directory. Comme dans l'exemple précédent, vous pourriez envisager de faire plusieurs fichiers avec des annonces, un texte ou d'images et de les transférer vers votre répertoire de thème. You can use the same line of code in the previous example to include any file before or after the loop. Vous pouvez utiliser la même ligne de code dans l'exemple précédent pour inclure un fichier avant ou après la boucle. Just remove the count statement like this: Il suffit de supprimer le compte déclaration comme ceci:

 <?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. Il est beaucoup plus intelligente des choses à ajouter à vos pages avec un dossier comme celui-ci si elle va être en plusieurs lieux. Otherwise, you have to manually modify multiple files. Sinon, vous devez modifier manuellement les dossiers multiples. If you do it like this, in the future when you need to change that content, you just edit the one file. Si vous le faites comme ça, dans l'avenir quand vous en avez besoin pour en modifier le contenu, vous n'avez qu'à modifier les fichiers.

Your Second Wordpress Theme Hack Votre deuxième thème 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. Pour un bon moment j'avais voulu ajouter le commentaire compter mon poste sous titres sur ma page d'index où ils seraient en fait liés à poster un commentaire. Oh - an I wanted a little comment graphic beside them too. Oh - un je voulais un peu de commentaires à côté d'eux graphique trop. Basically “inside the loop” you just add the following PHP code somewhere are your post title: Essentiellement "à l'intérieur de la boucle" que vous venez d'ajouter le texte suivant du code PHP sont quelque part le titre de votre poste:

 <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 première ligne est le code dont vous avez besoin de trouver «dans la boucle", qui imprime le titre après titre. Your may look slightly different, just look for “the_title” in the line. Votre mai légèrement différentes, juste pour regarder "the_title" dans la ligne. Right after that paste the two lines in my example. Immédiatement après que la pâte les deux lignes dans mon exemple. You’ll meed to modify the first line with the name of and correct path to your comment icon. Vous Meed de modifier la première ligne avec le nom de chemin d'accès et de rectification à votre commentaire icône. You’ll need to create one or find a free suitable one on the web. Vous aurez besoin de créer un ou trouver un libre approprié sur le Web.

Adding a plugin to do the Hacking for You Ajout d'un plugin pour faire le Hacking pour vous

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. Il ya encore un certain nombre de choses que Wordpress "ne fera pas" ce que je préfère avoir sur mon blog qui sont facilement ajoutée avec un plugin. For most of these things I use Pour la plupart de ces choses-je utiliser Lester Chan’s Wordpress Plugins Lester Chan plugins Wordpress . 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. J'utilise WP-PageNavi de la barre de navigation en bas de ma page d'accueil, a remplacé l'horrible "précédent" et "suivant" wordpress par défaut les liens de navigation avec elle. I use WP-PostRatings for the star voting on each post. J'utilise WP-PostRatings pour l'étoile au vote sur chaque poste. WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar. WP-Post Vues affiche les messages pour chaque poste, en plus de la «plus vus" des postes dans mon encadré. The WP-Print plugin is for the printer friendly page link for posts. Le GT-Print est plugin pour la page imprimable lien pour les postes. 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. Avec tous ces Lester Chan Wordpress plugins, une fois que vous installer et activer eux, tout ce que vous avez à faire est de copier et coller la ligne de code PHP sur les pages et les lieux que vous voulez le plugin pour afficher quelque chose. You get that code on the documentation “usage” page for each plugin on Lester’s site. Vous recevez ce code sur la documentation "usage" pour chaque plugin sur le site de Lester. 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. Après avoir fait les deux premiers hacks, il devrait être assez facile d'ajouter le code de votre modèle de pages pour le plugin hacks au travail.

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. En plus des plugins Lester Chan, sur mes pages après les postes sur ma page principale, vous verrez quelques options pour le visiteur comme "abonner à ce flux", "cet e-mail", "ce digg", etc, ces caractéristiques en fait venir de Feedburner. I know on a lot sites I see people adding a “social” plugin to display a bazillion options for all the tagging sites. Je sais beaucoup sur les sites que je vois les gens l'ajout d'un "social" plug-in pour afficher une bazillion options pour tous les sites de marquage. 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. Feedburner-je utiliser pour mon alimentation (comme la plupart des blogueurs ne), et ils ont un "Feedburner Feedsmith" plugin qui ajoutera que «FLARE» après vos messages - qui, je pense, ont beaucoup plus utile que toute les options social autour de plugin. If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well. Si vous téléchargez et permettre à ce plugin à partir de Feedburner, vous devez ajouter le code PHP fourni à votre modèle ainsi.

Hacking Your Theme Stylesheet Hacking thème de votre feuille de style

Your stylesheet contains all properties of all the colors and sizes of items on your blog. Votre feuille de style contient toutes les propriétés de toutes les couleurs et la taille des articles sur votre blog. It has background and link colors, font sizes, bold, italics, you name it. Il a un lien historique et les couleurs, les tailles de police, gras, italique, il vous nom. In your dashboard theme editor click on “Stylesheet” to bring up this file. Dans votre tableau de bord éditeur de thème, cliquez sur "stylesheet" pour mettre en place ce fichier. 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. Il est le même que celui que vous avez ajouté le thème de propriétés sur votre ordinateur dans un éditeur de texte au tout début de cet article. 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. VOTRE feuille de style est plus que probable va être complètement différent que le mien, et l'édition, il ne sera pas aussi facile que la précédente copier et coller des hacks. What you need to know is that every web page is a “document” that has “elements”. Ce que vous devez savoir est que chaque page Web est un "document" qui a "éléments". 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”. Les éléments de configuration sont dans un "modèle de boîte", et des articles comme div, de paragraphes (p), travées, le corps, les en-têtes (h), blockquote, et la liste des balises (ul, ol, li ou underordered liste, liste ordonnée, et la liste) sont tous les "boîtes". In CSS code everything “nests” and “properties” can be assigned to elements at any level. En tout code CSS "nid" et "propriétés" ne peut être attribué à des éléments à tous les niveaux. Here’sa diagram example: Voici un diagramme exemple:

That image is an example of how all the boxes would look if you drew them all out. Cette image est un exemple de la façon dont toutes les cases serait si vous appelle tous à. Here’s how those boxes look as (well formatted) HTML code: Voici comment les regarder comme des boîtes (bien formaté) code HTML:

 <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. Je voulais vous à visualiser ce que vous avez commencé avant le piratage afin de style, vous savez sur la façon dont fonctionne la nidification. If you change the (font) “color” to grey at the “body” level all the text on the page will be grey. Si vous modifiez la (police) "couleur" gris au "corps" niveau de l'ensemble du texte sur la page de couleur grise. 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. Si vous aussi vous changer la couleur de police au vert à la "li" ou élément de la liste niveau, tout le texte sur la page sera gris à l'exception des éléments de liste, qui sera vert. 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. Si vous changez le paragraphe ou "P" couleur de police au rouge, puis les deux P et UL texte sera rouge, la LI texte sera vert, mais le reste du corps et div texte ci-dessus de ces niveaux sera toujours gris. This is called “inheritance”, and properties start at the highest level and stay that property until changed lower down the nesting chain. C'est ce qu'on appelle "l'héritage", et les propriétés commencer au plus haut niveau et le rester jusqu'à ce que la propriété a changé plus bas de la chaîne de nidification.

The first thing you might want to hack is your link colors and properties. La première chose que vous voudrez peut-être hack est votre lien couleurs et propriétés. There are sooooo many ways to change your links to make them stand out. Sooooo Il existe de nombreuses façons de changer vos liens pour les faire ressortir. A hyperlink is an “a” or anchor tag. Un lien hypertexte est un "a" ou balise ancre. There are 3 states of a link which are normal, visited, and hover. Il existe 3 états d'un lien qui est normal, s'est rendu, et le vol stationnaire. Normal is what the color of the link is before you click it. Normal, c'est ce que la couleur du lien avant de cliquer sur elle. Visited is the color of the link once you’ve visited it. Visités est la couleur du lien une fois que vous avez visité. And hover is the color of the link when your mouse goes over it. Et le vol stationnaire est la couleur du lien lorsque la souris passe dessus. For all three of these states of a link you can change the color, text-decoration, background, and many other properties. Pour tous les trois de ces états d'un lien, vous pouvez modifier la couleur, text-decoration, arrière-plan, et de nombreuses autres propriétés. In my stylesheet I have entries to change link properties for the entire body of all my pages like this: Dans ma feuille de style que j'ai entrées pour changer les propriétés de lien pour l'ensemble de toutes mes pages comme ceci:

 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). Comme vous pouvez le voir, vous pouvez modifier la couleur pour les 3 différents états de liens, vous pouvez modifier le texte de décoration (pour un Etat), ou la couleur de fond (pour un Etat). You can also leave any of these properties out. Vous pouvez également laisser l'une de ces propriétés à. For the text decoration property you could use any of these values: solid, underline, overline, line-through, none, dotted, or dashed. Pour le texte de propriété décoration vous pouvez utiliser l'une de ces valeurs solides, souligner, overline, par le biais de la ligne-, zéro, en pointillé, ou déçus. 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: Bien que mon code exemple ci-dessus contrôle la couleur d'un lien pour l'ensemble d'un corps d'une page, vous pouvez également les modifier à tout niveau, comme peut-être l'encadré:

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

Experiment by modifying the link colors in your stylesheet now. Expérience en modifiant les couleurs lien dans votre feuille de style maintenant. Then experiment further by changing font sizes and colors. Ensuite, l'expérience plus loin en changeant la taille des polices et des couleurs. To find cool color schemes to change colors of text, links, or backgrounds Pour trouver cool de couleurs pour changer les couleurs de texte, des liens, ou fonds Use this CSS color chart for reference Utilisez ce tableau CSS couleur de référence . 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. C'est probablement la meilleure carte de couleur que j'ai vu depuis des années, principalement parce qu'il est basé sur les couleurs pantone bande de peinture et des échantillons d'une quincaillerie.

The last wordpress theme hack (in this article) I’ll show you is for headings. Le dernier thème wordpress hack (dans cet article) Je vais vous montrer est pour les rubriques. 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. Une rubrique est un "H" comme tag <H1> <H2> <H3> <H4>, etc Chaque poste doit avoir un (titre) position, et chaque widget ou de l'article dans votre barre latérale a un cap. 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. Comme indiqué plus tôt dans mon schéma - une rubrique est une «boîte» et que la case a des propriétés, comme toile de fond, de remplissage, marge, (texte) de couleur, (lien) couleur, frontalier, border-style, et plus encore. By default in Wordpress the post headers are just linked text. Par défaut, Wordpress dans l'après-têtes sont liées texte. 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. Alors que c'est ok, comme vous pouvez le voir sur ma page principale de mon poste et les pages que je préfère une bordure noire, une couleur de fond, et certains de remplissage. In my sidebar I gave the sections headings a background image, a bottom border, and some margines. Dans ma barre latérale, j'ai donné les sections rubriques une image de fond, une bordure inférieure, et certains margines. The list elements also have a bottom border. La liste des éléments ont aussi une bordure inférieure.

 #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. Dans le code exemple ci-dessus, je vous ai montré la quasi-totalité de Ma barre des propriétés de style afin que vous puissiez vous faire une idée des différentes façons dont vous pouvez personnaliser un en-tête et élément de la liste. You can see how I gave the sidebar H2 header a backround image instead of just a color. Vous pouvez voir la façon dont j'ai donné la barre latérale H2-tête une image de fond au lieu de simplement une couleur. This the code I used to format the properties of the post headings: C'est le code que j'ai utilisé pour formater les propriétés de la poste rubriques:

 .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. Au lieu de simplement lié texte, j'ai donné mon poste rubriques une couleur de fond de gris, un solide 1 pixel noir, et certains rembourrage sur les côtés gauche et droit. Now I think it’s much easier to see where one post ends an the next begins on my pages. Maintenant, je pense que c'est beaucoup plus facile de voir où se termine un poste un début de la prochaine sur mes pages.

Use What You’ve Learned to Hack Your Theme More Utilisez ce que vous avez appris à votre thème Hack plus

I’ve give you a way to hack away at your Wordpress theme without changing how your visitor’s see it. Je vous donne un moyen de loin ficelle à votre thème Wordpress sans changer la façon dont votre visiteur de le voir. I’ve told you about the Wordpress loop, and how to add things before, after, and inside it. Je vous avez dit au sujet de la boucle de Wordpress, et comment ajouter des choses avant, après, et à l'intérieur d'elle. 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. Nous piraté et ajout de code PHP, puis piraté notre thème feuille de style à modifier les propriétés d'affecter la mise en page et la conception de la page. 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! Je ne peux pas vous apprendre tout ce que vous devez savoir pour créer votre propre thème personnalisé ensemble dans un seul poste - mais je peux vous aider à démarrer! Now you know enough about Wordpress themes to be dangerous and customize your own. Vous en savez assez maintenant sur Wordpress thèmes à être dangereux et personnaliser votre propre. Visit and bookmark Visite et signet W3Schools.com for your HTML and CSS reference needs. de votre code HTML et CSS de référence besoins. Research and read more articles explaining how to hack and customize your Wordpress theme further like the La recherche et de lire plus d'articles expliquant la manière de modifier et personnaliser votre thème Wordpress comme la plus tutorials at WPDesigner.com didacticiels à WPDesigner.com .

Please comment if this article helped you, you had a question, or a great worpress theme hack or customization to add! S'il vous plaît commentaire si cet article vous a aidé, vous avez une question, ou un grand thème worpress hack ou de personnalisation pour ajouter! I hope you found this information valuable - if so please feel free to bookmark, digg, and stumble this page! J'espère que vous avez trouvé cette information utile - si tel est le cas s'il vous plaît sentir que libre à vos favoris, digg, et trébucher cette page!

Tags: tutorial tutoriel , wordpress-hack