Wordpress Custom Home Page Design - Widgetized Front Page Wordpress personalizado Home Page Design - 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]. Então você já conseguiu especificar uma página personalizada no seu Wordpress configuração, vá para: [Definições], [leitura], [página exibe frente], [ "Uma página estática" - Radio Button]. What now? E agora? Who cares if you can create a custom front page with static content on it. Quem se importa se você pode criar uma página inicial personalizada com conteúdo estático sobre ela. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Queremos muito legais, mais avançado, wigetized presentinhos para reunir o nosso blog em uma 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. Se você já viu a nova capa da RobMalon.Com então você terá uma idéia de algumas das funções que estou prestes a ensinar-vos para que você possa configurar algo semelhante no seu blog.

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

An important first step to this is drafting out what you want to do. Um primeiro passo importante para a elaboração deste é o que você quer fazer. Organize what widgets are going to go where. Organize o que widgets estão indo para onde ir. That’s difficult if you don’t know what Wordpress is capable of. Isso é difícil se você não sabe o que é capaz de Wordpress. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Então, para ir brevemente sobre o que temos em nossas mãos, o seu plano de primeira página baseada em conteúdo destas perguntas:

• What categories if any are important enough to to give them their own mini feed on the front page? Quais são importantes categorias se houver o suficiente para dar-lhes os seus próprios mini-feed na capa?
• How many recent articles in each widget do you want to display? Quantos artigos recentes em cada item que você deseja exibir? 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. Compensando esta em vários lugares irá permitir-lhe um puxão homepage para recebê-lo quando ela agradàvel para equilibrar outra forma não seria por causa da desigual conteúdo das colunas.
• Do you want to display the first 200 characters (without links/images) of each article? Você deseja exibir os primeiros 200 caracteres (sem links / imagens) de cada artigo? Consider how this will effect the previous point I made. Pense em como é que este efeito será o ponto anterior que fiz.
• Design and architecture. Design e arquitectura. - See the layout idea to the right for a visual example. - Ver o layout idéia para a direita para um visual exemplo. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. Em uma mancha no lado esquerdo exemplo você pode colocar os 8 artigos mais recentes em todo o site e incluir todas as categorias. In spot two you might have posts only from a category which you’ve labeled “Updates”? No local que possa vir a ter dois lugares apenas a partir de uma categoria que você tenha marcado "Atualizações"? Or perhaps a category which you use to tag your latest “Video” posts? Ou talvez uma categoria que você utiliza para marcar o seu último "Video" postagens? Then in category 3 a list of articles which you consider to be “Featured” articles. Na categoria 3, em seguida, uma lista de artigos que você considera ser a "Destaques" artigos. The list is endless with options. A lista é interminável com opções. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Quando você vai para o setup sua página como essa, um lote é determinado pelo modo como você categorizar seus cargos atuais. For example, I implemented a featured area in the top tabbed area on the front page. Por exemplo, eu implementada uma área em destaque o início Abas espaço na primeira página. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Eu tive que voltar, criar uma nova categoria, e que se aplicam à categoria lugares existentes como eu vi encaixar. 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. Então, de agora em diante, eu simplesmente adicioná-lo como eu ir, quando eu escrever um post que quero mostrar-se nas "featured" widget na primeira página.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Enquanto estiver planejando o seu widgets, não se esqueça, você pode usar o código de outros plugins também. More about that in a bit. Mais sobre isso em um bit.

Table Or CSS Setup Instalação de mesa ou CSS

Now that you have that down, its time to implement some layout code. Agora que você tem que descer, o seu tempo para implementar algumas layout código. If you’re new to this, set this up in a table. Se você é novo para isso, configura-lo em uma mesa. If you’re looking to go all hardcore, then use a layout with div’s like this: Se você estiver olhando para ir todos os hardcore, em seguida, utilizar um layout com div's como este:

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 Baixar 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. No caso que você está confuso, todo este código está indo para entrar em uma "página" que você já deve ter especificado como a página inicial. 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. Se não, o seu não é má ideia para a prática de uma forma não-FrontPage que é inédito para que você possa experimentar sem colocar um blog existente no caos.

Coding The Widgets A codificação Widgets

