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

Transcript

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

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

3 1 η Ημέρα!

4 Ιστοσελίδες Σχολείων ΔΔΕ Λευκάδας Ιστοσελίδα Υλοποίηση Ιστοσελίδα Υλοποίηση Γυμνάσιο Μεγανησίου MS Frontpage 5.0 Γυμνάσιο Βασιλικής MS Frontpage ο Γυμνάσιο Λευκάδας Joomla 1.5 (autosch) 2 ο Γυμνάσιο Λευκάδας Joomla 1.5 (autosch) Μουσικό Γυμνάσιο Custom HTML/CSS? 1ο Λύκειο Λευκάδας Custom HTML/CSS? Γυμνάσιο Νυδριού Γυμνάσιο Καρυάς Joomla 1.5 (autosch) Joomla 1.5 (autosch) 1ο Λύκειο Λευκάδας Google Blogger 2 ο Λύκειο Λευκάδας Joomla 1.5 (customized) ΕΠΑΣ Λευκάδας Custom PHP/JS/CSS Λύκειο Νυδριού Joomla 1.5 (autosch) Οι ιστοσελίδες που αναπτύχθηκαν με Frontpage ή Custom PHP/HTML δεν αντιμετωπίζουν τεχνικά θέματα δεν χειρίζονται όμως αιτήματα POST. Η χρήση υπηρεσιών εκτός ΠΣΔ (πχ Google Blogger) για επίσημους λογαριασμούς μονάδων αποθαρρύνεται από το ΠΣΔ. Οι ιστοσελίδες βασισμένες σε Joomla 1.5 αντιμετωπίζουν πρόβλημα καθώς η έκδοση 1.5 δεν ενημερώνεται πλέον και παύει η υποστήριξη της λόγω της αναβάθμισης της PHP του ΠΣΔ σε 5.3.

5 CMS ή HTML site (πχ Frontpage)? Τα CMS έχουν πολλά πλεονεκτήματα Δυναμικό περιεχόμενο: καθώς τα CMS χρησιμοποιούν κάποια γλώσσα προγραμματισμού, παράγουν δυναμικό περιεχόμενο και μπορούν να χειριστούν αιτήματα POST (φόρμες). Οργάνωση περιεχομένου: τα CMS επιτρέπουν την οργάνωση του περιεχομένου σε κατηγορίες/υποκατηγορίες. Λειτουργικότητα: τα CMS μπορούν να επεκταθούν μέσω plugins (πρόσθετων) που προσθέτουν στην υπάρχουσα λειτουργικότητα. Χρήστες: στα CMS μπορούν να ορισθούν πολλοί χρήστες, καθένας με διαφορετικά δικαιώματα. Admin panel: τα CMS περιλαμβάνουν σελίδα διαχείρισης που μπορείτε να κάνετε login και να διαχειριστείτε το site. Βέβαια υπάρχουν και μειονεκτήματα Απόδοση: λόγω της χρήσης PHP/MySQL, κάθε αίτημα παίρνει περισσότερο χρόνο για να επεξεργασθεί. Στο περιβάλλον του ΠΣΔ αυτό σημαίνει ότι ένα HTML site μπορεί να έχει ως και 5-10 φορές ταχύτερη ανταπόκριση από ένα CMS site. Σχεδίαση: είναι κάπως τυποποιημένη. Συνήθως, και μόνο βλέποντας ένα CMS site, μπορείς να καταλάβεις ποιο πακέτο CMS χρησιμοποιήθηκε για την κατασκευή του.

6 Δωρεάν CMS με PHP/MySQL Drupal Joomla WordPress Το δυσκολότερο και ισχυρότερο CMS. Για μεγάλους οργανισμούς και επιχειρήσεις. Πολύ δύσκολο στην εκμάθηση. Μέση λύση μεταξύ Drupal και WordPress. Για Μικρομεσαία sites. Φιλικό στον χρήστη, χρειάζεται εκμάθηση. Το ΠΣΔ αναφέρει 7644 ιστοσελίδες σε Joomla. Το φιλικότερο και ευκολότερο από όλα. Για μικρομεσαία sites και blogging. Το ΠΣΔ αναφέρει 2363 ιστοσελίδες σε WordPress.

7 Γιατί WordPress? είναι το απλούστερο όλων έχει καλή υποστήριξη, συχνές αναβαθμίσεις και πληθώρα δωρεάν θεμάτων και επεκτάσεων υπάρχουν εργαλεία εισαγωγής από άλλες πλατφόρμες, πχ από Joomla ή Blogger, που διευκολύνουν την μετάπτωση είναι εύκολο να εκπαιδεύσεις και τελικά να δώσεις σε κάποιον άλλον την ευθύνη ενημέρωσης μια WordPress ιστοσελίδας είναι σχετικά εύκολο να στήσεις custom υπηρεσίες σε WordPress (πχ βεβαιώσεις αποδοχών, online αιτήσεις κλπ)

8 Που τρέχει WordPress Ιστότοπος ΔΔΕ Λευκάδας ΔΠΕ Λευκάδας ΚΕΠΛΗΝΕΤ Λευκάδας Γραφείο Φυσικής Αγωγής ΕΚΦΕ Συμβ. Σταθμός Νέων Ποιος ενημερώνει τη σελίδα Βερύκιος, Ρήγας, Γραμματικόπουλος, Κακλαμάνη, Γκαμπρέλας Πετούση Βερύκιος, Ρήγας Θειακού Χόρτης Άϊλερς Δημοτικό Σχολείο Νυδριού Κανείς? 3ο Νηπιαγωγείο Κάκου

9 Τι εργαλεία θα χρειαστούμε Πρόγραμμα Notepad2 FileZilla FTP Client XAMPP Που και γιατί Για να κάνουμε edit αρχεία PHP με syntax highlight. Μικρός text editor (350 KB), αντικαθιστά το Windows Notepad. Για να μεταφέρουμε αρχεία από και προς το λογαριασμό μας στο ΠΣΔ. Πακέτο που περιλαμβάνει Apache, PHP και MySQL. Για να στήσουμε μια δοκιμαστική εγκατάσταση του WordPress τοπικά, χωρίς τις καθυστερήσεις του ΠΣΔ. Όλα τα παραπάνω είναι ήδη εγκατεστημένα στον υπολογιστή σας. Στο XAMPP υπάρχει ήδη στημένο ένα WordPress site για το Γυμνάσιο Βασιλικής, για να το δείτε και να πάρετε ιδέες. Μπορείτε να το δείτε στην διεύθυνση

10 Webhosting στο ΠΣΔ

11 TCP Client/Server Μοντέλο Client / Server Τα Server προγράμματα «ακούνε» κάποια ή κάποιες θύρες TCP ή/και UDP. Οι Πελάτες συνήθως (αλλά όχι κατ ανάγκη) βρίσκονται σε διαφορετικό μηχάνημα από τον Web Server. Πελάτης #1 (πχ Firefox) Πελάτης #2 (Chrome) TCP #20 (FTP) TCP #21 (FTP) TCP #80 (HTTP) TCP #443 (HTTPS) FTP Server Apache Web Server TCP #3306 (MySQL) MySQL Database Server Πελάτης #N (πχ Outlook Express) TCP #143 (IMAP) TCP #25 (SMTP) Mail Server Μηχανή Server

12 Apache Web Server Open Source HTTP Web Server Ξεκίνησε το 1995 Είναι ο δημοφιλέστερος Web Server Το 2009 έγινε ο πρώτος Web Server που εξυπηρετούσε πάνω από 100 εκατομμύρια websites Ως τον 6/2013 υπολογίζεται ότι εξυπηρετεί το 54% των ενεργών websites παγκοσμίως Υποστηρίζει PHP, Perl, Python.

