WordPress WYSIWYG CSS Styles

WordPress WYSIWYG CSS Styles

Όταν δουλεύουμε με τον WYSIWYG (What You See Is What You Get) Editor του WordPress, το WordPress εφαρμόζει ορισμένα CSS attributes σε μερικά στοιχεία πριν εμφανιστούν στα άρθρα. Για παράδειγμα, όταν εισάγουμε φωτογραφίες, μπορούμε να ορίσουμε αν η φωτογραφία μας θα έχει στοίχιση αριστερά, δεξιά ή στο κέντρο. Για να το επιτύχει αυτό, το WordPress, εφαρμόζει την κλάση alignleft, alignright, ή aligncenter στην εικόνα μας.

Αν κατά την δημιουργία ενός template για WordPress δεν ορίσουμε στο αρχείο με τα CSS μας τους κανόνες για αυτά τα default attributes του WordPress, οι εικόνες και τα υπόλοιπα στοιχεία δεν θα εμφανίζονται όπως τα ορίζουμε στο WYSIWYG.

Το παραπάνω πρόβλημα λύνεται εύκολα, προσθέτοντας τους παρακάτω κανόνες στο αρχείο του θέματος μας που περιέχει τα CSS, συνήθως το style.css:

/*  WordPress WYSIWYG Editor Styles */

.entry-content img {
	margin: 0 0 1.5em 0;
	}
.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}
.wp-caption {
	margin-bottom: 1.5em;
	text-align: center;
	padding-top: 5px;
	}
.wp-caption img {
	border: 0 none;
	padding: 0;
	margin: 0;
	}
.wp-caption p.wp-caption-text {
	line-height: 1.5;
	font-size: 10px;
	margin: 0;
	}
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
blockquote.left {
	margin-right: 20px;
	text-align: right;
	margin-left: 0;
	width: 33%;
	float: left;
	}
blockquote.right {
	margin-left: 20px;
	text-align: left;
	margin-right: 0;
	width: 33%;
	float: right;
	}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Για να βεβαιωθούμε πως όλα δουλεύουν όπως πρέπει, δημιουργούμε ένα δοκιμαστικό Post στο οποίο εφαρμόζουμε όλες τις επιλογές που μας δίνει ο WYSIWYG Editor και βλέπουμε αν έχουν υλοποιηθεί όπως θέλουμε στην ιστοσελίδα μας.

Προσθήκη σχολίου