Wordpress Custom Home Page Design - Widgetized Front Page Wordpress Vlastní 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]. Takže jste se podařilo určit vlastní přední stránky ve vašem Wordpress nastavení tím, že půjdete na: [nastavení], [čtení], [titulní straně zobrazuje], [ "A statické stránky" - Radio Button]. What now? Co teď? Who cares if you can create a custom front page with static content on it. Koho to zajímá, můžete-li vytvořit vlastní titulní stránku s statický obsah na něm. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Chceme nějaké cool, vyspělejší, wigetized pochoutky táhnout za jeden provaz, aby náš blog na dynamické bázi. 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. Pokud jste viděli nový přední straně RobMalon.Com pak budete mít představu o některé funkce, jsem o to naučit se tak, že si můžete nastavit něco podobného na svůj blog.

Custom Home Page Design & Layout Vlastní domovskou stránku design & layout

An important first step to this is drafting out what you want to do. Důležitým prvním krokem k tomu je navrhování, co chcete dělat. Organize what widgets are going to go where. Uspořádat hracky, co se chystáte jít kam. That’s difficult if you don’t know what Wordpress is capable of. To je těžké, pokud nevíte, co je schopen Wordpress. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Takže, stručně a jít po tom, co jsme v našich rukou, plánovat svůj přední obsah stránky založené na tyto otázky:

• What categories if any are important enough to to give them their own mini feed on the front page? Které kategorie jsou-li nějaké dost důležité, aby se jim jejich vlastní mini krmiva na titulní stránku?
• How many recent articles in each widget do you want to display? Kolik posledních článků v každém widget chcete zobrazovat? 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. Narovnání to v různých místech vám umožní vyladit domovskou stránku dostat ji do rovnováhy, kde je hezky jinak by nebylo důvodu nerovnoměrného obsah ve sloupcích.
• Do you want to display the first 200 characters (without links/images) of each article? Chceš se zobrazí prvních 200 znaků (bez odkazů / obrázků) každého článku? Consider how this will effect the previous point I made. Zvažte, jak bude tento efekt předchozím bodě jsem udělal.
• Design and architecture. Design a architektura. - See the layout idea to the right for a visual example. - See the layout nápad právo pro vizuální příklad. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. V místě jednoho z levé straně například můžete umístit 8 Nejnovější články v celé lokality a zahrnují všechny kategorie. In spot two you might have posts only from a category which you’ve labeled “Updates”? V místě ty dvě, které by mohly mít vysílal pouze z kategorie, které jste označeni za "aktualizace"? Or perhaps a category which you use to tag your latest “Video” posts? Nebo snad kategorie, která se používají k záznamu vaší poslední "Video" místa? Then in category 3 a list of articles which you consider to be “Featured” articles. Pak v kategorii 3 a seznam předmětů, které si myslíte, že to je "nejlepší" předměty. The list is endless with options. Tento seznam je nekonečné možnosti. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Když půjdete do nastavit stránku jako je tato, hodně se zakládá na tom, jak dalece jste kategorizovat vaše současná pracovní místa. For example, I implemented a featured area in the top tabbed area on the front page. Například jsem zavedl figurující v oblasti horní plochy panelů na titulní straně. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Musel jsem se vrátit, vytvořit novou kategorii, a použije tuto kategorii stávajících pracovních míst, jak jsem viděl fit. 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. Tedy, od teď, jsem prostě přidáte to, jak jsem jet, když napíšu příspěvek, který jsem chtěl ukázat se v "funkčnímu" widget na titulní straně.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. I když jste v plánování Vaší hracky, nezapomeňte, můžete použít kód z ostatních modulů, stejně. More about that in a bit. Více o tom v trochu.

Table Or CSS Setup Stolní nebo CSS instalační

Now that you have that down, its time to implement some layout code. Nyní, když jste, že se jeho čas k provedení některých layout kód. If you’re new to this, set this up in a table. Pokud jste na této nové, protože se tento řádek založí v tabulce. If you’re looking to go all hardcore, then use a layout with div’s like this: Pokud hledáte jít všem hardcore, pak použijte layout s div se takhle:

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 Stáhněte si tento kód: 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. V případě, že jste zmatená, že celý tento kód se chystá jít do "strana", kterou byste měli mít již jako domovskou stránku. 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. Pokud tomu tak není, její není špatný nápad do praxe na non-FrontPage, který je nepublikované, takže můžete experimentovat, aniž by stávající blog do chaosu.

Coding The Widgets Kódování hracky

