Δημιουργία και συντήρηση ιστοτόπου με χρήση WordPress

Transcript

1 Δημιουργία και συντήρηση ιστοτόπου με χρήση WordPress Διήμερο σεμινάριο για δημιουργία ιστοσελίδων με WordPress στο περιβάλλον του ΠΣΔ για τους εκπαιδευτικούς ΠΕ19/20 Βερύκιος Α., ΚΕΠΛΗΝΕΤ Λευκάδας

2 Διήμερο Σεμινάριο 1 η Ημέρα Στόχοι: Να μπορούμε να στήσουμε ένα WordPress site τόσο τοπικά όσο και στους servers του ΠΣΔ. 2 η Ημέρα Στόχοι: Να κατανοούμε την δομή των θεμάτων, να μπορούμε να αλλάξουμε τον κώδικα από τα θέματα, να μπορούμε να γράψουμε πρόσθετα (plugins) για WordPress.

3 2 η Ημέρα!

4 Εμφάνιση και Θέματα (WordPress Themes)

5 Θέματα (Themes)και πάλι Η εμφάνιση μιας σελίδας WordPress ορίζεται από το επιλεγμένο Θέμα, το οποίο χωρίζει την σελίδα σε περιοχές. Σε ορισμένες από αυτές τις περιοχές ο χρήστης μπορεί να τοποθετήσει «μονάδες» (widgets). Ένα τυπικό Θέμα οργανώνει την σελίδα όπως φαίνεται στο σχήμα. Εκτός αυτών, το θέμα ορίζει όλες τις άλλες παραμέτρους εμφάνισης: μέγεθος και τύπο γραμματοσειράς, χρώματα, κλπ. Δεν υπάρχει ένα θέμα κατάλληλο για όλες τις χρήσεις! Η επιλογή θέματος εξαρτάται από τον τύπο του ιστότοπου. Θα δούμε 4 τύπους ιστότοπων: προσωπική σελίδα, blog, Σχολικής Μονάδας και Διεύθυνσης ή Γραφείου εκπαίδευσης. Επικεφαλίδα Μενού Περιεχόμενο (σελίδα, άρθρο ή λίστα άρθρων) Υποσέλιδο sidebar μονάδα μονάδα μονάδα μονάδα μονάδα μονάδα μονάδα

6 Προσωπική σελίδα Οι προσωπικές σελίδες (Personal web pages) αφορούν ένα άτομο και προβάλλουν περιεχόμενο προσωπικής φύσης και όχι σχετικό με μια εταιρεία ή οργανισμό. Πολλές φορές ακολουθούν την «σχεδίαση της μιας σελίδας» (onepage design): όλη η πληροφορία παρουσιάζεται σε μια μεγάλη σελίδα την οποία ο χρήστης βλέπει με κατακόρυφη κύλιση (vertical scrolling).

