Wordpress Custom Home Page Design - Widgetized Front Page Wordpress aangepaste startpagina design - Widgetized voorpagina

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]. Dus je hebt in geslaagd om een aangepaste voorpagina in uw Wordpress setup door naar: [instellingen], [lezing], [voorpagina schermen], [ "Een statische pagina" - Radio Button]. What now? Wat nu? Who cares if you can create a custom front page with static content on it. Who cares als je kunt een aangepaste voorpagina met statische inhoud op. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Wij willen zo graag cool, meer geavanceerde, wigetized goodies aan elkaar worden gekoppeld aan onze blog op een 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. Als u al gezien dat de nieuwe voorpagina van RobMalon.Com dan krijgt u een idee te geven van enkele van de functies Ik ben over om je te leren, zodat u kunt heel eenvoudig iets dergelijks op je blog.

Custom Home Page Design & Layout Aangepaste startpagina design & lay-out

An important first step to this is drafting out what you want to do. Een belangrijke eerste stap hiervoor is het opstellen van wat u wilt doen. Organize what widgets are going to go where. Organiseer wat widgets moeten gaan waar. That’s difficult if you don’t know what Wordpress is capable of. Dat is moeilijk als je niet weet wat Wordpress in staat is. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Dus, om kort ingaan op wat we hebben op onze handen, een plan uit uw voordeur inhoud van de pagina is gebaseerd op de volgende vragen:

• What categories if any are important enough to to give them their own mini feed on the front page? Welke categorieën eventueel zijn belangrijk genoeg om hen in hun eigen mini-feed op de voorpagina?
• How many recent articles in each widget do you want to display? Hoeveel recente artikelen in elke widget wilt u weergeven? 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. Compensatie van deze op verschillende plaatsen kun je deze aanpassen naar wens een homepage, om dat in evenwicht is mooi waar zij anders niet zouden als gevolg van ongelijke inhoud in de kolommen.
• Do you want to display the first 200 characters (without links/images) of each article? Wilt u de eerste 200 karakters (zonder links / images) van elk artikel? Consider how this will effect the previous point I made. Overweeg hoe dit effect het vorige punt die ik gemaakt heb.
• Design and architecture. Design en architectuur. - See the layout idea to the right for a visual example. - Zie de lay-out idee naar rechts voor een visueel voorbeeld. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. In een plek in de linker zijkant Zo kun je om de 8 meest recente artikelen over de hele site en alle categorieën. In spot two you might have posts only from a category which you’ve labeled “Updates”? In twee ter plaatse kan het zijn dat je alleen berichten uit een categorie die u hebt gelabeld 'Updates'? Or perhaps a category which you use to tag your latest “Video” posts? Of misschien een categorie die u gebruikt voor het coderen van uw meest recente "Video" berichten? Then in category 3 a list of articles which you consider to be “Featured” articles. Dan in de categorie 3 een overzicht van artikelen die u beschouwen als "Beste" artikelen. The list is endless with options. De lijst is eindeloos met opties. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Als u naar het opzetten van je pagina als deze veel wordt bepaald op hoe goed u uw huidige categoriseren posten. For example, I implemented a featured area in the top tabbed area on the front page. Ik heb bijvoorbeeld een functionaliteit geïmplementeerd gebied in het gebied met tabbladen bovenaan op de voorpagina. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Ik moest terug, maakt u een nieuwe categorie, en toepassen van die categorie op bestaande posten als ik zag zitten. 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. Daarna, vanaf nu, ik voeg gewoon als ik heen wanneer ik een bericht schrijft dat ik wil laten zien in de "functionele" widget op de voorpagina.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Terwijl u van plan bent om uw widgets, vergeet het niet, kunt u code uit andere plugins ook. More about that in a bit. Meer over dat in een bit.

Table Or CSS Setup Table of CSS Setup

Now that you have that down, its time to implement some layout code. Nu je dat neer, zijn tijd aan de uitvoering van een aantal lay-out code. If you’re new to this, set this up in a table. Als je nieuw bent bij dit, dit in een tabel. If you’re looking to go all hardcore, then use a layout with div’s like this: Als u op zoek bent naar alle hardcore, gebruik dan een lay-out met div's zoals deze:

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 hier de volgende 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. Mocht je verward, dient deze code gaat naar een pagina waarop u wellicht al heeft opgegeven als de 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. Zo niet, dan is het geen slecht idee om te oefenen op een niet-frontpage is nog niet gepubliceerde, zodat u kunt experimenteren zonder dat een bestaande blog in chaos.

Coding The Widgets Codering van de widgets

