Τα πρώτα μου WordPress plugins είναι πλέον διαθέσιμα
11.06.2010
Για το πρώτο είχα μιλήσει και πλέον μαζί με κάποιες βελτιώσεις είναι διαθέσιμο για χρήση. Το 2o plugin (Custom CSS) προέκυψε από ανάγκη σήμερα το πρωί. Για περισσότερα δείτε τα σχετικά posts στο Webtoolkit4.me
Παιχνίδια με το jQuery DatePicker. Μέρος 2ο
18.05.2010
Στο προηγούμενο post είδαμε πως μπορούμε να ενημερώσουμε 2 jQuery UI DatePickers. Όπως είδαμε στο παράδειγμα επιλέγοντας μια ημερομηνία στον έναν από τους 2 datepickers ενημερώνεται και ο άλλος. Το παράδειγμα δουλεύει κανονικά… αν το online travel shop έχει εκδρομές μόνο για 5 ημέρες μιας και ότι ημερομηνία να διαλέξει κανείς η διαφορά των ημερομηνιών είναι πάντα 5 ημέρες (μετά από δική μας ρύθμιση). Μπορούμε να βελτιώσουμε (διορθώσουμε) αυτή τη λογική λέγοντας στους 2 datepickers να ενημερωθούν μεταξύ τους μόνο όταν η ημερομηνία επιστροφής (2ος datepicker) είναι μικρότερη της ημερομηνίας αναχώρησης και αντίστροφα.
Έτσι, κάποιος να μπορεί ελεύθερα να διαλέξει τις ημερομηνίες που θέλει χωρίς όμως να μπορεί να διαλέξει π.χ. ημερομηνία επιστροφής μικρότερη από την ημερομηνία αναχώρησης.
Στο παρακάτω παράδειγμα είναι ακριβώς ο ίδιος κώδικας με του προηγούμενου post με τη διαφορά πως έχουμε ένα extra έλεγχο και στις 2 περιπτώσεις. Τσεκάρουμε αν η ημερομηνία επιστροφής είναι μικρότερη της ημερομηνίας αναχώρησης. Αν ναι, τότε ενημερώνονται μεταξύ τους οι 2 datepickers.
$('#dep').datepicker({
inline: true,
onSelect: function(theDate) {
var dep = $('#dep').datepicker("getDate");
var arr = $('#arr').datepicker("getDate");
if (arr < dep) {
var plustwo = $.datepicker.parseDate('mm/dd/yy', theDate);
plustwo.setDate(plustwo.getDate() + 2);
$('#arr').datepicker('setDate', plustwo);
}
}
});
$('#arr').datepicker({
inline: true,
onSelect: function(theDate) {
var dep = $('#dep').datepicker("getDate");
var arr = $('#arr').datepicker("getDate");
if (arr < dep) {
var minustwo = $.datepicker.parseDate('mm/dd/yy', theDate);
minustwo.setDate(minustwo.getDate() - 2);
$('#dep').datepicker('setDate', minustwo);
}
}
});
Και φυσικά το παράδειγμα μας.
Παιχνίδια με το jQuery UI DatePicker
14.05.2010
To πιο σπαστικό πράγμα στα περισσότερα travel sites είναι η επιλογή ημερομηνιών ενός ταξιδιού. Πας διαλέγεις την ημερομηνία που θες να φύγεις και η ημερομηνία επιστροφής κάθεται εκεί και σε κοιτάει.
Τι θα έπρεπε να κάνει δηλαδή;
Κοίτα, 2 πράγματα θα μπορούσε να κάνει. Το ένα είναι να “ενημερωθεί” για την ημερομηνία αναχώρησης και να γίνει και αυτή ίδια και το δεύτερο που θα μπορούσε να κάνει είναι να “ενημερωθεί” για την ημερομηνία αναχώρησης και να πάει 3 – 4 μέρες μπροστά. Τα ίδια θα έπρεπε να κάνει και ημερομηνία αναχώρησης αν παίξουμε με την ημερομηνία επιστροφής. Με τον επιλογέα ημερομηνίας (πως λέμε εντολέας; καμία σχέση) του jQuery UI κάτι τέτοιο είναι πολύ απλό να γίνει (και οι περισσότεροι το χρησιμοποιούν απλά για να εμφανίσουν τα ημερολόγια). Για δες τι θα κάνουμε. Επιλέγουμε μια ημερομήνια, είτε αναχώρησης είτε επιστροφής και προσθέτουμε ή αφαιρούμε αντίστοιχα 5 μέρες στο αντίστοιχο date picker.
Λίγος, τόσο λίγος κώδικας
Για αρχή απλά εμφανίζω 2 ημερολόγια ως εξής.
$('#dep').datepicker({
inline: true,
onSelect: function(theDate) {
var plustwo = $.datepicker.parseDate('mm/dd/yy', theDate);
plustwo.setDate(plustwo.getDate() + 5);
$('#arr').datepicker('setDate', plustwo);
}
});
$('#arr').datepicker({
inline: true,
onSelect: function(theDate) {
var minustwo = $.datepicker.parseDate('mm/dd/yy', theDate);
minustwo.setDate(minustwo.getDate() - 5);
$('#dep').datepicker('setDate', minustwo);
}
});
Τα “#dep” και “#arr” είναι 2 κενά div pairs που απλά υπάρχουν στην markup μας για να συνδέσω τα ημερολόγια. Τίποτα σπουδαίο. Αυτό που έχει σημασία να δούμε είναι τι συμβαίνει στο συμβάν onSelect. Σε απλά Ελληνικά κάνω το εξής. Στο συμβάν onSelect έχω μια function όπου της περνάω μια παράμετρο. Την ημερομηνία που έχω επιλέξει. Φυσικά την περνάω σαν string. Χρησιμοποιώντας το utility function $.datepicker.parseDate δημιουργώ μια ημερομηνία από το string που περάσαμε σαν παράμετρο και μετά με τις παλιές καλές Javascript functions setDate kai getDate απλά προσθέτω στη πρώτη περίπτωση (αναχώρηση) και αφαιρώ στη 2η (επιστροφή) 5 μέρες. Η τελευταία γραμμή απλά ενημερώνει τον γείτονα date picker με τη νέα ημερομηνία.
15 λεπτά (μαζί με την έρευνα) για να υλοποιηθεί. Ε κρίμα δεν είναι να παιδευόμαστε;
Στο επόμενο σχετικό tutorial θα δούμε τι περιορισμούς μπορούμε να βάλουμε αλλά και να βελτιώσουμε τη λογική των date pickers. Νάνι τώρα.
Custom Post Relationships για WordPress: Το πρώτο μου plugin (κάργα beta)
27.04.2010
Περίμενα μήπως και κυκλοφορήσει κάτι. Άδικα. Όλα τα plug-ins για WordPress που έχουν να κάνουν με related posts βασίζονται σε κάποιο “μαγικό αλγόριθμο”. Εγώ δε θέλω μαγικό αλγόριθμο. Θέλω να μπορώ να συνδέσω ένα post με κάποια άλλα posts με το χέρι. Έκατσα λοιπόν και το έφτιαξα. Πριν το βγάλω στον άγριο κόσμο του web, βγάζω μια έκδοση εδώ για δοκιμή. Γενικά λειτουργεί όπως το θέλω απλά ακόμα έχει δουλειά. Όχι τόσο στο “πίσω” κομμάτι όσο στον κώδικα για την εμφάνιση των related posts. Αλλά θα φτάσω και εκεί. Σημασία έχει πως το “μανίκι” έφυγε από τη μέση και είμαι πολύ ικανοποιημένος γι’ αυτό.
Οδηγίες
Κατεβάστε το plugin, ενεργοποιήστε το και πάτε σε κάποιο post. Θα εμφανιστεί ένα panel. Εκεί μπορεί να διαλέξετε κάποια κατηγορία και από τα post που θα εμφανιστούν να επιλέξετε ποιά posts θέλετε να συσχετίσετε. Μπορείτε να κάνετε όσες συσχετίσεις θέλετε. Το Filter posts για την ώρα φιλτράρει τα posts μιας κατηγορίας ψάχνοντας από την αρχή του ονόματος του post. Αυτό θα διορθωθεί. Τα posts που έχετε συσχετίσει μπορούν να ταξινομηθούν με drag and drop. Για την ώρα δε θα σας μπερδέψω με το πως θα εμφανίσετε τις συσχετίσεις στο blog σας γιατί δεν έχω καταλήξει ακόμα στις επιλογές που θα δώσω. Παρόλα αυτά θα ήθελα τα σχόλια σας, τυχόν προβλήματα ή οτιδήποτε πιστεύετε χρειάζεται βελτίωση στο back-end κομμάτι.
Μπορείτε να κατεβάσετε τη πρώτη έκδοση του plugin. Περιμένω τα σχόλια σας!
WordPress tip: Excluding categories
18.03.2010
Οι κατηγορίες στο wordpress είναι αναπόσπαστο κομμάτι κάθε developer. Για λίγο ακόμα (περιμένουμε την έκδοση 3.0 όπου αλλάζουν αρκετά πράγματα σε αυτό το κομμάτι) τις χρησιμοποιούμε για να κατηγοριοποιήσουμε posts, για να “ξεγελάσουμε” το wordpress και να παίξουμε μαζί του χρησιμοποιώντας το σαν CMS και άλλα τέτοια. Γενικά πάντως είναι πολλές οι φορές που πρέπει να κάνουμε exclude κατηγορίες από διάφορα loops που έχουμε στο site μας. Π.χ. μπορεί να έχουμε χρησιμοποιήσει μια κατηγορία “featured posts” για να εμφανίσουμε κάποια συγκεκριμένα posts στη κεντρική σελίδα αλλά δε θέλουμε να εμφανίσουμε τη συγκεκριμένη κατηγορία στο sidebar του blog μας.
H λύση που προτείνω είναι απλή και ίσως κάποιοι από εσάς το κάνετε ήδη. Φτιάξτε μια κεντρική κατηγορία με ένα όνομα π.χ “Boηθητικές Κατηγορίες” και όλες τις κατηγορίες που χρησιμοποιείτε για κάποιο συγκεκριμένο σκοπό απλά δηλώστε τις σαν υποκατηγορίες της. Με αυτό το τρόπο όταν θέλετε να κάνετε exclude όλες αυτές τις κατηγορίες από ένα loop απλά κάνετε exclude το parent category και ξεμπερδέψατε.
Hope it helps.
