דף הבית » טריקים וטיפים, מומלצים

שינוי עיצובים בעורך הויזואלי של וורדפרס

26 במאי 2010 | מאת רמי | 10 תגובות | תגיות: , , , , , ,

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

טקסט ברירת מחדל בפוסטים חדשים

העורך הויזואלי של וורדפרס

דוגמא להמחשה

כאשר אנו מעצבים תבנית אנו מגדירים בין השאר סט צבעים לכותרות (H1, H2, H3 וכו'), צבעים וגבולות לפסקאות (P), מרווחים וצבעים למסגרות של תמונות (Caption), מעצבים רשימות ועוד… העיצובים שאנו מגדירים מוצגים באתר לכל הגולשים.

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

הפתרון

גרסה 3.0 פותרת בעיה זו ומאפשרת להחיל עיצובים מותאמים אישית על העורך הויזואלי (TinyMCE) בעזרת הפונקציה:

add_editor_style();

את הפונקציה נכניס לקובץ functions.php בערכת העיצוב.

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

* { font-family: arial; color: #444; line-height: 1.5; }
html .mceContentBody { max-width:640px; }

/* Text elements */
ul { list-style: square; margin: 0 0 18px -18px; }
ol { list-style: decimal; margin: 0 0 18px -18px; }
strong { font-weight: bold; color: #000; }
cite, em, i { font-style: italic; border:none; }
big { font-size: 131.25%; }
blockquote { font-style: italic; padding: 0 3em; }

a:link { color:#0066CC; }
a:visited { color:#743399; }
a:active,a:hover { color: #FF4B33; }

סיכום

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

עדכון

פוסט זה פורסם מספר שבועות לפני שחרור גרסה 3.0, בגרסה הסופית הוחלט כי הפעלת המאפיין יתבצע בעזרת הפונקציה:

add_theme_support('editor-style');

מאת רמי

אחראי על אתר וורדפרס בעברית ועל תרגום ושחרור גרסאות וורדפרס בעברית. מפתח ליבה, בכל גרסה החל מגרסה 2.8, מפתח מוביל בגרסה 4.4 ובגרסה 4.6. מספק שירותי פיתוח אתרים, פיתוח תוספי וורדפרס לסטרטאפים ופיתוח כלים למפתחי וורדפרס - GenerateWP.com.

10 תגובות »

  • חתול כותב :

    אבל הכל יעבוד רק אם מפתח התבנית יבנה אותה עם קובץ העיצוב הנ"ל.
    כלומר, ייקח עוד הרבה זמן עד שנראה את זה בפעולה.

  • רמי כותב :

    מטרת הפוסט היא להסביר לך, בונה התבנית, איך לעשות זאת.

  • צחי כותב :

    מעולה! ידוע על תאריך לשחרור של גרסה 3?

  • רמי כותב :

    כהרגלי, יצרתי בקודקס של וורדפרס ערך לפונקציה.

    http://codex.wordpress.org/Function_Reference/add_editor_style

    אתם מוזמנים להרחיב אותו.

  • איתי מקמל כותב :

    יפה, אהבתי.

  • מאור כותב :

    משום מה הפונקציה הזו לא עובדת לי כמו שצריך.
    אמנם אני רואה בview source שנעשה אינקלוד לקובץ CSS הזה, אבל נוסף לו משום מה גם פרמטר GET
    ver=327-1235

    ומשום מה שינויים שאני עושה בקובץ לא מוחלים ואני לא רואה אותם גם מופיעים בפיירבאג מתוך ה-CSS.

    מישהו נתקל בזה?

    תודה

  • רמי כותב :

    הפוסט פורסם לפני שחרור גרסה 3.0 . בטווח הזמן הזה, הוחלט לשנות את אופן הפעלת המאפיין ל-

    add_theme_support('editor-style');
  • מאור כותב :

    האמת שניסיתי קודם כבר גם עם add_theme_support('editor-style');
    , אבל הפונקציה הזו בכלל לא טוענת את הקובץ editor-style.css ומראה את העיצוב בצורה דיפולטיבית.

    הפונקציה add_editor_style מופיעה בקובץ wp-includes/theme.php בשורה 1582 ולהערכתי כן אמורה לפעול.
    היא אכן גם טוענת בJS שם את הקובץ עם כל מיני פרמטרים נוספים שם שמגיעים ב JSON, בין השאר הפרמטר שציינתי, שמתווסף כפרמטר GET לקובץ ה style וכנראה גורם שם לאיזשהו שיבוש שאני לא מצליח כרגע להבין מהו..

    ותודה על התגובה המהירה! 🙂

  • מאור כותב :

    במקרה שמישהו נוסף ייתקל בבעיה הזו – הפיתרון הוא פשוט לא להשתמש בשמות קבצי ברירת המחדל שאמורים להיות לקבצים האלה, קרי :
    editor-style.css ו- editor-style-rtl.css .

    אלא לתת שם אחר לקובץ, למשל editor-style-custom.css והשני editor-style-custom-rtl.css

    ולהוסיף בקובץ functions.php את השורה –

    add_editor_style('editor-style-custom.css');

    כשעשיתי את זה, המערכת התחילה לקבל את הנתונים מתוך הקובץ כמו שצריך
    למרות שזה אמור לעבוד רק עם הקריאה לפונקציה בלי לציין שם קובץ, כנראה יש עם זה בעיה כלשהי.

  • nina כותב :

    ?(Why can't we tipe in Hebrow (here
    How a simple man (not a programmer) with a little knowledge can implement what has been said here?

הוסף תגובה !

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

תגיות HTML מורשות לשימוש:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>