Wordpress Custom Home Page Design - Widgetized Front Page Wordpress Custom Home Page Design - Widgetized Front Page

So you’ve managed to specify a custom front page in your Wordpress setup by going to: [settings], [reading], [front page displays], ["A static page" - Radio Button]. Also Sie haben es geschafft, eine eigene Titelseite in Ihrem Wordpress-Setup, indem Sie an: [Einstellungen], [Lesung], [Titelseite zeigt], [ "Eine statische Seite" - Radio-Button]. What now? Was nun? Who cares if you can create a custom front page with static content on it. Wen kümmert es, wenn Sie können eine eigene Titelseite mit statischen Inhalten auf sie. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Wir wollen, dass einige coole, weiter fortgeschritten, wigetized Goodies an einem Strang ziehen unseren Blog auf eine dynamische Basis. If you’ve seen the new front page of RobMalon.Com then you’ll have an idea of some of the functions I’m about to teach you so that you can setup something similar on your blog. Wenn Sie gesehen haben, ist die neue Front-RobMalon.Com der Seite dann haben Sie eine Vorstellung davon, einige der Funktionen Ich bin über zu lehren, so dass Sie können Setup etwas Ähnliches in Ihrem Blog.

Custom Home Page Design & Layout Custom Home Page Design & Layout

An important first step to this is drafting out what you want to do. Ein wichtiger erster Schritt dazu ist der Ausarbeitung, was Sie machen wollen. Organize what widgets are going to go where. Organisieren, was Widgets sind zu gehen, wo. That’s difficult if you don’t know what Wordpress is capable of. Das ist schwierig, wenn Sie nicht wissen, was Wordpress ist in der Lage. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Also, zu kurz gehen über das, was wir haben auf unseren Händen, planen Sie Ihre Titelseite Inhalte auf der Grundlage dieser Fragen:

• What categories if any are important enough to to give them their own mini feed on the front page? Was, wenn alle Kategorien sind wichtig genug, um ihnen ihre eigenen Mini-Feed auf der ersten Seite?
• How many recent articles in each widget do you want to display? Wie viele Artikel in den letzten jedes Widget tun, die Sie anzeigen möchten? Offsetting this in various places will allow you to tweak a homepage to get it to balance nicely where it otherwise wouldn’t because of uneven content in columns. Aufrechnung dieser an verschiedenen Orten können Sie zwicken eine Homepage, um es zum Ausgleich schön, wenn es ansonsten nicht, weil der Inhalt uneinheitlich in den Spalten.
• Do you want to display the first 200 characters (without links/images) of each article? Möchten Sie die ersten 200 Zeichen (ohne Links / Bilder) der einzelnen Artikel? Consider how this will effect the previous point I made. Überlegen Sie, wie wird dieser Effekt der vorherigen Punkt, den ich gemacht.
• Design and architecture. Design und Architektur. - See the layout idea to the right for a visual example. - Siehe das Layout Idee auf der rechten Seite für ein visuelles Beispiel. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. Im Ort und Stelle ein in der linken Seite Beispiel könnten Sie den 8 letzten Artikel über die gesamte Website und alle Kategorien. In spot two you might have posts only from a category which you’ve labeled “Updates”? In zwei vor Ort haben Sie vielleicht nur Beiträge aus einer Kategorie, die Sie haben der Aufschrift "Updates"? Or perhaps a category which you use to tag your latest “Video” posts? Oder vielleicht eine Kategorie, die Sie verwenden, um Ihre letzte Tag "Video"-Stellen? Then in category 3 a list of articles which you consider to be “Featured” articles. Dann in der Kategorie 3 eine Liste von Artikeln, die Sie als "Top"-Artikel. The list is endless with options. Die Liste ist endlos, mit Optionen. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Wenn Sie go to setup Ihrer Seite wie dieser, ein Los bestimmt darüber, wie gut Sie kategorisieren Ihre aktuelle Beiträge. For example, I implemented a featured area in the top tabbed area on the front page. Zum Beispiel, ich implementiert einen Top-Bereich im oberen Bereich Tabbed auf der Titelseite. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Ich hatte zu gehen zurück, erstellen Sie eine neue Kategorie, und die Anwendung dieser Kategorie zu den bestehenden Stellen als ich sah passen. Then, from now on, I simply add it as I go when I write a post that I want to show up in the “featured” widget on the front page. Dann, ab sofort, ich einfach hinzufügen, wie ich es gehen, wenn ich einen Post schreiben, dass ich wollen zeigen, bis in die "Top"-Widget auf der Titelseite.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Während Sie planen Ihre Widgets, vergessen Sie nicht, Sie können mithilfe von Code aus anderen Plugins wie gut. More about that in a bit. Mehr zum Thema, dass in einem Bit.

Table Or CSS Setup Tabelle oder CSS-Setup