Then you have some options for each widget. Dan zijn er nog enkele opties voor elke widget. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Wat u moet doen is het vertellen van de goede Wordpress functie om lus via de berichten die u wilt weergeven. Here are the examples: Hier zijn de voorbeelden:

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 hier de volgende code: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Invoering van homepages ingewikkelde verder versterkt kan worden door gebruik te maken van meerdere wordpress template tags. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Alle documentatie is er eenvoudigweg de functies met de parameters die u wilt (zoals in elke 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 het voorbeeld hierboven ik voor het eerst tonen aan een manier om iterate via links in een bepaalde categorie in het sjabloontag 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 . In het tweede voorbeeld gebruik ik hem nog een keer maar dit keer niet specificeren een categorie (dus het geeft alle recente berichten) en show the_excerpt () mee dat het voortouw neemt het knippen van de huidige post in the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Kijk door de get_post documentatie en voeg deze in de juiste variabelen voor het aanpassen van de output die je wilt zien. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Fro bijvoorbeeld de volgende functie zal get_post display 3 berichten uit alle categorieën, behalve 5 en 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( 'numberposts = 3 & =- categorie 5, -8');

If you want to find the ID of a category, post, or page do the followign: Als je meer wilt weten de ID van een categorie, de post, of pagina followign doen:

• log into admin. inloggen op admin.
• Navigate to the manage tab. Ga naar het tabblad beheren.
• Click categories (or posts or pages) Klik categorieën (of berichten of pagina's)
• Hover over or click on the proper category, post, or page you wish to know the ID of Beweeg over of klik op de juiste categorie, de post, of pagina die u wenst te weten de ID van
• 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 de statusbalk (als u zweefde) of in de adresbalk (als u hebt geklikt) ziet u een link die er zo uit ziet:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. In het bovenstaande voorbeeld was ik in categorieën. The category I chose has an idea of “11″. De categorie heb ik gekozen heeft een idee van "11". Now I can exlicitly include or exclude it. Nu kan ik exlicitly opnemen of uitsluiten. In some cases you’ll want to do this with posts and/or pages as well. In sommige gevallen kunt u dit wilt doen met berichten en / of pagina's. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts met al deze steun, maar als je speelt met andere functies Wordpress, maar soms doen. Check the template tag documentation on a per function basis. Check de documentatie template-tag op een per functie basis. You’ll at least know how to get the ID’s now without having to log into your mySQL database. U zult in ieder geval weet hoe je de ID's nu zonder in te loggen in uw MySQL database.

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. U moet wellicht een plug-in te noemen Exec-PHP geïnstalleerd op uw blog, zodat u kunt uitvoeren van de bovenstaande code in PHP posten. Be careful about installing this plug-in if you have other people managing your blog with you though. Wees voorzichtig over het installeren van deze plug-in als u andere mensen het beheren van uw blog met jou hoor. If so you can setup custom privileges. Zo ja, kunt u aangepaste setup privileges. If not then just make sure its installed and activated. Indien niet, dan moet er gewoon zijn geïnstalleerd en geactiveerd.

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. Ik weet zeker dat je gezien hebt talloze andere plugin's daar waar u een fragment van de code die u kunt gebruiken in uw sidebar.php bestand in uw thema-map. You can also use that code within any of the widgets you create on your homepage within those blocks. U kunt ook gebruik maken van die code in een van de widgets die u maakt op uw homepage binnen deze blokken. You can usually find code like that inside the readme or install notes file that most plug-in come with. Meestal kunt u code zoals die binnen in het readme-bestand of het installeren van constateert dat de meeste plug-in kom met.

Examples Voorbeelden

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Aan de linkerkant ziet u een voorbeeld van mijn voorpagina van toen ik onlangs vernieuwde 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. Onlangs hielp ik ook een persoonlijke vriend van mij maakt u een soortgelijke setup met zijn pagina op ToddRecommends.TV wie doet live streams en besprekingen Movies and Tech. You can see a clip of what his front page currently looks like on the right-hand side. U ziet een fragment van wat zijn voorkant pagina die op dat moment ziet er uit als op de rechterkant. 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. Hij heeft zijn recente berichten voor elk van zijn belangrijkste categorieën op zijn pagina en een feed wordt weergegeven in de rechterbovenhoek van een andere categorie die hij gebruikt voor updates over evenementen, updates, en algemeen nieuws.

Posted by: Rob Gepost door: Rob
Category: Blogging , Coding , Featured , Web Design Categorie: Bloggen, codering, Beste, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Codering, CSS, Design, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Reageren: Laat een reactie | trackback url