13 Apache στο ΠΣΔ Όλοι οι χρήστες του ΠΣΔ έχουν δικτυακό τόπο που εξυπηρετείται από τον Apache. Μπορείτε να βρείτε βασικές πληροφορίες από το επιλέξτε MySch > Πίνακας Ελέγχου > Στοιχεία δικτυακού τόπου. Δημοσίευση σελίδων μπορεί να γίνει με χρήση ενός προγράμματος ftp (όπως το Filezilla), από τον Windows Explorer, ή με κάποιο πρόγραμμα όπως τα MS FrontPage κλπ.

14 Η αρχιτεκτονική του Apache Πελάτης #1 (πχ Firefox) Εργάτης #1 Εργάτης #2 Πελάτης #2 (Chrome) TCP Θύρα #80 (HTTP) Apache Core Εργάτης #3 Πελάτης #N (telnet) Εργάτης #N Apache Web Server Μηχανή Server

15 Αιτήματα και απαντήσεις στο πρωτόκολλο HTTP Οι πελάτες στέλνοντας HTTP Requests, που αποτελούνται από: 1. Μια γραμμή αιτήματος 2. Κεφαλίδες αιτήματος 3. Μια κενή γραμμή [CRLF] 4. Προαιρετικά, το σώμα της αίτησης. Το HTTP 1.0 ορίζει 3 Μεθόδους αιτήματος: GET, POST, HEAD Πελάτης HTTP Request Web Server Το HTTP 1.1 ορίζει επιπλέον τα: PUT, PATCH, OPTIONS, DELETE, TRACE Ο Server απαντά με ένα HTTP Response: 1. Μια γραμμή κατάστασης, πχ HTTP/ OK 2. Κεφαλίδες απάντησης, πχ Content-Type: text/html 3. Μια κενή γραμμή [CRLF] 4. Προαιρετικά, το σώμα της απάντησης HTTP Response

16 Αιτήματα GET Ζητά (διαβάζει) δεδομένα Μορφή: GET [πόρος] HTTP/[1.0][1.1] [headers] [CRLF] Για το HTTP 1.1 πρέπει να ορισθεί η επικεφαλίδα Host. GET index.htm HTTP/1.1 Host: gym-megan.lef.sch.gr [άλλες επικεφαλίδες ] [κενή γραμμή CRLF] Στο ΠΣΔ φαίνεται ότι πρέπει να ορισθεί η επικεφαλίδα User-Agent. Παράδειγμα: διάβασμα της αρχικής σελίδας του Γυμνασίου Μεγανησίου: GET / HTTP/1.1 Host: gym-megan.lef.sch.gr User-Agent: aggelos Το παραπάνω αίτημα μπορεί να δοθεί με το χέρι πληκτρολογώντας το μέσω telnet: Πελάτης HTTP/ OK Content-Type: text/html [άλλες επικεφαλίδες ] [κενή γραμμή CRLF] [Κώδικας HTML] Web Server index.htm C:\> telnet Microsoft Telnet> set crlf Microsoft Telnet> set localecho Microsoft Telnet> open gym-megan.lef.sch.gr 80 GET / HTTP/1.1 Host: gym-megan.lef.sch.gr User-Agent: aggelos <πατήστε enter 2 φορές>

17 Παράδειγμα χειρισμού ενός απλού αιτήματος GET Apache Web Server 1. Ο Server λαμβάνει ένα αίτημα GET για ένα αρχείο HTML. Το αίτημα γίνεται βάσει πρωτοκόλλου HTTP Το αίτημα παραδίδεται για επεξεργασία σε ένα διαθέσιμο Εργάτη. 3. Ο Εργάτης βρίσκει και διαβάζει τον ζητούμενο πόρο (ένα αρχείο HTML) από το σύστημα αρχείων. GET index.htm HTTP/1.1 HTTP/ OK 1 5 Apache Core 2 4 Εργάτης #1 Εργάτης #2 4. Ο Εργάτης επιστρέφει την απάντηση του στον πυρήνα Ο Apache επιστρέφει την απάντηση (επιτυχία). Το σώμα της απάντησης περιέχει τα περιεχόμενα του αρχείου που ζητήθηκε. index.htm / istoria.htm sch.htm Με τον ίδιο τρόπο εξυπηρετούνται πολλοί τύποι αρχείων (CSS, JS, PDF, Excel, Word κλπ). Μηχανή Server

18 PHP: Hypertext Preprocessor Η PHP είναι μια δημοφιλής γενικής χρήσης scripting ερμηνευόμενη γλώσσα η οποία είναι ιδιαίτερα κατάλληλη για την ανάπτυξη web εφαρμογών αλλά χρησιμοποιείται και σαν γλώσσα προγραμματισμού γενικής χρήσης. Ως τον Ιανουάριο του 2013 ήταν εγκατεστημένη σε περισσότερα από 240 εκατομμύρια sites και 2.1 εκατομμύρια servers. Η σύνταξη της μοιάζει με της C και είναι εύκολη στην εκμάθηση αν γνωρίζετε C. Είναι διαδικαστική γλώσσα αλλά από την έκδοση 3 υποστηρίζει και αντικειμενοστραφή χαρακτηριστικά, τα οποία εμπλουτίζονται στις νεώτερες εκδόσεις.

19 PHP: σύνταξη και μετάφραση Τα αρχεία κώδικα PHP έχουν κατάληξη.php και μπορούν να περιέχουν ανάμεικτο περιεχόμενο (δηλαδή εντολές PHP και οτιδήποτε άλλο, όπως HTML). Ο κώδικας PHP περικλείεται από τα σύμβολα <?php και?>. Οτιδήποτε δεν περιέχεται ανάμεσα σε αυτά τα σύμβολα αγνοείται από τον ερμηνευτή. Παράδειγμα: <p>αυτή η γραμμή θα αγνοηθεί από τον ερμηνευτή της PHP.</p> <?php echo Αυτή η γραμμή θα μεταφραστεί από τον ερμηνευτή της PHP. ;?> Η επίσημη ιστοσελίδα της PHP περιέχει πλούσια τεκμηρίωση. Κάθε φορά που ζητείται η εκτέλεση ενός προγράμματος PHP, ο PHP interpreter φορτώνει το πρόγραμμα, το μεταφράζει σε μια ενδιάμεση μορφή (OpCodes) και κατόπιν το εκτελεί. Σε αντίθεση με τα ByteCodes της Java, η OpCode μορφή ενός προγράμματος PHP δεν ορίζεται από κάποιο πρότυπο, δηλαδή δύο διαφορετικές υλοποιήσεις της PHP μπορούν να χρησιμοποιούν διαφορετική αναπαράσταση OpCodes. Τα αρχεία λοιπόν με PHP OpCodes δεν είναι portable, σε αντίθεση με τα Java class files.

20 PHP στο ΠΣΔ Ως τον Φεβρουάριο του 2013, το ΠΣΔ υποστήριζε την PHP σε safe mode, το οποίο έθετε πολλούς περιορισμούς. Έκτοτε δόθηκε η δυνατότητα χρήσης της PHP παράλληλα με την μέσω της οδηγίας AddHandler php53.php στο αρχείο.htaccess του Apache. Τον Οκτώβριο του 2013 ορίσθηκε η έκδοση 5.3 ως βασική, ενώ χρήση της 5.2 απαιτούσε την οδηγία AddHandler php52.php στο αρχείο.htaccess. Τέλος, τον Ιούλιο του 2014 η λειτουργία της έκδοσης 5.2 θα σταματήσει οριστικά. Μεγάλες διαφορές ανάμεσα στις 5.2 και 5.3 εκδόσεις είναι τα namespaces, closures. Εκτός από τον εμπλουτισμό της σύνταξης, κάθε νέα έκδοση της PHP είναι ταχύτερη από την προηγούμενη και διορθώνει κενά ασφάλειας. Μεγάλες αλλαγές έχει η έκδοση 5.5, η οποία έχει ενσωματωμένη ByteCode Cache, μη συμβατή με την APC ByteCode Cache που χρησιμοποιείται ευρέως (και από το ΠΣΔ).