Now that you have that down, its time to implement some layout code. Nun, da haben Sie, dass die Festlegung, der Zeitpunkt der Umsetzung einiger Layout-Code. If you’re new to this, set this up in a table. Wenn Sie zu diesem neuen, setzen Sie diese in einer Tabelle. If you’re looking to go all hardcore, then use a layout with div’s like this: Wenn Sie suchen, um alle Hardcore, dann verwenden Sie ein Layout mit div's wie folgt aus:

1. //Setup For Example 1 (3 widgets)
3. < div style = "width:100%; padding: 5px; border: 1px solid #FFFFFF;" >
4. WIDGET 1 CODE HERE
5. </ div >
7. < div style = "clear:both; padding-top:5px;" ></ div >
9. < div style = "float:left; width:200px; padding:5px; border:1px solid #FFFFFF;" >
10. WIDGET 2 CODE HERE
11. </ div >
13. < div style = "float:right; width:200px; padding:5px; border:1px solid #FFFFFF;" >
14. WIDGET 3 CODE HERE
15. </ div >
18. //Setup For Example 2 (4 widgets)
20. < div style = "float:left; width:200px; padding:5px; border:1px solid #FFFFFF;" >
21. WIDGET 1 CODE HERE
22. </ div >
24. < div style = "float:right; width:200px; padding:5px; border:1px solid #FFFFFF;" >
25. WIDGET 2 CODE HERE
26. </ div >
28. < div style = "clear:both; padding-top:5px;" ></ div >
30. < div style = "float:left; width:200px; padding:5px; border:1px solid #FFFFFF;" >
31. WIDGET 3 CODE HERE
32. </ div >
34. < div style = "float:right; width:200px; padding:5px; border:1px solid #FFFFFF;" >
35. WIDGET 4 CODE HERE
36. </ div >
37. Download this code: 0826divfrontpagewidgets.txt Download dieses Code: 0826divfrontpagewidgets.txt

In case you’re confused, all this code is going to go into a “page” which you should have already specified as the homepage. Für den Fall, Sie verwechseln, die alle diesen Code wird in eine "Seite", die Sie bereits als der Homepage. If not, its not a bad idea to practice on a non-frontpage which is unpublished so you can experiment without putting an existing blog into chaos. Wenn nicht, seine keine schlechte Idee in die Praxis auf eine nicht-FrontPage, das unveröffentlichte so können Sie experimentieren, ohne dass ein bestehendes Blog ins Chaos zu stürzen.

Coding The Widgets Die von Coding Widgets

Then you have some options for each widget. Dann haben Sie einige Optionen für jedes Widget. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Was Sie tun müssen, ist, sagen die ordnungsgemäße Funktion zu Wordpress-Schleife durch die Beiträge, die Sie anzeigen möchten. Here are the examples: Hier sind die Beispiele:

1. <?php
2. //Setting up the new loop of posts
3. global $post ;
4. //Getting Posts - More on this below
5. $gettingposts = get_posts ( ‘numberposts=5&category=1′ ) ;
6. //Starting the loop
7. foreach ( $gettingposts as $post ) :
8. setup_postdata ( $post ) ;
9. //Below is a custome output of a link setup
10. ?>
11. - < a href = "<?php the_permalink(); ?>" rel = "bookmark" title = "Permanent Link to &ldquo;<?php the_title(); ?>&rdquo;" >< ?php the_title ( ) ; ? ></ a >
12. < div class = "postbreak" >
13. <?php
14. //End the loop
15. endforeach ;
16. ?>
18. <?php
19. //This bit of code will loop through 5 recent articles covering all categories and post the_excerpt() - A 200 character clip from the post that excludes any html in from those first lines.
20. global $post ;
21. //Getting Posts - More on this below
22. $gettingposts = get_posts ( ‘numberposts=5′ ) ;
23. //Starting the loop
24. foreach ( $gettingposts as $post ) :
25. setup_postdata ( $post ) ;
26. //Below is a custome output of a link setup
27. ?>
28. < h3 >< a  style = "font-size:14px;" href = "<?php the_permalink() ?>" rel = "bookmark" title = "Permanent Link to <?php the_title(); ?>" >< ?php the_title ( ) ; ? ></ a ></ h3 >
29. <?php
30. //Display a clip from the post
31. the_excerpt ( ) ;
32. //End the loop
33. endforeach ;
34. ?>
35. Download this code: 0826codefrontpagewidgets.txt Download dieses Code: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Erstellung von Homepages komplizierte kann dadurch verstärkt werden, indem Sie mehrere WordPress-Template-Tags. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Alle in der Dokumentation ist es, rufen Sie einfach die Funktionen mit den Parametern, die Sie möchten (wie in jedem Template-Tag). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . In dem obigen Beispiel ich zum ersten Mal zeigen, einen Weg für die Iteration über Links in einer bestimmten Kategorie mit dem Template Tag get_posts. In the second example I use it again but this time don’t specify a category (so it displays all recent posts) and show the_excerpt() with it which takes a clipping of the current post in the_loop . Im zweiten Beispiel verwende ich es noch einmal, aber dieses Mal nicht angeben eine Kategorie (so zeigt es alle letzten Stellen) und zeigen the_excerpt () mit, die es dauert ein Clipping der aktuellen Stelle in the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Schauen Sie durch den get_post Dokumentation und fügen Sie die richtige Variablen, um den Ausgangspegel Sie gerne sehen würden. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Fro Beispiel, die folgenden get_post Funktion zeigt 3-Stellen aus allen Kategorien, außer 5 und 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( 'numberposts = 3 & Kategorie =- 5, -8');

