Wordpress Custom Home Page Design - Widgetized Front Page Wordpress Design personalizat Home page - Widgetized prima pagina

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]. Aşadar, aţi reuşit să specificaţi o comandă în pagina de faţă Wordpress dvs. de configurare de gând să: [Setări], [lectură], [prima pagină afişează], [ "O pagină de statică" - buton radio]. What now? Ce fac acum? Who cares if you can create a custom front page with static content on it. Cui îi pasă dacă puteţi crea o comandă prima pagina cu continut static pe ea. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Vrem ceva misto, mai avansate, wigetized goodies de a lucra împreună pe un blog-ul nostru de bază dinamic. 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. Dacă aţi văzut noul prima pagina a RobMalon.Com atunci veţi avea o idee de unele dintre funcţiile Sunt pe cale de a învăţa, astfel încât să puteţi setup ceva similar de pe blog-ul.

Custom Home Page Design & Layout Custom home page design & layout

An important first step to this is drafting out what you want to do. Un prim pas important pentru a se prezenta în elaborarea proiectelor ce vrei sa faci. Organize what widgets are going to go where. Organizaţi-ce fleacuri să mergem unde. That’s difficult if you don’t know what Wordpress is capable of. Asta e dificil, dacă nu ştiţi ce este capabil de Wordpress. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Deci, pe scurt, să trecem peste ceea ce avem la mâinile noastre, de a-ti prima pagina de conţinut pe baza acestor întrebări:

• What categories if any are important enough to to give them their own mini feed on the front page? Ce dacă orice categorii sunt destul de important pentru a le da la propria lor mini de alimentare de pe prima pagina?
• How many recent articles in each widget do you want to display? Cât de multe articole recente, în fiecare widget vrei să afişeze? 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. Compensarea asta în diverse locuri vă va permite să optimizaţi o pagina pentru a ajunge la echilibru este frumos, unde, pentru că altfel nu ar impar de conţinut în coloane.
• Do you want to display the first 200 characters (without links/images) of each article? Doriţi să afişeze prima de 200 de caractere (fără legături / imagini) din fiecare articol? Consider how this will effect the previous point I made. Luaţi în considerare cât de acest efect va punctul anterior am făcut.
• Design and architecture. Design şi arhitectură. - See the layout idea to the right for a visual example. - A se vedea schema de ideea de a dreptul pentru un exemplu vizual. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. În faţa locului, unul în stânga, de exemplu s-ar putea pune în 8 mai recente articole de pe tot site-ul şi să includă toate categoriile. In spot two you might have posts only from a category which you’ve labeled “Updates”? În faţa locului, s-ar putea avea două posturi numai de la o categorie pe care l-aţi etichetat "Actualizări"? Or perhaps a category which you use to tag your latest “Video” posts? Sau poate-o categorie care le folosiţi pentru tag-ul dvs. cel mai recent "Video" de posturi? Then in category 3 a list of articles which you consider to be “Featured” articles. Apoi, în categoria 3-o listă de articole pe care le consideră a fi "Featured" articole. The list is endless with options. Lista este fără sfârşit, cu opţiuni. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Când mergeţi la pagina dvs. de configurare ca asta, o mulţime este determinată de cât de bine ai clasifica dvs. curente de posturi. For example, I implemented a featured area in the top tabbed area on the front page. De exemplu, am implementat o zona prezentate în partea de sus cu tab-zona de pe prima pagina. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Am avut de a merge înapoi, a crea o nouă categorie, şi se aplică la acea categorie de posturi existente, după cum am văzut în formă. 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. Apoi, de acum, am pur şi simplu adăugaţi-l ca să fac când am scrie un post pe care vreau să apar în "trăsături" widget pe prima pagina.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. În timp ce sunteţi dumneavoastră de planificare în fleacuri, nu uitaţi, aveţi posibilitatea să utilizaţi codul de la alte plugin-uri, de asemenea. More about that in a bit. Mai mult despre faptul că într-un pic.

Table Or CSS Setup Tabelul css sau setup

Now that you have that down, its time to implement some layout code. Acum, că aveţi o jos, timpul său de a pune în aplicare o schemă de cod. If you’re new to this, set this up in a table. Dacă sunteţi nou în acest, până în acest set un tabel. If you’re looking to go all hardcore, then use a layout with div’s like this: Dacă doriţi să merg toate tare, apoi utilizaţi o schemă cu div lui astfel:

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 Descarca acest cod: 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. In cazul in care esti confuz, acest cod este tot o să plec într-o "pagină", care ar trebui să aveţi deja specificate ca pagină de pornire. 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. Dacă nu, ei nu o idee rea de a practica pe un non-FrontPage, care este nepublicate, aşa încât să puteţi experimenta fără a pune un blog existent în haos.

Coding The Widgets Codificare a mărfurilor de fleacuri

