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

עורך ההודעות ב- WordPress, כפי שמשתמע משמו, נועד לאפשר לך לערוך הודעות ותוכן. כברירת מחדל, הוא אינו מאפשר להוסיף קטגוריות CSS מותאמות אישית. אם אתה רוצה להוסיף סגנונות CSS מותאמים אישית או מחלקות, הדרך היחידה היא לעבור למצב "טקסט" ולהוסיף אותו לקוד ה- HTML.

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

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

הערה : לפני שתמשיך, אני מניח שאתה מכיר HTML בסיסי ו- CSS ויכול להבין דברים כמו מחלקות CSS, אלמנטים ברמת בלוק, רכיבי HTML, תכונות וכו '.

1. באמצעות תוסף

הדרך הקלה ביותר להוסיף אפשרויות סגנון מותאם אישית בעורך ההודעה וורדפרס היא להשתמש תוסף שנקרא TinyMCE סגנונות מותאמים אישית.

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

1. כדי להתחיל, להוריד, להתקין ולהפעיל TinyMCE סגנונות מותאמים אישית כמו כל תוסף וורדפרס אחר. לאחר ההפעלה, עבור אל דף הגדרות התוסף על ידי ניווט אל "הגדרות -> TinyMCE סגנונות מותאמים אישית."

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

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

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

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

6. לאחר שתסיים, לחץ על "שמור את כל ההגדרות" כפתור המופיעים בסוף הדף.

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

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

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

כיצד למחוק טבלאות מסד נתונים שאינם בשימוש ב - WordPress

2. שיטה ידנית

אם אתה לא אוהב להשתמש plugin, אז אתה יכול להשיג את אותו הדבר על ידי הוספת קטע קוד פשוט לקובץ "functions.php" שלך. ישנם שני חלקים זה: אחד הוא להוסיף את הכפתור לסרגל הכלים כדי להוסיף קוד CSS, והשני הוא להפוך את סגנון CSS לחיות בעורך ההודעה.

הוסף לחצני סגנון CSS מותאמים אישית לסרגל הכלים

הוסף את הסוף הבא לקובץ "functions.php" שלך. קוד זה מסופק למעשה על ידי וורדפרס עצמה.

 // פונקציית Callback כדי להכניס 'styleselect' לפונקציה מערך הכפתורים $ my_mce_buttons_2 (לחצני $) {array_unshift (לחצני $, 'styleselect'); לחזור לחצנים $; } // רשום את התקשרות חזרה אל המסנן המתאים add_filter ('mce_buttons_2', 'my_mce_buttons_2'); (// init_array) {// הגדרת מערך style_formats $ style_formats = array (// כל ילד במערך הוא פורמט עם מערך ההגדרות שלו עצמו ('title' => 'תרגום', 'block', '' block ', ' 'class' '=' translation ', ' wrapper '=> true, ), array (' title '=' '⇠.rtl', 'block' => 'blockquote' 'class' = 'rtl', 'wrapper' => true, ), array ('title' = '' .ltr⇢ ', ' block '=>' blockquote ', ' classes '=>' ltr ' wrapper '=> true, ), ; // הכנס את המערך, JSON ENCODED, אל 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); החזר $ init_array; } // צרף התקשרות ל- 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

עליך להתאים אישית את הקוד כדי לשקף את אפשרויות הסגנון שלך. בקוד לעיל כל מערך הוא אופציה בסגנון נפרד. הזן את שם הסגנון שלך ליד "כותרת", סוג החסום ליד "חסום", מחלקת CSS לצד "שיעורים", ואם האלמנט הוא עטיפה, הקלד "true" ליד "עטיפה". אם לא, הקלד "שֶׁקֶר."

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

לאחר שתסיים עם התאמה אישית, לשמור ולהעלות את המתוקן "functions.php" קובץ לשרת שלך.

צור גיליון סגנונות של עורך

צור קובץ בשם "editor-style.css". כעת, הוסף סגנונות CSS רלוונטיים שברצונך לראות בעורך ההודעה. אל תשכח שכיתות ה- CSS שאתה יוצר בקובץ "editor.css" של עורך צריכות להתאים לקובצי CSS בקוד אפשרויות הסגנון הנ"ל.

עכשיו, לפתוח את הנושא של "functions.php" קובץ ולהוסיף את הקוד הבא.

 // הוסף עורך סגנונות עורך מותאמת אישית mte_add_editor_styles () {add_editor_style ('editor-style.css'); } add_action ('init', 'mte_add_editor_styles');

העלה את הקובץ "editor.css" ו- "functions.php" לשרת שלך. זה כל מה שיש לעשות. מעכשיו תוכלו להשתמש באפשרויות סגנון מותאמות אישית מעורך ההודעות של וורדפרס.