Wordpress Custom Home Page Design - Widgetized Front Page Custom Wordpress Strona główna projektowania - 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]. Jeśli tak udało się określić niestandardowy pierwszej stronie w Wordpress konfiguracji, przechodząc do: [Ustawienia], [czytanie], [pierwszej stronie wyświetla], [ "A statyczne strony" - Radio]. What now? Co teraz? Who cares if you can create a custom front page with static content on it. Kogo to obchodzi, czy można utworzyć niestandardowe przednie z statyczna strona treści na niej. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Chcemy, aby niektóre fajne, bardziej zaawansowanych, wigetized goodies do ciągnięcia razem nasz blog na podstawie dynamicznego. 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. Jeśli już nowy pierwszej stronie RobMalon.Com będziesz musiał się zorientować, niektóre funkcje Mam zamiar nauczyć was tak, że możesz ustawić coś podobnego na swoim blogu.

Custom Home Page Design & Layout Strona główna Custom Design & Layout

An important first step to this is drafting out what you want to do. Istotnym pierwszym krokiem do tego jest w trakcie opracowywania, co chcesz zrobić. Organize what widgets are going to go where. Organizujemy ustrojstwa co zamierzasz iść gdzie. That’s difficult if you don’t know what Wordpress is capable of. To trudne, jeśli nie wiesz co Wordpress jest zdolny. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Więc, krótko przejdę do tego, co mamy w naszych rękach, plan Twojego pierwszej stronie treści w oparciu o te pytania:

• What categories if any are important enough to to give them their own mini feed on the front page? Jakie kategorie są istotne, jeżeli istnieją wystarczające, aby dać im ich własne mini paszy na pierwszej stronie?
• How many recent articles in each widget do you want to display? Ile w każdym z ostatnich artykułów widget chcesz wyświetlać? 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. Potrącenie to w różnych miejscach pozwoli Ci dostosować do swojej stronie, aby ją do równowagi ładnie, gdzie inaczej nie ze względu na nierównomierne zawartość kolumn.
• Do you want to display the first 200 characters (without links/images) of each article? Czy chcesz, aby wyświetlić pierwsze 200 znaków (bez linki / images) każdego artykułu? Consider how this will effect the previous point I made. Rozważyć, w jaki sposób będzie to efekt poprzedniego punktu zrobiłem.
• Design and architecture. Projektowania i architekturze. - See the layout idea to the right for a visual example. - Patrz układ pomysł na prawo na przykład wizualne. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. W miejscu, jeden na przykład po lewej stronie można umieścić 8 najnowszych artykułów w całej witryny i zawierać wszystkie kategorie. In spot two you might have posts only from a category which you’ve labeled “Updates”? W miejscu, dwie, o których może mieć tylko stanowisk z kategorii, która Ciebie etykietą "aktualizacje"? Or perhaps a category which you use to tag your latest “Video” posts? Czy kategorii, która jest używana do otagować najnowsze "Video" posty? Then in category 3 a list of articles which you consider to be “Featured” articles. Następnie w kategorii 3, wykaz artykułów, które uważają za "Galeria" artykułów. The list is endless with options. Lista jest niekończącym się z opcjami. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Po instalacji należy przejść do strony w taki sposób, partia jest określana na temat tego, jak dobrze Ci skategoryzować aktualnej stanowisk. For example, I implemented a featured area in the top tabbed area on the front page. Na przykład, je wdrożyć biorące udział w górnej strefie obszaru zakładce na stronie. I had to go back, create a new category, and apply that category to existing posts as I saw fit. Musiałem wrócić, utworzyć nową kategorię, i stosuje tę kategorię do istniejących stanowisk Widziałam, jak pasuje. 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. Następnie, od tej pory, ja po prostu dodać go jak idę, gdy piszę post, że chcę pokazać się w "biorące" widget na pierwszej stronie.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Podczas planowania swoje ustrojstwa, nie zapomnij, możesz użyć kodu z innych wtyczek, jak również. More about that in a bit. Więcej o tym w trochę.

Table Or CSS Setup Tabela konfiguracji CSS lub

Now that you have that down, its time to implement some layout code. Teraz, gdy już, że w dół, do czasu jej wykonania niektórych Kod układu. If you’re new to this, set this up in a table. Jeśli jesteś nowy w tym, ustawić to w tabeli. If you’re looking to go all hardcore, then use a layout with div’s like this: Jeśli chcesz, aby przejść wszystkie hardcore, a następnie użyć układu z div w taki sposób:

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 Pobierz ten kod: 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. W przypadku, gdy jesteśmy zagubieni, to wszystko będzie kod, aby przejść do strony ", które nie powinny mieć już określone jako stronę główną. 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. Jeśli nie, to jej nie zły pomysł, aby w praktyce nie FrontPage, który jest tak niepublikowanych można eksperymentować bez istniejącego blogu w chaosie.

Coding The Widgets Kodowanie Widżety

