4 Τρόποι για τη βελτίωση της κινητής έκδοσης του WordPress Θέματός σας

Άρθρο που γράφτηκε από:
  • WordPress
  • Ενημερώθηκε: Ιούλιος 29, 2013

Έκδοση για κινητά WordPress

Ας αντιμετωπίσουμε την αλήθεια, οι κινητές συσκευές γίνονται όλο και πιο δημοφιλείς. Η περιήγηση στην επιφάνεια εργασίας δεν αυξάνεται πλέον, μειώνεται πραγματικά, ενώ τα κινητά αυξάνονται γρήγορα με όλα αυτά τα φοβερά έξυπνα τηλέφωνα και τα τραπέζια εκεί έξω.

Σύμφωνα με το Net MarketShare, οι κινητές συσκευές αντιπροσωπεύουν το 10% της συνολικής κυκλοφορίας ιστού. Είναι μια μεγάλη φιγούρα και είναι ακόμη μεγαλύτερη σε μερικές αγορές και χώρες. Αλλά το σημαντικό είναι εδώ η ιδιαίτερη προσοχή που χρειάζονται οι κινητές συσκευές, εξαιτίας του περιορισμένου χώρου στην οθόνη και του γεγονότος ότι οι συνδέσεις κινητής τηλεφωνίας είναι συνήθως πιο αργές από τη σύνδεση επιτραπέζιων υπολογιστών.

Πολλά θέματα του WordPress ανταποκρίνονται, αλλά ξέρετε ότι θα έχουμε πάντα περιθώρια βελτίωσης. Έτσι, εδώ θα δούμε τις τεχνολογίες 4 και τους τρόπους για να τις χρησιμοποιήσετε για να βελτιώσετε την εμπειρία κινητής τηλεφωνίας για τους χρήστες σας.

Τύποι πολυμέσων #1 Ol '

Λίγα χρόνια μετά, όταν οι IE5.5 και IE6 θεωρήθηκαν ζωντανοί, τα κινητά προγράμματα περιήγησης άρχισαν να ξεφεύγουν (και η Όπερα ήταν μακράν η καλύτερη) και οι άνθρωποι άρχισαν να συνειδητοποιούν ότι τα πράγματα έσπασαν απλά επειδή τα τηλέφωνα δεν μπορούσαν τότε επεξεργαστείτε απλά πράγματα όπως CSS (για να μην αναφέρουμε JS, φλας και ούτω καθεξής).

Έτσι, η πραγματοποίηση ενός εντελώς χωριστού χώρου για κινητά ήταν η μόνη επιλογή όταν οι τύποι μέσων ήρθαν για να μας σώσουν. Η ιδέα ήταν απλή, θα μπορούσατε να πείτε στο πρόγραμμα περιήγησης αν το αρχείο που παρέχετε είναι "προηγμένοι" κανόνες CSS (για επιτραπέζιους υπολογιστές) ή απλοί κανόνες CSS (για χειρός ή εκτύπωση). Η σύνταξη είναι τόσο απλή όσο αυτή:

<link rel = "style sheet" href = "handheld.css" τύπος = "κείμενο / css" media = "handheld" />

Αυτό μπορεί να είναι μια καλή επιλογή για να δημιουργήσετε ένα εντελώς διαφορετικό σχέδιο για τον ιστότοπό σας για κινητά. Αλλά δεν πρέπει να το χρησιμοποιήσετε.

Οι τύποι μέσων μπορεί να ακούγονται καλά στην αρχή, αλλά ένα απλό πρόβλημα ήρθε με τα σύγχρονα έξυπνα τηλέφωνα: την έλλειψη υποστήριξης του προγράμματος περιήγησης. Οι περισσότεροι μεγάλοι παίκτες απλούστατα αγνοούσαν αυτό το είδος λειτουργικότητας (όπως το μήλο)
Στη συνέχεια, τα ερωτήματα των μέσων ενημέρωσης έρχονται για να μας σώσουν.

#2 ερωτήματα μέσων και πώς να βελτιώσετε πραγματικά την εμπειρία κινητής τηλεφωνίας

Αυτός είναι μακράν ο πιο δημοφιλής τρόπος για να δημιουργήσετε μια έκδοση κινητού για τον ιστότοπό σας.

