אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס

עיצוב של איזורים פנימיים בתוך פוסט נקבע ע"י קובץ העיצוב style.css. אך מה אם רוצים להחיל סגנונות עיצוב שונים באיזורים שונים של פוסט? להלן טיפ קצר ופשוט שיאפשר להוסיף תיבת בחירה מותאמת אישית עם סגנונות עיצוב שהגדרנו מראש

אחת המגבלות של עורך התוכן הויזואלי TinyMCE בברירת המחדל שלו, היא שהוא לא מאפשר להגדיר סגנונות עיצוב שונים עבור איזורים שונים בפוסט. נניח שיש פסקה או כמה מילים שאנחו רוצים שיהיו עם שוליים רחבים יותר, או בפונט שונה, או עם מסגרת וכדו', איך אפשר לעשות את זה?

בברירת המחדל, העורך הויזואלי מאפשר להגדיר פורמט של הפסקה – אם היא פסקה רגילה או כותרת ברמות שונות (h1/h2/h3 וכדו') וכמו כן ניתן להגדיר את הצבע של הפונט ואת היישור שלו. אבל אם רוצים יותר מזה, זה לא מתאפשר.

מספר דרכים להוספת סגנונות עיצוב מותאמים אישית

בכל מקרה של הגדרת סגנונות עיצוב אישיים, יש צורך קודם כל להגדיר את הסגנונות האלה בגיליון העיצוב של התבנית שלנו, כלומר בקובץ style.css שנמצא בתיקיית התבנית. בנוסף, אם נרצה לראות את העיצוב הזה כבר בממשק הניהול, אז ניתן (החל מוורדפרס 3.0) להוסיף את הגדרות העיצוב האלה גם בקובץ editor-style.css (יש להפעיל תמיכה בקובץ זה בערכת העיצוב).

האפשרות האחת היא כמובן לעבור למצב של עורך html, ו"לעטוף" את הטקסט שאנחנו רוצים בפסקה או ב-span מתאימים, עם class מתאים.

אפשרות אחרת היא להתקין תוספים שונים (כמו למשל tinyMCE advanced או wp-super-edit), כאלה שיוסיפו הרבה מאוד קוד שחלקו ייתכן גם מיותר כדי לבצע את התוספת הפשוטה שאנחנו רוצים.

האפשרות שאני מעדיף, היא הוספת כמה שורות בודדות לקוד של התבנית ולקבל את מה שאנחנו צריכים.

הוספת הקוד הבא אל קובץ הפונקציות functions.php של ערכת העיצוב שלכם (או לקובץ פונקציות מותאם אישית) תוסיף תפריט סגנונות מותאם אישית בעורך הויזואלי

[ccwn_php]
function tc_add_formatTinyMCE($init) {
$init['theme_advanced_buttons2_add'] = 'styleselect';
$init['theme_advanced_styles'] = 'style friendly name=class-in-css-file, another style=another-css ';
return $init;
}

add_filter('tiny_mce_before_init', 'tc_add_formatTinyMCE' );
[/ccwn_php]

ממשק ניהול וורדפרס - סגנונות מותאמים אישית בעורך ויזואלי tinyMCE

הסבר שימוש בקוד

• בשורה 2 אנחנו קובעים לאיזו מס' שורה בעורך הויזואלי יתווסף התפריט – theme_advanced_buttons2_add, אם נרצה בשורה הראשונה, נכתוב שם buttons1 במקום buttons2.
• בשורה 3 מוסיפים את הסגנונות המותאמים האישית שאנחנו רוצים, בפורמט שמצוין שם – style friendly name זה השם שיראו בממשק הניהול, והוא יחיל עיצוב עם class בשם class-in-css-file. באותו האופן, another style יופיע בתיבת הבחירה ויחיל class בשם another-css. הקלאסים האלה כמובן צריכים להימצא בקובץ העיצוב.
• שימו לב שאם החלתם סגנון מסויים על משפט בתוך שורה, הוא יעטף עם האלמנט span, ועם עטפתם בלוק שלם, הוא ייעטף בקלאס הנ"ל עם פסקה, כך שרצוי להתייחס לשני המקרים הללו בקובץ style.css וכן בקובץ העיצוב של ה-editor.

פוסטים טובים נכתבים עם כוס קפה. הפוסט הזה סייע לך? פתר לך בעיה? אפשר להזמין אותי לכוס קפה ומאפה דרך הפייפאל ולהביע תמיכתך בתוכנה חופשית (אין חובה שיהיה לך חשבון פייפאל בשביל זה…)