Then you have some options for each widget. Pak máte několik možností pro každý widget. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Co musíte udělat, je říct řádné Wordpress funkce na smyčku přes místa, která byste rádi na displeji. Here are the examples: Zde jsou příklady:

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 Stáhněte si tento kód: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Tvorba zamotaný domovské stránky může být dále zvýšena pomocí více wordpress šablony tagy. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Veškerá dokumentace je tam, stačí jen zavolat na telefonní funkce s parametry, které chcete (pokud je k dispozici v každé šabloně štítkem). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . Ve výše uvedeném příkladu jsem se poprvé ukazují cestu, jak iterovat přes odkazy v dané kategorii pomocí šablony štítkem 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 . Ve druhém příkladu mohu použít znovu, ale tentokrát neuvádějí kategorii (tak se zobrazí všechny nedávné míst) a ukázat the_excerpt () s tím, který má výstřižky z aktuálního místa v the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Podívejte se na get_post dokumentace a přidejte správné proměnné pro nastavení výstupního byste chtěli vidět. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Zpět například následující get_post funkce se zobrazí 3 pracovních míst ze všech kategorií s výjimkou 5 a 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( 'numberposts = 3 & kategorii =- 5, -8');

If you want to find the ID of a category, post, or page do the followign: Pokud chcete zjistit ID kategorie, poštou, nebo na straně udělat followign:

• log into admin. Přihlaste se do admin.
• Navigate to the manage tab. Přejděte na kartu spravovat.
• Click categories (or posts or pages) Klikněte na kategorie (nebo příspěvky nebo stránky)
• Hover over or click on the proper category, post, or page you wish to know the ID of Vznášet se nad nebo klikněte na řádné kategorii, poštou, nebo stránky chcete znát ID
• 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: Ve stavovém řádku (pokud jste plachtění), nebo v adresním řádku (pokud jste klikli), měli byste vidět odkaz, který vypadá podobně jako tento:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. Ve výše uvedeném příkladu jsem byl v kategoriích. The category I chose has an idea of “11″. V kategorii jsem zvolil má představu o "11". Now I can exlicitly include or exclude it. Teď můžu exlicitly zahrnout nebo vyloučit. In some cases you’ll want to do this with posts and/or pages as well. V některých případech budete chtít, aby to s úřady a / nebo stránek stejně. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesnt podporu, ale pokud budete hrát s jinými Wordpress funkcí, ale někdy udělat. Check the template tag documentation on a per function basis. Podívejte se na šablonu štítkem dokumentaci o jednotlivých funkcí základě. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Budete alespoň vědět, jak se dostat ID nyní, aniž by se museli přihlásit do své databáze 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. Možná budete potřebovat plug-in nazývá Exec-PHP nainstalována na vašem blogu, takže můžete provádět výše PHP kódu uvnitř pracovních míst. Be careful about installing this plug-in if you have other people managing your blog with you though. Dávejte pozor na instalaci tohoto plug-in, pokud jste se jiných lidí správu vašich blogů když s vámi. If so you can setup custom privileges. Pokud ano, můžete nastavení uživatelských oprávnění. If not then just make sure its installed and activated. Pokud tomu tak není pak jen ujistěte se, že jeho nainstalována a aktivována.

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. Jsem si jistá, že jste viděli bezpočtu dalších pluginů je tam venku, které vám poskytují fragment kódu, které můžete využít ve vašem obrázek sidebar.php uvnitř vaší téma složku. You can also use that code within any of the widgets you create on your homepage within those blocks. Můžete také použít tento kód do žádné ze hracky si vytvoříte na své domovské stránce v rámci těchto bloků. You can usually find code like that inside the readme or install notes file that most plug-in come with. Můžete si najít kód, jako obvykle, že uvnitř readme, nebo nainstalovat soubor bere na vědomí, že většina plug-in přijít s.

Examples Příklady

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Na levici je jeden příklad z mé přední strana od okamžiku, kdy jsem se nedávno přeměněn 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. Také jsem nedávno pomohl osobní přítel můj vytvořit podobné nastavení se svými stránkách ToddRecommends.TV kdo dělá Live proudy a rozhovory Filmy a Tech. You can see a clip of what his front page currently looks like on the right-hand side. Můžete se podívat na klip o tom, co jeho přední stranu v současné době vypadá na pravé straně-straně. 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. Má své nedávné pracovní místa pro každého ze svých hlavních kategorií na své stránky a zobrazuje je krmivo v pravém horním rohu z jiné kategorie, které používá pro aktualizace o událostech, aktualizace a všeobecné zpravodajství.

Posted by: Rob Zaslal: Rob
Category: Blogging , Coding , Featured , Web Design Kategorie: blogování, kódování, nejlepší, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: kódování, CSS, Design, PHP, Plugins, Wordpress
Respond: Leave A Comment | Trackback URL Reagovat: zanechat komentář | Trackback URL