7 Ιστολόγιο (Blog) Τα ιστολόγια (blog = web log) είναι ένα site πληροφοριακού χαρακτήρα ή συζητήσεων που αποτελείται από διακριτές εγγραφές («άρθρα») τα οποία παρουσιάζονται σε χρονολογική σειρά (τα νεώτερα πρώτα). Η κλασσική διάταξη του WordPress με το περιεχόμενο αριστερά και το sidebar με τις μονάδες δεξιά είναι ιδιαίτερα κατάλληλη για ιστολόγια. Μπορεί η διάταξη να είναι απλή, το οπτικό αποτέλεσμα όμως δεν είναι κατ ανάγκη απλοϊκό! Η εικόνα δεξιά δείχνει ένα ιστολόγιο με 2 δεξιά sidebars (

8 Σχολική Μονάδα Οι ιστότοποι σχολικών μονάδων προβάλλουν έντονα τις δραστηριότητες του σχολείου και των μαθητών. Μπορούν και πρέπει να περιέχουν πλούσιο οπτικοακουστικό υλικό. Η αρχική τους σελίδα δεν πρέπει να ακολουθεί την σχεδίαση του blog, αλλά μάλλον τον σχεδιασμό μιας εταιρικής σελίδας. Πολλές φορές ο λόγος που κάποιος επισκέπτεται την ιστοσελίδα ενός σχολείου είναι για να βρει στοιχεία επικοινωνίας όπως διεύθυνση, τηλέφωνο, fax, κλπ. Αυτά πρέπει να είναι ορατά στο πρωτοσέλιδο και να μην χρειάζεται ο επισκέπτης να ψάξει για να τα βρει!

9 Διεύθυνση ή Γραφείο Εκπαίδευσης Οι ιστότοποι των Διευθύνσεων και των Γραφείων της Εκπαίδευσης έχουν έντονο πληροφοριακό χαρακτήρα και πολύ λιγότερο οπτικοακουστικό υλικό. Η σχεδίαση τους μοιάζει με online εφημερίδα. Καλό είναι να αποφεύγονται οι χαιρετισμοί διευθυντών που καλωσορίζουν τον επισκέπτη στον κυβερνοχώρο της διεύθυνσης/γραφείου κλπ. Επιτυχία είναι ο τακτικός επισκέπτης να πληροφορηθεί ότι θέλει από την πρώτη σελίδα και να φύγει, χωρίς να χρειαστεί να κάνει περιττά «κλικ» ακολουθώντας συνδέσμους.

10 Επιλέγοντας Θέμα Επιλέξτε Θέμα που να ταιριάζει στον τύπο του ιστότοπου σας. Αποφύγετε την πολυπλοκότητα. Ένα απλό Θέμα είναι πιο εύκολο στην διαχείριση. Αποφασίστε ποιους περιηγητές (browsers) θέλετε να υποστηρίζετε και βεβαιωθείτε ότι το θέμα τους υποστηρίζει. Για παράδειγμα, θέλετε να υποστηρίζετε Internet Explorer 6/7/8? Υπάρχουν δωρεάν και premium (επί πληρωμή) θέματα για WordPress και Joomla. Αποφύγετε τα δεύτερα. Το WordPress παρέχει κατάλογο θεμάτων: WordPress Themes Directory Εναλλακτικά ψάξτε για δωρεάν θέματα από την αναζήτηση της Google. Μπορείτε να κατεβάσετε το θέμα που θέλετε τοπικά και κατόπιν να το ανεβάσετε με FTP στον φάκελο /wpcontent/themes/. Ή μπορείτε να εγκαταστήσετε το θέμα απευθείας μέσα από το περιβάλλον του WordPress. Τέλος, μπορείτε να γράψετε το δικό σας θέμα!

11 Εισαγωγή στη δημιουργία Θεμάτων

12 Γιατί? Για να δημιουργήσετε μια μοναδική εμφάνιση. Για να έχετε custom λειτουργικότητα. Για να αλλάζετε γρήγορα την οπτική εμφάνιση. Γιατί είναι μια ευκαιρία να μάθετε CSS, HTML και PHP, ή αν ξέρετε ήδη, να χρησιμοποιήσετε τις γνώσεις σας. Γιατί είναι δημιουργικό. Πληροφορίες:

13 Ανατομία ενός Θέματος Τα Θέματα βρίσκονται σε υποφακέλους του φακέλου θεμάτων του WordPress (wp-content/themes/). Για παράδειγμα, ένα Θέμα με το όνομα test θα βρίσκεται στον φάκελο wpcontent/themes/test. Ο φάκελος ενός Θέματος περιέχει αρχεία CSS, PHP, Javascript και εικόνες που όλα μαζί συνθέτουν το Θέμα. Εκτός των αρχείων εικόνων και Javascript, υπάρχουν 3 κύριοι τύποι αρχείων: Το αρχείο style.css που ορίζει την οπτική απεικόνιση και την διάταξη της σελίδας. Τα αρχεία template που ορίζουν τον τρόπο με τον οποίο το WordPress παράγει περιεχόμενο από την Βάση Δεδομένων. Προαιρετικά, ένα αρχείο λειτουργιών (functions.php).

14 Το αρχείο style.css Το αρχείο style.css είναι ένα αρχείο ορισμού στυλ (Cascading Style Sheet). Η CSS είναι μια γλώσσα που ορίζει στυλιστικά (χρώματα, στοίχιση, γραμματοσειρά κλπ) μια ιστοσελίδα. Εκτός των στυλ, το αρχείο style.css πρέπει να παρέχει πληροφορίες για το θέμα σε μορφή σχολίων. Ένα απλό αρχείο style.css είναι το δεξιά: δεν ορίζει κανένα στυλ αλλά ορίζει τα στοιχεία του Θέματος. Το WordPress αναγνωρίζει τα σχόλια και παρουσιάζει το Θέμα στο μενού Εμφάνιση > Θέματα. /* Theme Name: akv14 Theme URI: Description: akv14 is a WordPress starter theme based on HTML5 Boilerplate & Bootstrap. Version: Author: Aggelos Verikios Author URI: License: MIT License License URI: */

15 Τα αρχεία template Τα templates είναι αρχεία PHP κώδικα που δημιουργούν HTML. Αποτελούνται από HTML, PHP και WordPress Template Tags. Το WordPress υποστηρίζει διάφορα template αρχεία, εκ των οποίων υποχρεωτικό είναι το αρχείο index.php (το κύριο template). Συνεπώς το ελάχιστο WordPress θέμα αποτελείται από δύο αρχεία: το style.css και το index.php. Δεξιά είναι ο κώδικας ενός απλού index.php: περιλαμβάνει HTML, PHP και WordPress Template Tags (όπως πχ το wp_head). <!DOCTYPE html> <html lang="el"> <head> <meta charset="utf-8"> <title><?php wp_title(' ', true, 'right'); bloginfo('name');?> </title> <?php wp_head();?> </head> <body <?php body_class();?>> <?php while (have_posts()) : the_post();?> <article <?php post_class();?>> <h1><?php the_title();?></h1> <?php the_content();?> </article> <?php endwhile;?> <?php wp_footer();?> </body> </html>

16 Κατάλογος αρχείων template index.php το κύριο template. comments.php σχόλια front-page.php πρωτοσέλιδο home.php πρωτοσέλιδο άρθρων single.php template προβολής ενός άρθρου single-{post-type}.php template προβολής ενός τύπου άρθρου page.php template σελίδας category.php template κατηγορίας άρθρων tag.php template ετικέτας author.php template άρθρων συντάκτη date.php template άρθρων ημερομηνίας archive.php template άρθρων κατηγορίας, συντάκτη και ημερομηνίας (αν δεν υπάρχουν τα αντίστοιχα templates) search.php template αποτελεσμάτων αναζήτησης attachment.php template προβολής επισυναπτόμενου image.php template προβολής εικόνας 404.php template για το Σφάλμα 404 (HTTP Not Found) Τα προηγούμενα αντικαθιστούν το βασικό index.php template στην αντίστοιχη περίπτωση.

17 Starter Themes Εναλλακτικός τρόπος συγγραφής ενός νέου θέματος: starter themes Βοηθάνε να μην χαθούμε στην πολυπλοκότητα όταν γράφουμε ένα νέο θέμα Περιλαμβάνουν τα ελάχιστα απαιτούμενα αρχεία και τις ελάχιστες απαιτούμενες δηλώσεις ώστε να ξεκινήσετε να γράφεται ένα θέμα. Το site της ΔΔΕ Λευκάδας βασίσθηκε στο Roots Starter Theme, ένα από τα καλύτερα (

18 Starter Themes Naked Wordpress Underscores

19 Responsive web designs και Front-End Frameworks

20 Responsive Design (Ανταποκρίσιμος Σχεδιασμός) Δεν πρέπει να υποθέτουμε ότι όλοι οι χρήστες θα βλέπουν το site μας από κάποιον επιτραπέζιο υπολογιστή. Υπάρχει πληθώρα φορητών συσκευών (κινητά τηλέφωνα, tablets, laptops) με διαφορετικές αναλύσεις οθόνης. Παλιά η πρακτική ήταν να κατασκευάζεται ένα 2 ο site για φορητές συσκευές. Τώρα πια προσπαθούμε τα site μας να είναι device-agnostic. Ένας τρόπος να το πετύχουμε είναι ο ανταποκρίσιμος σχεδιασμός (responsive design) που επιτυγχάνεται κυρίως με χρήση CSS. Μια σελίδα σχεδιασμένη με responsive design ανταποκρίνεται και προσαρμόζεται στην ανάλυση της οθόνης χρησιμοποιώντας: Ρευστά πλέγματα (fluid grids), στα οποία το μέγεθος των στοιχείων της σελίδας εκφράζεται σε ποσοστά και όχι σε απόλυτα ποσά. Εύκαμπτες εικόνες - το μέγεθος των εικόνων επίσης εκφράζεται σε ποσοστά για να αποφευχθεί υπερχείλιση. CSS3 Media Queries και εφαρμογή διαφορετικών CSS κανόνων για κάθε κατηγορία ανάλυσης οθόνης. Πρόβλημα η ανάπτυξη και το test, καλύτερα η χρήση ενός front-end development framework.

21 Παράδειγμα Responsive Design

22 HTML5 Boilerplate αναπτύχθηκε από κορυφαίους front-end developers, μεταξύ των οποίων και ο Paul Irish. ανοιχτού κώδικα (Ελεύθερο λογισμικό) Κατασκευασμένο με HTML και CSS. Δεν βοηθά στο responsive design, αλλά είναι η καλύτερη βάση για front-end development. Περιέχει καταπληκτικό πρότυπο αρχείο.htaccess για τον Apache. Τα site της ΔΔΕ/ΔΠΕ, ΦΑ, ΕΚΦΕ και ΚΕΠΛΗΝΕΤ Λευκάδας κατασκευάστηκαν με HTML5 Boilerplate.

23 Twitter Bootstrap αναπτύχθηκε από το Twitter ανοιχτού κώδικα (Ελεύθερο λογισμικό) το πιο δημοφιλές πρόγραμμα στο GitHub Κατασκευασμένο με Less ή Sass τρέχουσα έκδοση: 3 το Bootstrap 2 περιλαμβάνεται στο Joomla 3 Τα site της ΔΔΕ/ΔΠΕ Λευκάδας, ΦΑ Λευκάδας και ΕΚΦΕ Λευκάδας κατασκευάστηκαν με Bootstrap 2 Το site του ΚΕΠΛΗΝΕΤ Λευκάδας από τον Μάιο 2014 τρέχει με Bootstrap 3, στο οποίο θα μεταφερθούν και τα υπόλοιπα

24 YOOtheme UIkit αναπτύχθηκε από την YOOtheme ανοιχτού κώδικα (Ελεύθερο λογισμικό) Κατασκευασμένο με Less μιμείται το Bootstrap, υπάρχει σχεδόν 1-1 αντιστοιχία. Το δοκιμαστικό site του Γυμνασίου Βασιλικής κατασκευάστηκε με UIkit

25 Zurb Foundation αναπτύχθηκε από την Zurb ανοιχτού κώδικα (Ελεύθερο λογισμικό) τρέχουσα έκδοση: 5 Κατασκευασμένο με Sass

26 Yahoo Pure αναπτύχθηκε από την Yahoo ανοιχτού κώδικα (Ελεύθερο λογισμικό) Κατασκευασμένο με SMACSS

27 <html> Πρακτική άσκηση

28 Τέλος 2 ης Μέρας!