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

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]. Niin olet onnistunut määrittää mukautetun edessä sivulta Wordpress asennus menemällä: [asetukset], [käsittely], [etusivu näytöt], [ "A staattinen sivu" - Radio Button]. What now? Mitä nyt? Who cares if you can create a custom front page with static content on it. Ketä kiinnostaa, jos voit luoda mukautettuja etusivu staattisen sisällön sitä. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Haluamme hieman jäähtyä, lisää kehittyneitä, wigetized kivaa vetää yhteen blogistamme on dynaaminen pohjalta. 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. Jos olet nähnyt uuden etusivulla RobMalon.Com sinulla on idea joidenkin toimintojen Olen noin opettaa sinua niin, että voit setup jotain vastaavaa blogissasi.

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

An important first step to this is drafting out what you want to do. Tärkeä ensimmäinen askel tähän on laatimiseen, mitä haluat tehdä. Organize what widgets are going to go where. Järjestä mitä vekottimet eivät mene minne. That’s difficult if you don’t know what Wordpress is capable of. Se on vaikeaa, jos et tiedä, mitä Wordpress pystyy. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: , Niin lyhyesti, mitä meillä on käsissä, suunnitella oma etu sivun sisältö perustuu näihin kysymyksiin:

• What categories if any are important enough to to give them their own mini feed on the front page? Mihin jos niitä on tarpeeksi tärkeää antaa heille oman mini-rehun etusivulla?
• How many recent articles in each widget do you want to display? Kuinka monta viime artikkelit kunkin vekotin haluat näyttää? 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. Mitätöinyt eri paikoissa voit nykäistä etusivun saada sitä tasapainoa mukavasti, jos se muuten ei epätasaisen sisällön saraketta.
• Do you want to display the first 200 characters (without links/images) of each article? Haluatko näyttää ensimmäinen 200 merkkiä (ilman linkkejä / kuvia) kunkin artikkelissa? Consider how this will effect the previous point I made. Mieti miten se vaikuttaa edellisessä kohdassa tein.
• Design and architecture. Design ja arkkitehtuuri. - See the layout idea to the right for a visual example. - Ks layout ajatus oikeuden visuaalinen esimerkki. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. Spot yksi vasemmalla puolella esimerkiksi saatat panna 8 viimeisimmät artikkelit koko sivusto ja kaikki luokat. In spot two you might have posts only from a category which you’ve labeled “Updates”? Spot kaksi saatat olla virkaa vain ryhmään, jolla olet merkintä "päivitykset"? Or perhaps a category which you use to tag your latest “Video” posts? Tai ehkä luokkaa, jota käytät koodata uusimmat "Video" virkaa? Then in category 3 a list of articles which you consider to be “Featured” articles. Sitten luokkaan 3 on luettelo artikkeleista, jota pitävät "Featured" artikkeleita. The list is endless with options. Lista on loputon ja vaihtoehtoja. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Kun go to setup sivun tällä tavalla, paljon on määritettävä kuinka hyvin luokitella nykyistä virkaa. For example, I implemented a featured area in the top tabbed area on the front page. Esimerkiksi, olen toteuttanut varustellun alueen alkuun välilehdet alueella etusivulta. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Minulla oli palattava takaisin, luoda uusi luokka, ja niitä sovelletaan tähän ryhmään olemassa oleviin virkoihin kuten olen nähnyt sen tarpeelliseksi. 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. Sitten nyt, en yksinkertaisesti lisätä sitä lähden, kun Olen kirjoittaa postitse, että haluan osoittaa esiin "ominaisuudet" widget ensimmäisellä sivulla.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Vaikka aioit oma vekottimet, älä unohda, voit käyttää koodin muiden plugins samoin. More about that in a bit. Lisätietoja että hieman.

Table Or CSS Setup Pöytä-tai CSS-setup

Now that you have that down, its time to implement some layout code. Nyt kun olet että alas, sen aika toteuttaa joitakin layout-koodi. If you’re new to this, set this up in a table. Jos olet uusi tässä, näin on taulukossa. If you’re looking to go all hardcore, then use a layout with div’s like this: Jos etsit mennä kaikki hardcore, tällöin käyttää ulkoasun kanssa div n tältä:

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 Lataa tämä koodi: 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. Jos olet hämmentynyt, kaikki tämä koodi tulee siirtymään "-sivulla", joka sinulla pitäisi olla jo määritetty etusivulta. 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. Jos ei, se ei ole huono ajatus, että käytännössä ei-etusivulle, joka on julkaisematon, jotta voit kokeilu ilman, että olemassa olevaan blogiin kaaokseen.

Coding The Widgets Coding widgeteihin