21 Σύνδεση του Apache με την PHP 1. Ο Apache μπορεί να ρυθμιστεί ώστε να εκτελεί την PHP είτε σαν εξωτερικό CGI πρόγραμμα (σχήμα 1) είτε σαν ένα Apache Module (σχήμα 2). 2. Οι ορισμοί γίνονται στο αρχείο ρυθμίσεων httpd.conf του Apache. 3. Η 1 η μέθοδος είναι ασφαλέστερη, η 2 η μέθοδος είναι ταχύτερη. 4. Στο ΠΣΔ, η PHP εκτελείται με την 1 η μέθοδο (δηλαδή σαν εξωτερικό πρόγραμμα με το πρωτόκολλο CGI/FastCGI). Αυτό δεν είναι κάτι που μπορούμε να αλλάξουμε εμείς σαν χρήστες. HTTP Request HTTP Response HTTP Request Apache Core Apache Core Web Server Web Server Εργάτης #1 Εργάτης #2 Εργάτης #1 Ερμηνευτής PHP HTTP Response Εργάτης #2 (PHP Module)

22 MySQL Είναι το 2 ο πιο δημοφιλές open-source σύστημα διαχείρισης σχεσιακών βάσεων δεδομένων. (1 ο είναι η SQLite, που περιέχεται σε όλους τους Firefox/Chrome browsers και όλες τις συσκευές Android και iphone). Επίσημη ιστοσελίδα: Προβεβλημένοι χρήστες της MySQL είναι οι: Wikipedia, Facebook, Twitter, Flickr, YouTube. Υποστηρίζει κυρίως δυο τεχνολογίες αποθήκευσης (storage engines): ISAM και InnoDB. Η τεχνολογία ISAM δεν υποστηρίζει transactions και είναι η μηχανή του WordPress. Στο μέλλον, η default μηχανή της MySQL θα είναι η InnoDB.

23 #3306 (MySQL) Database Server #3306 (MySQL) #80 (HTTP) Web Server #80 (HTTP) Web + Database Server Σύνδεση PHP και MySQL Αν ο Apache και η MySQL τρέχουν σε διαφορετικές μηχανές τότε επικοινωνούν μεταξύ τους με TCP Sockets. Αν ο Apache και η MySQL τρέχουν στην ίδια μηχανή τότε επικοινωνούν μεταξύ τους είτε με TCP Sockets είτε με Named Pipes (δεν φαίνεται στο σχήμα). HTTP Request Apache Server HTTP Request Apache Server PHP Module PHP Module HTTP Response HTTP Response MySQL Server MySQL Server

24 MySQL στο ΠΣΔ Από το επιλέξτε MySch > Πίνακας Ελέγχου > Ρυθμίσεις Βάσης Δεδομένων MySQL. Από εδώ μπορείτε να προσθέσετε ή να αφαιρέσετε βάσεις δεδομένων. Προσθέστε μια βάση δεδομένων την οποία θα χρησιμοποιήσει το WordPress. Σημειώστε κάπου το όνομα εξυπηρετητή, όνομα χρήστη, κωδικό πρόσβασης, και το όνομα της βάσης δεδομένων, καθώς θα χρειαστούν αργότερα για την εγκατάσταση του WordPress. Το κουμπί «Διαχείριση Βάσης» ανοίγει μια καρτέλα όπου μπορείτε να διαχειριστείτε τις βάσεις δεδομένων σας με το εργαλείο phpmyadmin.

25 XAMPP & Ανάπτυξη σε τοπικό περιβάλλον

26 Γιατί ανάπτυξη τοπικά? Γιατί να μην γράφουμε κώδικα απευθείας στους server του ΠΣΔ? Γιατί έτσι χρησιμοποιούμε το περιβάλλον παραγωγής (ΠΣΔ) σαν περιβάλλον ανάπτυξης και δοκιμών. Τα σφάλματα κώδικα θα είναι ορατά σε όλους τους χρήστες. Τα σφάλματα κώδικα μπορεί να ρίξουν όλο το site. Τι χρειάζεται για να κάνουμε ανάπτυξη τοπικά? Πρέπει να εγκαταστήσουμε στον υπολογιστή που γράφουμε κώδικα τον Apache Server, την PHP και τον MySQL Server. Κατόπιν να ορίσουμε στα 3 αρχεία παραμέτρων πως θα επικοινωνούν μεταξύ τους. Η διαδικασία δεν είναι απλή, οπότε είναι καλύτερο να χρησιμοποιήσουμε μια έτοιμη λύση όπως το XAMPP.

27 LAMP, WAMP και XAMPP LAMP software bundles Ακρωνύμιο των 4 πακέτων λογισμικού που συνθέτουν ένα περιβάλλον ανάπτυξης δυναμικών web sites: Linux, Apache, MySQL, PHP ή Perl ή Python Για Windows, υπάρχει το WAMP. Για Mac, υπάρχει το MAMP. XAMPP Είναι το πιο δημοφιλές LAMP. Είναι ανεξάρτητο πλατφόρμας. Είναι μια διανομή του Apache που περιέχει την MySQL, PHP και Perl. Εύκολο στην εγκατάσταση και την χρήση.

28 Ποια έκδοση του XAMPP? Η τελευταία έκδοση του XAMPP είναι η και τρέχει την PHP To XAMPP δεν τρέχει σε Windows XP! To XAMPP μπορεί είτε να εγκατασταθεί στα Program Files είτε να τρέχει σαν portable πρόγραμμα. Για να προσομοιώσουμε το περιβάλλον του ΠΣΔ θα χρησιμοποιήσουμε την παλιότερη έκδοση του XAMPP η οποία τρέχει την PHP Και μάλιστα την έκδοση USB Lite, η οποία περιέχει μόνο τα απολύτως απαραίτητα και μπορεί να εκτελεστεί ακόμα και από USB Stick. Download URL: pp-win usb-lite.zip/download

29 Εγκατάσταση και εκτέλεση Αποσυμπιέζουμε το αρχείο.zip, το οποίο περιέχει ένα φάκελο xampp. Αν αυτός ο φάκελος τοποθετηθεί σε ριζικό φάκελο (δηλ. C:\xampp ή D:\xampp κοκ) τότε δεν χρειάζεται να κάνουμε επιπλέον ρυθμίσεις. Από το φάκελο xampp εκτελούμε το αρχείο xampp-control.exe. Θα πρέπει να εμφανισθεί το παράθυρο Control Panel του XAMPP όπως φαίνεται στην εικόνα. Εκκινούμε τον Apache και τον MySQL server. Αν εμφανισθεί το παράθυρο διαλόγου του Windows Firewall, επιλέγουμε Allow Access.

30 Φάκελοι του XAMPP Φάκελος htdocs apache cgi-bin php mysql Περιγραφή Το document root του Apache. Εδώ τοποθετούμε όλα τα websites που αναπτύσσουμε, ώστε να τα «σερβίρει» ο Apache. Το εκτελέσιμο του Apache. Το αρχείο ρυθμίσεων httpd.conf του Apache βρίσκεται στον υποφάκελο conf. Εξωτερικά προγράμματα προς εκτέλεση με το πρωτόκολλο CGI. Το εκτελέσιμο της PHP. Περιέχει μεταξύ άλλων και το αρχείο ρυθμίσεων php.ini. Το εκτελέσιμο της MySQL. Στον υποφάκελο bin περιέχεται το αρχείο ρυθμίσεων my.ini. phpmyadmin Το εργαλείο διαχείρισης βάσεων δεδομένων.

