Wordpress Custom Home Page Design - Widgetized Front Page Wordpress Custom Početna stranica design - Widgetized naslovnica

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]. Tako ste uspio odrediti prilagođeni naslovnici Wordpress u svoj setup tako da odete na: [Postavke], [čitanja], [naslovnici prikazuje], [ "statična stranica" - Radio Button]. What now? Što sada? Who cares if you can create a custom front page with static content on it. Koga briga, ako možete stvoriti prilagođeni ispred stranicu sa statičan sadržaj na njoj. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Želimo neke cool, napredniji, wigetized Goodies sarađivati na našem blogu na dinamičnom osnovi. 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. Ako ste vidjeli nove prednje stranice RobMalon.Com tada ćete imati ideju neke funkcije sam o da vas naučiti kako možete setup nešto slično na svom blogu.

Custom Home Page Design & Layout Prilagođena početna stranica design & layout

An important first step to this is drafting out what you want to do. Važan prvi korak u izradi je to ono što želite učiniti. Organize what widgets are going to go where. Organizirajte što clanci idu na izlet gdje. That’s difficult if you don’t know what Wordpress is capable of. To je teško ako ne znate što Wordpress je sposobna. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Dakle, na kratko prijeći što imamo u našim rukama, plan za prednje stranice sa sadržajem na temelju tih pitanja:

• What categories if any are important enough to to give them their own mini feed on the front page? Koje kategorije ako je bilo koji su dovoljno važni da im vlastite mini-feed na prednjoj stranici?
• How many recent articles in each widget do you want to display? Koliko nedavne članke u svakoj widget želite prikazati? 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. Offsetting to u raznim mjestima će vam omogućiti da jedan štipanje početnoj stranici kako bi to lijepo, gdje je saldo na drugi način ne bi zbog neravno sadržaj u stupce.
• Do you want to display the first 200 characters (without links/images) of each article? Želite li prikazati prvih 200 znakova (bez veze / slike) svakog rad? Consider how this will effect the previous point I made. Razmislite o tome kako će to utjecati na prethodnu točku sam napravio.
• Design and architecture. Dizajn i arhitektura. - See the layout idea to the right for a visual example. - Pogledajte raspored ideji da pravo za vizualni primjer. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. U jednom mjestu u lijevoj strani primjer možda stavim 8 najnovije članke preko cijele stranice i uključuje sve kategorije. In spot two you might have posts only from a category which you’ve labeled “Updates”? U dvije točke možete imati postove samo od kategorija koje ste etiketom "Updates"? Or perhaps a category which you use to tag your latest “Video” posts? Ili možda kategoriju koju koristite za oznaku na posljednje "Video" komentara? Then in category 3 a list of articles which you consider to be “Featured” articles. Tada se u 3 kategorije popis članaka koji vas razmislite kako bi se "NAJ" članaka. The list is endless with options. Lista je nepregledna s opcijama. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Kada se ide postaviti svoju stranicu kao što je ovaj, dosta se određuje na koliko dobro kategorizirati vaš trenutni postove. For example, I implemented a featured area in the top tabbed area on the front page. Na primjer, ja implementirao sustav opremljenog prostora u vrhu rješenja za kartično području na prednjoj stranici. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Morao sam se vratiti, napravite novu kategoriju i kategoriju koja se primjenjuju na postojeće komentara kao što sam vidio stane. 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. Zatim, od sada, ja jednostavno dodati kao kad ja idem napisati post koji želim prikazati u "glavnoj ulozi" widget na prednjoj stranici.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Dok ste planiranje svoj clanak, ne zaboravite, možete koristiti kod drugih dodataka kao dobro. More about that in a bit. Više o tome na malo.

Table Or CSS Setup Tablica ili CSS setup

Now that you have that down, its time to implement some layout code. Sada kada ste da se, za svoje vrijeme provesti kod nekih izgleda. If you’re new to this, set this up in a table. Ako ste novi u ovom, postaviti se u tablici. If you’re looking to go all hardcore, then use a layout with div’s like this: Ako žele ići sve hardcore, a zatim koristiti s div-a izgleda ovako:

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 Preuzmi ovaj 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. U slučaju da ste zbunjeni, sve to ide kod je ići u "stranice" koje trebali ste već naveli kao početnu stranicu. 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. Ako nije, nije loše ideja da se o praksi koja nije Naslovnica koji je neobjavljenih tako da možete eksperiment bez stavljanja postojećeg bloga u kaos.

Coding The Widgets Coding na clanak

