Wordpress Custom Home Page Design - Widgetized Front Page Wordpress tilpassede hjemmesiden Design - Widgetized forside

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 klart å spesifisere en tilpasset forsiden i Wordpress oppsett ved å gå til: [innstillinger], [leser], [forsiden viser], [ "En statisk side" - Radioknapp]. What now? Hva nå? Who cares if you can create a custom front page with static content on it. Hvem bryr seg om du kan lage en egendefinert forside med statisk innhold på det. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Vi ønsker litt kul, mer avanserte, wigetized godbiter å trekke sammen vår blogg på en dynamisk grunnlag. 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 sett den nye forsiden av RobMalon.Com så har du en ide om noen av funksjonene jeg er i ferd med å lære deg slik at du kan konfigurere noe lignende på bloggen.

Custom Home Page Design & Layout Tilpassede hjemmesiden Design & Layout

An important first step to this is drafting out what you want to do. Et viktig første skritt mot dette er å utforme ut hva du vil gjøre. Organize what widgets are going to go where. Organisere hva widgets kommer til å gå der. That’s difficult if you don’t know what Wordpress is capable of. Det er vanskelig hvis du ikke vet hva 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: Så, kort skal gå over hva vi har i våre hender, kommer ut på forsiden innhold basert på disse spørsmålene:

• What categories if any are important enough to to give them their own mini feed on the front page? Hvilke kategorier hvis noen er viktig nok til å gi dem eget mini-feed på forsiden?
• How many recent articles in each widget do you want to display? Hvor mange de siste artiklene i hvert widget ønsker du å 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. Forskyvning dette på ulike steder lar deg justere en hjemmeside for å få det til å balansere pent der det ellers ikke ville på grunn av ujevn innholdet i kolonnene.
• Do you want to display the first 200 characters (without links/images) of each article? Har du lyst til å vise de første 200 tegnene (uten koblinger / bilder) i en artikkel? Consider how this will effect the previous point I made. Vurdere hvordan dette vil påvirke forrige punkt jeg har gjort.
• Design and architecture. Design og arkitektur. - See the layout idea to the right for a visual example. - Se oppsettet idé til høyre for et visuelt 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 kan du sette de 8 siste artiklene på hele nettstedet og omfatter alle kategorier. In spot two you might have posts only from a category which you’ve labeled “Updates”? I stedet to som du kan ha innlegg bare fra en kategori som du har kalt "Oppdateringer"? Or perhaps a category which you use to tag your latest “Video” posts? Eller kanskje en kategori som du bruker til å merke nyeste "Video" innlegg? Then in category 3 a list of articles which you consider to be “Featured” articles. Så i kategorien 3 en liste over artikler som du anser å være "Featured"-artikler. The list is endless with options. Listen er uendelig med muligheter. 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 oppsett din side som dette, mye er avhengig av hvor godt du kategorisere din nåværende stillinger. For example, I implemented a featured area in the top tabbed area on the front page. For eksempel har jeg implementert et funksjonsrikt området i den øverste fanene 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 måtte gå tilbake, opprette en ny kategori, og gjelder som kategori til eksisterende innlegg som jeg så passe. 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. Så, fra nå av, jeg bare legge til det så jeg går når jeg skriver et innlegg som jeg vil vise seg i "Featured" widget på forsiden.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Mens du planlegger ut dine ting, ikke glem at du kan bruke kode fra andre plugins i tillegg. More about that in a bit. Mer om det i en bit.

Table Or CSS Setup Tabell eller CSS-oppsett

Now that you have that down, its time to implement some layout code. Nå som du har denne ned, sin tid til å gjennomføre noen layout-kode. If you’re new to this, set this up in a table. Hvis du er ny i dette, sett det opp i en tabell. If you’re looking to go all hardcore, then use a layout with div’s like this: Hvis du er ute å går alle hardcore, og deretter bruke en utforming 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 Last ned denne koden: 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 tilfelle du er forvirret, all denne koden kommer til å gå inn i en "side" som du bør allerede har definert som hjemmeside. 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. Hvis ikke, det er ikke en dårlig idé å øve på ikke-forside som er upublisert, slik at du kan eksperimentere uten å sette en eksisterende bloggen i kaos.

Coding The Widgets Coding Widgeter