31 Έλεγχος Εγκατάστασης Ελέγχουμε αν η εγκατάσταση του XAMPP έγινε κανονικά ανοίγοντας ένα browser και δίνοντας την διεύθυνση: ή Αν όλα είναι σωστά, θα πρέπει να δούμε την αρχική σελίδα του XAMPP όπως φαίνεται στην εικόνα.

32 Δημιουργία Βάσης Δεδομένων MySQL Θα διαχειριστούμε την MySQL με το phpmyadmin. Δίνουμε στον browser την διεύθυνση: Επιλέγουμε «Βάσεις Δεδομένων» και στο πεδίο ονόματος βάζουμε το ίδιο όνομα που έχουμε στο ΠΣΔ, ενώ στο πεδίο «Σύνθεση» επιλέγουμε «utf8_general_ci». Αν όλα είναι σωστά, θα πρέπει να δούμε την αρχική σελίδα του XAMPP όπως φαίνεται στην εικόνα.

33 Δημιουργία χρήστη MySQL Επιλέγουμε τη Β.Δ. που δημιουργήσαμε και κατόπιν το μενού Περισσότερα > Δικαιώματα. Επιλέγουμε «Προσθήκη νέου Χρήστη». Συμπληρώστε τα στοιχεία και δημιουργείστε το χρήστη. Τώρα έχουμε ένα τοπικό περιβάλλον ανάπτυξης το οποίο είναι παρόμοιο με το περιβάλλον του ΠΣΔ.

34 Εγκατάσταση και αρχικές ρυθμίσεις

35 Εγκατάσταση WordPress (1) Στον φάκελο \xampp\htdocs\ δημιουργείστε ένα φάκελο wp. Αντιγράψτε όλα τα αρχεία του WordPress στον φάκελο που δημιουργήσατε. Ανοίξτε ένα browser και δώστε την διεύθυνση: Το WordPress θα παραπονεθεί ότι λείπει το αρχείο ρυθμίσεων. Πατήστε «Δημιουργία» και συμπληρώστε τα στοιχεία της Β.Δ. που δημιουργήσαμε.

36 Ορισμός του wp-config.php (2) Αν η προηγούμενη μέθοδος δεν λειτουργεί, τότε: Από τον φάκελο \xampp\htdocs\wp\ βρείτε το αρχείο wp-configsample.php και μετονομάστε το σε wp-config.php. Κατόπιν ανοίξτε το με ένα text editor και συμπληρώστε τις γραμμές κώδικα με τα στοιχεία της βάσης δεδομένων που δημιουργήσατε, όπως φαίνεται δεξιά. // ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('db_name', 'angelos-ky_db1'); /** MySQL database username */ define('db_user', 'angelos-ky'); /** MySQL database password */ define('db_password', XXXXXXXX'); /** MySQL hostname */ define('db_host', 'localhost'); // Όταν ανέβει στον ΠΣΔ server, η προηγούμενη // γραμμή θα πρέπει να γίνει: // define('db_host', 'userdb');

37 Εγκατάσταση WordPress (3) Αν το βήμα (1) λειτούργησε χωρίς πρόβλημα, τότε θα δείτε την σελίδα δεξιά. Διαφορετικά δώστε στον browser την διεύθυνση: Συμπληρώστε τα στοιχεία, και πατήστε «Εγκατάσταση του WordPress». Με το τέλος της εγκατάστασης θα σας ζητηθεί να δώσετε το όνομα χρήστη και το συνθηματικό, και θα μπείτε στο περιβάλλον διαχείρισης.

38 Μετά την εγκατάσταση Το περιβάλλον διαχείρισης Η ιστοσελίδα

39 Αρχικές Ρυθμίσεις Στο περιβάλλον διαχείρισης, επιλέξτε «Ρυθμίσεις» από την αριστερή πλευρική στήλη. Κατόπιν δώστε τις τιμές που φαίνονται δεξιά στις αντίστοιχες κατηγορίες ρυθμίσεων. «Γενικά» Υπότιτλος: εδώ καλύτερα είναι να δώσετε τα στοιχεία της σχολικής μονάδας, δηλ. διεύθυνση,τηλέφωνο, φαξ, . Άτρακτος: UTC + 2 Μορφή ημερομηνίας: 04/21/2014 «Συζήτηση» Ειδοποίηση ιστολογίων που συνδέονται από άρθρα: Όχι Επιτρέπεται κοινοποίηση παραθέσεων από άλλα ιστολόγια («pingbacks», «trackbacks») : Όχι Επιτρέπονται σχόλια σε άρθρα : Όχι «Μόνιμοι Σύνδεσμοι» Θα το δούμε παρακάτω!

40 Άρθρα και Σελίδες Άρθρα Τα άρθρα χρησιμοποιούνται για περιεχόμενο το οποίο ταξινομείται ως προς τον χρόνο και συνδέονται πάντα με μια ημερομηνία. Εμφανίζονται σε αντίστροφη χρονολογική σειρά στην αρχική σελίδα και την σελίδα άρθρων. Εμφανίζονται στις τροφοδοσίες RSS (RSS feeds). Μπορούν να ταξινομηθούν σε κατηγορίες και να τους αποδοθούν ετικέτες. Παραδείγματα άρθρων: «Εκδρομή στη Θεσ/νίκη στις 4/5/2014» «Ημερίδα για την ασφαλή πλοήγηση στο διαδίκτυο» Σελίδες Οι σελίδες χρησιμοποιούνται για στατικό περιεχόμενο το οποίο δεν μεταβάλλεται στο χρόνο. Δεν οργανώνονται με ετικέτες ή κατηγορίες, μπορούν όμως να έχουν γονική σελίδα. Παραδείγματα σελίδων: «Το εργαστήριο πληροφορικής» «Διαδικασίες και δικαιολογητικά για την εγγραφή και μετεγγραφή μαθητή»

41 Κατηγορίες άρθρων Οι κατηγορίες είναι ένας τρόπος ομαδοποίησης σχετιζόμενων άρθρων. Είναι παρόμοιες με τις ετικέτες αλλά γενικότερες από αυτές. Κάθε άρθρο μπορεί να ανήκει σε 1 ή περισσότερες κατηγορίες. Οι κατηγορίες οργανώνονται ιεραρχικά, δηλαδή μια κατηγορία μπορεί να περιέχει υποκατηγορίες. Δεν είναι καλό να αφήνετε τα άρθρα αταξινόμητα (δηλ. χωρίς κατηγορία), καθώς είναι δύσκολο για τον χρήστη να βρει κάτι που ψάχνει. Πριν ακόμα γράψετε το πρώτο άρθρο, δημιουργήστε κατηγορίες. Παραδείγματα κατηγοριών: Δραστηριότητες Εκδηλώσεις Εκπαιδευτικές Αθλητικές Εκδρομές Θεατρικές Περιβαλλοντολογικές Μαθητές Εργασίες Μαθητικοί Διαγωνισμοί

42 Ετικέτες άρθρων Οι ετικέτες είναι άλλος ένας τρόπος ομαδοποίησης σχετιζόμενων άρθρων. Είναι παρόμοιες με τις κατηγορίες αλλά πιο συγκεκριμένες από αυτές. Η χρήση ετικετών είναι προαιρετική. Κάθε άρθρο μπορεί να σχετίζεται με καμία ή πολλές ετικέτες. Οι ετικέτες είναι αυτόνομες και δεν μπορούν να οργανωθούν ιεραρχικά. Παραδείγματα ετικετών: 25 η Μαρτίου πανελλήνιες θέατρο Αποφασίστε από την αρχή ποιες ετικέτες θα χρειαστείτε!

