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. Widgets जहाँ जाने के लिए जो जा रहे हैं बुलवा लो. 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. विभिन्न स्थानों में इस Offsetting आप इसे अच्छी तरह से संतुलन को पाने के लिए एक मुखपृष्ठ tweak करने की अनुमति देगा जहाँ यह कॉलम में असमान सामग्री अन्यथा नहीं की वजह से.
• Do you want to display the first 200 characters (without links/images) of each article? आप लिंक (बिना / images) प्रत्येक लेख के पहले 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. जब तुम, मत भूलना अपने widgets बाहर की योजना बना रहे हैं, तो आप अन्य plugins के रूप में अच्छी तरह से कोड का उपयोग कर सकते हैं. More about that in a bit. के बारे में अधिक जानकारी कि एक बिट में.

Table Or CSS Setup टेबल या सीएसएस सेटअप

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 इस 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 समाप्ति //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. 5 //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 . जटिल 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 . इस उदाहरण में ऊपर मैं पहले एक विशेष श्रेणी के टैग 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 समारोह में 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. यदि आप अन्य WordPress कार्यों के साथ खेलने get_posts, लेकिन इस समर्थन doesn't, वे कभी कभी करते हैं. 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. आप किसी भी आप अपने होमपेज पर उन ब्लॉकों के भीतर बनाने के widgets के भीतर है कि कोड का उपयोग कर सकते हैं. You can usually find code like that inside the readme or install notes file that most plug-in come with. आप आमतौर पर README के अंदर इस तरह कोड प्राप्त कर सकते हैं या install फ़ाइल नोट कि सबसे प्लग में साथ आओ.

Examples उदाहरण

On the left is an example of my front page from when I recently redesigned RobMalon.Com . तरफ से मेरे सामने पृष्ठ की जब मैं हाल ही में RobMalon.Com redesigned एक उदाहरण है. 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 टैग: कोडन, सीएसएस, डिजाइन, php, Plugins, WordPress
Respond: Leave A Comment | Trackback URL जवाब: एक टिप्पणी छोड़ | Trackback URL