Μπορείτε να στοχεύσετε ορισμένα σημεία με βάση την οργή του μεγέθους του προγράμματος περιήγησης, το μέγεθος της οθόνης της συσκευής, την πυκνότητα των pixel (ναι, τον αμφιβληστροειδή!), Ακόμα και τους τύπους μέσων.

Εδώ είναι ένα απλό ερώτημα μέσων:

@media (μέγιστο πλάτος: 700px) {body {φόντο: κόκκινο; }}

Αυτό είναι σχεδόν το ίδιο με τον προγραμματισμό. IF "Το πλάτος του προγράμματος περιήγησης είναι 700 ή χαμηλότερο", ΤΟΤΕ Msgstr "εφαρμογή του ακόλουθου κώδικα CSS".

Θέμα παιδί

Ας δημιουργήσουμε ένα νέο φάκελο στα / themes και ονομάζουμε το twentyMobile. Ξέρω, είκοσι είκοσι ήδη χρησιμοποιεί ερωτήματα μέσων, αλλά είμαστε εδώ για να μάθουμε, έτσι δεν είμαστε;

Δημιουργήστε ένα αρχείο style.css και προσθέστε αυτό το περιεχόμενο:

/ * Θέμα Όνομα: κινητό θέμα Πρότυπο: twentytwelve * / @import url ("../ twentytwelve / style.css"); @media χειρός, μόνο οθόνη και (μέγιστο πλάτος: 767px) {nav ul {εμφάνιση: κανένας;} nav επιλέξτε {display: block}}

Πάνω από αυτό δημιουργήσαμε το θέμα CSS για παιδιά και προσθέσαμε έναν κανόνα που θα στοχεύει μόνο τις κινητές συσκευές, οι οποίες θα αποκρύψουν το κύριο μενού και θα εμφανίσουν μια επιλογή. Έτσι, εάν έχετε ένα μενού σε μια επιλογή, θα μπορούσατε να αποθηκεύσετε πολύ χώρο αντί να το εμφανίσετε ως στοιχεία ul / li

#3 Extreme makeover με το jQuery Mobile

Το jQuery mobile είναι ένα φοβερό πλαίσιο που χρησιμοποιεί τη λειτουργία jQuery για τη βελτίωση της κινητής εμπειρίας, με βελτιστοποιημένα widget και στοιχεία UI.

Η απαιτούμενη HTML o κάνει να λειτουργεί είναι αρκετά απλή, χρησιμοποιεί απλώς τα χαρακτηριστικά γνωρίσματα HTML και JS για την ανίχνευση και τη δημιουργία widgets UI.

Αλλά για να λειτουργήσει σωστά το jQuery Mobile στο blog του WordPress θα χρειαστεί πρώτα να καλέσετε το jQuery mobile script. Επιστρέφοντας στο θέμα του παιδιού μας, αντιγράψτε το αρχείο header.php του κεντρικού θέματος και προσθέστε αυτές τις γραμμές στην ετικέτα κεφαλίδας:

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ script>

Θα πρέπει να αναφέρω ότι για εμπορικές προτάσεις θα πρέπει να χρησιμοποιήσετε wp_enqueue _script, έτσι θα αποφύγετε την αναπαραγωγή βιβλιοθηκών στον ιστότοπό σας.
Τώρα μπορούμε να παίξουμε με σχεδόν οποιοδήποτε στοιχείο UI που θέλετε. Το jQuery mobile διαθέτει πολλά widgets UI που μπορείτε να χρησιμοποιήσετε σε ένα θέμα, αλλά ας εφαρμόσουμε τη σελίδα και τα πτυσσόμενα πλαίσια.
Αυτή είναι η βασική σύνταξη HTML:

</ div> </ div> <div data-role = "footer"> </ div> div> </ div>

Με αυτόν τον κώδικα θα δημιουργήσετε μια νέα "σελίδα" και τις περιοχές κεφαλίδας, περιεχομένου και υποσέλιδου. Η κεφαλίδα και το υποσέλιδο είναι σταθερά και το περιεχόμενο θα αλλάξει με βάση την τρέχουσα σελίδα, ώστε να μπορείτε να φορτώσετε πολλαπλές σελίδες μία φορά και απλά να τις αποκρύψετε αναθέτοντας διαφορετικά αναγνωριστικά.
Αυτό είναι το βασικό κώδικα HTML για πτυσσόμενα πλαίσια:

