Wordpress Custom Home Page Design - Widgetized Front Page وورد العرف تصميم الصفحة الرئيسية -- 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]. حتى كنت قد تمكنت من تحديد العرف الصفحة الأولى في الإعداد وورد الخاص بك بالذهاب إلى : [إعدادات] ، [قراءة] ، [يتم عرض الصفحة الأولى] ، [ "جامدة صفحة" -- زر الراديو]. 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. أن من الصعب إذا كنت لا تعرف ما هو قادر على وورد. 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 الجدول أو الإعداد المغلق

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. وإذا كان لا ، ليست فكرة سيئة لممارسة على غير صفحتها الاولى وهو لم ينشر حتى تتمكن من تجربة دون وضع القائمة بلوق الى حالة من الفوضى.

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. ما عليك القيام به هو قول سليم وورد لحلقة مهمة من خلال الوظائف التي تريد عرض. 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 . إنشاء صفحات استقبال معقدة ويمكن زيادة تعزيز المتعددة من خلال استخدام العلامات قالب ووردبرس]. 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: جيئة وذهابا على سبيل المثال ، بعد 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 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 هذا الدعم ، ولكن اذا لعبت مع وورد وظائف أخرى ، وأحيانا لا. 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. يمكنك على الأقل أن نعرف كيف نحصل على الهوية الان دون الحاجة إلى تسجيل الدخول إلى قاعدة البيانات الخاصة بك ماي. س. ك.

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. أنت قد تحتاج إلى المكونات في دعا إكسيك 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 الذين لا يعيشون فيه تيارات وأفلام والمحادثات الفنية. 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 ، الإضافات ، وورد
Respond: Leave A Comment | Trackback URL الرد : ترك تعليق | Trackback العنوان