Then you have some options for each widget. Tada imate neke opcije za svaki widget. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Što trebate učiniti je javiti se pravilnom Wordpress funkciju petlja kroz postove koje želite prikazati. Here are the examples: Evo primjera:

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 Preuzmi ovaj kod: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Izrada zapetljan homepages mogu biti dodatno poboljšana korištenjem više wordpress predložak oznake. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Sva dokumentacija je tamo, jednostavno poziv funkcije sa parametrima koje želite (kao predložak dostupan u svakoj oznaci). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . U gornjem primjeru sam prvi put pokazuju da ponoviti kroz veze u određenu kategoriju koristite get_posts predložak oznaku. 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 . U drugom primjeru sam ga koristiti opet, ali ovaj put ne odredite kategorije (tako da prikaže sve nedavne postove) i pokazati the_excerpt () s koje zauzima isječak iz tekuće post u the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Potražite kroz get_post dokumentaciju priložiti i odgovarajuće varijable za podešavanje izlaznog želite vidjeti. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Amo-tamo, primjerice, sljedeće get_post funkcija bit će prikazani 3 komentara iz svih kategorija osim 5 i 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( 'numberposts = 3 & category =- 5, -8);

If you want to find the ID of a category, post, or page do the followign: Ako želite pronaći ID kategorije, post ili stranicu učiniti followign:

• log into admin. prijavite se na admin.
• Navigate to the manage tab. Idi na upravljanje karticu.
• Click categories (or posts or pages) Kliknite na kategorije (ili komentara ili stranica)
• Hover over or click on the proper category, post, or page you wish to know the ID of Lebdjeti iznad ili kliknite na odgovarajuće kategorije, post, ili stranice koje želite znati 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: U status baru (ako ste lebdeći) ili u adresnoj traci (ako ste kliknuli) trebali biste vidjeti link koji izgleda otprilike ovako:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. U gornjem primjeru bio sam u kategorije. The category I chose has an idea of “11″. Kategorija sam izabrao ima ideju "11". Now I can exlicitly include or exclude it. Sada sam exlicitly može uključiti ili isključiti ga. In some cases you’ll want to do this with posts and/or pages as well. U nekim slučajevima ćete željeti to učiniti s postove i / ili stranice te. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesn't podršku ovom, ali ako se igrati s drugim Wordpress funkcije, oni ponekad radimo. Check the template tag documentation on a per function basis. Provjerite predložak oznaku dokumentaciju na temelju po funkciji. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Ćete barem znati kako da biste dobili ID-a sada bez prijavite se na MySQL bazu podataka.

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. Vi svibanj potrebno je plug-in zove Exec-PHP instaliran na svom blogu tako da možete izvršiti iznad PHP kod unutra postove. Be careful about installing this plug-in if you have other people managing your blog with you though. Budite pažljivi o instalirate ovaj plug-in ako imate druge ljude upravljanje svoj blog s vama iako. If so you can setup custom privileges. Ako tako možete postavljanje korisničke privilegije. If not then just make sure its installed and activated. Ako ne onda samo pobrinite svoje instalirana i aktivirana.

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. Siguran sam da ste vidjeli bezbroj drugih dodatka je vani koji vam s isječak koda koji možete koristiti u svom sidebar.php datoteka unutar vaše teme mapi. You can also use that code within any of the widgets you create on your homepage within those blocks. Možete također da koristite bilo koji broj u roku od sprava koju napravite na svojoj početnoj stranici unutar tih blokova. You can usually find code like that inside the readme or install notes file that most plug-in come with. Obično možete pronaći kod kao da unutar README datoteku ili instalirati napomene da je većina plug-in doći s.

Examples Primjeri

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Na lijevoj je primjer moja stranica prednja od kada sam nedavno redizajnirano 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. Također sam nedavno pomogao osobni prijatelj moje stvoriti slične setup sa svojim stranicu na ToddRecommends.TV koji ne uživo potoci i razgovori Filmovi i Teh. You can see a clip of what his front page currently looks like on the right-hand side. Možete vidjeti isječak što njegov ispred stranici trenutno izgleda na desno. 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. On je njegov nedavni postova za svaku od njegovih glavnih kategorija na njegovu stranici i prikazivanjem feed na vrh pravo iz neke druge kategorije koje se koristi za nadopune o događajima, ažuriranja i općenito vijesti.

Posted by: Rob Posted by: Rob
Category: Blogging , Coding , Featured , Web Design Kategorija: Video, Coding, NAJ, Web dizajn
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Coding, CSS, Design, PHP, Dodaci u pregledniku, Wordpress
Respond: Leave A Comment | Trackback URL Odgovaranje: Ostavite komentar | Trackback url