If you want to find the ID of a category, post, or page do the followign: Wenn Sie wollen, finden die ID einer Kategorie, zu veröffentlichen, oder die Seite tun followign:

• log into admin. Log-in admin.
• Navigate to the manage tab. Navigieren Sie zu der Registerkarte verwalten.
• Click categories (or posts or pages) Klicken Sie auf Kategorien (oder Beiträge oder Seiten)
• Hover over or click on the proper category, post, or page you wish to know the ID of Hover über oder klicken Sie auf die richtige Kategorie, zu veröffentlichen, oder Seite, die Sie möchten wissen, die ID
• In the status bar (if you’re hovering) or in the Address Bar (if you clicked) you should see a link that looks similar to this: In der Statusleiste (wenn Sie schwebend) oder in der Adressleiste (wenn Sie geklickt haben), sollten Sie einen Link, etwa so wie diese aussieht:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. In dem obigen Beispiel war ich in Kategorien. The category I chose has an idea of “11″. Die Kategorie Ich wählte hat eine Vorstellung von "11". Now I can exlicitly include or exclude it. Jetzt kann ich gehören exlicitly oder ausschließen. In some cases you’ll want to do this with posts and/or pages as well. In einigen Fällen können Sie dies tun wollen mit Stellen und / oder Seiten als gut. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesnt Unterstützung, aber wenn Sie spielen mit anderen Wordpress-Funktionen, die sie manchmal tun. Check the template tag documentation on a per function basis. Überprüfen Sie die Vorlagen-Tag Dokumentation über ein Pro-Funktion Grundlage. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Sie werden zumindest wissen, wie man die ID's jetzt, ohne zu geben, sich in Ihrer Datenbank MySQL an.

Plug-ins Plug-Ins

You may need a plug-in called Exec-PHP installed on your blog so that you can execute the above PHP code inside posts. Sie müssen eventuell ein Plug-In namens Exec-PHP installiert in Ihrem Blog, damit können Sie die oben genannten PHP-Code innerhalb Stellen. Be careful about installing this plug-in if you have other people managing your blog with you though. Seien Sie vorsichtig über die Installation dieses Plug-in, wenn Sie noch andere Leute, Ihr Blog mit Ihnen aber. If so you can setup custom privileges. Wenn ja, können Sie benutzerdefinierte Privilegien. If not then just make sure its installed and activated. Wenn nicht, dann nur Stellen Sie sicher, dass seine installiert und aktiviert.

I’m sure you’ve seen countless other plugin’s out there which provide you with a snippet of code which you can use in your sidebar.php file inside your theme folder. Ich bin mir sicher, dass du gesehen hast, unzählige andere Plugin's da draußen, die Sie mit einem Auszug der Code, können Sie in Ihrem sidebar.php Datei in Ihrem Ordner Thema. You can also use that code within any of the widgets you create on your homepage within those blocks. Sie können auch, dass Code in einem der Widgets erstellen Sie auf Ihrer Homepage innerhalb dieser Blöcke. You can usually find code like that inside the readme or install notes file that most plug-in come with. Sie können in der Regel finden, dass Code wie in der README oder INSTALL Datei stellt fest, dass die meisten Plug-in mit.

Examples Beispiele

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Auf der linken Seite ist ein Beispiel für meine Titelseite aus, wenn ich vor kurzem neu gestaltet RobMalon.Com. I also recently helped a personal friend of mine create a similar setup with his page at ToddRecommends.TV who does Live streams and talks Movies and Tech. Ich habe auch vor kurzem dazu beigetragen, ein persönlicher Freund von mir ein ähnliches Setup mit seiner Seite auf ToddRecommends.TV Wer macht Live-Streams und Filme und Gespräche Tech. You can see a clip of what his front page currently looks like on the right-hand side. Sie können einen Clip von dem, was seine Titelseite derzeit sieht aus wie auf der rechten Seite. He has his recent posts for each of his main categories on his page and is displaying a feed on the top right from another category which he uses for updates about events, updates, and general news. Er hat seine jüngsten Beiträge für jeden seiner wichtigsten Kategorien auf seiner Seite und zeigt einen Feed auf der oberen rechten Ecke aus einer anderen Kategorie, die er verwendet für Updates über Ereignisse, Updates, und allgemeine Nachrichten.

Posted by: Rob Geschrieben von: Rob
Category: Blogging , Coding , Featured , Web Design Kategorie: Bloggen, Coding, Top, Web-Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Coding, CSS, Design, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Antworten: Du einen Kommentar hinterlassen | Trackback-URL