Wordpress Custom Home Page Design - Widgetized Front Page WordPress персонализирана начална страница дизайн - Widgetized първа страница

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]. Значи вие сте успели да определят собствени първа страница във вашия WordPress настройка, като отидете на: [настройки], [четене], [предна страница показва], [ "статична страница" - Радио Бутон]. What now? Ами сега? Who cares if you can create a custom front page with static content on it. На кой му пука, ако можете да създадете собствени предната страница със статично съдържание в нея. We want some cool, more advanced, wigetized goodies to pull together our blog on a dynamic basis. Ние искаме някои готини, по-напреднали, wigetized екстри да дръпнем заедно нашия блог на динамична основа. 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. Ако сте виждали новите предна страница на RobMalon.Com тогава ще имате идея за някои от функциите, аз съм на път да ви науча, така че да можете да настройка на нещо подобно на вашия блог.

Custom Home Page Design & Layout Персонализирана начална страница Дизайн и оформление

An important first step to this is drafting out what you want to do. Една важна първа стъпка за това е изработването какво искаш да правиш. Organize what widgets are going to go where. Организирайте какви джунджурии ще отидем къде. That’s difficult if you don’t know what Wordpress is capable of. Това е трудно, ако не знаете какво WordPress е способен. So, to briefly go over what we have at our hands, plan out your front page content based on these questions: Така, накратко да премине това, което имаме в нашите ръце, плана си пред съдържанието на страницата на базата на тези въпроси:

• What categories if any are important enough to to give them their own mini feed on the front page? Какви категории, ако има такива, са достатъчно важни, за да им дам своя мини емисия на предната страница?
• How many recent articles in each widget do you want to display? Колко последните статии във всяка една притурка искате да покажете? 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. Компенсиране на различни места, това ще ви позволи да щипваме начална страница, за да го баланс приятно, когато по друг начин не би поради неравномерно съдържание в колони.
• Do you want to display the first 200 characters (without links/images) of each article? Искате ли да покажете първо 200 знака (без връзки / изображения) на всеки един член? Consider how this will effect the previous point I made. Помислете как това ще ефект предходната точка направих.
• Design and architecture. Проектиране и архитектура. - See the layout idea to the right for a visual example. - Вижте оформление на идеята за правото за визуален пример. In spot one in the left side example you might put the 8 most recent articles across the entire site and include all categories. В място, в лявата страна например може да поставите 8 най-новите членове по целия сайт и да включва всички категории. In spot two you might have posts only from a category which you’ve labeled “Updates”? В два часа на място, може да има постове само от една категория, които сте с надпис "Приятели"? Or perhaps a category which you use to tag your latest “Video” posts? Или може би категория, които вие използвате за вашия маркер късно "Видео" постове? Then in category 3 a list of articles which you consider to be “Featured” articles. Тогава в категория 3, списък на предметите, които те считат за "Елитни" членове. The list is endless with options. Списъкът е с безкрайни възможности. When you go to setup your page like this, a lot is determined on how well you categorize your current posts. Когато отидеш да настроите страницата си така, много се определя на колко добре се категоризира текущата си постове. For example, I implemented a featured area in the top tabbed area on the front page. Например, аз изпълнилите Топ област в горната част tabbed площ на предната страница. I had to go back, create a new category, and apply that category to existing posts as I saw 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. След това, от сега нататък, аз просто го добавете като отида, когато пиша пост, че искам да се появи в "Топ" притурка на предната страница.
• While you’re planning out your widgets, don’t forget, you can use code from other plugins as well. Докато сте планиране си джунджурии, не забравяйте, можете да използвате код от други плъгини, както добре. More about that in a bit. Повече за това по-малко.

Table Or CSS Setup Таблица или CSS настройка

Now that you have that down, its time to implement some layout code. Сега, след като сте това, неговото време, за да изпълнят някои оформление код. If you’re new to this, set this up in a table. Ако сте нов в този, на тази в таблица. If you’re looking to go all hardcore, then use a layout with div’s like this: Ако търсите да отидете на всички хардкор, а след това се използва с div оформление е като това:

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 Изтеглете този код: 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. В случай, че сте объркани, всичко това кодекс ще отида в "страница", които трябва да са посочени като начална страница. 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. Ако не, неговото не е лоша идея да се упражнявате в не-FrontPage, който е непубликувани така че можете да експеримент, без да се сложи съществуващите блог в хаос.

Coding The Widgets Кодиране на джунджурии

Then you have some options for each widget. След това имате някои опции за всяка джаджа. What you need to do is tell the proper Wordpress function to loop through the posts that you’d like to display. Това, което трябва да направите е да кажеш на правилното WordPress функция Loop чрез публикации, които бихте искали да покажете. Here are the examples: Ето пример:

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 Изтеглете този код: 0826codefrontpagewidgets.txt

Creation of intricate homepages can be further enhanced by using multiple wordpress template tags . Създаване на сложен homepages може да бъде допълнително подобрено чрез използване на множество WordPress шаблон марки. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Цялата документация е там, просто се обадете на функции с параметри, които искате (както е на разположение във всеки шаблон таг). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . В горния пример за първи път показва пътя към iterate чрез връзките в определена категория, използвайки шаблон таг 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 . Във втория пример го използвам отново, но този път не уточняват категория (така го показва целия последните мнения) и показват the_excerpt () с него, която взема отрязък от текущия пункт в the_loop.

Look through the get_post documentation and append the proper variables to adjust the output you’d like to see. Погледни през get_post документация и прилага правилно променливите, които регулират продукцията, която бихте искали да видите. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: Например насам-натам, след get_post функция ще показва 3 места от всички категории с изключение на 5 и 8:
get_posts(’numberposts=3&category=-5,-8′); get_posts ( "numberposts = 3 и категория =- 5, -8");

If you want to find the ID of a category, post, or page do the followign: Ако искате да намерите идентификатора на дадена категория, POST, или страница направи followign:

• log into admin. Влезте в АДМИН.
• Navigate to the manage tab. Отидете в раздела за управление.
• Click categories (or posts or pages) Кликнете категории (или пунктове или страници)
• Hover over or click on the proper category, post, or page you wish to know the ID of Кръжа над или кликнете върху правилното категория, пощата, или страница, която искате да знаете идентификатора на
• 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: В статус бара (ако сте hovering) или в адресната лента (ако сте кликнали), вие трябва да видите връзката, която изглежда подобно на това:
  http://yoursite.com/wp-admin/categories.php?action=edit&cat_ID=11
• In the above example I was in categories. В примера по-горе бях в категории. The category I chose has an idea of “11″. Категорията избрах е с идеята за "11". Now I can exlicitly include or exclude it. Сега не мога exlicitly включва или изключва това. In some cases you’ll want to do this with posts and/or pages as well. В някои случаи вие ще искате да направите това с постове и / или страници, както добре. get_posts doesnt support this, but if you play with other Wordpress functions, they sometimes do. get_posts doesn't подкрепа на това, но ако си играеш с други WordPress функции, които понякога правя. Check the template tag documentation on a per function basis. Маркирайте шаблон таг документация на брой функция база. You’ll at least know how to get the ID’s now without having to log into your mySQL database. Ще поне знаят как да получите ID сега, без да се налага да влизате във вашия MySQL база данни.

Plug-ins Plug-In

You may need a plug-in called Exec-PHP installed on your blog so that you can execute the above PHP code inside posts. Може да се нуждаете от Plug-In нарича Exec-PHP, инсталирани на вашия блог, така че да може да изпълнява над PHP код вътре постове. Be careful about installing this plug-in if you have other people managing your blog with you though. Бъдете внимателни, за да инсталирате този Plug-in, ако имате други хора управляващия блога си с вас все пак. If so you can setup custom privileges. Ако е така можеш да Настройка на персонализирани привилегии. If not then just make sure its installed and activated. Ако не тогава просто се уверете, неговите инсталиран и активиран.

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. Аз съм сигурен, които сте виждали безброй други плъгини на някъде там, която ви откъс от код, който можете да използвате във вашата sidebar.php файл във вашите тема папка. You can also use that code within any of the widgets you create on your homepage within those blocks. Можете да използвате този код в някой от джунджурии, които създавате в началната си страница в рамките на тези блокове. You can usually find code like that inside the readme or install notes file that most plug-in come with. Вие ще може да откриете кода така вътре в README или инсталирате файл, който отбелязва най-Plug-In дойде с.

Examples Примери

On the left is an example of my front page from when I recently redesigned RobMalon.Com . От ляво е пример за моята първа страница от времето, когато аз наскоро преработени 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. Аз също наскоро помогна личен приятел на моя създаде подобна настройка със своя страница в ToddRecommends.TV, който прави живо потоци и разговори филми и Tech. You can see a clip of what his front page currently looks like on the right-hand side. Можете да видите клип от това, което му първа страница в момента изглежда по дясната страна. 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. Той е с последните постове за всяка една от неговите основни категории по негова страница и се показва от емисия на върха направо от друга категория, които той използва за актуализации за събитията, актуализации и общи новини.

Posted by: Rob Публикувано от: Роб
Category: Blogging , Coding , Featured , Web Design Категория: Блог, кодиране, Топ, Уеб дизайн
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Tags: кодиране, CSS, дизайн, PHP, Допълнителни модули, WordPress
Respond: Leave A Comment | Trackback URL Отговор: Оставете коментар | Trackback URL