Then you have some options for each widget. Sitten on joitakin vaihtoehtoja kunkin vekotin. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Mitä sinun tarvitsee tehdä, on kertoa oikean Wordpress toiminnon läpikytkentä virkojen että haluat näyttää. Here are the examples: Seuraavassa on esimerkkejä:

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 Lataa tämä koodi: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Luominen monivaiheinen kotisivut voidaan edelleen tehostaa käyttämällä useita wordpress template koodeja. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Kaikki asiakirjat on yksinkertaisesti soittaa toimintoja parametrit haluamasi (saatavilla kunkin mallin tag). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . Yllä olevassa esimerkissä minun ensimmäinen osoittavat tapa kerrata kautta linkkejä tiettyyn ryhmään käyttäen mallin 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 . Tässä toinen esimerkki voin käyttää sitä uudelleen, mutta tällä kertaa ei käy ilmi luokka (niin se näyttää kaikki viime virkaa) ja näyttää the_excerpt () se, joka tekee lehtileike, että nykyinen virka the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Katso kautta get_post asiakirjoja ja liittää asianmukainen muuttujat mukauttaa tuotanto haluaisit nähdä. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Edestakaisin esimerkiksi seuraavat get_post toiminto näyttää 3 virkoja kaikissa luokissa lukuun ottamatta 5 ja 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( "numberposts = 3 & luokan =- 5, -8 ');

If you want to find the ID of a category, post, or page do the followign: Jos haluat löytää tunnus luokka, postitse tai sivun tehdä seuraavien:

• log into admin. kirjautua admin.
• Navigate to the manage tab. Siirry hallinta-välilehti.
• Click categories (or posts or pages) Valitse luokkien (tai virkaa tai sivua)
• Hover over or click on the proper category, post, or page you wish to know the ID of Leijua yli tai klikkaamalla oikean luokan, postitse tai sivu, jonka haluat tietää tunnus
• 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: Vuonna tilarivin (jos olet hovering) tai osoitekenttään (jos olet napsauttanut) sinun pitäisi nähdä linkkiä, joka näyttää tältä:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. Edellä mainitussa esimerkissä olin luokkiin. The category I chose has an idea of “11″. Luokan Valitsin on ajatus "11". Now I can exlicitly include or exclude it. Nyt voin exlicitly sisällyttää tai jättää pois siitä. In some cases you’ll want to do this with posts and/or pages as well. Joissakin tapauksissa sinun halua tehdä tätä virkaa ja / tai sivuja kuin hyvin. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesn't tukea tätä, mutta jos pelaat muiden Wordpress toimintoja, ne joskus tehdä. Check the template tag documentation on a per function basis. Tarkista malli tag asiakirjat on kunkin tehtäväryhmän perusteella. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Sinulta ainakin tietää, kuinka saada ID: n nyt ilman kirjautua MySQL-tietokantaan.

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. Saatat tarvita laajennus nimeltä Exec-PHP asennettuna blogi, jotta voit suorittaa edellä PHP-koodin sisällä virkaa. Be careful about installing this plug-in if you have other people managing your blog with you though. Ole varovainen asentamalla tämän plug-in, jos sinulla on muita ihmisiä hallintaan blogisi teidän kanssanne vaikka. If so you can setup custom privileges. Jos niin voit setup mukautetun etuoikeuksia. If not then just make sure its installed and activated. Jos ei sitten vain varmistaa se on asennettu ja aktivoitu.

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. Olen varma, että olet nähnyt lukemattomia muita plugin on olemassa, jotka tarjoavat sinulle katkelman-koodin, jonka voit käyttää sidebar.php tiedoston sisällä teema-kansioon. You can also use that code within any of the widgets you create on your homepage within those blocks. Voit käyttää myös, että koodi johonkin vekottimet voit luoda omalla etusivulla näissä lohkoissa. You can usually find code like that inside the readme or install notes file that most plug-in come with. Voit yleensä löytää koodia, että sisällä Readme tai asentaa toteaa tiedosto, että useimmat plug-in mukana.

Examples Esimerkkejä

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Vasemmalla on esimerkki minun etusivu siitä, kun olin hiljattain uusittu 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. Olen myös viime aikoina auttanut henkilökohtainen ystäväni luo samankaltaisia asennusohjelma hänen sivulla osoitteessa ToddRecommends.TV kuka tekee Live-lähetyksiä ja keskusteluja Elokuvat ja Tech. You can see a clip of what his front page currently looks like on the right-hand side. Voit nähdä leikkeen, mitä hänen etusivu tällä hetkellä näyttää samalta kuin oikealla puolella. 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. Hän on hänen uusimmat viestit kullekin hänen pääryhmään hänen sivun ja näyttää syötteen oikeassa yläkulmassa toisen luokan johon hän käyttää päivitykset tapahtumista, päivitykset ja yleisiä uutisia.

Posted by: Rob Posted by: Rob
Category: Blogging , Coding , Featured , Web Design Luokka: blogit, koodaus, Featured, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Coding, CSS, suunnittelu, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Vastaa: Jätä kommentti | trackback URL