Then you have some options for each widget. Então você tem algumas opções para cada elemento. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. O que você precisa fazer é dizer ao Wordpress boa função para os lacete através de postagens que você gostaria de exibir. Here are the examples: Aqui estão os exemplos:

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

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Criação de homepages intrincados poderão ser reforçadas através de múltiplas wordpress modelo tags. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Toda a documentação está lá, basta chamar a função com os parâmetros que deseja (conforme modelo disponível em 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 . No exemplo acima primeiro me mostrar um caminho para iterar através de links em uma categoria específica usando a tag de modelo 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 . No segundo exemplo devo usá-lo novamente, mas desta vez não especificar uma categoria (por isso, ele exibe todas as postagens recentes) e mostram the_excerpt () com ela, que tem um recorte do actual posto em the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Procure nos get_post e anexar a documentação adequada para ajustar as variáveis de saída você deseja ver. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Fro exemplo, a seguinte get_post função exibirá 3 vagas de todas as categorias, excepto 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 você quiser encontrar o ID de uma categoria, postar, ou fazer o followign página:

• log into admin. fazer login no admin.
• Navigate to the manage tab. Navegue para gerir o guia.
• Click categories (or posts or pages) Clique nas categorias (ou posts ou páginas)
• Hover over or click on the proper category, post, or page you wish to know the ID of Passe o mouse sobre ou clique na categoria adequada, correio, ou a página que você deseja saber o ID do
• 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: Na barra de status (se você estiver flutuando) ou na barra de endereços (se você clicou) você deve ver um link que é semelhante a esta:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. No exemplo acima, eu estava nas categorias. The category I chose has an idea of “11″. Eu escolhi a categoria tem uma idéia de "11". Now I can exlicitly include or exclude it. Agora posso exlicitly incluir ou excluir. In some cases you’ll want to do this with posts and/or pages as well. Em alguns casos você vai querer fazer isto com cargos e / ou páginas tão bem. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesn't esse apoio, mas se você jogar com outras funções Wordpress, às vezes eles fazem. Check the template tag documentation on a per function basis. Verifique a documentação relativa a uma tag de modelo por função base. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Você pelo menos sabe como obter o ID do momento sem ter de registrar na sua base de dados 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. Pode ser necessário um plug-in chamado Exec-PHP instalado em seu blog para que você possa executar o código PHP dentro lugares acima. Be careful about installing this plug-in if you have other people managing your blog with you though. Seja cuidadoso sobre a instalação deste plug-in se você tiver outras pessoas gerir o seu blog com você mesma. If so you can setup custom privileges. Se assim você pode configurar privilégios personalizado. If not then just make sure its installed and activated. Se não, em seguida, verifique se o seu instalado e ativado.

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. Eu tenho certeza que você já viu inúmeros outros do plugin lá fora que fornecê-lo com um trecho de código que você pode usar em seu arquivo sidebar.php pasta dentro do seu tema. You can also use that code within any of the widgets you create on your homepage within those blocks. Você também pode usar esse código dentro de qualquer dos itens que você cria em sua página pessoal dentro desses blocos. You can usually find code like that inside the readme or install notes file that most plug-in come with. Normalmente, pode encontrar esse código como no interior do arquivo Leiame ou instalar observa que a maioria vem com plug-in.

Examples Exemplos

On the left is an example of my front page from when I recently redesigned RobMalon.Com . À esquerda é um exemplo da minha primeira página a partir de quando eu RobMalon.Com recentemente reestruturada. 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. Eu também recentemente ajudou meu amigo pessoal criar uma configuração semelhante com sua página na ToddRecommends.TV quem faz Live córregos e palestras Filmes e Tech. You can see a clip of what his front page currently looks like on the right-hand side. Você pode ver um clipe de sua primeira página o que atualmente parece que sobre o lado direito. 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. Ele tem as suas postagens recentes para cada um dos seus principais categorias em sua página e está exibindo um feed no canto superior direito de uma outra categoria que ele usa para atualizações sobre os eventos, as atualizações e notícias gerais.

Posted by: Rob Publicado por: Rob
Category: Blogging , Coding , Featured , Web Design Categoria: Blogging, Codificação, em Destaque, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Codificação, CSS, Design, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Responder: deixe um comentário | trackback URL