Then you have some options for each widget. Wtedy masz kilka opcji dla każdego albumu. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Co musisz zrobić, to powiadomić właściwego Wordpress funkcję pętli poprzez stanowiska, które chcesz wyświetlić. Here are the examples: Oto przykłady:

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 Pobierz ten kod: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Tworzenia skomplikowanych stronach można dodatkowo wzmocnione za pomocą wielu wordpress szablon tagi. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Wszystkie dokumenty są tam po prostu zadzwonić do funkcji z parametrami, które chcesz (jak dostępne w każdym znacznikiem szablonu). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . W powyższym przykładzie raz pierwszy pokazać sposób, aby powtarzać za pomocą linków w danej kategorii za pomocą szablonu znacznikiem 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 . W drugim przykładzie mogę użyć go ponownie, ale tym razem nie określają kategorię (tak wyświetla wszystkie ostatnich postów) i pokaż the_excerpt () z tym, które zajmuje wycinek z obecnego stanowiska w the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Spójrz poprzez dopisanie get_post dokumentacji i właściwego dostosowania do zmiennych wyjściowych, które chcesz zobaczyć. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Fro przykład następujące get_post funkcji spowoduje wyświetlenie wszystkich 3 stanowisk z wyjątkiem kategorii 5 i 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: Jeśli chcesz znaleźć ID kategorii, listownie, lub strona followign to:

• log into admin. zalogować się na administratora.
• Navigate to the manage tab. Przejdź do zakładki zarządzania.
• Click categories (or posts or pages) Kliknij kategorii (lub stanowisk lub stron)
• Hover over or click on the proper category, post, or page you wish to know the ID of Wisieć nad lub kliknąć na odpowiednią kategorię, poczta, strony lub chcesz znać identyfikator
• 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: W pasku stanu (jeśli umieszczając mysz) lub w pasku adresu (jeśli kliknięty) znajduje się link, który wygląda podobnie do tego:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. W powyższym przykładzie byłem w kategorie. The category I chose has an idea of “11″. Kategorii Wybrałem ma pomysł "11". Now I can exlicitly include or exclude it. Teraz mogę exlicitly włączenie lub wyłączenie go. In some cases you’ll want to do this with posts and/or pages as well. W niektórych przypadkach będziesz chciał zrobić z tego stanowiska i / lub stron, jak również. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesnt tego wsparcia, ale jeśli odegrać Wordpress z innych funkcji, które czasami nie. Check the template tag documentation on a per function basis. Sprawdź szablon znacznikiem dokumentacji na na podstawie funkcji. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Ci przynajmniej wiedzą, jak uzyskać identyfikator teraz bez zalogowania się do bazy 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. Być może trzeba plug-in o nazwie Exec-PHP zainstalowane na Twoim blogu, tak aby można było wykonać powyżej kod PHP wewnątrz postów. Be careful about installing this plug-in if you have other people managing your blog with you though. Bądź ostrożny na temat instalowania tego dodatku plug-in, jeśli masz inne osoby zarządzające blogu z tobą chociaż. If so you can setup custom privileges. Jeśli tak, to możesz ustawić niestandardowe uprawnienia. If not then just make sure its installed and activated. Jeśli nie po prostu upewnij się, że zainstalowane i uaktywnione.

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. Mam pewność, że widziałem liczne inne wtyczki's out there, które dostarczają Ci fragment kodu, który można użyć w swoim pliku sidebar.php wewnątrz folderu tematu. You can also use that code within any of the widgets you create on your homepage within those blocks. Możesz również użyć tego kodu w obrębie każdego widżetów z utworzeniem na stronie głównej w ramach tych bloków. You can usually find code like that inside the readme or install notes file that most plug-in come with. Zazwyczaj można znaleźć kod tak Readme wewnątrz lub zainstalować plik zauważa, że większość plug-in pochodzą z.

Examples Przykłady

On the left is an example of my front page from when I recently redesigned RobMalon.Com . Po lewej jest przykładem mojej stronie z przodu, kiedy niedawno zmodernizowany 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. Ja też niedawno pomogła osobisty przyjaciel mój stworzyć podobną konfigurację z jego strony w ToddRecommends.TV, którzy nie żyją i strumieni rozmów Filmy i Technika. You can see a clip of what his front page currently looks like on the right-hand side. Możesz zobaczyć klip z jego przedniej stronie, co obecnie wygląda jak po prawej stronie. 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. On ma swoją ostatnich postów dla każdej z jego głównych kategorii na jego stronie i wyświetla kanał w prawym górnym rogu z innej kategorii, którego używa do aktualizacji o wydarzeniach, aktualizacje i ogólne wiadomości.

Posted by: Rob Wysłany przez: Rob
Category: Blogging , Coding , Featured , Web Design Kategoria: Blogi, kodowania, Galeria, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tagi: Programowanie, strony CSS, Design, PHP, wtyczek, Wordpress
Respond: Leave A Comment | Trackback URL Odpowiedzieć: Pozostawić komentarz | trackback url