How to Create Your Own Wordpress Theme So erstellen Sie Ihre eigenen Wordpress Theme

Have you ever wanted to create your own custom wordpress theme? Haben Sie sich jemals gewünscht, um Ihre eigenen WordPress Thema? 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… Ich zeige Ihnen, wie Sie lernen zu hacken weg auf eigene WP Thema in diesem Tutorial in nur wenigen Minuten ...

This is the second installment in the Dies ist die zweite Tranche in der Managing Wordpress More Effectively Series Verwalten von Wordpress effektiver 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! - So können Sie Kontrolle über Ihr Blog und auswringen jeden letzten Bit aus der Sie den Inhalt und die Besucher, sparen Sie Zeit und machen Sie mehr Geld!

If you’re a regular reader of this blog, you might notice that JTPratt’s Blogging Mistakes now has a new theme! Wenn Sie ein regelmäßiger Leser dieses Blogs sind, können Sie feststellen, dass JTPratt's Bloggen Fehler hat nun ein neues Thema! 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. Ich denke, dass ein Blog wächst mit dem Blogger, und der größte Fehler können Sie nicht ändern Sie Ihr Blog, um Ihre Fortschritte. I started out in 2007 with a really nice theme (Prosense), because it did most of what I wanted and looked professional. Ich begann in 2007 mit einem wirklich netten Thema (Prosense), weil er das meiste, was ich wollte und sah professionell. But I hacked and hacked and hacked it some more to slowly get rid of things I didn’t like. Aber ich gehackt und gehackt und gehackt es einige mehr zu langsam loswerden Dinge, die ich nicht mochte. Finally - I just had to say enough is enough and create my own Wordpress theme just exactly the way I wanted it. Schließlich - ich hatte nur zu sagen, genug ist genug, und erstelle ich meine eigene Wordpress Thema nur genau so, wie ich es wollte.

Wordpress Theme Hacking Wordpress Thema Hacking

If you’re curious and you know some HTML and CSS (even just enough to be dangerous) this guide was made for you. Wenn Sie neugierig und Sie wissen, einige HTML-und CSS (auch nur genug, um gefährlich werden) dieses Leitfadens wurde für Sie. 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”. Dies ist kein Definitive Guide oder etwas, aber es bringt Sie begonnen, und ich bin sicher, es wird Ihnen einige gute Ideen, Ihren eigenen "custom Wordpress Thema". This is the “How to Create Your Own Wordpress Theme” tutorial, or “How to Hack Wordpress Themes”. Dies ist das "How to Create Your Own Wordpress Thema" Tutorial, oder "How to Hack Wordpress Themes". The first thing you need to do is get the Das erste, was Sie tun müssen, ist die Theme Test Drive Thema Test Drive plugin. Plugin. I used this plugin for two weeks, so I could hack and test my new theme to death before putting it live. Ich habe dieses Plugin für zwei Wochen, so konnte ich Hack und testen Sie mein neues Thema zu Tode, bevor sie es leben. You see, it allows you to set a theme that only the admin will see when logged into the Wordpress. Sie sehen, können Sie es um ein Thema, dass nur der Admin sehen, wenn angemeldet in der 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. Also, solange Sie angemeldet sind, sehen Sie das neue benutzerdefinierte Thema Sie Gebäude, sondern alle Ihre Besucher werden sehen, die regelmäßig ein.

Creating Your Own WP Theme from a Copy Erstellen Sie Ihre eigene WP Thema aus einer Kopie