43 Πολυμέσα, εμφάνιση, πρόσθετα, χρήστες και εργαλεία Στο μενού «Πολυμέσα» μπορείτε να δείτε ή να ανεβάσετε στατικούς πόρους όπως εικόνες, βίντεο, αρχεία ήχου, αρχεία pdf/word/excel κλπ. Δυστυχώς το WordPress δεν δίνει την δυνατότητα οργάνωσης των αρχείων πολυμέσων, πέρα από την αποθήκευση τους σε φακέλους ανά μήνα και έτος. Για να έχουμε καλύτερη δυνατότητα οργάνωσης, πρέπει να εγκαταστήσουμε κάποιο πρόσθετο (Plugin). Τα πρόσθετα είναι εργαλεία που επεκτείνουν την λειτουργικότητα του WordPress. Η διαχείριση τους γίνεται από το μενού «Πρόσθετα». Το μενού «Εμφάνιση» περιλαμβάνει την διαχείριση της εμφάνισης της ιστοσελίδας, η οποία ορίζεται από το θέμα, τις μονάδες και τα μενού. Περισσότερα σε λίγο. Διαχείριση χρηστών γίνεται από το μενού «Χρήστες». Οι χρήστες μπορούν να έχουν διαφορετικούς ρόλους. Τέλος το μενού «Εργαλεία» περιλαμβάνει εργαλεία εισαγωγής σε και εξαγωγής από το WordPress. Για παράδειγμα εισαγωγή από ιστολόγιο Google Blogger.

44 Οι χαμένοι Σύνδεσμοι Οι εκδόσεις του WordPress πριν την 3.5 είχαν την δυνατότητα ορισμού εξωτερικών συνδέσμων (links), κατηγοριών συνδέσμων και το αντίστοιχο widget που τους εμφάνιζε. Για να επαναφέρουμε την δυνατότητα αυτή πρέπει να εγκαταστήσουμε και να ενεργοποιήσουμε το πρόσθετο Link Manager: Admin > Πρόσθετα > Νέο πρόσθετο. Εναλλακτικά Σύνδεσμοι μπορούν να ορισθούν δημιουργώντας Μενού που θα περιέχει συνδέσμους Παραδείγματα κατηγοριών συνδέσμων: Εκπαιδευτικό Υλικό Τοπικού Ενδιαφέροντος

45 Εμφάνιση, Θέματα και περιεχόμενο

46 Η κλασσική εμφάνιση (Layout) Η εμφάνιση μιας σελίδας WordPress ορίζεται από το επιλεγμένο Θέμα, το οποίο χωρίζει την σελίδα σε περιοχές. Η τυπική εμφάνιση μιας σελίδας είναι όπως φαίνεται στο σχήμα δεξιά. Στην Επικεφαλίδα συνήθως εμφανίζεται ο Τίτλος και ο Υπότιτλος του ιστότοπου, όπως ορίσθηκαν στις Ρυθμίσεις. Η περιοχή Μενού εμφανίζει ένα Μενού που ορίζει ο χρήστης. Η περιοχή Περιεχόμενο εμφανίζει το/τα άρθρο/σελίδα. Η περιοχή Sidebar εμφανίζει μια σειρά από «μονάδες» (widgets) που επιλέγει ο χρήστης. Τέλος το Υποσέλιδο εμφανίζει στατικά στοιχεία αλλά σε κάποια θέματα λειτουργεί σαν 2 ο Sidebar και μπορεί να εμφανίζει Widgets. Επικεφαλίδα Μενού Περιεχόμενο Υποσέλιδο sidebar

47 Σύνθετα Θέματα Καθώς οι περιοχές της σελίδας ορίζονται από το Θέμα, υπάρχουν θέματα που υποστηρίζουν πολλές περιοχές, πχ όπως φαίνεται στην εικόνα δεξιά. Μπορούμε να δούμε πόσες περιοχές υποστηρίζει το τρέχον θέμα από το μενού Εμφάνιση > Μονάδες. Τοποθετούμε μονάδες σε περιοχές απλά πιάνοντας και σέρνοντας με το ποντίκι. Μπορούμε να δούμε πόσες τοποθεσίες Μενού υποστηρίζει το τρέχον θέμα από το μενού Εμφάνιση > Μενού > Διαχείριση Τοποθεσιών. Δημιουργούμε όσα μενού θέλουμε. Σε ένα μενού μπορούμε να τοποθετήσουμε Σελίδες, Κατηγορίες, Ετικέτες, Άρθρα και Συνδέσμους. Ένα από τα Μενού θα είναι το κύριο που θα εμφανίζεται στην μπάρα «Μενού».

48 Δημιουργώντας περιεχόμενο: Σελίδες Ξεκινάμε από τις σελίδες (Σελίδες > Νέα). Πχ τις παρακάτω: Το σχολείο Εκπαιδευτικοί Υποδομές Ο τόπος μας Εκπαιδευτικό Υλικό Επικοινωνία Ορίζουμε την γονική σελίδα από το panel «Ιδιότητες Σελίδων > Γονέας». Όταν τελειώσουμε την σύνταξη, πατάμε Δημοσίευση.

49 Δημιουργώντας περιεχόμενο: Συνεχίζουμε με κατηγορίες (Άρθρα > Κατηγορίες), πχ: Δραστηριότητες Μαθητές Εργασίες Μαθητικοί Διαγωνισμοί Κατηγορίες

50 Δημιουργώντας περιεχόμενο: Άρθρα Συνεχίζουμε γράφοντας άρθρα (Άρθρα > Νέο), πχ: Αγώνες Ποδοσφαίρου στο Νυδρί Επίσκεψη στο ΚΠΕ Σφακιωτών Στον editor μπορούμε να γράψουμε HTML επιλέγοντας την προβολή Κείμενο. Μπορούμε να κάνουμε αντιγραφή από ένα έγγραφο Word και επικόλληση στον editor. Προσθέτουμε φωτογραφίες ή άλλα αρχεία με το κουμπί Προσθήκη πολυμέσων. Ορίζουμε την κατηγορία του άρθρου από το panel Κατηγορίες. Μπορούμε να ορίσουμε Επιλεγμένη Εικόνα για το άρθρο. Ελέγχουμε τον Μόνιμο Σύνδεσμο του άρθρου και τον αλλάζουμε αν δεν μας αρέσει.

51 Δημιουργώντας περιεχόμενο: 1. Επιλέξτε Εμφάνιση > Μενού. Στο πεδίο Όνομα μενού δώστε «Κύριο Μενού» και πατήστε Δημιουργία μενού. 2. Επιλέξτε το tab Διαχείριση Τοποθεσιών. Στην τοποθεσία Επάνω πρωτεύων μενού επιλέξτε το «Κύριο Μενού» που δημιουργήσατε. Πατήστε Αποθήκευση αλλαγών και κατόπιν επιστρέψτε στο tab Επεξεργασία Μενού. 3. Προσθέστε τα παρακάτω και κατόπιν αποθηκεύστε το μενού: Το σχολείο (σελίδα) Εκπαιδευτικοί (σελίδα) Υποδομές (σελίδα) Ο τόπος μας (σελίδα) Εκπαιδευτικό Υλικό (σελίδα) Επικοινωνία (σελίδα) Το κύριο Μενού

52 Ορισμός μονάδων σε sidebars 1. Από Εμφάνιση > Μονάδες ορίζουμε ποιες μονάδες (widgets) θέλουμε να εμφανίζονται και που θα τοποθετηθούν. 2. Χρήσιμα widgets είναι τα: Αναζήτηση Κατηγορίες Κείμενο Σύνδεσμοι Μενού 3. Κάθε widget έχει επιλογές παραμετροποίησης που ορίζουμε εμείς.

