Wordpress Custom Home Page Design - Widgetized Front Page Wordpress página de inicio personalizada de diseño - Widgetized primera página

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]. Por lo tanto, que ha logrado especificar una página principal personalizada en su configuración por Wordpress va a: [Configuración], [de lectura], [primera página muestra], [ "una página" - Radio Button]. What now? ¿Y ahora qué? Who cares if you can create a custom front page with static content on it. ¿A quién le importa si puede crear una página personalizada con el contenido en ella. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Queremos algo fresco, más avanzados, wigetized buenos para tirar juntos nuestro blog en una base dinámica. 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. Si has visto la nueva portada de RobMalon.Com entonces tendrá una idea de algunas de las funciones que estoy a punto de enseñarle para que usted pueda configuración algo similar en su blog.

Custom Home Page Design & Layout Página de inicio personalizada de Diseño y Maquetación

An important first step to this is drafting out what you want to do. Un primer paso importante para ello es la redacción de lo que quieres hacer. Organize what widgets are going to go where. Organizar widgets lo que van a donde ir. That’s difficult if you don’t know what Wordpress is capable of. Eso es difícil si no sabes lo que Wordpress es capaz de. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Por lo tanto, para ir brevemente sobre lo que tenemos en nuestras manos, su plan de la primera página de contenido sobre la base de estas preguntas:

• What categories if any are important enough to to give them their own mini feed on the front page? ¿Cuáles son las categorías, si alguno fuera lo suficientemente importante como para darles su propia mini pienso en la primera página?
• How many recent articles in each widget do you want to display? ¿Cuántos artículos recientes en cada widget, ¿quieres mostrar? 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. Esta compensación en diversos lugares le permitirá modificar una página web para conseguir que el equilibrio muy bien cuando de otra manera, no a causa de desigual contenido en las columnas.
• Do you want to display the first 200 characters (without links/images) of each article? ¿Quieres mostrar los primeros 200 caracteres (sin enlaces / imágenes) de cada artículo? Consider how this will effect the previous point I made. Considere la posibilidad de cómo este efecto será el punto anterior que hice.
• Design and architecture. Diseño y arquitectura. - See the layout idea to the right for a visual example. - Véase la disposición idea a la derecha para un ejemplo visual. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. En un terreno en la parte izquierda ejemplo, usted podría poner los 8 más recientes artículos en todo el sitio e incluyen todas las categorías. In spot two you might have posts only from a category which you’ve labeled “Updates”? En el terreno dos usted puede ser que sólo tienen puestos de una categoría que le ha asignado la etiqueta "Actualizaciones"? Or perhaps a category which you use to tag your latest “Video” posts? O tal vez una categoría que se utiliza para etiquetar su más reciente "Vídeo" puestos? Then in category 3 a list of articles which you consider to be “Featured” articles. Luego, en la categoría 3 una lista de artículos que se consideran "destacados" de artículos. The list is endless with options. La lista es interminable con opciones. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Cuando vaya a la página de configuración como esta, un lote se determina sobre lo bien que su actual clasificación de puestos. For example, I implemented a featured area in the top tabbed area on the front page. Por ejemplo, he puesto en marcha un área que figuran en la parte superior con pestañas zona en la primera página. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Tuve que volver, crear una nueva categoría, y aplicar esa categoría a los puestos existentes como considere oportuno. 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. Luego, a partir de ahora, simplemente añadir que como me voy cuando escribo un post que quiero mostrar en el "destacado" widget en la primera página.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Mientras que usted está planeando su widgets, no se olvide, usted puede usar el código de otros plugins como así. More about that in a bit. Más información acerca de que en un poco.

Table Or CSS Setup Cuadro de instalación o CSS

Now that you have that down, its time to implement some layout code. Ahora que usted tiene que bajar, su tiempo para aplicar algunas Código de disposición. If you’re new to this, set this up in a table. Si eres nuevo en esto, esto en una tabla. If you’re looking to go all hardcore, then use a layout with div’s like this: Si usted está buscando para ir todos los hardcore, a continuación, utilice un diseño con div como esta:

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 Descargar este código: 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. En caso de que usted está confundido, todo este código va a entrar en una "página" que ya debería haber especificado en la página principal. 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. Si no, no es una mala idea a la práctica en una de FrontPage no es que no se ha publicado de modo que puede experimentar sin poner un blog existente en el caos.

Coding The Widgets Codificación de los widgets

