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. Например, я осуществил Новейшие область в верхней области вкладки на титульной странице. 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 функция петлевого должности, которые вы хотите показывать. 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 . Создание сложных страницах может быть еще более усилены, используя несколько 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 . В приведенном выше примере я впервые показать путь повторять через ссылки в особую категорию с помощью шаблона тега 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: FRO например, следующие 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: Если вы хотите найти идентификатор категории, должность, или страница делать 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: В строке состояния (если у Вас зависанием), или в адресной строке (если вы нажали), вы увидите ссылку, которая выглядит примерно так:
  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 нету поддержки этого, но если вы играете с другими 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 Плагины

You may need a plug-in called Exec-PHP installed on your blog so that you can execute the above PHP code inside posts. Вам может потребоваться подключаемый модуль называется Exec-PHP установлена на Вашем блоге, чтобы вы могли исполнить прежде PHP код внутри должностей. Be careful about installing this plug-in if you have other people managing your blog with you though. Будьте осторожны с установкой этого плагина в том случае, если у вас есть другие люди управление свой блог с вами, хотя. 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. Вы можете найти код, как правило, как и о том, что внутри файла или файл установки отмечает, что большинство подключаемых прийти в с.

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 кто Live ручьев и переговоры Фильмы и техническая. 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 Теги: кодирование, CSS, дизайн, PHP, плагины, Wordpress
Respond: Leave A Comment | Trackback URL Ответ: Оставить комментарий | Trackback URL