Then you have some options for each widget. Da har du noen alternativer for hver enhet. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Hva du trenger å gjøre er å fortelle den riktige Wordpress funksjon for å sløyfe gjennom innleggene som du ønsker å 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 Last ned denne koden: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Etableringen av intrikate hjemmesider kan bli ytterligere forbedret ved hjelp av flere WordPress mal koder. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). All dokumentasjon er det bare å ringe funksjonene med parameterne du vil (som er tilgjengelig i hvert mal kode). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . I eksempelet ovenfor jeg først vise en måte å iterate gjennom koblinger i en bestemt kategori ved hjelp av malen 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 andre eksemplet jeg bruke det igjen men denne gangen ikke angir en kategori (slik at den viser alle de siste innleggene) og viser the_excerpt () med den som tar en klipping av nåvæ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. Se gjennom get_post dokumentasjon og føyer de riktige variabler å justere du ønsker å se. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Fro eksempel følgende get_post funksjonen vil vise 3 innlegg fra alle kategorier bortsett fra 5 og 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( 'numberposts = 3 & kategorien =- 5, -8');

If you want to find the ID of a category, post, or page do the followign: Hvis du vil finne ID-en en kategori, post, eller siden gjøre followign:

• log into admin. logg inn admin.
• Navigate to the manage tab. Naviger til styre-kategorien.
• Click categories (or posts or pages) Klikk kategorier (eller innlegg eller sider)
• Hover over or click on the proper category, post, or page you wish to know the ID of Hold musen over eller klikk på riktig kategori, post, eller siden du ønsker å vite at IDen til
• 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: På statuslinjen (hvis du holde markøren) eller i adresselinjen (hvis du klikket) burde du se en link som ser slik ut:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. I eksemplet ovenfor var jeg i kategorier. The category I chose has an idea of “11″. Den kategorien jeg valgte har en ide om "11". Now I can exlicitly include or exclude it. Nå kan jeg exlicitly inkludere eller ekskludere det. In some cases you’ll want to do this with posts and/or pages as well. I noen tilfeller vil du gjøre dette med innlegg og / eller sider i tillegg. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesn't support dette, men hvis du spiller med andre Wordpress funksjoner, de noen ganger gjør. Check the template tag documentation on a per function basis. Sjekk malen tag dokumentasjon på en per funksjon basis. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Du vil i alle fall vite hvordan man kan få ID står nå uten å måtte logge deg på 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. Det kan hende du trenger en plug-in kalt Exec-PHP installert på bloggen din slik at du kan utføre over PHP-koden inni innlegg. Be careful about installing this plug-in if you have other people managing your blog with you though. Være forsiktig med å installere denne plug-in hvis du har andre mennesker håndtering av bloggen med deg selv. If so you can setup custom privileges. Hvis slik at du kan konfigurere egendefinerte privilegier. If not then just make sure its installed and activated. Hvis ikke så bare sørge for at dens installert og aktivert.

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 sett utallige andre programtillegg er der ute som gir deg et lite kode som du kan bruke i sidebar.php filen er inne på temaet mappen. You can also use that code within any of the widgets you create on your homepage within those blocks. Du kan også bruke koden innenfor noen av de widgeter du oppretter på din hjemmeside i disse blokkene. You can usually find code like that inside the readme or install notes file that most plug-in come with. Du kan vanligvis finne koden sånn inne Viktig eller installere Notes-fil som 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 . På venstre er et eksempel på min front side fra da jeg nylig redesignet 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å nylig hjalp en personlig venn av meg opprette et lignende oppsett med hans side på ToddRecommends.TV Hvem gjør Live bekker og snakker filmer og Tech. You can see a clip of what his front page currently looks like on the right-hand side. Du kan se et klipp av hva hans forsiden nå ser ut på høyre 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 siste innleggene for hver av sine hovedkategorier på sin side og viser en strøm på øverst til høyre fra en annen kategori som han bruker for oppdateringer om hendelser, oppdateringer og generelle nyheter.

Posted by: Rob Skrevet av: Rob
Category: Blogging , Coding , Featured , Web Design Kategori: Blogging, Coding, Presentasjon, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Coding, CSS og design, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Svarer: legg igjen en kommentar | TrackBack URL