Wordpress Custom Home Page Design - Widgetized Front Page Wordpress personnalisé la page d'accueil 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]. Donc vous avez réussi à spécifier une page d'accueil personnalisée dans votre installation de Wordpress Aller à: [Paramètres], [lecture], [première page affiche], [ "Une page statique" - Radio Button]. What now? Que faire maintenant? Who cares if you can create a custom front page with static content on it. Qui se soucie si vous pouvez créer votre première page avec du contenu statique sur elle. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Nous voulons que certains frais, plus avancés, wigetized goodies pour rassembler notre blog sur une base dynamique. 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 vous avez vu la nouvelle page d'accueil de RobMalon.Com alors vous aurez une idée de certaines des fonctions, je suis sur le point de vous enseigner, afin que vous pouvez configurer quelque chose de similaire sur votre blog.

Custom Home Page Design & Layout Personnaliser la page d'accueil conception et mise en page

An important first step to this is drafting out what you want to do. Une première étape importante à cette rédaction est ce que vous voulez faire. Organize what widgets are going to go where. Organisez ce que les widgets sont en cours pour aller où. That’s difficult if you don’t know what Wordpress is capable of. C'est difficile si vous ne savez pas ce que Wordpress est capable de faire. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Alors, pour aller plus brièvement ce que nous avons dans nos mains, à votre plan avant le contenu de la page sur la base de ces questions:

• What categories if any are important enough to to give them their own mini feed on the front page? Quelles sont les catégories le cas échéant, suffisamment important pour leur donner leur propre mini-alimentation sur la page d'accueil?
• How many recent articles in each widget do you want to display? Combien d'articles récents dans chaque widget voulez-vous afficher? 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. Cette compensation en divers endroits vous permettront de régler une page d'accueil de l'obtenir de l'équilibre bien où il ne serait pas autrement en raison de l'irrégularité dans les colonnes de contenu.
• Do you want to display the first 200 characters (without links/images) of each article? Souhaitez-vous afficher les 200 premiers caractères (sans liens / images) de chaque article? Consider how this will effect the previous point I made. Examiner comment cela effet de la précédente observation que j'ai faite.
• Design and architecture. Conception et architecture. - See the layout idea to the right for a visual example. - Voir le schéma idée à droite, pour un exemple visuel. 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 place un dans le côté gauche vous pouvez par exemple mettre les 8 plus les articles récents sur l'ensemble du site et d'inclure toutes les catégories. In spot two you might have posts only from a category which you’ve labeled “Updates”? En place deux que vous avez peut-être seulement à partir de postes de la catégorie qui vous avez marqués "Mises à jour"? Or perhaps a category which you use to tag your latest “Video” posts? Ou peut-être une catégorie qui vous utilisez pour votre dernier tag "Vidéo" postes? Then in category 3 a list of articles which you consider to be “Featured” articles. Ensuite, dans la catégorie 3, une liste d'articles qui vous considèrent comme "vedette" d'articles. The list is endless with options. La liste est sans fin avec des options. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Lorsque vous accédez à la configuration de votre page comme celle-ci, un lot est déterminé sur la façon dont vous classer vos messages. For example, I implemented a featured area in the top tabbed area on the front page. Par exemple, j'ai mis en place une zone en vedette dans le top domaine onglets sur la page d'accueil. I had to go back, create a new category, and apply that category to existing posts as I saw fit. J'ai dû revenir en arrière, créer une nouvelle catégorie, et d'appliquer à cette catégorie les postes existants comme je l'entend. 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. Puis, à partir de maintenant, j'ai simplement ajouter que je vais quand j'écris un message que je veux montrer dans le "vedette" widget sur la page d'accueil.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Alors que vous envisagez de vos widgets, n'oubliez pas, vous pouvez utiliser du code à partir d'autres plugins ainsi. More about that in a bit. Plus à ce sujet dans un peu.

Table Or CSS Setup Tableau de configuration ou CSS

Now that you have that down, its time to implement some layout code. Maintenant que vous avez que vers le bas, son temps à mettre en oeuvre certaines code de format. If you’re new to this, set this up in a table. Si vous êtes nouveau à cela, le mettre en place dans un tableau. If you’re looking to go all hardcore, then use a layout with div’s like this: Si vous cherchez à aller tous les hardcore, puis d'utiliser une mise en page avec div comme ceci:

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 Téléchargez ce code: 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. Dans le cas où vous êtes confus, tout ce code est en cours pour aller dans une "page" qui vous devriez déjà avoir spécifié que la page d'accueil. 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 non, ce n'est pas une mauvaise idée à la pratique sur un non-FrontPage qui est non publiés de sorte que vous pouvez expérimenter sans mettre un blog existant dans le chaos.

Coding The Widgets Codage de l'Widgets