53 Η αρχική σελίδα: άρθρα ή στατικό περιεχόμενο? Το WordPress σχεδιάστηκε σαν μια πλατφόρμα για blogging, τώρα πια όμως είναι περισσότερο ένα CMS. Λόγω της σχεδίασης του για bloggers, η αρχική του ρύθμιση είναι η αρχική σελίδα να δείχνει τα τελευταία άρθρα. Μπορούμε όμως να ρυθμίσουμε το WordPress να δείχνει αντί αυτού μια στατική αρχική σελίδα. Δημιουργούμε δύο σελίδες, πχ «Αρχική» και «Άρθρα», χωρίς περιεχόμενο. Από Admin > Ρυθμίσεις > Ανάγνωση επιλέγουμε «Η αρχική σελίδα δείχνει σελίδα». Επιλέγουμε για πρώτη σελίδα την «Αρχική» Επιλέγουμε για σελίδα άρθρων την «Άρθρα»

54 Δείτε το αποτέλεσμα και προσαρμόστε το θέμα σας Δείτε το παραπάνω site εδώ:

55 Μεταφορά από και προς το ΠΣΔ, Backup Βάσης Δεδομένων

56 Μεταφορά στο ΠΣΔ (1): Για να μεταφέρεται από το XAMPP στο ΠΣΔ για πρώτη φορά μια εγκατάσταση WordPress: Με τον FileZilla FTP Client, ανεβάστε όλο τον κώδικα από τον τοπικό φάκελο \xampp\htdocs\wp σε ένα υποφάκελο (πχ /wp) του λογαριασμού σας στο ΠΣΔ. Βάζουμε τα αρχεία σε υποφάκελο για να μην γεμίζουμε το ριζικό μας κατάλογο στο ΠΣΔ. Διορθώστε το αρχείο wp-config.php ώστε να περιέχει τους σωστούς ορισμούς DB_NAME, DB_USER, DB_PASSWORD και DB_HOST και ανεβάστε το στο ΠΣΔ. upload κώδικα

57 Μεταφορά στο ΠΣΔ (2): Εξαγωγή Βάσης Δεδομένων 1. Αφού ανεβάσατε τον κώδικα, πρέπει να ανέβουν και τα δεδομένα από την Βάση της MySQL: Ανοίξτε σε ένα browser το phpμyαdmin του xampp: 2. Επιλέξτε την Βάση Δεδομένων του WordPress και κατόπιν το μενού «Εξαγωγή». Ζητήστε «Προσαρμογή - προβολή όλων των πιθανών επιλογών» και τσεκάρετε την επιλογή «Προσθήκη δήλωσης DROP TABLE». Πατήστε «Εκτέλεση». 3. To phpμyαdmin δημιουργεί ένα αρχείο backup της Βάσης Δεδομένων σας το οποίο μπορείτε να σώσετε. Το αρχείο backup είναι απλά ένα σύνολο από εντολές SQL που αν εκτελεστούν ξαναδημιουργούν την Βάση Δεδομένων.

58 Μεταφορά στο ΠΣΔ (3): Αντικατάσταση URL στο αρχείο backup Το αρχείο backup περιέχει URL αναφορές στον τοπικό server της μορφής οι οποίες πρέπει να αντικατασταθούν. Αν δεν έχουμε περιεχόμενο στην ιστοσελίδα, τότε μπορούμε να κάνουμε τις διορθώσεις με το χέρι (πίνακας wp_options, τιμές siteurl και home ). Διαφορετικά η αντικατάσταση των URL δεν μπορεί να γίνει με το χέρι γιατί περιέχονται σε serialized PHP objects. Πρέπει να χρησιμοποιήσουμε κάποιο εργαλείο πχ το παρακάτω online: Ορίζουμε το αρχείο backup και εκτελούμε. Μετά την μετατροπή, αποθηκεύουμε το διορθωμένο αρχείο backup. Διαβάστε περισσότερα εδώ: ss#when_your_domain_name_or_urls_change

59 Μεταφορά στο ΠΣΔ (4): Εισαγωγή της Βάσης Δεδομένων 1. Συνδεθείτε στο και επιλέξτε MySch > Πίνακας Ελέγχου > Ρυθμίσεις Βάσης Δεδομένων MySQL. Πατήστε το κουμπί «Διαχείριση Βάσης», θα ανοίξει μια καρτέλα με phpμyαdmin για την MySQL βάση του ΠΣΔ. 2. Επιλέξτε την Βάση Δεδομένων που θα χρησιμοποιήσετε για το WordPress και κατόπιν «Εισαγωγή». Επιλέξτε το διορθωμένο αρχείο backup που πήρατε στο 3 ο βήμα και εισάγετε το. Αυτό ήταν, τώρα η ιστοσελίδα σας θα πρέπει να δουλεύει στο ΠΣΔ. Μπορείτε να τη δοκιμάσετε ανοίγοντας ένα browser.

60 Αντίστροφα: Μεταφορά στο XAMPP της εικόνας του ΠΣΔ Η αντίστροφη διαδικασία (ΠΣΔ XAMPP) είναι παρόμοια: Με τον FileZilla FTP Client κατεβάζουμε τοπικά όλο τον κώδικα του WordPress από το ΠΣΔ, εκτός από το αρχείο wpconfig.php. Αντίστοιχα εξάγουμε τη βάση από το phpμyαdmin του ΠΣΔ και εισάγουμε με το phpμyαdmin του XAMPP. Αν δεν θέλετε να κάνετε αντικατάσταση των URL στο αρχείο backup, ένας σύντομος τρόπος είναι να προσθέσετε στο αρχείο wp-config.php τις δηλώσεις που φαίνονται δεξιά. // ** wp-config.php ** // // ** Ρυθμίσεις ΜΟΝΟ για τοπικό περιβάλλον ** // /** Εξαναγκασμός σε localhost */ define('wp_home', /** Εξαναγκασμός σε localhost */ define('wp_siteurl', Οι παραπάνω αλλαγές είναι μόνο για το τοπικό περιβάλλον και όχι για το περιβάλλον παραγωγής (ΠΣΔ)!!! Με αυτά τα βήματα ουσιαστικά παίρνετε ένα χειροκίνητο backup της ιστοσελίδας σας.

61 Πως το WordPress θα τρέχει από τον ριζικό κατάλογο του ΠΣΔ Το WordPress, παρόλο που έχει εγκατασταθεί σε υποφάκελο, μπορεί να τρέχει από τον ριζικό κατάλογο ως εξής: Από την διαχείριση του WordPress, επιλέξτε Ρυθμίσεις > Γενικά. Στο πεδίο «Διεύθυνση URL ιστότοπου» αλλάξτε την διεύθυνση ώστε να δείχνει στον ριζικό κατάλογο, πχ: Πατήστε «Αποθήκευση Αλλαγών» και αγνοήστε το μήνυμα λάθους. Με τον FileZilla FTP Client, αντιγράψτε τα αρχεία index.php και.htaccess στον ριζικό κατάλογο του λογαριασμού σας στο ΠΣΔ. Διορθώστε το index.php ως εξής: αλλάξτε την γραμμή 17 που γράφει: require(dirname( FILE ). /wp-blog-header.php'); σε: require(dirname( FILE ). /wp/wp-blog-header.php'); Κάντε login στην διαχείριση του WordPress και ενημερώστε τη δομή των Μόνιμων Συνδέσμων σας, ώστε το WordPress να ενημερώσει το αρχείο.htaccess. Αν η ιστοσελίδα έχει περιεχόμενο (άρθρα, σελίδες, μενού κλπ) τότε πρέπει να εκτελέσουμε τα βήματα εξαγωγής, αντικατάσταση URL και εισαγωγής στη Βάση Δεδομένων που περιγράφθηκαν προηγουμένως. Διαβάστε περισσότερα εδώ: Its_Own_Directory

62 SEO Search Engine Optimization