Then you have some options for each widget. Apoi, aveţi câteva opţiuni pentru fiecare control. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Ce trebuie să faceţi este să-i spuneţi buna Wordpress la bucla prin intermediul funcţiei de posturi care doriţi să se afişeze. Here are the examples: Iata exemple:

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 Descarca acest cod: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Crearea de pagini web complicate pot fi consolidat, prin utilizarea de mai multe WordPress şablon de tag-uri. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Toate documentaţia este acolo, pur şi simplu apel de functii cu parametrii doriţi (ca şi disponibile în fiecare şablon de tag-ul). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . În exemplul de mai sus am primul spectacol la un mod de a repeta prin intermediul link-uri într-o anumită categorie cu ajutorul şablonului get_posts tag-ul. 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 . În cel de-al doilea exemplu am folosi-o din nou, dar de data asta nu specificaţi o categorie (aşa-l afişează toate recente comentarii) şi arată the_excerpt () cu care aceasta ia o mână de curent de post în the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Uita-te prin get_post adăuga şi documentaţia corespunzătoare pentru a adapta la variabilele de ieşire pe care doriţi să o vezi. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Fro exemplu, următoarea funcţie get_post va afişa 3 posturi din toate categoriile cu excepţia 5 şi 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( 'numberposts = 3 & =- categoria 5, -8');

If you want to find the ID of a category, post, or page do the followign: Dacă doriţi să găsiţi ID-ul de la o categorie, posta, sau nu pagina de followign:

• log into admin. log în admin.
• Navigate to the manage tab. Navigaţi la administra fila.
• Click categories (or posts or pages) Faceţi clic pe categorii (sau posturi sau pagini)
• Hover over or click on the proper category, post, or page you wish to know the ID of Hover peste sau faceţi clic pe categoria corespunzătoare, posta, sau pagina pe care doriţi să o cunosc pe ID-ul de
• 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: În bara de stare (dacă sunteţi hovering) sau în bara de adrese (dacă faceţi clic pe el) ar trebui să vedeţi un link care similară cu aceasta:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. În exemplul de mai sus am fost în categorii. The category I chose has an idea of “11″. De categoria I-a ales o idee de "11". Now I can exlicitly include or exclude it. Acum pot să exlicitly include sau exclude-o. In some cases you’ll want to do this with posts and/or pages as well. În unele cazuri veţi dori să faceţi asta cu posturi şi / sau de pagini, de asemenea. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesn't acest sprijin, dar dacă te joci cu Wordpress alte funcţii, acestea fac uneori. Check the template tag documentation on a per function basis. Verificaţi eticheta de şablonul pe o documentaţie pe baza funcţiei. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Veţi avea cel puţin ştiu cum să ajung la ID-ul de acum, fără ca dvs. să vă înregistraţi în baza de date MySQL.

Plug-ins Plug-in-uri

You may need a plug-in called Exec-PHP installed on your blog so that you can execute the above PHP code inside posts. Aveţi nevoie de un plug-in-a sunat Exec-PHP instalat pe blog-ul dvs., astfel încât să puteţi executa cod PHP de mai sus in interiorul posturilor. Be careful about installing this plug-in if you have other people managing your blog with you though. Fii atent despre instalarea de acest plug-in, dacă aveţi alte persoane gestionarea blog-ul cu tine, totuşi. If so you can setup custom privileges. Dacă, aşa încât să puteţi configurarea privilegiile personalizat. If not then just make sure its installed and activated. Dacă nu, asiguraţi-vă doar apoi sa instalat şi activat.

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. Sunt sigur că v-aţi văzut nenumărate alte plug-in-ul de acolo care să vă cu un fragment de cod pe care le puteţi utiliza în fişierul dvs. de sidebar.php interiorul Folderul dvs. temei. You can also use that code within any of the widgets you create on your homepage within those blocks. Puteţi folosi, de asemenea, că în orice cod de fleacuri să vă creaţi pe pagina dvs. de pornire în cadrul acestor blocuri. You can usually find code like that inside the readme or install notes file that most plug-in come with. Puteţi găsi codul ca de obicei, că în interiorul README sau instala fişierul pe care ia act de cele mai multe plug-in-veni cu.

Examples Exemple

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Pe de stânga este un exemplu de pagină de la faţa mea când am reconceput RobMalon.Com recent. 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. Am ajutat de asemenea recent un prieten de-al meu a crea un similară cu a lui pagina de configurare de la ToddRecommends.TV care nu vii discuţii şi fluxurile de filme si Tech. You can see a clip of what his front page currently looks like on the right-hand side. Puteţi vedea un clip ce a lui fata de pagini în prezent arată ca pe partea dreaptă. 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. El a sale recente de posturi pentru fiecare dintre principalele categorii de pe pagina lui şi se afişează pe o alimentare de sus dreapta de la o altă categorie care el foloseste pentru actualizări despre evenimente, actualizări şi ştiri cu caracter general.

Posted by: Rob Adăugată pe site de: Rob
Category: Blogging , Coding , Featured , Web Design Categorie: Romania, codificare a mărfurilor, Featured, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: codificare a mărfurilor, CSS, Design, PHP, Plugin-uri, Wordpress
Respond: Leave A Comment | Trackback URL Răspunde: Lasă un comentariu | Trackback URL-ul