Wordpress Custom Home Page Design - Widgetized Front Page WordPress σχεδιασμός Προσαρμοσμένης Αρχική σελίδα - Widgetized Front Page

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 setup πηγαίνοντας στο: [Ρυθμίσεις], [ανάγνωση], [πρώτη σελίδα εμφανίζει], [ "Μια στατική σελίδα" - κουμπί]. 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 τότε θα έχετε μια ιδέα για ορισμένες από τις λειτουργίες Είμαι έτοιμος να διδάξουν σας έτσι ώστε να setup κάτι παρόμοιο στο ιστολόγιό σας.

Custom Home Page Design & Layout Αρχική σελίδα Custom 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? Πόσες πρόσφατα άρθρα σε κάθε widget θέλετε να εμφανίσετε; 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, μια λίστα με αντικείμενα που θεωρείτε "Featured" αντικείμενα. 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. Στη συνέχεια, από τώρα και στο εξής, θα προσθέσω απλώς ως πάω όταν γράφω ένα post που θέλω να εμφανίζεται στη "εμφανίζονται" widget στην πρώτη σελίδα.
• 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 Πίνακας ή 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 που είναι αδημοσίευτα οπότε μπορείτε να πειραματιστείτε με την θέση ενός υφιστάμενου blog στο χάος.

Coding The Widgets Κωδικοποίηση τα widgets

Then you have some options for each widget. Στη συνέχεια, έχετε κάποιες επιλογές για κάθε 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 template tags. All the documentation is there, simply call the functions with the parameters you want (as available in each template tag). Όλα τα έγγραφα που είναι εκεί, απλώς κλήση των λειτουργιών με τις παραμέτρους που θέλετε (όπως είναι διαθέσιμες σε κάθε πρότυπο tag). In the example above I first show a way to iterate through links in a particular category using the template tag get_posts . Στο παραπάνω παράδειγμα θα ήθελα πρώτα δείχνουν τον τρόπο να επαναλέγω μέσω δεσμών σε μια ιδιαίτερη κατηγορία, χρησιμοποιώντας το πρότυπο tag 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: Αν θέλετε να βρείτε το ID της κατηγορίας, μετά, ή κάνουν σελίδα ακόλουθους:

• log into admin. συνδεθείτε στο 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 Hover πάνω ή κάντε κλικ στη σωστή κατηγορία, μετά ή στη σελίδα που θέλετε να γνωρίζετε το αναγνωριστικό της
• 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 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. Θα τουλάχιστον γνωρίζουν το πώς θα αποκτήσετε το αναγνωριστικό του τώρα, χωρίς να χρειάζεται να συνδεθείτε με το 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. Μπορεί να χρειάζονται ένα 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. Αν ναι, μπορείτε να setup έθιμο των προνομίων. 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. Είμαι σίγουρος ότι έχετε δει αμέτρητες άλλες plugin του εκεί έξω που σας παρέχει ένα απόσπασμα του κώδικα που μπορείτε να χρησιμοποιήσετε στο αρχείο σας 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. Επίσης, πρόσφατα βοήθησε μια προσωπική φίλη μου δημιουργήσει ένα παρόμοιο setup με την σελίδα σε 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 Καταχωρήθηκε από: Rob
Category: Blogging , Coding , Featured , Web Design Κατηγορία: Blogging, Κωδικοποίηση, Featured, Web Design
Tags: Coding , CSS , Design , PHP , Plugins , Wordpress Ετικέτες: Κωδικοποίηση, CSS, Design, PHP, Plugins, WordPress
Respond: Leave A Comment | Trackback URL Απάντηση: Αφήστε ένα σχόλιο | trackback url