Wordpress Custom Home Page Design - Widgetized Front Page Wordpress home page personalizzata di progettazione - 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]. Quindi hai riusciti a specificare una pagina personalizzata nel tuo setup Wordpress andando a: [Impostazioni], [lettura], [prima pagina visualizza], [ "Una pagina statica" - Radio Button]. What now? E adesso? Who cares if you can create a custom front page with static content on it. Chi se ne frega se è possibile creare una pagina personalizzata con contenuto statico su di esso. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Vogliamo alcuni fresco, più avanzato, wigetized goodies per tirare insieme il nostro blog su una base dinamica. 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. Se hai visto la nuova prima pagina di RobMalon.Com quindi avrete un'idea di alcune delle funzioni che sto per insegnare in modo che voi potete impostazione qualcosa di simile sul tuo blog.

Custom Home Page Design & Layout Home page personalizzata Design & Layout

An important first step to this is drafting out what you want to do. Un primo passo importante per questa elaborazione è quello che vuoi fare. Organize what widgets are going to go where. Organizzare ciò che i widget sono in corso per andare dove. That’s difficult if you don’t know what Wordpress is capable of. Questo è difficile, se non sapete cosa Wordpress è in grado di. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Quindi, a breve andare oltre ciò che abbiamo alle nostre mani, il tuo piano di prima pagina di contenuti basati su queste due domande:

• What categories if any are important enough to to give them their own mini feed on the front page? Che cosa se tutte le categorie sono sufficientemente importante per dare loro il proprio mini-feed sulla prima pagina?
• How many recent articles in each widget do you want to display? Quanti articoli recenti in ogni widget che si desidera visualizzare? 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. Questa compensazione in diversi luoghi vi permetterà di perfezionare una home page per farlo ben saldo dove altrimenti non sarebbe irregolare a causa del contenuto in colonne.
• Do you want to display the first 200 characters (without links/images) of each article? Vuoi visualizzare le prime 200 caratteri (senza collegamenti / immagini) di ogni articolo? Consider how this will effect the previous point I made. Si consideri questo come effetto del precedente punto ho fatto.
• Design and architecture. Design e architettura. - See the layout idea to the right for a visual example. - Si veda il layout idea a destra per un esempio visivo. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. In uno spot nella parte sinistra esempio si potrebbe mettere il 8 Articoli più recenti in tutto il sito e comprendono tutte le categorie. In spot two you might have posts only from a category which you’ve labeled “Updates”? In due spot che si possono avere solo posti da una categoria che hai classificati come "Aggiornamenti"? Or perhaps a category which you use to tag your latest “Video” posts? O forse di una categoria che si utilizza per la sua ultima etichetta "Video" post? Then in category 3 a list of articles which you consider to be “Featured” articles. Poi nella categoria 3 un elenco di articoli che lei ritiene di essere "Vetrina" articoli. The list is endless with options. L'elenco è infinito con le opzioni. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Quando vai alla tua pagina di configurazione come questo, un lotto è determinato in modo ben classificare il tuo attuale post. For example, I implemented a featured area in the top tabbed area on the front page. Per esempio, ho implementato una zona caratterizzata in alto area sulla prima pagina. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Ho dovuto tornare indietro, creare una nuova categoria, e di applicare tale categoria di posti esistenti come ho visto in forma. 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. Quindi, da ora in poi, ho semplicemente aggiungere come andare a fare quando scrivo un post che voglio mostrare in "optional" widget sulla prima pagina.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Mentre si sta pianificando il vostro widget, non deve dimenticare, è possibile utilizzare il codice di altri plugin come bene. More about that in a bit. Più che in circa un po '.

Table Or CSS Setup Tabella di installazione o CSS

Now that you have that down, its time to implement some layout code. Ora che hai che verso il basso, il suo tempo per attuare alcune codice del layout. If you’re new to this, set this up in a table. Se siete nuovi a questo, impostare questo in una tabella. If you’re looking to go all hardcore, then use a layout with div’s like this: Se stai cercando di andare tutti hardcore, quindi utilizzare un layout con div come questo:

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 Scarica questo codice: 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. Nel caso in cui sei confuso, tutto questo codice sta per andare in una "pagina", che dovreste aver già specificato come la home page. 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. In caso contrario, la sua non è una cattiva idea pratica in modo non-FrontPage, che è inedito in modo da poter sperimentare senza porre blog esistente nel caos.

Coding The Widgets Il widget di codificazione delle merci

Then you have some options for each widget. Poi avete alcune opzioni per ogni widget. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Cosa dovete fare è dire il buon Wordpress funzione "loop through" per i post che desideri visualizzare. Here are the examples: Ecco degli esempi:

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 Scarica questo codice: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Creazione di home page intricato può essere ulteriormente migliorato l'utilizzo di più tag dei template wordpress. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Tutta la documentazione è lì, è sufficiente richiamare le funzioni con i parametri che si desidera (come disponibili in ogni modello di etichetta). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . Nell'esempio precedente ho prima mostra un modo per scorrere attraverso i collegamenti in una particolare categoria utilizzando il modello di etichetta 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 . Nel secondo esempio utilizzare nuovamente, ma questa volta non si specifica una categoria (in modo che visualizza tutti i post recenti) e mostra the_excerpt () con il quale si prende una saturazione delle attuali posto in the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Guardare attraverso il get_post di documentazione e di aggiungere il corretto variabili per regolare l'uscita che ti piacerebbe vedere. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: FRO esempio, il seguente get_post funzione di visualizzazione 3 posti da tutte le categorie ad eccezione di 5 e 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: Se si desidera trovare l'ID di una categoria, posta, o fare la pagina followign:

• log into admin. admin log in.
• Navigate to the manage tab. Passare alla scheda gestire.
• Click categories (or posts or pages) Fare clic su categorie (o post o pagine)
• Hover over or click on the proper category, post, or page you wish to know the ID of Oltre al passaggio del mouse o fare clic sulla corretta categoria, posta, o la pagina che si desidera conoscere l'ID del
• 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: Nella barra di stato (se sei hovering) o nella barra degli indirizzi (se hai cliccato), si dovrebbe vedere un link simile a questa:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. Nel precedente esempio sono stato in categorie. The category I chose has an idea of “11″. La categoria che ho scelto ha un idea di "11". Now I can exlicitly include or exclude it. Ora posso exlicitly includere o escludere essa. In some cases you’ll want to do this with posts and/or pages as well. In alcuni casi si vorrà fare con questo post e / o pagine. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesn't sostenere questo, ma se si gioca con le altre funzioni di Wordpress, che a volte fare. Check the template tag documentation on a per function basis. Controllare l'etichetta modello di documentazione su una base per ogni funzione. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Avrete almeno sapere come ottenere l'ID ora, senza dover accedere al vostro database MySQL.

Plug-ins Plug-in

You may need a plug-in called Exec-PHP installed on your blog so that you can execute the above PHP code inside posts. Potrebbe essere necessario un plug-in chiamato Exec-PHP installato sul tuo blog in modo che sia possibile eseguire il codice PHP sopra posti all'interno. Be careful about installing this plug-in if you have other people managing your blog with you though. Fate attenzione a installare questo plug-in se hai altre persone gestire il tuo blog con te se. If so you can setup custom privileges. In caso affermativo è possibile setup personalizzati privilegi. If not then just make sure its installed and activated. Se poi non solo assicurarsi che il proprio installato e attivato.

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. Sono sicuro che hai visto innumerevoli altri plugin di là fuori che ti offre un frammento di codice che è possibile utilizzare nel vostro sidebar.php file all'interno del vostro tema cartella. You can also use that code within any of the widgets you create on your homepage within those blocks. È inoltre possibile utilizzare tale codice all'interno di uno qualsiasi dei widget si crea nella tua home page all'interno di tali blocchi. You can usually find code like that inside the readme or install notes file that most plug-in come with. Potete trovare il codice di solito come quella all'interno del readme o installare file rileva che la maggior parte dei plug-in di venire con.

Examples Esempi

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Sulla sinistra è un esempio della mia prima pagina da quando ho recentemente ridisegnato 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. Ho anche recentemente ha aiutato un amico personale mio istituire un simile impostazione con la sua pagina a ToddRecommends.TV che non Live torrenti e colloqui Film e Tech. You can see a clip of what his front page currently looks like on the right-hand side. Potete vedere un clip di ciò che la sua prima pagina al momento appare come sul lato destro. 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. Ha i suoi ultimi posti per ciascuno dei suoi principali categorie sulla sua pagina e viene visualizzato un feed in alto a destra da un'altra categoria, che egli utilizza per gli aggiornamenti sugli eventi, aggiornamenti e notizie generali.

Posted by: Rob Inviato da: Rob
Category: Blogging , Coding , Featured , Web Design Categoria: blogging, di codificazione delle merci, del mese, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tag: codificazione delle merci, CSS, Design, PHP, Plugin, Wordpress
Respond: Leave A Comment | Trackback URL Rispondere: lasciare un commento | Trackback URL