</ div> </ div> </ div> </ div> <div data-role = "collapsible-set"

Είναι αρκετά απλό να εφαρμόσετε έναν βρόχο εκεί, έτσι δεν είναι; Λοιπόν, ο κώδικας σας θα μοιάζει με αυτό:

<div δεδομένα-ρόλος = "συρρικνούμενο σύνολο"> <; ενώ (have_posts ()) {...?> <div data-role = "πτυσσόμενο" data-collapsed = "true"> </ div> <? ...};> </ div>

Το επιλεγμένο μενού αναθεωρήθηκε

Με τον κώδικα που έχουμε δει παραπάνω (στην ενότητα ερωτημάτων μέσων) θα μπορούσατε να αποκρύψετε το συνηθισμένο μενού σας και να εμφανίσετε ένα ειδικό μενού επιλογής. Το jQuery σας επιτρέπει να το προσθέσετε χωρίς πολύ PHP κώδικα (για να είμαστε ειλικρινείς δεν θα χρειαστείτε καθόλου PHP). Ας δημιουργήσουμε ένα νέο αρχείο και προσθέσουμε αυτόν τον κώδικα:

jQuery (συνάρτηση ($) {// όταν το DOM είναι έτοιμο $ (document) .ready (function () {// ας δημιουργήσει το στοιχείο επιλογής $ ("<select />").appendTo("nav" / Με τη νέα επιλογή, πηγαίνετε στο ... $ ("<option />", {"value": "", "text": "Go to ...")) appendTo (" / (Τώρα έχουμε το επιλέξει δημιουργηθεί ας το συμπληρώσουμε: $ ("nav .menu a") κάθε (λειτουργία () {// για κάθε LINK που βρίσκετε στο μενού var aux = $ (this) /> ", {" value ": aux.attr (" href ")," html ": aux.text ();}) appendTo (" · // τότε ορίσαμε τη λειτουργικότητα dropdown να ανακατευθύνει όταν επιλέγουμε ένα νέο στοιχείο $ ("nav select"). change (function () {window.location = $ (this) .find ("επιλογή: επιλεγμένο") () ·}) ·});

Κάνοντας αυτό θα δημιουργηθεί ένα νέο μενού για κινητά, ΑΛΛΑ ΤΟ πρόβλημα είναι ότι φορτώνουμε το jquery κινητό ακόμη και στην "κανονική" έκδοση του site. Γι 'αυτό μπορούμε να χρησιμοποιήσουμε και μερικά πρόσθετα για να μας βοηθήσουν να βελτιώσουμε τον ιστότοπό μας.

#4 - Τυλίξτε τα πάντα με το Mobile Detector

Αυτό το υπέροχο plugin δημιουργεί μια νέα λειτουργικότητα που μας επιτρέπει να φορτώνουμε υπό όρους θέματα ανάλογα με τη συσκευή χρήστη. Και λειτουργεί με απλούς κανόνες υπό όρους, όπως αυτό:

<? php αν (MobileDTS :: είναι ('android')) {....} elseif (MobileDTS :: είναι ('κινητό')) {....}

Η μέθοδος MobileDTS ελέγχει την τρέχουσα συσκευή και στη συνέχεια επιστρέφει ένα απλό true / false. Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε μια μαγική λειτουργία που ονομάζεται switch_theme () για να ορίσετε ένα νέο θέμα και μπορείτε να χρησιμοποιήσετε όρους συνθηκών όπως το MobileDTS :: is_switcher_enabled () για να δημιουργήσετε έναν σύνδεσμο σε μια έκδοση για υπολογιστές όταν χρησιμοποιείτε κινητά, για παράδειγμα.

Συμπέρασμα

Έτσι, έχετε χρησιμοποιήσει ποτέ κινητά plugins ή λειτουργίες στο WordPress θέμα σας; Ποια μέθοδος προτιμάτε; Μην ντρέπεστε και μην μοιραστείτε τις σκέψεις σας!

Άρθρο από τον Rochester Oliveira

Είμαι σχεδιαστής ιστοσελίδων και επιχειρηματίας από την Itajubá (MG), τη Βραζιλία. Μου αρέσει να γράφω για τα σκοτεινά θέματα και να κάνω μερικά δροσερά πράγματα.

Συνδέομαι: