Πως να φτιάξετε το πρώτο σας responsive theme !

Πως να φτιάξετε ένα child theme!

Πρώτο Βήμα:

Φτιάξτε ένα άλλο φάκελο ονομάζοντας το με την μορφή mythemechild μέσα στο wp-content/themes .Υποθέτουμε οτι το όνομα του theme σας είναι της μορφής myparenttheme. Προσοχή το όνομα του του φακέλου του childtheme μπορεί να είναι οποιοδήποτε. Πάντως καλό θα είναι να έχει κάποια σχέση το όνομα του child theme με το όνομα του parent theme για λόγους κατανόησης από κάποιον τρίτο.

Δεύτερο Βήμα:

Εάν διαβάσατε τον οδηγό που σας δώσαμε το link παραπάνω θα καταλάβατε ότι είναι υποχρεωτική η δημιουργία του αρχείου style.css για τα  child themes. Στο φάκελο του child theme μπορείτε να έχετε επίσης αρχεία όπως το functions.php ή και άλλα template files .

Τρίτο Βήμα:

Η παρακάτω περιγραφή είναι πολύ σημαντική για την λειτουργία του child theme . Τα πεδία theme name και template είναι υποχρεωτικά για την σωστή λειτουργία του child theme . Δείτε παρακάτω ένα screenshot

1
2
3
4
5
6
7
8
9

/*
Theme Name: myParentTheme Child
Theme URI: http://abc.com/
Description: Child theme for the My parent theme
Author: Your name here
Author URI: http://abc.com/authorname/
Template: myparenttheme
Version: 0.1.0
*/

Αναλυτικότερα :

• Theme Name. (required) Όνομα του child theme.
• Theme URI. (optional) Child theme website.
• Description. (optional) Περιγραφή του child theme!
• Author URI. (optional) Ιστοσελίδα του δημιουργού.
• Author. (optional) Όνομα δημιουργού .
• Template. (required) directory Όνομα του parent template Προσοχή γιατί είναι case sensitive.
• Version. (optional) Child theme version.

Τελικό Βήμα:

1

@import url("../myparenttheme/style.css");

1
2
3
4
5
6
7
8
9
10
11
12

/*

Theme Name: myParentTheme Child
Theme URI: http://abc.com/
Description: Child theme for the My parent theme
Author: Your name here
Author URI: http://abc.com/authorname/
Template: myparenttheme
Version: 0.1.0
*/

@import url("../myparenttheme/style.css");

Κάπως έτσι δημιουργείτε ένα child theme τώρα το μόνο που έχουμε να κάνουμε είναι να το ενεργοποιήσουμε όπως όλα τα themes.

CSS3 Media Queries

Τα CSS3  φέρνουν πολλές και εξαιρετικές δυνατότητες και εύκολα και γρήγορα οι designers και οι developers μπορούν να κάνουν φανταστικά πράγματα! Προσοχή με τον ie8 επιφυλάσσει πάντα δυσάρεστες εκπλήξεις. Οι παρακάτω πληροφορίες είναι πολύ χρήσιμες για αποφυγή προβλημάτων:

1. Πάρτε το  width και height του τρέχοντος παραθύρου.
2. Τσεκάρετε αν το τηλέφωνο είναι portrait ή landscape.
3. Πάρτε την ανάλυση της συσκευής  width και height.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@media screen and (max-width:480px) {
/* Making the headings red for smartphone users */
h1 {
color: red;
}
}
@media screen and (min-width:481px) and (max-width:1280px) {
/* Making the headings Black targeting PC Users */
h1 {
color:green;
}
}
@media screen and (min-width:1281px) {
/* Making the headings red for smartphone users */
h1 {
color: black;
}
}

Πηγή :  Codrops