Wordpress Custom Home Page Design - Widgetized Front Page Wordpress Custom Hjemmeside 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]. Så du har formået at angive en brugerdefineret forreste side i din Wordpress-opsætningen ved at gå til: [indstillinger], [behandling], [forsiden viser], [ "En statisk side" - Radio Button]. What now? Hvad nu? Who cares if you can create a custom front page with static content on it. Hvem interesserer hvis du kan oprette en speciel front side med statisk indhold på den. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Vi ønsker nogle cool, mere avancerede, wigetized goodies til at samle vores blog på et dynamisk grundlag. 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. Hvis du har set den nye front side af RobMalon.Com så har du en idé om nogle af de funktioner, jeg er ved at lære dig, så du kan setup noget lignende på din blog.

Custom Home Page Design & Layout Custom Hjemmeside Design & Layout

An important first step to this is drafting out what you want to do. Et vigtigt første skridt til dette er ved at udarbejde ud af, hvad du vil gøre. Organize what widgets are going to go where. Organizer hvad widgets kommer til at gå hvor. That’s difficult if you don’t know what Wordpress is capable of. Det er vanskeligt, hvis du ikke ved hvad Wordpress er i stand til. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Altså, kort at gå over, hvad vi har i vores hænder, planlægge dit forsiden indhold baseret på disse spørgsmål:

• What categories if any are important enough to to give them their own mini feed on the front page? Hvilke kategorier, hvis nogen er vigtige nok til at give dem deres egen mini-feed på forsiden?
• How many recent articles in each widget do you want to display? Hvor mange nylige artikler i hver widget har du lyst til at vise? 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. Udligning af denne i forskellige steder giver dig mulighed for at nappe en hjemmeside for at få det til balance pænt, hvor det ellers ikke ville på grund af uensartet indhold i kolonner.
• Do you want to display the first 200 characters (without links/images) of each article? Ønsker du at vise de første 200 tegn (uden links / billeder) af hver artikel? Consider how this will effect the previous point I made. Overveje, hvordan dette vil påvirke den forrige, jeg sagde.
• Design and architecture. Design og arkitektur. - See the layout idea to the right for a visual example. - Se layout idé til højre for en visuel eksempel. 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 stedet en i venstre side eksempel du kan bringe de 8 seneste artikler på tværs af hele webstedet og omfatte alle kategorier. In spot two you might have posts only from a category which you’ve labeled “Updates”? I stedet for to, du måtte have stillinger kun fra en kategori, som du har mærket "opdateringer"? Or perhaps a category which you use to tag your latest “Video” posts? Eller måske en kategori, som du bruger til at kode dine seneste "Video"-stillinger? Then in category 3 a list of articles which you consider to be “Featured” articles. Så i kategori 3 en liste over genstande, som du anser for at være "Markante" artikler. The list is endless with options. Listen er endeløs med valgmuligheder. 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 til opsætning af din side som dette, et parti er fast besluttet på, hvor godt du kategorisere din nuværende stillinger. For example, I implemented a featured area in the top tabbed area on the front page. For eksempel har jeg gennemført en del af området i toppen fanebladsbaseret område på forsiden. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Jeg var nødt til at gå tilbage, oprette en ny kategori, og anvende denne kategori til eksisterende stillinger, som jeg anså det for hensigtsmæssigt. 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. Derefter, fra nu af vil jeg blot tilføje det som jeg går, når jeg skriver en post, som jeg gerne vil dukke op i "funktioner" widget på forsiden.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Mens du planlægger dine widgets, så glem ikke, kan du bruge koden fra andre plugins så godt. More about that in a bit. Mere om, at i en bit.

Table Or CSS Setup Tabel eller CSS setup

Now that you have that down, its time to implement some layout code. Nu, hvor du har at ned sin tid at gennemføre nogle layout-kode. If you’re new to this, set this up in a table. Hvis du er ny her, sæt det op i en tabel. If you’re looking to go all hardcore, then use a layout with div’s like this: Hvis du søger at gå alle hardcore og derefter bruge et layout med div's som dette:

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 Hent denne kode: 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. I tilfælde du er forvirret, alle denne kode vil gå ind i en "side", som bør du allerede har angivet som startside. 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. Er det ikke tilfældet, det er ikke en dårlig idé at praksis på et ikke-forsiden der er ikke offentliggjort, så du kan eksperimentere uden at en eksisterende blog i kaos.

Coding The Widgets Indkodning af widgets

Then you have some options for each widget. Så du har nogle valgmuligheder for hver widget. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Hvad du skal gøre, er at fortælle den korrekte Wordpress funktion er at sløjfe gennem de stillinger, som du gerne vil vise. Here are the examples: Her er eksempler:

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 Hent denne kode: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Oprettelse af indviklede hjemmesider kan styrkes yderligere ved hjælp af multiple wordpress skabelon tags. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Al den dokumentation er der, blot kalde funktioner med de parametre, du ønsker (som findes i hver enkelt skabelon-tag). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . I eksemplet ovenfor jeg først vise en måde at Gentag gennem links i en bestemt kategori ved hjælp af den skabelon 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 . I det andet eksempel jeg bruge det igen, men denne gang ikke angiver en kategori (så det viser alle de seneste stillinger) og vise the_excerpt () med det, der tager en klipning af den nuværende stilling i the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Kig gennem get_post dokumentation og tilføj den korrekte variabler til at justere udgangsniveauet du gerne vil se. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Tilbage eksempel følgende get_post funktion vil vise 3 stillinger fra alle kategorier undtagen 5 og 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: Hvis du ønsker at finde id på en kategori, post eller siden gøre det followign:

• log into admin. logge ind på admin.
• Navigate to the manage tab. Naviger til forvalte fane.
• Click categories (or posts or pages) Klik på kategorier (eller stillinger, eller sider)
• Hover over or click on the proper category, post, or page you wish to know the ID of Hover overtaget eller klik på den korrekte kategori, post, eller side, du ønsker at vide 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: I statuslinjen (hvis du er svævende) eller i adresselinjen (hvis du klikkede) bør du se et link der ligner denne:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. I ovenstående eksempel var jeg i kategorier. The category I chose has an idea of “11″. Den kategori jeg har valgt indeholder en idé om, "11". Now I can exlicitly include or exclude it. Nu kan jeg exlicitly medtage eller udelukke det. In some cases you’ll want to do this with posts and/or pages as well. I nogle tilfælde vil du ønsker at gøre dette med stillinger og / eller sider som godt. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesn't støtte dette, men hvis du spiller med andre Wordpress funktioner, de nogle gange gør. Check the template tag documentation on a per function basis. Kontroller skabelon tag dokumentation på en pr-funktion grundlag. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Du vil i det mindste vide, hvordan du kan få ID's nu uden at skulle logge ind på din 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. Du kan få brug for en plug-in kaldet Exec-PHP installeret på din blog, så du kan udføre ovenstående PHP kode inde stillinger. Be careful about installing this plug-in if you have other people managing your blog with you though. Være forsigtig med at installere denne plug-in, hvis du har andre mennesker, der forvalter din blog med dig selv. If so you can setup custom privileges. Hvis så du kan indstille brugertilpassede privilegier. If not then just make sure its installed and activated. Hvis ikke så bare sørge for, at dens installeret og aktiveret.

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. Jeg er sikker på, at du har set utallige andre plugin's derude, som giver dig et stykke kode, som du kan bruge i din sidebar.php fil inde i dit tema mappe. You can also use that code within any of the widgets you create on your homepage within those blocks. Du kan også bruge denne kode i et af de widgets, du opretter på din hjemmeside inden for disse blokke. You can usually find code like that inside the readme or install notes file that most plug-in come with. Du kan normalt finde kode gerne, at inde i README eller installere bemærker fil, at de fleste plug-in kommer med.

Examples Eksempler

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Til venstre er et eksempel på min front side fra da jeg for nylig nydesignede 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. Jeg har også for nylig hjulpet en personlig ven af mine skabe et lignende setup med hans side på ToddRecommends.TV hvem der gør Live streams og samtaler Film og Tech. You can see a clip of what his front page currently looks like on the right-hand side. Du kan se et klip af, hvad hans forsiden øjeblikket ser ud som om den højre side. 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 sin seneste stillinger for hver af hans vigtigste kategorier på hans side og viser et feed på toppen lige fra en anden kategori, som han bruger for opdateringer om arrangementer, opdateringer og generelle nyheder.

Posted by: Rob Skrevet af: Rob
Category: Blogging , Coding , Featured , Web Design Kategori: Blogging, kodning, Featured, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Coding, CSS, Design, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Svare: Efterlad en kommentar | Trackback URL