Then you have some options for each widget. Ensuite, vous avez quelques options pour chaque widget. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Ce que vous devez faire est de dire la bonne Wordpress fonction de boucle à travers les postes que vous souhaitez afficher. Here are the examples: Voici les exemples:

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 Téléchargez ce code: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Création de pages d'accueil de complexe peut être améliorée par l'aide de plusieurs balises de modèle wordpress. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Toute la documentation est là, simplement appeler les fonctions avec les paramètres que vous souhaitez (comme disponible dans chaque balise de modèle). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . Dans l'exemple ci-dessus j'ai d'abord montrer un moyen d'itérer sur les liens dans une catégorie à l'aide de la balise de modèle 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 . Dans le second exemple-je l'utiliser de nouveau mais cette fois, ne pas spécifier une catégorie (il affiche tous les messages récents) et de montrer the_excerpt () avec qui il prend une coupure de l'actuel poste de the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Rechercher get_post par le biais de la documentation et le bon d'ajouter des variables à ajuster la sortie que vous souhaitez voir. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Fro, par exemple, le texte suivant get_post fonction permet d'afficher 3 postes de toutes les catégories sauf 5 et 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( 'numberposts = 3 & =- catégorie 5, -8');

If you want to find the ID of a category, post, or page do the followign: Si vous voulez trouver l'ID d'une catégorie, la poste, ou la page ne followign:

• log into admin. Connectez-vous en admin.
• Navigate to the manage tab. Accédez à l'onglet gérer.
• Click categories (or posts or pages) Cliquer sur les catégories (ou les messages ou pages)
• Hover over or click on the proper category, post, or page you wish to know the ID of Vol stationnaire au-dessus ou cliquez sur la catégorie, la poste, ou à la page que vous voulez savoir l'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: Dans la barre d'état (si vous êtes en vol stationnaire) ou dans la barre d'adresse (si vous avez cliqué), vous devriez voir un lien qui ressemble à ceci:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. Dans l'exemple ci-dessus j'ai été dans les catégories. The category I chose has an idea of “11″. La catégorie que j'ai choisi a une idée de "11". Now I can exlicitly include or exclude it. Maintenant, je peux exlicitly inclure ou exclure. In some cases you’ll want to do this with posts and/or pages as well. Dans certains cas, vous aurez besoin pour ce faire avec des postes et / ou de pages ainsi. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts ne marche pas soutenir cela, mais si vous jouez avec d'autres fonctions de Wordpress, ils ont parfois le faire. Check the template tag documentation on a per function basis. Vérifiez la balise de modèle documentation sur une base par fonction. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Vous aurez au moins savoir comment obtenir l'ID est maintenant sans avoir à vous connecter à votre base de données 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. Vous mai besoin d'un plug-in appelé Exec-PHP installé sur votre blog afin que vous puissiez exécuter le code PHP ci-dessus dans les postes. Be careful about installing this plug-in if you have other people managing your blog with you though. Soyez prudent sur l'installation de ce plug-in si vous avez d'autres personnes la gestion de votre blog si vous avec. If so you can setup custom privileges. Si tel est le cas, vous pouvez configurer la coutume des privilèges. If not then just make sure its installed and activated. Si non, assurez-vous seulement son installé et activé.

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. Je suis sûr que vous avez vu d'innombrables autres plugin qui existe qui vous fournir un extrait de code que vous pouvez utiliser dans votre fichier sidebar.php l'intérieur de votre dossier thème. You can also use that code within any of the widgets you create on your homepage within those blocks. Vous pouvez également utiliser ce code dans l'un des widgets que vous créez sur votre page d'accueil à l'intérieur de ces blocs. You can usually find code like that inside the readme or install notes file that most plug-in come with. Vous pouvez trouvez le code comme ça dans le fichier Readme ou installer le fichier note que la plupart des plug-in à venir.

Examples Exemples

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Sur la gauche est un exemple de ma première page à partir du moment où j'ai récemment remanié 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. J'ai également récemment contribué à un ami personnel de la mine de créer une configuration similaire avec sa page à ToddRecommends.TV qui ne Live-streams et Cinéma négociations et Tech. You can see a clip of what his front page currently looks like on the right-hand side. Vous pouvez voir un extrait de ce que sa première page ressemble à l'heure actuelle sur le côté droit. 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. Il a sa récente postes pour chacune de ses catégories principales sur sa page et affiche une alimentation en haut à droite d'une autre catégorie dont il se sert pour les mises à jour sur les événements, les mises à jour et nouveautés générales.

Posted by: Rob Posté par: Rob
Category: Blogging , Coding , Featured , Web Design Catégorie: blogs, codage, en vedette, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: Codage, CSS, Design, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Répondre: laisser un commentaire | URL de trackback