Now login to your web site in FTP and download the theme you’re using now to your desktop. Jetzt anmelden um Ihre Web site in FTP-und Download des Themas Sie jetzt auf Ihren Desktop. Give the folder a unique name like “custom-theme” or something. Geben Sie dem Ordner einen eindeutigen Namen wie "custom-Thema" oder so etwas. 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). Ich werde Ihnen zeigen, wie Sie Ihr eigenes Thema, indem Sie zum Bearbeiten einer zweiten Kopie der ein Sie derzeit mit (ohne dass jemand aber Sie wissen es). Now, using Notepad (or any text editor) open the “style.css” file. Jetzt, mit dem Editor (oder einem beliebigen Text-Editor) öffnen Sie die "style.css"-Datei. At the top of the file are some comment lines. Am Anfang der Datei werden einige Kommentar Linien. 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. Wenn Sie auf "Präsentation -> Themes" in Ihrem Wordpress Armaturenbrett, die Titel und Beschreibungen von Themen, die Sie installiert haben, stammen aus der "style.css"-Datei von diesen Themen. The style file you just opened should already have comments like this as the first few lines like this: Der Stil Datei, die Sie gerade geöffnet haben sollte bereits Bemerkungen wie diese, wie die ersten paar Zeilen wie folgt aussehen:

 /* 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. Ändern Sie alle diese Linien mit Ihren eigenen Informationen, löschen Sie die "screenshot.png"-Datei aus dem Ordner, und dann die gesamte Upload-Ordner zurück zu Ihrem Thema in FTP-Verzeichnis. If you have a graphics editor, you could instead open the screenshot file and modify it to go with your theme. Wenn Sie eine Grafik-Editor, können Sie statt öffnen Sie die Screenshot-Datei und modifizieren Sie gehen mit Ihrem Thema. I created a custom one so I could tell my backup from my live one like this: Ich habe ein benutzerdefiniertes ein so dass ich sagen könnte, mein Backup von meinem leben ein wie folgt aus:

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab. Sobald Sie hochgeladen haben den Ordner zu Ihrem Thema Verzeichnis, gehen Sie zurück zu Ihren WP Armaturenbrett und "Präsentation -> Themes"-Registerkarte. Your new theme should now be an option. Ihr neues Thema sollte nun eine 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. Wenn Sie auch ein "screenshot.png" (es muss den Namen genau das) und zur Verfügung gestellt sie in den Ordner zu - das neue Bild von Ihrem Thema wird sich zeigen, wie auch in meinem Beispiel oben.

How to Test a Wordpress Theme as Admin Only Wie bei Test ein Wordpress Theme als Admin Nur

Now, enable the “Theme Test Drive” plugin you downloaded and installed if you haven’t already. Nun, damit das "Theme Test Drive"-Plugin Sie heruntergeladen und installiert, wenn Sie noch nicht getan haben. Go to “Presentation -> Theme Test drive”, choose your new theme from the dropdown and click the “enable” button. Gehen Sie zu "Präsentation -> Thema: Test Drive", wählen Sie Ihr neues Thema aus der Dropdown-Liste und klicken Sie auf "Enable"-Taste.

That’s it - now your ready to start theme hacking! Das war's - jetzt Ihr bereit, Thema Hacking! Go to the “Presentation -> Theme Editor” tab and in the drop down menu your “current” theme will be listed like this: Gehen Sie auf die "Präsentation -> Theme Editor" Registerkarte und in der Drop-down-Menü Ihrer "aktuellen" Thema aufgeführt werden soll wie folgt aussehen:

That’s my current theme everyone sees. Das ist meine aktuellen Thema jeder sieht. 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: Bevor ich beginne die Bearbeitung der Test Thema nur ich werde sehen, wie admin Ich brauche, um in den, dass ein in das Thema Editor wie folgt aus:

Now in the right hand list of files, find the one labeled “Main Index” and click on it. Jetzt in der rechten Hand Liste der Dateien, die ein der Aufschrift "Main Index", und klicken Sie auf es. 10 or 20 lines in you should see something like this: 10 oder 20 Zeilen in, solltest du etwas davon:

 <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. Gleich nach der div Eintrag hinzufügen Tag eine Menge von zufälligen Text, speichern Sie die Datei, und in einem anderen Tab oder Browser-Fenster laden Ihr Blog home page. Does it contain the random text? Handelt es sich um die zufälligen Text? If it does - great! Wenn dies der Fall ist - great! If not, go back and follow the directions again to see what you did wrong. Wenn nicht, gehen Sie zurück und folgen Sie den Anweisungen erneut, um zu sehen, was Sie falsch gemacht haben. 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 Nun weiß ich nicht, wie viel HTML-und CSS-Code Sie wissen - so, wenn Sie einen Verweis sicher sein, zu besuchen und Lesezeichen W3Schools which is a free online resource for web coding. das ist ein kostenloser Online-Quelle für Web-Programmierung. They have a reference page for each and every tag, and many free tutorials. Sie haben eine Referenz-Seite für jeden Tag, und viele freie Tutorials.

What is the “Wordpress Loop”? Was ist die "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. Je nachdem, wie viel HTML-und CSS-Code, den Sie kennen (und sind bereit, mit Chaos) jetzt entfernen Sie die zufälligen Text und starten Messing um mit Ihrem Thema. 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. Denken Sie daran - nur Sie sehen können, die Änderungen (während Sie unterwegs sind angemeldet als admin), und Sie können sogar größere Änderungen an der Sidebar, Kopf-und Fußzeilen. The code I just showed you is what puts the posts on the main page. Der Code Ich habe gerade gezeigt, ist das, was Sie legt die Beiträge auf der Hauptseite. Not the titles or meta information, just the post content itself. Nicht die Titel oder Meta-Informationen, nur die Post selbst Inhalte. You home page (Main Index) contains a “loop”. Sie home page (Main Index) enthält eine "Schleife". It’s called the “Wordpress loop” because by default your Main Index shows 10 posts. Es heißt die "Wordpress-Loop", weil standardmäßig Ihre Main-Index zeigt, 10 Stellen. 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. Der PHP-Code für das Aussehen im Grunde sagt (in englischer Sprache) ", wenn Sie die ersten Stellen, tun diese Dinge immer und immer bis zur zehnten Stelle. 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. Wenn Sie also etwas "im Loop" (wie ein Bild oder Text) ist die Anzeige auf Ihrem Hauptindex-Seite 10-mal vor oder afer den Inhalt für jeden Post beginnend mit dem ersten, bis sie an der letzten.

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”. Ich sage Ihnen das, weil, wenn Sie eine Grafik am oberen Rand Ihrer Seite, bevor die Stellen (wie meine) haben Sie, um sie "vor der Schleife". 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”. Wenn Sie wollen, dass es nach all den Stellen, wie die 336 × 280 Anzeige am unteren Rand meiner Hauptindex-Seite, sie hat zu gehen ", nachdem die Schleife". While EVERY theme is a bit different I this is what you look for: Während Jedes Thema ist ein wenig anders ich das ist es, was Sie suchen:

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

The Wordpress loop starts with the have_posts line and ends with the endwhile line. Die Wordpress-Schleife beginnt mit dem have_posts Zeile und endet mit dem endwhile Linie. Before and after those 2 lines would be “before and after the loop”. Vor und nach diesen 2 Zeilen wäre "vor und nach der Schleife". Somewhere in between those 2 lines would be placing something “in the loop”. Irgendwo zwischen diesen 2 Zeilen wäre Inverkehrbringen etwas "im Loop". I wanted to explain this to you before you started hacking around and wondered why your changes showed up in weird place. Ich wollte erklären, dass es sich hierbei um Sie, bevor Sie begann um Hacking und wunderte sich, warum Sie Ihre Änderungen zeigte sich in seltsamen Ort. 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. Für die Praxis, versuchen eine Art Code oder Skript für eine Anzeige (oder nur einem verknüpften Bild, wenn Sie wissen, den Code) vor oder nach der Schleife auf dem Hauptbild des Index-Seite. 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. Wenn Sie neu bei dieser ist es gute Praxis, und sollten Sie herauszufinden, warum so viele von uns Hack unsere Thema von Hand - es ist einfach unmöglich, dass ein Plugin für jede noch so kleine Änderung Sie machen wollen.

Your First Wordpress Theme Hack Ihre erste Wordpress Thema Hack

Now I’m going to teach you your first real ‘hack’. Jetzt werde ich zu lehren Sie Ihre erste echte "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. Nehmen wir an, Sie wollen zeigen, eine Art Text-, Bild-oder Ad weiter unten Ihre Hauptindex-Seite, aber nicht vor oder nach der "die Schleife" und nicht nach allen 10 Stellen. You have to insert a line of code to tell “the loop” to display it only once (and where) Sie haben, um eine Zeile Code zu sagen, "die Schleife", um es nur einmal (und wo)

 <?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. Die erste Zeile ist das ein kopieren Sie und fügen Sie diesen in Ihrer Main-Index-Datei, die sie vor dem Grafen und endwhile Linien wie in meinem Beispiel. 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”. Diese Zeile PHP-Code sagt, man soll die Schleife (in englischer Sprache) ", während Sie das Zählen, nach dem zweiten Post drucken Sie den Inhalt des Main-Index-ad.php Datei". 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. Dies bedeutet natürlich, müssen Sie eine Datei mit dem Namen "Main-Index-ad.php" (oder was auch immer Sie es genannt werden soll) und fügen Sie das Skript oder Code oder was auch immer Sie wollen nach dem zweiten Post. Make the change in your Main Index file and “save”. Nehmen Sie die Änderung in Ihrer Main-Index-Datei und "Speichern". Upload the main-index-ad.php file to your theme folder, and then reload your home page to test your very first theme hack. Laden Sie die Main-Index-ad.php Datei auf Ihrem Thema Ordner, und dann neu laden Ihre Homepage zum Testen Ihrer ersten Thema hacken. Did it work? Hat es funktioniert?

So far, we’ve been working on only the “Main Index” or index.php file for theme hacks. Bisher haben wir gearbeitet nur die "Main Index" oder index.php-Datei für Thema 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. Obwohl jedes Thema ist ein bißchen anders, fast jeder eins hat einen Hauptausschuss-Index, ein Single Post, ein Page-Datei, 404 Vorlage (Datei nicht gefunden), der Seitenleiste (manchmal auch 2), Kommentare, und Archiv-Seite. Some themes also have a Category page, but if they don’t the Archives.php page will be used for category pages too. Einige Themen haben auch eine Kategorie Seite, aber wenn sie nicht die Archives.php Seite werden für die Klasse auch die Seiten. 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. Ich darauf hinweisen, weil, wenn Sie Ad etwas auf der Homepage, können Sie auch wollen, dass er erscheint auf einzelne Beiträge oder Seiten, oder Kategorie Seiten. Like in the previous example you might consider making several files with ads, text, or images and uploading them to your theme directory. Wie im vorherigen Beispiel könnten Sie in Erwägung ziehen die mehrere Dateien mit Inseraten, Text oder Bilder hochladen und sie zu Ihrem Thema Verzeichnis. You can use the same line of code in the previous example to include any file before or after the loop. Sie können mit dem gleichen Code-Zeile in dem vorherigen Beispiel, um jede Datei vor oder nach der Schleife. Just remove the count statement like this: Entfernen Sie einfach die Anzahl Anweisung wie folgt aus:

 <?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. Es ist viel intelligenter, um Dinge zu Ihren Seiten mit einer Datei wie dieser, wenn es wird an mehreren Stellen. Otherwise, you have to manually modify multiple files. Andernfalls müssen Sie manuell ändern, mehrere Dateien. If you do it like this, in the future when you need to change that content, you just edit the one file. Wenn Sie es wie dieser, in die Zukunft, wenn Sie ändern müssen, dass Inhalte, die Sie gerade bearbeiten Sie die Datei ein.

Your Second Wordpress Theme Hack Ihre zweite Wordpress Thema 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. Für eine ganze Weile hatte ich wollte den Kommentar hinzufügen zählen unter meinem Post-Titel auf meiner Index-Seite, wo sie wäre im Zusammenhang mit tatsächlich einen Kommentar schreiben. Oh - an I wanted a little comment graphic beside them too. Oh - ein Ich wollte ein wenig Kommentar Grafik neben ihnen zu. Basically “inside the loop” you just add the following PHP code somewhere are your post title: Im Grunde "in der Schleife" Sie fügen Sie einfach die folgenden PHP-Code irgendwo sind Ihre Post-Titel:

 <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. Die erste Zeile ist der Code, den Sie brauchen, um "im Loop", die druckt die Post-Titel Position. Your may look slightly different, just look for “the_title” in the line. Ihre Mai etwas anders aussehen, nur nach "the_title" in der Zeile. Right after that paste the two lines in my example. Direkt nach, dass fügen Sie die beiden Zeilen in meinem Beispiel. You’ll meed to modify the first line with the name of and correct path to your comment icon. Sie meed zu ändern die erste Zeile mit dem Namen und der korrekten Pfad zu Ihrem Kommentar-Symbol. You’ll need to create one or find a free suitable one on the web. Müssen Sie ein oder finden Sie einen kostenlosen geeignet eins im Internet.

Adding a plugin to do the Hacking for You Hinzufügen eines Plugin zu tun, die Hacking für Sie

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. Es gibt noch ein paar Dinge, die Wordpress "geht nicht", was ich lieber auf meinem Blog, die einfach hinzugefügt mit einem Plugin. For most of these things I use Für die meisten dieser Dinge, die ich nutzen Lester Chan’s Wordpress Plugins Lester Chan's Wordpress Plugins . 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. Ich benutze WP-PageNavi für die Navigation am unteren Rand meiner Homepage, und ersetzt die schrecklich "altes" und "neben" default wordpress Navigation Links mit ihr. I use WP-PostRatings for the star voting on each post. Ich benutze WP-PostRatings für den Stern der Abstimmung über jeden Post. WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar. WP-Post Ansichten "zeigt die Post-Zähler für jeden Post, zusätzlich zu den" am meisten angesehen "Stellen in meiner Sidebar. The WP-Print plugin is for the printer friendly page link for posts. Die WP-Print-Plugin ist für den Drucker freundliche Seite Link für die Beiträge. 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. Mit all diesen Lester Chan Wordpress Plugins, sobald Sie zu installieren und zu aktivieren ist alles, was Sie zu tun haben, ist Kopieren und Einfügen von der Linie der PHP-Code auf den Seiten und von Orten, die Sie wollen, dass die Plugin, um etwas. You get that code on the documentation “usage” page for each plugin on Lester’s site. Sie erhalten diesen Code auf die Dokumentation "Nutzung"-Seite für jedes Plugin Lester auf der Website. 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. Nach den ersten zwei Hacks, sollte es recht einfach, um den Code zu Ihrer Vorlage Seiten für das Plugin Hacks zu arbeiten.

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. Zusätzlich zu den Lester Chan-Plugins, auf meinen Seiten nach den Stellen auf meinem Haupt-Seite sehen Sie einige Optionen für die Besucher ist wie "Abonnieren Sie diesen Feed", "E-Mail dieses", "Digg this", etc. Diese Funktionen tatsächlich stammen aus Feedburner. I know on a lot sites I see people adding a “social” plugin to display a bazillion options for all the tagging sites. Ich weiß über eine Menge Websites Ich sehe Menschen eine "soziale"-Plugin, um eine bazillion Optionen für alle die Tagging-Sites. 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. Ich verwende für meine Feedburner Feed (wie die meisten Blogger tun), und sie haben ein "Feedburner Feedsmith" Plugin, wird hinzufügen, dass "Fackel" nach Ihren Posts - Ich denke, die haben viel mehr hilfreiche Optionen als alle sozialen Plugin um. If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well. Wenn Sie herunterladen und damit, dass Plugin von Feedburner, müssen Sie zuerst die mitgelieferten PHP-Code zu Ihrer Vorlage als gut.

Hacking Your Theme Stylesheet Hacking Ihr Thema Stylesheet

Your stylesheet contains all properties of all the colors and sizes of items on your blog. Ihr Stylesheet enthält alle Eigenschaften von allen Farben und Größen der Elemente in Ihrem Blog. It has background and link colors, font sizes, bold, italics, you name it. Es hat Hintergrund und Link Farben, Schriftgrößen, fett, kursiv, Sie nennen Sie sie. In your dashboard theme editor click on “Stylesheet” to bring up this file. In Ihrem Dashboard Theme Editor klicken Sie auf "Stylesheet", um diese Datei. 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. Es ist das gleiche ein von Ihnen hinzugefügte das Thema Immobilien zu auf Ihrem Computer in einem Text-Editor ganz am Anfang dieses Artikels. 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. Ihr Stylesheet ist mehr als wahrscheinlich werden soll völlig anders als meine, und die Bearbeitung ist, wird es nicht so einfach wie die früheren Kopieren und Einfügen von Hacks. What you need to know is that every web page is a “document” that has “elements”. Was Sie wissen müssen ist, dass jede Web-Seite ist ein "Dokument", die "Elemente". 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”. Die Elemente sind Setup in einem "Box-Modell", und Elemente wie div's, Absätze (p's), überspannt, den Körper, Rubriken (h's), blockquote, und Liste-Tags (ul, ol, li oder underordered Liste, geordnete Liste, und in der Liste) sind alle "Boxen". In CSS code everything “nests” and “properties” can be assigned to elements at any level. Im CSS-Code alles "Nester" und "Eigenschaften" zugeordnet werden kann Elemente auf allen Ebenen. Here’sa diagram example: Hier Diagramm Beispiel:

That image is an example of how all the boxes would look if you drew them all out. Das Bild ist ein Beispiel dafür, wie alle Felder aussehen, wenn Sie zog sie alle aus. Here’s how those boxes look as (well formatted) HTML code: Hier ist, wie diese aussehen, als Boxen (auch formatiert) 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. Ich wollte Sie zu visualisieren, bevor Sie begann Stylesheet Hacking, so dass Sie wissen, würde darüber, wie Verschachtelung funktioniert. If you change the (font) “color” to grey at the “body” level all the text on the page will be grey. Wenn Sie die (Schrift) "Farbe" zu grau an der "Stelle" Ebene alle den Text auf der Seite wird grau. 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. Wenn Sie auch die Schriftfarbe auf grün an der "li" oder Elements in der Liste Ebene, die alle den Text auf der Seite wird grau mit Ausnahme der Listeneinträge werden, die den green. 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. Wenn Sie den Absatz oder "p" Schriftfarbe auf rot, dann sowohl die P-und UL-Text wird rot, die LI Text wird grün, aber der Rest des Körpers und div Text über diesen Ebenen immer noch grau. This is called “inheritance”, and properties start at the highest level and stay that property until changed lower down the nesting chain. Dies wird als "Erbe", und starten Eigenschaften auf höchstem Niveau und bleiben, dass das Eigentum erst geändert unteren Festlegung der Verschachtelung Kette.

The first thing you might want to hack is your link colors and properties. Das erste, was möchten Sie vielleicht Hack ist Ihr Link Farben und Eigenschaften. There are sooooo many ways to change your links to make them stand out. Es gibt sooooo viele Möglichkeiten, ändern Sie die Links, um sie abheben. A hyperlink is an “a” or anchor tag. Ein Hyperlink ist ein "a" oder Anker-Tag. There are 3 states of a link which are normal, visited, and hover. Es gibt 3 Staaten einen Link, die normal sind, besucht, und schweben. Normal is what the color of the link is before you click it. Normal ist es, was die Farbe der Verbindung ist, bevor Sie darauf klicken. Visited is the color of the link once you’ve visited it. Besucht ist die Farbe der Verbindung, wenn Sie besucht haben, es. And hover is the color of the link when your mouse goes over it. Und Hover ist die Farbe der Verbindung, wenn Sie mit der Maus über sie geht. For all three of these states of a link you can change the color, text-decoration, background, and many other properties. Für alle drei dieser Staaten einen Link können Sie die Farbe, Text-Dekoration, Hintergrund, und viele andere Eigenschaften. In my stylesheet I have entries to change link properties for the entire body of all my pages like this: In "meine Stylesheet Ich habe Einträge zu ändern Link Eigenschaften für den ganzen Körper der alle meine Seiten wie folgt aus:

 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). Wie Sie sehen, Sie können die Farbe für die 3 verschiedenen Staaten von Links, können Sie den Text Dekoration (für einen Staat), oder die Hintergrundfarbe (für einen Staat). You can also leave any of these properties out. Sie können auch aus einer dieser Eigenschaften aus. For the text decoration property you could use any of these values: solid, underline, overline, line-through, none, dotted, or dashed. Für die Text-Dekoration Eigenschaft, die Sie könnten einer dieser Werte: solide, unterstreichen, overline, Line-in, "none", gepunktete oder gestrichelte. 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: Während mein Code Beispiel oben Kontrollen der Link Farbe für eine ganze Körper von einer Seite, können Sie auch ändern, sie auf allen Ebenen, wie vielleicht Ihre Seitenleiste:

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

Experiment by modifying the link colors in your stylesheet now. Experiment durch eine Änderung der Link-Farben in Ihrem Stylesheet jetzt. Then experiment further by changing font sizes and colors. Dann Experiment weiter, indem Sie Schriftgrößen und Farben. To find cool color schemes to change colors of text, links, or backgrounds Um zu erfahren cool Farbschemata Ändern der Farbe von Text, Links und Hintergründe Use this CSS color chart for reference Verwenden Sie diese CSS-Farbkarte für die Bezugnahme . 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. Es ist wahrscheinlich die beste Farbkarte Ich habe in Jahren, vor allem, weil es auf der Grundlage von PANTONE-Farben-und Lack-Streifen Proben aus einem Hardware-Shop.

The last wordpress theme hack (in this article) I’ll show you is for headings. Der letzte wordpress Thema Hack (in diesem Artikel) Ich werde Ihnen zeigen, ist für die Rubriken. 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. Eine Position ist ein "H"-Tag wie <H1> <H2> <H3> <h4>, etc. Jeder Post sollte ein (Titel) Position, und jedes Widget oder einen Abschnitt in Ihrer Sidebar hat eine andere Position. 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. Wie früher in meiner Diagramm - eine Position ist ein "Feld" und, dass das Feld hat Eigenschaften, wie Hintergrund, padding, Marge, (Text-) Farbe, (Link) Farbe, Grenze, border-style, und vieles mehr. By default in Wordpress the post headers are just linked text. Standardmäßig in Wordpress die post-Header sind nur im Zusammenhang Text. 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. Während das ist ok, wie Sie sehen können, auf meiner Hauptbild Seite und meine Post-Seiten Ich ziehe einen schwarzen Rand, eine Hintergrundfarbe, und einige Polsterung. In my sidebar I gave the sections headings a background image, a bottom border, and some margines. In meiner Sidebar habe ich die Abschnitte Positionen ein Hintergrundbild, einen unteren Rand, und einige margines. The list elements also have a bottom border. Die Liste Elemente haben auch einen unteren Rand.

 #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. In den Code Beispiel oben Ich zeigte Ihnen fast alle meine Sidebar-Stylesheet-Eigenschaften, so können Sie sich eine Vorstellung von den vielen verschiedenen Möglichkeiten können Sie ein Kopf-und Elements in der Liste. You can see how I gave the sidebar H2 header a backround image instead of just a color. Sie können sehen, wie ich die Sidebar H2-Header ein Hintergrund Bild statt nur eine Farbe. This the code I used to format the properties of the post headings: Diese den Code I-Format verwendet, um die Eigenschaften des post-Rubriken:

 .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. Statt nur in Verbindung mit Text habe ich meinen Beitrag Rubriken der Hintergrundfarbe grau, eine solide 1 Pixel schwarzen Rand, und einige Polsterung auf der linken und der rechten Seite. Now I think it’s much easier to see where one post ends an the next begins on my pages. Nun ich denke, es ist viel einfacher zu sehen, wo ein post-Enden ein die nächste beginnt auf meinen Seiten.

Use What You’ve Learned to Hack Your Theme More Verwenden Sie, was Sie gelernt haben, um deinen eigenen Thema mehr

I’ve give you a way to hack away at your Wordpress theme without changing how your visitor’s see it. Ich habe Ihnen einen Weg zu hacken weg zu Ihrer Wordpress Thema, ohne dabei, wie Ihre Besucher sehen es. I’ve told you about the Wordpress loop, and how to add things before, after, and inside it. Ich habe gesagt, Sie über die Wordpress-Loop, und wie Sie die Dinge vor, nach, und in seinem Inneren. 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. Wir gehackt und fügte hinzu, einige PHP-Code, und dann gehackt unser Thema Stylesheet-Eigenschaften zu ändern, um Einfluss auf die Gestaltung und das Design der Seite. 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! Ich kann nicht lehren Sie alles, was Sie wissen müssen, um Ihre eigenen gesamte eigenes Thema in nur ein post - aber ich kann Ihnen gestartet! Now you know enough about Wordpress themes to be dangerous and customize your own. Jetzt wissen Sie genug über Wordpress Themen zu gefährlich und passen Sie Ihre eigenen. Visit and bookmark Besuchen Sie und Lesezeichen W3Schools.com for your HTML and CSS reference needs. für Ihre HTML-und CSS-Referenz muss. Research and read more articles explaining how to hack and customize your Wordpress theme further like the Forschung und lesen Sie weitere Artikel erklärt, wie man es hacken und passen Sie Ihre Wordpress Thema weiter wie die tutorials at WPDesigner.com Tutorials auf WPDesigner.com .

Please comment if this article helped you, you had a question, or a great worpress theme hack or customization to add! Bitte äußern Sie sich, wenn dieser Artikel Ihnen geholfen hat, Sie hatten eine Frage, oder eine große worpress Thema Hack oder Anpassung hinzufügen! I hope you found this information valuable - if so please feel free to bookmark, digg, and stumble this page! Ich hoffe, Sie finden diese Informationen wertvolle - wenn ja, wenden Sie sich bitte an Lesezeichen, digg, und stolpern dieser Seite!

Tags: tutorial Tutorial , wordpress-hack WordPress-Hack