Then you have some options for each widget. Entonces usted tiene algunas opciones para cada widget. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Lo que hay que hacer es decirle a la correcta función de Wordpress bucle a través de los puestos que le gustaría mostrar. Here are the examples: Aquí están los ejemplos:

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 Descargar este código: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Creación de páginas intrincadas puede mejorarse aún más mediante el uso de múltiples códigos de plantilla wordpress. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Toda la documentación está ahí, simplemente llame a las funciones con los parámetros que desee (si se dispone de plantilla en cada etiqueta). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . En el ejemplo anterior por primera vez muestran un camino para iterar a través de enlaces en una categoría en particular, utilizando el modelo get_posts etiqueta. 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 . En el segundo ejemplo yo uso otra vez pero esta vez no se especifica una categoría (lo que muestra todos los últimos puestos) y mostrar the_excerpt () con lo que tiene una saturación de la actual puesto en the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Mire a través de la get_post la documentación y adjuntar el buen variables para ajustar la salida que te gustaría ver. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: FRO ejemplo, la siguiente función get_post mostrará 3 puestos de todas las categorías excepto el 5 y el 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( 'numberposts = 3 & =- categoría 5, -8');

If you want to find the ID of a category, post, or page do the followign: Si desea encontrar el ID de una categoría, cargo, o hacer la página followign:

• log into admin. entrar en admin.
• Navigate to the manage tab. Vaya a la pestaña gestionar.
• Click categories (or posts or pages) Haga clic en categorías (o los puestos o páginas)
• Hover over or click on the proper category, post, or page you wish to know the ID of Hover más o haga clic en la categoría adecuada, puesto, o la página que desea conocer el ID 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: En la barra de estado (si está flotando) o en la barra de direcciones (si ha hecho clic) debería ver un vínculo que se parece a esto:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. En el ejemplo anterior yo estaba en las categorías. The category I chose has an idea of “11″. La categoría I se optó por una idea de la "11". Now I can exlicitly include or exclude it. Ahora puedo exlicitly incluir o excluir. In some cases you’ll want to do this with posts and/or pages as well. En algunos casos, usted querrá hacer esto con puestos y / o páginas como así. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesnt este apoyo, pero si juegas con otras funciones de Wordpress, a veces no. Check the template tag documentation on a per function basis. Compruebe la etiqueta de plantilla de la documentación sobre una base por función. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Usted, al menos, saber cómo obtener el ID de ahora, sin tener que entrar en su base de datos MySQL.

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. Puede que necesite un plug-in llamado Ejec-PHP instalado en tu blog para que pueda ejecutar el anterior código PHP dentro de los puestos. Be careful about installing this plug-in if you have other people managing your blog with you though. Tenga cuidado acerca de la instalación de este plug-in si usted tiene a otras personas la administración de su blog, aunque con usted. If so you can setup custom privileges. Si es así usted puede privilegios de configuración personalizada. If not then just make sure its installed and activated. Si no es entonces sólo asegúrese de que su instalado y activado.

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. Estoy seguro que has visto un sinnúmero de otros plug-in de ahí que le proporcionan un fragmento de código que puede utilizar en su archivo sidebar.php tema dentro de su carpeta. You can also use that code within any of the widgets you create on your homepage within those blocks. También puede utilizar este código dentro de cualquiera de los widgets que cree en su página principal dentro de los bloques. You can usually find code like that inside the readme or install notes file that most plug-in come with. Usted puede encontrar el código al igual que en el interior de la Léame o instalar el archivo toma nota de que la mayoría de plug-in vienen con.

Examples Ejemplos

On the left is an example of my front page from when I recently redesigned RobMalon.Com . A la izquierda es un ejemplo de mi primera página de cuando yo RobMalon.Com recientemente rediseñado. 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. Asimismo, recientemente ayudó a un amigo personal mío de crear una configuración similar con su página en ToddRecommends.TV que no vivo arroyos y conversaciones Cine y Tech. You can see a clip of what his front page currently looks like on the right-hand side. Usted puede ver un clip de lo que su primera página que actualmente se ve como en el lado derecho. 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. Tiene su reciente puestos para cada uno de sus principales categorías en su página y muestra una alimentación en la parte superior derecha de la otra categoría que utiliza para las actualizaciones sobre eventos, actualizaciones y noticias generales.

Posted by: Rob Enviado por: Rob
Category: Blogging , Coding , Featured , Web Design Categoría: Blogging, Codificación de Mercancías, Las, Diseño Web
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Codificación de Mercancías, CSS, Diseño, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Responder: dejar un comentario | Trackback URL