Wordpress Custom Home Page Design - Widgetized Front Page Wordpress anpassade Hemsida Design - Widgetized Förstasidan

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]. Så du har lyckats ange en anpassad startsida i din Wordpress-inställningarna genom att gå till: [inställningar], [behandlingen], [första sidan visar], [ "En statisk sida" - Radio-knappen]. What now? Vad händer nu? Who cares if you can create a custom front page with static content on it. Vem bryr sig om du kan skapa en anpassad startsida med statiskt innehåll på det. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Vi vill ha några häftiga, mer avancerade, wigetized godsaker att knyta samman vår blogg på ett dynamiskt sätt. 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. Om du har sett den nya framsidan av RobMalon.Com Sedan kommer du att ha en uppfattning om några av de funktioner som jag är på väg att lära dig så att du kan setup något liknande på din blogg.

Custom Home Page Design & Layout Anpassad Hemsida design & layout

An important first step to this is drafting out what you want to do. Ett viktigt första steg till detta är att utarbeta reda på vad du vill göra. Organize what widgets are going to go where. Organisera vad widgets kommer att gå där. That’s difficult if you don’t know what Wordpress is capable of. Det är svårt om du inte vet vad Wordpress är kapabel till. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Så, att kortfattat gå igenom vad vi har i våra händer, planera bort din startsida innehåll som bygger på dessa frågor:

• What categories if any are important enough to to give them their own mini feed on the front page? Vilka kategorier om något är tillräckligt viktigt för att ge dem en egen mini foder på första sidan?
• How many recent articles in each widget do you want to display? Hur många nya artiklar i varje widget vill du visa? 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. Uppväga detta på olika platser gör att du kan justera en hemsida för att få den att balansen fint där det annars inte skulle på grund av ojämn innehållet i kolumnerna.
• Do you want to display the first 200 characters (without links/images) of each article? Vill du visa de första 200 tecken (utan länkar / bilder) av varje artikel? Consider how this will effect the previous point I made. Fundera över hur detta kommer att påverka den tidigare som jag påpekade.
• Design and architecture. Design och arkitektur. - See the layout idea to the right for a visual example. - Se layout idé till höger för en visuell exempel. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. I stället en på den vänstra exempel du kan utsätta de 8 senaste artiklar i hela webbplatsen och omfatta alla kategorier. In spot two you might have posts only from a category which you’ve labeled “Updates”? På plats två kanske du har plats endast från en kategori som du har märkt "uppdateringar"? Or perhaps a category which you use to tag your latest “Video” posts? Eller kanske en kategori som du använder för att märka dina senaste "Video"-tjänster? Then in category 3 a list of articles which you consider to be “Featured” articles. Sedan i kategorin 3 en förteckning över de artiklar som du anser vara "Featured" artiklar. The list is endless with options. Listan är oändlig med alternativ. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. När du går till konfigurerar din sida så här, mycket bestäms av hur väl du kategorisera din nuvarande tjänster. For example, I implemented a featured area in the top tabbed area on the front page. Till exempel har jag genomfört ett område som visas i början på flikar område på första sidan. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Jag var tvungen att gå tillbaka, skapa en ny kategori, och tillämpa denna kategori till befintliga tjänster som jag ansåg lämpligt. 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. Sedan, från och med nu, jag bara lägga till det som jag går när jag skriver en post som jag vill visa upp i "funktioner" widget på första sidan.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Även om du planerar ut dina prylar, glöm inte, du kan använda kod från andra plugins också. More about that in a bit. Mer om det i en bit.

Table Or CSS Setup Tabell eller CSS-inställningar

Now that you have that down, its time to implement some layout code. Nu när du har ner, sin tid att genomföra vissa layout-kod. If you’re new to this, set this up in a table. Om du är ny i detta, att ställa in det i en tabell. If you’re looking to go all hardcore, then use a layout with div’s like this: Om du letar gå alla hardcore, sedan använda en layout med div: s så här:

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 Ladda ner denna kod: 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. Om du är förvirrad, allt detta nummer är att gå in på en "sida" som du redan borde ha angetts som startsida. 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. Om inte, sitt inte en dålig idé att träna på ett icke-hemsidan som är opublicerade så att du kan experimentera utan att en befintlig blogg i kaos.

Coding The Widgets Coding prylarna

Then you have some options for each widget. Då du har några alternativ för varje komponent. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Vad du behöver göra är att berätta en väl Wordpress funktion för att loop genom de tjänster som du vill visa. Here are the examples: Här är exempel:

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 Ladda ner denna kod: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Skapandet av komplicerade hemsidor kan förbättras ytterligare genom att använda flera wordpress mall taggar. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). All dokumentation är det bara ringa funktioner med de parametrar som du vill ha (som finns i varje mall taggen). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . I exemplet ovan jag först visa ett sätt att upprepa via länkar i en viss kategori med hjälp av mall taggen 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 . I det andra exemplet jag använda den igen men den här gången inte anger en kategori (så det visar alla senaste inlägg) och visa the_excerpt () med det som tar en klippning av den aktuella tjänsten i the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Titta genom get_post dokumentation och bifoga en korrekt variabler för att anpassa produktionen du vill se. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Fro exempel följande get_post funktion kommer att visa 3-tjänster från alla kategorier förutom 5 och 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( "numberposts = 3 & kategori =- 5, -8 ');

If you want to find the ID of a category, post, or page do the followign: Om du vill söka efter ett ID i en kategori, post eller sida göra followign:

• log into admin. Logga in på admin.
• Navigate to the manage tab. Gå till fliken hantera.
• Click categories (or posts or pages) Klicka kategorier (eller tjänster eller sidor)
• Hover over or click on the proper category, post, or page you wish to know the ID of Svävande över eller klicka på lämplig kategori, post eller sida du vill veta ID för
• 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: I statusfältet (om du svävar) eller i adressfältet (om du klickade) bör du se en länk som ser ut ungefär så här:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. I exemplet ovan var jag i kategorier. The category I chose has an idea of “11″. Den kategori som jag valde har en idé om "11". Now I can exlicitly include or exclude it. Nu kan jag exlicitly inkludera eller utesluta det. In some cases you’ll want to do this with posts and/or pages as well. I vissa fall du vill göra detta med tjänster och / eller sidor. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesn't stödja detta, men om du spelar med andra Wordpress funktioner, som de ibland gör. Check the template tag documentation on a per function basis. Kontrollera mall taggen dokumentation för varje funktion grund. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Du åtminstone vet hur man ska få ID nu utan att behöva logga in på ditt MySQL-databas.

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. Du kan behöva en plug-in kallad Exec-PHP installerat på din blogg så att du kan utföra ovanstående PHP-kod inuti tjänster. Be careful about installing this plug-in if you have other people managing your blog with you though. Var försiktig om hur du installerar denna plug-in om du har andra människor att hantera din blogg med dig om. If so you can setup custom privileges. Om så är fallet kan du egna privilegier. If not then just make sure its installed and activated. Om inte så är det bara att se till dess installerat och aktiverat.

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. Jag är säker på att du har sett otaliga andra plugin's där ute som ger dig en kod som du kan använda i din sidebar.php filen i din tema mappen. You can also use that code within any of the widgets you create on your homepage within those blocks. Du kan också använda det numret i någon av de prylar du skapar på din hemsida inom dessa block. You can usually find code like that inside the readme or install notes file that most plug-in come with. Du kan troligtvis hitta kod så inne i readme eller installera konstaterar fil som mest plug-in kommer med.

Examples Exempel

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Till vänster är ett exempel på min första sidan från när jag nyligen omgjorda 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. Jag har också nyligen hjälpt en personlig vän till mig skapa en liknande konfiguration med hans sida på ToddRecommends.TV vem som gör Live strömmar och samtal Filmer och Tech. You can see a clip of what his front page currently looks like on the right-hand side. Du kan se ett klipp om vad hans första sidan för närvarande ser ut som på höger sida. 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. Han har hans senaste inlägg för var och en av hans viktigaste kategorierna på hans sida och visar ett flöde på upp till höger från en annan kategori som han använder för uppdateringar om händelser, uppdateringar och allmänna nyheter.

Posted by: Rob Upplagd av: Rob
Category: Blogging , Coding , Featured , Web Design Kategori: blogging, Coding, Featured, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Coding, CSS, Design, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Svara: lämna en kommentar | Trackback URL