63 Τι είναι το SEO Search Engine Optimization. Με απλά λόγια, πως η ιστοσελίδα μας θα εμφανισθεί υψηλότερα (rank) στα αποτελέσματα μιας μηχανής αναζήτησης, όπως της Google. Το SEO είναι κυρίως κοινή λογική. Ο καλύτερος τρόπος για να πετύχουμε υψηλό ranking είναι να δημοσιεύουμε χρήσιμα άρθρα και να βάζουμε περιγραφικούς τίτλους στις εικόνες. Όση περισσότερη κίνηση έρχεται στην ιστοσελίδα μας για μια δεδομένη λέξη αναζήτησης, τόσο ψηλότερα θα ταξινομεί η Google την ιστοσελίδα μας για την συγκεκριμένη λέξη. Το WordPress παρέχει εξαιρετικό SEO από μόνο του. Οδηγίες της Google για τις καλύτερες πρακτικές SEO: gle.com/el//webmasters/docs/search-engineoptimization-starter-guide.pdf Τι μπορούμε να κάνουμε για να βελτιώσουμε το ranking μας?

64 SEO Tips Document Type Definition: Οι σελίδες HTML πρέπει να έχουν DTD, ένα από τα εξής: Strict Transitional Frameset HTML5 Η HTML πρέπει να έχει σωστή σύνταξη Τίτλος σελίδας και Headings (H1, H2 ) HTML Meta tags: author, description Δομή των URL Performance: όσο πιο γρήγορα φορτώνει η σελίδα, τόσο καλύτερη η κατάταξη της! Ορισμός του alt attribute στις εικόνες ώστε το ρομπότ αναζήτησης να καταλαβαίνει τι εικόνα είναι. Εύκολο στην ανάγνωση περιεχόμενο Κείμενο συνδέσμων Λάθος: Δείτε την προκήρυξη με κλικ εδώ. Σωστό: Δείτε την προκήρυξη. Σωστή χρήση ετικετών (WordPress tags) Χρήση του robots.txt (αρχείο που περιορίζει τη μηχανή αναζήτησης σε συγκεκριμένους φακέλους) Εργαλεία από μηχανές αναζήτησης: Google Webmaster Tools, Bing Webmaster Tools, Google Analytics, Google Page Speed κλπ.

65 Ρυθμίσεις μονίμων συνδέσμων Οι μόνιμοι σύνδεσμοι (permalinks) είναι ο τρόπος που εμφανίζονται τα URL της ιστοσελίδας σας για άρθρα, σελίδες, κατηγορίες κλπ. Από μόνο του το WordPress δημιουργεί URL της μορφής όπου στο παράδειγμα 123 είναι το κλειδί (ID) του άρθρου. Αυτό δεν είναι φιλικό ούτε για τον χρήστη ούτε για την μηχανή αναζήτησης. Θα προτιμούσαμε URL της μορφής Στο παραπάνω, τα eortes και 25-martioy λέγονται slugs Πως το κάνουμε? Admin > Ρυθμίσεις > Μόνιμοι σύνδεσμοι Ειδική δομή: /%category%/%postname%-%post_id%/ Υπάρχει πρόβλημα με τα ελληνικά στο ΠΣΔ! Τα URLs των σελίδων/κατηγοριών δουλεύουν, όχι όμως τα URLs των άρθρων! Είτε ορίζουμε χειροκίνητα το κατάλληλο slug (με λατινικούς χαρακτήρες) κατά την σύνταξη του άρθρου Είτε χρησιμοποιούμε κάποιο plugin, πχ: greeklish-permalinks universal-slugs.

66 Ping & Ενημέρωση υπηρεσιών Κάθε φορά που δημοσιεύουμε ένα άρθρο, το WordPress μπορεί να ειδοποιεί αυτόματα τις Υπηρεσίες Ενημέρωσης. Οι Υπηρεσίες Ενημέρωσης είναι υπηρεσίες που ειδοποιούν τις μηχανές αναζήτησης ότι κάποια ιστοσελίδα ενημερώθηκε, ώστε η μηχανή αναζήτησης να επισκεφθεί εκ νέου την ιστοσελίδα. Από μόνο του το WordPress ειδοποιεί την υπηρεσία Ping-o-Matic, μπορούμε όμως να προσθέσουμε περισσότερες Υπηρεσίες Ενημέρωσης. Διαβάστε περισσότερα εδώ: vices Admin > Ρυθμίσεις > Σύνταξη Ενημέρωση υπηρεσιών προσθέτουμε την Google: Ping + ΠΣΔ =?

67 Site Maps Site Map = κατάλογος σελίδων ιστότοπου (συνήθως σε μορφή XML) που είναι προσβάσιμες από χρήστη ή πρόγραμμα αναζήτησης. Η Google δημιούργησε το πρωτόκολλο Sitemaps ( το οποίο υποστηρίζεται και από τις μηχανές αναζήτησης Yahoo, Bing, Ask. Ιδανικά, κάθε φορά που δημοσιεύετε ένα άρθρο θα πρέπει να παράγεται νέο Sitemap και να υποβάλλεται πχ στην Google. Το WordPress δεν κάνει κάτι τέτοιο αυτόματα πρέπει να χρησιμοποιηθεί κάποιο πρόσθετο. Admin > Πρόσθετα > Νέο πρόσθετο Αναζήτηση για SEO Plugin δίνει πολλά αποτελέσματα. Δημοφιλή είναι το Yoast WordPress SEO και το All In One SEO, αλλά είναι μεγάλα πρόσθετα. Για την δική μας χρήση αρκεί το Google XML Sitemaps το οποίο δημιουργεί Sitemap και ενημερώνει τους Google, Bing και Yahoo με χρήση ping. Από το Sitemap εξαιρούμε σελίδες που δεν πρέπει να ευρετηριαστούν! (πχ μια σελίδα του τύπου «Ευχαριστούμε που επικοινωνήσατε μαζί μας»)

68 Performance Tuning

69 Τι συμβαίνει όταν ζητάμε μια σελίδα από το WordPress 1. Ο Apache βλέποντας ότι πρόκειται για ένα αίτημα που αφορά αρχείο.php το παραδίδει στο module που χειρίζεται την PHP (CGI module στο ΠΣΔ). 2. Το CGI module εκτελεί τον PHP Interpreter. 3. Ο PHP Interpreter φορτώνει το αρχείο index.php του WordPress, το μεταφράζει σε OpCodes (καθώς η PHP είναι ερμηνευόμενη γλώσσα) και ξεκινά να το εκτελεί. Κατά την εκτέλεση του index.php φορτώνονται, μεταφράζονται και εκτελούνται τα λοιπά απαιτούμενα αρχεία κώδικα WordPress. HTTP Request HTTP Response Apache Server Apache Core Fast CGI Module Ερμηνευτής PHP 4. Ο κώδικας του WordPress ζητά από τον MySQL Server μέσω δικτυακού TCP Socket το άρθρο / σελίδα / κοκ του αιτήματος, όπως και τις μονάδες, μενού, κατηγορίες, ετικέτες κλπ που απαιτούνται για να δημιουργηθεί η HTML σελίδα. 5. Ο κώδικας του WordPress συνθέτει μια σελίδα HTML η οποία επιστρέφεται στο CGI module σαν απάντηση. TCP Socket MySQL Server Αρχεία Κώδικα WordPress 6. Το CGI module τερματίζει τον PHP Interpreter και επιστρέφει την απάντηση (στο Fast CGI, ο Interpreter δεν κλείνει ώστε να χρησιμοποιηθεί σε επόμενο αίτημα). Β.Δ. WordPress

70 WordPress Performance στο ΠΣΔ Κατά περιπτώσεις, το WordPress στο ΠΣΔ μπορεί να αποδίδει καλά και να ανταποκρίνεται σε Σε άλλες περιπτώσεις φτάνει τα 7 10, ή δεν ανταποκρίνεται ποτέ. Το ΠΣΔ γενικά έχει κακή απόδοση, για λόγους που δεν σχετίζονται με μια συγκεκριμένη υλοποίηση ιστοσελίδας. Για παράδειγμα η ισχύς των server μπορεί να αποδίδεται κατά προτεραιότητα σε πληροφοριακά συστήματα όπως το MySchool, και να αγνοούνται οι ιστοσελίδες των σχολικών μονάδων. Επίσης το ΠΣΔ μας παρέχει Shared Hosting: ο server εξυπηρετεί όχι μόνο τις δικές μας σελίδες αλλά και πολλών άλλων. Παρά τις δυσκολίες του ΠΣΔ πρέπει να προσπαθούμε να βελτιώσουμε την απόδοση του WordPress. Η πρώτη εντύπωση από το προηγούμενο σχήμα είναι ότι για τυχόν κακή απόδοση του WordPress ευθύνεται η επικοινωνία με τον MySQL Server. Όμως από μετρήσεις που έκανα το 2012 για το site της ΔΔΕ Λευκάδας, έδειξαν ότι το 70% - 80% του χρόνου καταναλώνεται στην εκτέλεση της PHP! Χρειαζόμαστε λοιπόν να βελτιώσουμε το χρόνο εκτέλεσης του PHP κώδικα του WordPress, δουλειά του ο οποίου είναι να κατασκευάσει μια σελίδα HTML.

71 Caching στο WordPress 1. Η ιδέα είναι ότι, εφόσον δεν έχει αλλάξει ο κώδικας και δεν έχει δημοσιευθεί κάποιο νέο άρθρο ή γενικότερα δεν έχει τροποποιηθεί η Β.Δ. του WordPress κατά κάποιο τρόπο, τότε η παραγόμενη ανά URL σελίδα HTML είναι ίδια. 2. Είναι λοιπόν δυνατό να αποθηκεύονται κάπου οι σελίδες που έχουν παραχθεί (πχ σε αρχεία HTML) και να επιστρέφονται χωρίς να παράγονται εκ νέου. Αυτή τη δουλειά κάνουν τα Caching Plugins. 3. Ακόμα ταχύτερο είναι οι HTML σελίδες να αποθηκεύονται στη μνήμη! Όμως κάθε αίτημα εκτελείται από διαφορετικό instance του PHP Interpreter, και δεν υπάρχει κοινή μνήμη ανάμεσα σε 2 Interpreters για να αποθηκευθεί η παραγόμενη σελίδα. 4. Λύση σε αυτό το πρόβλημα της κοινής μνήμης δίνει το APC PHP Extension που δίνει δυνατότητα κοινόχρηστης μνήμης μεταξύ των PHP instances. 5. Εκτός αυτού το APC είναι ένας OpCode Accelerator, δηλαδή η αναπαράσταση με OpCodes ενός προγράμματος PHP αποθηκεύεται από το APC ώστε να μην χρειαστεί να μεταφρασθεί και πάλι όταν ξαναζητηθεί η εκτέλεση του. HTTP Request HTTP Response TCP Socket Apache Server Apache Core MySQL Server Β.Δ. WordPress Fast CGI Module Αρχεία Κώδικα WordPress APC Cache Ερμηνευτής PHP Caching Plugin Cached Page File

72 Caching Plugins Τα δημοφιλέστερα Caching Plugins του WordPress είναι τα WP SuperCache και W3 Total Cache. Η δική μου εμπειρία είναι με το W3 Total Cache. Εγκαταστήστε και ενεργοποιήστε το πρόσθετο W3 Total Cache. Αν μετά την ενεργοποίηση παραπονεθεί ότι δεν μπορεί να γράψει στο αρχείο.htaccess του Apache, κάντε τις ζητούμενες αλλαγές με το χέρι. Οι αλλαγές στο.htaccess είναι ήδη σημαντικές, γιατί ορίζουν ότι αρχεία τύπου Javascript, CSS, HTML και XML θα συμπιέζονται (gzip) κατά την αποστολή τους. Από το νέο μενού Performance επιλέξτε General Settings. Βρείτε το panel Page Cache και ενεργοποιήστε την cache σελίδων. Ελέγξτε το πεδίο Page cache method. Αν σας επιτρέπεται η χρήση APC Cache, δοκιμάστε αν είναι ταχύτερη από την επιλογή Disk: Enhanced. Ελέγξτε ότι στο panel Browser Cache η επιλογή είναι ενεργοποιημένη. Αποθηκεύστε τις ρυθμίσεις Για επιπλέον βελτιστοποιήσεις με το W3 Total Cache πρέπει να διαβάσετε και να πειραματιστείτε μόνοι σας.

73 Βελτιστοποίηση Θεμάτων και Πρόσθετων, Offloading Plugins: 1. όσο το δυνατό λιγότερα 2. απενεργοποίηση και διαγραφή όσων δεν χρησιμοποιούνται Θέματα: 1. αποφυγή πολλών ή/και μεγάλων σε μέγεθος εικόνων. Βελτιστοποίηση εικόνων. 2. Ενοποίηση των CSS/Javascript αρχείων σε ένα αρχείο. 3. Minified CSS/Javascript αρχεία. 4. Αποφυγή πολλών SQL Queries, πχ: όχι πολλά άρθρα στην 1 η σελίδα Offloading: Μήπως κάποια αρχεία μπορούν να σερβίρονται από άλλους server και όχι από το ΠΣΔ? Για παράδειγμα το JQuery μπορούμε να το σερβίρουμε από την Google και όχι από το ΠΣΔ. Μήπως οι στατικοί πόροι (πχ εικόνες, αρχεία.pdf κλπ) μπορούν να σερβίρονται από άλλες υπηρεσίες? Πχ εικόνες από το Google Drive ή το DropBox

74 Εργαλεία Ανάλυσης στον Browser Firebug: Firefox extension. Μεταξύ άλλων, αναλύει την κίνηση δικτύου που προκαλεί το φόρτωμα μιας σελίδας. Chrome Programmer Tools: Ενεργοποιείται με F12 ή Ctrl + Shift + I. Παρόμοιο με το Firebug. Google PageSpeed Insights: Εργαλείο της Google για ανάλυση ταχύτητας ιστοσελίδων Διαθέσιμο σαν extension για Firefox και Chrome: pagespeed/insights_extensions Εγκαταστήστε το, τρέξτε το στην ιστοσελίδα, και κατόπιν ακολουθήστε τις συμβουλές του PageSpeed.

75 Παράδειγμα: κίνηση δικτύου Chrome: Πατήστε F12 ή Ctrl + Shift + I για να ανοίξετε τα Developer Tools και επιλέξτε το Network tab. Πατήστε F5 για να ανανεωθεί η σελίδα. Το panel θα δείξει όλα τα HTTP αιτήματα που έγιναν για να φορτωθεί η σελίδα. Όπως βλέπετε στην εικόνα δεξιά, έγιναν 51 HTTP αιτήματα για να έρθουν όλα τα απαραίτητα αρχεία HTML, CSS, JS, fonts και εικόνες. Η σελίδα θα φορτώνει ταχύτερα αν μειωθεί ο αριθμός των αιτημάτων πχ ενώνοντας όλα τα CSS αρχεία σε ένα αρχείο.

76 Παράδειγμα: Page Speed Insights Chrome ή Firefox: Από τα Chrome Developer Tools ή τον Firebug το PageSpeed και πατήστε «Έναρξη Ανάλυσης». Το PageSpeed θα αναλύσει την σελίδα και θα κάνει μια σειρά προτάσεων για την επιτάχυνση της, όπως φαίνεται στην εικόνα δεξιά.

77 Τέλος 1 ης Μέρας!