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의 경우 1 면에 본 다음 몇 가지에 대해 그렇게 당신의 블로그에 설치 너희들은 뭔가를 가르칠 수있어 비슷한 기능의 아이디어를 가지고거야.

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 새로운 //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 종료 //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. / //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 종료 //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 . 복잡한 홈페이지의 창조를 사용하여 더욱 향상된 여러 워드 템플릿 태그가 될 수있습니다. 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. the get_post 설명서를 통해보고 당신을보고 싶어요 출력을 조정하기 위해 적절한 변수를 추가합니다. Fro example, the following get_post function will display 3 posts from all categories except 5 and 8: 이리저리 예를 들어, 다음 get_post 함수 5와 8을 제외한 모든 카테고리에서 3 개의 게시물이 표시됩니다 :
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: 만약 당신이 분류, 게시, 또는 페이지의 ID를 찾아 원하는 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 하버 이상 적절한 카테고리를 클릭하거나, 게시, 또는 페이지에 당신의 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: 상태 표시줄에 (해당되는 경우)이 떠오르게하거나 주소 표시줄에 (해당되는 경우)이 비슷한 외모의 링크를 참조한다 클릭한 :
  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. 적어도 이제 귀하의 mySQL 데이터베이스에 로그인할 때 ID를 어떻게하지 않고있어 좀 안다는 거예요.

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. 이 플러그인을 설치하는 것에 대해서 신중하게 - 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 최근 광산의 라이브 스트림과 회담을 영화와 테크 자신의 페이지와 비슷한 설정을 만드는 개인적인 친구. 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 답변 : 덧글을 남길 | 트랙백 URL을